As discussed, this assignment is to build the UI based on the Figma file using React.
Each section must be built as a separate, reusable component, and completed in priority order.
Figma Link:
https://www.figma.com/design/cK4QMEnU4nkEmstbJSTIFz/UI-file?node-id=0-1&p=f&t=fhaNjIJzd4Ehskn4-0
Build a mobile-responsive and accessible UI in React, matching the Figma design.
Use component-based structure, clean code, and simple state/logic.
You may use TailwindCSS or CSS modules and SwiperJS for sliders.
| Priority | Component | Description | Deliverable |
|---|---|---|---|
| 1️⃣1 | Navbar | Responsive header with logo, nav links, and mobile menu toggle. | React Navbar component with full responsiveness. |
| 2️⃣1 | Accordion | Expand/collapse sections with smooth animation; one open at a time. | Accordion + AccordionItem components. |
| 3️⃣2 | Tabs | Switch content panels without page reload. | Tabs, TabList, TabPanel components. |
| 4️⃣3 | Slider | Auto-sliding carousel using SwiperJS. | HeroSlider component. |
| 5️⃣4 | Contact Form | Simple React form with strict validation. | ContactForm component. |
| 6️⃣5 | Remaining Sections | Any other sections from Figma. | Additional React components as per design. |
Build a clean React ContactForm component with: