ayrisdev/kozmos-qr-menu
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:11:30 +03:00
parent d369c9e258
commit 7b4b3a85af
20 changed files with 3446 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CategorySection.tsx
+32 -72
View File
@@ -11,25 +11,17 @@ export default function CategorySection({ category, lang, currency }: Props) {
const l = lang as 'tr' | 'en'
return (
<section id={category.id} className="category-section category-reveal px-4 pt-9 pb-1">
<section id={category.id} className="category-section category-reveal px-4 pt-12 pb-2">
{/* Category header */}
<div className="mb-4">
<div className="flex items-center gap-3 mb-2">
{/* Emoji badge with gradient ring */}
<div className="mb-6">
<div className="flex items-center gap-3 mb-3">
{/* Subtle minimal Emoji badge */}
<div className="relative flex-shrink-0">
{/* Outer glow ring */}
<div
className="absolute inset-0 rounded-2xl blur-sm opacity-60"
className="w-12 h-12 rounded-full flex items-center justify-center text-2xl shadow-sm"
style={{
background: 'linear-gradient(135deg, #4AAFA8, #5C8A5C)',
transform: 'scale(1.15)',
}}
/>
<div
className="relative w-11 h-11 rounded-2xl flex items-center justify-center text-xl"
style={{
background: 'linear-gradient(135deg, rgba(74,175,168,0.18), rgba(92,138,92,0.12))',
border: '1px solid rgba(74,175,168,0.30)',
background: '#FDFCF8',
border: '1px solid rgba(212,200,176,0.40)',
}}
>
{category.emoji}
@@ -37,75 +29,43 @@ export default function CategorySection({ category, lang, currency }: Props) {
</div>
{/* Title */}
<div className="flex-1 min-w-0">
<div className="flex-1 min-w-0 flex items-center gap-2">
<h2
className="font-display font-semibold italic text-coffee leading-tight"
style={{ fontSize: '1.2rem' }}
className="font-display font-semibold text-coffee uppercase tracking-wide leading-tight"
style={{ fontSize: '1.25rem' }}
>
{category.label[l]}
</h2>
{/* Item count badge */}
<span
className="font-body text-[0.65rem] font-semibold tracking-widest text-muted mt-0.5"
>
({category.items.length})
</span>
</div>
{/* Item count badge */}
<span
className="flex-shrink-0 font-body text-[0.6rem] font-semibold tracking-widest uppercase rounded-full px-2.5 py-0.5"
style={{
color: '#8A7265',
background: 'rgba(61,43,31,0.07)',
border: '1px solid rgba(61,43,31,0.10)',
}}
>
{category.items.length}
</span>
</div>
{/* Decorative divider */}
<div className="flex items-center gap-2 ml-1">
<div className="w-1.5 h-1.5 rounded-full bg-teal opacity-70" />
<div
className="flex-1 h-px"
style={{
background:
'linear-gradient(90deg, rgba(74,175,168,0.40) 0%, rgba(212,200,176,0.40) 60%, transparent 100%)',
}}
/>
<div className="w-1 h-1 rounded-full bg-gold opacity-50" />
</div>
</div>
{/* Items card */}
<div
className="rounded-2xl overflow-hidden"
style={{
background: 'rgba(253,250,245,0.72)',
border: '1px solid rgba(212,200,176,0.60)',
backdropFilter: 'blur(8px)',
WebkitBackdropFilter: 'blur(8px)',
boxShadow:
'0 2px 16px rgba(61,43,31,0.06), 0 1px 3px rgba(61,43,31,0.04)',
}}
>
{/* Thin top gradient line */}
{/* Minimalist divider */}
<div
className="h-px w-full"
className="w-full h-px"
style={{
background:
'linear-gradient(90deg, transparent, rgba(74,175,168,0.35), transparent)',
background: 'linear-gradient(90deg, rgba(61,43,31,0.15) 0%, transparent 100%)',
}}
/>
</div>
<div className="px-4 pb-1 pt-0.5">
{category.items.map((item, i) => (
<MenuItemRow
key={item.id}
item={item}
lang={lang}
currency={currency}
index={i}
isLast={i === category.items.length - 1}
/>
))}
</div>
{/* Items list (no background card) */}
<div className="flex flex-col gap-1">
{category.items.map((item, i) => (
<MenuItemRow
key={item.id}
item={item}
lang={lang}
currency={currency}
index={i}
isLast={i === category.items.length - 1}
/>
))}
</div>
</section>
)