Init

2025-10-30 08:24:44 +01:00
commit 6e50ec7034
73 changed files with 27355 additions and 0 deletions
--- a/app/components/CommonFooter.vue
+++ b/app/components/CommonFooter.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+const currentYear = new Date().getFullYear()
+</script>
+
+<template>
+  <footer class="footer">
+    <div class="footer-content">
+      <div class="footer-main">
+        <!-- Logo & Description Column -->
+        <div class="footer-section">
+          <div class="footer-logo">
+            <NuxtLink to="/">
+              <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="footer-logo-svg" />
+            </NuxtLink>
+          </div>
+          <p>
+            experimenta ist Deutschlands größtes Science Center. Mit über 275 Mitmachstationen, vier
+            Kreativstudios, neun Laboren und einer Sternwarte.
+          </p>
+        </div>
+
+        <!-- Quick Links Column -->
+        <div class="footer-section">
+          <h3>Rechtliches</h3>
+          <ul class="footer-links">
+            <li><a href="#">Impressum</a></li>
+            <li><a href="#">Datenschutz</a></li>
+            <li><a href="#">AGB</a></li>
+          </ul>
+        </div>
+
+        <!-- Info Column -->
+        <div class="footer-section">
+          <h3>Über uns</h3>
+          <ul class="footer-links">
+            <li><a href="#">experimenta Shop</a></li>
+            <li><a href="#">Kontakt</a></li>
+          </ul>
+        </div>
+
+        <!-- Contact Column -->
+        <div class="footer-section">
+          <h3>Kontakt</h3>
+          <p>experimenta gGmbH<br />Kranenstraße 14<br />74072 Heilbronn</p>
+          <p>
+            <a href="mailto:info@experimenta.science" class="footer-link">info@experimenta.science</a>
+          </p>
+        </div>
+      </div>
+
+      <!-- Footer Bottom -->
+      <div class="footer-bottom">
+        <p>&copy; {{ currentYear }} experimenta gGmbH. Alle Rechte vorbehalten.</p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer {
+  background: linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%);
+  margin-top: 80px;
+  position: relative;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 60px 20px 30px;
+}
+
+.footer-main {
+  display: grid;
+  grid-template-columns: 2.5fr 1fr 1fr 1.5fr;
+  gap: 50px;
+  margin-bottom: 50px;
+}
+
+.footer-section h3 {
+  color: #f59d24;
+  margin-bottom: 20px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.footer-section p {
+  margin-bottom: 15px;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer-links li {
+  margin-bottom: 8px;
+}
+
+.footer-links a,
+.footer-link {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  font-size: 14px;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover,
+.footer-link:hover {
+  color: #ff4081;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.footer-logo-svg {
+  width: 200px;
+  height: auto;
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 30px;
+  text-align: center;
+}
+
+.footer-bottom p {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  margin: 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .footer-main {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+
+  .footer-logo-svg {
+    width: 150px;
+  }
+}
+</style>