/* global React */
const { useEffect, useRef, useState } = React;
/* ——— Reveal hook (IntersectionObserver) ——— */
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal, .reveal-l, .reveal-r, .reveal-pop, .tentacle-path');
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.15 });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
});
}
/* ——— Logo ——— */
function TakoLogo({ size = 44 }) {
return (
Tako
);
}
/* ——— Sticky Navbar ——— */
function Navbar({ page, setPage }) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ id: 'home', label: 'Home' },
{ id: 'how', label: 'Come funziona' },
{ id: 'restaurant', label: 'Lato ristoratore' },
{ id: 'customer', label: 'Lato cliente' },
];
const go = (id) => (e) => { e.preventDefault(); setPage(id); window.scrollTo({ top: 0, behavior: 'smooth' }); };
return (
);
}
/* ——— Bubbles bg ——— */
function Bubbles({ count = 12 }) {
const arr = Array.from({ length: count });
return (
{arr.map((_, i) => {
const size = 12 + Math.random() * 28;
const left = Math.random() * 100;
const dur = 8 + Math.random() * 12;
const delay = -Math.random() * 12;
return (
);
}
/* ——— Hand-holding-phone (live app iframe behind hand PNG) ——— */
function HandPhone() {
const stageRef = useRef(null);
const slotRef = useRef(null);
const APP_W = 390;
useEffect(() => {
const stage = stageRef.current, slot = slotRef.current;
if (!stage || !slot) return;
const fit = () => stage.style.setProperty('--hp-scale', (slot.clientWidth / APP_W).toString());
fit();
const ro = new ResizeObserver(fit);
ro.observe(slot);
window.addEventListener('resize', fit, { passive: true });
return () => { ro.disconnect(); window.removeEventListener('resize', fit); };
}, []);
return (
);
}
/* ——— Hero ——— */
function Hero() {
return (
{/* decorative blobs */}
Il tuo ristorante,più smart.
Tako gestisce ordini, menu digitali e risponde ai tuoi clienti 24/7 con un'AI che conosce ogni piatto. Otto tentacoli, mille superpoteri.
{['#ED7159','#F5C065','#7FC4A8','#BDD9E8'].map((c,i)=>(
))}
{'★★★★★'.split('').map((s,i)=>({s} ))}
2.400+ ristoratori già a bordo
{/* Wavy bottom */}
);
}
/* ——— Trust marquee ——— */
function TrustTape() {
const items = ['Trattoria da Nino', 'Sushi Onda', 'Pizzeria Vesuvio', 'Caffè del Porto', 'Osteria Marina', 'Burger Lab', 'Gelateria Sole', 'Ramen Tora'];
return (
{[...items, ...items, ...items].map((t,i)=>(
{t}
★
))}
);
}
/* ——— Features ——— */
function Features() {
const cards = [
{ icon: '📲', title: 'Ordini digitali', desc: 'QR code al tavolo, ordini diretti in cucina. Zero attese, zero errori.', color: '#FFEEE8' },
{ icon: '📖', title: 'Menu interattivo', desc: 'Foto, allergeni, ingredienti e traduzioni in 12 lingue. Aggiorni in 2 click.', color: '#E8F4ED' },
{ icon: '🤖', title: 'AI Assistant', desc: 'Risponde ai clienti su intolleranze, abbinamenti e consigli. Sempre in turno.', color: '#FFF4E0' },
{ icon: '📊', title: 'Dashboard multi-device', desc: 'Da iPad, telefono o cassa: vedi tutto in tempo reale. Sincronizzato sempre.', color: '#EAF2F8' },
];
return (
Perché Tako
Quattro pinze. Mille soluzioni.
Tutto quello che serve al tuo ristorante in un unico posto. Senza pagare 4 abbonamenti diversi.
{cards.map((c, i) => (
))}
{/* Connecting tentacle SVG decoration */}
);
}
/* ——— Menu intelligente section (with chef Tako) ——— */
function MenuSmart() {
const dishes = [
{ name: 'Spaghetti alle vongole', price: '€14', tags: ['🐚','🌶️'], color: '#FFE0CC' },
{ name: 'Risotto ai funghi porcini', price: '€16', tags: ['🌱'], color: '#E8F4ED' },
{ name: 'Tagliata di manzo', price: '€22', tags: ['🥩'], color: '#FFEEE8' },
{ name: 'Tiramisù della casa', price: '€7', tags: ['🍰'], color: '#FFF4E0' },
{ name: 'Polpo alla griglia', price: '€18', tags: ['🐙','🌶️'], color: '#FFE0D5' },
{ name: 'Branzino al sale', price: '€24', tags: ['🐟'], color: '#EAF2F8' },
];
const [offset, setOffset] = useState(0);
const [secondsAgo, setSecondsAgo] = useState(12);
useEffect(() => {
const id = setInterval(() => {
setOffset((o) => (o + 1) % dishes.length);
setSecondsAgo(2);
}, 3200);
return () => clearInterval(id);
}, []);
useEffect(() => {
const t = setInterval(() => setSecondsAgo((s) => s + 1), 1000);
return () => clearInterval(t);
}, []);
const visible = [0, 1, 2, 3].map((i) => dishes[(offset + i) % dishes.length]);
return (
{/* Spinning sparkles around the card */}
MENU DEL GIORNO
Trattoria da Nino
{visible.map((d, i) => (
{d.name}
{d.tags.join(' ')}
{d.price}
))}
Menu Intelligente
Cucina in cucina,
Modifica prezzi, esaurisci piatti e aggiungi specialità del giorno con un tocco. I tuoi clienti vedono sempre il menu giusto, in tempo reale.
{['Allergeni e ingredienti automatici','Foto e descrizioni AI-assisted','Traduzione in 12 lingue','QR code stampabile incluso'].map((t,i)=>(
✓
{t}
))}
);
}
/* ——— How it works ——— */
function HowItWorks() {
const steps = [
{ n: '1', title: 'Apri Tako', desc: 'Crea l\'account in 2 minuti. Importa il tuo menu da PDF o foglio Excel — al resto pensa l\'AI.', mascot: 'assets/tako-cloche.png', alt: 'Tako with cloche' },
{ n: '2', title: 'Scansiona & ordina', desc: 'I clienti scansionano il QR al tavolo, sfogliano il menu e ordinano. Tu ricevi tutto in cucina.', mascot: 'assets/tako-tablet.png', alt: 'Tako with tablet' },
{ n: '3', title: 'Servi e cresci', desc: 'Ordini gestiti, dati raccolti, clienti felici. Vedi cosa funziona e ottimizzi ogni settimana.', mascot: 'assets/tako-thumbsup.png', alt: 'Tako thumbs up' },
];
return (
Come funziona
Tre passi. Zero stress.
{/* Curvy connecting line */}
{steps.map((s, i) => (
{s.n}
{s.title}
{s.desc}
))}
);
}
window.TakoLogo = TakoLogo;
window.Navbar = Navbar;
window.Hero = Hero;
window.TrustTape = TrustTape;
window.Features = Features;
window.MenuSmart = MenuSmart;
window.HowItWorks = HowItWorks;
window.useReveal = useReveal;
Tako
