Cursor Cafe Toronto Promo

A mobile-first Next.js application showcasing the Cursor Cafe Toronto card design.

Tech Stack

• Framework: Next.js 14
• UI Library: React 18
• Styling: Tailwind CSS
• Language: TypeScript

Getting Started

Installation

npm install

Development Server

npm run dev

Open http://localhost:3000 with your browser to see the result.

Build for Production

npm run build
npm start

Features

• 🎨 Pixel-perfect implementation from Figma design
• 📱 Mobile-first responsive design
• 🌓 Dark mode support
• ⚡ Next.js Image optimization
• 🎯 TypeScript for type safety
• 💨 Tailwind CSS for styling

Project Structure

├── app/
│   ├── globals.css       # Global styles with Tailwind
│   ├── layout.tsx        # Root layout component
│   └── page.tsx          # Home page with card grid
├── components/
│   └── CursorCard.tsx    # Card component from Figma
├── public/
│   └── assets/           # Image assets from Figma
└── ...config files

Design

The card design is imported from Figma and features:

• Dark background (#14120b)
• 30px border radius
• Centered hexagonal logo with Toronto cityscape
• Responsive sizing with proper aspect ratio