🚀 Frontend Intern Task: Pixel-Perfect Landing Page (React + Vite + Tailwind)

📌 Task Title:

Landing Page Development — Pixel-Perfect Figma to React (Vite + Tailwind)

---

📝 Task Description:

You are required to build a fully responsive landing page using React with Vite and Tailwind CSS, based exactly on the shared Figma design. The objective is not just functionality, but precision—every detail must match the Figma 1:1.

You are expected to complete as many sections as possible from the Figma file within the given timeline. Quality and accuracy over quantity.

👉 Figma Design Link: Open Figma

---

✅ Task Requirements:

• Use React + Vite as the development framework.
• Use Tailwind CSS for all styling.
• Build only the components/pages visible in the Figma file.
• Ensure your code is clean, modular, and readable.
• The page must be responsive, matching Figma’s desktop and mobile layouts (if provided).
• The final UI should be pixel-perfect — fonts, colors, paddings, spacings, alignments, shadows, and other visual properties must match exactly with Figma.
• Create reusable and semantic components (e.g., Button, Navbar, Card, etc.).
• Do not use external component libraries like MUI, Bootstrap, etc.
• All assets (fonts/images/icons) must be extracted from Figma and used properly.

---

📁 Folder/Code Structure Guidelines:

src/
├── assets/         # Images, icons, fonts from Figma
├── components/     # Reusable components (Button, Navbar, etc.)
├── pages/          # Main page(s) like LandingPage.jsx
├── App.jsx
├── main.jsx
└── index.css       # Tailwind base config

---

🔍 Evaluation Criteria:

• 🔹 Accuracy to Figma (1:1 implementation)
• 🔹 Code Quality (clean, readable, componentized)
• 🔹 Responsiveness
• 🔹 Usage of Tailwind best practices
• 🔹 No unnecessary code or unused files
• 🔹 Proper folder/component structure

---

📦 Deliverables:

1. Create a new branch in this repository.
2. Push your code to that branch.
3. Create a Pull Request (PR) to the main branch in this same repo with:
   • Your Full Name
   • Your Role (e.g., Frontend Intern)
   • A short description of what sections you have implemented
   • Screenshots (optional but preferred)

Example PR Title:
[Frontend Intern] Full Landing Page - John Doe

---

🕒 Timeline:

• ⏰ 3 Days
• Complete as many sections as possible from the shared Figma within this time
• Prioritize quality and pixel-perfect accuracy

---

🚫 Common Mistakes to Avoid:

• Using incorrect font weights or colors
• Ignoring spacing/margin/padding mismatches
• Hardcoding styles instead of using Tailwind
• Not making components reusable
• Not maintaining responsiveness