// ============================================================ // autoclient.io — shared content data + placeholder media // ProjectThumb now renders contextual SVG illustrations per slug // ============================================================ const CLIENTS = ["Enterprise SaaS", "Cloud Infrastructure", "National Ecommerce", "Cosmetic Surgery", "Multi-Location Law", "Local Service Brands"]; function ClientWordmark({ name, light }) { return ( {name} ); } const HUES = { purple: "linear-gradient(135deg,#8784FD,#CC99FF)", pink: "linear-gradient(135deg,#CC99FF,#FF99CC)", coral: "linear-gradient(135deg,#FF99CC,#FF6666)", mix: "linear-gradient(135deg,#8784FD,#FF99CC,#FF6666)", violet: "linear-gradient(135deg,#8784FD,#FF6666)", }; function initials(name) { return name.split(" ").map((w) => w[0]).slice(0, 2).join(""); } function Avatar({ name, hue = "purple", size = 56 }) { return ( {initials(name)} ); } // ============================================================ // Contextual SVG thumbnail illustrations // Each renders a mini-mockup of a real UI fitting the context // ============================================================ /* ---- shared SVG primitives ---- */ const FF = "system-ui,-apple-system,sans-serif"; // font-family for SVG text /* ---- SaaS / paid marketing analytics dashboard ---- */ function ThumbSaaS() { return ( {/* topbar */} {[130,184,238,292].map((x,i)=>)} {/* sidebar */} {[0,1,2,3,4].map(i=>( ))} {/* KPI cards */} {[{x:160,v:"4.7×",c:"#8784FD"},{x:344,v:"-38%",c:"#CC99FF"},{x:528,v:"3.2×",c:"#FF99CC"}].map(({x,v,c})=>( {v} ))} {/* chart area */} {[206,232,258,284,310,336].map(y=>)} {/* bar chart panel */} {[{h:60,c:"#8784FD"},{h:100,c:"#CC99FF"},{h:76,c:"#FF99CC"},{h:118,c:"#8784FD"}].map((b,i)=>( ))} {/* table rows */} {[0,1,2].map(i=>( {[0,1,2,3].map(j=>)} ))} ); } /* ---- Cloud / SEO organic-growth dashboard ---- */ function ThumbCloud() { return ( {/* header */} {[130,184,238].map((x,i)=>)} {/* overline */} {/* headline blocks */} {/* stat pills */} {[{l:"180%",s:"traffic",c:"#8784FD"},{l:"120+",s:"keywords",c:"#CC99FF"},{l:"4.1×",s:"org. leads",c:"#FF99CC"}].map(({l,s,c},i)=>( {l} ))} {/* big organic traffic chart */} {[280,310,340,370,398].map(y=>)} {/* keyword ranking mini-table inside chart */} {[{kw:"#1",c:"#CC99FF"},{kw:"#2",c:"#8784FD"},{kw:"#4",c:"#8784FD"}].map(({kw,c},i)=>( {kw} ))} ); } /* ---- Medical / cosmetic-surgery booking UI ---- */ function ThumbCosmetic() { return ( {/* header */} {[200,262,320,378].map((x,i)=>)} {/* left: patient panel */} {/* patient card */} {/* appointment list */} {[0,1,2].map(i=>( ))} {/* main: booking calendar */} {/* day headers */} {["M","T","W","T","F","S","S"].map((d,i)=>( {d} ))} {/* calendar grid */} {Array.from({length:35}).map((_,k)=>{ const col=k%7, row=Math.floor(k/7); const day=k+1; const booked=[3,4,10,11,17,18,24].includes(day); const today=day===15; return ( {day<=31?day:""} {booked&&!today&&} ); })} {/* stats bottom */} {[{l:"63%",s:"more bookings",c:"#FF99CC"},{l:"41%",s:"fewer no-shows",c:"#FF6666"},{l:"3×",s:"repeat patients",c:"#CC99FF"}].map(({l,s,c},i)=>( {l} ))} ); } /* ---- Law firm local-search landing page ---- */ function ThumbLaw() { return ( {/* header */} {[280,332,384,436].map((x,i)=>)} {/* hero left */} {/* intake form */} {[{l:"Full Name"},{l:"Phone"},{l:"Practice Area"},{l:"What happened?"},{l:""}].map(({l},i)=>( {i<4&&} {i<4&&} ))} {/* map pack */} {/* search bar */} {/* map pack listings */} {[{h:"#8784FD",r:"★★★★★",n:1},{h:"#CC99FF",r:"★★★★",n:2},{h:"#FF99CC",r:"★★★★★",n:3}].map(({h,r,n},i)=>( {n} ))} {/* cost per case metric */} ); } /* ---- National ecommerce / retail product grid ---- */ function ThumbRetail() { return ( {/* store header */} {/* search bar */} {/* nav right */} {/* category bar */} {["All","Clothing","Shoes","Accessories","Sale"].map((c,i)=>( 0?1:0} stroke="#ddd"/> ))} {/* product grid 3×2 */} {Array.from({length:6}).map((_,k)=>{ const col=k%3, row=Math.floor(k/3); const COLS=["#FFCCCC","#E8E5FF","#FFE8F5","#E5E8FF","#FFE5E5","#F5E8FF"]; const accents=["#FF6666","#8784FD","#FF99CC","#CC99FF","#FF99CC","#8784FD"]; const x=20+col*258, y=110+row*180; return ( {/* product image area */} {/* title + price */} {/* ROAS badge on first */} {k===0&&} {k===0&&} ); })} ); } /* ---- Auto-parts ecommerce catalog ---- */ function ThumbAuto() { return ( {/* header */} {/* sidebar categories */} {["Brakes","Engine Parts","Suspension","Electrical","Body Parts","Wheels"].map((c,i)=>( ))} {/* parts list */} {[{n:"Brake Pad Set – Front",sku:"BP-2847",pr:"$48.99",c:"#8784FD"},{n:"Performance Brake Rotors",sku:"RT-1920",pr:"$89.50",c:"#CC99FF"},{n:"Ceramic Brake Pads – Rear",sku:"BP-3104",pr:"$42.00",c:"#FF99CC"},{n:"Caliper Rebuild Kit",sku:"CL-0092",pr:"$31.25",c:"#8784FD"}].map(({n,sku,pr,c},i)=>( {/* product image */} {/* product details */} {/* price + add */} {pr} ))} ); } /* ---- Generic ValueProps illustration (mini analytics panel) ---- */ const VALUE_COLORS = { purple: ["#8784FD","#CC99FF"], violet: ["#CC99FF","#8784FD"], coral: ["#FF6666","#FF99CC"], pink: ["#FF99CC","#FF6666"], mix: ["#8784FD","#FF6666"], }; function ValueThumb({ hue = "purple", label = "ROAS ▲" }) { const [c1, c2] = VALUE_COLORS[hue] || VALUE_COLORS.purple; const pts = "32,230 80,218 130,205 180,188 230,165 280,140 330,118 380,98 420,82 460,70"; const areaD = `M32,230 80,218 130,205 180,188 230,165 280,140 330,118 380,98 420,82 460,70 460,240 32,240Z`; return ( {/* grid */} {[60,100,140,180,220].map(y=>)} {/* area + line */} {/* metric pill */} {/* label */} ); } /* ---- Ecommerce performance thumb ---- */ function ThumbEcommerce() { return ( {/* header */} {[230,280,330,380].map((x,i)=>)} {/* ROAS metric */} 3.8× {/* CPL metric */} -41% {/* Revenue metric */} +127% {/* big revenue chart */} {[210,240,270,300,330,358].map(y=>)} {/* dual lines: ROAS + Revenue */} {/* platform pills */} {[{l:"Google Shopping",c:"#8784FD"},{l:"Meta Ads",c:"#CC99FF"},{l:"TikTok",c:"#FF99CC"},{l:"Email",c:"#FF6666"}].map(({l,c},i)=>( ))} {/* campaign table */} {[0,1,2].map(i=>( ))} ); } /* ---- Master ProjectThumb — contextual SVG or gradient fallback ---- */ const PROJECT_SVGS = { saas: ThumbSaaS, cloud: ThumbCloud, cosmetic: ThumbCosmetic, law: ThumbLaw, retail: ThumbRetail, auto: ThumbAuto, ecommerce: ThumbEcommerce, }; function ProjectThumb({ hue = "mix", ratio = 62, label, icon, slug }) { const SvgComp = slug && PROJECT_SVGS[slug]; return (
{SvgComp ? (
) : ( <>
{icon && } {label && {label}}
)}
); } const TESTIMONIALS = [ { name: "Christy D.", role: "Marketing Lead, enterprise SaaS", hue: "purple", quote: "Autoclient rebuilt our acquisition funnel from the ground up. The reporting alone changed how our leadership thinks about spend. Every dollar is now accountable to a number." }, { name: "Alejandro C.", role: "Director, cosmetic-surgery group", hue: "coral", quote: "Their email and CRM automation books our calendar while we sleep. Consult requests are up and our front desk finally has time to breathe." }, { name: "Kathryn M.", role: "Founder, local practice", hue: "pink", quote: "I came in skeptical of “AI marketing.” Six weeks later our cost per lead was down by a third and I had a dashboard I actually understood." }, { name: "Esther H.", role: "Director, ecommerce brand", hue: "violet", quote: "The team moves fast and tells the truth. They killed two channels that weren't working and doubled down on the one that was. ROAS followed." }, { name: "John K.", role: "Partner, multi-location law firm", hue: "mix", quote: "We've worked with three agencies. Autoclient is the first that talks about cases signed, not impressions. That difference is everything." }, ]; const HOME_FAQ = [ { q: "What services does autoclient offer?", a: "We run the full growth stack: paid advertising (Google, Meta, TikTok and more), SEO and local SEO, lead generation, email & SMS marketing, and marketing automation. Every channel is engineered with AI so your pipeline compounds without growing headcount." }, { q: "How do you measure ROI?", a: "Every engagement starts by modeling your unit economics. Then we report on the metrics that move your business: cost per lead, ROAS, leads per month, and revenue, never vanity impressions. You get a live dashboard from day one." }, { q: "What types of clients do you work with?", a: "Service companies, ecommerce brands, and local businesses, with deep experience in law firms, medical and dental practices, cosmetic practices, and enterprise tech and retail." }, { q: "How long until we see results?", a: "Paid channels can show signal in the first 2 to 4 weeks. SEO and content compound over 3 to 6 months. We ship a growth plan in days and set realistic milestones before any spend goes live." }, { q: "Can you customize a plan for my business?", a: "Always. We don't sell one-size-fits-all retainers. After a free strategy session we propose a channel-by-channel plan scoped to your goals, budget, and timeline." }, ]; const SERVICE_FAQ = [ { q: "Do I need a minimum ad budget to start?", a: "No hard minimum, though most clients see the strongest returns at $10k+/month in media. We'll tell you honestly whether paid is the right first move or whether SEO and automation should lead." }, { q: "Do you have experience in my industry?", a: "Very likely. We've delivered for enterprise tech and retail, ecommerce, medical and dental practices, cosmetic practices, and law firms. Vertical expertise shapes everything from creative to bidding." }, { q: "Who manages my account day to day?", a: "A dedicated specialist plus our AI optimization layer. You'll have a direct line to the human running your channel and a dashboard that's always current." }, { q: "How is AI actually used?", a: "AI agents test creative, audiences, and bids around the clock, surface anomalies before they cost you, and automate the reporting and follow-up that usually eats your team's time. Humans set strategy; AI handles the grind." }, ]; Object.assign(window, { CLIENTS, ClientWordmark, HUES, Avatar, ProjectThumb, ValueThumb, TESTIMONIALS, HOME_FAQ, SERVICE_FAQ, initials });