Spaces:

Perika
/

undefined

Running

App Files Files Community

Perika commited on Oct 20, 2025

Commit

caae4bd

verified ·

1 Parent(s): 93b71f4

översätt siten till svenska

Browse files

Files changed (1) hide show

index.html +74 -74

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Groovy Beats & Smooth Seats | Jazz Club</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -33,14 +33,14 @@
                 <div class="flex items-center space-x-4">
                     <i data-feather="music" class="text-amber-500"></i>
                     <span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
-                </div>
                 <div class="hidden md:flex items-center space-x-8">
-                    <a href="#" class="text-amber-400 font-medium hover:text-amber-300 transition">Home</a>
-                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">Performances</a>
-                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">History</a>
-                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">Menu</a>
-                    <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Reserve Table</a>
-                </div>
                 <button class="md:hidden text-gray-300 focus:outline-none">
                     <i data-feather="menu"></i>
                 </button>
@@ -53,16 +53,16 @@
         <div class="container mx-auto px-6 py-24 relative z-10">
             <div class="max-w-3xl">
                 <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
-                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Smooth Jazz</span>
-                    <br>Under City Lights
-                </h1>
-                <p class="text-xl text-gray-300 mb-8">
-                    Experience the finest jazz performances in an intimate setting with craft cocktails and gourmet bites.
-                </p>
-                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                    <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full text-lg font-medium transition text-center">Book a Table</a>
-                    <a href="#" class="border-2 border-amber-500 text-amber-400 hover:bg-amber-900 hover:bg-opacity-30 px-8 py-4 rounded-full text-lg font-medium transition text-center">View Performers</a>
-                </div>
             </div>
         </div>
         <div class="absolute bottom-0 right-0 w-1/2 md:w-1/3 floating">
@@ -75,12 +75,12 @@
         <div class="container mx-auto px-6">
             <div class="flex items-center justify-between mb-12">
                 <h2 class="text-3xl md:text-4xl font-bold">
-                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Upcoming</span> Performances
-                </h2>
-                <a href="#" class="text-amber-400 hover:text-amber-300 flex items-center">
-                    View All <i data-feather="chevron-right" class="ml-2"></i>
-                </a>
-            </div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Performance Card 1 -->
@@ -89,17 +89,17 @@
                         <img src="http://static.photos/black/640x360/1" alt="Jazz quartet" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
-                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">TONIGHT</span>
-                        </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">The Midnight Quartet</h3>
-                        <p class="text-gray-400 text-sm mb-4">From 8:30 PM | Main Stage</p>
-                        <p class="text-gray-300 mb-4">Smooth jazz with a modern twist featuring award-winning saxophonist Marcus Johnson.</p>
-                        <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
-                            Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
-                        </a>
-                    </div>
                 </div>
                 <!-- Performance Card 2 -->
@@ -108,17 +108,17 @@
                         <img src="http://static.photos/black/640x360/2" alt="Jazz singer" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
-                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">TOMORROW</span>
-                        </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Ella Fitzgerald Tribute</h3>
-                        <p class="text-gray-400 text-sm mb-4">From 9:00 PM | Main Stage</p>
-                        <p class="text-gray-300 mb-4">Sarah Williams brings the timeless classics of Ella Fitzgerald to life.</p>
-                        <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
-                            Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
-                        </a>
-                    </div>
                 </div>
                 <!-- Performance Card 3 -->
@@ -127,17 +127,17 @@
                         <img src="http://static.photos/black/640x360/3" alt="Jazz trio" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
-                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">SATURDAY</span>
-                        </div>
                     </div>
                     <div class="p-6">
-                        <h3 class="text-xl font-bold mb-2">Blue Note Experience</h3>
-                        <p class="text-gray-400 text-sm mb-4">From 10:00 PM | Main Stage</p>
-                        <p class="text-gray-300 mb-4">A journey through the legendary Blue Note recordings with a stellar lineup.</p>
-                        <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
-                            Learn More <i data-feather="chevron-right" class="ml-1 h-4"></i>
-                        </a>
-                    </div>
                 </div>
             </div>
         </div>
@@ -148,15 +148,15 @@
         <div class="container mx-auto px-6">
             <div class="max-w-4xl mx-auto text-center">
                 <h2 class="text-3xl md:text-4xl font-bold mb-6">
-                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Become a Member</span> for Exclusive Benefits
-                </h2>
-                <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
-                    Enjoy priority seating, members-only events, complimentary drinks, and more with our VIP membership program.
-                </p>
-                <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
-                    <a href="#" class="bg-white hover:bg-gray-100 text-gray-900 px-8 py-4 rounded-full text-lg font-medium transition">Join Now</a>
-                    <a href="#" class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-full text-lg font-medium transition">Learn More</a>
-                </div>
             </div>
         </div>
     </section>
@@ -171,18 +171,18 @@
                         <span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
                     </div>
                     <p class="text-gray-400">
-                        The finest jazz experience in the city since 1965.
                     </p>
-                </div>
                 <div>
-                    <h3 class="text-white font-medium mb-4">Quick Links</h3>
                     <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Home</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Events</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Gallery</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Contact</a></li>
                     </ul>
-                </div>
                 <div>
                     <h3 class="text-white font-medium mb-4">Information</h3>
                     <ul class="space-y-2">
@@ -193,13 +193,13 @@
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white font-medium mb-4">Opening Hours</h3>
                     <ul class="space-y-2">
-                        <li class="text-gray-400">Monday - Thursday: 6PM - 1AM</li>
-                        <li class="text-gray-400">Friday - Saturday: 6PM - 2AM</li>
-                        <li class="text-gray-400">Sunday: 5PM - 12AM</li>
                     </ul>
-                </div>
             </div>
             <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                 <p class="text-gray-500 text-sm mb-4 md:mb-0">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Groovy Beats & Bekväma Platser | Jazzklubb</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
                 <div class="flex items-center space-x-4">
                     <i data-feather="music" class="text-amber-500"></i>
                     <span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
+</div>
                 <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-amber-400 font-medium hover:text-amber-300 transition">Hem</a>
+                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">Föreställningar</a>
+                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">Historia</a>
+                    <a href="#" class="text-gray-300 hover:text-amber-400 transition">Meny</a>
+                    <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full transition">Boka Bord</a>
+</div>
                 <button class="md:hidden text-gray-300 focus:outline-none">
                     <i data-feather="menu"></i>
                 </button>
         <div class="container mx-auto px-6 py-24 relative z-10">
             <div class="max-w-3xl">
                 <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
+                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Lätt Jazz</span>
+                    <br>Under Stadens Ljus
+</h1>
+                    <p class="text-xl text-gray-300 mb-8">
+                        Upplev de bästa jazzframträdandena i en intim miljö med hantverkscocktails och gourmeträtter.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#" class="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full text-lg font-medium transition text-center">Boka Bord</a>
+                        <a href="#" class="border-2 border-amber-500 text-amber-400 hover:bg-amber-900 hover:bg-opacity-30 px-8 py-4 rounded-full text-lg font-medium transition text-center">Se Artister</a>
+</div>
             </div>
         </div>
         <div class="absolute bottom-0 right-0 w-1/2 md:w-1/3 floating">
         <div class="container mx-auto px-6">
             <div class="flex items-center justify-between mb-12">
                 <h2 class="text-3xl md:text-4xl font-bold">
+                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Kommande</span> Föreställningar
+</h2>
+                    <a href="#" class="text-amber-400 hover:text-amber-300 flex items-center">
+                        Visa Alla <i data-feather="chevron-right" class="ml-2"></i>
+                    </a>
+</div>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <!-- Performance Card 1 -->
                         <img src="http://static.photos/black/640x360/1" alt="Jazz quartet" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">IKVÄLL</span>
+</div>
                     </div>
                     <div class="p-6">
+                                    <h3 class="text-xl font-bold mb-2">Midnattkvartetten</h3>
+                                    <p class="text-gray-400 text-sm mb-4">Från 20:30 | Huvudscen</p>
+                                    <p class="text-gray-300 mb-4">Lätt jazz med en modern touch med prisbelönta saxofonisten Marcus Johnson.</p>
+                                    <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
+                                        Läs Mer <i data-feather="chevron-right" class="ml-1 h-4"></i>
+                                    </a>
+</div>
                 </div>
                 <!-- Performance Card 2 -->
                         <img src="http://static.photos/black/640x360/2" alt="Jazz singer" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">IMORGON</span>
+</div>
                     </div>
                     <div class="p-6">
+                                    <h3 class="text-xl font-bold mb-2">Ella Fitzgerald Hyllning</h3>
+                                    <p class="text-gray-400 text-sm mb-4">Från 21:00 | Huvudscen</p>
+                                    <p class="text-gray-300 mb-4">Sarah Williams ger liv åt Ella Fitzgeralds tidlösa klassiker.</p>
+                                    <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
+                                        Läs Mer <i data-feather="chevron-right" class="ml-1 h-4"></i>
+                                    </a>
+</div>
                 </div>
                 <!-- Performance Card 3 -->
                         <img src="http://static.photos/black/640x360/3" alt="Jazz trio" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                         <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
                         <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-amber-600 text-white text-xs px-3 py-1 rounded-full">LÖRDAG</span>
+</div>
                     </div>
                     <div class="p-6">
+                                    <h3 class="text-xl font-bold mb-2">Blue Note Upplevelse</h3>
+                                    <p class="text-gray-400 text-sm mb-4">Från 22:00 | Huvudscen</p>
+                                    <p class="text-gray-300 mb-4">En resa genom de legendariska Blue Note-inspelningarna med en stjärnspäckad lineup.</p>
+                                    <a href="#" class="text-amber-400 hover:text-amber-300 font-medium flex items-center">
+                                        Läs Mer <i data-feather="chevron-right" class="ml-1 h-4"></i>
+                                    </a>
+</div>
                 </div>
             </div>
         </div>
         <div class="container mx-auto px-6">
             <div class="max-w-4xl mx-auto text-center">
                 <h2 class="text-3xl md:text-4xl font-bold mb-6">
+                    <span class="bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Bli Medlem</span> för Exklusiva Förmåner
+</h2>
+                    <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
+                        Få förtur till sittplatser, medlemsendast evenemang, gratis drycker och mer med vårt VIP-medlemskap.
+                    </p>
+                    <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#" class="bg-white hover:bg-gray-100 text-gray-900 px-8 py-4 rounded-full text-lg font-medium transition">Bli Medlem Nu</a>
+                        <a href="#" class="border-2 border-white text-white hover:bg-white hover:bg-opacity-10 px-8 py-4 rounded-full text-lg font-medium transition">Läs Mer</a>
+</div>
             </div>
         </div>
     </section>
                         <span class="text-xl font-bold bg-gradient-to-r from-amber-400 to-amber-600 bg-clip-text text-transparent">Groovy Beats</span>
                     </div>
                     <p class="text-gray-400">
+                        Den finaste jazzupplevelsen i staden sedan 1965.
                     </p>
+</div>
                 <div>
+                    <h3 class="text-white font-medium mb-4">Snabblänkar</h3>
                     <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Hem</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Evenemang</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Galleri</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Kontakt</a></li>
                     </ul>
+</div>
                 <div>
                     <h3 class="text-white font-medium mb-4">Information</h3>
                     <ul class="space-y-2">
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-white font-medium mb-4">Öppettider</h3>
                     <ul class="space-y-2">
+                        <li class="text-gray-400">Måndag - Torsdag: 18:00 - 01:00</li>
+                        <li class="text-gray-400">Fredag - Lördag: 18:00 - 02:00</li>
+                        <li class="text-gray-400">Söndag: 17:00 - 00:00</li>
                     </ul>
+</div>
             </div>
             <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                 <p class="text-gray-500 text-sm mb-4 md:mb-0">