// Shared primitives — Deeran Digital
const { useState, useEffect, useRef, useMemo } = React;
// The Deeran Digital lockup — DEERAN (Archivo Black) over DIGITAL (Archivo Light, 0.34em).
function Logo({ height = 38 }) {
return (
);
}
// Wordmark is the lockup — kept as a named export because the nav and footer call it.
function Wordmark({ height = 38 }) {
return (
);
}
function Eyebrow({ children, tone = 'red' }) {
const tones = {
red: { color: '#0784BE', bg: 'rgba(7,132,190,0.10)', bd: 'rgba(7,132,190,0.40)' },
white: { color: '#fff', bg: 'rgba(255,255,255,0.06)', bd: 'rgba(255,255,255,0.22)' },
solid: { color: '#fff', bg: '#0784BE', bd: '#0784BE' },
};
const t = tones[tone];
return (
{children}
);
}
function Button({ children, variant = 'primary', size = 'md', onClick, iconAfter = true, as, href }) {
const [hover, setHover] = useState(false);
const sizes = {
sm: { p: '10px 18px', f: 12 },
md: { p: '14px 26px', f: 14 },
lg: { p: '18px 32px', f: 15 },
xl: { p: '22px 42px', f: 16 },
}[size];
const variants = {
primary: {
bg: hover ? '#1D96D4' : '#0784BE',
color: '#fff',
border: '1px solid rgba(255,255,255,0.08)',
shadow: hover ? '0 14px 38px rgba(7,132,190,0.55)' : '0 10px 30px rgba(7,132,190,0.35)',
},
secondary: {
bg: hover ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.06)',
color: '#fff',
border: '1px solid rgba(255,255,255,0.18)',
shadow: 'none',
},
ghost: {
bg: hover ? 'rgba(255,255,255,0.06)' : 'transparent',
color: '#fff',
border: '1px solid transparent',
shadow: 'none',
},
outline: {
bg: hover ? 'rgba(7,132,190,0.12)' : 'transparent',
color: '#fff',
border: '2px solid #0784BE',
shadow: 'none',
},
}[variant];
const Tag = as || 'button';
return (
setHover(true)} onMouseLeave={() => setHover(false)}
onClick={onClick} href={href}
style={{
display: 'inline-flex', alignItems: 'center', gap: 10,
padding: sizes.p, fontFamily: 'Archivo', fontWeight: 700, fontSize: sizes.f,
letterSpacing: '0.06em', textTransform: 'uppercase',
background: variants.bg, color: variants.color,
border: variants.border, borderRadius: 999,
boxShadow: variants.shadow,
cursor: 'pointer', transition: 'all 240ms cubic-bezier(0.2, 0.6, 0.2, 1)',
textDecoration: 'none', whiteSpace: 'nowrap',
}}>
{children}
{iconAfter && (
→
)}
);
}
function Rating({ small = false }) {
return (
★★★★★
Rated 4.85/5 by Verified Clients
);
}
function AvatarStack({ size = 50 }) {
// Client avatar row (1203x230 PNG), carried over from the source site.
const displayHeight = size;
const displayWidth = Math.round((1203 / 230) * displayHeight);
return (
);
}
function Arrow({ size = 14 }) {
return →;
}
// "Chapter" section heading — eyebrow + numeric marker
function SectionMark({ num, children, tone = 'red' }) {
return (
{num}
{children}
);
}
// Signal Blue go-disc — small round arrow button
function GoDisc({ size = 36, onClick }) {
const [hover, setHover] = useState(false);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
width: size, height: size, borderRadius: '50%',
background: hover ? '#1D96D4' : '#0784BE',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
color: '#fff', fontSize: size * 0.42, fontWeight: 700,
cursor: 'pointer', transition: 'all 240ms cubic-bezier(0.2, 0.6, 0.2, 1)',
boxShadow: hover ? '0 6px 18px rgba(7,132,190,0.5)' : '0 3px 10px rgba(7,132,190,0.3)',
flexShrink: 0,
}}>→
);
}
// Animated counter that counts up when scrolled into view
function Counter({ to, duration = 1600, prefix = '', suffix = '' }) {
const [val, setVal] = useState(0);
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting && !started.current) {
started.current = true;
const start = performance.now();
const step = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(Math.round(to * eased));
if (t < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}
});
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
return {prefix}{val.toLocaleString()}{suffix};
}
// LineWave — layered sine-wave strokes drifting horizontally.
// Each layer is one seamless 2-period path translated by exactly one period, so the
// loop is invisible. Visual rules + @keyframes live in site-styles.css (.mf-wave-layer).
function LineWave({ lines = 7, height = 720, width = 1440 }) {
const layers = useMemo(() => (
Array.from({ length: lines }).map((_, i) => {
const t = i / Math.max(1, lines - 1);
// Each line sits lower, waves a little flatter, and drifts a little slower.
const period = width * (0.62 + t * 0.5);
const amp = 46 - t * 20;
const baseY = height * (0.30 + t * 0.085);
const steps = 64;
// Build one 2-period path so a -period translate loops seamlessly.
let d = '';
for (let s = 0; s <= steps * 2; s++) {
const x = (s / steps) * period;
const y = baseY + Math.sin((s / steps) * Math.PI * 2 + t * 2.4) * amp;
d += (s === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1) + ' ';
}
return {
d,
period,
duration: (16 + i * 3.5).toFixed(1),
delay: (-i * 2.1).toFixed(1),
opacity: 0.5 - t * 0.3,
strokeWidth: 1.4 - t * 0.5,
reverse: i % 2 === 1,
};
})
), [lines, height, width]);
return (
);
}
Object.assign(window, { Logo, Wordmark, Eyebrow, Button, Rating, AvatarStack, Arrow, SectionMark, GoDisc, Counter, LineWave });