TEDxNITC 2026 — React Frontend

A React + Vite + Tailwind CSS recreation of the TEDxNITC 2026 landing page: sticky nav, hero with an animated particle canvas, image marquee, a live countdown to 18 March 2026, a speaker grid with hover bios, a scroll-reveal event schedule, a partners marquee, and footer.

Setup

npm install
npm run dev      # local dev server
npm run build    # production build -> dist/

Adding real images

The original site's photos aren't included (they live on the source server). Drop your own files into public/ using these exact names and they'll show up automatically — anywhere an image is missing, the layout gracefully falls back to a plain card:

public/
  hero_image.png
  carousel/1.jpeg ... 6.jpeg
  speakers/Ramees.jpeg
  speakers/lishna.jpeg
  speakers/prakash.jpeg
  speakers/Sunil.jpeg
  speakers/Prajith.jpeg
  speakers/arun.jpeg

Structure

src/
  components/   Navbar, Hero, Overview, Countdown, Speakers, Schedule, Partners, Footer, Icons
  data/         speakers.js, schedule.js  — edit these to change content
  index.css     Tailwind entry + global styles
  App.jsx       Page composition

Notes

• The hero's particle background is a lightweight canvas re-implementation (the original used a three.js "PixelBlast" shader); it's dependency-free and respects prefers-reduced-motion.
• The countdown targets 2026-03-18T14:00:00+05:30 — change EVENT_DATE in src/components/Countdown.jsx if the date/time moves.
• Speaker bios, links, and the schedule are all data-driven — edit src/data/speakers.js and src/data/schedule.js rather than the JSX.