// Sahh — product mockup components used across landing sections // Each one is a static, but pixel-honest, snapshot of a real product surface. // ============================================================ // DISH CARD — the centerpiece showing Sahh Score, calories, macros, tags // ============================================================ const DishCard = ({ s, dir, dark = false, compact = false, scoreSize = 92 }) => { const ar = dir === "rtl"; return (
{/* top row: dish + score */}
Sahh · Verified
{s.dishName}
{s.restaurant}
{/* Sahh score ring */}
{/* big calorie number */}
{s.cal}
{ar ? "سعرة · لكل حصة" : "kcal · per serving"}
{/* macros */}
{[ [ar ? "بروتين" : "Protein", s.protein], [ar ? "كارب" : "Carbs", s.carbs], [ar ? "دهون" : "Fat", s.fat], ].map(([k, v], i) => (
{k}
{v}
))}
{/* tags */}
{s.tags.map((tag, i) => ( {tag} ))}
); }; // ============================================================ // SAHH SCORE RING // ============================================================ const SahhScoreRing = ({ value, size = 92, dark = false }) => { const r = size / 2 - 6; const cir = 2 * Math.PI * r; const off = cir * (1 - value / 100); const trackColor = dark ? "rgba(255,255,255,0.12)" : "var(--paper-2)"; const fillColor = dark ? "var(--lime)" : "var(--green)"; return (
{value}
Sahh
); }; // ============================================================ // QR PATTERN // ============================================================ const QRPattern = ({ size = 120, color = "currentColor", bg = "transparent" }) => { // Pseudo-random but stable QR pattern const grid = 21; const cells = []; // Hash-based pattern let seed = 12345; const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }; const filled = new Set(); for (let y = 0; y < grid; y++) for (let x = 0; x < grid; x++) { if (rnd() > 0.5) filled.add(`${x},${y}`); } // Draw finder squares const isFinder = (x, y) => (x < 7 && y < 7) || (x > grid - 8 && y < 7) || (x < 7 && y > grid - 8); for (let y = 0; y < grid; y++) for (let x = 0; x < grid; x++) { if (isFinder(x, y)) continue; if (filled.has(`${x},${y}`)) cells.push([x, y]); } const drawFinder = (ox, oy) => ( ); return ( {bg !== "transparent" && } {cells.map(([x, y], i) => )} {drawFinder(0, 0)} {drawFinder(grid-7, 0)} {drawFinder(0, grid-7)} ); }; // ============================================================ // DASHBOARD MOCKUP — the hero right + section 04 // ============================================================ const DashboardMockup = ({ dir, compact = false }) => { const ar = dir === "rtl"; return (
{/* topbar */}
Sahh / {ar ? "نجد كيتشن" : "Najd Kitchen"}
app.sahh.sa/dashboard
{/* body */}
{/* sidebar */}
{ar ? "القائمة" : "Workspace"}
{[ ["chart", ar ? "نظرة عامة" : "Overview", false], ["chef", ar ? "الأطباق" : "Dishes", true], ["qr", ar ? "قوائم QR" : "QR menus", false], ["users", ar ? "الفروع" : "Locations", false], ["trend", ar ? "التحليلات" : "Analytics", false], ].map(([icon, label, active], i) => (
{label}
))}
{ar ? "معتمد" : "Verified"}
MoH · {ar ? "نشط" : "Active"}
{/* content */}
{ar ? "الأطباق" : "Dishes"} · {ar ? "كل الفروع" : "All locations"}
{ar ? "247 طبقاً معتمداً" : "247 dishes certified"}
+12 {ar ? "هذا الأسبوع" : "this week"}
{/* KPI strip */}
{[ [ar ? "متوسط مؤشر صح" : "Avg Sahh Score", "82", "+3"], [ar ? "مسحات اليوم" : "Scans today", "1,420", "+18%"], [ar ? "تباين السعرات" : "Calorie variance", "2.4%", "-0.8%"], [ar ? "شارات نشطة" : "Active QRs", "12", "stable"], ].map(([l, v, d], i) => (
{l}
{v}
{d}
))}
{/* dish list */}
{ar ? "الطبق" : "Dish"}
kcal
{ar ? "بروتين" : "Protein"}
{ar ? "مؤشر" : "Score"}
{ar ? "الحالة" : "Status"}
{[ [ar ? "بول دجاج مشوي" : "Grilled Chicken Bowl", 520, "42g", 86, "ok"], [ar ? "سلمون مع كينوا" : "Salmon Quinoa", 612, "44g", 91, "ok"], [ar ? "شاورما لحم" : "Beef Shawarma", 720, "38g", 64, "warn"], [ar ? "سلطة كيل سيزر" : "Kale Caesar", 380, "18g", 78, "ok"], [ar ? "مندي دجاج" : "Chicken Mandi", 890, "52g", 58, "warn"], ].map(([name, kcal, p, score, st], i) => (
{name}
{kcal}
{p}
= 80 ? "var(--green-tint)" : score >= 65 ? "var(--lime-soft)" : "#FFF1E6", color: score >= 80 ? "var(--green-2)" : score >= 65 ? "var(--green-3)" : "var(--warn)", fontFamily: "var(--f-mono)", }}>{score}
{st === "ok" ? (ar ? "معتمد" : "Live") : (ar ? "مراجعة" : "Review")}
))}
); }; // ============================================================ // QR CARD — what restaurants print on the table // ============================================================ const QRCard = ({ s, dir }) => { const ar = dir === "rtl"; return (
Sahh صحّ
{ar ? "قائمة معتمدة" : "Verified menu"}
{ar ? "امسح لرؤية التغذية" : "Scan to see nutrition"}
{ar ? "كل طبق · سعرات وماكروز ومؤشر صح" : "Every dish · calories, macros & Sahh Score"}
{ar ? "موثوق · وزارة الصحة" : "Verified · Ministry of Health"}
); }; window.DishCard = DishCard; window.SahhScoreRing = SahhScoreRing; window.QRPattern = QRPattern; window.DashboardMockup = DashboardMockup; window.QRCard = QRCard;