551 lines
16 KiB
HTML
551 lines
16 KiB
HTML
<!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>
|