diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..1fdc7ff --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,224 @@ +import { useState, useEffect } from "react"; +import { toast } from "sonner"; +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { ArrowRight, Ticket, Users, Calendar, Mic, Layers, Send, Mail, User } from "lucide-react"; +import { useSaasMutation } from "@/hooks/use-tygarun"; +import Header from "@/components/Header"; +import Footer from "@/components/Footer"; + +const speakers = [ + { initials: "SK", name: "Sarah Kim", role: "VP Eng, Vercel", gradient: "from-indigo-500 to-cyan-500" }, + { initials: "AM", name: "Alex Morgan", role: "CTO, Supabase", gradient: "from-purple-500 to-pink-500" }, + { initials: "RJ", name: "Raj Joshi", role: "Staff Eng, Google", gradient: "from-cyan-500 to-emerald-500" }, + { initials: "LP", name: "Lisa Park", role: "Design Lead, Figma", gradient: "from-amber-500 to-red-500" }, + { initials: "TW", name: "Tom Walsh", role: "Creator, Bun", gradient: "from-pink-500 to-violet-500" }, + { initials: "DN", name: "Diana Nguyen", role: "SRE Lead, Netflix", gradient: "from-emerald-500 to-indigo-500" }, +]; + +const sponsorTiers = [ + { tier: "Platinum", names: ["CloudScale AI", "DevOps Hub"] }, + { tier: "Gold", names: ["StackForge", "CodeVault", "DataPipe"] }, + { tier: "Silver", names: ["GitSync", "EdgeNode", "APILayer", "DeployFast"] }, + { tier: "Community", names: ["ReactConf", "JSNation"] }, +]; + +export default function IndexPage() { + const [regName, setRegName] = useState(""); + const [regEmail, setRegEmail] = useState(""); + const { mutate: registerInterest, loading: registering } = useSaasMutation("scheduling", "/bookings"); + const { mutate: purchaseTicket, loading: purchasing } = useSaasMutation("event-ticketing", "/checkout"); + const [countdown, setCountdown] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 }); + useEffect(() => { + const target = new Date("2026-06-18T09:00:00").getTime(); + const tick = () => { + const now = Date.now(); + const diff = Math.max(0, target - now); + setCountdown({ + days: Math.floor(diff / (1000 * 60 * 60 * 24)), + hours: Math.floor((diff / (1000 * 60 * 60)) % 24), + minutes: Math.floor((diff / (1000 * 60)) % 60), + seconds: Math.floor((diff / 1000) % 60), + }); + }; + tick(); + const id = setInterval(tick, 1000); + return () => clearInterval(id); + }, []); + + return ( +
+
+ + {/* Hero */} +
+
+
+
+
+
+
+ June 18–20, 2026 +

DevForge 2026

+

The premier conference for developers, designers, and DevOps engineers building the future of the web.

+

June 18–20, 2026 · The Apex Centre, San Francisco

+ + {/* Countdown */} +

Event starts in

+
+ {[ + { label: "Days", value: countdown.days }, + { label: "Hours", value: countdown.hours }, + { label: "Minutes", value: countdown.minutes }, + { label: "Seconds", value: countdown.seconds }, + ].map((c) => ( +
+
+
+
{String(c.value).padStart(2, "0")}
+
{c.label}
+
+
+ ))} +
+ + {/* Register Interest */} +
{ e.preventDefault(); if (!regName || !regEmail) return; try { await registerInterest({ name: regName, email: regEmail, event: "DevForge 2026" }); toast.success("Registered! We'll be in touch."); setRegName(""); setRegEmail(""); } catch { toast.error("Could not register. Please try again."); } }}> +
+ + setRegName(e.target.value)} className="pl-9 bg-slate-800/60 border-slate-700/50 text-white placeholder:text-slate-500 focus:border-indigo-500" /> +
+
+ + setRegEmail(e.target.value)} className="pl-9 bg-slate-800/60 border-slate-700/50 text-white placeholder:text-slate-500 focus:border-indigo-500" /> +
+ +
+ +
+ + +
+
+
+ + {/* Stats */} +
+
+ {[ + { icon: Mic, value: "48+", label: "Speakers" }, + { icon: Layers, value: "24", label: "Workshops" }, + { icon: Users, value: "2,000+", label: "Attendees" }, + { icon: Calendar, value: "3", label: "Days" }, + ].map((s, i) => ( +
+ +
{s.value}
+
{s.label}
+
+ ))} +
+
+ + {/* Featured Speakers */} +
+
+
+

Featured Speakers

+

Industry leaders and open-source pioneers sharing cutting-edge insights.

+
+
+ {speakers.map((sp, i) => ( + +
+ {sp.initials} +
+
{sp.name}
+
{sp.role}
+ 2 talks + + ))} +
+
+ +
+
+
+ + {/* Sponsors */} +
+
+

Our Sponsors

+ {sponsorTiers.map((tier) => ( +
+

{tier.tier}

+
+ {tier.names.map((name, i) => ( +
+ {name} +
+ ))} +
+
+ ))} +
+ +
+
+
+ + {/* Ticket Pricing */} +
+
+

Get Your Ticket

+

Choose the pass that fits your needs. All tickets include 3 days of content.

+
+ {[ + { name: "Early Bird", price: "$299", features: ["All keynotes & talks", "Coffee & lunch included", "Conference swag bag"], accent: "border-slate-700" }, + { name: "Regular", price: "$499", features: ["Everything in Early Bird", "Workshop access", "Networking lounge"], accent: "border-indigo-500 ring-1 ring-indigo-500/30" }, + { name: "VIP", price: "$899", features: ["Everything in Regular", "Speaker dinner invite", "Priority front-row seating"], accent: "border-cyan-500" }, + ].map((t, i) => ( + + +
+
{t.name}
+ {i === 2 && Limited} +
+
{t.price}
+
    + {t.features.map((f, j) =>
  • {f}
    • )} +
+ + + + ))} +
+

Group discount available for 5+ tickets. Contact us for details.

+
+
+ + {/* Newsletter CTA */} +
+
+

Stay in the Loop

+

Subscribe for speaker announcements, schedule updates, and exclusive early-bird pricing.

+
{ e.preventDefault(); toast.success("Subscribed! You'll get event updates."); e.currentTarget.reset(); }} className="flex gap-3 max-w-md mx-auto"> + + +
+
+
+ +
+ ); +} \ No newline at end of file