Tech Conference & Hackathon Event
An electrifying tech summit and hackathon event page with keynote speaker lineups, multi-track agenda timelines, and ticket tier passes.
Example of the website this prompt builds. Your result will use your own name, text and images.
- Tech stack
- Next.js (App Router) + Tailwind CSS
- Colour palette
#020617#ffffff#a855f7#ec4899
- What it builds
- Marquee ribbon with dates and host city ('18-20 November 2026 · Bengaluru & Online')
- Navbar with Schedule, Speakers, Hackathon, and Register Passes
- Hero with event teaser reel, speaker lineup, and live countdown timer
- Keynote speaker avatar grid with company affiliations and talk titles
- Multi-track interactive agenda schedule (Track A: AI Systems, Track B: Cloud & DevOps, Track C: Web3)
- $50,000 Hackathon bounty challenges and judging criteria
- Early-bird and VIP ticket tier pricing cards with pass perks
- Past year conference highlights video and photo recap
- Sponsor logo tiers (Titanium, Platinum, Community Partners)
- Venue directions, travel recommendations, and hotel discounts
- Footer with code of conduct and student scholarship application
The prompt
Copy everything in the box. Text in quotes and the sample business details are meant to be replaced with your own.
Build a high-energy, futuristic conference and hackathon event website called "NextGen AI & Cloud Summit 2026".
Tech stack: Next.js (App Router) with Tailwind CSS.
Visual style: electrifying cyber-dark aesthetic (#020617 background). Radiant ultraviolet (#a855f7) and neon fuchsia (#ec4899) gradients. Glassmorphic ticket cards, glowing interactive buttons, and high-contrast typography.
Sections, in order:
1. Top Marquee Ribbon: continuous subtle ticker "✦ 18-20 November 2026 · Palace Grounds, Bengaluru · In-Person & Global Livestream ✦".
2. Navbar: futuristic event logo, links ("Speakers", "Agenda", "Hackathon", "Sponsors", "Venue"), and "Get Tickets" gradient button.
3. Hero: centered layout.
- Badge: "✦ Asia's Largest Developer & AI Architecture Summit".
- Headline: "Build the future of intelligence with 5,000+ engineers".
- Subtitle: "3 days of deep-dive keynotes, production architecture breakdowns, hands-on workshops, and a $50,000 hackathon."
- Live Countdown Timer: countdown cards showing Days, Hours, Minutes, and Seconds until the keynote kicks off.
- Dual CTAs: "Grab Early Bird Ticket →" and "View 60+ Speaker Lineup".
4. Headline Keynote Speakers: 6 speaker cards with high-contrast portraits, speaker name, role (e.g., VP of AI @ Anthropic, Chief Architect @ Vercel), and keynote title (e.g., "Autonomous Multi-Agent Swarms in Production").
5. Interactive Multi-Track Agenda: tabbed daily schedule (Day 1: AI & LLMs, Day 2: Scalable Cloud Architecture, Day 3: Hackathon Demo Day) showing time slots, session title, speaker, and stage room badge.
6. The $50,000 Hackathon: breakdown of prize bounties across 4 tracks: Autonomous AI Agents ($20k), Decentralized Infrastructure ($15k), Developer Productivity ($10k), and Student Innovator ($5k).
7. Ticket Pricing Passes: 3 tiers: 1) Virtual Access ($49 / ₹3,999 with 4K livestream), 2) In-Person Standard ($199 / ₹14,999 with conference kit & lunch), 3) VIP All-Access ($399 / ₹29,999 with Speaker Dinner & Workshop Pass).
8. Past Event Numbers: 4 stats: "5,400+ Attendees", "62 Global Keynotes", "120+ Venture Pitch Meetings", "99% Recommendation Score".
9. Sponsors & Partners: logo grid categorized into Titanium, Platinum, and Community Hackathon Partners.
10. Venue & Travel: interactive venue map placeholder, local hotel discounts, and public transit guide.
11. Footer: Code of Conduct, Student Scholarship Application, press kit download, and copyright.
Quality bar:
- Fully responsive: design mobile-first, then tablet (768px) and desktop (1200px).
- Accessible: semantic HTML landmarks, one h1, alt text on images, visible keyboard focus, colour contrast of at least 4.5:1 for body text.
- Fast: no heavy libraries, lazy-load images below the fold, system or two web fonts at most.
- Use placeholder images from a neutral source and realistic sample copy (no lorem ipsum).
- Respect prefers-reduced-motion for every animation.
- Keep the code clean and commented so I can edit it by hand.How to use this prompt
- 1
Open an AI coding tool. Use any capable assistant: Claude, ChatGPT, Cursor, v0, Bolt, Gemini. Tools that can create files (Cursor, Claude Code, v0, Bolt) are the most convenient because they write the project for you.
- 2
Replace the sample details. Copy the prompt and change the business name, location, colours and any section you do not need. The more specific your details, the better the result.
- 3
Paste the prompt and generate. Send the whole prompt in one message. If the reply is cut off, say “continue from where you stopped”, or ask for one section at a time.
- 4
Run it on your computer. Create a project with “npx create-next-app@latest”, add the generated files, then run “npm run dev” and open http://localhost:3000.
- 5
Review and refine. Check it on a phone-width screen, fix anything that looks off by describing it in plain words, then use the follow-up prompts below to add features one at a time.
- 6
Replace placeholders and publish. Swap in your real text and images, then deploy. Vercel and Netlify both host this kind of site for free.
Follow-up prompts
Send these one at a time after the first version is working. Small, specific requests give much better results than one giant prompt.
Add interactive tab switching for the 3 conference tracks.
Add live ticket checkout modal with quantity selector and promo code field.
Add Speaker bio detail drawer modal with full abstract description.
Add Event and EventAttendanceModeSchema JSON-LD structured data.
Tips for a better result
- Highlight speaker credentials and recognizable company names to drive early pass registrations.
- Keep ticket tier perks clear and visually distinct with checkmarks.
- Want to hand-build a section instead? The Templates library has heroes, pricing tables, FAQs and more with full code.
