ayrisdev/kozmos-qr-menu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: richer visual language inspired by Magic UI

Browse Source 
- Body: radial gradient orbs (teal + green) + dot grid overlay + grain
- Header: dark mesh gradient, shimmer logo animation, animated gradient
  tagline, frosted glass lang-switcher pill
- CategorySection: glow-ring emoji badge, gradient top line, frosted
  glass card container, teal/gold decorative divider
- MenuItemRow: gradient emoji circle, magic-card CSS hover spotlight,
  price pill with green gradient border
- BottomTabBar: blur/glass tabbar, active emoji glow + scale + pill bg
- Page: welcome strip with teal gradient border, hero fade from header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mstfyldz
2026-06-03 02:41:37 +03:00
co-authored by Claude Sonnet 4.6
parent 718e0a6228
commit bc8bd747ff
6 changed files with 414 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/page.tsx
+39 -5
View File
@@ -21,18 +21,53 @@ export default async function MenuPage({
<Header dict={dict} />
<main
className="bg-cream min-h-screen"
className="relative min-h-screen"
style={{
paddingTop: 'var(--header-h)',
paddingBottom: 'calc(var(--tabbar-h) + 8px)',
}}
>
{/* Subtle top fade from header */}
{/* Hero gradient fade from header */}
<div
className="h-4 bg-gradient-to-b from-beige/30 to-transparent"
aria-hidden="true"
className="h-8 w-full"
style={{
background:
'linear-gradient(180deg, rgba(31,20,10,0.12) 0%, transparent 100%)',
}}
/>
{/* Decorative welcome strip */}
<div className="px-4 pt-2 pb-1">
<div
className="rounded-2xl px-4 py-3 flex items-center gap-3"
style={{
background:
'linear-gradient(135deg, rgba(74,175,168,0.10) 0%, rgba(200,168,80,0.07) 100%)',
border: '1px solid rgba(74,175,168,0.18)',
}}
>
<span className="text-2xl">🌊</span>
<div>
<p
className="font-display italic text-coffee font-semibold leading-tight"
style={{ fontSize: '0.95rem' }}
>
Kozmos Beach &amp; More
</p>
<p
className="font-body text-muted leading-snug mt-0.5"
style={{ fontSize: '0.68rem' }}
>
{lang === 'tr'
? 'Taze malzemeler · Ege lezzetleri · Deniz kenarı'
: 'Fresh ingredients · Aegean flavours · Seaside'}
</p>
</div>
</div>
</div>
{/* Category sections */}
{categories.map((category) => (
<CategorySection
key={category.id}
@@ -42,8 +77,7 @@ export default async function MenuPage({
/>
))}
{/* Bottom spacing */}
<div className="h-6" aria-hidden="true" />
<div className="h-4" aria-hidden="true" />
</main>
<WhatsAppButton
app/globals.css
+154 -43
View File
@@ -6,12 +6,15 @@
--beige-dark: #D4C8B0;
--teal: #4AAFA8;
--teal-dark: #3D9A94;
--teal-glow: rgba(74, 175, 168, 0.35);
--green: #5C8A5C;
--coffee: #3D2B1F;
--coffee-dark: #1F140A;
--coffee-light: #5A3D2D;
--gold: #C8A850;
--muted: #8A7265;
--header-h: 64px;
--tabbar-h: 68px;
--header-h: 68px;
--tabbar-h: 72px;
}
@theme inline {
@@ -22,7 +25,9 @@
--color-teal-dark: var(--teal-dark);
--color-green: var(--green);
--color-coffee: var(--coffee);
--color-coffee-dark: var(--coffee-dark);
--color-coffee-light: var(--coffee-light);
--color-gold: var(--gold);
--color-muted: var(--muted);
--font-display: var(--font-playfair);
--font-body: var(--font-inter);
@@ -32,69 +37,175 @@ html {
scroll-behavior: smooth;
}
/* Grain texture overlay */
/* ─── Page background ─────────────────────────────── */
body {
background:
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(74,175,168,0.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(92,138,92,0.09) 0%, transparent 55%),
radial-gradient(ellipse 50% 40% at 80% 30%, rgba(200,168,80,0.05) 0%, transparent 50%),
#F5F0E8;
}
/* Dot grid overlay */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(circle, rgba(61,43,31,0.10) 1px, transparent 1px);
background-size: 22px 22px;
}
/* Grain overlay on top of everything */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: 0.028;
z-index: 9999;
opacity: 0.022;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 256px 256px;
}
/* Category scroll offset for sticky header */
.category-section {
scroll-margin-top: calc(var(--header-h) + 12px);
/* ─── Animations ──────────────────────────────────── */
/* Logo shimmer — travels across text */
@keyframes text-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Menu item fade-up animation */
/* Header accent line pulse */
@keyframes border-flow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Category emoji orbit ring */
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Item fade-up on mount */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* WhatsApp pulse */
@keyframes wa-pulse {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.50); }
70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* Section reveal */
@keyframes section-reveal {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Logo shimmer class ──────────────────────────── */
.logo-shimmer {
background: linear-gradient(
105deg,
#F5F0E8 0%,
#F5F0E8 35%,
#4AAFA8 45%,
#C8A850 52%,
#4AAFA8 59%,
#F5F0E8 65%,
#F5F0E8 100%
);
background-size: 250% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: text-shimmer 5s linear infinite;
}
/* Header gradient line */
.header-line {
background: linear-gradient(90deg, #4AAFA8, #C8A850, #5C8A5C, #4AAFA8);
background-size: 300% 100%;
animation: border-flow 4s ease infinite;
}
/* ─── Category section ────────────────────────────── */
.category-section {
scroll-margin-top: calc(var(--header-h) + 10px);
}
.category-reveal {
animation: section-reveal 0.5s ease both;
}
/* ─── Menu item ───────────────────────────────────── */
.menu-item-row {
animation: fadeUp 0.35s ease both;
animation-delay: calc(var(--item-index, 0) * 55ms);
animation: fadeUp 0.38s ease both;
animation-delay: calc(var(--item-index, 0) * 60ms);
}
/* Tab bar active indicator */
.tab-active-dot {
/* Magic card gradient spotlight — CSS-only hover version */
.menu-item-row {
position: relative;
overflow: hidden;
transition: background 0.2s ease;
}
.menu-item-row::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(74,175,168,0.07) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.25s ease;
border-radius: 10px;
}
.menu-item-row:hover::before { opacity: 1; }
/* ─── Bottom tab bar ──────────────────────────────── */
.tabbar-glass {
background: rgba(31, 20, 10, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid rgba(74, 175, 168, 0.18);
}
/* Active tab pill */
.tab-pill {
background: linear-gradient(135deg, rgba(74,175,168,0.22), rgba(92,138,92,0.15));
border: 1px solid rgba(74,175,168,0.30);
border-radius: 8px;
transition: all 0.25s ease;
}
/* ─── WhatsApp button ─────────────────────────────── */
.wa-btn { animation: wa-pulse 2.8s ease-out infinite; }
/* ─── Section heading ornament ────────────────────── */
.section-ornament {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--teal);
margin: 0 auto;
transition: opacity 0.2s ease;
}
/* Smooth tab color transition */
.tab-item {
transition: color 0.2s ease;
}
/* WhatsApp pulse ring */
@keyframes pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
}
70% {
box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
.wa-btn {
animation: pulse-ring 2.5s ease-out infinite;
/* ─── Price pill ──────────────────────────────────── */
.price-pill {
background: linear-gradient(135deg, rgba(92,138,92,0.15), rgba(92,138,92,0.08));
border: 1px solid rgba(92,138,92,0.25);
color: var(--green);
border-radius: 20px;
padding: 2px 10px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
}