# Task Title

**Task ID:** `quarry-party-landing-page-react-001`
**Date Created:** `2025-07-03`
**Author:** `Gemini`

---

## Task Description

The objective of this task is to create a new React landing page for the "Steinbruch Fest" hosted by the Freiwillige Feuerwehr Friedberg. The landing page will be built using Next.js and styled with Tailwind CSS v4, ensuring a mobile-first design. All information from the provided flyer will be incorporated into the page, including a Google Maps card in the contact section and a cookie information banner.

---

## Instructions

1.  **Initialize Next.js Project:**
    *   Create a new Next.js application using `npx create-next-app@latest`.
    *   Set up the project with TypeScript and Tailwind CSS.

2.  **Project Structure:**
    *   Organize the project with separate directories for components, styles, and public assets.
    *   Create individual components for each section of the landing page.

3.  **Header Section:**
    *   Display the main heading: "Steinbruch Fest."
    *   Include the dates: "16. + 17. Aug."

4.  **Program Section:**
    *   **Saturday:**
        *   Start time: 19:00.
        *   Music from 21:00 by "LAUSER."
    *   **Sunday:**
        *   Holy Mass at 8:45 with music by "MGV Wechselklang."
        *   Followed by a "FRÜHSCHOPPEN" with the "Stadtkapelle Friedberg."

5.  **Information Section:**
    *   Ticket prices: VVK €10,- / AK €12,-.
    *   Ticket sale locations: Trafik Gressenbauer, Der Salon - Monika Krammer, Tapeziermeister Michäler, FF-Mitglieder.
    *   Charity information: The proceeds will be used to finance vehicles and equipment for the fire department.

6.  **Contact Section:**
    *   Address: Grazerstraße 355, 8240 Friedberg.
    *   Embed a Google Maps card showing the location.
    *   Include a note: "Bei Schlechtwetter im Sportzentrum Friedberg."

7.  **Footer Section:**
    *   Impressum: Freiwillige Feuerwehr Friedberg, Grazerstraße 355, 8240 Friedberg, kdo.008@bfvhb.at.
    *   Sponsor logo: "pfeffer & partner."

8.  **Cookie Banner:**
    *   Implement a cookie information banner to comply with privacy regulations.

9.  **Styling:**
    *   Use Tailwind CSS v4 for all styling.
    *   Ensure a mobile-first and responsive design.

---

## Input Data

-   **Image:** `@ai_docs/images/Flyer.jpeg`
-   **Template:** `@ai_docs/templates/task_template.md`

---

## Expected Output

A fully functional and styled Next.js landing page that includes all the information from the flyer, is mobile-friendly, and features a Google Maps card and a cookie banner.

---

## Constraints & Requirements

-   **Framework:** Next.js
-   **Styling:** Tailwind CSS v4
-   **Design:** Mobile-first

---

## System Instructions

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

---

## References

-   [Next.js Documentation](https://nextjs.org/docs)
-   [Tailwind CSS Documentation](https://tailwindcss.com/docs)
-   [Google Maps Embed API](https://developers.google.com/maps/documentation/embed/get-started)

---

## Metadata

| Key             | Value            |
|-----------------|------------------|
| Priority        | High             |
| Status          | Open             |
| Tags            | React, Next.js, TailwindCSS, Landing Page |

---