example - seed prompt landing page endlagerung

# 🤖 Coding Agent Prompt: Create "endlagerung.com" Website Hello coding agent! Please create a comprehensive website called "endlagerung.com" focused on nuclear waste repository information in Germany. This site should be informative, accessible, and official in tone while following these specifications: ## PAGE STRUCTURE & LAYOUT **Overall Design Pattern:** Single-page application with smooth navigation through distinct sections **Color Scheme:** - Primary: #1976D2 (Material Design Blue) - Secondary: #FFFFFF (White) - Accent: #2196F3 (Light Blue) - Background: light/dark toggle available - Text: #212121 (Near Black) for light mode, #E0E0E0 (Light Gray) for dark mode **Typography:** - Headings: Roboto (modern-sans) - Body: Roboto (readable-sans) - Size Scale: moderate with increased options for accessibility --- ## HEADER SECTION **Layout:** Sticky navigation bar **Logo:** Left - "endlagerung.com" with atom icon **Navigation Menu:** Horizontal for desktop, hamburger for mobile - Menu Items: ["Startseite", "Endlagersuche", "Bürgeranfragen", "Atomkraft", "Rechtliche Rahmenbedingungen"] **CTA Button:** "Dunkel/Hell Modus" - toggle switch **Accessibility Controls:** Font size adjustments, contrast toggle, screen reader optimization --- ## HERO SECTION **Layout:** Split with text left, illustration right **Background:** Gradient of white to light blue **Main Headline:** "Transparente Information zur Atommüll-Endlagerung" **Subheadline:** "Fundierte Daten und Bürgerbeteiligung für eine nachhaltige Zukunft" **Value Proposition:** "Wir bieten umfassende und verständliche Informationen zum Thema Endlagersuche und Atommüll in Deutschland." **Primary CTA:** "Endlagersuche starten" - primary-button **Secondary CTA:** "Bürgeranfrage stellen" - outline **Hero Visual:** - Type: Illustration - Source: Generate illustration of stylized map with geological layers - Position: right - Size: 40% **Social Proof:** Logos - Content: Relevant governmental/scientific institutions --- ## ENDLAGERSUCHE SECTION **Section Headline:** "Endlagersuche" **Section Description:** "Informieren Sie sich über aktuelle und potenzielle Endlagerstandorte in Deutschland mit unserem interaktiven Tool." **Layout Pattern:** Combined map interface with information panel **Feature Items:** 1. **Feature #1** - Icon: map-marker - Title: "Interaktive Karte" - Description: "Erkunden Sie mögliche Standorte für Endlager auf unserer detaillierten Karte." - Visual: Interactive map mockup 2. **Feature #2** - Icon: filter - Title: "Filteroptionen" - Description: "Filtern Sie nach Standorttyp, Status der Prüfung und geologischen Merkmalen." - Visual: Filter interface mockup 3. **Feature #3** - Icon: info-circle - Title: "Detaillierte Informationen" - Description: "Erhalten Sie wissenschaftliche Daten und Hintergrundinformationen zu jedem Standort." - Visual: Information panel mockup **Call-to-Action:** "Karte öffnen" --- ## BÜRGERANFRAGEN SECTION **Section Headline:** "Bürgeranfragen" **Layout:** Vertical steps with form integration **Steps:** 1. **Step #1** - Number/Icon: 1 - Title: "Anfrage formulieren" - Description: "Stellen Sie Ihre Frage oder teilen Sie Ihre Bedenken mit." - Visual: Form field illustration 2. **Step #2** - Number/Icon: 2 - Title: "Kontaktdaten angeben" - Description: "Hinterlassen Sie Ihre Kontaktdaten für eine persönliche Rückmeldung." - Visual: Contact form illustration 3. **Step #3** - Number/Icon: 3 - Title: "Antwort erhalten" - Description: "Unsere Experten beantworten Ihre Anfrage zeitnah und fundiert." - Visual: Response notification illustration **Form Integration:** - Simple, accessible form with clear labels - Privacy notice and data protection information - Submission confirmation --- ## ATOMKRAFT SECTION **Section Headline:** "Atomkraft in Deutschland" **Section Description:** "Grundlegende Informationen zur Geschichte, Gegenwart und Zukunft der Atomkraft in Deutschland." **Layout Pattern:** Tabs with information panels **Content Tabs:** 1. **Geschichte** - Timeline of nuclear power in Germany - Key historical events - Visual: Historical timeline 2. **Aktuelle Situation** - Current status of nuclear power plants - Statistics and facts - Visual: Infographic of active/decommissioned plants 3. **Atommüll** - Types of nuclear waste - Current temporary storage - Visual: Diagram of waste classification 4. **Zukunftsperspektive** - Plans for phase-out - International comparison - Visual: Future roadmap --- ## RECHTLICHE RAHMENBEDINGUNGEN SECTION **Section Headline:** "Rechtliche Rahmenbedingungen" **Layout:** Accordion for detailed legal information **Legal Categories:** 1. **Gesetzliche Grundlagen** - Description: "Überblick über die relevanten Gesetze zur Endlagerung in Deutschland." - Content: List of applicable laws with brief explanations 2. **Standortauswahlverfahren** - Description: "Der rechtliche Prozess zur Auswahl eines Endlagerstandorts." - Content: Step-by-step explanation of the selection process 3. **Bürgerbeteiligung** - Description: "Rechtliche Möglichkeiten für Bürger, am Prozess teilzunehmen." - Content: Citizen rights and participation opportunities 4. **Internationale Abkommen** - Description: "Internationale Verträge und Verpflichtungen im Bereich Atommüll." - Content: Overview of international agreements --- ## FAQ SECTION **Section Headline:** "Häufig gestellte Fragen" **Layout:** Accordion **Question Count:** 6 **Questions:** 1. "Was ist ein Endlager für Atommüll?" 2. "Wie läuft der Auswahlprozess für Endlagerstandorte ab?" 3. "Welche Sicherheitsmaßnahmen werden bei Endlagern getroffen?" 4. "Wie lange muss Atommüll gelagert werden?" 5. "Welche Beteiligungsmöglichkeiten haben Bürger im Auswahlprozess?" 6. "Welche Alternativen zur Endlagerung gibt es?" --- ## FINAL CTA SECTION **Background:** Gradient blue to white **Headline:** "Bleiben Sie informiert" **Description:** "Abonnieren Sie unseren Newsletter für aktuelle Informationen zum Thema Endlagerung und Bürgerbeteiligung." **Primary Button:** "Newsletter abonnieren" **Secondary Button:** "Kontakt aufnehmen" --- ## FOOTER SECTION **Layout:** Multi-column **Background:** Dark blue **Footer Content:** - Company Info: "endlagerung.com bietet transparente Informationen zur Endlagersuche und Atommüll-Politik in Deutschland." - Link Columns: - ["Über uns", ["Mission", "Team", "Partner", "Kontakt"]] - ["Informationen", ["Endlagersuche", "Bürgeranfragen", "Atomkraft", "Rechtliche Rahmenbedingungen"]] - ["Ressourcen", ["Publikationen", "Glossar", "FAQ", "Downloads"]] - Contact Info: [[email protected]](mailto:[email protected]), Telefonhotline: +49 123 456789 - Social Media: [Twitter, Facebook, YouTube, LinkedIn] - Legal Links: Datenschutzerklärung, Impressum, Barrierefreiheitserklärung - Copyright: "© 2025 endlagerung.com. Alle Rechte vorbehalten." --- ## TECHNICAL SPECIFICATIONS **Responsive Breakpoints:** - Mobile: 320px - Tablet: 768px - Desktop: 1200px **Animation Preferences:** - Page Load: fade-in - Scroll Animations: enabled (with reduced motion option for accessibility) - Hover Effects: subtle - Transition Duration: medium (with option to disable) **Performance Requirements:** - Image Optimization: webp/lazy-loading/both - Loading Strategy: progressive - Accessible loading indicators **Integration Points:** - Analytics: Matomo (privacy-compliant) - CRM: Optional - Email Marketing: For newsletter subscription - Chat Widget: enabled with accessibility features **Accessibility Requirements:** - WCAG 2.1 AA compliance minimum - Screen reader optimized - Keyboard navigation support - Focus indicators - Alt text for all images - Aria labels throughout - Color contrast compliance - Resizable text without breaking layout - Skip navigation links --- ## CONTENT TONE & STYLE **Brand Voice:** Professional but accessible **Technical Level:** Balanced (complex topics explained clearly) **Urgency Level:** Low (informational rather than sales-focused) **Call-to-Action Style:** Direct but not pushy **Language:** German **Content Structure:** Clear headings, short paragraphs, bullet points for complex information ## SPECIAL FEATURES **Dark/Light Mode Toggle:** - Prominent in header - Respects system preferences by default - Saves user preference in local storage **Accessibility Toolbar:** - Font size adjustment - Contrast options - Reading guides - Text-to-speech integration **Interactive Map:** - Filterable by various criteria - Information panels for each location - Downloadable data - Accessible alternative views (list mode) **Language Options:** - Primary: German - Secondary options: English, possibly other regional languages ## IMPLEMENTATION NOTES The site should follow Material Design principles while maintaining an authoritative, trustworthy appearance appropriate for a government/public information resource. All interactive elements must have keyboard accessibility and screen reader support. The dark mode implementation should be carefully designed to maintain readability and proper contrast ratios. --- # Design Decisions & Creative Elements ## Core Design Philosophy I've designed this website to serve as a transparent, accessible public information resource on nuclear waste storage in Germany. The specification balances official credibility with accessibility in several key ways: 1. **Accessibility-First Approach**: Rather than treating accessibility as an add-on, I've made it central to the design with a dedicated accessibility toolbar, WCAG compliance, and careful attention to contrast, keyboard navigation, and screen reader optimization. 2. **Information Architecture**: The content is structured to progress from broad overview (hero section) to specific tools (Endlagersuche), participation methods (Bürgeranfragen), contextual information (Atomkraft), and finally technical details (Rechtliche Rahmenbedingungen). 3. **Interactive Elements**: The interactive map for "Endlagersuche" serves as a central tool, offering citizens a way to explore data visually while maintaining accessibility through alternative views. 4. **Material Design Adaptation**: While following Material Design principles for consistency and usability, I've customized the approach to convey appropriate authority for a public information resource on a serious topic. 5. **Dark Mode Implementation**: The dark mode is designed not just as an aesthetic option but as an accessibility feature, with careful attention to contrast ratios and readability. The site is designed to be informative rather than persuasive, with a focus on providing clear, factual information about nuclear waste storage while facilitating citizen participation and understanding of this complex topic.