quarry-party-landing-page-react/ai_docs/007_mobile_fixes.md

Add Burger Menu and Fix Hero Section Cut-off

Task ID: 007 Date Created: 2025-07-03 Author: Gemini

---

Task Description

This task addresses two issues: ensuring the hero section is not cut off in mobile view and confirming the implementation of a burger menu for mobile navigation.

---

Instructions

• Modified src/components/sections/Hero.tsx to use min-h-screen instead of h-screen to prevent content from being cut off on smaller screens.
• Verified that the burger menu functionality is already implemented in src/components/layout/Header.tsx using useState and conditional Tailwind CSS classes for responsiveness.
• Run the linter to check for any new issues.

---

Input Data

• src/components/sections/Hero.tsx: The Hero section component.
• src/components/layout/Header.tsx: The Header component containing the navigation.

---

Expected Output

• The Hero section should display correctly on all screen sizes without content being cut off.
• The burger menu in the header should function as expected on mobile devices, toggling the navigation links.
• No linting errors should be introduced.

---

Constraints & Requirements

• The changes must maintain the existing design and responsiveness.
• The burger menu should be intuitive and functional.

---

System Instructions (Optional)

You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.

---

References (Optional)

• src/components/sections/Hero.tsx
• src/components/layout/Header.tsx
• ai_docs/images/failure_cut_off_hero_section.png

---

Metadata

Key	Value
Priority	High
Status	Completed
Tags	mobile, responsive, hero section, burger menu

---