Step 1: Updating Navigation Links

The navigation links are organized into categories and pages.

Main Navigation Categories

Find the navigation object at the top:

const navigation = {
  categories: [
    {
      name: "Link",
      featured: [
        { name: "Gadgets", href: "#" },
        { name: "Accessories", href: "#" },
      ],
      collection: [
        { name: "All Products", href: "#" },
      ],
      categories: [
        { name: "Daily Use", href: "#" },
        { name: "Modern Life", href: "#" },
      ],
      brands: [
        { name: "NovaTech", href: "#" },
        { name: "Axon", href: "#" },
      ],      
    },
  ],
  pages: [
    { name: "About", href: "#" },
    { name: "Contact", href: "#" },
  ],
};

How to Update:

1. Categories: Update name and add more links under featured, collection, categories, or brands.

2. Pages: Add standalone links under pages.

Example:

{
  name: "Shop",
  featured: [{ name: "Bestsellers", href: "/bestsellers" }],
  collection: [{ name: "New Arrivals", href: "/new-arrivals" }],
  categories: [{ name: "Work Gear", href: "/work-gear" }],
  brands: [{ name: "ForgeLine", href: "/forgeline" }],
}

Step 2: Customizing the Logo

The logo is handled by the Logo component:

<Logo
  logoType="image"
  logoSrc="/UI Now Mark.svg"
  text="UI Now"
  showTextWithImage
/>

How to Update:

• logoSrc: Change the path to your logo image.

• text: Replace "UI Now" with your brand name.

• showTextWithImage: Set to false if you only want the logo image.

Example:

<Logo logoType="image" logoSrc="/my-logo.png" text="My Brand" showTextWithImage />

Step 3: Updating Buttons

Sign-In Button

The sign-in button uses the ButtonSignin component:

<ButtonSignin text="Sign In" />

• Update the text prop to change the button label.

Contact and Call-to-Action Buttons

<Button href="#" size="sm" variant="ghost">
  Contact
</Button>

• Update href with the destination URL.

• Modify variant to change the button style (e.g., solid, outline, ghost).

Step 4: Mobile Menu

The mobile menu uses Headless UI with Framer Motion for animations.

Tabs for Categories

The mobile menu dynamically creates tabs based on the navigation.categories:

<TabList>
  {navigation.categories.map((category) => (
    <Tab key={category.name}>{category.name}</Tab>
  ))}
</TabList>

How to Update:

• Add categories in the navigation object.

• Links inside tabs (e.g., featured, categories) are controlled by the same navigation data.

Close Mobile Menu

The menu can be closed using this button:

<button onClick={() => setOpen(false)}>
  <XMarkIcon />
</button>

Step 5: Social Media Icons

Update the social media links in the SocialMediaIcons component:

<SocialMediaIcons
  youtube="https://youtube.com/#"
  tiktok="https://tiktok.com/#"
  twitch="https://twitch.com"
/>

• Replace the links for each platform with your URLs.

• Add/remove platforms as needed.

Step 6: Styling the Navigation

The navigation uses Tailwind CSS for styling. Key classes include:

1. Background Color:

   • bg-white: Change to bg-gray-900 for a dark background.

2. Text Colors:

   • text-gray-900: Update to text-white for light text.

3. Hover States:

4. Border Styles:

   • Adjust border thickness or colors:

Step 7: Animations

The component uses Framer Motion for smooth animations.

Mobile Menu Animation

<motion.div
  initial={{ opacity: 0, y: -10 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -10 }}
>

• Adjust duration or y values to customize the open/close speed and direction.

Testing the Navigation

1. Run the app locally:

2. Check Responsiveness:

   • Verify the menu works on both mobile and desktop screens.

3. Test Links:

   • Ensure all links lead to the correct pages.

Final Thoughts

By following this guide, you can:

• Update navigation categories, links, and buttons.

• Replace the logo and social media links.

• Customize the styling and animations to match your brand.