📝 Frontend Test Task: Ecosolution Landing Page

🚀 Objective:
Develop the Ecosolution landing page according to the provided technical specifications.

---

🛠 Technology Stack

• React (as the primary framework)

---

📂 Resources

1. 🎨 Figma Design (Final Tab)
2. 📑 Technical Specifications Document

---

🔹 Project Requirements & Components

🧭 Header

✅ Fixed Navigation Bar:

• Contains a logo, burger menu, and a "Get in touch" button (hidden on mobile).
• The background color changes on scroll (refer to the UI Kit).
• Clicking "Get in touch" smoothly scrolls to the Contact Us section.

✅ Burger Menu:

• Includes a close button, navigation links, and social media icons.
• Clicking a menu item smoothly scrolls to the respective section.
• Covers the full screen with equal padding at the top and bottom (per mockup).
• The tablet version should resemble the desktop layout.

---

📌 Main Section

• Clicking "Learn More" smoothly scrolls to the Cases section.

---

💡 About (Values) Section

• Implement CSS Grid for value list layout.
• On mobile, only the values are displayed (without photos).

---

⚡ Electricity Section (Optional Extra Feature)

• Implement an automatic counter that increments by 1 per second (instead of static numbers).

---

🎞️ Cases Section

✅ Infinite Slider:

• Supports both clickable buttons and dragging to change slides.
• Clicking the navigation button scrolls one slide at a time.

---

❓ FAQ Section

• By default, the first answer is open.
• Only one answer can be open at a time.
• FAQ answers are provided in Figma comments.
• Clicking "Contact Us" smoothly scrolls to the Contact Us section.

---

📩 Contact Us Section

✅ Form Validation:

• Required fields: Full Name, E-mail, Phone
• Optional field: Message
• After submission, a confirmation message should appear.

---

📌 Footer

• Contains an arrow button that scrolls smoothly to the Main Section when clicked.

---

✅ Acceptance Criteria

📐 Layout

• Fixed pixel-based design (not percentage-based).
• Pixel-perfect implementation based on the Figma mockup.

🔍 Semantic & Valid HTML

• Ensure clean, semantic HTML with basic accessibility settings (a11y).

📱 Responsive & Cross-browser Compatibility

• Mobile: 360px to 480px (responsive, stretching layout).
• Tablet: 768px
• Desktop: 1280px
• Mobile-First Approach should be followed.

🧼 Clean Code

• Well-structured and formatted code (recommended: ESLint & Prettier).

📦 Component-Based Architecture

• Use a modular approach by breaking the UI into components.

---

💡 Bonus: Impress us with smooth animations, optimized performance, and extra attention to UI details!