Whirl — Landing

About

A modern, responsive landing page built with Nuxt 4, Vue 3, and Tailwind CSS.

🚀 Live Demo

Features

• 📱 Fully responsive landing page grid.
• ⚡ Fast performance powered by Nuxt Image & Tailwind.

Requirements

• Node.js >= 22
• pnpm >= 11

Installation

git clone https://github.com/daisy40/whirl
cd whirl
pnpm install

Scripts

pnpm dev      # Start the development server
pnpm build    # Build for production
pnpm preview  # Preview the production build

Run pnpm dev and open http://localhost:3000 in your browser.

Project Structure

This project follows the official Nuxt 4 directory layout, where application code lives inside the app/ directory:

.
├── app/
│   ├── assets/
│   │   ├── css/                          # Global styles
│   │   └── icons/                        # SVG icons
│   ├── layouts/                          # Application layouts
│   ├── pages/                            # File-based routes
│   ├── components/
│   │   ├── ui/                           # Reusable UI components
│   │   ├── section/                      # Landing page sections
│   │   └── shared/                       # Shared layout components
│   └── app.vue                           # Root application component
│
├── public/
│   ├── img/                              # Static images
│   ├── favicon.ico
│   └── robots.txt
│
├── nuxt.config.ts                        # # Nuxt configuration
├── package.json
└── tsconfig.json

Credits

• Design: Whirl — Figma