first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,550 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Luna — Tasarım İncelemesi</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: #0e0e0e;
|
||||
color: #F5F0E8;
|
||||
font-family: -apple-system, 'Inter', sans-serif;
|
||||
padding: 40px 32px 80px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: #C8853A;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #F5F0E8;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #C8853A;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid #C8853A22;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ─── Strength Grid ─── */
|
||||
.strength-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.strength-card {
|
||||
background: #161616;
|
||||
border: 1px solid #ffffff08;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.strength-card .icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #C8853A18;
|
||||
border: 1px solid #C8853A33;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.strength-card h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #F5F0E8;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.strength-card p {
|
||||
font-size: 12px;
|
||||
color: #F5F0E880;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ─── Improvements ─── */
|
||||
.improvement-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.improvement {
|
||||
background: #161616;
|
||||
border: 1px solid #ffffff08;
|
||||
border-radius: 8px;
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.improvement:hover {
|
||||
border-color: #C8853A44;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.improvement.selected {
|
||||
border-color: #C8853A;
|
||||
background: #1a1410;
|
||||
}
|
||||
|
||||
.improvement .num {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #C8853A;
|
||||
background: #C8853A18;
|
||||
border: 1px solid #C8853A33;
|
||||
border-radius: 50%;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.improvement .body h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #F5F0E8;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.improvement .body p {
|
||||
font-size: 12px;
|
||||
color: #F5F0E870;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
padding: 2px 8px;
|
||||
border-radius: 100px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag.magicui { background: #3B4FA622; color: #7B8FD4; border: 1px solid #3B4FA633; }
|
||||
.tag.design { background: #C8853A22; color: #C8853A; border: 1px solid #C8853A33; }
|
||||
.tag.ux { background: #E85D3A22; color: #E85D3A; border: 1px solid #E85D3A33; }
|
||||
|
||||
/* ─── Mockup previews ─── */
|
||||
.mockup-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.mockup-panel {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ffffff08;
|
||||
}
|
||||
|
||||
.mockup-panel .label-bar {
|
||||
background: #1e1e1e;
|
||||
padding: 8px 14px;
|
||||
font-size: 11px;
|
||||
color: #ffffff40;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid #ffffff08;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mockup-panel .label-bar span { color: #C8853A; }
|
||||
|
||||
.mockup-panel .preview {
|
||||
background: #0A0A0A;
|
||||
padding: 28px 24px;
|
||||
min-height: 160px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Current hero mockup */
|
||||
.current-badge {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.25em;
|
||||
color: #E85D3A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.current-title {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #F5F0E8;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.current-title em { color: #C8853A; font-style: italic; }
|
||||
|
||||
.current-btn {
|
||||
border: 1px solid #C8853A;
|
||||
color: #C8853A;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 24px;
|
||||
}
|
||||
|
||||
/* New hero mockup */
|
||||
/* meteor */
|
||||
@keyframes meteor {
|
||||
0% { transform: rotate(215deg) translateX(0); opacity: 1; }
|
||||
70% { opacity: 1; }
|
||||
100% { transform: rotate(215deg) translateX(-400px); opacity: 0; }
|
||||
}
|
||||
|
||||
.meteor {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border-radius: 50%;
|
||||
animation: meteor linear infinite;
|
||||
}
|
||||
|
||||
.meteor::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 60px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, rgba(255,255,255,0.6), transparent);
|
||||
}
|
||||
|
||||
/* shimmer badge */
|
||||
@keyframes shimmer-slide {
|
||||
from { transform: translateX(-150%); }
|
||||
to { transform: translateX(250%); }
|
||||
}
|
||||
|
||||
.new-badge-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
border: 1px solid #C8853A33;
|
||||
background: #C8853A0a;
|
||||
border-radius: 100px;
|
||||
padding: 5px 16px;
|
||||
margin-bottom: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.new-badge-text {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: #C8853A;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shimmer-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
|
||||
animation: shimmer-slide 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.new-title {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
color: #F5F0E8;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.new-title em { color: #C8853A; font-style: italic; }
|
||||
|
||||
/* border beam button */
|
||||
@keyframes border-beam {
|
||||
from { offset-distance: 0%; }
|
||||
to { offset-distance: 100%; }
|
||||
}
|
||||
|
||||
.new-btn-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
position: relative;
|
||||
border: 1px solid #C8853A55;
|
||||
color: #C8853A;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 24px;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* magic card mockup */
|
||||
.card-demo {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.current-card {
|
||||
background: #111;
|
||||
border: 1px solid #ffffff08;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.current-card img-ph {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #1e1e1e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.current-card .c-title { font-size: 13px; font-weight: 600; color: #F5F0E8; margin-bottom: 4px; }
|
||||
.current-card .c-sub { font-size: 11px; color: #F5F0E850; }
|
||||
|
||||
.magic-card {
|
||||
background: #111;
|
||||
border: 1px solid #C8853A55;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.magic-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(120px circle at 60% 40%, rgba(200,133,58,0.15), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.magic-card img-ph {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #1e1e1e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.magic-card .c-title { font-size: 13px; font-weight: 600; color: #C8853A; margin-bottom: 4px; }
|
||||
.magic-card .c-sub { font-size: 11px; color: #F5F0E870; }
|
||||
|
||||
/* ─── Footer CTA ─── */
|
||||
.cta-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.cta-note {
|
||||
font-size: 12px;
|
||||
color: #F5F0E840;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Luna Cocktail & More — Tasarım İncelemesi</h1>
|
||||
<h2>Mevcut tasarım güçlü. Üç noktada rafine edilebilir.</h2>
|
||||
|
||||
<!-- ── STRENGTHS ─────────────────────────────────────────── -->
|
||||
<div class="section-title">✓ Güçlü Yönler</div>
|
||||
<div class="strength-grid">
|
||||
<div class="strength-card">
|
||||
<div class="icon">🎨</div>
|
||||
<h3>Renk Sistemi</h3>
|
||||
<p>Amber (#C8853A) + mercan (#E85D3A) + derin siyah üçlüsü tutarlı ve marka kimliğiyle örtüşüyor.</p>
|
||||
</div>
|
||||
<div class="strength-card">
|
||||
<div class="icon">🔤</div>
|
||||
<h3>Tipografi</h3>
|
||||
<p>Inter + Playfair Display çifti mükemmel. Serif başlıklar, sans body — klasik lüks his.</p>
|
||||
</div>
|
||||
<div class="strength-card">
|
||||
<div class="icon">✨</div>
|
||||
<h3>Animasyonlar</h3>
|
||||
<p>Framer Motion scroll-triggered reveal'lar doğal ve performanslı. Gecikmeler (stagger) iyi ayarlanmış.</p>
|
||||
</div>
|
||||
<div class="strength-card">
|
||||
<div class="icon">📐</div>
|
||||
<h3>Layout Yapısı</h3>
|
||||
<p>Navbar merkezi logo / iki yanda linkler düzeni özgün. Galeri grid'i edge-to-edge ve dinamik.</p>
|
||||
</div>
|
||||
<div class="strength-card">
|
||||
<div class="icon">📱</div>
|
||||
<h3>Responsive</h3>
|
||||
<p>Mobile menu animasyonlu, card grid'ler breakpoint'lerde sağlıklı — temel responsive iyi kurulmuş.</p>
|
||||
</div>
|
||||
<div class="strength-card">
|
||||
<div class="icon">🧩</div>
|
||||
<h3>Bileşen Ayrımı</h3>
|
||||
<p>Her section kendi component'ı. globals.css CSS token'ları Tailwind v4 @theme ile doğru kullanılmış.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── BEFORE / AFTER: Hero ──────────────────────────────── -->
|
||||
<div class="section-title">① Hero Section — Şu an vs. Öneri</div>
|
||||
<div class="mockup-row" style="margin-bottom: 32px;">
|
||||
<!-- BEFORE -->
|
||||
<div class="mockup-panel">
|
||||
<div class="label-bar">Şu an</div>
|
||||
<div class="preview" style="background: linear-gradient(to bottom, #0A0A0A99, #0A0A0A), url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=400&q=40') center/cover;">
|
||||
<div class="current-badge">Muğla'nın En Özel Terası</div>
|
||||
<div class="current-title">From Sunset<br><em>to Night</em></div>
|
||||
<div class="current-btn">Rezervasyon Yap / Book Now</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AFTER -->
|
||||
<div class="mockup-panel">
|
||||
<div class="label-bar"><span>●</span> MagicUI — Meteors + Shimmer Badge</div>
|
||||
<div class="preview" style="background: linear-gradient(to bottom, #0A0A0A99, #0A0A0A), url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?w=400&q=40') center/cover;">
|
||||
<!-- meteors -->
|
||||
<span class="meteor" style="top:10%;left:20%;animation-duration:4s;animation-delay:0s;"></span>
|
||||
<span class="meteor" style="top:5%;left:60%;animation-duration:5s;animation-delay:1.2s;"></span>
|
||||
<span class="meteor" style="top:15%;left:80%;animation-duration:3.5s;animation-delay:0.6s;"></span>
|
||||
<span class="meteor" style="top:2%;left:40%;animation-duration:6s;animation-delay:2s;"></span>
|
||||
|
||||
<!-- shimmer badge -->
|
||||
<div class="new-badge-wrap">
|
||||
<span class="new-badge-text">Muğla'nın En Özel Terası</span>
|
||||
<div class="shimmer-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="new-title">From Sunset<br><em>to Night</em></div>
|
||||
<div class="current-btn">Rezervasyon Yap / Book Now</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── BEFORE / AFTER: Cards ─────────────────────────────── -->
|
||||
<div class="section-title">② Event / Cocktail Cards — Şu an vs. Öneri</div>
|
||||
<div class="mockup-row" style="margin-bottom: 32px;">
|
||||
<!-- BEFORE -->
|
||||
<div class="mockup-panel">
|
||||
<div class="label-bar">Şu an — Hover: sadece border renk değişimi</div>
|
||||
<div class="preview" style="padding: 20px;">
|
||||
<div class="card-demo">
|
||||
<div class="current-card">
|
||||
<img-ph></img-ph>
|
||||
<div class="c-title">Canlı Konser Gecesi</div>
|
||||
<div class="c-sub">12 Temmuz · 21:30</div>
|
||||
</div>
|
||||
<div class="current-card">
|
||||
<img-ph></img-ph>
|
||||
<div class="c-title">Sunset DJ Party</div>
|
||||
<div class="c-sub">14 Temmuz · 18:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AFTER -->
|
||||
<div class="mockup-panel">
|
||||
<div class="label-bar"><span>●</span> MagicUI — Mouse-tracking spotlight glow</div>
|
||||
<div class="preview" style="padding: 20px;">
|
||||
<div class="card-demo">
|
||||
<div class="magic-card">
|
||||
<img-ph></img-ph>
|
||||
<div class="c-title">Canlı Konser Gecesi</div>
|
||||
<div class="c-sub">12 Temmuz · 21:30</div>
|
||||
</div>
|
||||
<div class="magic-card">
|
||||
<img-ph></img-ph>
|
||||
<div class="c-title">Sunset DJ Party</div>
|
||||
<div class="c-sub">14 Temmuz · 18:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── IMPROVEMENTS LIST ─────────────────────────────────── -->
|
||||
<div class="section-title">Önerilen 3 Geliştirme</div>
|
||||
<div class="improvement-list">
|
||||
|
||||
<div class="improvement selected" onclick="this.classList.toggle('selected')">
|
||||
<div class="num">1</div>
|
||||
<div class="body">
|
||||
<h3>Meteors — Hero Arkaplanı</h3>
|
||||
<p>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.</p>
|
||||
<div><span class="tag magicui">MagicUI · Meteors</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="improvement selected" onclick="this.classList.toggle('selected')">
|
||||
<div class="num">2</div>
|
||||
<div class="body">
|
||||
<h3>Shimmer Badge — Hero Alt Başlığı</h3>
|
||||
<p>"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.</p>
|
||||
<div><span class="tag magicui">MagicUI · AnimatedShinyText</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="improvement selected" onclick="this.classList.toggle('selected')">
|
||||
<div class="num">3</div>
|
||||
<div class="body">
|
||||
<h3>MagicCard Glow — Etkinlik & Kokteyl Kartları</h3>
|
||||
<p>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.</p>
|
||||
<div><span class="tag magicui">MagicUI · MagicCard</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="cta-note">
|
||||
Üç geliştirme de yeni paket gerektirmiyor — mevcut Framer Motion + Tailwind v4 ile uygulanıyor.<br>
|
||||
Onaylıyorsan direkt uygulayabilirim.
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"}
|
||||
@@ -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"}
|
||||
@@ -0,0 +1 @@
|
||||
14708
|
||||
+53
@@ -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"]
|
||||
@@ -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)
|
||||
|
||||
+22
-16
@@ -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;
|
||||
}
|
||||
|
||||
+10
-10
@@ -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 (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
lang="tr"
|
||||
className={`${inter.variable} ${playfair.variable} h-full antialiased scroll-smooth`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="min-h-full flex flex-col selection:bg-accent1 selection:text-primary">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+16
-60
@@ -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 (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="flex flex-col min-h-screen">
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<About />
|
||||
<Events />
|
||||
<Cocktails />
|
||||
<Gallery />
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<section id="about" className="py-24 md:py-32 bg-primary relative">
|
||||
<div className="container mx-auto px-6 md:px-12 flex flex-col md:flex-row items-center gap-16">
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="w-full md:w-1/2 relative"
|
||||
>
|
||||
<div className="relative aspect-[4/5] md:aspect-square w-full">
|
||||
<div className="absolute inset-0 bg-accent1/10 translate-x-4 translate-y-4" />
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1574096079513-d8259312b785?q=80&w=1974&auto=format&fit=crop"
|
||||
alt="Luna Cocktail Vibe"
|
||||
className="w-full h-full object-cover grayscale-[30%] hover:grayscale-0 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="w-full md:w-1/2"
|
||||
>
|
||||
<h2 className="font-serif text-4xl md:text-5xl text-text-main mb-6">
|
||||
Luna is not just a bar.<br />
|
||||
<span className="text-accent1 italic">It's a lifestyle.</span>
|
||||
</h2>
|
||||
|
||||
<div className="w-16 h-1 bg-accent2 mb-8" />
|
||||
|
||||
<p className="text-text-main/80 text-lg leading-relaxed font-light mb-6">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p className="text-text-main/80 text-lg leading-relaxed font-light mb-10">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p className="font-serif text-xl text-text-main italic border-l-2 border-accent1 pl-4">
|
||||
"Nights like these, only at Luna."
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<section id="cocktails" className="py-24 md:py-32 bg-primary relative border-t border-white/5">
|
||||
<div className="container mx-auto px-6 md:px-12">
|
||||
|
||||
<div className="text-center mb-16 md:mb-24">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="font-serif text-4xl md:text-5xl text-text-main mb-6"
|
||||
>
|
||||
İmza Kokteyller
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="w-16 h-1 bg-accent1 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
|
||||
{cocktails.map((cocktail, index) => (
|
||||
<motion.div
|
||||
key={cocktail.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
>
|
||||
<MagicCard className="flex flex-col group relative">
|
||||
<div className="aspect-[3/4] overflow-hidden relative mb-6">
|
||||
<img
|
||||
src={cocktail.image}
|
||||
alt={cocktail.name}
|
||||
className="w-full h-full object-cover grayscale-[20%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between items-start border-b border-white/10 pb-4">
|
||||
<div>
|
||||
<h3 className="font-serif text-2xl text-text-main mb-2 group-hover:text-accent1 transition-colors">{cocktail.name}</h3>
|
||||
<p className="text-text-main/60 font-light text-sm max-w-[200px]">{cocktail.description}</p>
|
||||
</div>
|
||||
<span className="text-accent2 font-serif text-xl">{cocktail.price}</span>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
className="mt-20 text-center"
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
className="inline-block border border-accent1 text-text-main hover:bg-accent1 hover:text-primary transition-colors px-8 py-3 uppercase tracking-widest text-sm font-semibold"
|
||||
>
|
||||
Tüm Menüyü İncele
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<section id="events" className="py-24 md:py-32 bg-[#0d0d0d] relative">
|
||||
<div className="container mx-auto px-6 md:px-12">
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h2 className="font-serif text-4xl md:text-5xl text-text-main mb-4">Yaklaşan Etkinlikler</h2>
|
||||
<p className="text-text-main/60 font-light text-lg">No talk, just music. Geceye yön veren performanslar.</p>
|
||||
</motion.div>
|
||||
<motion.a
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
href="#contact"
|
||||
className="text-accent1 hover:text-text-main transition-colors uppercase tracking-widest text-sm font-semibold flex items-center gap-2"
|
||||
>
|
||||
Tüm Programı Gör <span aria-hidden="true">→</span>
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{events.map((event, index) => (
|
||||
<motion.div
|
||||
key={event.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
>
|
||||
<MagicCard className="group relative bg-primary overflow-hidden border border-white/5 hover:border-accent1/50 transition-colors h-full">
|
||||
<div className="aspect-[4/3] overflow-hidden relative">
|
||||
<div className="absolute inset-0 bg-primary/40 group-hover:bg-transparent transition-colors duration-500 z-10" />
|
||||
<img
|
||||
src={event.image}
|
||||
alt={event.title}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
<div className="absolute top-4 left-4 z-20 bg-primary/80 backdrop-blur border border-white/10 px-3 py-1 uppercase text-[10px] tracking-widest text-accent1 font-semibold">
|
||||
{event.category}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<h3 className="font-serif text-2xl text-text-main mb-1 group-hover:text-accent1 transition-colors">{event.title}</h3>
|
||||
<p className="text-text-main/70 font-light mb-6">{event.artist}</p>
|
||||
|
||||
<div className="space-y-3 mb-8">
|
||||
<div className="flex items-center text-sm text-text-main/60 font-light">
|
||||
<Calendar size={16} className="text-accent2 mr-3" />
|
||||
{event.date}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-text-main/60 font-light">
|
||||
<Clock size={16} className="text-accent2 mr-3" />
|
||||
{event.time}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="#contact"
|
||||
className="block w-full py-3 text-center border border-white/10 hover:bg-accent1 hover:text-primary hover:border-accent1 transition-all uppercase tracking-widest text-xs font-bold"
|
||||
>
|
||||
Rezervasyon
|
||||
</a>
|
||||
</div>
|
||||
</MagicCard>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { MapPin, Phone } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer id="contact" className="bg-[#050505] pt-24 pb-12 relative border-t border-white/5">
|
||||
<div className="container mx-auto px-6 md:px-12">
|
||||
<div className="flex flex-col md:flex-row justify-between gap-16 mb-20">
|
||||
|
||||
{/* Brand Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
<a href="#" className="inline-block mb-6">
|
||||
<div className="flex flex-col group">
|
||||
<span className="font-serif text-4xl text-text-main group-hover:text-accent1 transition-colors">
|
||||
LUNA
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] text-accent1 mt-1 font-light">
|
||||
Cocktail and More
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<p className="text-text-main/60 font-light leading-relaxed mb-8">
|
||||
Muğla'nın kalbinde, premium kokteyl ve müzik deneyimi.
|
||||
Sunset'ten geceye uzanan eşsiz bir atmosfer.
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<a href="https://www.instagram.com/lunacocktaill/" target="_blank" rel="noreferrer" className="w-10 h-10 border border-white/10 rounded-full flex items-center justify-center text-text-main hover:bg-accent1 hover:text-primary hover:border-accent1 transition-all">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
||||
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="md:w-1/3 space-y-6"
|
||||
>
|
||||
<h4 className="font-serif text-2xl text-text-main mb-6">İletişim</h4>
|
||||
|
||||
<a href="tel:05321610234" className="flex items-start group">
|
||||
<Phone className="text-accent2 mt-1 mr-4 group-hover:text-accent1 transition-colors" size={20} />
|
||||
<div>
|
||||
<span className="block text-[10px] uppercase tracking-widest text-text-main/50 mb-1">Rezervasyon</span>
|
||||
<span className="text-lg text-text-main group-hover:text-accent1 transition-colors font-light">0532 161 02 34</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="flex items-start group">
|
||||
<MapPin className="text-accent2 mt-1 mr-4 group-hover:text-accent1 transition-colors" size={20} />
|
||||
<div>
|
||||
<span className="block text-[10px] uppercase tracking-widest text-text-main/50 mb-1">Konum</span>
|
||||
<span className="text-lg text-text-main font-light leading-relaxed">
|
||||
Muğla Merkez<br />
|
||||
Türkiye
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Form */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="md:w-1/3"
|
||||
>
|
||||
<h4 className="font-serif text-2xl text-text-main mb-6">Bize Ulaşın</h4>
|
||||
<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Adınız Soyadınız"
|
||||
className="w-full bg-primary/50 border border-white/10 px-4 py-3 text-sm text-text-main focus:outline-none focus:border-accent1 transition-colors"
|
||||
/>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Telefon Numaranız"
|
||||
className="w-full bg-primary/50 border border-white/10 px-4 py-3 text-sm text-text-main focus:outline-none focus:border-accent1 transition-colors"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-accent1 text-primary py-3 uppercase tracking-widest text-xs font-bold hover:bg-accent2 transition-colors"
|
||||
>
|
||||
Gönder
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-text-main/40 font-light">
|
||||
<p>© {new Date().getFullYear()} Luna Cocktail & More. Tüm hakları saklıdır.</p>
|
||||
<p className="mt-2 md:mt-0">Tasarım & Geliştirme</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<section id="gallery" className="py-2 bg-primary">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-2 md:auto-rows-[300px]">
|
||||
{photos.map((photo, index) => (
|
||||
<motion.div
|
||||
key={photo.id}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
className={`relative overflow-hidden group ${photo.style}`}
|
||||
>
|
||||
<div className="absolute inset-0 bg-primary/20 group-hover:bg-transparent transition-colors duration-500 z-10" />
|
||||
<img
|
||||
src={photo.src}
|
||||
alt={`Gallery Image ${photo.id}`}
|
||||
className="w-full h-full object-cover grayscale-[40%] group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Meteors } from "@/components/ui/Meteors";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
||||
{/* Background Image / Video overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div className="absolute inset-0 bg-primary/60 mix-blend-multiply z-10" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary/30 via-transparent to-primary z-10" />
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=2070&auto=format&fit=crop"
|
||||
alt="Luna Cocktail Rooftop Vibe"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 z-20 overflow-hidden">
|
||||
<Meteors number={15} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-20 text-center px-4 flex flex-col items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="inline-flex items-center rounded-full border border-accent1/25 bg-accent1/10 px-5 py-2 backdrop-blur-sm overflow-hidden relative">
|
||||
<span className="text-accent1 uppercase tracking-[0.25em] text-xs font-semibold relative z-10">
|
||||
Muğla'nın En Özel Terası
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-0 animate-shimmer-slide bg-gradient-to-r from-transparent via-white/15 to-transparent" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="font-serif text-5xl md:text-7xl lg:text-8xl text-text-main mb-6 leading-tight max-w-4xl"
|
||||
>
|
||||
From Sunset <br />
|
||||
<span className="text-accent1 italic">to Night</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="text-text-main/80 text-lg md:text-xl font-light mb-10 max-w-xl mx-auto"
|
||||
>
|
||||
Güneş ufukta kaybolurken müzik yükseliyor, kokteyller doluyor ve gece yeni başlıyor.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
className="inline-block bg-transparent border border-accent1 text-accent1 hover:bg-accent1 hover:text-primary transition-colors duration-300 px-10 py-4 uppercase tracking-[0.2em] text-sm font-bold"
|
||||
>
|
||||
Rezervasyon Yap / Book Now
|
||||
</a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.5, duration: 1 }}
|
||||
className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2"
|
||||
>
|
||||
<span className="text-[10px] uppercase tracking-widest text-text-main/50">Scroll</span>
|
||||
<div className="w-[1px] h-12 bg-gradient-to-b from-text-main/50 to-transparent" />
|
||||
</motion.div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<nav
|
||||
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
|
||||
isScrolled ? "bg-primary/95 backdrop-blur-md py-4 shadow-lg border-b border-white/5" : "bg-transparent py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-6 md:px-12 flex justify-between items-center">
|
||||
{/* Left Side Links (Desktop) */}
|
||||
<div className="hidden md:flex space-x-8 w-1/3 justify-start">
|
||||
{navLinks.slice(0, 2).map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Logo (Centered) */}
|
||||
<div className="w-1/3 flex justify-center text-center">
|
||||
<a href="#" className="flex flex-col items-center group">
|
||||
<span className="font-serif text-3xl md:text-4xl text-text-main group-hover:text-accent1 transition-colors border-2 border-transparent group-hover:border-accent1 rounded-full px-6 py-2">
|
||||
LUNA
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] text-accent1 mt-1 font-light opacity-80">
|
||||
Cocktail and More
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Right Side Links (Desktop) */}
|
||||
<div className="hidden md:flex space-x-8 w-1/3 justify-end items-center">
|
||||
{navLinks.slice(2, 4).map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-text-main/80 hover:text-accent1 transition-colors uppercase tracking-widest text-xs font-semibold"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href="#contact"
|
||||
className="bg-accent1 text-primary px-6 py-2 uppercase tracking-widest text-xs font-bold hover:bg-accent2 transition-colors"
|
||||
>
|
||||
Rezervasyon
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<div className="md:hidden w-1/3 flex justify-end">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="text-text-main hover:text-accent1 focus:outline-none transition-colors"
|
||||
>
|
||||
{isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="absolute top-full left-0 w-full bg-primary/95 backdrop-blur-lg border-t border-white/10 shadow-2xl py-8 flex flex-col items-center space-y-6 md:hidden"
|
||||
>
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="text-text-main hover:text-accent1 text-lg uppercase tracking-widest font-medium transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -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<HTMLDivElement>(null);
|
||||
const [pos, setPos] = useState({ x: -999, y: -999 });
|
||||
const [hovered, setHovered] = useState(false);
|
||||
|
||||
const onMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
setPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
onMouseMove={onMouseMove}
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => { setHovered(false); setPos({ x: -999, y: -999 }); }}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 z-20 transition-opacity duration-500"
|
||||
style={{
|
||||
opacity: hovered ? 1 : 0,
|
||||
background: `radial-gradient(350px circle at ${pos.x}px ${pos.y}px, rgba(200,133,58,0.10), transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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<MeteorItem[]>([]);
|
||||
|
||||
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) => (
|
||||
<span
|
||||
key={m.id}
|
||||
className="pointer-events-none absolute top-0 size-px rotate-[215deg] animate-meteor rounded-full bg-white/70 shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
|
||||
style={{ left: m.left, animationDelay: m.delay, animationDuration: m.duration }}
|
||||
>
|
||||
<span className="absolute top-1/2 left-0 -translate-y-1/2 h-px w-20 bg-gradient-to-r from-white/60 to-transparent" />
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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*
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
output: "standalone",
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Generated
+53
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user