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

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.
Project Structure:
- Organize the project with separate directories for components, styles, and public assets.
- Create individual components for each section of the landing page.
Header Section:
- Display the main heading: "Steinbruch Fest."
- Include the dates: "16. + 17. Aug."
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."
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.
Contact Section:
- Address: Grazerstraße 355, 8240 Friedberg.
- Embed a Google Maps card showing the location.
- Include a note: "Bei Schlechtwetter im Sportzentrum Friedberg."
Footer Section:
- Impressum: Freiwillige Feuerwehr Friedberg, Grazerstraße 355, 8240 Friedberg, kdo.008@bfvhb.at.
- Sponsor logo: "pfeffer & partner."
Cookie Banner:
- Implement a cookie information banner to comply with privacy regulations.
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

Metadata

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

3.2 KiB Raw Permalink Blame History