Next.js Conf 2024 V0 Template: Build Your Conference Page from This Design

Update the Next.js Conf 2024 landing page for [YOUR_EVENT]: set the event name in the Dark Hero Section to [EVENT_NAME], the date/location badge text to [DATE] in [CITY], and switch the primary accent from green-500 to [YOUR_COLOR_CLASS]. Update the Navigation logo text to [ORG_NAME]. Update the Registration CTA Banner headline and button label to [YOUR_CTA_TEXT]. Keep the dark gray-950 background, all framer-motion stagger animations, and all shadcn/ui component structure intact — only change text content and the accent color token in globals.css.

Replace the static speaker data in the Speaker Grid with the following array: [SPEAKER_JSON_ARRAY] where each object has name (string), title (string), company (string), imageUrl (string), and talkTitle (string). Map over the array to render the existing shadcn Card component for each speaker — preserve the framer-motion staggered entrance (0.1s delay per card). Replace all raw img tags for speaker avatars with the Next.js Image component using width={80} height={80} and className='rounded-full'. If any imageUrl comes from an external CDN, also add that hostname to next.config.js remotePatterns.

Add a real-time countdown timer to the Dark Hero Section showing days, hours, minutes, and seconds until the event. Create a Client Component (add 'use client' directive) with useState for the countdown values and useEffect calling setInterval every 1000ms. Initialize the target date as a constant ISO string (do NOT read it from localStorage — initialize entirely from the hardcoded date). Display the countdown in four shadcn Badge components side by side labeled D, H, M, S. When the countdown reaches zero, stop the interval and show a 'Conference is Live!' message in place of the timer.

Add a 'Register' modal dialog using shadcn Dialog that opens when the Registration CTA Banner button is clicked. The dialog form has three fields: name (text), email (email), company (text). On submit, call a Next.js Server Action that inserts the registration into a Supabase table conference_registrations (id uuid primary key, name text, email text unique, company text, created_at timestamptz default now()). Use process.env.SUPABASE_URL and process.env.SUPABASE_SERVICE_ROLE_KEY (both server-only, no NEXT_PUBLIC_ prefix). Show a 'Registration confirmed!' success message inside the modal after a successful insert. Close the dialog automatically after 3 seconds on success.

Create a Next.js route handler at app/api/schedule/route.ts that fetches session data from the Notion API using process.env.NOTION_API_KEY (server-only) and process.env.NOTION_DATABASE_ID (server-only). Use the Notion client from @notionhq/client to query the database. Transform the returned Notion page objects into a SessionItem array with fields: time (string), title (string), speaker (string), and track (string). Set Next.js fetch cache revalidation to revalidate: 300 seconds. Update the Schedule Section to be an async Server Component that calls fetch('/api/schedule') and renders the transformed session list, replacing all static schedule data.

Wrap the Schedule/Agenda Section in Clerk authentication so only registered attendees can see full session details. Add ClerkProvider to the root layout with process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and process.env.CLERK_SECRET_KEY. Add clerkMiddleware to middleware.ts protecting the /schedule route. For unauthenticated users visiting the main page, show a shadcn Button 'Sign in to view full schedule' in place of the session details in the Schedule Section. After Clerk sign-in, redirect back to the conference page and render the complete Schedule Section with talk descriptions and workshop links. Keep the Speaker Grid and Hero Section publicly visible.