// Work — three visual, distinct mockups (website / automation / leadgen) const DEMOS = [ { type: 'website', tag: 'sample · landing page', title: 'a website that turns readers into clients', body: 'one page. one promise. one button. that\'s the whole formula. notice how every line either earns your attention or asks for it back.', why: ['big clear headline', 'one obvious next step', 'words that sound human'], result: 'avg 2.4× more bookings', }, { type: 'automation', tag: 'sample · automation', title: 'an inbox that empties itself', body: 'new email comes in. system reads it, drafts a reply in your voice, and waits for your one-click ok. you keep the relationship, lose the busywork.', why: ['runs every 5 minutes, 24/7', 'never sends without your ok', 'learns your voice over time'], result: '~8 hours back per week', }, { type: 'leadgen', tag: 'sample · client pipeline', title: 'four booked calls a week, on autopilot', body: 'finds your perfect-fit clients, sends a personal note, follows up politely, books the call on your calendar. you just show up.', why: ['only your dream clients', 'feels handwritten, isn\'t', 'lands on your calendar'], result: '4–9 calls/wk on average', }, ]; function Work() { return (
{DEMOS.map((d, i) => ( ))}

want one like these for your business? twenty minutes, free, no pressure.

book the call →
); } function DemoRow({ d, idx }) { const flip = idx % 2 === 1; return (
{d.type === 'website' && } {d.type === 'automation' && } {d.type === 'leadgen' && }
{d.tag}

{d.title}

{d.body}

// the result {d.result}
); } /* ---------- CLIENT SITE PREVIEW ---------- */ function ClientSitePreview() { const [hovered, setHovered] = React.useState(false); const [clicked, setClicked] = React.useState(false); const [ripples, setRipples] = React.useState([]); function handleClick(e) { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const id = Date.now(); setClicked(true); setRipples(r => [...r, { id, x, y }]); setTimeout(() => setRipples(r => r.filter(rp => rp.id !== id)), 700); setTimeout(() => setClicked(false), 150); } return ( <> setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ display: 'block', position: 'relative', borderRadius: 12, overflow: 'hidden', boxShadow: hovered ? '0 40px 80px -20px rgba(0,0,0,0.35), 0 12px 32px -8px rgba(255,91,34,0.18)' : '0 30px 60px -30px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.15)', border: `1px solid ${hovered ? 'rgba(255,91,34,0.35)' : 'var(--line-2)'}`, transform: clicked ? 'scale(0.975)' : hovered ? 'scale(1.015) translateY(-3px)' : 'scale(1) translateY(0)', transition: 'transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, border-color 0.25s ease', cursor: 'pointer', }} > Redouane Impression — landing page {/* overlay label */}
visit website → redouaneimpression.com
{/* ripple container */}
{ripples.map(rp => ( ))}
); } /* ---------- WEBSITE MOCK ---------- */ function WebsiteMock() { return (
{/* animated gradient orb background */}