// Winkz Designs 2026, HOME (function () { const { useState, useEffect } = React; const { Icon, Reveal, Counter, Eyebrow, SectionHead, Panel, Marquee, Section, Grad, BuildReveal } = window; const { EcommerceMock, CFOMock, ChatMock, CRMMock, DashboardMock, PlumbingMock, CRMDashboard } = window; const { Evermart, DarkSite } = window; const { CostCalculator, Testimonials, Security, FAQ, ValueStats } = window; const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)'; const KEYWORDS = ['Website Design', 'Brand Identity', 'Custom CRM', 'Immersive 3D', 'AI SEO', 'Automation', 'AI Support Chat', 'Voice Agents', 'Google Workspace', 'E-commerce', 'Web Apps', 'Business Verification']; function CTAButton({ children, onClick, primary = true, icon = 'ArrowUpRight' }) { return ( ); } function Hero({ onNavigate }) { return (
{window.WinkzStreams && }
Website & AI design agency

Your vision,
our creation.

An integrated website and AI design agency. We design the sites, custom tools and AI systems that fill the gaps and inefficiencies in your business, from your storefront to the software running behind it.

onNavigate('contact')}>Start your project onNavigate('portfolio')} primary={false} icon="ArrowRight">See our work
{[['150+', 'Projects shipped'], ['98%', 'Client retention'], ['5+ yrs', 'In business']].map((s, i) => (
{s[0]}
{s[1]}
))}
{/* live mockup collage, examples of what we've built */}
{window.WinkzPortalRing && }
{/* prominent brand wavelength across the front page */} {window.WinkzStreams && (
)}
); } function KeywordBand() { const item = (t) => {t}; const item2 = (t) => {t}; return (
); } const REVIEWS = [ ['Our old site never showed up on Google. The new one books jobs on its own.', 'Dana W.', 'Beacon Plumbing'], ['Winkz replaced four monthly subscriptions with one tool we actually own.', 'Marcus L.', 'Maple & Co.'], ['The CRM was built around how we sell, not the other way around.', 'Priya N.', 'Relay'], ['Their AI assistant answers after hours and books the job while we sleep.', 'Owen B.', 'Copperline Electric'], ['Launched in three weeks and the phone started ringing the same month.', 'Sofia R.', 'Northbend Dental'], ['They handed over everything. No lock-in, no monthly surprises.', 'Ari T.', 'Summit & Slate'], ]; function ReviewTicker() { const gLogo = (s) => ( ); const stars = (s) => ( {[0, 1, 2, 3, 4].map(i => ( ))} ); const item = ([quote, who, where], i) => (
{gLogo(15)} {stars(12)} 5.0

“{quote}”

{who} ยท {where}
); return (
{gLogo(18)} 4.9 {stars(14)}
); } const SERVICES = [ ['Globe', 'Website creation', 'Fast, custom sites engineered to convert, one-pagers to full web apps.'], ['Palette', 'Brand development', 'Logos, identity and guidelines that make you unmistakable.'], ['Boxes', 'Immersive build-outs', '3D and scroll-driven experiences that stop the scroll.'], ['Database', 'Custom CRM & tools', 'Software you own, built around how your team really works.'], ['Bot', 'AI systems & chat', 'Assistants and automations that answer, qualify and book 24/7.'], ['Search', 'AI SEO', 'Be the answer when customers ask Google, and AI.'], ]; function ServicesBento({ onNavigate }) { return (
{window.WinkzWPattern && } A website, and everything after it.} sub="A great site is just the front door. We build the brand, tools and AI behind it too, so every piece works together to bring you more business, not just a prettier page." max={680} />
{SERVICES.map((s, i) => (

{s[1]}

{s[2]}

 ))}
onNavigate('services')} primary={false} icon="ArrowRight">All ten services
); } const GAPS = [ ['Leads slip through the cracks', 'A custom CRM that captures and books every one', 'MessageSquareWarning', CRMMock], ['Customer data lives in ten places', 'One CRM dashboard, your single source of truth', 'LayoutDashboard', CRMDashboard], ['No clear view of the numbers', 'A live dashboard built around your KPIs', 'LineChart', CFOMock], ["Support can't keep up", 'An AI assistant that answers 24/7, in your voice', 'Headset', ChatMock], ]; function GapSystems({ onNavigate }) { return (
We design to fill the gaps.} sub="Wherever your business leaks time or loses customers, we build the custom software and AI to close it, CRMs, dashboards, automations and assistants, all your own." max={680} />
{GAPS.map((g, i) => { const M = g[3]; const flip = i % 2 === 1; return (
The gap

{g[0]}

{g[1]}

 ); })}
onNavigate('contact')}>Find the gaps in my business
); } const BUILDS = [ ['Database', 'Custom CRM', 'Your pipeline, your fields, your way.'], ['LayoutDashboard', 'Client portals', 'A branded home your clients log into.'], ['Workflow', 'AI automations', 'The repetitive work runs itself.'], ['Cable', 'Workflow integrations', 'Every tool you use, talking day one.'], ['Wrench', 'Internal tools', 'Purpose-built for how your team works.'], ['LineChart', 'Dashboards', 'One clear view of what matters.'], ]; const SAAS_CONS = ['$X per seat, every month, forever', "Overwhelming, features you'll never touch", 'Generic: built for everyone, fits no one', 'Your data lives on their servers', 'Integrations cost extra, if they exist']; const WINKZ_PROS = ["Built once, and it's yours to keep", 'Only the features your business needs', 'Custom-built to your workflow, no templates', 'Your data, your accounts, fully secure', 'Connected to your tools from day one']; const OWN_HIGHLIGHTS = [ ['Compass', 'We learn your whole business', 'Deep onboarding first, we map every workflow before we build, so the software fits like it grew there.'], ['Palette', 'Built for your whole team', 'Genuinely great, on-brand UI your whole staff will actually enjoy using, not just you.'], ['ShieldCheck', 'Yours, and secure', 'You own it outright. Safe, secure data on your accounts, no lock-in, no monthly surprises.'], ]; function OwnSoftware({ onNavigate }) { return (
Enterprise software, without the bloat.} sub="The big-name platforms are expensive, overwhelming, and full of features you'll never use. We build the opposite: simple, custom software shaped to your business, integrated with everything from day one, and it's yours." max={700} /> {/* comparison */}
The usual subscription
{SAAS_CONS.map((c, i) => (
{c}
))}
BEST VALUE
A Winkz system
{WINKZ_PROS.map((c, i) => (
{c}
))}
{/* what we build */}
{BUILDS.map((b, i) => (
{b[1]}
{b[2]}
 ))}
{/* highlights */}
{OWN_HIGHLIGHTS.map((h, i) => (

{h[1]}

{h[2]}

 ))}
onNavigate('contact')}>Build my own system
); } function HowWeBuild() { const steps = [ ['01', 'Align', 'A focused kickoff. We dig into the goal, the audience and the numbers, then commit to a clear scope.'], ['02', 'Design', 'Direction, then hi-fi. You see real screens early and often, never a surprise at the end.'], ['03', 'Build', 'Short iterations in the real thing. Every week ends with something you can click.'], ['04', 'Launch', 'We ship it, wire the analytics and hand you the keys, plus plain-English docs.'], ]; return (
How we build

We ship systems,
not slide decks.

A senior team, short feedback loops, and work that goes live. No black boxes, no juniors learning on your project.
{steps.map((s, i) => (
{s[0]}

{s[1]}

{s[2]}

 ))}
); } function WorkStrip({ onNavigate }) { const cards = [ ['Maple & Co.', 'Online store', EcommerceMock], ['Beacon Plumbing', 'Service website', PlumbingMock], ['Northstar Finance', 'Finance dashboard', CFOMock], ['Relay', 'Custom CRM', CRMDashboard], ['Pipeline', 'Sales CRM', CRMMock], ['Ansa', 'AI support chat', ChatMock], ['Groundwork', 'Analytics', DashboardMock], ]; const card = ([name, tag, M]) => (
{name} {tag}
); return (
Featured work

Real brands. Real impact.
onNavigate('portfolio')} primary={false} icon="ArrowRight">View all projects
); } function WorkMarquee() { const shot = (src, domain) => function ShotCard() { return (
{domain ? (
{domain}
) : (
)}
); }; const cards = [ ['The Valuable Pineapple', 'Brand partnerships', shot('assets/portfolio/valuablepineapple.png', 'valuablepineapple.com')], ['Icarian Ventures', 'Brand growth partner', shot('assets/portfolio/icarian.png', 'icarianventures.com')], ['SPCR Group', 'Ecommerce growth', window.SPCR], ['Clarity HCM', 'HR & payroll', window.ClaritySite], ['Summit & Slate', 'Home remodeling', shot('assets/portfolio/c-summit-slate.png')], ['Northbend Dental', 'Dental practice', shot('assets/portfolio/c-northbend-dental.png')], ['Harlan & Voss', 'Litigation firm', shot('assets/portfolio/c-harlan-voss.png')], ['Osteria Nove', 'Restaurant', shot('assets/portfolio/c-osteria-nove.png')], ['Evermart', 'E-commerce', shot('assets/portfolio/c-evermart.png')], ['Ansa', 'AI support chat', window.ChatMock], ]; const card = ([name, tag, M], i) => (
{M ? : null}
{name}
{tag}
); return
; } function CTA({ onNavigate }) { return (
{window.WinkzWPattern && }

Let's build the next one.

Free 30-minute intro call. Bring the problem, we'll tell you honestly if we're the right team.

onNavigate('contact')}>Book a call onNavigate('services')} primary={false} icon="ArrowRight">View services
Fixed price, quoted up front Reply within 24 hours You own everything we build
); } function HomePage({ onNavigate }) { return (
); } window.HomePage = HomePage; })();