/* global React */ const { useEffect, useRef, useState } = React; /* ─────────────────────────────────────────────────────────── Shared atoms ─────────────────────────────────────────────────────────── */ const Arrow = ({ size = 12 }) => ( ); const Logo = () => ( a Adspider. ); const Kicker = ({ children, className = "" }) => (
{children}
); const SectionLabel = ({ index, label }) => (
{index} {label}
); /* ─────────────────────────────────────────────────────────── 1. Header ─────────────────────────────────────────────────────────── */ function Header() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const nav = [ ["Services", "#services"], ["Results", "#results"], ["Workflow", "#workflow"], ["Testimonials", "#testimonials"], ["Founder", "#founder"], ["Contact", "#contact"], ]; return (
Let's Talk
{open && (
)}
); } /* ─────────────────────────────────────────────────────────── 2. Hero ─────────────────────────────────────────────────────────── */ function HeroVisual() { // Abstract premium composition — orbital rings + soft serif glyph return (
{/* faint grid */} {/* orbital arcs */} {/* central serif glyph */}
a.
{/* corner stat */}
Studio · Live EST 2019
Now booking
Q3 — Q4 / 2026
Avg. lift
+312%
); } function Hero() { return (
A creative & growth studio

We grow brands
that refuse to
be forgettable.

Adspider is an independent studio for strategy, branding, design, performance marketing and development. We build the work — then make it pay back.

Start a Project View Work
{/* trust strip */}
100+
Clients shipped
$500m+
Ad spend managed
7y.
Independent
{/* Marquee */}
); } function Track() { const items = ["Branding", "Performance", "Development", "Design", "Strategy", "Identity", "Web", "Growth"]; return (
{items.map((i, idx) => ( {i} ✦ ))}
); } /* ─────────────────────────────────────────────────────────── 3. Services ─────────────────────────────────────────────────────────── */ const SERVICES = [ { n: "01", title: "Branding", desc: "Identity systems, naming, voice and positioning. We build brands with a backbone — distinct, durable, and dangerously consistent.", tags: ["Identity", "Naming", "Voice", "Guidelines"], icon: , }, { n: "02", title: "Performance Marketing", desc: "Full-funnel paid media on Meta, Google, TikTok and beyond. Creative, data and media buying under one roof — measured to the dollar.", tags: ["Paid Social", "Search", "CRO", "Lifecycle"], icon: , }, { n: "03", title: "Development", desc: "Production-grade websites, ecommerce and product surfaces. Built fast on Next.js, Webflow and Shopify — engineered to scale.", tags: ["Web", "Shopify", "Headless", "Mobile"], icon: , }, { n: "04", title: "Design", desc: "Product, web and campaign design. Pixel-perfect interfaces, motion, and art direction that reads premium on every screen.", tags: ["Product", "Web", "Motion", "Art Direction"], icon: , }, ]; function BrandingIcon() { return ( ); } function PerfIcon() { return ( ); } function DevIcon() { return ( ); } function DesignIcon() { return ( ); } function ServiceCard({ s }) { return (
{s.n}

{s.title}

{s.desc}

{s.tags.map((t, i) => ( {i > 0 && } {t} ))}
{s.icon}
); } function Services() { return (

Four disciplines.
One integrated team.

Start a project
{SERVICES.map((s) => )}
); } /* ─────────────────────────────────────────────────────────── 4. Proven Results ─────────────────────────────────────────────────────────── */ function Counter({ to, suffix = "", duration = 1600 }) { const [v, setV] = useState(0); const ref = useRef(null); const started = useRef(false); useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(Math.round(to * eased)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); } }); }, { threshold: 0.4 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [to, duration]); return {v.toLocaleString()}{suffix}; } function Results() { const stats = [ { value: 100, suffix: "+", label: "Clients worldwide", note: "From early-stage challengers to listed brands." }, { value: 25, suffix: "+", label: "Ninja team members", note: "Strategists, designers, engineers, media buyers." }, { value: 500, prefix: "$", suffix: "M+", label: "Ad spend for clients", note: "Across Meta, Google, TikTok and programmatic." }, ]; return (
{/* deco corner mark */}
+
( 02 ) — Proven Results

Numbers that don't lie.

Built quietly. Measured loudly. Every engagement is tied to a number we share — and beat.
{stats.map((s, i) => (
0 ? "md:border-l md:border-[var(--bg)]/14 md:pl-8" : ""} border-t border-[var(--bg)]/14`}>
{s.prefix || ""}
{s.label}
{s.note}
))}
{/* footer logo strip */}
{["Lumen", "Northbeam", "Verdant", "Helio", "Halcyon", "Atlas&Co"].map((n) => (
{n}.
))}
); } /* ─────────────────────────────────────────────────────────── 5. Workflow ─────────────────────────────────────────────────────────── */ const STEPS = [ { n: "01", title: "Free Strategy", short: "We listen, then map.", points: [ "Initial consultation to understand your vision.", "Analysis of your market and competitors.", "Outline of a tailored strategic approach.", ], days: "Days 1–3", }, { n: "02", title: "Onboarding", short: "Kickoff, calibrated.", points: [ "Formal project kickoff and team introduction.", "Setup of communication channels and tools.", "Deep dive into project requirements and goals.", ], days: "Week 1", }, { n: "03", title: "Execution", short: "Build in sprints.", points: [ "Agile sprints for design and development.", "Regular check-ins and progress reports.", "Iterative feedback and refinement cycles.", ], days: "Weeks 2–8", }, { n: "04", title: "Delivery & Growth", short: "Ship. Then compound.", points: [ "Final project delivery and launch.", "Training and documentation handover.", "Ongoing support and growth strategy.", ], days: "Week 8 →", }, ]; function WorkflowRow({ s, last }) { const [open, setOpen] = useState(false); return (
setOpen(true)} onMouseLeave={() => setOpen(false)} onClick={() => setOpen((o) => !o)} >
{s.n}

{s.title}

{s.days}
— {s.short}
    {s.points.map((p) => (
  • {p}
    • ))}
); } function Workflow() { return (

A four-step path
from first call to compounding growth.

Same process for a series-A SaaS as for a heritage CPG. We've refined it across 100+ engagements — predictable timelines, visible progress, no surprises.
{STEPS.map((s, i) => )}
); } /* ─────────────────────────────────────────────────────────── 6. Testimonials ─────────────────────────────────────────────────────────── */ const TESTIMONIALS = [ { n: "Muzammil Ahmad", r: "Performance Marketing & Growth", av: "av-1", in: "MO", q: "I'd been running Meta ads myself for a year. Spending money, getting some sales, never really knowing why. AdSpider fixed three things in the first week I didn't even know were problems. Two months later my ROAS went from 1.8x to 4.3x. Don't fully understand everything they do — don't need to anymore."}, { n: "Anwar Ali", r: "Shopify development", av: "av-2", in: "DR", q: "I Had a product, had a supplier, but no idea how to sell it online. AdSpider built my store from scratch — not just functional, but actually looked like a real brand. First month I did Rs. 180,000 in sales. Was expecting maybe half that." }, { n: "Hassan Ramzan", r: "Landing Page Optimization", av: "av-5", in: "PS", q: "My conversions were terrible so I kept changing creatives, wasting money. AdSpider said the landing page was the problem, not the ads. They rebuilt it. Conversion rate went from 1.1% to 3.8%. Same traffic, completely different results." }, { n: "Ayesha Omer",r: "Website Development", av: "av-6", in: "JL", q: "Needed a proper website for my clothing brand, not a template with my logo on it. AdSpider really helped us!" }, { n: "Aisha Caldwell", r: "Marketing Lead, Halcyon", av: "av-3", in: "AC", q: "They rebuilt our funnel end-to-end. Revenue from paid social is up 3.2× and the brand feels finally finished." }, { n: "Kashif Nadeem", r: "Shopify Growth", av: "av-4", in: "TM", q: "AdSpider audited everything and gave me a priority list — didn't change everything at once, just worked through it. By month three, revenue was up 60% and ad spend had barely moved." }, ]; function TestimonialCard({ t, big }) { return (
"{t.q}"
{t.in}
{t.n}
{t.r}
); } function Testimonials() { return (

The receipts,
in their own words.

4.9 / 5 · 80+ reviews
); } /* ─────────────────────────────────────────────────────────── 7. Founder ─────────────────────────────────────────────────────────── */ function FounderPortrait() { // Refined SVG portrait placeholder — abstract silhouette + frame return (
{/* tag */}
Founder · CEO Since 2019
); } function Founder() { return (

Hi, I'm ADIL BAIGH.
I run Adspider.

I started Adspider in 2023 after a decade between an agency in Lahore, Pakistan and an in-house growth team at a Series-C SaaS. I was tired of decks that didn't ship — and ads that didn't sell. So we built a studio where strategy, design and media live in the same room.

Today, twenty-five operators run engagements across three continents. I still take every first call personally — it's the part of the job I refuse to delegate.

12y.
In the trade
3x
Cannes shortlist
100+
Brands shipped
); } /* ─────────────────────────────────────────────────────────── 8. Contact ─────────────────────────────────────────────────────────── */ function Contact() { const [form, setForm] = useState({ name: "", email: "", company: "", service: "Branding", details: "", budget: "$10–25k" }); const [sent, setSent] = useState(false); const [submitting, setSubmitting] = useState(false); // Add for UX const onSubmit = async (e) => { e.preventDefault(); setSubmitting(true); const formData = new FormData(); formData.append('name', form.name); formData.append('_replyto', form.email); // Reply-to email formData.append('company', form.company); formData.append('service', form.service); formData.append('budget', form.budget); formData.append('message', form.details); formData.append('_subject', `New Inquiry: ${form.company || 'Visitor'} | ${form.service}`); try { const response = await fetch('https://formspree.io/f/xvgwnldd', { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } }); if (response.ok) { setSent(true); setTimeout(() => { setSent(false); setForm({ name: "", email: "", company: "", service: "Branding", details: "", budget: "$10–25k" }); // Reset form }, 4000); } else { alert('Submission failed—try again or email hello@withadspider.com'); } } catch (error) { alert('Network error—please email us directly'); } finally { setSubmitting(false); } }; const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); return (

Let's make
something worth shipping.

Tell us about your project, and we'll get back to you within one business day. First call is on us — strategy, not sales.

Studio
Johar Town
Lahore, Pakistan -54000
Hours
Mon — Fri · 9:00 — 18:00 GMT
{/* Rest of your form JSX unchanged */}
Booking · Q3 — Q4 2026
/ inquiry · 01
{["Branding","Performance Marketing","Development","Design","Not sure yet"].map((s) => ( ))}