diff --git a/.superpowers/brainstorm/14699-1780449149/content/review.html b/.superpowers/brainstorm/14699-1780449149/content/review.html new file mode 100644 index 0000000..a876cbc --- /dev/null +++ b/.superpowers/brainstorm/14699-1780449149/content/review.html @@ -0,0 +1,550 @@ + + + + + + Luna — Tasarım İncelemesi + + + + +

Luna Cocktail & More — Tasarım İncelemesi

+

Mevcut tasarım güçlü. Üç noktada rafine edilebilir.

+ + +
✓ Güçlü Yönler
+
+
+
🎨
+

Renk Sistemi

+

Amber (#C8853A) + mercan (#E85D3A) + derin siyah üçlüsü tutarlı ve marka kimliğiyle örtüşüyor.

+
+
+
🔤
+

Tipografi

+

Inter + Playfair Display çifti mükemmel. Serif başlıklar, sans body — klasik lüks his.

+
+
+
✨
+

Animasyonlar

+

Framer Motion scroll-triggered reveal'lar doğal ve performanslı. Gecikmeler (stagger) iyi ayarlanmış.

+
+
+
📐
+

Layout Yapısı

+

Navbar merkezi logo / iki yanda linkler düzeni özgün. Galeri grid'i edge-to-edge ve dinamik.

+
+
+
📱
+

Responsive

+

Mobile menu animasyonlu, card grid'ler breakpoint'lerde sağlıklı — temel responsive iyi kurulmuş.

+
+
+
🧩
+

Bileşen Ayrımı

+

Her section kendi component'ı. globals.css CSS token'ları Tailwind v4 @theme ile doğru kullanılmış.

+
+
+ + +
① Hero Section — Şu an vs. Öneri
+
+ +
+
Şu an
+
+
Muğla'nın En Özel Terası
+
From Sunset
to Night
+
Rezervasyon Yap / Book Now
+
+
+ +
+
● MagicUI — Meteors + Shimmer Badge
+
+ + + + + + + +
+ Muğla'nın En Özel Terası +
+
+ +
From Sunset
to Night
+
Rezervasyon Yap / Book Now
+
+
+
+ + +
② Event / Cocktail Cards — Şu an vs. Öneri
+
+ +
+
Şu an — Hover: sadece border renk değişimi
+
+
+
+ +
Canlı Konser Gecesi
+
12 Temmuz · 21:30
+
+
+ +
Sunset DJ Party
+
14 Temmuz · 18:00
+
+
+
+
+ +
+
● MagicUI — Mouse-tracking spotlight glow
+
+
+
+ +
Canlı Konser Gecesi
+
12 Temmuz · 21:30
+
+
+ +
Sunset DJ Party
+
14 Temmuz · 18:00
+
+
+
+
+
+ + +
Önerilen 3 Geliştirme
+
+ +
+
1
+
+

Meteors — Hero Arkaplanı

+

Hero section'ın arkaplanına seyrek ama etkili bir "falling stars" (akan yıldız) efekti. Yeni dependency yok — pure CSS @keyframes + React useEffect. Luna'nın "sunset to night" temasıyla mükemmel örtüşüyor.

+
MagicUI · Meteors
+
+
+ +
+
2
+
+

Shimmer Badge — Hero Alt Başlığı

+

"Muğla'nın En Özel Terası" yazısını düz text'ten ince border'lı pill badge'e dönüştür + ışık süpürme animasyonu ekle. MagicUI'ın AnimatedShinyText pattern'ı. Premium feel'ı artırıyor.

+
MagicUI · AnimatedShinyText
+
+
+ +
+
3
+
+

MagicCard Glow — Etkinlik & Kokteyl Kartları

+

Mouse pozisyonunu takip eden radial gradient spotlight efekti. Hover'da kart içinde amber ışık "mouse ile birlikte hareket eder." MagicUI'ın signature Magic Card pattern'ı — mevcut hover animasyonlarını değiştirmez, üstüne ekler.

+
MagicUI · MagicCard
+
+
+ +
+ +

+ Üç geliştirme de yeni paket gerektirmiyor — mevcut Framer Motion + Tailwind v4 ile uygulanıyor.
+ Onaylıyorsan direkt uygulayabilirim. +

+ + + diff --git a/.superpowers/brainstorm/14699-1780449149/state/server-info b/.superpowers/brainstorm/14699-1780449149/state/server-info new file mode 100644 index 0000000..d11ff2b --- /dev/null +++ b/.superpowers/brainstorm/14699-1780449149/state/server-info @@ -0,0 +1 @@ +{"type":"server-started","port":62562,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:62562","screen_dir":"/Users/mstfyldz/Github/lunaweb/.superpowers/brainstorm/14699-1780449149/content","state_dir":"/Users/mstfyldz/Github/lunaweb/.superpowers/brainstorm/14699-1780449149/state"} diff --git a/.superpowers/brainstorm/14699-1780449149/state/server.log b/.superpowers/brainstorm/14699-1780449149/state/server.log new file mode 100644 index 0000000..396205f --- /dev/null +++ b/.superpowers/brainstorm/14699-1780449149/state/server.log @@ -0,0 +1,2 @@ +{"type":"server-started","port":62562,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:62562","screen_dir":"/Users/mstfyldz/Github/lunaweb/.superpowers/brainstorm/14699-1780449149/content","state_dir":"/Users/mstfyldz/Github/lunaweb/.superpowers/brainstorm/14699-1780449149/state"} +{"type":"screen-added","file":"/Users/mstfyldz/Github/lunaweb/.superpowers/brainstorm/14699-1780449149/content/review.html"} diff --git a/.superpowers/brainstorm/14699-1780449149/state/server.pid b/.superpowers/brainstorm/14699-1780449149/state/server.pid new file mode 100644 index 0000000..7eb411e --- /dev/null +++ b/.superpowers/brainstorm/14699-1780449149/state/server.pid @@ -0,0 +1 @@ +14708 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..94946cd --- /dev/null +++ b/Dockerfile @@ -0,0 +1,53 @@ +# 1. Base image +FROM node:20-alpine AS base + +# 2. Dependencies +FROM base AS deps +RUN apk add --no-cache libc6-compat +WORKDIR /app + +# Install dependencies +COPY package.json package-lock.json* ./ +RUN npm ci --legacy-peer-deps + + +# 3. Builder +FROM base AS builder +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +COPY . . + +# Environment variables must be present at build time for Next.js +ENV NEXT_TELEMETRY_DISABLED=1 + +RUN npm run build + +# 4. Runner +FROM base AS runner +WORKDIR /app + +ENV NODE_ENV=production +ENV NEXT_TELEMETRY_DISABLED=1 + +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +COPY --from=builder /app/public ./public + +# Set the correct permission for prerender cache +RUN mkdir .next +RUN chown nextjs:nodejs .next + +# Automatically leverage output traces to reduce image size +COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ +COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static + +USER nextjs + +EXPOSE 3000 + +ENV PORT=3000 +ENV HOSTNAME="0.0.0.0" + +# Start the server +CMD ["node", "server.js"] diff --git a/README.md b/README.md index e215bc4..177296f 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,50 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# 🌙 Luna Cocktail & More — Website -## Getting Started +Luna Cocktail & More, Muğla'da faaliyet gösteren premium bir kokteyl barı ve etkinlik mekanıdır. "Luxury Dark & Warm" konsepti etrafında tasarlanan bu Next.js projesi, mekanın "Sunset to Night" (Gün batımından geceye) ruhunu yansıtan modern, sinematik ve premium bir web deneyimi sunar. -First, run the development server: +## Özellikler + +- **Modern ve Lüks Tasarım:** Tailwind CSS v4 kullanılarak hazırlanan özel renk paleti (`#0A0A0A` zemin, `#C8853A` ve `#E85D3A` vurgular). +- **Akıcı Animasyonlar:** Framer Motion ile tasarlanan "scroll" bazlı sinematik geçişler, parallax efektleri ve fade-in animasyonları. +- **Kapsamlı İçerik Yönetimi:** Etkinlik takvimi, imza kokteyller menüsü ve özel konsept gecelerin (Soul Club, Latin Geceleri vb.) gösterimi. +- **Dinamik Galeri:** Mekan atmosferini aktaran Masonry grid yerleşimli fotoğraf galerisi. +- **Responsive (Mobil Uyumluluk):** Mobile-first tasarım yaklaşımı sayesinde tüm cihazlarda kusursuz görünüm. + +## Teknoloji Yığını (Tech Stack) + +- **Framework:** [Next.js 16](https://nextjs.org/) (App Router) +- **Kütüphane:** [React 19](https://react.dev/) +- **Stil & Tasarım:** [Tailwind CSS v4](https://tailwindcss.com/) +- **Animasyon:** [Framer Motion](https://www.framer.com/motion/) +- **İkonlar:** [Lucide React](https://lucide.dev/) + +## Kurulum ve Çalıştırma + +Projeyi yerel ortamınızda çalıştırmak için aşağıdaki adımları izleyebilirsiniz. + +1. Bağımlılıkları yükleyin: + ```bash + npm install + ``` + +2. Geliştirme sunucusunu başlatın: + ```bash + npm run dev + ``` + +3. Tarayıcınızda [http://localhost:3000](http://localhost:3000) adresini açarak siteyi görüntüleyin. + +## Docker ile Çalıştırma (Standalone Mode) + +Bu proje Next.js'in "standalone" (bağımsız) derleme modu kullanılarak optimize edilmiştir ve doğrudan Docker ile çalıştırılabilir. ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +# Docker imajını oluşturun +docker build -t lunaweb . + +# Konteyneri başlatın +docker run -p 3000:3000 lunaweb ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +--- +*Geliştirici:* [Ayris Tech](https://ayris.tech) diff --git a/app/globals.css b/app/globals.css index a2dc41e..4aa6636 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,32 @@ @import "tailwindcss"; -:root { - --background: #ffffff; - --foreground: #171717; +@keyframes meteor { + 0% { transform: rotate(215deg) translateX(0); opacity: 1; } + 70% { opacity: 1; } + 100% { transform: rotate(215deg) translateX(-500px); opacity: 0; } } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); +@keyframes shimmer-slide { + from { transform: translateX(-150%); } + to { transform: translateX(250%); } } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } +@theme { + --color-primary: #0A0A0A; + --color-accent1: #C8853A; + --color-accent2: #E85D3A; + --color-accent3: #3B4FA6; + --color-text-main: #F5F0E8; + + --font-sans: var(--font-inter), sans-serif; + --font-serif: var(--font-playfair), serif; + + --animate-meteor: meteor 5s linear infinite; + --animate-shimmer-slide: shimmer-slide 2.5s ease-in-out infinite; } body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + background-color: var(--color-primary); + color: var(--color-text-main); + @apply font-sans; } diff --git a/app/layout.tsx b/app/layout.tsx index 976eb90..2ea83c7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,20 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Inter, Playfair_Display } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const inter = Inter({ + variable: "--font-inter", subsets: ["latin"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const playfair = Playfair_Display({ + variable: "--font-playfair", subsets: ["latin"], }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Luna Cocktail & More", + description: "Luxury Cocktail Bar in Muğla - From Sunset to Night", }; export default function RootLayout({ @@ -24,10 +24,10 @@ export default function RootLayout({ }>) { return ( - {children} + {children} ); } diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..c760aff 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,21 @@ -import Image from "next/image"; +import Navbar from "@/components/Navbar"; +import Hero from "@/components/Hero"; +import About from "@/components/About"; +import Events from "@/components/Events"; +import Cocktails from "@/components/Cocktails"; +import Gallery from "@/components/Gallery"; +import Footer from "@/components/Footer"; export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
+
+ + + + + + +
); } diff --git a/components/About.tsx b/components/About.tsx new file mode 100644 index 0000000..189ba45 --- /dev/null +++ b/components/About.tsx @@ -0,0 +1,61 @@ +"use client"; + +import { motion } from "framer-motion"; + +export default function About() { + return ( +
+
+ + +
+
+ Luna Cocktail Vibe +
+ + + +

+ Luna is not just a bar.
+ It's a lifestyle. +

+ +
+ +

+ Muğla'nın kalbinde, rooftop konseptiyle premium bir kaçış noktası. + Golden hour esnasında eşsiz kokteyl deneyimiyle başlayan hikayemiz, + gecenin ilerleyen saatlerinde canlı müzik ve DJ performanslarıyla ritmini artırıyor. +

+ +

+ Karanlık ama sıcak, lüks ama erişilebilir atmosferimizde; imza kokteyllerimiz, + Soul Club ve Latin Geceleri gibi özel konseptlerimizle + kendinizi müziğin ve lezzetin akışına bırakın. +

+ +

+ "Nights like these, only at Luna." +

+ + +
+
+ ); +} diff --git a/components/Cocktails.tsx b/components/Cocktails.tsx new file mode 100644 index 0000000..6d4df94 --- /dev/null +++ b/components/Cocktails.tsx @@ -0,0 +1,101 @@ +"use client"; + +import { motion } from "framer-motion"; +import { MagicCard } from "@/components/ui/MagicCard"; + +const cocktails = [ + { + id: 1, + name: "Luna Sunset", + description: "Tequila, Mezcal, Passion Fruit, Chili, Lime", + price: "450 ₺", + image: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=80&w=1974&auto=format&fit=crop" + }, + { + id: 2, + name: "Midnight Velvet", + description: "Bourbon, Blackberry, Vermouth, Angostura", + price: "480 ₺", + image: "https://images.unsplash.com/photo-1536935338788-846bb9981813?q=80&w=2069&auto=format&fit=crop" + }, + { + id: 3, + name: "Golden Hour", + description: "Gin, Elderflower, Prosecco, Gold Dust", + price: "420 ₺", + image: "https://images.unsplash.com/photo-1551024709-8f23befc6f87?q=80&w=2157&auto=format&fit=crop" + } +]; + +export default function Cocktails() { + return ( +
+
+ +
+ + İmza Kokteyller + + +
+ +
+ {cocktails.map((cocktail, index) => ( + + +
+ {cocktail.name} +
+
+
+

{cocktail.name}

+

{cocktail.description}

+
+ {cocktail.price} +
+ + + ))} +
+ + + + Tüm Menüyü İncele + + + +
+
+ ); +} diff --git a/components/Events.tsx b/components/Events.tsx new file mode 100644 index 0000000..9612de0 --- /dev/null +++ b/components/Events.tsx @@ -0,0 +1,115 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Calendar, Clock } from "lucide-react"; +import { MagicCard } from "@/components/ui/MagicCard"; + +const events = [ + { + id: 1, + title: "Canlı Konser Gecesi", + artist: "Evrencan Gündüz & Uzaylılar", + date: "12 Temmuz Cuma", + time: "21:30 - 02:00", + category: "Live Music", + image: "https://images.unsplash.com/photo-1540039155732-680e7c58ed8a?q=80&w=2070&auto=format&fit=crop" + }, + { + id: 2, + title: "Sunset DJ Party", + artist: "DJ Soul", + date: "14 Temmuz Pazar", + time: "18:00 - 23:00", + category: "Sunset", + image: "https://images.unsplash.com/photo-1571266028243-3716f02d2d2e?q=80&w=2070&auto=format&fit=crop" + }, + { + id: 3, + title: "Latin Gecesi", + artist: "Havana Vibes", + date: "20 Temmuz Cumartesi", + time: "22:00 - 03:00", + category: "Dance", + image: "https://images.unsplash.com/photo-1508215885820-4585e5610924?q=80&w=2058&auto=format&fit=crop" + } +]; + +export default function Events() { + return ( +
+
+ +
+ +

Yaklaşan Etkinlikler

+

No talk, just music. Geceye yön veren performanslar.

+ + + Tüm Programı Gör + +
+ +
+ {events.map((event, index) => ( + + +
+
+ {event.title} +
+ {event.category} +
+
+ +
+

{event.title}

+

{event.artist}

+ +
+
+ + {event.date} +
+
+ + {event.time} +
+
+ + + Rezervasyon + +
+ + + ))} +
+
+
+ ); +} diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..0d173ea --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,124 @@ +"use client"; + +import { motion } from "framer-motion"; +import { MapPin, Phone } from "lucide-react"; + +export default function Footer() { + return ( + + ); +} diff --git a/components/Gallery.tsx b/components/Gallery.tsx new file mode 100644 index 0000000..12f2307 --- /dev/null +++ b/components/Gallery.tsx @@ -0,0 +1,38 @@ +"use client"; + +import { motion } from "framer-motion"; + +const photos = [ + { id: 1, src: "https://images.unsplash.com/photo-1566417713940-fe7c737a9ef2?q=80&w=2029&auto=format&fit=crop", style: "md:col-span-2 md:row-span-2" }, + { id: 2, src: "https://images.unsplash.com/photo-1542556398-4432b571ebf1?q=80&w=2070&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" }, + { id: 3, src: "https://images.unsplash.com/photo-1470229722913-7c092bb21443?q=80&w=1968&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" }, + { id: 4, src: "https://images.unsplash.com/photo-1525268771113-32d9e9021a97?q=80&w=2080&auto=format&fit=crop", style: "md:col-span-1 md:row-span-2" }, + { id: 5, src: "https://images.unsplash.com/photo-1514361892635-6b07e31e75f9?q=80&w=2070&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" }, + { id: 6, src: "https://images.unsplash.com/photo-1485872299829-c673f5194813?q=80&w=2054&auto=format&fit=crop", style: "md:col-span-1 md:row-span-1" } +]; + +export default function Gallery() { + return ( + + ); +} diff --git a/components/Hero.tsx b/components/Hero.tsx new file mode 100644 index 0000000..aa1d093 --- /dev/null +++ b/components/Hero.tsx @@ -0,0 +1,83 @@ +"use client"; + +import { motion } from "framer-motion"; +import { Meteors } from "@/components/ui/Meteors"; + +export default function Hero() { + return ( +
+ {/* Background Image / Video overlay */} +
+
+
+ Luna Cocktail Rooftop Vibe +
+ +
+
+ +
+ +
+ + Muğla'nın En Özel Terası + + +
+ + + + From Sunset
+ to Night + + + + Güneş ufukta kaybolurken müzik yükseliyor, kokteyller doluyor ve gece yeni başlıyor. + + + + + Rezervasyon Yap / Book Now + + +
+ + {/* Scroll Indicator */} + + Scroll +
+ +
+ ); +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..3cdd53e --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,113 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { Menu, X } from "lucide-react"; +import { motion, AnimatePresence } from "framer-motion"; + +export default function Navbar() { + const [isScrolled, setIsScrolled] = useState(false); + const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsScrolled(window.scrollY > 50); + }; + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const navLinks = [ + { name: "Hakkımızda", href: "#about" }, + { name: "Etkinlikler", href: "#events" }, + { name: "Kokteyller", href: "#cocktails" }, + { name: "Galeri", href: "#gallery" }, + { name: "Rezervasyon", href: "#contact" }, + ]; + + return ( + + ); +} diff --git a/components/ui/MagicCard.tsx b/components/ui/MagicCard.tsx new file mode 100644 index 0000000..4767e13 --- /dev/null +++ b/components/ui/MagicCard.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { useCallback, useRef, useState } from "react"; + +interface MagicCardProps { + children: React.ReactNode; + className?: string; +} + +export function MagicCard({ children, className = "" }: MagicCardProps) { + const ref = useRef(null); + const [pos, setPos] = useState({ x: -999, y: -999 }); + const [hovered, setHovered] = useState(false); + + const onMouseMove = useCallback((e: React.MouseEvent) => { + if (!ref.current) return; + const rect = ref.current.getBoundingClientRect(); + setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); + }, []); + + return ( +
setHovered(true)} + onMouseLeave={() => { setHovered(false); setPos({ x: -999, y: -999 }); }} + className={className} + > + {children} +
+
+ ); +} diff --git a/components/ui/Meteors.tsx b/components/ui/Meteors.tsx new file mode 100644 index 0000000..3b8f16a --- /dev/null +++ b/components/ui/Meteors.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { useEffect, useState } from "react"; + +interface MeteorItem { + id: number; + left: string; + delay: string; + duration: string; +} + +export function Meteors({ number = 15 }: { number?: number }) { + const [items, setItems] = useState([]); + + useEffect(() => { + setItems( + Array.from({ length: number }, (_, i) => ({ + id: i, + left: `${Math.random() * 100}%`, + delay: `${(Math.random() * 3).toFixed(2)}s`, + duration: `${(Math.random() * 6 + 4).toFixed(1)}s`, + })) + ); + }, [number]); + + return ( + <> + {items.map((m) => ( + + + + ))} + + ); +} diff --git a/docs/luna-cocktail-website-prompt.md b/docs/luna-cocktail-website-prompt.md new file mode 100644 index 0000000..c721fd9 --- /dev/null +++ b/docs/luna-cocktail-website-prompt.md @@ -0,0 +1,142 @@ +# 🌙 Luna Cocktail & More — Website Tasarım Promptu + +--- + +## Proje Özeti + +**Marka Adı:** Luna Cocktail & More +**Mekan:** Muğla, Türkiye +**Instagram:** [@lunacocktaill](https://www.instagram.com/lunacocktaill/) +**Rezervasyon:** 0532 161 02 34 + +Luna Cocktail & More, Muğla'da faaliyet gösteren premium bir kokteyl barı ve etkinlik mekanıdır. Marka; canlı müzik geceleri, DJ performansları, sunset/rooftop deneyimleri, fashion geceleri ve özel kolaborasyonlar (Soul Club, Smash Burger, Latin Geceleri gibi) düzenlemektedir. + +**Hedef Kitle:** 20–40 yaş arası, yaşam tarzına önem veren, premium deneyim arayan bireyler. + +--- + +## Marka Kimliği & Atmosfer + +Logun geometrik, minimalist ve modern bir yapısı var; daire içinde "LUNA" yazısı, "Cocktail and More" alt başlığıyla. + +**Genel his:** *Luxury Dark & Warm* — karanlık ama sıcak, premium ama erişilebilir, gece hayatı enerjisi taşıyan bir atmosfer. + +### Renk Paleti + +| Rol | Renk | Hex | +|-----|------|-----| +| Zemin (Primary) | Derin siyah | `#0A0A0A` | +| Accent 1 | Sıcak amber / altın | `#C8853A` | +| Accent 2 | Gün batımı mercan-turuncu | `#E85D3A` | +| Accent 3 | Kobalt mavi (Soul/Latin geceleri) | `#3B4FA6` | +| Metin | Sıcak krem / off-white | `#F5F0E8` | + +### Tipografi + +- **Başlıklar:** Sinematik bold serif — Playfair Display, Cormorant Garamond veya özel bir display font +- **Gövde Metni:** Modern sans-serif — Inter veya DM Sans +- **Etkinlik Posterleri:** Editorial, yüksek enerjili karma tipografi + +--- + +## Website Tasarım Promptu (AI / Ajans Brief) + +> Design a luxury cocktail bar website for **"Luna Cocktail & More"** located in Muğla, Turkey. The brand identity is sophisticated, moody, and vibrant — inspired by golden-hour sunsets, rooftop ambiance, live music, and premium cocktail culture. + +--- + +## Sayfa & Bölüm Yapısı + +### 1. Hero Section +- Tam ekran sinematik video veya parallax arka plan (gün batımında rooftop teras) +- Merkezi büyük tipografiyle tagline: + - *"From Sunset to Night"* + - veya *"Vibes, Cocktails & Memories"* +- Belirgin CTA butonu: **"Rezervasyon Yap / Book Now"** + +### 2. Hakkımızda / About +- Kısa marka hikayesi: + > *"Luna is not just a bar. It's where the sun sets and the night begins."* +- Ambiyans teras fotoğrafı eşliğinde sıcak, lifestyle odaklı metin + +### 3. Etkinlikler / Events +- Dinamik etkinlik takvimi veya kart tabanlı yerleşim +- Her kart şunları içermeli: + - Etkinlik adı + - Tarih & gün + - Sanatçı / Performansçı + - Program akışı (zaman çizelgesi) + - Rezervasyon bilgisi +- **Örnek Etkinlik Kategorileri:** + - 🎤 Canlı Konser Geceleri (Evrencan Gündüz & Uzaylılar gibi) + - 🎧 Sunset DJ Party + - 💃 Latin Geceleri + - 👗 Fashion Night (Soul Club kolaborasyonu) + - 🍔 Luna X Smash Burger özel geceleri + - 🎨 Luna X ArtClub serisi + +### 4. Menü / Cocktails +- Görsel açıdan zengin kokteyl vitrini +- Koyu kartlar üzerinde kokteyl fotoğrafları ve stilize tipografi +- **"Signature Cocktail"** spotlight bölümü + +### 5. Galeri / Gallery +- Masonry veya full-bleed grid düzeni +- İçerik türleri: + - Golden hour teras fotoğrafları + - Kokteyl close-up'ları + - Kalabalık & enerji kareleri + - Sahne performansları + - Artistik etkinlik posterleri + +### 6. Rezervasyon / İletişim +- Minimal rezervasyon formu +- Telefon numarası büyük ve belirgin: **0532 161 02 34** +- Konum bilgisi: **Muğla** +- Sosyal medya linkleri: [@lunacocktaill](https://www.instagram.com/lunacocktaill/) + +--- + +## UX & Teknik Özellikler + +| Özellik | Detay | +|---------|-------| +| Tasarım Yaklaşımı | Mobile-first, responsive | +| Navigasyon | Sticky navbar, logo ortada | +| Animasyonlar | Smooth scroll, fade-in geçişler | +| Etkinlik Geri Sayımı | Yaklaşan geceler için animasyonlu countdown | +| Instagram Entegrasyonu | Son gönderilerin otomatik feed'i | +| Hızlı İletişim | WhatsApp veya click-to-call butonu | +| Dil | Türkçe / İngilizce toggle | +| Genel His | Premium ama erişilebilir, karanlık ve sıcak | + +--- + +## Referans İçerik (Instagram'dan Alınan) + +Etkinlik postlarında kullanılan dil ve ton örneği: + +- *"Güneş ufukta kaybolurken müzik yükseliyor, kokteyller doluyor ve gece yeni başlıyor."* +- *"Golden hour & terrace energy 🍸"* +- *"No talk, just music. 🎧"* +- *"Pink mood, premium night."* +- *"Nights like these, only at Luna."* +- *"Sip into Luna."* +- *"A table dressed in green."* +- *"Yours, by Luna."* + +Bu ifadeler website copy'sinde, section başlıklarında ve hero tagline'larında kullanılabilir. + +--- + +## Önerilen Teknoloji Stack + +- **No-code / Low-code:** Framer, Webflow, veya Squarespace (hızlı kurulum için) +- **Custom geliştirme:** Next.js + Tailwind CSS + Framer Motion +- **CMS:** Contentful veya Sanity (etkinlik güncellemeleri için) +- **Rezervasyon:** Seatris, Resy veya basit bir form entegrasyonu (Tally / Typeform) + +--- + +*Hazırlayan: Claude — kaynak analiz: @lunacocktaill Instagram sayfası* +*Tarih: Haziran 2026* diff --git a/next.config.ts b/next.config.ts index e9ffa30..68a6c64 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,7 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { - /* config options here */ + output: "standalone", }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index de995b2..a66828f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "lunaweb", "version": "0.1.0", "dependencies": { + "framer-motion": "^12.40.0", + "lucide-react": "^1.17.0", "next": "16.2.7", "react": "19.2.4", "react-dom": "19.2.4" @@ -3762,6 +3764,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/framer-motion": { + "version": "12.40.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz", + "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.40.0", + "motion-utils": "^12.39.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -5032,6 +5061,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.17.0.tgz", + "integrity": "sha512-9FA9evdox/JQL5PT57fdA1x/yg8T7knJ98+zjTL3UfKza6pflQUUh3XtaQIHKvnsJw1lmsEyHVlt5jchYxOQ5w==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", @@ -5099,6 +5137,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/motion-dom": { + "version": "12.40.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz", + "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.39.0" + } + }, + "node_modules/motion-utils": { + "version": "12.39.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz", + "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/package.json b/package.json index 24e5846..a75627f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "lint": "eslint" }, "dependencies": { + "framer-motion": "^12.40.0", + "lucide-react": "^1.17.0", "next": "16.2.7", "react": "19.2.4", "react-dom": "19.2.4"