# 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 |

---