/* global Icon */ // Features page — deep dive on every capability. Anchored long-scroll. const { useState: useStateFT, useEffect: useEffectFT } = React; const FT_GROUPS = [ { id: 'service', label: 'Run service', color: 'var(--accent)', features: [ { id:'register', name:'Register (POS)', desc:'Adaptive density, shift mode, splits & comps.' }, { id:'kds', name:'Kitchen display', desc:'Tickets, wait timers, station routing.' }, { id:'shiftmode', name:'Shift mode', desc:'PIN-locked full-screen POS for the floor.' }, { id:'orders', name:'Orders', desc:'Table service, takeaway, delivery in one view.' }, ], }, { id: 'menu', label: 'Menu & inventory', color: 'var(--accent-3)', features: [ { id:'menustudio', name:'Menu Studio', desc:'AI import, photo generation, atomic publish.' }, { id:'inventory', name:'Inventory', desc:'Ingredients, recipes, auto-decrement, par levels.' }, { id:'discounts', name:'Discounts', desc:'Happy hour, staff meals, coupons, combos.' }, ], }, { id: 'reach', label: 'Reach guests', color: 'var(--accent-2)', features: [ { id:'website', name:'Website builder', desc:'Puck-based visual editor, AI remix, fast CDN.' }, { id:'qr', name:'QR table ordering', desc:'Guest to paid in 10 seconds.' }, { id:'directory', name:'Public directory', desc:'SEO listing, network link juice.' }, { id:'events', name:'Events studio', desc:'Ticketed events, private dining, deposits.' }, ], }, { id: 'guests', label: 'Guest flow', color: 'var(--accent-2)', features: [ { id:'reservations', name:'Reservations', desc:'Day view, SMS reminders, table auto-assign.' }, { id:'tables', name:'Tables & QR', desc:'Floor plan, QR codes per table.' }, { id:'guestorder', name:'Guest order', desc:'Self-serve ordering on the guest device.' }, ], }, { id: 'team', label: 'Manage the team', color: 'var(--accent)', features: [ { id:'team', name:'Schedule & roles', desc:'Drag-to-copy, recurring shifts, roles & pay.' }, { id:'timesheets', name:'Timesheets', desc:'Clock in, breaks, overtime, approvals.' }, { id:'employeeapp', name:'Employee app', desc:'Onboarding, shifts, requests, earnings.' }, { id:'availability', name:'Availability', desc:'Staff submit, managers approve with a note.' }, ], }, { id: 'business', label: 'Run the business', color: 'var(--accent-3)', features: [ { id:'analytics', name:'Analytics', desc:'Revenue, covers, labor %, turn time.' }, { id:'feedback', name:'Guest feedback', desc:'Emoji capture, tag sentiment, movers.' }, { id:'payments', name:'Payments', desc:'Stripe, SumUp, Viva, Adyen — your choice.' }, { id:'dashboard', name:'Dashboard', desc:'Morning numbers in one glance.' }, { id:'settings', name:'Settings & permissions', desc:'Roles, audit log, device management.' }, ], }, ]; const FTEyebrow = ({ children, color = 'var(--accent)' }) => (
{children}
); // Sidebar TOC const FTSidebar = ({ active, onJump }) => ( ); // ────────────────────────────────────────────────────────────── // Individual feature sections // ────────────────────────────────────────────────────────────── const FSection = ({ id, eyebrow, color, title, lede, bullets, mockup, reverse }) => (
{eyebrow}

{title}

{lede}

{bullets && (
    {bullets.map((b,i) => (
  • {b}
    • ))}
)}
{mockup}
); // Mockups (reused & themed per feature) const MockRegister = () => (
TABLE 4 · NORA · 22m ACTIVE
{['All','Coffee','Brunch','Pastry','Cocktails'].map((c,i) => ( {c} ))}
{['Flat white','Cortado','Espresso','Avocado toast','Pistachio bun','Almond crois.'].map((n,i) => (
{n}
))}
2 people · Nora
{[ { n:'Flat White', sub:'Oat milk', q:2, p:'€7.60' }, { n:'Avocado toast', sub:'+ Egg', q:1, p:'€11.00' }, { n:'Pistachio bun', sub:'', q:2, p:'€8.40' }, ].map((r,i) => (
0 ? '1px solid var(--line)' : '0', display:'flex', gap:8, alignItems:'center' }}>
{r.n}
{r.sub &&
{r.sub}
}
×{r.q} {r.p}
))}
Total€27.00
Split
Charge €27.00
); const MockKDS = () => (
{[ { label:'New', n:2, color:'var(--accent-3)' }, { label:'Preparing', n:3, color:'var(--accent)' }, { label:'Ready', n:2, color:'var(--ok)' }, ].map(c => (
{c.label}
{c.n}
))}
{[ { id:'#412', t:'T3 · 4 guests', wait:'0:24', tone:'var(--ok)', items:['2× Pan de cristal','1× Burnt leeks','2× Cod à la brasa'] }, { id:'#408', t:'T6 · 6 guests', wait:'9:24', tone:'var(--warn)', items:['3× Cod à la brasa','3× Olive oil cake'] }, ].map((o,i) => (
{o.id} · {o.t} {o.wait}
{o.items.map((it,j) =>
{it}
)}
✓ Ready
Delay
))}
); const MockSchedule = () => (
Week of Apr 20 ↻ 24 recurring
{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d =>
{d}
)}
{[ { name:'Lucía', role:'Server' }, { name:'Marco', role:'Bar' }, { name:'Karim', role:'Kitchen' }, { name:'Nora', role:'Server' }, ].map((p,i) => (
0 ? '1px solid var(--line)' : '0', alignItems:'center' }}>
{p.name}
{p.role}
{[0,1,2,3,4,5,6].map(d => { const has = (i+d) % 3 !== 1; return (
{has &&
10-17
}
); })}
))}
); const MockInventory = () => (
{[ { l:'Tracked', v:'20', color:'var(--ink)' }, { l:'Low stock', v:'2', color:'var(--warn)' }, { l:'Out', v:'1', color:'var(--danger)' }, ].map(c => (
{c.l}
{c.v}
))}
{[ { n:'Eggs (large)', unit:'each', sku:'PRZ-20', sup:'Green Farms', on:'60/72', s:'In stock', color:'var(--ok)' }, { n:'Lamb shoulder', unit:'kg', sku:'MT-22', sup:'Prime Meat', on:'5.8/12', s:'Low', color:'var(--warn)' }, { n:'Octopus', unit:'kg', sku:'SEA-11', sup:'Coastal', on:'0/4', s:'Out', color:'var(--danger)' }, ].map((it,i) => (
0 ? '1px solid var(--line)' : '0', display:'flex', alignItems:'center', gap:10 }}>
{it.n}
{it.sku} · {it.unit} · {it.sup}
{it.on}
{it.s}
))}
); const MockMenuStudio = () => (
AI generating 12 photos
{[0,1,2,3,4,5,6,7].map(i => (
{i >= 5 && (
)}
))}
8 of 12 generatedest. 42s remaining
); const MockReservations = () => (
Tonight · 24 reservations · 68 covers
{[ { t:'19:00', n:'Mendoza party', s:4, tag:'Birthday', color:'var(--accent)' }, { t:'19:30', n:'Walk-in', s:2, tag:null }, { t:'19:30', n:'Katz', s:6, tag:'Gluten-free', color:'var(--ok)' }, { t:'20:00', n:'Fabri', s:3, tag:null }, { t:'20:00', n:'Kowalski', s:2, tag:'Anniversary', color:'var(--accent-3)' }, ].map((r,i) => (
0 ? '1px solid var(--line)' : '0', display:'flex', gap:12, alignItems:'center' }}>
{r.t}
{r.n}
{r.s} guests · Table {['4','12','6','8','2'][i]}
{r.tag && {r.tag}}
))}
); const MockQR = () => (
CASA LUPE · TABLE 4
Tonight's menu
{[ ['Pan de cristal','€5.00'],['Pulpo gallego','€18.00'], ['Cordero al horno','€24.00'],['Tarta de queso','€8.00'], ].map(([n,p],i) => (
{n}
{p}
))}
Pay €55.00 with Apple Pay
); const MockWebsite = () => (
{['#E84C3D','#F1C40F','#2ECC71'].map((c,i) => )}
casalupe.es
Bilbao · est. 2019
Casa Lupe
A neighborhood tavern. Wood fire. Natural wine. Whatever Paco brought back from the market.
Reserve a table View menu
{[0,1,2].map(i => (
))}
); const MockAnalytics = () => (
Revenue · today
€1,248
↑ +18% vs last week
{['08','10','12','14','16','18','20','22'].map(t => {t})}
{[ { l:'Orders', v:'74', c:'+9%', up:true }, { l:'Covers', v:'112', c:'-4%', up:false }, { l:'Avg check', v:'€16.86', c:'+2%', up:true }, ].map((s,i) => (
{s.l}
{s.v}
{s.up?'↑':'↓'} {s.c}
))}
); const MockFeedback = () => (
Feedback · last 7 days
4.6 / 5
↑ +0.3 vs prior
142
responses
68%
loved it
Movers this week
{[ { n:'Pulpo gallego', prev:'4.8', cur:'4.2', dir:'down', color:'var(--danger)', count:'11 responses' }, { n:'Cordero al horno', prev:'4.3', cur:'4.8', dir:'up', color:'var(--ok)', count:'14 responses' }, ].map((d,i) => (
{d.dir === 'up' ? '↑' : '↓'}
{d.n}
{d.prev} → {d.cur} · {d.count}
))}
Tag sentiment
{[ { t:'Food', l:68, g:24, b:8, count:46 }, { t:'Service', l:54, g:36, b:10, count:38 }, { t:'Speed', l:28, g:30, b:42, count:18 }, { t:'Atmosphere', l:80, g:18, b:2, count:24 }, ].map((row,i) => (
{row.t} {row.count} mentions
))}
); const MockEmployeeApp = () => (
CL
Casa Lupe
Team onboarding
{[1,1,1,0,0,0].map((f,i) =>
)}
Set your PIN
Used to clock in at the register.
{[1,1,1,0].map((f,i) => )}
{['1','2','3','4','5','6','7','8','9'].map(k => (
{k}
))}
); const MockDirectory = () => (
Bilbao · Wine bars · 24 venues
{[ { n:'Casa Lupe', cat:'Neighborhood tavern · San Francisco', r:'4.8' }, { n:'Marigold', cat:'Natural wine bar · Deusto', r:'4.9' }, { n:'LOAM', cat:'Seasonal · Indautxu', r:'4.7' }, ].map((v,i) => (
0 ? '1px solid var(--line)' : '0', display:'flex', alignItems:'center', gap:12 }}>
{v.n}
{v.cat}
★ {v.r}
))}
); // ────────────────────────────────────────────────────────────── // Root Features page // ────────────────────────────────────────────────────────────── const Features = ({ go }) => { const [active, setActive] = useStateFT('register'); useEffectFT(() => { const ids = FT_GROUPS.flatMap(g => g.features.map(f => f.id)); const handler = () => { let best = ids[0]; for (const id of ids) { const el = document.getElementById(id); if (!el) continue; const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.35) best = id; } setActive(best); }; window.addEventListener('scroll', handler, { passive: true }); handler(); return () => window.removeEventListener('scroll', handler); }, []); const jump = (id) => { const el = document.getElementById(id); if (!el) return; el.scrollIntoView({ behavior:'smooth', block:'start' }); }; return (
{/* Header nav */}
{/* Hero */}
Product details

Every feature,
examined.

This page is the pitch's long version. Every screen in Vividish, why it exists, what it does, and who it's for. Jump around with the sidebar — or read top to bottom like a novel.

{/* Body: sidebar + content */}
{/* Run service */} } /> } reverse /> } /> } reverse /> {/* Menu & inventory */} } /> } reverse /> } /> {/* Reach */} } reverse /> } /> } reverse /> } /> {/* Guest flow */} } /> } reverse /> } /> {/* Team */} } /> } reverse /> } /> } reverse /> {/* Business */} } /> } /> } reverse /> } /> } reverse />
{/* CTA */}

Ready to see it running your venue?

Start free for 30 days. We'll import your menu, set up your QR codes, and stay on a call until your first order goes through.

{window.LND_Footer && }
); }; window.Features = Features;