Hugging Face's logo

Spaces:
mollycarroll
/
serapis-fake
Running

App Files Community
serapis-fake / index.html
mollycarroll's picture
mollycarroll
update space
d92ff3f
raw
history blame contribute delete
32.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Serapis - Classic Rock Band</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=Pacifico&family=Comfortaa:wght@300;400;700&display=swap');
:root {
--groovy-orange: #FF6B35;
--psychedelic-purple: #7D5BA6;
--peace-green: #4CB944;
--sunshine-yellow: #FFD166;
--love-red: #EF476F;
--mellow-blue: #118AB2;
}
body {
font-family: 'Comfortaa', cursive;
background-color: #f9f9f9;
color: #333;
}
.title-font {
font-family: 'Rock Salt', cursive;
}
.handwriting {
font-family: 'Pacifico', cursive;
}
.groovy-bg {
background: linear-gradient(45deg, var(--groovy-orange), var(--psychedelic-purple));
}
.groovy-text {
background: linear-gradient(45deg, var(--groovy-orange), var(--psychedelic-purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.vinyl {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(45deg, #333, #111);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.vinyl::before {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
z-index: 2;
}
.vinyl::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #111;
z-index: 3;
}
.vinyl-label {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(45deg, var(--love-red), var(--sunshine-yellow));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
text-align: center;
z-index: 1;
}
.groovy-btn {
background: linear-gradient(45deg, var(--groovy-orange), var(--love-red));
color: white;
border: none;
transition: all 0.3s ease;
transform: skew(-15deg);
display: inline-block;
}
.groovy-btn:hover {
transform: skew(-15deg) scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.groovy-btn span {
display: inline-block;
transform: skew(15deg);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background: var(--peace-green);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.band-photo {
border: 10px solid white;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.band-photo:hover {
transform: rotate(-5deg) scale(1.05);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.show-card {
background: white;
border-left: 10px solid var(--peace-green);
transition: all 0.3s ease;
}
.show-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.merch-item {
transition: all 0.3s ease;
}
.merch-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.groovy-border {
border: 5px dashed var(--sunshine-yellow);
}
.flower-decoration {
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient(circle, var(--love-red), var(--sunshine-yellow));
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(45deg);
opacity: 0.7;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spin {
animation: spin 10s linear infinite;
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navigation -->
<nav class="groovy-bg text-white py-4 sticky top-0 z-50 shadow-lg">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="title-font text-3xl">
<span class="groovy-text">Serapis</span>
</div>
<div class="hidden md:flex space-x-8 items-center">
<a href="#home" class="nav-link text-white hover:text-yellow-200">Home</a>
<a href="#shows" class="nav-link text-white hover:text-yellow-200">Shows</a>
<a href="#band" class="nav-link text-white hover:text-yellow-200">The Band</a>
<a href="#music" class="nav-link text-white hover:text-yellow-200">Music</a>
<a href="#gallery" class="nav-link text-white hover:text-yellow-200">Gallery</a>
<a href="#merch" class="nav-link text-white hover:text-yellow-200">Merch</a>
<button class="groovy-btn px-6 py-2 rounded-full">
<span>Contact Us</span>
</button>
</div>
<button class="md:hidden text-2xl">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative overflow-hidden py-20" style="background: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') center/cover;">
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
<div class="container mx-auto px-4 relative z-10 text-center text-white">
<h1 class="title-font text-5xl md:text-7xl mb-6">
<span class="text-yellow-300">Serapis</span>
</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
Keeping the spirit of classic rock alive with a modern twist
</p>
<div class="flex flex-col md:flex-row justify-center gap-4">
<button class="groovy-btn px-8 py-3 rounded-full text-lg font-bold mb-4 md:mb-0">
<span>Upcoming Shows</span>
</button>
<button class="bg-white text-gray-800 px-8 py-3 rounded-full text-lg font-bold hover:bg-gray-200 transition">
Latest Album
</button>
</div>
</div>
<!-- Groovy decorations -->
<div class="flower-decoration top-10 left-10"></div>
<div class="flower-decoration bottom-20 right-20" style="width: 70px; height: 70px;"></div>
<div class="flower-decoration top-1/3 right-1/4" style="background: radial-gradient(circle, var(--peace-green), var(--mellow-blue));"></div>
</section>
<!-- Upcoming Shows -->
<section id="shows" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="title-font text-4xl text-center mb-12 groovy-text">Upcoming Shows</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Show 1 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">15</div>
<div class="text-lg font-semibold text-gray-600">JUL</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Summer of Love Festival</h3>
<p class="text-gray-600">Golden Gate Park, San Francisco</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">8:00 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
<!-- Show 2 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">22</div>
<div class="text-lg font-semibold text-gray-600">JUL</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Woodstock Revival</h3>
<p class="text-gray-600">Bethel Woods, New York</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">7:30 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
<!-- Show 3 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">5</div>
<div class="text-lg font-semibold text-gray-600">AUG</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Peace & Love Arena</h3>
<p class="text-gray-600">Madison Square Garden, NYC</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">9:00 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
<!-- Show 4 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">12</div>
<div class="text-lg font-semibold text-gray-600">AUG</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Sunset Strip Festival</h3>
<p class="text-gray-600">Whisky a Go Go, Los Angeles</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">10:00 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
<!-- Show 5 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">19</div>
<div class="text-lg font-semibold text-gray-600">AUG</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Rock 'n Roll Marathon</h3>
<p class="text-gray-600">Red Rocks Amphitheatre, Denver</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">8:30 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
<!-- Show 6 -->
<div class="show-card p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-center mr-4">
<div class="text-3xl font-bold text-gray-800">26</div>
<div class="text-lg font-semibold text-gray-600">AUG</div>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Endless Summer Tour</h3>
<p class="text-gray-600">Hollywood Bowl, Los Angeles</p>
</div>
</div>
<div class="flex justify-between items-center">
<div class="text-lg font-semibold text-gray-800">7:00 PM</div>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Get Tickets</span>
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="groovy-btn px-8 py-3 rounded-full text-lg font-bold">
<span>View All Shows</span>
</button>
</div>
</div>
</section>
<!-- The Band -->
<section id="band" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="title-font text-4xl text-center mb-12 groovy-text">Meet The Band</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Member 1 -->
<div class="text-center">
<div class="band-photo mx-auto mb-6">
<img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Johnny 'Strings' Wilson" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-bold text-gray-800">Johnny "Strings" Wilson</h3>
<p class="text-gray-600 mb-2">Lead Guitar & Vocals</p>
<p class="text-gray-700">The heart and soul of Serapis, Johnny's blistering solos and soulful voice have been electrifying audiences since 1972.</p>
</div>
<!-- Member 2 -->
<div class="text-center">
<div class="band-photo mx-auto mb-6">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mike 'Thunder' Thompson" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-bold text-gray-800">Mike "Thunder" Thompson</h3>
<p class="text-gray-600 mb-2">Drums & Percussion</p>
<p class="text-gray-700">The backbone of the band, Mike's thunderous beats keep the rhythm flowing like a mighty river.</p>
</div>
<!-- Member 3 -->
<div class="text-center">
<div class="band-photo mx-auto mb-6">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Paul "Fingers" Carter" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-bold text-gray-800">Paul "Fingers" Carter</h3>
<p class="text-gray-600 mb-2">Bass Guitar</p>
<p class="text-gray-700">With fingers that dance across the strings, Paul lays down grooves that get your body moving.</p>
</div>
<!-- Member 4 -->
<div class="text-center">
<div class="band-photo mx-auto mb-6">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Rick "Keys" Morrison" class="w-full h-full object-cover">
</div>
<h3 class="text-2xl font-bold text-gray-800">Rick "Keys" Morrison</h3>
<p class="text-gray-600 mb-2">Keyboards & Vocals</p>
<p class="text-gray-700">The maestro of melodies, Rick's Hammond organ and piano work add the psychedelic colors to Serapis' sound.</p>
</div>
</div>
</div>
</section>
<!-- Music Section -->
<section id="music" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="title-font text-4xl text-center mb-12 groovy-text">Our Music</h2>
<div class="flex flex-col lg:flex-row items-center justify-center gap-12 mb-16">
<div class="vinyl spin">
<div class="vinyl-label">
Serapis<br>Cosmic Journey<br>1974
</div>
</div>
<div class="max-w-lg">
<h3 class="text-3xl font-bold text-gray-800 mb-4">Latest Album: <span class="handwriting text-4xl text-purple-600">Cosmic Journey</span></h3>
<p class="text-gray-700 mb-6">Our newest masterpiece takes you on a trip through time and space with 12 tracks of pure rock energy. Recorded at the legendary Sunset Sound Studios.</p>
<div class="flex flex-wrap gap-4">
<button class="groovy-btn px-6 py-3 rounded-full font-bold">
<span>Stream Now</span>
</button>
<button class="bg-gray-800 text-white px-6 py-3 rounded-full font-bold hover:bg-gray-700 transition">
Buy Vinyl
</button>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Album 1 -->
<div class="bg-gray-100 p-6 rounded-lg hover:shadow-lg transition">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Peace & Love" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Peace & Love (1971)</h3>
<p class="text-gray-600 mb-4">Our debut album that started it all</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Listen</span>
</button>
</div>
<!-- Album 2 -->
<div class="bg-gray-100 p-6 rounded-lg hover:shadow-lg transition">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Summer of '72" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Summer of '72 (1972)</h3>
<p class="text-gray-600 mb-4">The soundtrack to that magical summer</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Listen</span>
</button>
</div>
<!-- Album 3 -->
<div class="bg-gray-100 p-6 rounded-lg hover:shadow-lg transition">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Electric Dreams" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Electric Dreams (1976)</h3>
<p class="text-gray-600 mb-4">Our experimental phase</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm">
<span>Listen</span>
</button>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<h2 class="title-font text-4xl text-center mb-12 groovy-text">Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
<div class="groovy-border p-2">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis live" class="w-full h-auto">
</div>
</div>
<div class="text-center mt-12">
<button class="groovy-btn px-8 py-3 rounded-full text-lg font-bold">
<span>View More Photos</span>
</button>
</div>
</div>
</section>
<!-- Merch -->
<section id="merch" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="title-font text-4xl text-center mb-12 groovy-text">Get Your Groovy Gear</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Item 1 -->
<div class="merch-item bg-gray-100 p-6 rounded-lg text-center">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis T-Shirt" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Peace & Love Tee</h3>
<p class="text-gray-600 mb-4">$29.99</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm w-full">
<span>Add to Cart</span>
</button>
</div>
<!-- Item 2 -->
<div class="merch-item bg-gray-100 p-6 rounded-lg text-center">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis Vinyl" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Cosmic Journey Vinyl</h3>
<p class="text-gray-600 mb-4">$34.99</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm w-full">
<span>Add to Cart</span>
</button>
</div>
<!-- Item 3 -->
<div class="merch-item bg-gray-100 p-6 rounded-lg text-center">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis Hoodie" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Tie-Dye Hoodie</h3>
<p class="text-gray-600 mb-4">$49.99</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm w-full">
<span>Add to Cart</span>
</button>
</div>
<!-- Item 4 -->
<div class="merch-item bg-gray-100 p-6 rounded-lg text-center">
<div class="mb-4">
<img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Serapis Poster" class="w-full h-auto rounded">
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Tour Poster '23</h3>
<p class="text-gray-600 mb-4">$19.99</p>
<button class="groovy-btn px-4 py-2 rounded-full text-sm w-full">
<span>Add to Cart</span>
</button>
</div>
</div>
<div class="text-center mt-12">
<button class="groovy-btn px-8 py-3 rounded-full text-lg font-bold">
<span>View All Merch</span>
</button>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 groovy-bg text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="title-font text-3xl mb-6">Stay Groovy With Us</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Sign up for our newsletter to get updates on shows, new music, and exclusive merch drops!</p>
<div class="flex flex-col md:flex-row justify-center gap-4 max-w-lg mx-auto">
<input type="email" placeholder="Your email address" class="px-4 py-3 rounded-full text-gray-800 w-full">
<button class="bg-white text-gray-800 px-8 py-3 rounded-full font-bold hover:bg-gray-200 transition whitespace-nowrap">
Sign Me Up!
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="title-font text-2xl mb-4 groovy-text">Serapis</h3>
<p class="text-gray-400">Keeping the spirit of classic rock alive since 1971.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Tour Dates</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Music</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Merch</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-youtube"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition text-2xl"><i class="fab fa-spotify"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Contact</h4>
<p class="text-gray-400">[email protected]</p>
<p class="text-gray-400">1-800-SERAPIS</p>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
<p>&copy; 2023 Serapis. All rights reserved. Keep on rockin'!</p>
</div>
</div>
</footer>
<script>
// Simple script for mobile menu toggle would go here
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle functionality would be added here
console.log("Peace, love and rock 'n roll!");
});
</script>
</body>
</html>