Hackathon Landing Page

The Hackathon Landing Page is a Next.js single-page template for promoting pre-hackathon events, built with the App Router, TypeScript, and Tailwind CSS, and styled with shadcn/ui components.

What is the Hackathon Landing Page?

This template is a front-end website project bootstrapped with create-next-app, designed as the pre-hackathon landing page for Getlinked. It runs on Next.js, a React framework, and takes content like event schedules, registration links, and prize information to render a marketing page with scroll-triggered animations. The template is written in TypeScript and uses the Next.js App Router (app/page.tsx), with automatic font optimization for the Inter Google Font via next/font. It is open source and hosted on GitHub.

Key Features

This Next.js template ships with a practical toolchain and several animation libraries out of the box. Here are the concrete components and integrations:

• Next.js App Router — Uses the app/ directory with page.tsx as the entry point; hot-reloads on save for instant development feedback.
• TypeScript — The entire project is typed with TypeScript, improving maintainability and catching errors at compile time.
• Tailwind CSS — Utility-first styling makes responsive layout adjustments fast without leaving markup.
• shadcn/ui components — Pre-built accessible components (buttons, cards, dialogs) are copied into the project, so there is no external runtime dependency.
• AOS animations — Animate On Scroll library adds scroll-triggered fade, slide, and zoom effects to landing sections.
• typewriter-effect — A React component that cycles through rotating text, useful for keywords like "register," "learn," "network."
• Inter font optimization — Uses next/font to automatically self-host and load the Inter custom Google Font, avoiding layout shift.
• Startup scripts — Dev, build, and start commands for npm, yarn, pnpm, and bun.

Who should use the Hackathon Landing Page?

This template is aimed at anyone organizing or promoting a hackathon or tech event who wants a polished online presence without hiring a frontend developer. Specific users include:

• Hackathon organizers — put together a pre-event page announcing dates, prizes, and registration.
• Event promoters — use the animated hero and typewriter effect to draw attention to early-bird deadlines.
• Student tech clubs — create a modern event site without building from scratch; customize the copy and links in app/page.tsx.

What can you do with it?

The template is a complete starting point for an event site; these are the main ways to use it:

• Launch a pre-hackathon page quickly — clone the repository, run npm install and npm run dev, then edit app/page.tsx to replace placeholder content with event details.
• Customize the design system — modify Tailwind configuration and shadcn/ui theme tokens to match an event's brand colors.
• Deploy to Vercel — connect the GitHub repository to Vercel for zero-configuration hosting and automatic CI/CD.

FAQ

How do I start the development server?

Run npm run dev, yarn dev, pnpm dev, or bun dev in the project root, then open http://localhost:3000.

What file should I edit to change the landing page content?

The main page is app/page.tsx; the page auto-updates as you edit.

Does this template include Tailwind CSS?

Yes, the repository metadata lists Tailwind CSS as a topic, and styling is built with utility classes.