104 lines
3.2 KiB
Markdown
104 lines
3.2 KiB
Markdown
# 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 |
|
|
|
|
---
|