Keynote — Design Conference Landing — Référence de design web et prompt

# KEYNOTE — TAILWIND PLUS CONFERENCE TEMPLATE — STUDY / CLONE

> A SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE TAILWIND PLUS "KEYNOTE" CONFERENCE LANDING TEMPLATE (THE FICTIONAL "DECEPTICONF" EVENT), REBUILT AS PLAIN HTML + CSS + VANILLA JS WITH NO BUILD STEP. EVERY SECTION, TAB INTERACTION, HOVER STATE, AND SCROLL BEHAVIOUR IS RECREATED FROM RECON ARTIFACTS. ALL ASSETS (INTER + DM SANS FONTS, SPEAKER PHOTOS, SPONSOR LOGO SVGS, GRID BACKGROUND, NEWSLETTER BACKGROUND) ARE VENDORED LOCALLY SO THE CLONE RUNS OFFLINE. THIS IS A STUDY OF SOMEONE ELSE'S DESIGN, BUILT FOR LEARNING — ALL CREDIT FOR THE ORIGINAL GOES TO TAILWIND PLUS (TAILWIND LABS).

REFERENCE: `https://tailwindcss.com/plus/templates/keynote/preview`

## SUMMARY

KEYNOTE IS A PREMIUM SINGLE-PAGE CONFERENCE / EVENT MARKETING TEMPLATE FROM TAILWIND PLUS, SHOWCASED WITH THE FICTIONAL "DECEPTICONF" — "A DESIGN CONFERENCE FOR THE DARK SIDE" HELD 04–06 APRIL 2022 IN LOS ANGELES, CA. IT IS A LIGHT, AIRY, INDIGO/BLUE-TINTED LAYOUT BUILT ON A SOFT `bg-indigo-50` FIELD WITH A LARGE FAINT GRID-PATTERN BACKGROUND IMAGE BLEEDING BEHIND THE HERO AND SPEAKERS SECTIONS, A BOLD DM SANS DISPLAY FACE FOR HEADINGS, INTER FOR BODY, AND A MONOSPACE ACCENT FOR DATES/TIMES. THE LIVE TEMPLATE IS A NEXT.JS APP SERVED FROM `keynote.tailwindui.com`; THIS CLONE PRESERVES ITS EXACT MARKUP/COPY/IMAGERY, SELF-HOSTS THE INTER + DM SANS VARIABLE FONTS, VENDORS ALL SPEAKER PHOTOS / SPONSOR SVGS / BACKGROUND JPEGS LOCALLY, AND REPLACES THE PROPRIETARY HEADLESS-UI TAB GROUPS + NEXT RUNTIME WITH A SMALL HAND-WRITTEN CSS (TAILWIND-EQUIVALENT TOKENS) PLUS A VANILLA-JS SHIM THAT REIMPLEMENTS THE SAME BEHAVIOURS (DATE/LOCATION HEADER TABS, SPEAKERS DAY TAB GROUP, SCHEDULE DAY TAB GROUP, HOVER STATES).

THE BUILD IS A SINGLE PAGE (`index`) WITH: HEADER, HERO, SPEAKERS (DAY-TABBED PHOTO GRID), SCHEDULE (DAY-TABBED TALK LISTS), SPONSORS LOGO CLOUD, NEWSLETTER CTA, AND FOOTER. NO OTHER ROUTES EXIST — ALL NAV LINKS ARE IN-PAGE `#` ANCHORS.