Hugging Face's logo

Spaces:
irankunda
/
techconnect
Running

App Files Community
irankunda commited on
Commit
a808966
·
verified ·
1 Parent(s): 95b20ae

You’re building a web platform called “TechConnect”: a hub for tech enthusiasts to explore events, join communities, register for workshops, chat, and track progress. The client wants a full-featured web app with front-end polish and backend functionality (simulated with JSON or real server if you want).

Browse files

Project Scope
Pages (10+)

Landing Page

Hero section with call-to-action buttons: “Join Now” & “Explore Events”

Features overview: cards with hover effects

Testimonials slider

Footer with social links, subscription form

Login / Register

Form validation

Social login buttons (mock icons)

Password show/hide toggle

User Dashboard

Overview of upcoming events, joined communities, and notifications

Quick action buttons: “Join Event”, “Create Post”, “Message Community”

Event Listing Page

Filter by category, date, and location

Each event as a card with image, description, and “Register” button

Pagination or infinite scroll

Event Detail Page

Detailed description, location map, organizer info

Register/unregister button

Comment section (integrate with backend)

Create Event Page

Form with fields: title, description, date, location, category, image upload

Submit button connected to backend

Community Page

List of communities with join buttons

Sidebar filter: category, popular, trending

Search bar for communities

Community Detail Page

Community description

Post feed (text/images)

“Create Post” button

Like/comment buttons for posts

Profile Page

User info: name, email, bio, profile picture

Edit profile button

Tabs: My Events, My Communities, Settings

Admin Page

View all users and events

Approve/reject events

Manage categories

Buttons with hover/interaction effects

Settings Page

Account settings, password change, notification toggles

Dark/light mode switch

Save button connected to backend

Menus & Navigation

Sticky top navbar with dropdown menus

Side navigation for dashboard/admin pages

Mobile hamburger menu

Active page highlighting

Multi-level dropdowns in some pages (optional advanced feature)

Buttons & Interactions

Hover effects, active states, and click animations

Confirmation modals for delete actions

Toast notifications for actions (like “Event Registered!”)

Form validations (all required fields + proper feedback)

Backend Requirements

User authentication (register/login)

Event CRUD (Create, Read, Update, Delete)

Community post CRUD

Save user preferences/settings

Store registrations and interactions

Backend can be mocked using JSON server or implemented with Node.js + Express + MongoDB for practice

Tech Stack Recommendation

Front-end: HTML, CSS, JS (Vanilla or React)

Styling: Flexbox/Grid, CSS variables, responsive design

Animations: CSS & JS (fade-in, slide-in, hover effects)

Backend: Node.js + Express + MongoDB (or JSON server for offline dev)

Extras: LocalStorage for temporary persistence, optional chart for dashboard stats

Optional Advanced Features (Extra Challenge)

Real-time chat in communities (Socket.io or mock)

Drag-and-drop event scheduling

Notifications panel

Filter/search with live updates

Dark/light mode persisted in backend or localStorage

Multi-step forms for event creation - Initial Deployment

Files changed (5) hide show
  1. README.md +7 -5
  2. event-detail.html +281 -0
  3. events.html +463 -0
  4. index.html +297 -18
  5. prompts.txt +156 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Techconnect
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: techconnect
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
event-detail.html ADDED
@@ -0,0 +1,281 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TechConnect | Event Details</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .event-header {
15
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/technology/1200x630/1');
16
+ background-size: cover;
17
+ background-position: center;
18
+ }
19
+ .comment-box:focus-within {
20
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="font-sans antialiased text-gray-800">
25
+ <!-- Navigation -->
26
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
27
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
28
+ <div class="flex justify-between h-16">
29
+ <div class="flex">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <i data-feather="cpu" class="text-indigo-600 h-8 w-8"></i>
32
+ <span class="ml-2 text-xl font-bold text-indigo-600">TechConnect</span>
33
+ </div>
34
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
35
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
36
+ <a href="events.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Events</a>
37
+ <a href="communities.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Communities</a>
38
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
39
+ </div>
40
+ </div>
41
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
42
+ <a href="login.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">Log in</a>
43
+ <a href="register.html" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">Sign up</a>
44
+ </div>
45
+ <div class="-mr-2 flex items-center sm:hidden">
46
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Mobile menu -->
54
+ <div class="sm:hidden hidden" id="mobile-menu">
55
+ <div class="pt-2 pb-3 space-y-1">
56
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
57
+ <a href="events.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Events</a>
58
+ <a href="communities.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Communities</a>
59
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
60
+ <div class="pt-4 pb-3 border-t border-gray-200">
61
+ <div class="mt-3 space-y-1">
62
+ <a href="login.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Log in</a>
63
+ <a href="register.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign up</a>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </nav>
69
+
70
+ <!-- Event Header -->
71
+ <div class="event-header text-white">
72
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
73
+ <div class="max-w-3xl">
74
+ <div class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mb-4">Web Development</div>
75
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-right">React Conference 2023</h1>
76
+ <p class="mt-6 text-xl text-gray-300" data-aos="fade-right" data-aos-delay="100">Join us for the biggest React conference of the year featuring talks from core team members and industry experts.</p>
77
+ <div class="mt-8 flex flex-wrap gap-4" data-aos="fade-right" data-aos-delay="200">
78
+ <div class="flex items-center">
79
+ <i data-feather="calendar" class="h-5 w-5 text-gray-300"></i>
80
+ <span class="ml-2">Nov 15-17, 2023</span>
81
+ </div>
82
+ <div class="flex items-center">
83
+ <i data-feather="clock" class="h-5 w-5 text-gray-300"></i>
84
+ <span class="ml-2">9:00 AM - 6:00 PM</span>
85
+ </div>
86
+ <div class="flex items-center">
87
+ <i data-feather="map-pin" class="h-5 w-5 text-gray-300"></i>
88
+ <span class="ml-2">Online Event</span>
89
+ </div>
90
+ </div>
91
+ <div class="mt-10 flex flex-wrap gap-4" data-aos="fade-right" data-aos-delay="300">
92
+ <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
93
+ Register Now
94
+ </button>
95
+ <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
96
+ <i data-feather="share-2" class="mr-2 h-5 w-5"></i> Share
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Event Details -->
104
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
105
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
106
+ <!-- Main Content -->
107
+ <div class="lg:col-span-8">
108
+ <div class="prose max-w-none" data-aos="fade-up">
109
+ <h2 class="text-2xl font-bold text-gray-900">About This Event</h2>
110
+ <p class="mt-4 text-gray-600">
111
+ React Conference 2023 brings together the global React community for three days of learning, networking, and collaboration. This year's event features talks from React core team members, including updates on the latest features and the future roadmap of React.
112
+ </p>
113
+ <h3 class="mt-8 text-xl font-bold text-gray-900">What You'll Learn</h3>
114
+ <ul class="mt-4 text-gray-600">
115
+ <li>Deep dives into React 18 features like concurrent rendering</li>
116
+ <li>Best practices for state management in large applications</li>
117
+ <li>Performance optimization techniques</li>
118
+ <li>Server components and their impact on React architecture</li>
119
+ <li>Testing strategies for React applications</li>
120
+ </ul>
121
+ <h3 class="mt-8 text-xl font-bold text-gray-900">Event Schedule</h3>
122
+ <div class="mt-6 space-y-6">
123
+ <!-- Day 1 -->
124
+ <div>
125
+ <h4 class="font-semibold text-lg text-gray-900">Day 1: November 15</h4>
126
+ <div class="mt-4 space-y-4">
127
+ <div class="flex items-start">
128
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
129
+ <i data-feather="clock" class="h-5 w-5 text-indigo-600"></i>
130
+ </div>
131
+ <div class="ml-4">
132
+ <p class="text-sm font-medium text-gray-900">9:00 AM - 10:00 AM</p>
133
+ <p class="text-sm text-gray-600">Registration & Welcome Coffee</p>
134
+ </div>
135
+ </div>
136
+ <div class="flex items-start">
137
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
138
+ <i data-feather="clock" class="h-5 w-5 text-indigo-600"></i>
139
+ </div>
140
+ <div class="ml-4">
141
+ <p class="text-sm font-medium text-gray-900">10:00 AM - 11:00 AM</p>
142
+ <p class="text-sm text-gray-600">Keynote: The Future of React</p>
143
+ <p class="text-sm text-gray-500">Dan Abramov, React Core Team</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <!-- Day 2 -->
149
+ <div>
150
+ <h4 class="font-semibold text-lg text-gray-900">Day 2: November 16</h4>
151
+ <div class="mt-4 space-y-4">
152
+ <div class="flex items-start">
153
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
154
+ <i data-feather="clock" class="h-5 w-5 text-indigo-600"></i>
155
+ </div>
156
+ <div class="ml-4">
157
+ <p class="text-sm font-medium text-gray-900">9:30 AM - 10:30 AM</p>
158
+ <p class="text-sm text-gray-600">React Performance Deep Dive</p>
159
+ <p class="text-sm text-gray-500">Sophie Alpert, React Core Team</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <h3 class="mt-8 text-xl font-bold text-gray-900">Who Should Attend</h3>
166
+ <p class="mt-4 text-gray-600">
167
+ This conference is ideal for frontend developers, full-stack engineers, and technical leads who work with React or are considering adopting React for their projects. Whether you're a beginner or an experienced React developer, you'll find valuable content tailored to your level.
168
+ </p>
169
+ </div>
170
+
171
+ <!-- Speakers -->
172
+ <div class="mt-16" data-aos="fade-up" data-aos-delay="100">
173
+ <h2 class="text-2xl font-bold text-gray-900">Featured Speakers</h2>
174
+ <div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
175
+ <!-- Speaker 1 -->
176
+ <div class="bg-white rounded-lg shadow overflow-hidden">
177
+ <img class="h-48 w-full object-cover" src="http://static.photos/people/640x360/1" alt="Dan Abramov">
178
+ <div class="p-6">
179
+ <h3 class="text-lg font-medium text-gray-900">Dan Abramov</h3>
180
+ <p class="mt-1 text-sm text-indigo-600">React Core Team</p>
181
+ <p class="mt-2 text-sm text-gray-600">
182
+ Co-creator of Redux and Create React App. Currently working on React at Facebook.
183
+ </p>
184
+ <div class="mt-4 flex space-x-4">
185
+ <a href="#" class="text-gray-400 hover:text-gray-500">
186
+ <i data-feather="twitter"></i>
187
+ </a>
188
+ <a href="#" class="text-gray-400 hover:text-gray-500">
189
+ <i data-feather="github"></i>
190
+ </a>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <!-- Speaker 2 -->
195
+ <div class="bg-white rounded-lg shadow overflow-hidden">
196
+ <img class="h-48 w-full object-cover" src="http://static.photos/people/640x360/2" alt="Sophie Alpert">
197
+ <div class="p-6">
198
+ <h3 class="text-lg font-medium text-gray-900">Sophie Alpert</h3>
199
+ <p class="mt-1 text-sm text-indigo-600">React Core Team</p>
200
+ <p class="mt-2 text-sm text-gray-600">
201
+ Engineering Manager for the React team at Facebook. Previously worked at Khan Academy.
202
+ </p>
203
+ <div class="mt-4 flex space-x-4">
204
+ <a href="#" class="text-gray-400 hover:text-gray-500">
205
+ <i data-feather="twitter"></i>
206
+ </a>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <!-- Speaker 3 -->
211
+ <div class="bg-white rounded-lg shadow overflow-hidden">
212
+ <img class="h-48 w-full object-cover" src="http://static.photos/people/640x360/3" alt="Ryan Florence">
213
+ <div class="p-6">
214
+ <h3 class="text-lg font-medium text-gray-900">Ryan Florence</h3>
215
+ <p class="mt-1 text-sm text-indigo-600">Co-creator of React Router</p>
216
+ <p class="mt-2 text-sm text-gray-600">
217
+ Educator and open source developer. Creator of React Training and Reach UI.
218
+ </p>
219
+ <div class="mt-4 flex space-x-4">
220
+ <a href="#" class="text-gray-400 hover:text-gray-500">
221
+ <i data-feather="twitter"></i>
222
+ </a>
223
+ <a href="#" class="text-gray-400 hover:text-gray-500">
224
+ <i data-feather="github"></i>
225
+ </a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Comments Section -->
233
+ <div class="mt-16" data-aos="fade-up" data-aos-delay="200">
234
+ <h2 class="text-2xl font-bold text-gray-900">Discussion</h2>
235
+ <div class="mt-6">
236
+ <!-- Comment Form -->
237
+ <div class="comment-box bg-white rounded-lg shadow-sm p-4 border border-gray-200 transition-all duration-150">
238
+ <form>
239
+ <label for="comment" class="sr-only">Add your comment</label>
240
+ <textarea id="comment" name="comment" rows="3" class="block w-full border-0 focus:ring-0 resize-none" placeholder="Add your comment..."></textarea>
241
+ <div class="mt-4 flex justify-end">
242
+ <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
243
+ Post Comment
244
+ </button>
245
+ </div>
246
+ </form>
247
+ </div>
248
+
249
+ <!-- Comments List -->
250
+ <div class="mt-8 space-y-6">
251
+ <!-- Comment 1 -->
252
+ <div class="bg-white rounded-lg shadow-sm p-6">
253
+ <div class="flex items-start">
254
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah Johnson">
255
+ <div class="ml-4 flex-1">
256
+ <div class="flex items-center justify-between">
257
+ <h4 class="text-sm font-medium text-gray-900">Sarah Johnson</h4>
258
+ <span class="text-xs text-gray-500">2 days ago</span>
259
+ </div>
260
+ <p class="mt-1 text-sm text-gray-600">
261
+ Really looking forward to the performance deep dive! I've been struggling with some rendering bottlenecks in our app.
262
+ </p>
263
+ <div class="mt-3 flex items-center space-x-4">
264
+ <button class="text-sm text-gray-500 hover:text-gray-900 flex items-center">
265
+ <i data-feather="thumbs-up" class="h-4 w-4 mr-1"></i> 5
266
+ </button>
267
+ <button class="text-sm text-gray-500 hover:text-gray-900">Reply</button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Comment 2 -->
274
+ <div class="bg-white rounded-lg shadow-sm p-6">
275
+ <div class="flex items-start">
276
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael Chen">
277
+ <div class="ml-4 flex-1">
278
+ <div class="flex items-center justify-between">
279
+ <h4 class="text-sm font-medium text-gray-900">Michael Chen</h
280
+ </body>
281
+ </html>
events.html ADDED
@@ -0,0 +1,463 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TechConnect | Events</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .event-card:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+ .filter-section {
19
+ scrollbar-width: thin;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="font-sans antialiased text-gray-800">
24
+ <!-- Navigation -->
25
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
26
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
27
+ <div class="flex justify-between h-16">
28
+ <div class="flex">
29
+ <div class="flex-shrink-0 flex items-center">
30
+ <i data-feather="cpu" class="text-indigo-600 h-8 w-8"></i>
31
+ <span class="ml-2 text-xl font-bold text-indigo-600">TechConnect</span>
32
+ </div>
33
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
34
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
35
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Events</a>
36
+ <a href="communities.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Communities</a>
37
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
38
+ </div>
39
+ </div>
40
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
41
+ <a href="login.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">Log in</a>
42
+ <a href="register.html" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">Sign up</a>
43
+ </div>
44
+ <div class="-mr-2 flex items-center sm:hidden">
45
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
46
+ <i data-feather="menu"></i>
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Mobile menu -->
53
+ <div class="sm:hidden hidden" id="mobile-menu">
54
+ <div class="pt-2 pb-3 space-y-1">
55
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
56
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Events</a>
57
+ <a href="communities.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Communities</a>
58
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
59
+ <div class="pt-4 pb-3 border-t border-gray-200">
60
+ <div class="mt-3 space-y-1">
61
+ <a href="login.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Log in</a>
62
+ <a href="register.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign up</a>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </nav>
68
+
69
+ <!-- Events Header -->
70
+ <div class="bg-gray-50">
71
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
72
+ <div class="lg:flex lg:items-center lg:justify-between">
73
+ <div class="flex-1 min-w-0">
74
+ <h1 class="text-3xl font-bold leading-tight text-gray-900 sm:text-4xl sm:truncate" data-aos="fade-right">
75
+ Upcoming Tech Events
76
+ </h1>
77
+ <p class="mt-2 text-lg text-gray-600" data-aos="fade-right" data-aos-delay="100">
78
+ Discover and register for the latest conferences, workshops, and meetups.
79
+ </p>
80
+ </div>
81
+ <div class="mt-5 flex lg:mt-0 lg:ml-4" data-aos="fade-left">
82
+ <a href="create-event.html" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
83
+ <i data-feather="plus" class="-ml-1 mr-2 h-4 w-4"></i>
84
+ Create Event
85
+ </a>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Main Content -->
92
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
93
+ <div class="lg:grid lg:grid-cols-12 lg:gap-8">
94
+ <!-- Filters -->
95
+ <div class="lg:col-span-3 mb-8 lg:mb-0">
96
+ <div class="bg-white p-6 rounded-lg shadow-sm sticky top-24">
97
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Filters</h3>
98
+
99
+ <!-- Search -->
100
+ <div class="mb-6">
101
+ <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search</label>
102
+ <div class="mt-1 relative rounded-md shadow-sm">
103
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
104
+ <i data-feather="search" class="h-4 w-4 text-gray-400"></i>
105
+ </div>
106
+ <input type="text" name="search" id="search" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="React, AI, etc.">
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Categories -->
111
+ <div class="mb-6">
112
+ <label class="block text-sm font-medium text-gray-700 mb-2">Categories</label>
113
+ <div class="space-y-2">
114
+ <div class="flex items-center">
115
+ <input id="web-dev" name="category" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
116
+ <label for="web-dev" class="ml-3 text-sm text-gray-700">Web Development</label>
117
+ </div>
118
+ <div class="flex items-center">
119
+ <input id="mobile-dev" name="category" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
120
+ <label for="mobile-dev" class="ml-3 text-sm text-gray-700">Mobile Development</label>
121
+ </div>
122
+ <div class="flex items-center">
123
+ <input id="data-science" name="category" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
124
+ <label for="data-science" class="ml-3 text-sm text-gray-700">Data Science</label>
125
+ </div>
126
+ <div class="flex items-center">
127
+ <input id="ai-ml" name="category" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
128
+ <label for="ai-ml" class="ml-3 text-sm text-gray-700">AI & Machine Learning</label>
129
+ </div>
130
+ <div class="flex items-center">
131
+ <input id="devops" name="category" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
132
+ <label for="devops" class="ml-3 text-sm text-gray-700">DevOps</label>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Date -->
138
+ <div class="mb-6">
139
+ <label class="block text-sm font-medium text-gray-700 mb-2">Date</label>
140
+ <div class="space-y-2">
141
+ <div class="flex items-center">
142
+ <input id="this-week" name="date" type="radio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" checked>
143
+ <label for="this-week" class="ml-3 text-sm text-gray-700">This Week</label>
144
+ </div>
145
+ <div class="flex items-center">
146
+ <input id="this-month" name="date" type="radio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
147
+ <label for="this-month" class="ml-3 text-sm text-gray-700">This Month</label>
148
+ </div>
149
+ <div class="flex items-center">
150
+ <input id="next-3-months" name="date" type="radio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
151
+ <label for="next-3-months" class="ml-3 text-sm text-gray-700">Next 3 Months</label>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Location -->
157
+ <div>
158
+ <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
159
+ <div class="space-y-2">
160
+ <div class="flex items-center">
161
+ <input id="online" name="location" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
162
+ <label for="online" class="ml-3 text-sm text-gray-700">Online</label>
163
+ </div>
164
+ <div class="flex items-center">
165
+ <input id="in-person" name="location" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
166
+ <label for="in-person" class="ml-3 text-sm text-gray-700">In-Person</label>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <button type="button" class="mt-6 w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
172
+ Apply Filters
173
+ </button>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Events List -->
178
+ <div class="lg:col-span-9">
179
+ <div class="mb-6 flex justify-between items-center">
180
+ <h2 class="text-lg font-medium text-gray-900">Showing 12 events</h2>
181
+ <div class="relative">
182
+ <select id="sort" name="sort" class="block appearance-none bg-white border border-gray-300 text-gray-700 py-2 px-4 pr-8 rounded-md leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
183
+ <option>Sort by: Newest</option>
184
+ <option>Sort by: Soonest</option>
185
+ <option>Sort by: Popular</option>
186
+ </select>
187
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
188
+ <i data-feather="chevron-down" class="h-4 w-4"></i>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-2">
194
+ <!-- Event Card 1 -->
195
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up">
196
+ <div class="relative pb-3/4">
197
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/1" alt="React Conference">
198
+ </div>
199
+ <div class="p-6">
200
+ <div class="flex items-center">
201
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">Web Dev</span>
202
+ <span class="ml-2 text-sm text-gray-500">Online</span>
203
+ </div>
204
+ <div class="mt-4">
205
+ <h3 class="text-xl font-semibold text-gray-900">React Conference 2023</h3>
206
+ <p class="mt-2 text-gray-600 line-clamp-2">
207
+ Join us for the biggest React conference of the year featuring talks from core team members and industry experts.
208
+ </p>
209
+ </div>
210
+ <div class="mt-6 flex items-center justify-between">
211
+ <div class="flex items-center">
212
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
213
+ <span class="ml-2 text-sm text-gray-500">Nov 15-17, 2023</span>
214
+ </div>
215
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
216
+ Register
217
+ </a>
218
+ </div>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- Event Card 2 -->
223
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="100">
224
+ <div class="relative pb-3/4">
225
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/2" alt="AI Workshop">
226
+ </div>
227
+ <div class="p-6">
228
+ <div class="flex items-center">
229
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-purple-100 text-purple-800">AI/ML</span>
230
+ <span class="ml-2 text-sm text-gray-500">San Francisco, CA</span>
231
+ </div>
232
+ <div class="mt-4">
233
+ <h3 class="text-xl font-semibold text-gray-900">Practical AI Workshop</h3>
234
+ <p class="mt-2 text-gray-600 line-clamp-2">
235
+ Hands-on workshop covering the latest techniques in machine learning and artificial intelligence.
236
+ </p>
237
+ </div>
238
+ <div class="mt-6 flex items-center justify-between">
239
+ <div class="flex items-center">
240
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
241
+ <span class="ml-2 text-sm text-gray-500">Dec 5, 2023</span>
242
+ </div>
243
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
244
+ Register
245
+ </a>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Event Card 3 -->
251
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="200">
252
+ <div class="relative pb-3/4">
253
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/3" alt="DevOps Summit">
254
+ </div>
255
+ <div class="p-6">
256
+ <div class="flex items-center">
257
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">DevOps</span>
258
+ <span class="ml-2 text-sm text-gray-500">Online</span>
259
+ </div>
260
+ <div class="mt-4">
261
+ <h3 class="text-xl font-semibold text-gray-900">DevOps Global Summit</h3>
262
+ <p class="mt-2 text-gray-600 line-clamp-2">
263
+ Learn about the latest tools and practices in DevOps and cloud infrastructure from industry leaders.
264
+ </p>
265
+ </div>
266
+ <div class="mt-6 flex items-center justify-between">
267
+ <div class="flex items-center">
268
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
269
+ <span class="ml-2 text-sm text-gray-500">Oct 28-29, 2023</span>
270
+ </div>
271
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
272
+ Register
273
+ </a>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Event Card 4 -->
279
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="300">
280
+ <div class="relative pb-3/4">
281
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/4" alt="UX Design Meetup">
282
+ </div>
283
+ <div class="p-6">
284
+ <div class="flex items-center">
285
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">Design</span>
286
+ <span class="ml-2 text-sm text-gray-500">New York, NY</span>
287
+ </div>
288
+ <div class="mt-4">
289
+ <h3 class="text-xl font-semibold text-gray-900">UX Design Monthly Meetup</h3>
290
+ <p class="mt-2 text-gray-600 line-clamp-2">
291
+ Monthly gathering for UX designers to share insights, case studies, and network with peers.
292
+ </p>
293
+ </div>
294
+ <div class="mt-6 flex items-center justify-between">
295
+ <div class="flex items-center">
296
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
297
+ <span class="ml-2 text-sm text-gray-500">Nov 8, 2023</span>
298
+ </div>
299
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
300
+ Register
301
+ </a>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Event Card 5 -->
307
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="400">
308
+ <div class="relative pb-3/4">
309
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/5" alt="Data Science Bootcamp">
310
+ </div>
311
+ <div class="p-6">
312
+ <div class="flex items-center">
313
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">Data Science</span>
314
+ <span class="ml-2 text-sm text-gray-500">Online</span>
315
+ </div>
316
+ <div class="mt-4">
317
+ <h3 class="text-xl font-semibold text-gray-900">Data Science Bootcamp</h3>
318
+ <p class="mt-2 text-gray-600 line-clamp-2">
319
+ Intensive 4-week bootcamp covering Python, Pandas, NumPy, and machine learning fundamentals.
320
+ </p>
321
+ </div>
322
+ <div class="mt-6 flex items-center justify-between">
323
+ <div class="flex items-center">
324
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
325
+ <span class="ml-2 text-sm text-gray-500">Nov 20 - Dec 15, 2023</span>
326
+ </div>
327
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
328
+ Register
329
+ </a>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Event Card 6 -->
335
+ <div class="event-card bg-white rounded-lg shadow overflow-hidden transition-all duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="500">
336
+ <div class="relative pb-3/4">
337
+ <img class="absolute h-full w-full object-cover" src="http://static.photos/technology/640x360/6" alt="Mobile Dev Conference">
338
+ </div>
339
+ <div class="p-6">
340
+ <div class="flex items-center">
341
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800">Mobile</span>
342
+ <span class="ml-2 text-sm text-gray-500">Austin, TX</span>
343
+ </div>
344
+ <div class="mt-4">
345
+ <h3 class="text-xl font-semibold text-gray-900">Mobile Dev Conference</h3>
346
+ <p class="mt-2 text-gray-600 line-clamp-2">
347
+ Annual conference for mobile developers covering Flutter, React Native, Swift, and Kotlin.
348
+ </p>
349
+ </div>
350
+ <div class="mt-6 flex items-center justify-between">
351
+ <div class="flex items-center">
352
+ <i data-feather="calendar" class="h-4 w-4 text-gray-400"></i>
353
+ <span class="ml-2 text-sm text-gray-500">Dec 10-12, 2023</span>
354
+ </div>
355
+ <a href="event-detail.html" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
356
+ Register
357
+ </a>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Pagination -->
364
+ <nav class="mt-10 flex items-center justify-between border-t border-gray-200 pt-6" aria-label="Pagination">
365
+ <div class="-mt-px flex-1 flex justify-start">
366
+ <a href="#" class="inline-flex items-center pt-4 pr-1 text-sm font-medium text-gray-500 hover:text-gray-700">
367
+ <i data-feather="arrow-left" class="mr-3 h-4 w-4 text-gray-400"></i>
368
+ Previous
369
+ </a>
370
+ </div>
371
+ <div class="hidden md:flex">
372
+ <a href="#" class="inline-flex items-center px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700">1</a>
373
+ <a href="#" class="inline-flex items-center px-4 pt-4 text-sm font-medium text-indigo-600 border-t-2 border-indigo-500">2</a>
374
+ <a href="#" class="inline-flex items-center px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700">3</a>
375
+ <span class="inline-flex items-center px-4 pt-4 text-sm font-medium text-gray-500">...</span>
376
+ <a href="#" class="inline-flex items-center px-4 pt-4 text-sm font-medium text-gray-500 hover:text-gray-700">8</a>
377
+ </div>
378
+ <div class="-mt-px flex-1 flex justify-end">
379
+ <a href="#" class="inline-flex items-center pt-4 pl-1 text-sm font-medium text-gray-500 hover:text-gray-700">
380
+ Next
381
+ <i data-feather="arrow-right" class="ml-3 h-4 w-4 text-gray-400"></i>
382
+ </a>
383
+ </div>
384
+ </nav>
385
+ </div>
386
+ </div>
387
+ </main>
388
+
389
+ <!-- Footer -->
390
+ <footer class="bg-gray-800">
391
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
392
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
393
+ <div class="col-span-2">
394
+ <h3 class="text-white text-lg font-semibold">TechConnect</h3>
395
+ <p class="mt-4 text-gray-300">
396
+ Connecting tech enthusiasts worldwide through events, communities, and shared knowledge.
397
+ </p>
398
+ <div class="mt-4 flex space-x-6">
399
+ <a href="#" class="text-gray-400 hover:text-white">
400
+ <i data-feather="twitter"></i>
401
+ </a>
402
+ <a href="#" class="text-gray-400 hover:text-white">
403
+ <i data-feather="facebook"></i>
404
+ </a>
405
+ <a href="#" class="text-gray-400 hover:text-white">
406
+ <i data-feather="instagram"></i>
407
+ </a>
408
+ <a href="#" class="text-gray-400 hover:text-white">
409
+ <i data-feather="github"></i>
410
+ </a>
411
+ </div>
412
+ </div>
413
+ <div>
414
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Navigation</h3>
415
+ <ul class="mt-4 space-y-4">
416
+ <li><a href="index.html" class="text-base text-gray-300 hover:text-white">Home</a></li>
417
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Events</a></li>
418
+ <li><a href="communities.html" class="text-base text-gray-300 hover:text-white">Communities</a></li>
419
+ <li><a href="dashboard.html" class="text-base text-gray-300 hover:text-white">Dashboard</a></li>
420
+ </ul>
421
+ </div>
422
+ <div>
423
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Subscribe to our newsletter</h3>
424
+ <p class="mt-4 text-gray-300">The latest news, articles, and resources, sent to your inbox weekly.</p>
425
+ <form class="mt-4 sm:flex">
426
+ <label for="email" class="sr-only">Email address</label>
427
+ <input type="email" name="email" id="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs border-gray-300 rounded-md" placeholder="Enter your email">
428
+ <button type="submit" class="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0">
429
+ Subscribe
430
+ </button>
431
+ </form>
432
+ </div>
433
+ </div>
434
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
435
+ <div class="flex space-x-6 md:order-2">
436
+ <a href="#" class="text-gray-400 hover:text-gray-300">Privacy</a>
437
+ <a href="#" class="text-gray-400 hover:text-gray-300">Terms</a>
438
+ <a href="#" class="text-gray-400 hover:text-gray-300">Contact</a>
439
+ </div>
440
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
441
+ &copy; 2023 TechConnect. All rights reserved.
442
+ </p>
443
+ </div>
444
+ </div>
445
+ </footer>
446
+
447
+ <script>
448
+ // Mobile menu toggle
449
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
450
+ const menu = document.getElementById('mobile-menu');
451
+ menu.classList.toggle('hidden');
452
+ });
453
+
454
+ // Initialize animations and icons
455
+ AOS.init({
456
+ duration: 800,
457
+ easing: 'ease-in-out',
458
+ once: true
459
+ });
460
+ feather.replace();
461
+ </script>
462
+ </body>
463
+ </html>
index.html CHANGED
@@ -1,19 +1,298 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>TechConnect | Home</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+ }
17
+ .feature-card:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .testimonial-slider {
22
+ scroll-snap-type: x mandatory;
23
+ }
24
+ .testimonial-slide {
25
+ scroll-snap-align: start;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans antialiased text-gray-800">
30
+ <!-- Navigation -->
31
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <i data-feather="cpu" class="text-indigo-600 h-8 w-8"></i>
37
+ <span class="ml-2 text-xl font-bold text-indigo-600">TechConnect</span>
38
+ </div>
39
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
40
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
41
+ <a href="events.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Events</a>
42
+ <a href="communities.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Communities</a>
43
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
44
+ </div>
45
+ </div>
46
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
47
+ <a href="login.html" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">Log in</a>
48
+ <a href="register.html" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">Sign up</a>
49
+ </div>
50
+ <div class="-mr-2 flex items-center sm:hidden">
51
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
52
+ <i data-feather="menu"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <!-- Mobile menu -->
59
+ <div class="sm:hidden hidden" id="mobile-menu">
60
+ <div class="pt-2 pb-3 space-y-1">
61
+ <a href="#" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
62
+ <a href="events.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Events</a>
63
+ <a href="communities.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Communities</a>
64
+ <a href="dashboard.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
65
+ <div class="pt-4 pb-3 border-t border-gray-200">
66
+ <div class="mt-3 space-y-1">
67
+ <a href="login.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Log in</a>
68
+ <a href="register.html" class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100">Sign up</a>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </nav>
74
+
75
+ <!-- Hero Section -->
76
+ <div class="hero-gradient">
77
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center">
78
+ <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl" data-aos="fade-down">
79
+ Connect with Tech Enthusiasts Worldwide
80
+ </h1>
81
+ <p class="mt-6 max-w-lg mx-auto text-xl text-indigo-100" data-aos="fade-up" data-aos-delay="100">
82
+ Join events, participate in communities, and grow your network in the tech industry.
83
+ </p>
84
+ <div class="mt-10 flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200">
85
+ <a href="register.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50">
86
+ Join Now
87
+ </a>
88
+ <a href="events.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70">
89
+ Explore Events
90
+ </a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Features Section -->
96
+ <div class="py-12 bg-white">
97
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
98
+ <div class="lg:text-center">
99
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Features</h2>
100
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
101
+ Everything you need to grow in tech
102
+ </p>
103
+ </div>
104
+
105
+ <div class="mt-10">
106
+ <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
107
+ <!-- Feature 1 -->
108
+ <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md" data-aos="fade-up" data-aos-delay="200">
109
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
110
+ <i data-feather="calendar"></i>
111
+ </div>
112
+ <div class="mt-5">
113
+ <h3 class="text-lg font-medium text-gray-900">Tech Events</h3>
114
+ <p class="mt-2 text-base text-gray-500">
115
+ Discover and register for the latest tech conferences, workshops, and meetups.
116
+ </p>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Feature 2 -->
121
+ <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md" data-aos="fade-up" data-aos-delay="300">
122
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
123
+ <i data-feather="users"></i>
124
+ </div>
125
+ <div class="mt-5">
126
+ <h3 class="text-lg font-medium text-gray-900">Communities</h3>
127
+ <p class="mt-2 text-base text-gray-500">
128
+ Join tech communities, participate in discussions, and network with peers.
129
+ </p>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Feature 3 -->
134
+ <div class="feature-card transition-all duration-300 ease-in-out rounded-lg bg-white p-6 shadow-md" data-aos="fade-up" data-aos-delay="400">
135
+ <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
136
+ <i data-feather="trending-up"></i>
137
+ </div>
138
+ <div class="mt-5">
139
+ <h3 class="text-lg font-medium text-gray-900">Track Progress</h3>
140
+ <p class="mt-2 text-base text-gray-500">
141
+ Monitor your event participation and community engagement in one place.
142
+ </p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Testimonials Section -->
151
+ <div class="bg-gray-50 py-16">
152
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
153
+ <div class="lg:text-center mb-12">
154
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-up">Testimonials</h2>
155
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-up" data-aos-delay="100">
156
+ What our members say
157
+ </p>
158
+ </div>
159
+
160
+ <div class="relative overflow-hidden">
161
+ <div class="testimonial-slider flex overflow-x-auto space-x-4 pb-6 -mx-4 px-4" style="scrollbar-width: none;">
162
+ <!-- Testimonial 1 -->
163
+ <div class="testimonial-slide flex-shrink-0 w-full sm:w-2/3 lg:w-1/2 bg-white rounded-lg shadow p-6" data-aos="fade-right">
164
+ <div class="flex items-center">
165
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah Johnson">
166
+ <div class="ml-4">
167
+ <h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4>
168
+ <p class="text-indigo-600">Frontend Developer</p>
169
+ </div>
170
+ </div>
171
+ <p class="mt-4 text-gray-600">
172
+ "TechConnect helped me find amazing local meetups that I wouldn't have discovered otherwise. The community is incredibly supportive and knowledgeable."
173
+ </p>
174
+ </div>
175
+
176
+ <!-- Testimonial 2 -->
177
+ <div class="testimonial-slide flex-shrink-0 w-full sm:w-2/3 lg:w-1/2 bg-white rounded-lg shadow p-6" data-aos="fade-right" data-aos-delay="100">
178
+ <div class="flex items-center">
179
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael Chen">
180
+ <div class="ml-4">
181
+ <h4 class="text-lg font-medium text-gray-900">Michael Chen</h4>
182
+ <p class="text-indigo-600">DevOps Engineer</p>
183
+ </div>
184
+ </div>
185
+ <p class="mt-4 text-gray-600">
186
+ "As someone new to the tech industry, the communities on TechConnect provided invaluable resources and connections that accelerated my career growth."
187
+ </p>
188
+ </div>
189
+
190
+ <!-- Testimonial 3 -->
191
+ <div class="testimonial-slide flex-shrink-0 w-full sm:w-2/3 lg:w-1/2 bg-white rounded-lg shadow p-6" data-aos="fade-right" data-aos-delay="200">
192
+ <div class="flex items-center">
193
+ <img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Priya Patel">
194
+ <div class="ml-4">
195
+ <h4 class="text-lg font-medium text-gray-900">Priya Patel</h4>
196
+ <p class="text-indigo-600">UX Designer</p>
197
+ </div>
198
+ </div>
199
+ <p class="mt-4 text-gray-600">
200
+ "The event organization features are fantastic. I've hosted two workshops through TechConnect and the registration process was seamless."
201
+ </p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- CTA Section -->
209
+ <div class="bg-indigo-700">
210
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
211
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl" data-aos="fade-up">
212
+ <span class="block">Ready to dive in?</span>
213
+ <span class="block">Start your tech journey today.</span>
214
+ </h2>
215
+ <p class="mt-4 text-lg leading-6 text-indigo-200" data-aos="fade-up" data-aos-delay="100">
216
+ Join thousands of tech enthusiasts who are already growing their network and skills.
217
+ </p>
218
+ <a href="register.html" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto" data-aos="fade-up" data-aos-delay="200">
219
+ Sign up for free
220
+ </a>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Footer -->
225
+ <footer class="bg-gray-800">
226
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
227
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
228
+ <div class="col-span-2">
229
+ <h3 class="text-white text-lg font-semibold">TechConnect</h3>
230
+ <p class="mt-4 text-gray-300">
231
+ Connecting tech enthusiasts worldwide through events, communities, and shared knowledge.
232
+ </p>
233
+ <div class="mt-4 flex space-x-6">
234
+ <a href="#" class="text-gray-400 hover:text-white">
235
+ <i data-feather="twitter"></i>
236
+ </a>
237
+ <a href="#" class="text-gray-400 hover:text-white">
238
+ <i data-feather="facebook"></i>
239
+ </a>
240
+ <a href="#" class="text-gray-400 hover:text-white">
241
+ <i data-feather="instagram"></i>
242
+ </a>
243
+ <a href="#" class="text-gray-400 hover:text-white">
244
+ <i data-feather="github"></i>
245
+ </a>
246
+ </div>
247
+ </div>
248
+ <div>
249
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Navigation</h3>
250
+ <ul class="mt-4 space-y-4">
251
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Home</a></li>
252
+ <li><a href="events.html" class="text-base text-gray-300 hover:text-white">Events</a></li>
253
+ <li><a href="communities.html" class="text-base text-gray-300 hover:text-white">Communities</a></li>
254
+ <li><a href="dashboard.html" class="text-base text-gray-300 hover:text-white">Dashboard</a></li>
255
+ </ul>
256
+ </div>
257
+ <div>
258
+ <h3 class="text-white text-sm font-semibold tracking-wider uppercase">Subscribe to our newsletter</h3>
259
+ <p class="mt-4 text-gray-300">The latest news, articles, and resources, sent to your inbox weekly.</p>
260
+ <form class="mt-4 sm:flex">
261
+ <label for="email" class="sr-only">Email address</label>
262
+ <input type="email" name="email" id="email" required class="w-full px-5 py-3 placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs border-gray-300 rounded-md" placeholder="Enter your email">
263
+ <button type="submit" class="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0">
264
+ Subscribe
265
+ </button>
266
+ </form>
267
+ </div>
268
+ </div>
269
+ <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
270
+ <div class="flex space-x-6 md:order-2">
271
+ <a href="#" class="text-gray-400 hover:text-gray-300">Privacy</a>
272
+ <a href="#" class="text-gray-400 hover:text-gray-300">Terms</a>
273
+ <a href="#" class="text-gray-400 hover:text-gray-300">Contact</a>
274
+ </div>
275
+ <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
276
+ &copy; 2023 TechConnect. All rights reserved.
277
+ </p>
278
+ </div>
279
+ </div>
280
+ </footer>
281
+
282
+ <script>
283
+ // Mobile menu toggle
284
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
285
+ const menu = document.getElementById('mobile-menu');
286
+ menu.classList.toggle('hidden');
287
+ });
288
+
289
+ // Initialize animations and icons
290
+ AOS.init({
291
+ duration: 800,
292
+ easing: 'ease-in-out',
293
+ once: true
294
+ });
295
+ feather.replace();
296
+ </script>
297
+ </body>
298
  </html>
prompts.txt ADDED
@@ -0,0 +1,156 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ You’re building a web platform called “TechConnect”: a hub for tech enthusiasts to explore events, join communities, register for workshops, chat, and track progress. The client wants a full-featured web app with front-end polish and backend functionality (simulated with JSON or real server if you want).
2
+
3
+ Project Scope
4
+ Pages (10+)
5
+
6
+ Landing Page
7
+
8
+ Hero section with call-to-action buttons: “Join Now” & “Explore Events”
9
+
10
+ Features overview: cards with hover effects
11
+
12
+ Testimonials slider
13
+
14
+ Footer with social links, subscription form
15
+
16
+ Login / Register
17
+
18
+ Form validation
19
+
20
+ Social login buttons (mock icons)
21
+
22
+ Password show/hide toggle
23
+
24
+ User Dashboard
25
+
26
+ Overview of upcoming events, joined communities, and notifications
27
+
28
+ Quick action buttons: “Join Event”, “Create Post”, “Message Community”
29
+
30
+ Event Listing Page
31
+
32
+ Filter by category, date, and location
33
+
34
+ Each event as a card with image, description, and “Register” button
35
+
36
+ Pagination or infinite scroll
37
+
38
+ Event Detail Page
39
+
40
+ Detailed description, location map, organizer info
41
+
42
+ Register/unregister button
43
+
44
+ Comment section (integrate with backend)
45
+
46
+ Create Event Page
47
+
48
+ Form with fields: title, description, date, location, category, image upload
49
+
50
+ Submit button connected to backend
51
+
52
+ Community Page
53
+
54
+ List of communities with join buttons
55
+
56
+ Sidebar filter: category, popular, trending
57
+
58
+ Search bar for communities
59
+
60
+ Community Detail Page
61
+
62
+ Community description
63
+
64
+ Post feed (text/images)
65
+
66
+ “Create Post” button
67
+
68
+ Like/comment buttons for posts
69
+
70
+ Profile Page
71
+
72
+ User info: name, email, bio, profile picture
73
+
74
+ Edit profile button
75
+
76
+ Tabs: My Events, My Communities, Settings
77
+
78
+ Admin Page
79
+
80
+ View all users and events
81
+
82
+ Approve/reject events
83
+
84
+ Manage categories
85
+
86
+ Buttons with hover/interaction effects
87
+
88
+ Settings Page
89
+
90
+ Account settings, password change, notification toggles
91
+
92
+ Dark/light mode switch
93
+
94
+ Save button connected to backend
95
+
96
+ Menus & Navigation
97
+
98
+ Sticky top navbar with dropdown menus
99
+
100
+ Side navigation for dashboard/admin pages
101
+
102
+ Mobile hamburger menu
103
+
104
+ Active page highlighting
105
+
106
+ Multi-level dropdowns in some pages (optional advanced feature)
107
+
108
+ Buttons & Interactions
109
+
110
+ Hover effects, active states, and click animations
111
+
112
+ Confirmation modals for delete actions
113
+
114
+ Toast notifications for actions (like “Event Registered!”)
115
+
116
+ Form validations (all required fields + proper feedback)
117
+
118
+ Backend Requirements
119
+
120
+ User authentication (register/login)
121
+
122
+ Event CRUD (Create, Read, Update, Delete)
123
+
124
+ Community post CRUD
125
+
126
+ Save user preferences/settings
127
+
128
+ Store registrations and interactions
129
+
130
+ Backend can be mocked using JSON server or implemented with Node.js + Express + MongoDB for practice
131
+
132
+ Tech Stack Recommendation
133
+
134
+ Front-end: HTML, CSS, JS (Vanilla or React)
135
+
136
+ Styling: Flexbox/Grid, CSS variables, responsive design
137
+
138
+ Animations: CSS & JS (fade-in, slide-in, hover effects)
139
+
140
+ Backend: Node.js + Express + MongoDB (or JSON server for offline dev)
141
+
142
+ Extras: LocalStorage for temporary persistence, optional chart for dashboard stats
143
+
144
+ Optional Advanced Features (Extra Challenge)
145
+
146
+ Real-time chat in communities (Socket.io or mock)
147
+
148
+ Drag-and-drop event scheduling
149
+
150
+ Notifications panel
151
+
152
+ Filter/search with live updates
153
+
154
+ Dark/light mode persisted in backend or localStorage
155
+
156
+ Multi-step forms for event creation