const { useRef, useEffect, useState } = React; // ── KINETIC INTRO ───────────────────────────────────────────────────────────── const KineticIntro = () => { const ref = useRef(null); const linesRef = useRef([]); useEffect(() => { const observer = new IntersectionObserver(([e]) => { if (e.isIntersecting) { linesRef.current.forEach((el, i) => { if (el) setTimeout(() => el.classList.add('vis'), i * 200); }); } }, { threshold: 0.25 }); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); const lines = [ { text: "We're a digital agency", delay: 0 }, { text: "born in the Pink City,", delay: 200 }, { text: "building for businesses", delay: 400 }, { text: ["that think ", globally↗], delay: 600 }, ]; return (
[ ABOUT US ]
{lines.map((line, i) => (
linesRef.current[i] = el} className="fu" style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(2rem, 5vw, 6.5rem)', lineHeight: 1.08, color: '#0A0A0A', letterSpacing: '-0.025em', marginBottom: 8, animationDelay: `${line.delay}ms` }}> {Array.isArray(line.text) ? line.text : line.text}
))}
{[['Pink City pedigree', 'Jaipur-born, globally wired.'], ['Jugaad-free engineering', 'Built right the first time.'], ['Full-stack growth', 'Build · Grow · Automate.']].map(([title, sub]) => (
{title}
{sub}
))}
); }; // ── SERVICES ────────────────────────────────────────────────────────────────── const ServicesSection = () => { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.1 }); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); const pillars = [ { num: '01', title: 'Build', icon: ( ), items: ['Custom Software', 'Ecommerce Stores', 'Marketplace Setup', 'Export-Ready B2B Catalogs'], }, { num: '02', title: 'Grow', icon: ( ), items: ['SEO + AEO/GEO', 'Performance Marketing', 'Social Media Management', 'Email & Newsletter Automation'], }, { num: '03', title: 'Automate', icon: ( ), items: ['AI Chatbots', 'WhatsApp Business API', 'Workflow Automation', 'CRM & Lead Funnels'], }, ]; const handleMouseMove = (e, card) => { const rect = card.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; card.style.transform = `translateY(-14px) rotateY(${x * 6}deg) rotateX(${-y * 6}deg)`; }; const handleMouseLeave = (card) => { card.style.transform = ''; }; return (
{/* Header */}
[ 01 ] — WHAT WE DO

Three pillars.
One outcome: growth.

{/* Cards */}
{pillars.map((p, i) => (
handleMouseMove(e, e.currentTarget)} onMouseLeave={e => handleMouseLeave(e.currentTarget)} data-cursor="true"> {/* Icon */}
{p.icon}
{/* Number */}
PILLAR {p.num}
{/* Title */}
{p.title}
{/* Items */}
    {p.items.map(item => (
  • —{item}
    • ))}
{/* Arrow */}
e.currentTarget.style.transform = 'translateX(6px)'} onMouseOut={e => e.currentTarget.style.transform = ''}>→
))}
Pick one. Or let us orchestrate all three.
); }; // ── INDUSTRIES ──────────────────────────────────────────────────────────────── const IndustriesSection = () => { const row1 = ['Jewelry & Handicraft Export', 'Healthcare', 'Real Estate', 'Hospitality', 'D2C Brands']; const row2 = ['Coaching & EdTech', 'Restaurants', 'Wedding Planners', 'Heritage Hotels', 'Tourism']; const doubled1 = [...row1, ...row1, ...row1, ...row1]; const doubled2 = [...row2, ...row2, ...row2, ...row2]; return (
[ 01.5 ] — INDUSTRIES
We've built for them all.
{[{ items: doubled1, cls: 'marquee-left' }, { items: doubled2, cls: 'marquee-right' }].map((row, ri) => (
{row.items.map((item, i) => ( {item} · ))}
))}
); }; // ── WORK / CASE STUDIES ─────────────────────────────────────────────────────── const WorkSection = () => { const sectionRef = useRef(null); const cases = [ { name: 'ShilpKraft Export', industry: 'Jewelry & Handicraft', metric: '+312% organic traffic in 6 months', services: ['SEO', 'AEO', 'Shopify'], bg: 'linear-gradient(145deg, #1f0900 0%, #3d1800 40%, #0A0A0A 100%)', num: '01' }, { name: 'MehranMart', industry: 'D2C Ecommerce', metric: '₹2.4Cr GMV in first quarter', services: ['Shopify', 'Perf. Marketing', 'Email'], bg: 'linear-gradient(145deg, #00090f 0%, #001a2d 40%, #0A0A0A 100%)', num: '02' }, { name: 'HealPath Clinics', industry: 'Healthcare', metric: '60% support tickets automated', services: ['AI Chatbot', 'WhatsApp API', 'CRM'], bg: 'linear-gradient(145deg, #001a08 0%, #002d12 40%, #0A0A0A 100%)', num: '03' }, { name: 'Haveli Heritage', industry: 'Hospitality', metric: '4.2× booking conversion lift', services: ['Website', 'SEO', 'AEO'], bg: 'linear-gradient(145deg, #1a1600 0%, #2d2800 40%, #0A0A0A 100%)', num: '04' }, ]; useEffect(() => { const section = sectionRef.current; if (!section) return; const cards = section.querySelectorAll('.case-card'); const handleScroll = () => { cards.forEach((card, i) => { const next = cards[i + 1]; if (!next) return; const nextTop = next.getBoundingClientRect().top; const overlap = Math.max(0, Math.min(1, 1 - nextTop / (window.innerHeight * 0.85))); const scale = 1 - overlap * 0.04; card.style.transform = `scale(${scale})`; card.style.filter = `brightness(${1 - overlap * 0.3})`; }); }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); return (
[ 02 ] — SELECTED WORK

Receipts, not promises.

{cases.map((c, i) => (
{c.num} / {cases.length}
{c.industry}

{c.name}

{c.metric}
{c.services.map(s => ( {s} ))} View case →
))}
); }; Object.assign(window, { KineticIntro, ServicesSection, IndustriesSection, WorkSection });