Kozmos Beach & More
"Denizin Ormana Kıyısında" / "Where the Sea Meets the Forest"
Kozmos Beach & More is a modern, responsive, and bilingual (Turkish & English) corporate website built with Next.js 16 (App Router). It features a mobile-first design, a seamless single-page scrolling experience, and dedicated pages like Accommodation, all wrapped in a boho-chic, Aegean-inspired aesthetic.
Features
- Next.js 16 (App Router): Fast, SEO-friendly, and modern architecture.
- i18n Support: Fully bilingual (TR/EN) using
next-intl. - Styling: Tailwind CSS v4 with custom gradients, colors, and an elegant typography system (Marcellus).
- Animations: Smooth micro-interactions and scroll animations powered by
framer-motion. - Responsive Design: Mobile-first approach, ensuring a flawless experience across all devices.
- Lightbox Gallery: Custom-built image gallery with a full-screen lightbox feature.
- PWA & SEO Ready: Pre-configured
manifest.ts,robots.ts,sitemap.ts, and metadata.
Tech Stack
- Framework: Next.js
- Language: TypeScript
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Icons: Lucide React
- Internationalization: next-intl
Environment Variables
To run the project locally, create a .env.local file with the following variables:
# Contact number for WhatsApp reservation buttons
NEXT_PUBLIC_WHATSAPP_NUMBER="905000000000"
# URL for the QR menu (if applicable)
NEXT_PUBLIC_MENU_URL="https://qr.kozmosbeach.com"
Getting Started
-
Install dependencies:
npm install -
Run the development server:
npm run dev -
Build for production:
npm run build npm run start
Development Commands
npm run dev: Starts the development server.npm run build: Builds the app for production.npm run start: Runs the built app in production mode.npm run lint: Runs ESLint.
Created by ayris.tech