); } // ─── Hero variants ───────────────────────────────────────────────────────── // Page-wide ambient background — aurora mesh + cursor spotlight + drifting dust. // Designed to feel like a premium AI / SaaS landing page; stays subtle so // content reads cleanly. function HomeBackground() { const spotRef = useRef(null); useEffect(() => { let raf = 0, tx = 50, ty = 30, x = 50, y = 30; const onMove = (e) => { tx = (e.clientX / window.innerWidth) * 100; ty = (e.clientY / window.innerHeight) * 100; }; const loop = () => { x += (tx - x) * 0.08; y += (ty - y) * 0.08; if (spotRef.current) { spotRef.current.style.setProperty("--mx", x + "%"); spotRef.current.style.setProperty("--my", y + "%"); } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); window.addEventListener("pointermove", onMove); return () => { cancelAnimationFrame(raf); window.removeEventListener("pointermove", onMove); }; }, []); // Fixed-seed dust particles (no per-frame React work) const dust = useMemo(() => Array.from({ length: 28 }).map((_, i) => ({ key: i, x: (i * 13 + 7) % 100, y: (i * 17 + 23) % 100, d: 18 + ((i * 7) % 18), delay: -(i * 1.3) % 18, size: 1 + ((i * 3) % 3), o: 0.4 + ((i * 11) % 5) / 10, })), []); return (

{dust.map(d => ( ))}

); } // Ambient AI background — animated grid + drifting orbs + rising particles function HeroFX() { // Fixed seeds so SSR-equivalent first render matches; no per-frame React work. const particles = useMemo(() => Array.from({ length: 14 }).map((_, i) => ({ key: i, left: `${(i * 7.3 + 3) % 100}%`, dur: 9 + i * 3 % 10, delay: i * 1.7 % 12, size: 2 + i * 5 % 4 })), []); return ( ); } // Headline passthrough — no animation wrapper, just renders children. function AnimatedHeadline({ children }) { return {children}; } // Floating AI status chips around the hero — premium SaaS feel function HeroFloaters() { const items = [ { x: "8%", y: "12%", label: "voice.agent", status: "Live · 12 calls", dur: 7 }, { x: "82%", y: "20%", label: "lead.gen", status: "+4 qualified", dur: 9 }, { x: "6%", y: "62%", label: "whatsapp.auto", status: "Broadcast · 1,240", dur: 11 }, { x: "84%", y: "70%", label: "ai.seo", status: "AI Overview · pos. 1", dur: 8 }, ]; return ( ); } // Animated violet dot-wave field — waving grid of dots behind the hero function HeroDotWave() { const cols = 36, rows = 12; const cellW = 100 / cols; // % units const cellH = 100 / rows; return ( ); } function HeroCentered() { return (

Now taking 3 new partners for Q3 2026 Digital Jaao · Jaipur, India

AI-powered growth systems
for modern brands.

We design and operate the engine — AI agents, automation, performance media, and content — that turns your brand into a compounding revenue system.

); } function HeroSplit() { return (

Now taking 3 new partners for Q3 2026 Digital Jaao · Jaipur, India

AI-powered
growth systems
for modern brands.

We design and operate the engine — AI agents, automation, performance media, content — that turns your brand into a compounding revenue system.

); } function HeroMarquee() { return (

AI-powered growth systems

We design and operate the engine — AI agents, automation, performance media, and content — that turns your brand into a compounding revenue system.

); } // ─── Trust strip ────────────────────────────────────────────────────────── function TrustStrip() { return (

Trusted by 240+ brands across 20 niches

); } // ─── Stats bar ──────────────────────────────────────────────────────────── function StatsBar() { return (

{dj.stats.map((s, i) =>

{s.label}

)}

); } // ─── Services preview ──────────────────────────────────────────────────── function ServicesPreview() { return (

One team. Four systems. All operated like a product.} intro="Most agencies sell hours. We ship engines — AI agents, automation, performance media, and content — designed to compound revenue over quarters, not days." />

{dj.serviceGroups.map((g, i) =>

0{i + 1} →

{g.label}

{g.tagline}

{it.name}
+ {g.items.length - 4} more

)}

); } // ─── Featured case studies ──────────────────────────────────────────────── function FeaturedCases() { const featured = dj.caseStudies.slice(0, 3); return (

Real systems. Real numbers.} intro="A small selection of recent work. Click any to read the full story." />

{featured.map((c, i) =>

{c.niche}{c.region ? ` · ${c.region}` : ""} {c.logo ?

: {c.brand.split(" ").map((w) => w[0]).join("")} }

{c.brand}

{c.goal}

{c.stats.map((s) =>

{s.v} {s.k}

)}

Read the case study →

)}

); } // ─── Process ────────────────────────────────────────────────────────────── function ProcessSection() { return (

A method that compounds.} intro="Every engagement runs the same four-stage rhythm. Predictable, transparent, measurable." />

{dj.process.map((p, i) =>

{p.n}

{p.name}

{p.body}

)}

); } // ─── Client reels ──────────────────────────────────────────────────────── function ClientReels() { return (

Hear it from the founders.} intro="Short, honest videos from clients we've worked with across India and beyond." />

{[0, 1, 2, 3].map((i) => { const t = dj.testimonials[i]; return (

▶

"{t.quote.slice(0, 72)}{t.quote.length > 72 ? "…" : ""}"

{t.who}

); })}

); } // ─── Certifications ────────────────────────────────────────────────────── function CertStrip() { return (

Certified & partnered

); } // ─── FAQ ───────────────────────────────────────────────────────────────── function FAQSection() { const [open, setOpen] = useState(0); return (

The things you'll probably ask.} />

{f.a}

); } // ─── Bento portfolio (editorial mixed-size grid) ─────────────────────────── function BentoPortfolio() { const items = dj.portfolio.slice(0, 8); const pattern = ["w", "s", "s", "t", "s", "w", "s", "s"]; return (

(0{Math.min(items.length, 9)}) selected work

A few projects we're proud of.

{items.map((p, i) => { const span = pattern[i] || "s"; const target = p.caseId ? `case/${p.caseId}` : "portfolio"; const inner = {p.logo ?

: {p.brand.split(" ").map((w) => w[0]).slice(0, 2).join("")} }

{p.niche}{p.tag ? " · " + p.tag.split("·")[0].trim() : ""}

{p.brand}

; return ( {inner} ); })}

); } // ─── Page ──────────────────────────────────────────────────────────────── function HomePage({ heroVariant = "centered" }) { const Hero = heroVariant === "split" ? HeroSplit : heroVariant === "marquee" ? HeroMarquee : HeroCentered; return ( ); } Object.assign(window, { HomePage, BentoPortfolio });