// Variation 1, EDITORIAL / MAGAZINE // Serif headlines, lots of whitespace, calm authority, photo-forward. // Feels like a publication, not a sales page. const v1Styles = { font: '"Cormorant Garamond", "Playfair Display", Georgia, serif', sans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', ink: '#0f1419', paper: '#f7f5f0', paperWarm: '#efeae0', rule: 'rgba(15,20,25,0.12)', muted: 'rgba(15,20,25,0.55)', blue: '#5271FF', // exact match to the logo chart-icon blue blueDark: '#3a55e0', purple: '#7C5CFF' // unified accent for case-study quote marks }; // True when the viewport is phone-width; drives the hamburger nav. function useIsMobile(maxWidth = 767) { const query = `(max-width: ${maxWidth}px)`; const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.matchMedia(query).matches ); React.useEffect(() => { const mq = window.matchMedia(query); const handler = (e) => setIsMobile(e.matches); mq.addEventListener('change', handler); setIsMobile(mq.matches); return () => mq.removeEventListener('change', handler); }, [query]); return isMobile; } // Outlined inline SVG icons, small, white, sit on the dark bar without a filled square const v1Icon = (name, size = 18) => { const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', xmlns: 'http://www.w3.org/2000/svg' }; if (name === 'fb') return ; if (name === 'ig') return ; if (name === 'mail') return ; if (name === 'cal') return ; if (name === 'phone') return ; }; // Top utility bar, narrow, social icons + Schedule + phone (matches Elementor) // tone: 'light' (white icons, for over-hero) | 'dark' (ink icons, for pale page headers) const V1UtilityBar = ({ data, tone = 'light' }) => { const isDark = tone === 'dark'; const iconColor = isDark ? v1Styles.ink : '#fff'; return (
{[ { k: 'fb', href: data.brand.socials.facebook, label: 'Facebook' }, { k: 'ig', href: data.brand.socials.instagram, label: 'Instagram' }, { k: 'mail', href: `mailto:${data.brand.email}`, label: 'Email' }]. map((s) => {v1Icon(s.k, 18)} )}
{v1Icon('cal', 16)} Schedule a Call with Lauren {v1Icon('phone', 16)} (321) 223-6439
); }; // Main nav row, sits over the hero, logo left, links right // `active` should be one of: 'home' | 'about' | 'services' | 'trainings' | 'coaching' | 'contact' // `tone` defaults to 'light' (white links over dark hero). Use 'dark' on interior pages with a pale hero. const V1MainNav = ({ data, active = 'home', tone = 'light' }) => { const navItems = [ { key: 'home', label: 'Home', href: 'index.html' }, { key: 'about', label: 'About', href: 'about.html' }, { key: 'trainings', label: 'Trainings', href: 'trainings.html' }, { key: 'coaching', label: 'Coaching', href: 'coaching.html' }, { key: 'pricing', label: 'Pricing', href: 'pricing.html' }, { key: 'contact', label: 'Contact', href: 'contact.html' }]; const isDark = tone === 'dark'; const logoSrc = isDark ? typeof window !== 'undefined' && window.__resources?.logoDark || 'logo-dark.png' : typeof window !== 'undefined' && window.__resources?.logoWhite || 'logo-white.png'; const restColor = isDark ? v1Styles.ink : '#fff'; const isMobile = useIsMobile(767); const [open, setOpen] = React.useState(false); return (
Practice Potential {!isMobile && } {isMobile && } {isMobile && open &&
{navItems.map((n) => { const isActive = n.key === active; return ( {n.label}); })} Book a Consult Call {data.brand.phone}
}
); }; const V1Hero = ({ data }) =>
{/* Looping YouTube hero, same video as the Elementor staging */}