From c0544251b8223f256647b918e068b878b0297a21 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Thu, 20 Aug 2026 03:46:41 +0300
Subject: [PATCH] feat(themes): add Eleia Coastal Kitchen Mediterranean Aegean
 design system

---
 apps/api/src/routes/restaurants.ts            |  1 +
 .../components/menu/ThemeSelectorSheet.tsx    | 12 ++++
 apps/web/src/components/PublicMenuClient.tsx  | 72 ++++++++++++++++++-
 apps/web/src/lib/theme.ts                     | 19 +++++
 4 files changed, 101 insertions(+), 3 deletions(-)

diff --git a/apps/api/src/routes/restaurants.ts b/apps/api/src/routes/restaurants.ts
index 0771cd9..cfb18cb 100644
--- a/apps/api/src/routes/restaurants.ts
+++ b/apps/api/src/routes/restaurants.ts
@@ -156,6 +156,7 @@ export const restaurantsRoutes: FastifyPluginAsync = async (app) => {
     }
 
     const THEME_NAMES: Record<string, string> = {
+      coastal: "Eleia Coastal Kitchen",
       neon: "Neon Street Fuze",
       maison: "La Maison d'Élève",
       swiss: "Swiss Brutalist",
diff --git a/apps/mobile/src/components/menu/ThemeSelectorSheet.tsx b/apps/mobile/src/components/menu/ThemeSelectorSheet.tsx
index eb2e855..84f07f2 100644
--- a/apps/mobile/src/components/menu/ThemeSelectorSheet.tsx
+++ b/apps/mobile/src/components/menu/ThemeSelectorSheet.tsx
@@ -31,6 +31,18 @@ export interface ThemeOption {
 }
 
 export const THEME_OPTIONS: ThemeOption[] = [
+  {
+    key: "coastal",
+    name: "Eleia Coastal Kitchen",
+    category: "Akdeniz & Ege / Sahil",
+    color: "#BF614B",
+    badgeBg: "#656D4A",
+    badgeText: "#FFFFFF",
+    bgPreview: "#F7F3EC",
+    accent: "Pişmiş Toprak & Zeytin Yeşili",
+    desc: "Yunan & Roma antik serif tipografi (Cinzel), zeytin dalı kanat çizgileri, yıldız şeritli deniz mahsulleri kartları.",
+    suitableFor: "Ege ve Akdeniz balıkçıları, sahil bistroları, Yunan meyhaneleri, İtalyan trattorialar",
+  },
   {
     key: "neon",
     name: "Neon Street Fuze",
diff --git a/apps/web/src/components/PublicMenuClient.tsx b/apps/web/src/components/PublicMenuClient.tsx
index d2612ce..c2adae1 100644
--- a/apps/web/src/components/PublicMenuClient.tsx
+++ b/apps/web/src/components/PublicMenuClient.tsx
@@ -171,6 +171,9 @@ export function PublicMenuClient({
 
       {/* Main Container - Optimized for Mobile First & Desktop Centered */}
       <div className="w-full max-w-2xl mx-auto min-h-screen flex flex-col shadow-2xl relative">
+        {/* Top Terracotta Stripe for Coastal theme */}
+        {theme.key === "coastal" && <div className="h-1.5 w-full bg-[#BF614B]"></div>}
+
         {/* Header Hero Banner */}
         <header
           style={{ background: theme.headerGradient }}
@@ -315,7 +318,7 @@ export function PublicMenuClient({
           <div className="bg-stone-900 text-white px-5 py-4 border-b border-stone-800 animate-slide-up">
             <div className="flex items-center justify-between mb-3">
               <p className="text-xs font-bold uppercase tracking-wider text-stone-400">
-                Canlı Tema Önizleme (9 Şablon)
+                Canlı Tema Önizleme (10 Şablon)
               </p>
               <button
                 type="button"
@@ -325,7 +328,7 @@ export function PublicMenuClient({
                 Kapat ✕
               </button>
             </div>
-            <div className="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-9 gap-2">
+            <div className="grid grid-cols-2 sm:grid-cols-5 md:grid-cols-10 gap-2">
               {Object.values(THEME_PRESETS).map((preset) => {
                 const isSelected = selectedThemeKey === preset.key;
                 return (
@@ -427,12 +430,13 @@ export function PublicMenuClient({
               const isSwiss = theme.key === "swiss";
               const isMaison = theme.key === "maison";
               const isNeon = theme.key === "neon";
+              const isCoastal = theme.key === "coastal";
 
               return (
                 <section
                   key={category.id}
                   id={`category-${category.id}`}
-                  className={isSwiss ? "scroll-mt-28 space-y-0" : isMaison ? "scroll-mt-28 space-y-4" : isNeon ? "scroll-mt-28 space-y-3.5" : "scroll-mt-28 space-y-3.5"}
+                  className={isSwiss ? "scroll-mt-28 space-y-0" : isMaison ? "scroll-mt-28 space-y-4" : isCoastal ? "scroll-mt-28 space-y-4" : "scroll-mt-28 space-y-3.5"}
                 >
                   {/* Category Heading Banner */}
                   {isSwiss ? (
@@ -473,6 +477,14 @@ export function PublicMenuClient({
                         <div className="absolute right-0 -top-[2px] w-1.5 h-1.5 bg-[#24463A] rounded-full"></div>
                       </div>
                     </div>
+                  ) : isCoastal ? (
+                    <div className="sticky top-[58px] z-20 bg-[#F7F3EC]/95 backdrop-blur-xl border-b border-[#E4DBCF] py-3.5 px-3 flex items-center justify-center gap-3.5 transition-all">
+                      <div className="w-12 sm:w-20 h-[1px] bg-[#656D4A]/50"></div>
+                      <h2 className="text-sm sm:text-base font-serif font-bold uppercase tracking-[0.2em] text-[#1A1615]">
+                        {category.name}
+                      </h2>
+                      <div className="w-12 sm:w-20 h-[1px] bg-[#656D4A]/50"></div>
+                    </div>
                   ) : isNeon ? (
                     <div className="sticky top-[58px] z-20 bg-[#0D1117]/95 backdrop-blur-xl border-b border-pink-500/30 py-3 px-3 flex items-center justify-between transition-all shadow-[0_4px_20px_rgba(255,42,133,0.15)]">
                       <div>
@@ -524,6 +536,8 @@ export function PublicMenuClient({
                         ? "divide-y-2 divide-black border-b-2 border-black"
                         : isMaison
                         ? "grid grid-cols-1 gap-4"
+                        : isCoastal
+                        ? "grid grid-cols-1 gap-4"
                         : isNeon
                         ? "grid grid-cols-1 gap-3.5"
                         : theme.key === "artisan"
@@ -534,6 +548,58 @@ export function PublicMenuClient({
                     }
                   >
                     {category.menu_items.map((item, itemIndex) => {
+                      if (isCoastal) {
+                        return (
+                          <article
+                            key={item.id}
+                            onClick={() => setSelectedItem(item)}
+                            className="group bg-[#FCFAF6] border border-[#E4DBCF] rounded-2xl sm:rounded-3xl p-3 sm:p-4 grid grid-cols-12 gap-3 sm:gap-4 items-center relative shadow-sm cursor-pointer hover:shadow-md hover:border-[#BF614B]/40 transition-all duration-300"
+                          >
+                            {/* Image Column with Star Bookmark Ribbon */}
+                            <div className="col-span-5 relative h-36 sm:h-44 rounded-xl sm:rounded-2xl overflow-hidden bg-stone-100 flex-shrink-0">
+                              <div className="absolute top-0 left-2.5 bg-[#BF614B] text-white px-1.5 py-1 rounded-b-md shadow-md z-10 text-[10px]">
+                                ★
+                              </div>
+                              {item.image_url ? (
+                                <img
+                                  src={item.image_url}
+                                  alt={item.name}
+                                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                                  loading="lazy"
+                                />
+                              ) : (
+                                <div className="w-full h-full flex items-center justify-center text-2xl opacity-40">
+                                  🌿
+                                </div>
+                              )}
+                            </div>
+
+                            {/* Content Column */}
+                            <div className="col-span-7 flex flex-col justify-between h-full py-0.5">
+                              <div>
+                                <div className="flex items-center gap-1 text-[#BF614B] text-[10px] sm:text-xs font-bold mb-1">
+                                  <span>★ Chef&apos;s Recommendation</span>
+                                </div>
+                                <h3 className="font-serif font-bold text-sm sm:text-base text-[#1A1615] uppercase tracking-wide leading-tight group-hover:text-[#BF614B] transition-colors mb-1 line-clamp-1">
+                                  {item.name}
+                                </h3>
+                                {item.description && (
+                                  <p className="font-serif text-xs text-[#4A443F] leading-snug line-clamp-2 mb-1.5 font-normal">
+                                    {item.description}
+                                  </p>
+                                )}
+                                <p className="text-[9px] sm:text-[10px] text-[#6B635B] leading-tight line-clamp-1">
+                                  <span className="font-bold text-[#4A443F]">İçerik:</span> Doğal sızma zeytinyağı, Ege otları, deniz tuzu.
+                                </p>
+                              </div>
+
+                              <div className="font-serif font-bold text-sm sm:text-base text-[#1A1615] mt-2 pt-1 border-t border-[#E4DBCF]/60">
+                                ₺{item.price.toFixed(0)}
+                              </div>
+                            </div>
+                          </article>
+                        );
+                      }
                       if (isNeon) {
                         return (
                           <article
diff --git a/apps/web/src/lib/theme.ts b/apps/web/src/lib/theme.ts
index 5aaca55..7b6b6dc 100644
--- a/apps/web/src/lib/theme.ts
+++ b/apps/web/src/lib/theme.ts
@@ -16,6 +16,25 @@ export interface ThemePreset {
 }
 
 export const THEME_PRESETS: Record<string, ThemePreset> = {
+  coastal: {
+    key: "coastal",
+    name: "Eleia Coastal Kitchen",
+    fontFamily: "serif",
+    config: {
+      primaryColor: "#BF614B",
+      background: "#F7F3EC",
+      productLayout: "card",
+      categoryLayout: "tabs",
+    },
+    cardBg: "#FCFAF6",
+    cardBorder: "#E4DBCF",
+    textPrimary: "#1A1615",
+    textSecondary: "#6B635B",
+    accentBg: "rgba(101, 109, 74, 0.12)",
+    headerGradient: "linear-gradient(180deg, #2D231E 0%, #1A1615 100%)",
+    badgeBg: "#656D4A",
+    badgeText: "#FFFFFF",
+  },
   neon: {
     key: "neon",
     name: "Neon Street Fuze",