{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-summit", "title": "Northlight Summit: conference", "author": "Ballmac ", "description": "A five-page conference site under a sunrise ridgeline: a hero with a live countdown, a schedule you can star into an agenda with clash warnings, speakers with bios, tickets with a live total and promo code, and a venue guide.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/accordion.json" ], "files": [ { "path": "registry/ballmac/components/templates/summit/summit-fonts.ts", "content": "// Ballmac UI: Summit template fonts. https://ui.ballmac.com/templates/template-summit\nimport { Figtree, Unbounded } from \"next/font/google\"\n\nexport const summitDisplay = Unbounded({ variable: \"--summit-display\", subsets: [\"latin\"], display: \"swap\", preload: false })\nexport const summitSans = Figtree({ variable: \"--summit-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-fonts.ts" }, { "path": "registry/ballmac/components/templates/summit/summit-data.ts", "content": "// Ballmac UI: Summit template data. https://ui.ballmac.com/templates/template-summit\nexport type Track = \"Main stage\" | \"Craft\" | \"Systems\"\nexport const tracks: Track[] = [\"Main stage\", \"Craft\", \"Systems\"]\n\nexport type Speaker = { id: string; name: string; role: string; company: string; bio: string; tone: number; track: Track; talk: string }\n\nexport const speakers: Speaker[] = [\n { id: \"ingrid\", name: \"Ingrid Solheim\", role: \"Design director\", company: \"Fjord & Co\", bio: \"Ingrid leads a forty-person studio that designs ferries, hospitals and the signs between them. She believes the best interface is a good sign.\", tone: 0, track: \"Main stage\", talk: \"Wayfinding for the weary\" },\n { id: \"kofi\", name: \"Kofi Mensah\", role: \"Principal engineer\", company: \"Lattice\", bio: \"Kofi has run the on-call rota for a payments network for eight years and has opinions about alert fatigue that he is happy to share.\", tone: 1, track: \"Systems\", talk: \"Pagers are a design problem\" },\n { id: \"mira\", name: \"Mira Castellanos\", role: \"Type designer\", company: \"Letterform Foundry\", bio: \"Mira draws typefaces for screens that nobody has built yet. Her latest family ships with a hundred and forty weights.\", tone: 2, track: \"Craft\", talk: \"The weight between regular and bold\" },\n { id: \"jun\", name: \"Jun Watanabe\", role: \"Founder\", company: \"Tidepool\", bio: \"Jun built three companies in three countries and is writing a book about the quiet years between them.\", tone: 3, track: \"Main stage\", talk: \"The quiet years\" },\n { id: \"amara\", name: \"Amara Nwosu\", role: \"Research lead\", company: \"Open Lab\", bio: \"Amara studies how people actually use software when nobody is watching, and what they build around it.\", tone: 4, track: \"Craft\", talk: \"What users do with your product on Sunday\" },\n { id: \"leo\", name: \"Leo Bergstrom\", role: \"Staff engineer\", company: \"Northwind\", bio: \"Leo ripped out a two-million-line monolith one route at a time and kept a diary of every week.\", tone: 0, track: \"Systems\", talk: \"Deleting the monolith, a diary\" },\n { id: \"sana\", name: \"Sana Iqbal\", role: \"Head of product\", company: \"Parcel\", bio: \"Sana ships features that remove other features. Her team once shrank the settings page by sixty percent.\", tone: 2, track: \"Main stage\", talk: \"Subtraction as a roadmap\" },\n { id: \"tomas\", name: \"Tomáš Havel\", role: \"Motion designer\", company: \"Frame Rate\", bio: \"Tomáš animates interfaces that feel like physical objects, and has strong views on easing curves.\", tone: 1, track: \"Craft\", talk: \"Easing is a feeling\" },\n { id: \"freya\", name: \"Freya Lindqvist\", role: \"Security architect\", company: \"Vaultline\", bio: \"Freya designs the unglamorous parts: key rotation, audit trails and the recovery flow nobody wants to test.\", tone: 3, track: \"Systems\", talk: \"Design for the worst day\" },\n { id: \"dev\", name: \"Dev Raman\", role: \"Creative technologist\", company: \"Studio Nine\", bio: \"Dev builds installations out of sensors, shaders and a worrying amount of tape.\", tone: 4, track: \"Craft\", talk: \"Making light listen\" },\n { id: \"elena\", name: \"Elena Rossi\", role: \"Editor in chief\", company: \"Margin Magazine\", bio: \"Elena edits a magazine about slowness, which is published, appropriately, quarterly.\", tone: 2, track: \"Main stage\", talk: \"In praise of the long read\" },\n { id: \"noah\", name: \"Noah Fischer\", role: \"Platform lead\", company: \"Relay\", bio: \"Noah makes developer platforms people actually enjoy, mostly by deleting steps from the docs.\", tone: 0, track: \"Systems\", talk: \"The ten-minute quickstart\" },\n]\n\nexport type Session = { id: string; day: 1 | 2; start: string; end: string; title: string; track: Track; speaker: string; room: string; level: \"All levels\" | \"Intermediate\" | \"Advanced\"; blurb: string }\n\nexport const sessions: Session[] = [\n { id: \"s1\", day: 1, start: \"09:30\", end: \"10:15\", title: \"Wayfinding for the weary\", track: \"Main stage\", speaker: \"ingrid\", room: \"Aurora Hall\", level: \"All levels\", blurb: \"What a hospital corridor teaches us about onboarding, and why the best signs say less.\" },\n { id: \"s2\", day: 1, start: \"10:45\", end: \"11:30\", title: \"Pagers are a design problem\", track: \"Systems\", speaker: \"kofi\", room: \"Basalt Room\", level: \"Intermediate\", blurb: \"Eight years of on-call, distilled into six rules for alerts a human can act on at 3 a.m.\" },\n { id: \"s3\", day: 1, start: \"10:45\", end: \"11:30\", title: \"The weight between regular and bold\", track: \"Craft\", speaker: \"mira\", room: \"Studio One\", level: \"Advanced\", blurb: \"A walk through variable fonts, optical sizes and the weights nobody ships but everybody feels.\" },\n { id: \"s4\", day: 1, start: \"13:00\", end: \"13:45\", title: \"The quiet years\", track: \"Main stage\", speaker: \"jun\", room: \"Aurora Hall\", level: \"All levels\", blurb: \"Companies are not built in the launch week. A founder on the long, unglamorous middle.\" },\n { id: \"s5\", day: 1, start: \"14:15\", end: \"15:00\", title: \"What users do with your product on Sunday\", track: \"Craft\", speaker: \"amara\", room: \"Studio One\", level: \"Intermediate\", blurb: \"Field research from forty living rooms, and the workarounds that became features.\" },\n { id: \"s6\", day: 1, start: \"14:15\", end: \"15:00\", title: \"Deleting the monolith, a diary\", track: \"Systems\", speaker: \"leo\", room: \"Basalt Room\", level: \"Advanced\", blurb: \"Two million lines, one route at a time. What worked, what burned and what we would not do again.\" },\n { id: \"s7\", day: 1, start: \"16:00\", end: \"16:45\", title: \"Subtraction as a roadmap\", track: \"Main stage\", speaker: \"sana\", room: \"Aurora Hall\", level: \"All levels\", blurb: \"How removing settings, steps and screens made a product feel twice as fast.\" },\n { id: \"s8\", day: 2, start: \"09:30\", end: \"10:15\", title: \"In praise of the long read\", track: \"Main stage\", speaker: \"elena\", room: \"Aurora Hall\", level: \"All levels\", blurb: \"Why a slower publication found a faster audience.\" },\n { id: \"s9\", day: 2, start: \"10:45\", end: \"11:30\", title: \"Easing is a feeling\", track: \"Craft\", speaker: \"tomas\", room: \"Studio One\", level: \"Intermediate\", blurb: \"Curves, springs and the physics of things that should feel heavy or light.\" },\n { id: \"s10\", day: 2, start: \"10:45\", end: \"11:30\", title: \"Design for the worst day\", track: \"Systems\", speaker: \"freya\", room: \"Basalt Room\", level: \"Advanced\", blurb: \"Recovery flows, audit trails and the screens people only see when something has gone wrong.\" },\n { id: \"s11\", day: 2, start: \"13:00\", end: \"13:45\", title: \"Making light listen\", track: \"Craft\", speaker: \"dev\", room: \"Studio One\", level: \"Advanced\", blurb: \"A live build of an installation that responds to a room full of people.\" },\n { id: \"s12\", day: 2, start: \"13:00\", end: \"13:45\", title: \"The ten-minute quickstart\", track: \"Systems\", speaker: \"noah\", room: \"Basalt Room\", level: \"Intermediate\", blurb: \"A teardown of five onboarding docs and the step each one should lose.\" },\n { id: \"s13\", day: 2, start: \"15:00\", end: \"16:00\", title: \"Closing conversation: what we will keep\", track: \"Main stage\", speaker: \"ingrid\", room: \"Aurora Hall\", level: \"All levels\", blurb: \"Four speakers, one table and the questions you send in during the two days.\" },\n]\n\nexport type Tier = { id: string; name: string; price: number; blurb: string; perks: string[]; badge?: string }\nexport const tiers: Tier[] = [\n { id: \"student\", name: \"Student\", price: 190, blurb: \"With a valid student ID at the door.\", perks: [\"Both days, all tracks\", \"Lunch and coffee\", \"Recordings next week\"] },\n { id: \"early\", name: \"Early bird\", price: 490, blurb: \"Until 15 January, or 200 tickets.\", perks: [\"Both days, all tracks\", \"Lunch, coffee and the Thursday dinner\", \"Recordings next week\", \"Speaker Q&A lounge\"], badge: \"Best value\" },\n { id: \"standard\", name: \"Standard\", price: 690, blurb: \"The full two days.\", perks: [\"Both days, all tracks\", \"Lunch, coffee and the Thursday dinner\", \"Recordings next week\", \"Speaker Q&A lounge\"] },\n { id: \"patron\", name: \"Patron\", price: 1290, blurb: \"Support the event and sit near the front.\", perks: [\"Everything in Standard\", \"Reserved seats in Aurora Hall\", \"Patrons’ breakfast with the speakers\", \"Your name on the wall\"] },\n]\n\nexport const faqs = [\n { q: \"Will talks be recorded?\", a: \"Yes. Every main stage and track talk is recorded and sent to ticket holders within a week, with captions.\" },\n { q: \"Is the venue accessible?\", a: \"All three rooms are step-free, with hearing loops and a quiet room on every floor. Tell us what you need when you buy and we will arrange it.\" },\n { q: \"Can I get a refund?\", a: \"Full refund until 30 days before the event, then a transfer to another person for free. No questions.\" },\n { q: \"Do you offer childcare?\", a: \"There is a free, staffed room for children aged three to ten on both days. Add it to your order.\" },\n { q: \"What is the code of conduct?\", a: \"Be kind, ask before you photograph people and leave a seat for someone standing. Violations are handled by a named, trained team.\" },\n { q: \"Where should I stay?\", a: \"We hold rooms at three hotels within ten minutes’ walk. Prices are on the venue page and the code is in your ticket email.\" },\n]\n\nexport const sponsors = [\"Northwind\", \"Relay\", \"Parcel\", \"Lattice\", \"Tidepool\", \"Vaultline\", \"Studio Nine\", \"Margin\"]\nexport const EVENT_DATE = \"2027-05-14T09:00:00Z\"\nexport const speakerById = (id: string) => speakers.find((s) => s.id === id) ?? speakers[0]!\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-data.ts" }, { "path": "registry/ballmac/components/templates/summit/summit-theme.tsx", "content": "// Ballmac UI: Summit template shell. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Menu, X } from \"lucide-react\"\n\nimport { EVENT_DATE, type Speaker } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { summitDisplay, summitSans } from \"@/components/ballmac/templates/summit/summit-fonts\"\nimport { cn } from \"@/lib/utils\"\n\ntype SummitPage = \"home\" | \"schedule\" | \"speakers\" | \"tickets\" | \"venue\"\ntype SummitHrefs = Record\n\nconst defaultHrefs: SummitHrefs = { home: \"/summit\", schedule: \"/summit/schedule\", speakers: \"/summit/speakers\", tickets: \"/summit/tickets\", venue: \"/summit/venue\" }\n\n/** Northlight's palette: a cream morning page with indigo ink; dark mode is the same mountain at night. The hero sky is the same in both. */\nconst summitCss = `\n.summit-theme,body:not(:has([data-gallery])):has(.summit-theme){--background:oklch(0.975 0.015 80);--foreground:oklch(0.22 0.08 275);--card:oklch(0.99 0.01 80);--card-foreground:oklch(0.22 0.08 275);--popover:oklch(0.99 0.01 80);--popover-foreground:oklch(0.22 0.08 275);--primary:oklch(0.3 0.12 275);--primary-foreground:oklch(0.975 0.015 80);--secondary:oklch(0.94 0.025 80);--secondary-foreground:oklch(0.22 0.08 275);--muted:oklch(0.94 0.025 80);--muted-foreground:oklch(0.44 0.07 275);--accent:oklch(0.92 0.04 75);--accent-foreground:oklch(0.22 0.08 275);--border:oklch(0.22 0.08 275 / 14%);--input:oklch(0.22 0.08 275 / 22%);--ring:oklch(0.5 0.2 285);--surface:oklch(0.955 0.02 80);--destructive:oklch(0.52 0.21 27);--chart-1:oklch(0.7 0.18 38);--chart-2:oklch(0.84 0.15 85);--chart-3:oklch(0.62 0.11 190);--chart-4:oklch(0.52 0.2 295);--chart-5:oklch(0.7 0.16 350);--summit-on-sun:oklch(0.2 0.08 275);--summit-hero-fg:oklch(0.98 0.012 80);--summit-sky-1:oklch(0.2 0.09 280);--summit-sky-2:oklch(0.36 0.15 300);--summit-sky-3:oklch(0.62 0.19 20);--summit-sky-4:oklch(0.82 0.15 75);--summit-ridge-1:oklch(0.3 0.1 290);--summit-ridge-2:oklch(0.23 0.09 282);--summit-ridge-3:oklch(0.17 0.07 278);--radius:1.25rem}\n.dark .summit-theme,.dark body:not(:has([data-gallery])):has(.summit-theme){--background:oklch(0.17 0.06 277);--foreground:oklch(0.96 0.015 80);--card:oklch(0.21 0.07 277);--card-foreground:oklch(0.96 0.015 80);--popover:oklch(0.23 0.07 277);--popover-foreground:oklch(0.96 0.015 80);--primary:oklch(0.85 0.14 85);--primary-foreground:oklch(0.2 0.07 277);--secondary:oklch(0.26 0.07 277);--secondary-foreground:oklch(0.96 0.015 80);--muted:oklch(0.25 0.07 277);--muted-foreground:oklch(0.75 0.05 280);--accent:oklch(0.3 0.08 280);--accent-foreground:oklch(0.96 0.015 80);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.85 0.14 85);--surface:oklch(0.195 0.065 277);--destructive:oklch(0.7 0.19 27);--chart-1:oklch(0.75 0.17 40);--chart-2:oklch(0.86 0.14 88);--chart-3:oklch(0.76 0.11 190);--chart-4:oklch(0.72 0.17 300);--chart-5:oklch(0.78 0.14 350)}\nbody:not(:has([data-gallery])):has(.summit-theme){font-family:var(--summit-sans),ui-sans-serif,system-ui,sans-serif}\n@keyframes summit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}\n.summit-float{animation:summit-float 6s ease-in-out infinite}\n@media (prefers-reduced-motion:reduce){.summit-float{animation:none}}\n`\n\nconst display = \"[font-family:var(--summit-display),ui-sans-serif,system-ui,sans-serif] font-semibold tracking-[-0.03em]\"\nconst onSun = \"text-[var(--summit-on-sun)]\"\nconst tones = [\"bg-chart-1\", \"bg-chart-2\", \"bg-chart-3\", \"bg-chart-4\", \"bg-chart-5\"]\n\n/** A portrait without a photo: a colour field, shoulders and a head. Replace it with an image when you have one. */\nfunction Portrait({ speaker, className }: { speaker: Pick; className?: string }) {\n return (\n
\n
\n
\n
\n )\n}\n\n/** The mountain scene: a night-to-sunrise sky, a sun and three ridgelines. Decorative. */\nfunction Ridge({ className }: { className?: string }) {\n return (\n
\n
\n \n \n \n \n \n
\n )\n}\n\n/** Days, hours, minutes and seconds to the opening keynote. Computed after mount so server and client markup match. */\nfunction useCountdown(target: string) {\n const [left, setLeft] = React.useState(null)\n React.useEffect(() => {\n const tick = () => setLeft(Math.max(0, Math.floor((new Date(target).getTime() - Date.now()) / 1000)))\n tick()\n const id = window.setInterval(tick, 1000)\n return () => window.clearInterval(id)\n }, [target])\n if (left === null) return null\n return { days: Math.floor(left / 86400), hours: Math.floor((left % 86400) / 3600), minutes: Math.floor((left % 3600) / 60), seconds: left % 60 }\n}\n\nconst links: { key: SummitPage; label: string }[] = [\n { key: \"schedule\", label: \"Schedule\" },\n { key: \"speakers\", label: \"Speakers\" },\n { key: \"venue\", label: \"Venue\" },\n]\n\ntype SummitShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: SummitPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** Northlight's frame: a transparent header that settles on scroll, a ticket button that is always in reach and a mountain footer. */\nfunction SummitShell({ page, hrefs: overrides, className, style, children, ...props }: SummitShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n React.useEffect(() => {\n const classes = [summitDisplay.variable, summitSans.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n return (\n \n \n
\n
\n \n \n Northlight ’27\n \n \n
\n Get tickets\n \n
\n
\n {open && }\n
\n {children}\n
\n \n
\n
\n

See you in the mountains.

14 and 15 May 2027 · Harpa, Reykjavik. Two days of talks about design, engineering and the long view.

\n

The event

    {[[\"Schedule\", hrefs.schedule], [\"Speakers\", hrefs.speakers], [\"Venue and travel\", hrefs.venue], [\"Tickets\", hrefs.tickets]].map(([l, h]) =>
  • {l}
    • )}
\n

Contact

  • hello@northlight.example
  • Press and partnerships
  • Code of conduct
\n
\n

© 2027 Northlight Summit. Printed on a very small number of trees.

\n
\n
\n )\n}\n\nexport { Portrait, Ridge, SummitShell, defaultHrefs as summitDefaultHrefs, display as summitDisplayClass, onSun as summitOnSun, tones as summitTones, useCountdown, type SummitHrefs, type SummitPage, type SummitShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-theme.tsx" }, { "path": "registry/ballmac/components/templates/summit/summit-home.tsx", "content": "// Ballmac UI: Summit home page. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, CalendarDays, MapPin } from \"lucide-react\"\n\nimport { EVENT_DATE, sessions, speakerById, speakers, sponsors, tiers } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { Portrait, Ridge, SummitShell, summitDisplayClass, summitOnSun, useCountdown, type SummitHrefs } from \"@/components/ballmac/templates/summit/summit-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst stats = [[\"2\", \"days\"], [\"24\", \"talks\"], [\"3\", \"stages\"], [\"900\", \"people\"]]\nconst reasons = [\n { n: \"01\", title: \"Talks with a point of view\", body: \"Every speaker is asked one question before they are booked: what do you believe that most of your industry does not?\" },\n { n: \"02\", title: \"Rooms that are not crowded\", body: \"Nine hundred seats in a hall built for three thousand. You will always find a place to sit and someone to talk to.\" },\n { n: \"03\", title: \"Time to talk, on purpose\", body: \"Ninety minutes for lunch, a long Thursday dinner and a lounge where speakers sit down and answer the second question.\" },\n]\n\nfunction Tile({ value, unit }: { value: string; unit: string }) {\n return (\n
\n
{value}
\n
{unit}
\n
\n )\n}\n\ntype SummitHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Summit home page: a sunrise hero with a live countdown, numbers, speakers, a schedule teaser and tickets. */\nfunction SummitHome({ hrefs, ...props }: SummitHomeProps) {\n const link = { schedule: \"/summit/schedule\", speakers: \"/summit/speakers\", tickets: \"/summit/tickets\", venue: \"/summit/venue\", ...hrefs }\n const left = useCountdown(EVENT_DATE)\n const pad = (n: number) => String(n).padStart(2, \"0\")\n return (\n \n
\n
\n \n
\n

14–15 May 2027Harpa, Reykjavik

\n

Look further.

\n

Two days of talks about design, engineering and the long view, held where the sun barely sets. Twelve speakers, nine hundred seats.

\n \n
\n

Doors open in

\n
\n \n
\n

{left ? `${left.days} days until the doors open on 14 May 2027.` : \"Doors open on 14 May 2027.\"}

\n
\n
\n
\n\n
\n
Supported by{sponsors.map((s) => {s})}
\n
\n\n
\n
    {stats.map(([n, l], i) =>
  • {n}{l}
    • )}
\n
\n\n
\n \n \n
\n\n
\n
\n

Day one, at a glance

Three rooms, no overlap you will regret. Star the talks you want and we will build your day.

Build my agenda
\n
    \n {sessions.filter((s) => s.day === 1).slice(0, 5).map((s) => (\n
  1. \n {s.start}\n {s.title}{speakerById(s.speaker).name} · {s.room}\n \n
    2. \n ))}\n
\n
\n
\n\n
\n

Why people come back

\n
    {reasons.map((r) =>
  • {r.n}

    {r.title}

    {r.body}

    • )}
\n
\n\n
\n
\n
\n
\n

The early bird is $200 cheaper.

Early bird ends on 15 January or at 200 tickets, whichever comes first. Refundable until 30 days before.

\n
${tiers[1]!.price}Get tickets
\n
\n
\n
\n
\n \n )\n}\n\nexport { SummitHome, type SummitHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-home.tsx" }, { "path": "registry/ballmac/components/templates/summit/summit-schedule.tsx", "content": "// Ballmac UI: Summit schedule page. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Clock, MapPin, Star, TriangleAlert } from \"lucide-react\"\n\nimport { sessions, speakerById, tracks, type Session, type Track } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { Portrait, SummitShell, summitDisplayClass, type SummitHrefs } from \"@/components/ballmac/templates/summit/summit-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst trackDot: Record = { \"Main stage\": \"bg-chart-1\", Craft: \"bg-chart-4\", Systems: \"bg-chart-3\" }\nconst days = [{ n: 1 as const, label: \"Day 1\", date: \"Friday 14 May\" }, { n: 2 as const, label: \"Day 2\", date: \"Saturday 15 May\" }]\nconst minutes = (t: string) => Number(t.slice(0, 2)) * 60 + Number(t.slice(3))\nconst overlaps = (a: Session, b: Session) => a.id !== b.id && a.day === b.day && minutes(a.start) < minutes(b.end) && minutes(b.start) < minutes(a.end)\n\ntype SummitScheduleProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; defaultSaved?: string[] }\n\n/** The schedule: day switch, track filters, one-tap agenda saving with clash warnings and a live summary. */\nfunction SummitSchedule({ hrefs, defaultSaved = [], ...props }: SummitScheduleProps) {\n const [day, setDay] = React.useState<1 | 2>(1)\n const [active, setActive] = React.useState([...tracks])\n const [saved, setSaved] = React.useState(defaultSaved)\n const toggleTrack = (t: Track) => setActive((a) => (a.includes(t) ? (a.length > 1 ? a.filter((x) => x !== t) : a) : [...a, t]))\n const toggleSaved = (id: string) => setSaved((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]))\n const list = sessions.filter((s) => s.day === day && active.includes(s.track))\n const slots = [...new Set(list.map((s) => s.start))].sort()\n const mine = sessions.filter((s) => saved.includes(s.id)).sort((a, b) => a.day - b.day || minutes(a.start) - minutes(b.start))\n const clashes = mine.filter((s) => mine.some((o) => overlaps(s, o)))\n return (\n \n
\n

Schedule

\n

Three rooms run side by side. Star what you want to see and we will keep an eye out for clashes.

\n\n
\n
\n {days.map((d) => )}\n
\n
\n {tracks.map((t) => )}\n
\n
\n\n

{list.length} {list.length === 1 ? \"talk\" : \"talks\"} on {days[day - 1]!.date}. {saved.length > 0 ? `${saved.length} saved to your agenda.` : \"Nothing saved yet.\"}

\n\n
\n {slots.map((slot) => {\n const here = list.filter((s) => s.start === slot)\n return (\n
\n

{slot}until {here[0]!.end}

\n
    1 && \"lg:grid-cols-2\", here.length > 2 && \"xl:grid-cols-3\")}>\n {here.map((s) => {\n const sp = speakerById(s.speaker)\n const on = saved.includes(s.id)\n return (\n
  • \n \n
    \n

    {s.track}

    \n

    {s.title}

    \n

    {sp.name}, {sp.company}

    \n

    {s.blurb}

    \n

    {s.room}{s.level}

    \n
    \n \n
    • \n )\n })}\n
\n
\n )\n })}\n {slots.length === 0 &&

No talks match these tracks on this day.

}\n
\n\n
\n

My agenda

{saved.length > 0 && }
\n {mine.length === 0 ? (\n

Press the star on any talk and it lands here, sorted by day and time.

\n ) : (\n <>\n {clashes.length > 0 &&

{clashes.length} of your talks run at the same time. Pick one for each slot marked below.

}\n
    \n {mine.map((s) => (\n
  1. \n Day {s.day} · {s.start}\n {s.title}\n {s.room}\n {clashes.includes(s) && Clash}\n
    2. \n ))}\n
\n \n )}\n
\n
\n \n )\n}\n\nexport { SummitSchedule, type SummitScheduleProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-schedule.tsx" }, { "path": "registry/ballmac/components/templates/summit/summit-speakers.tsx", "content": "// Ballmac UI: Summit speakers page. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ballmac/dialog\"\nimport { sessions, speakers, tracks, type Speaker } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { Portrait, SummitShell, summitDisplayClass, type SummitHrefs } from \"@/components/ballmac/templates/summit/summit-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst filters = [\"All\", ...tracks] as const\n\ntype SummitSpeakersProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The speakers page: filter by track or search by name, open a bio with the talk and the time it happens. */\nfunction SummitSpeakers({ hrefs, ...props }: SummitSpeakersProps) {\n const [filter, setFilter] = React.useState<(typeof filters)[number]>(\"All\")\n const [query, setQuery] = React.useState(\"\")\n const [open, setOpen] = React.useState(null)\n const q = query.trim().toLowerCase()\n const list = speakers.filter((s) => (filter === \"All\" || s.track === filter) && (!q || `${s.name} ${s.company} ${s.talk} ${s.role}`.toLowerCase().includes(q)))\n const session = open ? sessions.find((s) => s.speaker === open.id) : null\n return (\n \n
\n

Speakers

\n

Twelve people who have spent years on one hard question. Each gets forty-five minutes and no slides they did not make.

\n
\n
\n \n \n setQuery(e.target.value)} placeholder=\"Search speakers or talks\" className=\"bg-card focus-visible:ring-ring/50 h-11 w-full rounded-full border pe-4 ps-10 text-sm outline-none focus-visible:ring-[3px]\" />\n
\n
\n {filters.map((f) => )}\n
\n
\n

{list.length} {list.length === 1 ? \"speaker\" : \"speakers\"}

\n
    \n {list.map((s) => (\n
  • \n \n
    • \n ))}\n
\n {list.length === 0 &&

No one by that name.

}\n
\n\n !v && setOpen(null)}>\n \n {open && (\n
\n \n
\n {open.name}{open.role}, {open.company}\n

{open.bio}

\n {session && (\n
\n

Talk

\n

{session.title}

\n

Day {session.day} · {session.start} · {session.room}

\n
\n )}\n
\n
\n )}\n \n \n \n )\n}\n\nexport { SummitSpeakers, type SummitSpeakersProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-speakers.tsx" }, { "path": "registry/ballmac/components/templates/summit/summit-tickets.tsx", "content": "// Ballmac UI: Summit tickets page. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus, PartyPopper, Plus } from \"lucide-react\"\n\nimport { faqs, tiers } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { SummitShell, summitDisplayClass, summitOnSun, type SummitHrefs } from \"@/components/ballmac/templates/summit/summit-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst money = (n: number) => `$${n.toLocaleString(\"en-US\", { minimumFractionDigits: n % 1 ? 2 : 0, maximumFractionDigits: 2 })}`\nconst field = \"bg-background focus-visible:ring-ring/50 aria-invalid:border-destructive h-12 w-full rounded-xl border px-4 outline-none focus-visible:ring-[3px]\"\n\ntype SummitTicketsProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** Tickets: pick a tier and a quantity, see a live total with group and promo discounts, then a validated checkout form. */\nfunction SummitTickets({ hrefs, ...props }: SummitTicketsProps) {\n const [tier, setTier] = React.useState(\"early\")\n const [qty, setQty] = React.useState(1)\n const [promo, setPromo] = React.useState(\"\")\n const [promoState, setPromoState] = React.useState<\"idle\" | \"ok\" | \"bad\">(\"idle\")\n const [form, setForm] = React.useState({ name: \"\", email: \"\", company: \"\" })\n const [errors, setErrors] = React.useState>({})\n const [done, setDone] = React.useState(false)\n const errorRef = React.useRef(null)\n\n const t = tiers.find((x) => x.id === tier)!\n const subtotal = t.price * qty\n const group = qty >= 5 ? subtotal * 0.15 : 0\n const code = promoState === \"ok\" ? (subtotal - group) * 0.1 : 0\n const total = subtotal - group - code\n\n function applyPromo(e: React.FormEvent) {\n e.preventDefault()\n setPromoState(promo.trim().toUpperCase() === \"NORTH10\" ? \"ok\" : \"bad\")\n }\n function submit(e: React.FormEvent) {\n e.preventDefault()\n const next: Record = {}\n if (!form.name.trim()) next.name = \"Tell us who the ticket is for.\"\n if (!/^\\S+@\\S+\\.\\S+$/.test(form.email.trim())) next.email = \"Enter an email like you@example.com.\"\n setErrors(next)\n const first = Object.keys(next)[0]\n if (first) return void errorRef.current?.querySelector(`[name=\"${first}\"]`)?.focus()\n setDone(true)\n }\n const bind = (k: keyof typeof form) => ({ name: k, value: form[k], onChange: (e: React.ChangeEvent) => setForm((f) => ({ ...f, [k]: e.target.value })), \"aria-invalid\": !!errors[k], \"aria-describedby\": errors[k] ? `st-err-${k}` : undefined })\n\n return (\n \n
\n

Tickets

\n

One ticket covers both days and every room. Buy five or more and take 15% off automatically.

\n\n {done ? (\n
\n \n

You are going, {form.name.split(\" \")[0]}.

\n

{qty} × {t.name} for {money(total)}. A receipt and your ticket{qty > 1 ? \"s are\" : \" is\"} on the way to {form.email}.

\n \n
\n ) : (\n
\n
\n
\n 1. Choose a ticket\n
\n {tiers.map((x) => (\n \n ))}\n
\n
\n\n
\n

2. Your details

\n
{errors.name &&

{errors.name}

}
\n
{errors.email &&

{errors.email}

}
\n
\n \n

Demo checkout: no card is taken. Refundable until 30 days before.

\n
\n
\n\n \n
\n )}\n\n
\n

Before you buy

\n
{faqs.slice(2, 5).map((f) =>
{f.q}

{f.a}

)}
\n
\n
\n \n )\n}\n\nexport { SummitTickets, type SummitTicketsProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-tickets.tsx" }, { "path": "registry/ballmac/components/templates/summit/summit-venue.tsx", "content": "// Ballmac UI: Summit venue page. https://ui.ballmac.com/templates/template-summit\n\"use client\"\n\nimport * as React from \"react\"\nimport { Accessibility, Bed, Plane, Train } from \"lucide-react\"\n\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ballmac/accordion\"\nimport { faqs } from \"@/components/ballmac/templates/summit/summit-data\"\nimport { SummitShell, summitDisplayClass, type SummitHrefs } from \"@/components/ballmac/templates/summit/summit-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst ways = [\n { id: \"fly\", label: \"Fly\", icon: Plane, title: \"Keflavík airport, 50 minutes away\", body: \"Flybus meets every arrival and drops you at the hotel row. We run a free shuttle from the airport at 8:00 and 12:00 on Thursday and Friday.\" },\n { id: \"bus\", label: \"City bus\", icon: Train, title: \"Lines 1, 3 and 11 stop at the door\", body: \"Buses run every ten minutes until midnight. Your ticket doubles as a three-day city pass. Show the QR code to the driver.\" },\n { id: \"walk\", label: \"On foot\", icon: Accessibility, title: \"Twelve minutes from the old harbour\", body: \"The route along the water is flat and lit. Taxis and wheelchair-accessible vehicles wait at the north entrance.\" },\n]\nconst hotels = [[\"Hótel Esja\", \"3 min walk\", 164], [\"The Harbour House\", \"6 min walk\", 142], [\"Sól Apartments\", \"9 min walk\", 118]] as const\n\n/** A flat map of the harbour: water, land, a route and three pins. Decorative; the list beside it says the same in words. */\nfunction VenueMap() {\n return (\n \n \n \n \n \n {[[90, 360, \"Airport bus\"], [260, 280, \"Hotels\"], [430, 215, \"Harpa\"]].map(([x, y, l]) => (\n {l as string}\n ))}\n \n )\n}\n\ntype SummitVenueProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The venue page: map, three ways to arrive, nearby hotels with a held rate, access details and the full FAQ. */\nfunction SummitVenue({ hrefs, ...props }: SummitVenueProps) {\n const [way, setWay] = React.useState(\"fly\")\n const current = ways.find((w) => w.id === way)!\n return (\n \n
\n

Venue

\n

Harpa sits on the water at the edge of the old harbour. Three rooms, one long lunch hall and a lot of glass.

\n\n
\n
\n
\n

Getting there

\n
{ways.map((w) => )}
\n

{current.title}

{current.body}

\n
Harpa Concert Hall
Austurbakki 2, 101 Reykjavik
\n
\n
\n\n
\n

Where to stay

\n

We hold rooms at three hotels until 1 April. Use the code NORTHLIGHT when you book.

\n
    {hotels.map(([n, d, p]) =>

  • {n}

    {d}

    ${p} a night

    • )}
\n
\n\n
\n

Access, for everyone

\n {[[\"Step-free\", \"Every room, restroom and the lunch hall. Lifts at both ends of the building.\"], [\"Hearing and sight\", \"Hearing loops in all three rooms, live captions on every screen and large-print programmes.\"], [\"Quiet and care\", \"A quiet room on each floor and a staffed children’s room, both open all day.\"]].map(([t, b]) =>

{t}

{b}

)}\n
\n\n
\n

Questions

\n {faqs.map((f) => {f.q}{f.a})}\n
\n
\n \n )\n}\n\nexport { SummitVenue, type SummitVenueProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/summit/summit-venue.tsx" }, { "path": "registry/ballmac/app/summit/page.tsx", "content": "// Ballmac UI: Summit template route. https://ui.ballmac.com/templates/template-summit\nimport type { Metadata } from \"next\"\n\nimport { SummitHome } from \"@/components/ballmac/templates/summit/summit-home\"\n\nexport const metadata: Metadata = {\n title: \"Northlight Summit 2027: look further\",\n description: \"Two days of talks about design, engineering and the long view. Reykjavik, 14 and 15 May 2027.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/summit/page.tsx" }, { "path": "registry/ballmac/app/summit/schedule/page.tsx", "content": "// Ballmac UI: Summit template route. https://ui.ballmac.com/templates/template-summit\nimport type { Metadata } from \"next\"\n\nimport { SummitSchedule } from \"@/components/ballmac/templates/summit/summit-schedule\"\n\nexport const metadata: Metadata = {\n title: \"Schedule · Northlight Summit\",\n description: \"Three rooms, two days. Star talks to build your agenda.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/summit/schedule/page.tsx" }, { "path": "registry/ballmac/app/summit/speakers/page.tsx", "content": "// Ballmac UI: Summit template route. https://ui.ballmac.com/templates/template-summit\nimport type { Metadata } from \"next\"\n\nimport { SummitSpeakers } from \"@/components/ballmac/templates/summit/summit-speakers\"\n\nexport const metadata: Metadata = {\n title: \"Speakers · Northlight Summit\",\n description: \"Twelve speakers, forty-five minutes each.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/summit/speakers/page.tsx" }, { "path": "registry/ballmac/app/summit/tickets/page.tsx", "content": "// Ballmac UI: Summit template route. https://ui.ballmac.com/templates/template-summit\nimport type { Metadata } from \"next\"\n\nimport { SummitTickets } from \"@/components/ballmac/templates/summit/summit-tickets\"\n\nexport const metadata: Metadata = {\n title: \"Tickets · Northlight Summit\",\n description: \"Early bird $490. Group discounts from five tickets.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/summit/tickets/page.tsx" }, { "path": "registry/ballmac/app/summit/venue/page.tsx", "content": "// Ballmac UI: Summit template route. https://ui.ballmac.com/templates/template-summit\nimport type { Metadata } from \"next\"\n\nimport { SummitVenue } from \"@/components/ballmac/templates/summit/summit-venue\"\n\nexport const metadata: Metadata = {\n title: \"Venue · Northlight Summit\",\n description: \"Harpa, Reykjavik. How to get there, where to stay and access details.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/summit/venue/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "event", "conference", "summit", "schedule", "speakers", "tickets", "countdown" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page conference site with a countdown, a starrable schedule that warns about clashes, speaker dialogs, a ticket calculator with group and promo discounts, and a venue guide. Edit summit-data.ts and summitCss.", "whenToUse": [ "Conferences, meetups and festivals", "Any event site with a schedule, speakers and ticket tiers" ], "whenNotToUse": [ "Ticketing with real payments (wire the form to your processor first)" ], "composesWith": [ "dialog", "accordion", "countdown" ], "a11y": [ { "keys": "Star button on a session", "action": "Adds or removes it from your agenda; the summary updates in a live region" }, { "keys": "Enter on a speaker", "action": "Opens their bio in a dialog; Escape closes it" }, { "keys": "Arrow buttons beside the ticket count", "action": "Change the quantity; the total is announced" } ], "customization": [ "Edit summit-data.ts for the event, speakers, sessions and tiers", "Change summitCss for the sky and ridge colours", "Swap Portrait for real photos", "Connect the checkout form to your payment provider" ] }, "examples": [ "template-summit-demo", "template-summit-schedule", "template-summit-speakers", "template-summit-tickets", "template-summit-venue" ], "url": "https://ui.ballmac.com/components/template-summit" }, "docs": "Pages are at /summit, /summit/schedule, /summit/speakers, /summit/tickets and /summit/venue. Speakers, sessions, tiers and FAQ live in summit-data.ts; set EVENT_DATE for the countdown. The promo code in the demo is NORTH10. Replace Portrait with photos when you have them.", "categories": [ "templates" ], "type": "registry:block" }