Create Tab Navigation with Interactive Components

[Soham-Donode]

🚀 Welcome Contributors!

Your task is to create a functional Tab Navigation bar with interactive hover states and a sliding indicator that transitions between different pages, following the method shown in the provided tutorial.

The Design & Behavior:

• Visual: A navigation bar with three tabs: Home, Service, and Reach.
• States: Each tab must have three distinct states:

1. Default: Deep blue text color.
2. Hover: Light blue background fill.
3. Selected: A blue underline indicator at the bottom.

• Interaction: * Hovering over a tab triggers a subtle color change.

• Clicking a tab navigates the user to the corresponding page/frame.

• Feel: Use Smart Animate with an "Ease Out" curve (50ms - 100ms) for smooth, professional transitions.

---

📚 Learning Resources (How to do this)

Below is a youtube video which explains how to do this :
https://www.youtube.com/watch?v=Z2agbDaKaQc

---

📝 Submission Guidelines

To successfully merge your contribution, please follow these rules strictly:

1. The Folder: Navigate to the folder named: 2-tab-navigation
2. The File: Create a new text file named <your-github-username>.txt.
3. The Content: The file must contain your Figma link in the following format:
   Figma link - <your-live-figma-link>
4. Permissions: Ensure your Figma link permissions are set to "Anyone with the link can view" so the maintainers can review your work.

Example of how johndoe.txt should look:

Figma link - (your-link)

Directory Structure Example:

Repo Root
└── 2-tab-navigation/
    └── <your-github-username>.txt

Happy Prototyping! 💫