ayrisdev/luna-wen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
mstfyldz
2026-06-03 04:27:40 +03:00
parent dcfaf2723c
commit 48277fe8d2
22 changed files with 1610 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/14699-1780449149/content/review.html
+550
View File
@@ -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 &amp; 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 &amp; 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>
.superpowers/brainstorm/14699-1780449149/state/server-info
+1
View File
@@ -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"}
.superpowers/brainstorm/14699-1780449149/state/server.log
+2
View File
@@ -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"}
.superpowers/brainstorm/14699-1780449149/state/server.pid
+1
View File
@@ -0,0 +1 @@
14708