Migrate to Astro and split components

2026-05-16 01:46:08 +02:00
parent a4b1ba7d79
commit 35fc67cd6e
19 changed files with 953 additions and 197 deletions
@@ -0,0 +1,115 @@
+---
+// src/pages/index.astro
+import Layout from '../layouts/Layout.astro';
+import Nav from '../components/Nav.astro';
+import Hero from '../components/Hero.astro';
+import Standards from '../components/Standards.astro';
+import Projects from '../components/Projects.astro';
+import Events from '../components/Events.astro';
+import Biodiversity from '../components/Biodiversity.astro';
+import FAQ from '../components/FAQ.astro';
+import Footer from '../components/Footer.astro';
+import SubpageMauer from '../components/SubpageMauer.astro';
+import SubpageGewerbe from '../components/SubpageGewerbe.astro';
+import SubpageContact from '../components/SubpageContact.astro';
+---
+
+<Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
+    <Nav />
+
+    <!-- Main Page Content -->
+    <div x-show="currentPage === 'main'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-0">
+        <Hero />
+        <Standards />
+        <Projects />
+        <Events />
+        <Biodiversity />
+        <FAQ />
+        <Footer />
+    </div>
+
+    <!-- Subpages -->
+    <SubpageMauer />
+    <SubpageGewerbe />
+    <SubpageContact />
+
+    <!-- CHARTS INIT -->
+    <script is:inline>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Chart 1: Massen
+            new Chart(document.getElementById('subChartMassen').getContext('2d'), {
+                type: 'pie',
+                data: {
+                    labels: ['Erdaushub (m³)', 'Muschelkalk (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
+                    datasets: [{ 
+                        data: [140, 65, 38, 25], 
+                        backgroundColor: ['#d97706', '#065f46', '#292524', '#047857'], 
+                        borderWidth: 1,
+                        borderColor: '#0c0a09'
+                    }]
+                },
+                options: { 
+                    responsive: true, 
+                    maintainAspectRatio: false, 
+                    plugins: { 
+                        legend: { 
+                            position: 'bottom',
+                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
+                        } 
+                    } 
+                }
+            });
+
+            // Chart 2: Boden
+            new Chart(document.getElementById('subChartBoden').getContext('2d'), {
+                type: 'bar',
+                data: {
+                    labels: ['Bodenprofil'],
+                    datasets: [
+                        { label: 'Mutterboden (20cm)', data: [20], backgroundColor: '#047857', borderWidth: 0 },
+                        { label: 'Drainage (40cm)', data: [40], backgroundColor: '#d97706', borderWidth: 0 },
+                        { label: 'Baugrund (80cm)', data: [80], backgroundColor: '#292524', borderWidth: 0 }
+                    ]
+                },
+                options: { 
+                    responsive: true, 
+                    maintainAspectRatio: false, 
+                    scales: { 
+                        x: { stacked: true, display: false }, 
+                        y: { stacked: true, display: false } 
+                    }, 
+                    plugins: { 
+                        legend: { 
+                            position: 'bottom',
+                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
+                        } 
+                    } 
+                }
+            });
+
+            // Chart 3: Gantt
+            new Chart(document.getElementById('subChartGantt').getContext('2d'), {
+                type: 'bar',
+                data: {
+                    labels: ['1. Erdbau', '2. Tragschicht', '3. Pflaster', '4. Pflanzung'],
+                    datasets: [{ 
+                        data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], 
+                        backgroundColor: '#065f46', 
+                        borderRadius: 4,
+                        borderWidth: 0
+                    }]
+                },
+                options: { 
+                    indexAxis: 'y', 
+                    responsive: true, 
+                    maintainAspectRatio: false, 
+                    scales: { 
+                        x: { min: 1, max: 9, ticks: { color: '#78716c', font: { size: 10 }, callback: v => 'W.' + v } }, 
+                        y: { ticks: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 11 } } } 
+                    }, 
+                    plugins: { legend: { display: false } } 
+                }
+            });
+        });
+    </script>
+</Layout>