projects/abiball
projects/abiball
0
0
Fork 0
Code Pull Requests 1 Actions Packages Activity

add homepage #5

Merged
jleibl merged 6 commits from feature/homepage into main 2025-01-23 16:40:06 +00:00
Conversation 1 Commits 6 Files Changed 16 +30 -18
2 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7071e98ded - Show all commits

1
templates/base.html.twig
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Abiball-Tickets | {% block title %}{% endblock %}</title> <title>Abiball-Tickets | {% block title %}{% endblock %}</title>
<link rel="icon" href="{{ asset('images/icon.png') }}"> <link rel="icon" href="{{ asset('images/icon.png') }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block stylesheets %} {% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.css') }}"> <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %} {% endblock %}

47
templates/home/index.html.twig
View File

@ -3,23 +3,34 @@
{% block title %}Home{% endblock %} {% block title %}Home{% endblock %}
{% block body %} {% block body %}
<header class="w-full bg-white shadow-sm"> <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 relative overflow-hidden">
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> <header class="w-full bg-white/90 backdrop-blur-md shadow-lg fixed top-0 z-50 border-b border-gray-100">
<img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-48 h-auto" /> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex justify-between items-center">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg transition-colors"> <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-32 sm:w-36 md:w-40 h-auto hover:opacity-90 transition-opacity" />
Kontaktaufnahme <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">
</a> Kontaktaufnahme
</div> </a>
</header> </div>
</header>
<main class="flex flex-col items-center justify-center px-4 py-12"> <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="max-w-3xl text-center mb-8"> <div class="w-full max-w-4xl">
<p class="text-gray-700 leading-relaxed"> <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">
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. Willkommen zum <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-blue-800">Abiball 2025</span>
</p> </h1>
</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"> <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">
Tickets kaufen <p class="text-base sm:text-lg text-gray-700 leading-relaxed">
</a> 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.
</main> </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 %} {% endblock %}