Comprehensive UI Design Breakdown

I will provide you with a Figma design link. Please carefully analyze the layout, typography, color scheme, spacing, and component structure. Requirements: - Tech stack: React with Tailwind CSS . - Use proper folder structure: /components, /styles, /assets. - Break the UI into reusable components (e.g., Navbar, Hero, FeatureSection, Footer, etc.) — name them exactly as shown in the Figma layers. - Your first response should include a breakdown of all planned components and files. - After I confirm, generate code: • Use JSX . • Match Figma styling pixel-perfect using Tailwind utility classes. • Import all images and assets correctly (maintain sizing and positioning). • Ensure responsive layout: mobile, tablet, desktop. • Add interactions if specified (e.g., hover effects, animations, toggles). Additional Notes: - Follow atomic component structure if applicable. - Avoid placeholder content; use actual text/images from Figma. - Ensure the final code is production-ready and runs with `npm run dev` or `npm start`. I will provide feedback per component if anything is missing or incorrect — please update only that part accordingly. Let’s begin once I share the Figma link: https://www.figma.com/design/0Dayh3cOIvFJvW3j5oGXQn/Desgin?node-id=25-3101&t=HpqZXJ3oAh4SlrLs-4