// pages.jsx — Services, Portfolio, Testimonials, Blog, About, Book, Contact, CaseStudies // ════════════════════════════════════════════════════════════════════════ // Generic page header // ════════════════════════════════════════════════════════════════════════ function PageHero({ eyebrow, title, intro, accent = "var(--accent)" }) { return (
{eyebrow}

{title}

 {intro &&

{intro}

 }
); } // ════════════════════════════════════════════════════════════════════════ // Services page // ════════════════════════════════════════════════════════════════════════ function ServicesPage() { const [hover, setHover] = useState(null); return ( Four systems that compound revenue.} intro="We don't sell hours or one-off campaigns. We deploy and operate growth systems built around AI agents, automation, performance media, and content engines — measured weekly, optimized monthly." /> {dj.serviceGroups.map((group, gi) =>
0{gi + 1} / 04

{group.label}

{group.tagline}
{group.items.map((it, ii) => setHover(it.id)} onMouseLeave={() => setHover(null)}>

{it.name}

{it.blurb}

Explore service →
)}
)}
Not sure where to start?

We'll diagnose your funnel
and tell you the truth.

); } // ════════════════════════════════════════════════════════════════════════ // Service work — per-service portfolio grid // ════════════════════════════════════════════════════════════════════════ function ServiceWork({ serviceId, serviceName }) { const items = dj.serviceWork[serviceId] || []; const [lightbox, setLightbox] = useState(null); return (
Work we've shipped.} intro="Real projects, real brands. Every tile below is something we built and operated — click any to see the full case where applicable." />
{items.map((it, i) => { const span = ["w", "s", "s", "t", "s", "w", "s", "s"][i % 8]; if (it.placeholder) { return (
{it.niche}

{it.brand}

{it.metric && {it.metric}} Reserved · {serviceName}
); } return ( ); })}
{lightbox &&
setLightbox(null)} role="dialog"> e.stopPropagation()} />
}
); } Object.assign(window, { ServiceWork }); // ════════════════════════════════════════════════════════════════════════ // Service detail page // ════════════════════════════════════════════════════════════════════════ function ServiceDetailPage({ id }) { // Find the service across all groups let service = null; let group = null; for (const g of dj.serviceGroups) { const found = g.items.find((i) => i.id === id); if (found) {service = found;group = g;break;} } if (!service) { service = dj.serviceGroups[0].items[0]; group = dj.serviceGroups[0]; } const d = dj.serviceDetails && dj.serviceDetails[service.id]; // Find related services from the same group, excluding current const related = group.items.filter((i) => i.id !== service.id).slice(0, 3); return (
← All services
{group.label} · {group.tagline}

{service.name}

{d ? d.hero : service.blurb}
{d && d.timeline &&
Timeline{d.timeline}
} {d && d.stack &&
Stack{d.stack.slice(0, 3).join(" · ")}
}
{d &&
Everything included.} intro={`A complete delivery system — the work that happens, the tools we operate, and the rituals that keep it improving.`} />
{d.included.map((item, i) =>
{String(i + 1).padStart(2, "0")}

{item}

 )}
{dj.serviceWork && dj.serviceWork[service.id] && }
Outcomes

What changes in 90 days.
{d.outcomes.map((o, i) =>
↑

{o}

 )}
Ideal for
    {d.idealFor.map((x, i) =>
  • {x}
    • )}
Stack we operate
    {d.stack.map((x, i) =>
  • {x}
    • )}
Engagement

{d.timeline}

Start the conversation →
} {related.length > 0 &&
Pairs well with these.} />
{related.map((r, i) =>

{r.name}

{r.blurb}

Explore →
)}
}
Ready to ship

Let's plan your {service.name.toLowerCase()}.

); } Object.assign(window, { ServiceDetailPage }); // ════════════════════════════════════════════════════════════════════════ // Case Studies — list + modal detail // ════════════════════════════════════════════════════════════════════════ function CaseStudiesPage() { const [filter, setFilter] = useState("All"); const niches = ["All", ...new Set(dj.caseStudies.map((c) => c.niche))]; const filtered = filter === "All" ? dj.caseStudies : dj.caseStudies.filter((c) => c.niche === filter); return ( Systems shipped. Results measured.} intro="Click any case to read the full story — goal, system architecture, what we built, real numbers, and the founder's words." />
{niches.map((n) => setFilter(n)}>{n} )}
{filtered.map((c, i) =>
/{String(i + 1).padStart(2, "0")} {c.niche}
{c.brand}
{c.goal}
{c.stats.map((s) => {s.v} {s.k} )}
→ )}
); } // Case detail (full page) function CaseDetailPage({ id }) { const c = dj.caseStudies.find((x) => x.id === id) || dj.caseStudies[0]; const hasGallery = c.banners && c.banners.length > 0; const hasListings = c.listings && c.listings.length > 0; const [lightbox, setLightbox] = useState(null); return (
{c.hero &&
}
← Back to case studies
{c.niche}{c.region ? ` · ${c.region}` : ""} {c.logo && {`${c.brand} }

{c.brand}

{c.goal}

 {(c.website || c.instagram) && } {!c.logo &&
{c.brand.split(" ").map((w) => w[0]).join("")}
 }
{c.logo &&
{`${c.brand}
}
Engagement
  • Niche{c.niche}
  • Region{c.region || "India + global"}
  • Brand color {c.color}
  • StageLive · operating

The system we built

    {c.did.map((d, i) =>
  • {String(i + 1).padStart(2, "0")}{d}
    • )}

Results

{c.stats.map((s) =>
{s.v} {s.k}
)}

"{c.quote}"

— {c.who}
 {c.reviewImage &&
Verified review · Freelancer.com {`Freelancer.com
}
{c.brandGuide &&
The system we built before we sold anything.} intro={`We started with the brand. Tagline, palette, typography — the rules that make every creative feel like ${c.brand}.`} />
Tagline

"{c.brandGuide.tagline}"
Typography
    {c.brandGuide.typography.map((t, i) =>
  • {t}
    • )}
Color palette
{c.brandGuide.palette.map((p) =>
{p.name} {p.hex.toUpperCase()} {p.role}
)}
{c.brandGuide.principles &&
Brand principles
    {c.brandGuide.principles.map((p, i) =>
  • {String(i + 1).padStart(2, "0")}{p}
    • )}
}
} {c.analytics &&
The numbers behind the engine.} intro={`A snapshot of ${c.analytics.platform} performance across the engagement — what we spent, what we generated, and where the funnel held.`} />
Platform{c.analytics.platform}
Completed{c.analytics.duration}
Brand{c.brand}
18 months
{c.analytics.cards.map((card, i) =>
{card.label} {card.value} {card.note && {card.note}}
)}
{c.analytics.bars && (() => { const max = Math.max(...c.analytics.bars.map((b) => b.leads)); return (
Monthly lead generation
Y · leads / month · Σ {c.analytics.bars.reduce((s, b) => s + b.leads, 0).toLocaleString()}+ over 12 months
{c.analytics.bars.map((b, i) =>
)}
{c.analytics.bars.map((b) => {b.month})}
); })()} {c.analytics.funnel &&
Funnel breakdown
Top → bottom · ads → leads
{c.analytics.funnel.map((s) =>
{s.stage} {s.value}
)}
}
} {c.galleries && c.galleries.map((g, gi) =>
{g.images.map((src, i) => )}
)} {hasGallery &&
Eight modules. One brand voice.} intro="A+ Content built for the Amazon detail page — lifestyle, comparisons, and feature benefits, all engineered to lift conversion." />
{c.banners.map((src, i) => )}
} {hasListings &&
Hero, lifestyle, comparison, and the rest.} intro="The full set of Amazon listing images — every angle a shopper needs to convert." />
{c.listings.map((src, i) => )}
}
{lightbox &&
setLightbox(null)} role="dialog"> e.stopPropagation()} />
} ); } // ════════════════════════════════════════════════════════════════════════ // Portfolio // ════════════════════════════════════════════════════════════════════════ function PortfolioPage() { const [filter, setFilter] = useState("All"); const niches = ["All", ...dj.niches.filter((n) => dj.portfolio.some((p) => p.niche === n))]; const filtered = filter === "All" ? dj.portfolio : dj.portfolio.filter((p) => p.niche === filter); return ( Brands we've built
with our own hands.} intro="A living grid of projects across 20+ niches. Filter by industry to see how the system adapts to each model." />
{niches.map((n) => setFilter(n)}>{n} )}
{filtered.map((p, i) => { const pattern = ["w", "s", "s", "t", "s", "w", "s", "s"]; const span = pattern[i % pattern.length]; const target = p.caseId ? `case/${p.caseId}` : null; const inner = {p.logo ? {p.brand} : {p.brand.split(" ").map((w) => w[0]).slice(0, 2).join("")} }
{p.niche}{p.tag ? " · " + p.tag.split("·")[0].trim() : ""}

{p.brand}

; return ( {target ? {inner} :
{inner}
} ); })}
{filtered.length === 0 &&

No projects yet in this niche — yours could be the first.

}
); } // ════════════════════════════════════════════════════════════════════════ // Testimonials // ════════════════════════════════════════════════════════════════════════ function TestimonialsPage() { return ( What founders say
after the system ships.} intro="Written notes, video reels, and quiet wins. The best signal we can offer is the people we've worked with." />
Founders, on camera.} />
{dj.testimonials.filter((t) => t.reel).map((t, i) =>
▶

"{t.quote}"

{t.who}

 )}
Quiet wins, in their words.} />
{dj.testimonials.map((t, i) =>

"

{t.quote}
{t.who} {t.niche}
)}
); } // ════════════════════════════════════════════════════════════════════════ // Blog // ════════════════════════════════════════════════════════════════════════ function BlogPage() { const [filter, setFilter] = useState("All"); const cats = ["All", ...new Set(dj.blog.map((b) => b.category))]; const filtered = filter === "All" ? dj.blog : dj.blog.filter((b) => b.category === filter); return ( What we learn,
operating the system.} intro="Tactical writing on AI marketing, automation, performance media, and the new search era — from the team building it daily." />
{cats.map((c) => setFilter(c)}>{c} )}
); } // ════════════════════════════════════════════════════════════════════════ // About / Team // ════════════════════════════════════════════════════════════════════════ function AboutPage() { return ( A small team building
India's AI-first growth company.} intro="Digital Jaao was started in Jaipur with one belief — that the next decade of marketing belongs to founders who build systems, not those who buy media. We design and operate that system, end to end, for ambitious brands." />
Built from the funnel, not the brochure.} />

We started Digital Jaao after years of operating inside D2C and SaaS brands — watching the gap widen between agencies that ran campaigns and the businesses that needed systems. Every founder we met was paying for activity, not architecture.

So we built the other thing. A growth company designed around AI agents, automation, performance media, and content — engineered like a product team and operated with a weekly cadence. Today we run that system for 240+ brands across 20 niches.

The mission is simple. Make growth predictable. Make the work visible. Make AI a teammate, not a marketing slogan.

Operators first. Builders second.} />
{dj.founders.map((f, i) => )}
Six things we operate by.} />
{[ ["Systems beat campaigns", "Engines compound. Campaigns expire."], ["AI is a teammate", "Not a buzzword. Not a replacement."], ["Founder voice wins", "Faceless brands lost the trust race."], ["Show the numbers", "Live dashboards. No vanity slides."], ["Ship in weeks", "Speed is a strategic moat."], ["Brand is the moat", "Performance dies without it."]]. map(([h, b], i) =>
{String(i + 1).padStart(2, "0")}

{h}

{b}

 )}
); } // ════════════════════════════════════════════════════════════════════════ // Book a demo / 1-on-1 // ════════════════════════════════════════════════════════════════════════ function BookPage() { const [form, setForm] = useState({ name: "", email: "", phone: "", brand: "", niche: "", goal: "", budget: "₹50k–1L / mo" }); const [step, setStep] = useState(1); const [submitted, setSubmitted] = useState(false); const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value }); const valid1 = form.name && form.email; const valid2 = form.brand && form.niche; return ( 30 minutes.
Honest answers.} intro="A direct call with a senior member of the team. We'll audit your current funnel, identify the bottleneck, and tell you whether we can help — even if the answer is no." />

What you'll get

  • A live audit of your current funnel and ad accounts
  • The one bottleneck that's costing you the most revenue
  • A blueprint of the AI system we'd build for you
  • An honest yes/no — no follow-up pressure

"We replaced three vendors with one AI-first team. Numbers speak."

— Sales Director · Saaras Estates
Email{dj.brand.email}
Phone{dj.brand.phone}
Location{dj.brand.location}
{!submitted ?
{e.preventDefault();setSubmitted(true);}}>
{[1, 2, 3].map((n) => = n ? "is-on" : ""}`}> {String(n).padStart(2, "0")} {n === 1 ? "About you" : n === 2 ? "About your brand" : "Pick a time"} )}
{step === 1 &&
} {step === 2 &&