A modern, responsive e-commerce landing page for submarine-themed hats built with Next.js, Tailwind CSS, and Lucide-React.
- 🎨 Clean-tech design with dark blue (#001f3f) accents
- 📱 Fully responsive layout
- 🛍️ Product grid with 5 submarine-themed hats
- ♿ Semantic HTML for easy web scraping
- 🔍 SEO-friendly with metadata
- 📦 Ready for Vercel deployment
- The Deep Diver - Beanie ($29.99)
- The Periscope - Trucker Hat ($34.99)
- The Nautical 19 - Dad Hat ($27.99)
- The Stealth - Snapback ($32.99)
- The Yellow Sub - Bucket Hat ($31.99)
npm installnpm run devOpen http://localhost:3000 with your browser to see the result.
git init
git add .
git commit -m "Initial commit: Subvise landing page"git remote add origin https://github.com/yourusername/subvise.git
git branch -M main
git push -u origin main- Go to vercel.com
- Click "New Project"
- Import your GitHub repository
- Vercel will auto-detect Next.js and configure build settings
- Click "Deploy"
To add a meta verification tag (e.g., for Google Search Console), open app/layout.tsx and add your tag below the comment:
<head>
{/* Insert meta verification tag below this line */}
<meta name="google-site-verification" content="your-verification-code" />
</head>subvise/
├── app/
│ ├── layout.tsx # Root layout with metadata placeholder
│ ├── page.tsx # Main landing page component
│ └── globals.css # Tailwind CSS imports
├── public/ # Static assets
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.js
- Next.js 14 - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Lucide-React - Icons
MIT