Hugging Face's logo

Spaces:
dl3239491
/
pixelpulse-wizardry
Running

App Files Community
dl3239491 commited on
Commit
d6e5bdf
·
verified ·
1 Parent(s): 159a9a4

create a landing page for my event organization company that holds concerts

Browse files
Files changed (3) hide show
  1. events.html +285 -0
  2. flow.html +7 -5
  3. index.html +1 -0
events.html ADDED
@@ -0,0 +1,285 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PixelPulse Events | Unforgettable Concert Experiences</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
12
+ body {
13
+ font-family: 'Space Grotesk', sans-serif;
14
+ }
15
+ .gradient-text {
16
+ background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
17
+ -webkit-background-clip: text;
18
+ background-clip: text;
19
+ color: transparent;
20
+ }
21
+ .event-card {
22
+ transition: all 0.3s ease;
23
+ transform: translateY(0);
24
+ }
25
+ .event-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
28
+ }
29
+ .hero-gradient {
30
+ background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50">
35
+ <!-- Navigation -->
36
+ <nav class="bg-white/90 backdrop-blur-sm border-b border-gray-200 fixed w-full z-10">
37
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
38
+ <div class="flex justify-between h-16">
39
+ <div class="flex items-center">
40
+ <span class="text-xl font-bold gradient-text">PixelPulse Events</span>
41
+ </div>
42
+ <div class="hidden md:flex items-center space-x-8">
43
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Upcoming Shows</a>
44
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Artists</a>
45
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Venues</a>
46
+ <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
47
+ <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>
48
+ </div>
49
+ <div class="md:hidden flex items-center">
50
+ <button id="menu-toggle">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Hero Section -->
59
+ <section class="hero-gradient text-white pt-32 pb-20 px-4 sm:px-6 lg:px-8">
60
+ <div class="max-w-7xl mx-auto text-center">
61
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Unleash the Magic of Live Music</h1>
62
+ <p class="text-xl max-w-3xl mx-auto mb-10">
63
+ We create unforgettable concert experiences that connect artists and fans through the power of music.
64
+ </p>
65
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
66
+ <button class="bg-white text-purple-600 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition shadow-xl">
67
+ Find Events <i data-feather="search" class="inline ml-2"></i>
68
+ </button>
69
+ <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">
70
+ Book an Artist <i data-feather="music" class="inline ml-2"></i>
71
+ </button>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Upcoming Events -->
77
+ <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
78
+ <div class="text-center mb-16">
79
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Upcoming Concerts</h2>
80
+ <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>
81
+ </div>
82
+
83
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
84
+ <!-- Event 1 -->
85
+ <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
86
+ <img src="http://static.photos/music/640x360/1" alt="Concert" class="w-full h-48 object-cover">
87
+ <div class="p-6">
88
+ <div class="flex justify-between items-start mb-2">
89
+ <div>
90
+ <h3 class="text-xl font-bold text-gray-900">Neon Dreams Tour</h3>
91
+ <p class="text-purple-600">The Chromatics</p>
92
+ </div>
93
+ <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Sold Out</span>
94
+ </div>
95
+ <div class="flex items-center text-gray-500 mb-4">
96
+ <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
97
+ <span>June 15, 2023</span>
98
+ <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
99
+ <span>Los Angeles, CA</span>
100
+ </div>
101
+ <button class="w-full bg-gray-900 text-white py-2 px-4 rounded-md hover:bg-gray-800 transition">
102
+ Join Waitlist
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Event 2 -->
108
+ <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
109
+ <img src="http://static.photos/music/640x360/2" alt="Concert" class="w-full h-48 object-cover">
110
+ <div class="p-6">
111
+ <div class="flex justify-between items-start mb-2">
112
+ <div>
113
+ <h3 class="text-xl font-bold text-gray-900">Midnight Echoes</h3>
114
+ <p class="text-purple-600">Luna Wave</p>
115
+ </div>
116
+ <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Limited</span>
117
+ </div>
118
+ <div class="flex items-center text-gray-500 mb-4">
119
+ <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
120
+ <span>June 22, 2023</span>
121
+ <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
122
+ <span>New York, NY</span>
123
+ </div>
124
+ <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">
125
+ Get Tickets
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Event 3 -->
131
+ <div class="bg-white rounded-xl overflow-hidden shadow-md event-card">
132
+ <img src="http://static.photos/music/640x360/3" alt="Concert" class="w-full h-48 object-cover">
133
+ <div class="p-6">
134
+ <div class="flex justify-between items-start mb-2">
135
+ <div>
136
+ <h3 class="text-xl font-bold text-gray-900">Summer Vibes Festival</h3>
137
+ <p class="text-purple-600">Various Artists</p>
138
+ </div>
139
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">New</span>
140
+ </div>
141
+ <div class="flex items-center text-gray-500 mb-4">
142
+ <i data-feather="calendar" class="w-4 h-4 mr-2"></i>
143
+ <span>July 8-10, 2023</span>
144
+ <i data-feather="map-pin" class="w-4 h-4 ml-4 mr-2"></i>
145
+ <span>Chicago, IL</span>
146
+ </div>
147
+ <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">
148
+ Get Tickets
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="text-center mt-12">
155
+ <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">
156
+ View All Events <i data-feather="chevron-right" class="inline ml-2"></i>
157
+ </button>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Featured Artists -->
162
+ <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">
163
+ <div class="text-center mb-16">
164
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Featured Artists</h2>
165
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">World-class performers we're proud to work with</p>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
169
+ <!-- Artist 1 -->
170
+ <div class="text-center">
171
+ <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
172
+ <img src="http://static.photos/people/320x240/1" alt="Artist" class="w-full h-full object-cover">
173
+ </div>
174
+ <h3 class="font-bold text-gray-900">The Chromatics</h3>
175
+ <p class="text-sm text-gray-500">Electronic</p>
176
+ </div>
177
+
178
+ <!-- Artist 2 -->
179
+ <div class="text-center">
180
+ <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
181
+ <img src="http://static.photos/people/320x240/2" alt="Artist" class="w-full h-full object-cover">
182
+ </div>
183
+ <h3 class="font-bold text-gray-900">Luna Wave</h3>
184
+ <p class="text-sm text-gray-500">Indie Rock</p>
185
+ </div>
186
+
187
+ <!-- Artist 3 -->
188
+ <div class="text-center">
189
+ <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
190
+ <img src="http://static.photos/people/320x240/3" alt="Artist" class="w-full h-full object-cover">
191
+ </div>
192
+ <h3 class="font-bold text-gray-900">Solar Flare</h3>
193
+ <p class="text-sm text-gray-500">Alternative</p>
194
+ </div>
195
+
196
+ <!-- Artist 4 -->
197
+ <div class="text-center">
198
+ <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
199
+ <img src="http://static.photos/people/320x240/4" alt="Artist" class="w-full h-full object-cover">
200
+ </div>
201
+ <h3 class="font-bold text-gray-900">Midnight Echo</h3>
202
+ <p class="text-sm text-gray-500">Pop</p>
203
+ </div>
204
+
205
+ <!-- Artist 5 -->
206
+ <div class="text-center">
207
+ <div class="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-md">
208
+ <img src="http://static.photos/people/320x240/5" alt="Artist" class="w-full h-full object-cover">
209
+ </div>
210
+ <h3 class="font-bold text-gray-900">Neon Dreams</h3>
211
+ <p class="text-sm text-gray-500">Synthwave</p>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- CTA Section -->
217
+ <section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
218
+ <div class="bg-gray-900 rounded-2xl p-10 text-center">
219
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">Want to Book an Artist?</h2>
220
+ <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">We connect venues with amazing talent for unforgettable events.</p>
221
+ <button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition shadow-xl">
222
+ Contact Our Team <i data-feather="mail" class="inline ml-2"></i>
223
+ </button>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Footer -->
228
+ <footer class="bg-gray-900 text-gray-400 py-12 px-4 sm:px-6 lg:px-8">
229
+ <div class="max-w-7xl mx-auto">
230
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
231
+ <div>
232
+ <h3 class="text-white text-lg font-bold mb-4">PixelPulse Events</h3>
233
+ <p class="mb-4">Creating unforgettable concert experiences.</p>
234
+ <div class="flex space-x-4">
235
+ <a href="#" class="hover:text-white transition"><i data-feather="instagram"></i></a>
236
+ <a href="#" class="hover:text-white transition"><i data-feather="twitter"></i></a>
237
+ <a href="#" class="hover:text-white transition"><i data-feather="facebook"></i></a>
238
+ <a href="#" class="hover:text-white transition"><i data-feather="youtube"></i></a>
239
+ </div>
240
+ </div>
241
+ <div>
242
+ <h3 class="text-white text-lg font-bold mb-4">Events</h3>
243
+ <ul class="space-y-2">
244
+ <li><a href="#" class="hover:text-white transition">Upcoming Concerts</a></li>
245
+ <li><a href="#" class="hover:text-white transition">Festivals</a></li>
246
+ <li><a href="#" class="hover:text-white transition">Private Events</a></li>
247
+ <li><a href="#" class="hover:text-white transition">Corporate Bookings</a></li>
248
+ </ul>
249
+ </div>
250
+ <div>
251
+ <h3 class="text-white text-lg font-bold mb-4">Information</h3>
252
+ <ul class="space-y-2">
253
+ <li><a href="#" class="hover:text-white transition">FAQ</a></li>
254
+ <li><a href="#" class="hover:text-white transition">Venues</a></li>
255
+ <li><a href="#" class="hover:text-white transition">Safety</a></li>
256
+ <li><a href="#" class="hover:text-white transition">Accessibility</a></li>
257
+ </ul>
258
+ </div>
259
+ <div>
260
+ <h3 class="text-white text-lg font-bold mb-4">Contact</h3>
261
+ <ul class="space-y-2">
262
+ <li class="flex items-center"><i data-feather="mail" class="mr-2"></i> events@pixelpulse.com</li>
263
+ <li class="flex items-center"><i data-feather="phone" class="mr-2"></i> +1 (555) 987-6543</li>
264
+ <li class="flex items-center"><i data-feather="map-pin" class="mr-2"></i> 123 Music Lane, CA</li>
265
+ </ul>
266
+ </div>
267
+ </div>
268
+ <div class="border-t border-gray-800 mt-12 pt-8 text-sm text-center">
269
+ <p>© 2023 PixelPulse Events. All rights reserved.</p>
270
+ </div>
271
+ </div>
272
+ </footer>
273
+
274
+ <script>
275
+ // Initialize Feather Icons
276
+ feather.replace();
277
+
278
+ // Mobile menu toggle
279
+ document.getElementById('menu-toggle').addEventListener('click', function() {
280
+ // You would implement your mobile menu logic here
281
+ console.log('Mobile menu toggled');
282
+ });
283
+ </script>
284
+ </body>
285
+ </html>
flow.html CHANGED
@@ -46,8 +46,8 @@
46
  <!-- Sidebar -->
47
  <div class="sidebar bg-white border-r border-gray-200 w-64 flex-shrink-0 p-4 flex flex-col">
48
  <div class="flex items-center mb-6">
49
- <span class="text-xl font-bold gradient-text">Flow Builder</span>
50
- </div>
51
 
52
  <div class="mb-6">
53
  <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Nodes</h3>
@@ -75,9 +75,11 @@
75
  </div>
76
  </div>
77
  </div>
78
-
79
- <div class="mt-auto">
80
- <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition flex items-center justify-center">
 
 
81
  <i data-feather="save" class="w-4 h-4 mr-2"></i>
82
  Save Flow
83
  </button>
 
46
  <!-- Sidebar -->
47
  <div class="sidebar bg-white border-r border-gray-200 w-64 flex-shrink-0 p-4 flex flex-col">
48
  <div class="flex items-center mb-6">
49
+ <a href="/" class="text-xl font-bold gradient-text">Flow Builder</a>
50
+ </div>
51
 
52
  <div class="mb-6">
53
  <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Nodes</h3>
 
75
  </div>
76
  </div>
77
  </div>
78
+ <div class="space-y-4 mt-auto">
79
+ <a href="/events.html" class="block text-center bg-gray-100 hover:bg-gray-200 text-gray-800 py-2 px-4 rounded-md transition">
80
+ Back to Events
81
+ </a>
82
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition flex items-center justify-center">
83
  <i data-feather="save" class="w-4 h-4 mr-2"></i>
84
  Save Flow
85
  </button>
index.html CHANGED
@@ -41,6 +41,7 @@
41
  <div class="hidden md:flex items-center space-x-8">
42
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Features</a>
43
  <a href="flow.html" class="text-gray-700 hover:text-purple-600 transition">Flow Builder</a>
 
44
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Pricing</a>
45
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
46
  <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 Started</button>
 
41
  <div class="hidden md:flex items-center space-x-8">
42
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Features</a>
43
  <a href="flow.html" class="text-gray-700 hover:text-purple-600 transition">Flow Builder</a>
44
+ <a href="events.html" class="text-gray-700 hover:text-purple-600 transition">Events</a>
45
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Pricing</a>
46
  <a href="#" class="text-gray-700 hover:text-purple-600 transition">Contact</a>
47
  <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 Started</button>