// ---------- Landing Page ----------
function Navbar({ onEnterAdmin }) {
const { t, lang } = useT();
const [scrolled, setScrolled] = React.useState(false);
const [mobileOpen, setMobileOpen] = React.useState(false);
React.useEffect(() => {
const h = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', h);
return () => window.removeEventListener('scroll', h);
}, []);
const navStyle = {
position:'fixed', top:0, left:0, right:0, zIndex:100,
padding: scrolled ? '14px 40px' : '22px 40px',
background: scrolled ? 'rgba(15, 10, 6, 0.72)' : 'transparent',
backdropFilter: scrolled ? 'blur(16px) saturate(140%)' : 'none',
borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
transition: 'all .3s ease',
display:'flex', alignItems:'center', justifyContent:'space-between',
};
return (
);
}
const _TEXT_SIZES = ['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'];
function TextSizeControl({ compact }) {
const { t, lang } = useT();
const [cur, setCur] = React.useState(
() => (typeof document !== 'undefined' && document.documentElement.getAttribute('data-font-size')) || 'lg'
);
React.useEffect(() => {
const h = () => setCur(document.documentElement.getAttribute('data-font-size') || 'lg');
window.addEventListener('tweak-change', h);
return () => window.removeEventListener('tweak-change', h);
}, []);
const idx = _TEXT_SIZES.indexOf(cur);
const step = (d) => {
const n = idx + d;
if (n < 0 || n >= _TEXT_SIZES.length) return;
if (window.__setTextSize) window.__setTextSize(_TEXT_SIZES[n]);
};
const labelMap = (t('a11y.size_titles') || '').split(',').map((s) => s.trim());
const sizeLabel = labelMap[_TEXT_SIZES.indexOf(cur)] || cur;
return (
);
}
function LandingThemeToggle({ compact }) {
const { t } = useT();
const [light, setLight] = React.useState(() =>
typeof document !== 'undefined' && document.body.classList.contains('theme-light')
);
React.useEffect(() => {
const h = () => setLight(document.body.classList.contains('theme-light'));
window.addEventListener('tweak-change', h);
return () => window.removeEventListener('tweak-change', h);
}, []);
const sz = compact ? 18 : 20;
return (
);
}
function LangSwitch({ compact }) {
const [lang, setLangState] = React.useState(window.__lang || 'en');
React.useEffect(() => {
const h = e => setLangState(e.detail);
window.addEventListener('lang-change', h);
return () => window.removeEventListener('lang-change', h);
}, []);
const opts = [{v:'en',l:'EN'},{v:'fr',l:'FR'},{v:'ar',l:'عر'}];
return (
{opts.map(o => (
))}
);
}
function GelatoCupAnimated() {
return (
{/* Morphing blobs */}
{/* Rotating rings */}
{/* Floating flavor tags */}
{/* The cup */}
{/* Scoops */}
{/* Cup body */}
{label}
);
}
function HeroEditorial() {
const { t } = useT();
return (
Laziz
لذيذ
{t('hero.art_label')}
);
}
function HeroPhoto() {
return (
[ image placeholder ]
hero photography
product shot · 3 scoops in hand-held cup · warm tungsten · shallow DOF
);
}
function Hero() {
const { t } = useT();
const variant = window.__tweaks?.heroVariant || 'animated';
return (
{t('hero.tag')}
{t('hero.title_1')}
{t('hero.craft')}
{t('hero.title_2')}
{t('hero.sub')}
01 Made daily
02 100% natural
03 Delivered fresh
{variant === 'animated' && }
{variant === 'editorial' && }
{variant === 'photo' && }
);
}
function StatsBar() {
const { t } = useT();
const stats = [
{ n: t('stats.lines_n'), l: t('stats.lines_l') },
{ n: '100%', l: t('stats.natural') },
{ n: '3', l: t('stats.locations') },
{ n: '5K+', l: t('stats.customers') },
];
return (
{stats.map((s,i) => (
))}
✦ {t('flavors.eyebrow')}
{t('flavors.title_a')} {t('flavors.title_b')} {t('flavors.title_c')}
{t('flavors.view_all')}
{shown.map((f, i) => )}
);
}
function FlavorCard({ flavor, idx }) {
const { t } = useT();
const [hover, setHover] = React.useState(false);
return (
setHover(true)}
onMouseLeave={()=>setHover(false)}
style={{
background:'var(--card)',
border:'1px solid var(--border)',
borderRadius:'var(--radius-lg)',
overflow:'hidden',
transform: hover ? 'translateY(-8px)' : 'none',
boxShadow: hover ? '0 30px 60px -20px rgba(0,0,0,0.5)' : 'none',
transition:'all .35s cubic-bezier(.2,.8,.2,1)',
cursor:'pointer',
}}>
{flavor.emoji}
№ {String(idx+1).padStart(2,'0')}
{flavor.name}
{flavor.desc}
{fmtNumber(flavor.price)} FCFA
{t('flavors.scoop_note')}
✦ {t('story.eyebrow')}
“
{t('story.quote')}
”
{t('story.by')}
[ portrait ]
founder · atelier
Est. 2023
);
}
function LocationsSection() {
const { t } = useT();
const locations = [
{ area:'Nassara', addr:'Av. Charles de Gaulle', hours:'10:00 – 22:00', phone:'+235 66 12 34 56', tag:'Flagship' },
{ area:'Dembé', addr:'Rond-point Dembé', hours:'11:00 – 22:00', phone:'+235 66 22 11 08', tag:'Family' },
{ area:'Amriguébé', addr:'Av. Mobutu', hours:'12:00 – 23:00', phone:'+235 66 88 41 20', tag:'Late-night' },
];
return (
✦ {t('locations.eyebrow')}
Find us in N'Djamena
{locations.map((l,i) => (
{l.area}
{l.addr}
{l.hours}
{l.phone}
))}
);
}
function Footer({ onEnterAdmin }) {
const { t } = useT();
return (
);
}
function FooterCol({ title, items }) {
return (
);
}
function LandingPage({ onEnterAdmin }) {
return (
);
}
Object.assign(window, { LandingPage, LangSwitch });