🌐 Live Demo  •  ⚙️ Getting Started  •  📁 Structure  •  🛠 Tech Stack

---

🎯 Overview

Built under a 2-hour hard deadline — from npx create-next-app to live Vercel deployment.

PW 2-Hour Hackathon is a visually striking Next.js 14 landing page that pushes what's possible in a tight sprint. It features a spatial 3D-inspired product showcase with layered card depth and smooth hover micro-interactions, paired with a frosted-glass pricing section that makes the UI feel modern, premium, and alive.

No heavy backend. No CMS. Just clean, intentional front-end code shipped fast.

---

✨ Features

Feature	Details
🧊 Glassmorphism Pricing	Frosted glass panels, blurred backgrounds, soft gradients & shadows
🌌 Spatial Product Layout	Layered 3D-inspired cards with depth, scale & hover transitions
📱 Fully Responsive	Fluid layout across desktop, tablet & mobile
⚡ Next.js App Router	File-based routing, RSC, fast page loads
🎨 Micro-interactions	Animated buttons, CTA elements & card hover effects
🚀 Vercel Deployed	CI/CD via Vercel — push to main = instant deploy

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript 5
Styling	CSS Modules + Global CSS
Deployment	Vercel
Package Manager	npm / yarn / pnpm / bun

---

⚙️ Getting Started

Prerequisites

• Node.js v18+
• npm / yarn / pnpm / bun

Installation

# 1. Clone the repository
git clone https://github.com/Uttkarshchambiyal/pw-2hr-hackathon.git
cd pw-2hr-hackathon

# 2. Install dependencies
npm install
# or
yarn install

# 3. Start the development server
npm run dev

Open http://localhost:3000 in your browser. Hot reload is enabled by default.

---

📁 Project Structure

pw-2hr-hackathon/
├── public/                  # Static assets (images, icons, favicons)
├── src/
│   └── app/                 # Next.js App Router
│       ├── layout.tsx        # Root layout & metadata
│       ├── page.tsx          # Main landing page
│       └── globals.css       # Global styles & CSS variables
├── .gitignore
├── next.config.ts
├── package.json
├── tsconfig.json
└── README.md

---

🚀 Deployment

This project is deployed on Vercel using the official Next.js integration.

Push to main → Vercel detects change → Build & Deploy → Live in ~30s

🔗 Production URL: https://pw-2hr-hackathon.vercel.app/

To deploy your own fork:

1. Fork this repository
2. Go to vercel.com/new
3. Import your forked repo
4. Click Deploy — done!

---

🧠 Challenges & Learnings

• ⏱️ Hard 2-hour constraint from init to production deployment — forced ruthless prioritisation
• 🎨 Designing glassmorphism purely in CSS without any UI library
• 🌌 Crafting a spatial depth illusion using transforms, z-index, and box-shadow layers
• ⚡ Leveraging Next.js App Router for clean, scalable structure even in a sprint

---

📣 Contributing

PRs and issues are always welcome! If you have ideas for animations, layout improvements, or new sections:

1. Fork the repo
2. Create your feature branch: git checkout -b feat/amazing-idea
3. Commit your changes: git commit -m 'feat: add amazing idea'
4. Push to the branch: git push origin feat/amazing-idea
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License — feel free to use, modify and distribute.

---

Built with ❤️ by Uttkarsh Chambiyal

⭐ Star this repo if you found it helpful!