// v3 primitives — warm palette, nut SVGs, floating particle bg
const { useEffect: useEffect3p, useRef: useRef3p, useState: useState3p } = React;
/* === Logo === */
function NBMark({ size = 40, color = "currentColor" }) {
return (
);
}
function Logo({ light=false, compact=false }) {
const color = light ? "var(--cream)" : "var(--ink)";
const sub = light ? "rgba(244,236,220,0.6)" : "rgba(7,15,42,0.55)";
return (
nuts hub
Premium Pantry · UAE
);
}
/* === Eyebrow with hairline === */
function Eyebrow({ children, light=false, align='left', tone }) {
const c = tone || (light ? 'var(--gold-3)' : 'var(--gold-deep)');
return (
{children}
{align==='center' && }
);
}
/* === Icons === */
const Icon = {
Search:(p)=> ,
User:(p)=> ,
Heart:(p)=> ,
Bag:(p)=> ,
Arrow:(p)=> ,
ArrowUR:(p)=>,
Plus:(p)=> ,
Minus:(p)=> ,
Truck:(p)=> ,
Leaf:(p)=> ,
Gift:(p)=> ,
Shield:(p)=> ,
Sparkle:(p)=>,
Weight:(p)=> ,
Box:(p)=> ,
Sun:(p)=> ,
Insta:(p)=> ,
Fb:(p)=> ,
Tiktok:(p)=> ,
Pin:(p)=> ,
Phone:(p)=> ,
Mail:(p)=> ,
Menu:(p)=> ,
X:(p)=> ,
};
/* === Nut illustrations (small, decorative) === */
const NutSvg = {
Almond: ({size=36, ...rest}) => (
),
Cashew: ({size=44, ...rest}) => (
),
Pistachio: ({size=40, ...rest}) => (
),
Walnut: ({size=42, ...rest}) => (
),
Date: ({size=32, ...rest}) => (
),
Saffron: ({size=36, ...rest}) => (
),
};
/* === Background nut particles (small floating SVGs) === */
function NutBgParticles({ density=8, opacity=0.35 }) {
const items = [];
const variants = ['Almond','Cashew','Pistachio','Walnut','Date'];
for (let i=0; i
);
}
return (
{items}
);
}
/* === Reveal (basic + variants) === */
function Reveal({ children, delay=0, variant='', as: Tag='div', style, ...rest }) {
const ref = useRef3p(null);
useEffect3p(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries)=>{
entries.forEach(e=>{
if (e.isIntersecting) {
setTimeout(()=>el.classList.add('is-in'), delay);
io.disconnect();
}
});
}, { threshold: 0.12, rootMargin:'0px 0px -40px 0px' });
io.observe(el);
return () => io.disconnect();
}, [delay]);
return {children};
}
Object.assign(window, { NBMark, Logo, Eyebrow, Icon, NutSvg, NutBgParticles, Reveal });