From 7071e98ded85164414f073c998720490ff7cc7e8 Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Thu, 23 Jan 2025 17:37:42 +0100
Subject: [PATCH] feat: add responsive design and improved styling to pages

---
 templates/base.html.twig       |  1 +
 templates/home/index.html.twig | 47 +++++++++++++++++++++-------------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/templates/base.html.twig b/templates/base.html.twig
index 1e82245..156a6ae 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <title>Abiball-Tickets | {% block title %}{% endblock %}</title>
         <link rel="icon" href="{{ asset('images/icon.png') }}">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         {% block stylesheets %}
             <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
         {% endblock %}
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
index b868958..63f5dc2 100644
--- a/templates/home/index.html.twig
+++ b/templates/home/index.html.twig
@@ -3,23 +3,34 @@
 {% block title %}Home{% endblock %}
 
 {% block body %}
-    <header class="w-full bg-white shadow-sm">
-        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-48 h-auto" />
-            <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition-colors">
-                Kontaktaufnahme
-            </a>
-        </div>
-    </header>
+    <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 relative overflow-hidden">
+        <header class="w-full bg-white/90 backdrop-blur-md shadow-lg fixed top-0 z-50 border-b border-gray-100">
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex justify-between items-center">
+                <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-32 sm:w-36 md:w-40 h-auto hover:opacity-90 transition-opacity" />
+                <a href="#" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300">
+                    Kontaktaufnahme
+                </a>
+            </div>
+        </header>
 
-    <main class="flex flex-col items-center justify-center px-4 py-12">
-        <div class="max-w-3xl text-center mb-8">
-            <p class="text-gray-700 leading-relaxed">
-                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-            </p>
-        </div>
-        <a href="" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold transition-colors">
-            Tickets kaufen
-        </a>
-    </main>
+        <main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 sm:pt-28 md:pt-32 pb-16 sm:pb-20 flex flex-col items-center justify-center relative z-10">
+            <div class="w-full max-w-4xl">
+                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-800 text-center mb-6 sm:mb-8 tracking-tight leading-tight">
+                    Willkommen zum <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-800">Abiball 2025</span>
+                </h1>
+                
+                <div class="bg-white/80 backdrop-blur-md shadow-xl rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 mb-12 sm:mb-16 transform hover:scale-[1.01] transition-all duration-300 border border-gray-100">
+                    <p class="text-base sm:text-lg text-gray-700 leading-relaxed">
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                    </p>
+                </div>
+
+                <div class="text-center space-y-6">
+                    <a href="" class="inline-block bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-8 sm:px-10 md:px-12 py-4 sm:py-5 rounded-full text-base sm:text-lg font-semibold shadow-xl hover:shadow-2xl transition-all duration-300">
+                        Tickets kaufen
+                    </a>
+                </div>
+            </div>
+        </main>
+    </div>
 {% endblock %}