🌐 fixal-ui-web/README.md

# Fixal UI Web

A lightweight component library for modern React and Next.js web apps.

## 🚀 Installation

```bash
npm install fixal-ui-web

📘 Fixal Navbar

The FixalNavbar is a fully responsive, theme-aware, customizable navigation component built with plain CSS and React. It supports multiple layouts, mobile toggling, dark/light themes, dropdown menus, and developer-friendly customization options.

⚙️ Usage Example

import FixalNavbar from 'fixal-ui-web/FixalNavbar';
import logo from './assets/logo.svg';

const App = () => {
  return (
    <FixalNavbar
      layout="split"
      theme="dark"
      sticky={true}
      logo={<img src={logo} alt="Fixal" />}
      links={[
        { label: 'Home', href: '/' },
        { label: 'About', href: '/about' },
        {
          label: 'Services',
          href: '/services',
          submenu: [
            { label: 'Web Development', href: '/services/web' },
            { label: 'Mobile Development', href: '/services/mobile' }
          ]
        }
      ]}
      cta={{ label: 'Contact Us', href: '/contact' }}
      customStyles={{
        navbar: { backgroundColor: '#1a1a1a' },
        link: { fontSize: '16px', color: '#fff' },
        button: { backgroundColor: 'crimson' }
      }}
    />
  );
};

🧩 Props

| Prop | Type | Default | Description | |----------------|-------------|-------------|-------------| | layout | string | 'basic' | Layout style of the navbar. Options: 'basic' (logo left, links right), 'centered' (logo and links stacked), 'split' (logo left, links center, CTA right) | | logo | ReactNode | — | JSX element for logo (image or text) | | links | array | [] | Navigation links array. Each item should have label and href, and optionally submenu (an array of similar objects) to create dropdowns | | cta | object | null | Call-to-action button with { label, href } | | theme | string | 'light' | Color theme: 'light' or 'dark' | | sticky | boolean | true | If true, navbar stays fixed at the top while scrolling | | customStyles | object | {} | Object for overriding default styles for sections like navbar, link, dropdown, etc. |

📂 Layout Variants

• basic: Logo on the left, navigation links on the right
• centered: Logo centered above or between navigation links
• split: Logo on the left, navigation links centered, CTA button on the right

📑 Submenu Support

To add dropdown functionality, simply include a submenu array within any links item. Each submenu item should also contain a label and href. Example:

links: [
  {
    label: 'Services',
    href: '/services',
    submenu: [
      { label: 'Web Development', href: '/services/web' },
      { label: 'Mobile Development', href: '/services/mobile' }
    ]
  }
]

The dropdown will automatically render under the parent link.

📱 Mobile Support

• Hamburger toggle on small screens
• Responsive dropdown menus
• Mobile-first design principles
• Keyboard-accessible navigation

🎨 Styling Example

customStyles={{
  navbar: { backgroundColor: '#000' },
  link: { color: '#fff' },
  button: { backgroundColor: 'blue' },
  dropdown: { backgroundColor: '#222' },
  dropdownItem: { color: '#ccc' }
}}

🔧 Customization Tips

• You can override any part of the component using the customStyles object
• Use your preferred router by replacing react-router-dom with next/link or custom link logic
• Add animations to .dropdown or .nav-links.open in CSS for smoother UX

Start building fast and flexible web navigation with FixalNavbar today 🚀

📘 FixalFeatures Documentation

FixalFeatures is a responsive, animated React component used to showcase a set of features on your landing page or product site. It supports multiple layouts, icons or images, scroll reveal animations, and optional highlight states.

⚙️ Usage Example

import FixalFeatures from 'fixal-ui-web/FixalFeatures';
import IconRocket from './icons/IconRocket';

const featuresData = [
  {
    title: 'Fast Performance',
    description: 'Experience lightning-fast load times.',
    icon: <IconRocket />
  },
  {
    title: 'Customizable',
    description: 'Easily tailored to your needs.',
    img: '/images/customize.svg'
  }
];

const App = () => (
  <FixalFeatures
    type="dark-glow"
    title="Our Core Features"
    description="Fixal brings power, flexibility, and simplicity."
    features={featuresData}
    highlightedIndex={0}
  />
);

🧩 Props

| Prop | Type | Default | Description | |-------------------|------------|-----------------|-------------| | type | string | 'grid' | Layout style. Options: 'grid' or 'dark-glow'. | | title | string | 'Our Features'| Section header text | | description | string | '' | Optional section description | | features | array | [] | Array of feature objects. Each item supports title, description, img, or icon. | | highlightedIndex| number | null | Optionally apply a highlighted style to a specific feature card |

🎨 Feature Item Format

Each item in the features array should follow this shape:

{
  title: 'Feature Title',
  description: 'Feature description.',
  img: '/path/to/image.svg', // OR
  icon: <SomeIconComponent />
}

✅ You can use either img or icon. If both are provided, img takes precedence.

🧪 Layout Types

• grid: Clean card layout, ideal for light backgrounds
• dark-glow: Glowing effect cards suitable for dark or neon UI themes

✨ Animations

Each card is revealed on scroll using useScrollReveal. You can style .reveal-visible in your CSS to control the effect.

.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

💡 Highlighting a Card

Use highlightedIndex={0} to highlight the first feature, for example. This adds a .highlighted class to that card for extra styling.

🔧 Customization

You can override or extend styling in fixal.css:

.fixal-feature-card.highlighted {
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

🧠 Tips

• You can use dynamic images or SVGs for icons
• Combine with FixalNavbar, FixalHero, or FixalContact for a complete landing page

Start showcasing your app’s strengths with FixalFeatures ✨