Polish Tray landing proof sections

Author: thribhuvan003

public/demo/admin.html

@@ -707,6 +707,10 @@ <h3 id="menuModalTitle">Menu manager</h3>
 let feedStudents = [];
 let auditEvents = [];
 let orderCounter = 2425;
+const bootCanteen = TD.getCanteen(currentTenantId);
+feedItems = bootCanteen.feedItems.slice();
+feedStudents = bootCanteen.studentRows.map(function (s) { return s.name; });
+orderCounter = bootCanteen.counterBase || orderCounter;
 
 const $ = (q) => document.querySelector(q);
 const $$ = (q) => document.querySelectorAll(q);
@@ -846,7 +850,7 @@ <h3 id="menuModalTitle">Menu manager</h3>
 ];
 function nextId(){ return ++orderCounter; }
 function prevId(n=1){ return orderCounter - n; }
-function pick(arr){ return arr[Math.floor(Math.random()*arr.length)]; }
+function pick(arr, fallback){ return arr && arr.length ? arr[Math.floor(Math.random()*arr.length)] : fallback; }
 function fmtT(d){ return String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0')+':'+String(d.getSeconds()).padStart(2,'0'); }
 
 const ICON_LABELS = {order:'NEW',pay:'PAY',prep:'PREP',ready:'READY',handover:'DONE',menu:'MENU',reject:'WARN'};

public/demo/demo-canteens.js

@@ -45,7 +45,25 @@
 
   function getSpecials(canteenId) {
     try {
-      return JSON.parse(localStorage.getItem(specialsKey(canteenId)) || "[]");
+      var list = JSON.parse(localStorage.getItem(specialsKey(canteenId)) || "[]");
+      if (!Array.isArray(list)) return [];
+      var now = Date.now();
+      return list.map(function (s, i) {
+        var addedAt = Number(s && s.addedAt);
+        if (!addedAt || now - addedAt > 90 * 60 * 1000 || addedAt > now) {
+          addedAt = now - (6 + i * 8) * 60 * 1000;
+        }
+        return {
+          id: String((s && s.id) || ("sp-" + i)),
+          name: String((s && s.name) || "Chef special"),
+          desc: String((s && s.desc) || "Fresh counter special"),
+          price: Number((s && s.price) || 120),
+          prep: Number((s && s.prep) || 6),
+          diet: (s && s.diet) === "nonveg" ? "nonveg" : "veg",
+          icon: String((s && s.icon) || ((s && s.name) ? s.name.charAt(0) : "S")).slice(0, 2).toUpperCase(),
+          addedAt: addedAt,
+        };
+      });
     } catch (_) {
       return [];
     }

public/demo/index.html

@@ -745,11 +745,11 @@ <h4>Product</h4>
     </div>
     <div>
       <h4>Resources</h4>
-      <div class="links"><a href="https://github.com/thribhuvan003/Tray#readme" target="_blank" rel="noopener">Spec sheet</a><a href="https://github.com/thribhuvan003/Tray/tree/main/supabase/migrations" target="_blank" rel="noopener">Schema</a><a href="https://github.com/thribhuvan003/Tray/tree/main/src/app/api" target="_blank" rel="noopener">API · v1</a><a href="https://github.com/thribhuvan003/Tray/commits/production-ui-fidelity" target="_blank" rel="noopener">Changelog</a></div>
+      <div class="links"><a href="https://github.com/thribhuvan003/trayy#readme" target="_blank" rel="noopener">Spec sheet</a><a href="https://github.com/thribhuvan003/trayy/tree/main/supabase/migrations" target="_blank" rel="noopener">Schema</a><a href="https://github.com/thribhuvan003/trayy/tree/main/src/app/api" target="_blank" rel="noopener">API · v1</a><a href="https://github.com/thribhuvan003/trayy/commits/main" target="_blank" rel="noopener">Changelog</a></div>
     </div>
     <div>
       <h4>Contact</h4>
-      <div class="links"><a href="mailto:thribhuvan003@gmail.com">hello@tray.dev</a><a href="https://github.com/thribhuvan003/Tray" target="_blank" rel="noopener">github.com/thribhuvan003/Tray</a><a href="https://github.com/thribhuvan003" target="_blank" rel="noopener">@thribhuvan003</a></div>
+      <div class="links"><a href="mailto:thribhuvan003@gmail.com">thribhuvan003@gmail.com</a><a href="https://github.com/thribhuvan003/trayy" target="_blank" rel="noopener">github.com/thribhuvan003/trayy</a><a href="https://github.com/thribhuvan003" target="_blank" rel="noopener">@thribhuvan003</a></div>
     </div>
   </div>
   <div class="footer-mark">tra<span class="it">y</span></div>

src/app/get-started/page.tsx

@@ -38,7 +38,12 @@ export default async function GetStartedPage({
         },
       }
     );
-    const { data: { session: _gsSession } } = await supabase.auth.getSession();
+    const { data: { session: _gsSession } } = await Promise.race([
+      supabase.auth.getSession(),
+      new Promise<Awaited<ReturnType<typeof supabase.auth.getSession>>>((resolve) =>
+        setTimeout(() => resolve({ data: { session: null }, error: null }), 1200),
+      ),
+    ]);
     if (_gsSession?.user) isSignedIn = true;
   } catch {
     // Show wizard anyway

src/app/globals.css

@@ -577,18 +577,19 @@ select option {
    ════════════════════════════════════════════════════════════════════ */
 
 :root {
-  --tray-bg:      #f4f0e6;
-  --tray-surface: #ebe6da;
-  --tray-surface-strong: #faf8f3;
-  --tray-ink:     #12151a;
-  --tray-muted:   #5c636b;
-  --tray-accent:  #1a5c45;
-  --tray-clay:    #9a4e28;
-  --tray-green:   #1a5c45;
-  --tray-border:  rgba(18, 21, 26, 0.1);
-  --tray-border-strong: rgba(18, 21, 26, 0.18);
-  --tray-cream:   #faf8f3;
-  --tray-shadow:  rgba(18, 21, 26, 0.06);
+  --tray-bg:      #eef2ed;
+  --tray-surface: #dde6df;
+  --tray-surface-strong: #fbfcf8;
+  --tray-ink:     #101419;
+  --tray-muted:   #56626a;
+  --tray-accent:  #155f47;
+  --tray-clay:    #c14822;
+  --tray-blue:    #244ed8;
+  --tray-green:   #155f47;
+  --tray-border:  rgba(16, 20, 25, 0.11);
+  --tray-border-strong: rgba(16, 20, 25, 0.22);
+  --tray-cream:   #fbfcf8;
+  --tray-shadow:  rgba(16, 20, 25, 0.08);
 
   --font-display-cond: var(--font-dm-serif), Georgia, serif;
   --font-editorial: var(--font-dm-serif), Georgia, serif;
@@ -604,7 +605,7 @@ select option {
   --font-hero-display: var(--font-clash), system-ui, sans-serif;
   --font-hero-accent:  var(--font-clash), system-ui, sans-serif;
   --font-hero-ui:      var(--font-switzer), system-ui, sans-serif;
-  --font-hero-mono:    var(--font-space-mono), ui-monospace, monospace;
+  --font-hero-mono:    var(--font-dm-mono), ui-monospace, monospace;
   --font-hero-punch:   var(--font-clash), system-ui, sans-serif;
   --font-editorial:    var(--font-hero-display);
   --font-ui:           var(--font-hero-ui);
@@ -770,18 +771,146 @@ select option {
 .tray-page {
   min-height: 100svh;
   background:
-    linear-gradient(180deg, rgba(26, 92, 69, 0.04) 0%, transparent 18rem),
+    linear-gradient(180deg, rgba(36, 78, 216, 0.07) 0%, transparent 19rem),
+    linear-gradient(120deg, transparent 0%, rgba(21, 95, 71, 0.08) 48%, transparent 78%),
     repeating-linear-gradient(
       90deg,
-      rgba(18, 21, 26, 0.018) 0,
-      rgba(18, 21, 26, 0.018) 1px,
+      rgba(16, 20, 25, 0.026) 0,
+      rgba(16, 20, 25, 0.026) 1px,
       transparent 1px,
-      transparent 72px
+      transparent 80px
     ),
     var(--tray-bg);
   color: var(--tray-ink);
 }
 
+.tl-section-bridge {
+  position: relative;
+  height: 28px;
+  margin: -14px auto;
+  max-width: 80rem;
+  pointer-events: none;
+}
+.tl-section-bridge::before {
+  content: "";
+  position: absolute;
+  left: 1.25rem;
+  right: 1.25rem;
+  top: 50%;
+  height: 1px;
+  background:
+    linear-gradient(90deg, transparent, var(--tray-border-strong) 16%, var(--tray-clay) 50%, var(--tray-border-strong) 84%, transparent);
+}
+.tl-section-bridge::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  border: 1px solid var(--tray-clay);
+  background: var(--tray-bg);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* Section-specific type direction: each band gets a distinct voice while
+   retaining the same spacing/grid system. */
+.tl-hero {
+  --font-editorial: var(--font-clash), system-ui, sans-serif;
+  --font-ui: var(--font-switzer), system-ui, sans-serif;
+  --font-code: var(--font-dm-mono), ui-monospace, monospace;
+}
+.tl-hero h1 {
+  letter-spacing: -0.035em;
+}
+.tl-hero [style*="tabular-nums"],
+.tl-hero .font-code {
+  font-variant-numeric: tabular-nums;
+}
+
+.tl-metrics {
+  --font-editorial: var(--font-newsreader), ui-serif, Georgia;
+  --font-ui: var(--font-hanken), system-ui, sans-serif;
+  --font-code: var(--font-space-mono), ui-monospace, monospace;
+}
+.tl-metrics .font-cormorant {
+  font-family: var(--font-newsreader), ui-serif, Georgia !important;
+}
+.tl-metrics .font-bricolage {
+  font-family: var(--font-hanken), system-ui, sans-serif !important;
+}
+.tl-metrics p {
+  font-variant-numeric: tabular-nums;
+}
+
+.tl-trust {
+  --font-editorial: var(--font-unbounded), system-ui, sans-serif;
+  --font-ui: var(--font-jakarta), system-ui, sans-serif;
+  --font-code: var(--font-dm-mono), ui-monospace, monospace;
+}
+.tl-trust .font-cormorant {
+  font-family: var(--font-unbounded), system-ui, sans-serif !important;
+}
+.tl-trust .font-bricolage {
+  font-family: var(--font-jakarta), system-ui, sans-serif !important;
+}
+.tl-trust h2 {
+  letter-spacing: -0.045em;
+}
+
+.tl-sync {
+  --font-editorial: var(--font-krona-one), system-ui, sans-serif;
+  --font-ui: var(--font-switzer), system-ui, sans-serif;
+  --font-code: var(--font-jetbrains), ui-monospace, monospace;
+}
+.tl-sync h2 {
+  letter-spacing: -0.015em;
+}
+
+.tl-kitchen-proof {
+  --font-editorial: var(--font-newsreader), ui-serif, Georgia;
+  --font-ui: var(--font-hanken), system-ui, sans-serif;
+  --font-code: var(--font-dm-mono), ui-monospace, monospace;
+}
+.tl-built-with {
+  --font-editorial: var(--font-unbounded), system-ui, sans-serif;
+  --font-ui: var(--font-jakarta), system-ui, sans-serif;
+  --font-code: var(--font-jetbrains), ui-monospace, monospace;
+  background:
+    radial-gradient(circle at 12% 20%, rgba(193, 72, 34, 0.08), transparent 26rem),
+    linear-gradient(180deg, var(--tray-cream) 0%, var(--tray-bg) 100%);
+}
+
+.tl-closing {
+  --font-editorial: var(--font-barlow), system-ui, sans-serif;
+  --font-ui: var(--font-hanken), system-ui, sans-serif;
+  --font-code: var(--font-space-mono), ui-monospace, monospace;
+}
+.tl-closing h2 {
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.tray-landing :is(h1, h2, h3, p, a, button, span) {
+  text-wrap: pretty;
+}
+.tray-landing :is(.font-code, .tl-nav-link) {
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 640px) {
+  .tray-landing {
+    --section-y: 2.75rem;
+  }
+  .tl-section-bridge {
+    height: 20px;
+    margin: -10px auto;
+  }
+  .tl-hero h1 {
+    letter-spacing: -0.028em;
+  }
+}
+
 /* ── Utility classes ─────────────────────────────────────────────── */
 .font-editorial { font-family: var(--font-editorial); }
 .font-cond      { font-family: var(--font-display-cond); }

src/components/landing/landing-page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import type { ResolvedTenant } from "@/lib/tenant";
 import { LandingIntro } from "@/components/landing/LandingIntro";
 import { LandingMotion } from "@/components/landing/landing-motion";
+import { BuiltWithSection } from "@/components/landing/sections/BuiltWithSection";
 import { CampusModelSection } from "@/components/landing/sections/CampusModelSection";
 import { ClosingSection } from "@/components/landing/sections/ClosingSection";
 import { CampusTicker } from "@/components/landing/sections/MetricsAndTicker";
@@ -152,19 +153,29 @@ export function LandingPage({ tenant }: { tenant: ResolvedTenant | null }) {
 
       <main id="main">
         <TrayHero />
+        <div className="tl-section-bridge" aria-hidden />
         <SectionFx variant="rise">
           <CampusTicker />
         </SectionFx>
+        <div className="tl-section-bridge" aria-hidden />
         <SectionFx variant="blur-rise">
           <PiranhaPortalsSection />
         </SectionFx>
+        <div className="tl-section-bridge" aria-hidden />
         <CampusModelSection campusName={campusName} />
+        <div className="tl-section-bridge" aria-hidden />
         <SectionFx variant="slide-left">
           <TrustSection />
         </SectionFx>
+        <div className="tl-section-bridge" aria-hidden />
         <SectionFx variant="slide-right">
           <SyncSection />
         </SectionFx>
+        <div className="tl-section-bridge" aria-hidden />
+        <SectionFx variant="blur-rise">
+          <BuiltWithSection />
+        </SectionFx>
+        <div className="tl-section-bridge" aria-hidden />
         <SectionFx variant="blur-rise">
           <ClosingSection />
         </SectionFx>
@@ -212,9 +223,9 @@ export function LandingPage({ tenant }: { tenant: ResolvedTenant | null }) {
               <p className="font-code mb-5 text-[0.85rem] font-bold uppercase tracking-[0.22em] text-[var(--tray-muted)]">Product</p>
               <ul className="flex flex-col gap-3 text-[1.05rem]">
                 {[
-                  ["Student view", "/login?role=student"],
-                  ["Kitchen view", "/login?role=kitchen"],
-                  ["Admin view", "/login?role=owner"],
+                  ["Student view", "/demo/student.html"],
+                  ["Kitchen view", "/demo/kitchen.html"],
+                  ["Admin view", "/demo/admin.html"],
                   ["Get started", "/get-started"],
                 ].map(([label, href]) => (
                   <li key={label}>
@@ -231,9 +242,9 @@ export function LandingPage({ tenant }: { tenant: ResolvedTenant | null }) {
               <p className="font-code mb-5 text-[0.85rem] font-bold uppercase tracking-[0.22em] text-[var(--tray-muted)]">Resources</p>
               <ul className="flex flex-col gap-3 text-[1.05rem]">
                 {[
-                  ["README", "https://github.com/thribhuvan003/Tray/blob/main/README.md"],
-                  ["Architecture", "https://github.com/thribhuvan003/Tray/tree/main/docs/adr"],
-                  ["Security", "https://github.com/thribhuvan003/Tray/blob/main/SECURITY.md"],
+                  ["README", "https://github.com/thribhuvan003/trayy/blob/main/README.md"],
+                  ["Architecture", "https://github.com/thribhuvan003/trayy/tree/main/docs/adr"],
+                  ["Security", "https://github.com/thribhuvan003/trayy/blob/main/SECURITY.md"],
                 ].map(([label, href]) => (
                   <li key={label}>
                     <a href={href} target="_blank" rel="noreferrer" className="tl-footer-link-item opacity-75 font-semibold">