Vision Hack 2026 - Landing Page Specification

1. Project Scope

This is a high-performance Static Website serving as the information portal.

• No Database connection.
• No Authentication logic.
• Goal: speed, visuals, and mobile responsiveness.

2. Tech Stack

• Framework: Next.js (configured for output: 'export') or Vite
• Styling: Tailwind CSS.
• Hosting: Cloudflare Pages.
• Animation: Framer Motion (for "vibe").

3. Data Management (The "CMS")

Since we don't have a backend, store content in local JSON files (src/data/). This allows non-coders to update text easily.

• themes.json: List of hackathon themes.
• timeline.json: Event schedule.
• committee.json: Names and photos of organizers.

4. Page Sections (Single Page Scroll preferred)

4.1 Hero Section

• Content: Event Name, Dates, "Register Now" Button.
• Action: The "Register" button must link externally to https://portal.visionhack.com/login.

[cite_start]4.2 About & Stats [cite: 22, 20]

• Stats Grid: 250 Colleges, 1250 Teams, 3 Stages.
• Text: Explanation of the multi-stage process.

[cite_start]4.3 Gallery [cite: 28]

• Layout: CSS Grid (Masonry style).
• Source: Images stored in public/gallery/.

[cite_start]4.4 Themes [cite: 37]

• Display: Card layout.
• Data: Title, Description, Problem Focus Area.

[cite_start]4.5 Video Section [cite: 32]

• Tech: iframe embed from YouTube (Lite-YouTube-Embed recommended for performance).
• Content: Explainer on "How to Register".

[cite_start]4.6 Event Flow [cite: 45]

• Visual: Vertical or Horizontal Timeline component.
• Steps: Announcement -> Registration -> Nomination -> Semifinal -> Final.

[cite_start]4.7 Footer [cite: 61]

• Links: Contact Email, Instagram Icon, "Login for Colleges".

5. Deployment Config

• Create a next.config.js with:

  const nextConfig = {
    output: 'export',
    images: { unoptimized: true } // Required for static export
  };