Initial commit

src/routes/+error.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	$: error = $page.error;
+</script>
+
+<svelte:head>
+	<title>Error - Event Cactus</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Error Content -->
+	<div class="container mx-auto flex-1 px-4 py-8">
+		<div class="mx-auto max-w-md text-center">
+			<div class="rounded-sm border border-red-500/30 bg-red-900/20 p-8">
+				<div class="mb-4 text-6xl text-red-400">🚨</div>
+				<h2 class="mb-4 text-2xl font-bold text-red-400">Error</h2>
+
+				<p class=" mb-6">
+					{error?.message || 'An unexpected error occurred.'}
+				</p>
+
+				<div class="space-y-3">
+					<button
+						on:click={() => goto('/')}
+						class="border-white-500 bg-white-400/20 mt-2 w-48 rounded-sm border px-6 py-3 font-semibold text-white duration-400 hover:scale-110 hover:bg-white/10"
+					>
+						Home
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/routes/+layout.svelte

@@ -0,0 +1,53 @@
+<script>
+	import '../app.css';
+	import Navbar from '$lib/components/Navbar.svelte';
+</script>
+
+<svelte:head>
+	<title>Event Cactus -</title>
+	<meta name="description" content="Create and manage event RSVPs" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+</svelte:head>
+
+<div class="min-h-screen font-mono text-white">
+	<div class="relative">
+		<!-- Navbar -->
+		<Navbar />
+
+		<!-- Main content -->
+		<main class="relative z-10">
+			<slot />
+		</main>
+
+		<!-- Footer -->
+		<footer class="py-12">
+			<div class="container mx-auto px-4 text-center">
+				<div class="text-sm">
+					<p>&copy; 2025 Event Cactus</p>
+				</div>
+			</div>
+		</footer>
+	</div>
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background: linear-gradient(
+			135deg,
+			#080818 0%,
+			#0f0f1f 25%,
+			#0a0a1a 50%,
+			#0a1428 75%,
+			#020614 100%
+		);
+		background-attachment: fixed;
+	}
+
+	:global(*) {
+		box-sizing: border-box;
+	}
+</style>

src/routes/+page.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+</script>
+
+<svelte:head>
+	<title>Event Cactus - The RSVP site</title>
+	<meta
+		name="description"
+		content="Create and manage event RSVPs. No registration required, instant sharing."
+	/>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Hero Section -->
+	<section class="from-dark-900 to-dark-950 relative overflow-hidden bg-gradient-to-b pt-20 pb-20">
+		<div class="container mx-auto px-4 text-center">
+			<!-- Animated background elements -->
+			<div class="pointer-events-none absolute inset-0 overflow-hidden">
+				<div class="animate-float absolute top-20 left-10 h-32 w-32 rounded-full blur-xl"></div>
+				<div
+					class="bg-crypto-neon/10 animate-float absolute top-40 right-20 h-24 w-24 rounded-full blur-xl"
+					style="animation-delay: -2s;"
+				></div>
+				<div
+					class="bg-crypto-cyber/10 animate-float absolute bottom-20 left-1/4 h-20 w-20 rounded-full blur-xl"
+					style="animation-delay: -4s;"
+				></div>
+			</div>
+
+			<div class="relative z-10">
+				<h1 class="bg-gradient-to-r bg-clip-text text-5xl font-bold md:text-7xl lg:text-8xl">
+					Event Cactus
+				</h1>
+				<p class="mt-6 text-xl md:text-2xl">The Ultimate RSVP Platform</p>
+				<p class="mt-4 text-lg md:text-xl">Create, share, and manage events with zero friction.</p>
+
+				<div
+					class="mt-10 flex flex-col items-center justify-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6"
+				>
+					<button
+						on:click={() => goto('/create')}
+						class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+					>
+						Create Event Now
+					</button>
+					<button
+						on:click={() => goto('/about')}
+						class="rounded-sm border-2 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-white/10"
+					>
+						Learn More
+					</button>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- Features Section -->
+	<section class="py-20">
+		<div class="container mx-auto px-4">
+			<h2 class=" mb-16 text-center text-4xl font-bold">Why Event Cactus?</h2>
+
+			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+				<!-- Feature 1 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">🎯</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">Instant Event Creation</h3>
+					<p class="">
+						Create events in seconds with our streamlined form. No accounts, no waiting, just pure
+						efficiency.
+					</p>
+				</div>
+
+				<!-- Feature 2 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">🔗</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">One-Click Sharing</h3>
+					<p class="">
+						Each event gets a unique, memorable URL. Share instantly via any platform or messaging
+						app.
+					</p>
+				</div>
+
+				<!-- Feature 2 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">🔍</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">All-in-One Clarity</h3>
+					<p class="">
+						No more scrolling through endless chats and reactions. See everyone’s availability and
+						responses neatly in one place.
+					</p>
+				</div>
+
+				<!-- Feature 4 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">👤</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">No Hassle, No Sign-Ups</h3>
+					<p class="">
+						Skip registrations and endless forms. Unlike other event platforms, you create and share
+						instantly — no accounts, no barriers.
+					</p>
+				</div>
+
+				<!-- Feature 5 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">🛡️</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">Smart Limits</h3>
+					<p class="">
+						Choose between unlimited RSVPs or set a limited capacity. Perfect for any event size.
+					</p>
+				</div>
+
+				<!-- Feature 5 -->
+				<div class="rounded-sm border p-8 text-center">
+					<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
+						<span class="text-4xl">✨</span>
+					</div>
+					<h3 class="mb-4 text-xl font-bold text-white">Effortless Simplicity</h3>
+					<p class="">
+						Designed to be instantly clear and easy. No learning curve — just open, create, and go.
+					</p>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- How It Works Section -->
+	<section class="py-20">
+		<div class="container mx-auto px-4">
+			<h2 class=" mb-16 text-center text-4xl font-bold">How It Works</h2>
+
+			<div class="grid gap-8 md:grid-cols-3">
+				<!-- Step 1 -->
+				<div class="text-center">
+					<h3 class="mb-4 text-xl font-bold text-white">
+						<span class="text-violet-400">1.</span> Create Event
+					</h3>
+					<p class="">
+						Fill out a simple form with event details. Choose between limited or unlimited capacity.
+					</p>
+				</div>
+
+				<!-- Step 2 -->
+				<div class="text-center">
+					<h3 class="mb-4 text-xl font-bold text-white">
+						<span class="text-violet-400">2.</span> Get Unique URL
+					</h3>
+					<p class="">
+						Receive a random, memorable URL for your event. Perfect for sharing anywhere.
+					</p>
+				</div>
+
+				<!-- Step 3 -->
+				<div class="text-center">
+					<h3 class="mb-4 text-xl font-bold text-white">
+						<span class="text-violet-400">3.</span> Collect RSVPs
+					</h3>
+					<p class="">People visit your link and join with just their name. No accounts needed.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+
+	<!-- CTA Section -->
+	<section class="py-20">
+		<div class="container mx-auto px-4 text-center">
+			<h2 class="mb-6 text-4xl font-bold text-white">
+				Ready to Create Your <span class="text-violet-400">First Event</span>?
+			</h2>
+			<p class="mb-10 text-xl">Join thousands of event organizers who trust Event Cactus</p>
+			<button
+				on:click={() => goto('/create')}
+				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+			>
+				Create
+			</button>
+		</div>
+	</section>
+</div>

src/routes/create/+page.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import { eventsStore } from '$lib/stores/events-supabase';
+	import type { CreateEventData, EventType } from '$lib/types';
+	import { goto } from '$app/navigation';
+
+	let eventData: CreateEventData = {
+		name: '',
+		date: '',
+		time: '',
+		location: '',
+		type: 'unlimited',
+		attendee_limit: undefined
+	};
+
+	let errors: Record<string, string> = {};
+	let isSubmitting = false;
+
+	// Get today's date in YYYY-MM-DD format for min attribute
+	const today = new Date().toISOString().split('T')[0];
+
+	function validateForm(): boolean {
+		errors = {};
+
+		if (!eventData.name.trim()) {
+			errors.name = 'Event name is required';
+		}
+
+		if (!eventData.date) {
+			errors.date = 'Date is required';
+		} else if (new Date(eventData.date) < new Date(today)) {
+			errors.date = 'Date cannot be in the past';
+		}
+
+		if (!eventData.time) {
+			errors.time = 'Time is required';
+		}
+
+		if (!eventData.location.trim()) {
+			errors.location = 'Location is required';
+		}
+
+		if (
+			eventData.type === 'limited' &&
+			(!eventData.attendee_limit || eventData.attendee_limit < 1)
+		) {
+			errors.attendee_limit = 'Limit must be at least 1 for limited events';
+		}
+
+		return Object.keys(errors).length === 0;
+	}
+
+	async function handleSubmit() {
+		if (!validateForm()) return;
+
+		isSubmitting = true;
+
+		try {
+			// Simulate API call delay
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+
+			const eventId = await eventsStore.createEvent(eventData);
+
+			// Redirect to the event page
+			goto(`/event/${eventId}`);
+		} catch (error) {
+			console.error('Error creating event:', error);
+		} finally {
+			isSubmitting = false;
+		}
+	}
+
+	function handleTypeChange(type: EventType) {
+		eventData.type = type;
+		if (type === 'unlimited') {
+			eventData.attendee_limit = undefined;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Create Event - Event Cactus</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Main Content -->
+	<div class="container mx-auto flex-1 px-4 py-8">
+		<div class="mx-auto max-w-md">
+			<!-- Event Creation Form -->
+			<div class="rounded-sm border p-8">
+				<h2 class="mb-8 text-center text-3xl font-bold text-violet-400">Create New Event</h2>
+
+				<form on:submit|preventDefault={handleSubmit} class="space-y-6">
+					<!-- Event Name -->
+					<div>
+						<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
+							Name <span class="text-red-400">*</span>
+						</label>
+						<input
+							id="name"
+							type="text"
+							bind:value={eventData.name}
+							class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
+							placeholder="Enter event name"
+							maxlength="100"
+						/>
+						{#if errors.name}
+							<p class="mt-2 text-sm font-medium text-red-600">{errors.name}</p>
+						{/if}
+					</div>
+
+					<!-- Date and Time Row -->
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label for="date" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Date <span class="text-red-400">*</span>
+							</label>
+							<input
+								id="date"
+								type="date"
+								bind:value={eventData.date}
+								min={today}
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+							/>
+							{#if errors.date}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.date}</p>
+							{/if}
+						</div>
+
+						<div>
+							<label for="time" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Time <span class="text-red-400">*</span>
+							</label>
+							<input
+								id="time"
+								type="time"
+								bind:value={eventData.time}
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+							/>
+							{#if errors.time}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.time}</p>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Location -->
+					<div>
+						<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+							Location <span class="text-red-400">*</span>
+						</label>
+						<input
+							id="location"
+							type="text"
+							bind:value={eventData.location}
+							class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
+							placeholder="Enter location"
+							maxlength="200"
+						/>
+						{#if errors.location}
+							<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+						{/if}
+					</div>
+
+					<!-- Event Type -->
+					<div>
+						<label class="text-dark-800 mb-3 block text-sm font-semibold">
+							Type <span class="text-red-400">*</span></label
+						>
+						<div class="grid grid-cols-2 gap-3">
+							<button
+								type="button"
+								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+								'unlimited'
+									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									: 'border-dark-300 text-dark-700'}"
+								on:click={() => handleTypeChange('unlimited')}
+							>
+								Unlimited
+							</button>
+							<button
+								type="button"
+								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+								'limited'
+									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
+								on:click={() => handleTypeChange('limited')}
+							>
+								Limited
+							</button>
+						</div>
+					</div>
+
+					<!-- Limit (only for limited events) -->
+					{#if eventData.type === 'limited'}
+						<div>
+							<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Attendee Limit *
+							</label>
+							<input
+								id="attendee_limit"
+								type="number"
+								bind:value={eventData.attendee_limit}
+								min="1"
+								max="1000"
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								placeholder="Enter limit"
+							/>
+							{#if errors.attendee_limit}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
+							{/if}
+						</div>
+					{/if}
+
+					<!-- Submit Button -->
+					<button
+						type="submit"
+						disabled={isSubmitting}
+						class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+					>
+						{#if isSubmitting}
+							<div class="flex items-center justify-center">
+								<div class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
+								Creating Event...
+							</div>
+						{:else}
+							Create Event
+						{/if}
+					</button>
+				</form>
+			</div>
+
+			<!-- Info Section -->
+			<div class="mt-8 p-6 text-center">
+				<p class="text-dark-100 font-medium">
+					Share the generated link with others to collect RSVPs.
+				</p>
+				<p class="mt-2 text-sm text-violet-300">
+					No registration required • Mobile optimized • Instant sharing
+				</p>
+			</div>
+		</div>
+	</div>
+</div>

src/routes/event/[id]/+error.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	$: error = $page.error;
+</script>
+
+<svelte:head>
+	<title>Error - Event Cactus</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Page Header -->
+	<div class=" border-b py-6">
+		<div class="container mx-auto px-4 text-center">
+			<h1 class=" font-display mb-2 text-2xl font-bold">Error</h1>
+			<p class="">Something went wrong</p>
+		</div>
+	</div>
+
+	<!-- Error Content -->
+	<div class="container mx-auto flex-1 px-4 py-8">
+		<div class="mx-auto max-w-md text-center">
+			<div class="rounded-sm border border-red-500/30 bg-red-900/20 p-8">
+				<div class="mb-4 text-6xl text-red-400">🚨</div>
+				<h2 class="mb-4 text-2xl font-bold text-red-400">Something Went Wrong</h2>
+
+				<p class=" mb-6">
+					{error?.message || 'An unexpected error occurred.'}
+				</p>
+
+				<div class="space-y-3">
+					<button
+						on:click={() => goto('/')}
+						class="  w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
+					>
+						Create New Event
+					</button>
+
+					<button
+						on:click={() => window.location.reload()}
+						class="bg-dark-600 hover:bg-dark-500 w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
+					>
+						Try Again
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

src/routes/event/[id]/+page.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { eventsStore } from '$lib/stores/events-supabase';
+	import type { Event, RSVP } from '$lib/types';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	let event: Event | undefined;
+	let rsvps: RSVP[] = [];
+	let newAttendeeName = '';
+	let isAddingRSVP = false;
+	let error = '';
+	let success = '';
+	let currentUserId = '';
+
+	const eventId = $page.params.id;
+
+	onMount(() => {
+		loadEvent();
+		generateUserId();
+	});
+
+	function generateUserId() {
+		// Generate a unique user ID and store it in localStorage
+		let userId = localStorage.getItem('eventCactusUserId');
+		if (!userId) {
+			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+			localStorage.setItem('eventCactusUserId', userId);
+		}
+		currentUserId = userId;
+	}
+
+	async function loadEvent() {
+		if (!eventId) return;
+
+		try {
+			const result = await eventsStore.getEventWithRSVPs(eventId);
+			if (result) {
+				event = result.event;
+				rsvps = result.rsvps;
+			} else {
+				error = 'Event not found';
+			}
+		} catch (err) {
+			error = 'Failed to load event';
+		}
+	}
+
+	function formatDate(dateString: string, timeString: string): string {
+		const date = new Date(`${dateString}T${timeString}`);
+		const year = date.getFullYear();
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const day = String(date.getDate()).padStart(2, '0');
+		return `${year}/${month}/${day}`;
+	}
+
+	function formatTime(timeString: string): string {
+		const [hours, minutes] = timeString.split(':');
+		return `${hours}:${minutes}`;
+	}
+
+	async function addRSVP() {
+		if (!newAttendeeName.trim() || !eventId) return;
+
+		isAddingRSVP = true;
+		error = '';
+		success = '';
+
+		try {
+			const rsvpSuccess = await eventsStore.addRSVP(eventId, newAttendeeName.trim(), currentUserId);
+
+			if (rsvpSuccess) {
+				newAttendeeName = '';
+				await loadEvent(); // Reload to get updated attendee list
+				success = 'RSVP added successfully!';
+			} else {
+				error = 'Failed to add RSVP. Event might be full or name already exists.';
+			}
+		} catch (err) {
+			error = 'An error occurred while adding RSVP.';
+		} finally {
+			isAddingRSVP = false;
+		}
+	}
+
+	async function removeRSVP(rsvpId: string) {
+		if (!eventId) return;
+
+		const success = await eventsStore.removeRSVP(eventId, rsvpId);
+		if (success) {
+			await loadEvent(); // Reload to get updated attendee list
+		}
+	}
+
+	function copyEventLink() {
+		const url = `${window.location.origin}/event/${eventId}`;
+		navigator.clipboard.writeText(url).then(() => {
+			success = 'Event link copied to clipboard!';
+			setTimeout(() => (success = ''), 4000);
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>{event?.name || 'Event'} - Event Cactus</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Main Content -->
+	<div class="container mx-auto flex-1 px-4 py-6">
+		{#if error && !event}
+			<!-- Error State -->
+			<div class="mx-auto max-w-md text-center">
+				<div class="rounded-sm border border-red-500/30 bg-red-900/20 p-8">
+					<div class="mb-4 text-6xl text-red-400">⚠️</div>
+					<h2 class="mb-4 text-2xl font-bold text-red-400">Event Not Found</h2>
+					<p class="my-8">The event you're looking for doesn't exist or has been removed.</p>
+					<button
+						on:click={() => goto('/create')}
+						class="border-white-500 bg-white-400/20 mt-2 rounded-sm border px-6 py-3 font-semibold text-white duration-400 hover:scale-110 hover:bg-white/10"
+					>
+						Create New Event
+					</button>
+				</div>
+			</div>
+		{:else if event}
+			<div class="mx-auto max-w-md space-y-6">
+				<!-- Event Details Card -->
+
+				<div class="rounded-sm border p-6 shadow-2xl">
+					<h2 class=" mb-4 text-center text-2xl font-bold">
+						{event.name}
+					</h2>
+
+					<div class="space-y-4">
+						<!-- Date & Time -->
+						<div class="flex items-center space-x-3 text-violet-400">
+							<div class="flex h-8 w-8 items-center justify-center rounded-sm">
+								<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+									></path>
+								</svg>
+							</div>
+							<div>
+								<p class="font-semibold text-white">
+									{formatDate(event.date, event.time)}
+									<span class="font-medium text-violet-400">-</span>
+									{formatTime(event.time)}
+								</p>
+							</div>
+						</div>
+
+						<!-- Location -->
+						<div class="flex items-center space-x-3 text-violet-400">
+							<div class="flex h-8 w-8 items-center justify-center rounded-sm">
+								<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+									></path>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+									></path>
+								</svg>
+							</div>
+							<div>
+								<p class="font-semibold text-white">{event.location}</p>
+							</div>
+						</div>
+
+						<!-- Event Type & Capacity -->
+						<div class="flex items-center justify-between rounded-sm p-3">
+							<div class="flex items-center space-x-2">
+								<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
+									{event.type === 'limited' ? 'Limited' : 'Unlimited'}
+								</span>
+							</div>
+
+							{#if event.type === 'limited' && event.attendee_limit}
+								<div class="text-right">
+									<p class="text-sm">Capacity</p>
+									<p class=" text-lg font-bold">
+										{rsvps.length}/{event.attendee_limit}
+									</p>
+								</div>
+							{/if}
+						</div>
+					</div>
+				</div>
+
+				<!-- RSVP Form -->
+				<div class=" rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
+					<h3 class=" mb-4 text-xl font-bold">Join This Event</h3>
+
+					{#if event.type === 'limited' && event.attendee_limit && rsvps.length >= event.attendee_limit}
+						<div class="py-6 text-center">
+							<div class="mb-3 text-4xl text-red-400">🚫</div>
+							<p class="font-semibold text-red-400">Event is Full!</p>
+							<p class="mt-1 text-sm">Maximum capacity reached</p>
+						</div>
+					{:else}
+						<form on:submit|preventDefault={addRSVP} class="space-y-4">
+							<div>
+								<label for="attendeeName" class=" mb-2 block text-sm font-semibold">
+									Your Name <span class="text-red-400">*</span>
+								</label>
+								<input
+									id="attendeeName"
+									type="text"
+									bind:value={newAttendeeName}
+									class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
+									placeholder="Enter your name"
+									maxlength="50"
+									required
+								/>
+							</div>
+
+							<button
+								type="submit"
+								disabled={isAddingRSVP || !newAttendeeName.trim()}
+								class=" hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+							>
+								{#if isAddingRSVP}
+									<div class="flex items-center justify-center">
+										<div
+											class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"
+										></div>
+										Adding...
+									</div>
+								{:else}
+									Join Event
+								{/if}
+							</button>
+						</form>
+					{/if}
+				</div>
+
+				<!-- Attendees List -->
+				<div class="rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
+					<div class="mb-4 flex items-center justify-between">
+						<h3 class=" text-xl font-bold">Attendees</h3>
+						<span class="text-crypto-gold text-2xl font-bold">{rsvps.length}</span>
+					</div>
+
+					{#if rsvps.length === 0}
+						<div class="text-dark-400 py-8 text-center">
+							<p>No attendees yet</p>
+							<p class="mt-1 text-sm">Be the first to join!</p>
+						</div>
+					{:else}
+						<div class="space-y-3">
+							{#each rsvps as attendee, index}
+								<div
+									class="flex items-center justify-between rounded-sm border border-white/20 p-3"
+								>
+									<div class="flex items-center space-x-3">
+										<div
+											class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"
+										>
+											{attendee.name.charAt(0).toUpperCase()}
+										</div>
+										<div>
+											<p class="font-medium text-white">{attendee.name}</p>
+											<p class="text-xs text-violet-400">
+												{(() => {
+													const date = new Date(attendee.created_at);
+													const year = date.getFullYear();
+													const month = String(date.getMonth() + 1).padStart(2, '0');
+													const day = String(date.getDate()).padStart(2, '0');
+													const hours = String(date.getHours()).padStart(2, '0');
+													const minutes = String(date.getMinutes()).padStart(2, '0');
+													return `${year}/${month}/${day} ${hours}:${minutes}`;
+												})()}
+											</p>
+										</div>
+									</div>
+
+									{#if attendee.user_id === currentUserId}
+										<button
+											on:click={() => removeRSVP(attendee.id)}
+											class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
+											aria-label="Remove RSVP"
+										>
+											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												></path>
+											</svg>
+										</button>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Action Buttons -->
+				<div class="max-w-2xl">
+					<button
+						on:click={copyEventLink}
+						class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+					>
+						Copy Link
+					</button>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Success/Error Messages -->
+{#if success}
+	<div
+		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900/20 p-4 text-green-400"
+	>
+		{success}
+	</div>
+{/if}
+
+{#if error}
+	<div
+		class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500/30 bg-red-900/20 p-4 text-red-400"
+	>
+		{error}
+	</div>
+{/if}