Hugging Face's logo

Spaces:
dl3239491
/
pixelpulse-wizardry
Running

App Files Community
pixelpulse-wizardry
File size: 15,008 Bytes
d6e5bdf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PixelPulse Events | Unforgettable Concert Experiences</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>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Space Grotesk', sans-serif;
        }
        .gradient-text {
            background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .event-card {
            transition: all 0.3s ease;
            transform: translateY(0);
        }
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .hero-gradient {
            background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white/90 backdrop-blur-sm border-b border-gray-200 fixed w-full z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <span class="text-xl font-bold gradient-text">PixelPulse Events</span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Upcoming Shows</a>
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Artists</a>
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Venues</a>
                    <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
                    <button class="bg-gradient-to-r from-purple-600 to-pink-500 text-white px-4 py-2 rounded-full hover:shadow-lg transition">Get Tickets</button>
                </div>
                <div class="md:hidden flex items-center">
                    <button id="menu-toggle">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6">Unleash the Magic of Live Music</h1>
            <p class="text-xl max-w-3xl mx-auto mb-10">
                We create unforgettable concert experiences that connect artists and fans through the power of music.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button class="bg-white text-purple-600 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition shadow-xl">
                    Find Events <i data-feather="search" class="inline ml-2"></i>
                </button>
                <button class="border-2 border-white text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-white hover:text-purple-600 transition">
                    Book an Artist <i data-feather="music" class="inline ml-2"></i>
                </button>
            </div>
        </div>
    </section>

    <!-- Upcoming Events -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Upcoming Concerts</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Don't miss these electrifying performances coming to a city near you</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Event 1 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
                <img src="http://static.photos/music/640x360/1" alt="Concert" class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">Neon Dreams Tour</h3>
                            <p class="text-purple-600">The Chromatics</p>
                        </div>
                        <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Sold Out</span>
                    </div>
                    <div class="flex items-center text-gray-500 mb-4">
                        <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
                        <span>June 15, 2023</span>
                        <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
                        <span>Los Angeles, CA</span>
                    </div>
                    <button class="w-full bg-gray-900 text-white py-2 px-4 rounded-md hover:bg-gray-800 transition">
                        Join Waitlist
                    </button>
                </div>
            </div>

            <!-- Event 2 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
                <img src="http://static.photos/music/640x360/2" alt="Concert" class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">Midnight Echoes</h3>
                            <p class="text-purple-600">Luna Wave</p>
                        </div>
                        <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Limited</span>
                    </div>
                    <div class="flex items-center text-gray-500 mb-4">
                        <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
                        <span>June 22, 2023</span>
                        <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
                        <span>New York, NY</span>
                    </div>
                    <button class="w-full bg-gradient-to-r from-purple-600 to-pink-500 text-white py-2 px-4 rounded-md hover:shadow-lg transition">
                        Get Tickets
                    </button>
                </div>
            </div>

            <!-- Event 3 -->
            <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
                <img src="http://static.photos/music/640x360/3" alt="Concert" class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">Summer Vibes Festival</h3>
                            <p class="text-purple-600">Various Artists</p>
                        </div>
                        <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">New</span>
                    </div>
                    <div class="flex items-center text-gray-500 mb-4">
                        <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
                        <span>July 8-10, 2023</span>
                        <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
                        <span>Chicago, IL</span>
                    </div>
                    <button class="w-full bg-gradient-to-r from-purple-600 to-pink-500 text-white py-2 px-4 rounded-md hover:shadow-lg transition">
                        Get Tickets
                    </button>
                </div>
            </div>
        </div>

        <div class="text-center mt-12">
            <button class="border-2 border-gray-300 text-gray-700 px-8 py-3 rounded-full text-lg font-medium hover:border-purple-400 hover:text-purple-600 transition">
                View All Events <i data-feather="chevron-right" class="inline ml-2"></i>
            </button>
        </div>
    </section>

    <!-- Featured Artists -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gradient-to-br from-purple-50 to-pink-50 rounded-3xl">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured Artists</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">World-class performers we're proud to work with</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            <!-- Artist 1 -->
            <div class="text-center">
                <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
                    <img src="http://static.photos/people/320x240/1" alt="Artist" class="w-full h-full object-cover">
                </div>
                <h3 class="font-bold text-gray-900">The Chromatics</h3>
                <p class="text-sm text-gray-500">Electronic</p>
            </div>

            <!-- Artist 2 -->
            <div class="text-center">
                <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
                    <img src="http://static.photos/people/320x240/2" alt="Artist" class="w-full h-full object-cover">
                </div>
                <h3 class="font-bold text-gray-900">Luna Wave</h3>
                <p class="text-sm text-gray-500">Indie Rock</p>
            </div>

            <!-- Artist 3 -->
            <div class="text-center">
                <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
                    <img src="http://static.photos/people/320x240/3" alt="Artist" class="w-full h-full object-cover">
                </div>
                <h3 class="font-bold text-gray-900">Solar Flare</h3>
                <p class="text-sm text-gray-500">Alternative</p>
            </div>

            <!-- Artist 4 -->
            <div class="text-center">
                <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
                    <img src="http://static.photos/people/320x240/4" alt="Artist" class="w-full h-full object-cover">
                </div>
                <h3 class="font-bold text-gray-900">Midnight Echo</h3>
                <p class="text-sm text-gray-500">Pop</p>
            </div>

            <!-- Artist 5 -->
            <div class="text-center">
                <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
                    <img src="http://static.photos/people/320x240/5" alt="Artist" class="w-full h-full object-cover">
                </div>
                <h3 class="font-bold text-gray-900">Neon Dreams</h3>
                <p class="text-sm text-gray-500">Synthwave</p>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="bg-gray-900 rounded-2xl p-10 text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Want to Book an Artist?</h2>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">We connect venues with amazing talent for unforgettable events.</p>
            <button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition shadow-xl">
                Contact Our Team <i data-feather="mail" class="inline ml-2"></i>
            </button>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">PixelPulse Events</h3>
                    <p class="mb-4">Creating unforgettable concert experiences.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="hover:text-white transition"><i data-feather="instagram"></i></a>
                        <a href="#" class="hover:text-white transition"><i data-feather="twitter"></i></a>
                        <a href="#" class="hover:text-white transition"><i data-feather="facebook"></i></a>
                        <a href="#" class="hover:text-white transition"><i data-feather="youtube"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Events</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">Upcoming Concerts</a></li>
                        <li><a href="#" class="hover:text-white transition">Festivals</a></li>
                        <li><a href="#" class="hover:text-white transition">Private Events</a></li>
                        <li><a href="#" class="hover:text-white transition">Corporate Bookings</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Information</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-white transition">FAQ</a></li>
                        <li><a href="#" class="hover:text-white transition">Venues</a></li>
                        <li><a href="#" class="hover:text-white transition">Safety</a></li>
                        <li><a href="#" class="hover:text-white transition">Accessibility</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Contact</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center"><i data-feather="mail" class="mr-2"></i> events@pixelpulse.com</li>
                        <li class="flex items-center"><i data-feather="phone" class="mr-2"></i> +1 (555) 987-6543</li>
                        <li class="flex items-center"><i data-feather="map-pin" class="mr-2"></i> 123 Music Lane, CA</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
                <p>© 2023 PixelPulse Events. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Feather Icons
        feather.replace();

        // Mobile menu toggle
        document.getElementById('menu-toggle').addEventListener('click', function() {
            // You would implement your mobile menu logic here
            console.log('Mobile menu toggled');
        });
    </script>
</body>
</html>