66 lines
2.2 KiB
Markdown
66 lines
2.2 KiB
Markdown
# 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](https://nextjs.org/)
|
||
- **Language:** [TypeScript](https://www.typescriptlang.org/)
|
||
- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/)
|
||
- **Animations:** [Framer Motion](https://www.framer.com/motion/)
|
||
- **Icons:** [Lucide React](https://lucide.dev/)
|
||
- **Internationalization:** [next-intl](https://next-intl-docs.vercel.app/)
|
||
|
||
## Environment Variables
|
||
|
||
To run the project locally, create a `.env.local` file with the following variables:
|
||
|
||
```env
|
||
# 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
|
||
|
||
1. **Install dependencies:**
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
2. **Run the development server:**
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
3. **Build for production:**
|
||
```bash
|
||
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](https://ayris.tech)*
|