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 withpage.tsxas 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/fontto 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 installandnpm run dev, then editapp/page.tsxto 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.
