You are VibeCoder — a full-stack production AI that builds modern, mobile-first, privacy-respecting web apps. Build a complete dating website called **SparkMeet** aimed at **Gen Z (ages 18–26)**. The deliverable must be a production-ready, accessible, performant, and secure full-stack app (frontend + backend + database + infra + tests + documentation). Use modern tech: React + TypeScript (Next.js recommended for SSR/edge), Tailwind CSS for styling, Prisma or an ORM for DB, PostgreSQL (or Supabase/PlanetScale), Redis for caching & rate limits, WebSocket (or Supabase Realtime) for chat, S3 (or equivalent) for images. Provide a runnable repo layout, README, and end-to-end tests.

--- PRODUCT VISION
- Short pitch: SparkMeet — a playful, safe, swipeable dating app for Gen Z that focuses on authenticity, micro-vibes, and fast matches.
- Tone & Branding: playful, concise, inclusive. Use short microcopy and emojis sparingly. UI: rounded cards, neon gradient accents (pink/purple/teal), large tappable targets.
- Target: mobile-first progressive web app (works on desktop & mobile).

--- CORE MVP FEATURES (must implement)
1. Onboarding / Auth
- Email + password (strong password rules) + email verification.
- OAuth 2.0 options: Google & Apple (if available).
- Phone number + OTP or passwordless email as an option.
- Age verification (users must be >= 18) — soft: date of birth input; hard: optional ID/photo check flows.
2. Profile
- Multi-photo upload (max 10), photos stored on S3 with signed uploads.
- Bio, pronouns, location (city), age, interests (tag list), Spotify/Instagram optional links, study/work info.
- "Vibe badges" (fun little tags) and 3-sentence “Sparkline” — concise highlight visible in cards.
3. Discovery
- Swipe interface + grid/list mode.
- Filters: distance, age range, interests, online now.
- “Spark” mechanic: a paid or earned boost that increases visibility.
4. Matching
- Mutual likes create a Match — open match chat.
- Notification on match + celebratory modal/UI.
5. Chat
- Real-time messaging via WebSocket or WebRTC data channels.
- Read receipts, typing indicator, image support, message delete for own messages.
- Safety commands: report, block, mute.
6. Safety & Moderation
- Content moderation pipeline for images and text (automated + human queue).
- Report/Block flows, rate limiting, anti-spam heuristics.
7. Monetization (optional basic)
- Subscriptions (monthly) + in-app credits ("Sparks" to boost).
- Stripe integration for payments.
8. Notifications & Emails
- Push notifications (web push + mobile) and transactional emails.
9. Admin Dashboard
- User search, reports queue, content moderation, ban/unban, analytics.
10. Metrics & Analytics
- Event tracking (profile_view, like, match, message_sent, report_submitted) suitable for Mixpanel/Amplitude.

--- DESIGN & UI SYSTEM
- Component library: Button, Card, Avatar, Modal, Input, Toggle, Tag, Badge, Toast.
- Responsive breakpoints; mobile-first.
- Accessibility (a11y): proper aria labels, keyboard navigation, color contrast, focus states.
- Animations: subtle microinteractions on like/match using Lottie or CSS transforms.

--- DETAILED PAGE & UI COMPONENTS (with **every** button + exact behavior)

1) Landing / Home (unauthenticated)
- Buttons:
- `Sign Up` -> opens onboarding modal. Behavior: opens `/signup` route. Track event: `cta_signup_clicked`.
- `Log In` -> opens login modal. Behavior: `/login`. Track `cta_login_clicked`.
- `Learn More` -> scroll or route to features section. Track `cta_learn_more`.
- SEO meta tags and social preview.

2) Onboarding (Signup flow)
- Inputs: email, DOB, password OR OAuth flow buttons.
- Buttons:
- `Continue` (on each step) -> validate inputs client-side, call `/api/auth/signup/step` with payload, show loader, on success go next. Analytics `onboarding_step_completed` with properties {step, method}.
- `Use Google` / `Use Apple` -> trigger OAuth popup, on success complete onboarding server side and redirect to profile builder.
- `Back` -> navigate to previous step, save partial state in localStorage.
- `Skip` (for optional steps) -> store default values and continue.
- Validation: strong password rules, DOB => must be >= 18 else show friendly rejection modal with help.

3) Profile Builder
- Buttons:
- `Upload Photo` (per slot) -> open image picker, client validates file type/size, then uploads via signed URL to S3: PUT signed URL. After upload, POST `/api/users/{id}/photos` to register. Show progress and allow reorder. Immediately run image moderation; if blocked, notify user and remove photo.
- `Save Profile` -> PUT `/api/users/{id}` with full profile JSON. On success show toast "Profile saved".
- `Add Badge` -> opens tag selector modal; PUT update profile interests.
- `Preview Profile` -> open public view page; track `profile_preview`.
- Edge cases: network failure -> retry modal with retry/back options.

4) Discovery / Swipe Screen (primary)
- Layout: central card with person profile; swipe gestures (touch, mouse drag) + buttons under the card.
- Buttons (explicit list with behavior):
- `X / Pass` button:
- UI: visible, accessible label `Pass`.
- Action: optimistic UI remove card, POST `/api/discovery/pass` payload {userId, targetId}. If response error, revert card and show error toast. Track `discovery_pass`.
- `Like` (heart):
- UI: toggleable, triggers animation.
- Action: optimistic UI mark liked. POST `/api/matches/like` with {fromUserId, toUserId}. If response returns `{match: true, matchId}`, open Match modal that prompts "You matched — Send a message". Create a conversation in DB and navigate to chat if user clicks. Track `discovery_like` with property {match: boolean}.
- `SuperSpark` (special):
- UI: uses Sparks credit or subscription. If user has credits, pressing consumes credit and sends a stronger signal. POST `/api/matches/superspark`. Show confirmation modal with microcopy and animation. Track `discovery_superspark`.
- `Info` (i icon):
- Opens detailed overlay with more profile fields and common interests. Track `discovery_info_open`.
- Swipe gestures:
- Right = Like, Left = Pass, Up = SuperSpark. On each gesture, call the same endpoints as corresponding buttons. Debounce swipes to prevent accidental repeats.

5) Profile Card (viewing someone)
- Buttons:
- `Message`:
- Enabled only if matched. If not matched, button text `Like to Match` and clicking performs like flow.
- If matched, opens chat window, focus input. Track `profile_message_open`.
- `Spark` icon on card:
- Behavior same as SuperSpark.
- `Report`:
- Opens report modal to select reason (harassment, nudity, fake profile, minors, spam). On submit: POST `/api/reports` with last messages & last 5 photos metadata. Immediately create moderation ticket, optionally auto-suspend if severe reason. Track `profile_report_submitted`.
- `Block`:
- POST `/api/users/{me}/block` -> server adds block and prevents recommendations/messages. Client hides the user and shows undo toast `User blocked`.
- `Follow` (if you want social features) — optional.

6) Chat / Messaging
- Buttons and behaviors:
- `Send` (text):
- Enabled when input non-empty. Action: optimistic append message to chat UI with temporary id, send over WebSocket `message_send` event and fallback to POST `/api/messages` if socket fails. On ACK replace temp id with real id. Track `message_sent` with length properties.
- Validation: check for banned words; block sending or flag if present.
- `Attach Photo`:
- Similar to profile photo upload; upload signed URL then send image message. Moderation pipeline runs; if flagged, remove message and notify both users if required.
- `Delete` (own message):
- Sends DELETE `/api/messages/{id}`; client hides message and shows "Message deleted". Server keeps audit copy for moderation but hides content from the other user.
- `Block/Report` (within chat):
- Same endpoints as profile, but attach last 10 messages to the report payload automatically.
- `Start Video Date`:
- If both agree, start WebRTC flow via signaling server. Button `Start Video` triggers call offer, sends push to other user; state in DB: `call_request`. Track `video_call_requested`.

7) Settings & Account
- Buttons:
- `Change Password` -> form with current/new/confirm and validation. POST `/api/auth/change-password`.
- `Delete Account` -> requires password confirm and shows 2-step modal. DELETE `/api/users/{id}` (soft delete: mark as deleted, anonymize). Provide grace period before permanent deletion.
- `Privacy Settings` toggles:
- `Show me in Discovery` toggle -> PUT `/api/users/{id}/privacy`.
- `Allow message from non-matches` toggle -> PUT.
- `Manage Subscription` -> links to billing portal (Stripe) or shows plan details.
- `Export My Data` -> triggers job and email with ZIP (GDPR request), track `data_export_requested`.

--- API DESIGN (examples)
- `POST /api/auth/signup` {email, password, dob} -> 201 {userId, nextStep}
- `POST /api/auth/login` {email, password} -> {token, refreshToken, expiresAt}
- `GET /api/discovery?cursor=...&filters=...` -> list of profiles
- `POST /api/matches/like` {fromUserId, toUserId} -> {match: boolean, matchId?: string}
- `POST /api/matches/superspark` {fromUserId, toUserId} -> {success, boostExpiresAt}
- `POST /api/messages` {conversationId, from, text, attachments[]} -> {messageId, createdAt}
- `POST /api/reports` {reporterId, targetId, reason, context: {messages[], photos[]}} -> {ticketId}
- `PUT /api/users/{id}` -> update profile
- `POST /api/uploads/signed-url` {filename, type} -> {url, key}

Include auth middleware (JWT + refresh tokens), RBAC for admin endpoints.

--- DATABASE SCHEMA (core tables)
- `users` (id, email, passwordHash, dob, displayName, pronouns, locationCity, createdAt, deletedAt, isBanned, lastActiveAt)
- `profiles` (userId FK, bio, sparkline, badges JSON, interests JSO

README.md

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📈
-colorFrom: purple
-colorTo: green
+title: undefined
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).
+      

index.html

@@ -1,19 +1,493 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SparkMeet - Discover Events</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .event-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .category-filter.active {
+            background-color: #6366f1;
+            color: white;
+        }
+        .modal {
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg sticky top-0 z-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <div class="flex items-center space-x-4">
+                    <a href="#" class="flex items-center space-x-2">
+                        <span class="text-2xl font-bold text-indigo-600">SparkMeet</span>
+                    </a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#" class="text-indigo-600 font-medium flex items-center">
+                        <i data-feather="home" class="mr-2"></i> Home
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center">
+                        <i data-feather="calendar" class="mr-2"></i> Create Event
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium flex items-center">
+                        <i data-feather="message-square" class="mr-2"></i> Messages
+                    </a>
+                    <div class="relative">
+                        <button id="user-menu" class="flex items-center space-x-2 focus:outline-none">
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full">
+                            <i data-feather="chevron-down" class="w-4 h-4"></i>
+                        </button>
+                        <div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
+                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Dashboard</a>
+                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Settings</a>
+                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50">Sign out</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="md:hidden">
+                    <button id="mobile-menu-button" class="text-gray-600 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg">
+        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            <a href="#" class="block px-3 py-2 text-base font-medium text-indigo-600">Home</a>
+            <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Create Event</a>
+            <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Messages</a>
+            <a href="#" class="block px-3 py-2 text-base font-medium text-gray-600 hover:text-indigo-600">Dashboard</a>
+        </div>
+    </div>
+
+    <!-- Hero Section -->
+    <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">Discover Your Next Adventure</h1>
+            <p class="text-xl md:text-2xl mb-8">Find and join amazing events happening around you</p>
+            <div class="max-w-md mx-auto">
+                <div class="relative">
+                    <input type="text" placeholder="Search for events..." class="w-full px-6 py-4 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-400 text-gray-800">
+                    <button class="absolute right-2 top-2 bg-indigo-600 text-white p-2 rounded-full">
+                        <i data-feather="search"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Category Filters -->
+    <div class="max-w-6xl mx-auto px-4 py-8">
+        <div class="flex overflow-x-auto space-x-4 pb-4 scrollbar-hide">
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium active">
+                All Events
+            </button>
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium">
+                Food & Culture
+            </button>
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium">
+                Parties
+            </button>
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium">
+                Workshops
+            </button>
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium">
+                Sports
+            </button>
+            <button class="category-filter flex-shrink-0 px-6 py-2 rounded-full bg-white shadow text-gray-700 font-medium">
+                Networking
+            </button>
+        </div>
+    </div>
+
+    <!-- Events Grid -->
+    <div class="max-w-6xl mx-auto px-4 py-8">
+        <h2 class="text-2xl font-bold mb-6">Popular Events Near You</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Event Card 1 -->
+            <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                <div class="h-48 bg-indigo-100 relative">
+                    <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover">
+                    <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center">
+                        <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i>
+                        <span class="text-sm font-medium">New York</span>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-xl font-bold">Food Festival 2023</h3>
+                        <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Food & Culture</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">Join us for the biggest food festival of the year with top chefs and amazing dishes.</p>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span class="text-sm">Oct 15, 2023</span>
+                        </div>
+                        <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                            View Details
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Event Card 2 -->
+            <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                <div class="h-48 bg-purple-100 relative">
+                    <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover">
+                    <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center">
+                        <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i>
+                        <span class="text-sm font-medium">Miami</span>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-xl font-bold">Beach Party</h3>
+                        <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Party</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">The hottest beach party of the summer with DJs, drinks and amazing vibes.</p>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span class="text-sm">Nov 5, 2023</span>
+                        </div>
+                        <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                            View Details
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Event Card 3 -->
+            <div class="event-card bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300">
+                <div class="h-48 bg-green-100 relative">
+                    <img src="https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Event" class="w-full h-full object-cover">
+                    <div class="absolute top-4 right-4 bg-white rounded-full px-3 py-1 shadow flex items-center">
+                        <i data-feather="map-pin" class="w-4 h-4 mr-1 text-indigo-600"></i>
+                        <span class="text-sm font-medium">San Francisco</span>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-2">
+                        <h3 class="text-xl font-bold">Tech Workshop</h3>
+                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Workshop</span>
+                    </div>
+                    <p class="text-gray-600 mb-4">Learn the latest in web development from industry experts.</p>
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span class="text-sm">Dec 12, 2023</span>
+                        </div>
+                        <button class="view-details-btn px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                            View Details
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Event Details Modal -->
+    <div id="event-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="relative">
+                <button id="close-modal" class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-lg">
+                    <i data-feather="x"></i>
+                </button>
+                <div class="h-64 bg-indigo-100">
+                    <img id="modal-event-image" src="" alt="Event" class="w-full h-full object-cover">
+                </div>
+            </div>
+            <div class="p-6">
+                <div class="flex justify-between items-start mb-4">
+                    <div>
+                        <h2 id="modal-event-title" class="text-2xl font-bold"></h2>
+                        <div class="flex items-center mt-2">
+                            <i data-feather="map-pin" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span id="modal-event-location" class="text-gray-600"></span>
+                        </div>
+                    </div>
+                    <span id="modal-event-category" class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full"></span>
+                </div>
+                
+                <div class="flex items-center mb-6">
+                    <div class="mr-8">
+                        <div class="flex items-center">
+                            <i data-feather="calendar" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span id="modal-event-date" class="text-gray-600"></span>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="flex items-center">
+                            <i data-feather="clock" class="w-4 h-4 mr-2 text-indigo-600"></i>
+                            <span id="modal-event-time" class="text-gray-600">7:00 PM - 11:00 PM</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold mb-2">About the Event</h3>
+                    <p id="modal-event-description" class="text-gray-700"></p>
+                </div>
+                
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold mb-2">Organizer</h3>
+                    <div class="flex items-center">
+                        <img id="modal-event-organizer-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Organizer" class="w-10 h-10 rounded-full mr-3">
+                        <div>
+                            <p id="modal-event-organizer-name" class="font-medium">Sarah Johnson</p>
+                            <p class="text-sm text-gray-500">Event Organizer</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-sm text-gray-500">Price</p>
+                        <p id="modal-event-price" class="text-xl font-bold">$25.00</p>
+                    </div>
+                    <button id="register-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                        Register Now
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Registration Form Modal -->
+    <div id="registration-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl max-w-md w-full p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold">Register for <span id="register-event-title"></span></h2>
+                <button id="close-registration-modal" class="text-gray-500 hover:text-gray-700">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+            
+            <form id="registration-form" class="space-y-4">
+                <div>
+                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+                    <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                </div>
+                
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                </div>
+                
+                <div>
+                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
+                    <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                </div>
+                
+                <div>
+                    <label for="tickets" class="block text-sm font-medium text-gray-700 mb-1">Number of Tickets</label>
+                    <select id="tickets" name="tickets" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
+                        <option value="1">1</option>
+                        <option value="2">2</option>
+                        <option value="3">3</option>
+                        <option value="4">4</option>
+                        <option value="5">5</option>
+                    </select>
+                </div>
+                
+                <div class="pt-2">
+                    <button type="submit" class="w-full px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                        Complete Registration
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Registration Success Modal -->
+    <div id="success-modal" class="modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl max-w-md w-full p-8 text-center">
+            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
+                <i data-feather="check" class="h-6 w-6 text-green-600"></i>
+            </div>
+            <h2 class="text-xl font-bold mb-2">Registration Successful!</h2>
+            <p class="text-gray-600 mb-6">You're all set for <span id="success-event-title" class="font-medium"></span>. We've sent the details to your email.</p>
+            <button id="close-success-modal" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+                Back to Events
+            </button>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-12">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">SparkMeet</h3>
+                    <p class="text-gray-400">Connecting people through amazing events and experiences.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Explore</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Events</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Cities</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Popular</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Company</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i data-feather="facebook"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2023 SparkMeet. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        
+        // Mobile menu toggle
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+        });
+        
+        // User dropdown menu
+        const userMenu = document.getElementById('user-menu');
+        const dropdownMenu = document.getElementById('dropdown-menu');
+        
+        userMenu.addEventListener('click', () => {
+            dropdownMenu.classList.toggle('hidden');
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!userMenu.contains(e.target) && !dropdownMenu.contains(e.target)) {
+                dropdownMenu.classList.add('hidden');
+            }
+        });
+        
+        // Category filter
+        const categoryFilters = document.querySelectorAll('.category-filter');
+        
+        categoryFilters.forEach(filter => {
+            filter.addEventListener('click', () => {
+                categoryFilters.forEach(f => f.classList.remove('active'));
+                filter.classList.add('active');
+            });
+        });
+        
+        // Event details modal
+        const eventModal = document.getElementById('event-modal');
+        const closeModal = document.getElementById('close-modal');
+        const viewDetailsBtns = document.querySelectorAll('.view-details-btn');
+        
+        viewDetailsBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const eventCard = btn.closest('.event-card');
+                const eventTitle = eventCard.querySelector('h3').textContent;
+                const eventCategory = eventCard.querySelector('span').textContent;
+                const eventLocation = eventCard.querySelector('.text-sm.font-medium').textContent;
+                const eventDate = eventCard.querySelector('.text-sm').textContent;
+                const eventDescription = eventCard.querySelector('p').textContent;
+                const eventImage = eventCard.querySelector('img').src;
+                
+                document.getElementById('modal-event-title').textContent = eventTitle;
+                document.getElementById('modal-event-category').textContent = eventCategory;
+                document.getElementById('modal-event-location').textContent = eventLocation;
+                document.getElementById('modal-event-date').textContent = eventDate;
+                document.getElementById('modal-event-description').textContent = eventDescription;
+                document.getElementById('modal-event-image').src = eventImage;
+                
+                eventModal.classList.remove('hidden');
+            });
+        });
+        
+        closeModal.addEventListener('click', () => {
+            eventModal.classList.add('hidden');
+        });
+        
+        // Registration modal
+        const registrationModal = document.getElementById('registration-modal');
+        const closeRegistrationModal = document.getElementById('close-registration-modal');
+        const registerBtn = document.getElementById('register-btn');
+        
+        registerBtn.addEventListener('click', () => {
+            const eventTitle = document.getElementById('modal-event-title').textContent;
+            document.getElementById('register-event-title').textContent = eventTitle;
+            
+            eventModal.classList.add('hidden');
+            registrationModal.classList.remove('hidden');
+        });
+        
+        closeRegistrationModal.addEventListener('click', () => {
+            registrationModal.classList.add('hidden');
+        });
+        
+        // Registration form submission
+        const registrationForm = document.getElementById('registration-form');
+        const successModal = document.getElementById('success-modal');
+        const closeSuccessModal = document.getElementById('close-success-modal');
+        
+        registrationForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            const eventTitle = document.getElementById('register-event-title').textContent;
+            document.getElementById('success-event-title').textContent = eventTitle;
+            
+            registrationModal.classList.add('hidden');
+            successModal.classList.remove('hidden');
+        });
+        
+        closeSuccessModal.addEventListener('click', () => {
+            successModal.classList.add('hidden');
+        });
+        
+        // Close modals when clicking outside
+        const modals = document.querySelectorAll('.modal');
+        
+        modals.forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    modal.classList.add('hidden');
+                }
+            });
+        });
+    </script>
+</body>
 </html>

login.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Log In - SparkConnect</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <a href="index.html" class="flex items-center space-x-2">
+                    <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">SparkConnect</span>
+                </a>
+                <a href="signup.html" class="text-gray-600 hover:text-purple-600 font-medium">Sign Up</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Login Form -->
+    <div class="min-h-screen flex items-center justify-center px-4 py-12">
+        <div class="max-w-md w-full space-y-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome Back! 👋</h2>
+                <p class="text-gray-600">Continue your journey to find amazing connections</p>
+            </div>
+
+            <!-- OAuth Buttons -->
+            <div class="space-y-4">
+                <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
+                    <i data-feather="mail" class="w-5 h-5 mr-3"></i>
+                    Continue with Google
+                </button>
+                <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
+                    <i data-feather="smartphone" class="w-5 h-5 mr-3"></i>
+                    Continue with Apple
+                </button>
+            </div>
+
+            <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-gray-50 text-gray-500">Or log in with email</span>
+                </div>
+            </div>
+
+            <form class="space-y-6" id="login-form">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" placeholder="you@example.com">
+                </div>
+
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" id="password" name="password" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" placeholder="Enter your password">
+                </div>
+
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="remember" name="remember" class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
+                        <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
+                    </div>
+                    <a href="#" class="text-sm text-purple-600 hover:text-purple-500">Forgot password?</a>
+                </div>
+
+                <button type="submit" class="w-full btn-primary text-white py-3 px-4 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
+                    Log In
+                </button>
+            </form>
+
+            <div class="text-center">
+                <p class="text-sm text-gray-600">
+                    Don't have an account? 
+                    <a href="signup.html" class="font-medium text-purple-600 hover:text-purple-500">Sign up</a>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+
+        const loginForm = document.getElementById('login-form');
+
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+
+            // Simulate login process
+            const submitBtn = loginForm.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            submitBtn.textContent = 'Logging in...';
+            submitBtn.disabled = true;
+
+            // In a real app, this would be an API call
+            setTimeout(() => {
+                // Redirect to discovery page
+                window.location.href = 'discovery.html';
+            }, 2000);
+        });
+    </script>
+</body>
+</html>

profile-builder.html

@@ -0,0 +1,62 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Build Your Profile - SparkConnect</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+        }
+        .photo-upload {
+            border: 2px dashed #d1d5db;
+            transition: all 0.3s ease;
+        }
+        .photo-upload:hover {
+            border-color: #8b5cf6;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <a href="index.html" class="flex items-center space-x-2">
+                    <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">SparkConnect</span>
+                </a>
+                <div class="flex items-center space-x-4">
+                    <span class="text-sm text-gray-600">Step 2 of 3</span>
+                    <div class="w-24 bg-gray-200 rounded-full h-2">
+                        <div class="bg-purple-600 h-2 rounded-full w-2/3"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Profile Builder -->
+    <div class="max-w-2xl mx-auto px-4 py-8">
+        <div class="text-center mb-8">
+            <h1 class="text-3xl font-bold text-gray-900 mb-2">Build Your Profile ✨</h1>
+            <p class="text-gray-600">Show the world who you are and what makes you unique</p>
+        </div>
+
+        <form id="profile-form" class="space-y-8">
+            <!-- Photos Section -->
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-semibold mb-4">Your Photos</h2>
+                <p class="text-gray-600 mb-6">Add at least 2 photos to get started. Show your personality!</p>
+                
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
+                    <!-- Photo Slot 1 -->
+                    <div class="photo-upload aspect-square rounded-lg bg-gray-100 flex items-center justify-center cursor-pointer"

signup.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - SparkConnect</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-4">
+                <a href="index.html" class="flex items-center space-x-2">
+                    <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">SparkConnect</span>
+                </a>
+                <a href="login.html" class="text-gray-600 hover:text-purple-600 font-medium">Log In</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Signup Form -->
+    <div class="min-h-screen flex items-center justify-center px-4 py-12">
+        <div class="max-w-md w-full space-y-8">
+            <div class="text-center">
+                <h2 class="text-3xl font-bold text-gray-900 mb-2">Find Your Vibe ✨</h2>
+                <p class="text-gray-600">Join thousands of people finding authentic connections</p>
+            </div>
+
+            <!-- OAuth Buttons -->
+            <div class="space-y-4">
+                <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
+                    <i data-feather="mail" class="w-5 h-5 mr-3"></i>
+                    Continue with Google
+                </button>
+                <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm bg-white text-gray-700 hover:bg-gray-50 transition-colors">
+                    <i data-feather="smartphone" class="w-5 h-5 mr-3"></i>
+                    Continue with Apple
+                </button>
+            </div>
+
+            <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-300"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-gray-50 text-gray-500">Or continue with email</span>
+                </div>
+            </div>
+
+            <form class="space-y-6" id="signup-form">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                    <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" placeholder="you@example.com">
+                </div>
+
+                <div>
+                    <label for="dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
+                    <input type="date" id="dob" name="dob" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors">
+                    <p class="text-xs text-gray-500 mt-1">You must be 18 or older to join</p>
+                </div>
+
+                <div>
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                    <input type="password" id="password" name="password" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" placeholder="Create a strong password">
+                    <div class="mt-2 space-y-1">
+                        <div class="flex items-center">
+                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
+                            <span class="text-xs text-gray-600">At least 8 characters</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i data-feather="check" class="w-4 h-4 text-green-500 mr-2"></i>
+                            <span class="text-xs text-gray-600">Mix of letters and numbers</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex items-center">
+                    <input type="checkbox" id="terms" name="terms" required class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
+                    <label for="terms" class="ml-2 block text-sm text-gray-700">
+                        I agree to the <a href="#" class="text-purple-600 hover:text-purple-500">Terms of Service</a> and <a href="#" class="text-purple-600 hover:text-purple-500">Privacy Policy</a>
+                    </label>
+                </div>
+
+                <button type="submit" class="w-full btn-primary text-white py-3 px-4 rounded-lg font-medium hover:shadow-lg transition-all duration-300">
+                    Create Account
+                </button>
+            </form>
+
+            <div class="text-center">
+                <p class="text-sm text-gray-600">
+                    Already have an account? 
+                    <a href="login.html" class="font-medium text-purple-600 hover:text-purple-500">Log in</a>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Age Verification Modal -->
+    <div id="age-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-xl max-w-sm w-full p-6 text-center">
+            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
+                <i data-feather="alert-triangle" class="h-6 w-6 text-red-600"></i>
+            </div>
+            <h2 class="text-xl font-bold mb-2">Age Restriction</h2>
+            <p class="text-gray-600 mb-6">You must be 18 or older to use SparkConnect. Please come back when you're older!</p>
+            <button onclick="closeAgeModal()" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                Understood
+            </button>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+
+        const signupForm = document.getElementById('signup-form');
+        const ageModal = document.getElementById('age-modal');
+
+        function closeAgeModal() {
+            ageModal.classList.add('hidden');
+        }
+
+        signupForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const email = document.getElementById('email').value;
+            const dob = document.getElementById('dob').value;
+            const password = document.getElementById('password').value;
+            
+            // Age verification
+            const birthDate = new Date(dob);
+            const today = new Date();
+            const age = today.getFullYear() - birthDate.getFullYear();
+            const monthDiff = today.getMonth() - birthDate.getMonth();
+            
+            if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+                age--;
+            }
+            
+            if (age < 18) {
+                ageModal.classList.remove('hidden');
+                return;
+            }
+
+            // Simulate signup process
+            const submitBtn = signupForm.querySelector('button[type="submit"]');
+            const originalText = submitBtn.textContent;
+            submitBtn.textContent = 'Creating account...';
+            submitBtn.disabled = true;
+
+            // In a real app, this would be an API call
+            setTimeout(() => {
+                // Redirect to profile builder
+                window.location.href = 'profile-builder.html';
+            }, 2000);
+        });
+    </script>
+</body>
+</html>