);
}
// Simple Puffy mark (the iOS-kit abstract dog) used on Asky surfaces
// stays as . For MARKETING surfaces (hero, CTAs, footer, nav)
// we use the real penguin logo. This is Penguin, the brand mark.
function Penguin({ size = 64, withRing = false, ringColor = '#FFFFFF' }) {
const inner = (
);
if (!withRing) return inner;
const pad = Math.round(size * 0.22);
const total = size + pad * 2;
return (
{inner}
);
}
function PuffyLogoMark({ size = 32 }) { return ; }
// ─── Footer ──────────────────────────────────
function Footer() {
const { t } = useI18n();
return (
);
}
function SocialLink({ label }) {
return (
{label[0]}
);
}
// ─── WaitlistCta ─────────────────────────────
// Shared "Get early access" section used on every page — hero-ish block with
// Penguin mark, title, lede and the Waitlist form. Tweakable via props so
// pages can shift the headline/lede without rebuilding the chrome.
function WaitlistCta({
title = 'Get early access to Puffy.',
lede = 'Leave your email and we\u2019ll invite you in as soon as testing opens.',
mark = true,
tone = 'mint', // 'mint' | 'cream' | 'white'
compact = false,
note = null,
id = 'waitlist',
}) {
const tones = {
mint: { bg: 'linear-gradient(180deg, rgba(127,239,227,0.4) 0%, rgba(127,239,227,0.75) 100%)' },
cream: { bg: 'linear-gradient(180deg, #F5EFE6 0%, #EFE6D5 100%)' },
white: { bg: '#F2F2F7' },
};
const t = tones[tone] || tones.mint;
return (
{mark && (
)}
{title}
{lede && (
{lede}
)}
{note && (
{note}
)}
);
}
// Reveal needed here before it's defined below — forward-ref dance avoided by
// defining Reveal first in file order; include a guard in case of import order.
// ─── Waitlist ────────────────────────────────
function Waitlist({ id = 'waitlist', cta, placeholder }) {
const { t } = useI18n();
const [email, setEmail] = React.useState('');
const [ok, setOk] = React.useState(false);
const submit = (e) => {
e.preventDefault();
if (!email || !/.+@.+\..+/.test(email)) return;
setOk(true);
};
return (
);
}
// ─── Dog placeholder illustration ────────────
// A soft, low-fidelity sleeping dog silhouette. Flat shapes, no stock photo.
// Three palette variants so different sections don't look identical.
function DogIllustration({ variant = 'corgi', size = 320 }) {
const sets = {
corgi: { fur: '#E8B887', belly: '#F4D4B0', dark: '#5A3E26' },
golden: { fur: '#E3B775', belly: '#F3DCB2', dark: '#5C3F20' },
black: { fur: '#3C3C3C', belly: '#6B6B6B', dark: '#1A1A1A' },
};
const c = sets[variant] || sets.corgi;
return (
);
}
// ─── Big decorative paw print (disabled — opt-in only, per design call) ────
// Previously rendered a paw SVG. Now a no-op so every existing
// across the site simply renders nothing. Re-enable selectively when needed.
function PawMark() { return null; }
// ─── Reveal-on-scroll ────────────────────────
// Wraps children in a p-reveal div that fades/slides in on intersect.
function Reveal({ children, delay = 0, as = 'div', style = {}, className = '' }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (!('IntersectionObserver' in window)) { el.classList.add('is-in'); return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => el.classList.add('is-in'), delay);
io.unobserve(el);
}
});
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, [delay]);
const Tag = as;
return {children};
}
// ─── Screenshot placeholder ──────────────────
// Used where we intend to drop in real app screenshots. Renders a soft
// dashed "phone-shaped" slot with a label — swap for an when the
// real asset is ready.
function ScreenshotSlot({ label = 'Screenshot', w = 300, h = 640, tilt = 0, note = '' }) {
const { MINT_STROKE: MS, T2: C2, T3: C3, TEXT: CT, Icon: Ic } = window.PuffyKit;
return (