const { useRef, useEffect, useState } = React; // ── PROCESS ─────────────────────────────────────────────────────────────────── const ProcessSection = () => { const sectionRef = useRef(null); const [activeStep, setActiveStep] = useState(0); const steps = [ { num: '01', title: 'Discover', body: 'Deep dive into your business, audience, and market. We listen before we speak.' }, { num: '02', title: 'Strategize', body: 'A roadmap built around outcomes, not vanity metrics. Every move is deliberate.' }, { num: '03', title: 'Build', body: 'Pixel-perfect design, production-grade code. No shortcuts, no excuses.' }, { num: '04', title: 'Launch', body: 'Calm, controlled, zero-drama deployment. Done this a hundred times.' }, { num: '05', title: 'Optimize', body: 'We measure, iterate, and grow with you. Ship and ghost is not our style.' }, ]; useEffect(() => { const section = sectionRef.current; if (!section) return; const handleScroll = () => { const rect = section.getBoundingClientRect(); const totalH = section.offsetHeight - window.innerHeight; const progress = Math.max(0, Math.min(1, -rect.top / totalH)); setActiveStep(Math.min(steps.length - 1, Math.floor(progress * steps.length))); }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); return (
{/* Scroll-height spacer */}
{/* Left — giant number */}
[ 03 ] — HOW WE WORK
{steps[activeStep].num}
{activeStep + 1} of {steps.length}
{/* Right — step content */}
{steps.map((step, i) => (
{step.title}
{step.body}
))}
{/* Step nav dots */}
{steps.map((step, i) => (
{step.num}
))}
); }; // ── TESTIMONIALS ────────────────────────────────────────────────────────────── const TestimonialsSection = () => { const [active, setActive] = useState(0); const quotes = [ { text: "They didn't just build us a website. They built us a growth engine.", author: "Director, Jewelry Export Co.", location: "Jaipur" }, { text: "Our ChatGPT and Google rankings shot up simultaneously. I didn't think that was possible.", author: "Founder, D2C Wellness Brand", location: "Delhi" }, { text: "Zero drama, maximum output. The rarest combination in the agency world.", author: "CEO, Heritage Hospitality Group", location: "Rajasthan" }, ]; useEffect(() => { const id = setInterval(() => setActive(a => (a + 1) % quotes.length), 5000); return () => clearInterval(id); }, []); return (
[ 04 ] — WHAT THEY SAY
{quotes.map((q, i) => (
"{q.text}"
{q.author}
{q.location}
))}
{/* Dots */}
{quotes.map((_, i) => (
); }; // ── ABOUT ───────────────────────────────────────────────────────────────────── const AboutSection = () => { const ref = useRef(null); const [counts, setCounts] = useState([0, 0, 0, 0]); const targets = [50, 8, 12, 100]; const labels = ['Projects Shipped', 'Industries Served', 'Cr+ Revenue Generated', '% Jaipur-based']; const prefixes = ['', '', '₹', '']; const suffixes = ['+', '+', 'Cr+', '%']; useEffect(() => { const observer = new IntersectionObserver(([e]) => { if (!e.isIntersecting) return; targets.forEach((target, ti) => { const duration = 1800; const start = performance.now(); const animate = (now) => { const progress = Math.min(1, (now - start) / duration); const ease = 1 - Math.pow(1 - progress, 3); setCounts(prev => { const n = [...prev]; n[ti] = Math.round(ease * target); return n; }); if (progress < 1) requestAnimationFrame(animate); }; setTimeout(() => requestAnimationFrame(animate), ti * 150); }); observer.disconnect(); }, { threshold: 0.3 }); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); return (
{/* Left */}
[ 05 ] — WHO WE ARE

Built in
Jaipur.
Trusted globally.

We're a boutique digital agency that grew up in the Pink City and grew into global markets. Our obsession is simple: help businesses build better, grow faster, and operate smarter.

No offshore teams. No junior-handled accounts. Just a tight crew of designers, developers, and growth strategists who take your business personally.

{/* Right — stats */}
{targets.map((_, i) => (
{prefixes[i]}{counts[i]}{suffixes[i]}
{labels[i]}
))}
{/* Trusted by ticker */}
Trusted by
{Array(10).fill(null).map((_, i) => ( {['Jewelry Co.', 'D2C Brand', 'Heritage Group', 'EdTech Co.', 'Clinic Chain'].map(n => ( {n} ))} ))}
); }; // ── CONTACT ─────────────────────────────────────────────────────────────────── const ContactSection = () => { const [sent, setSent] = useState(false); const [name, setName] = useState(''); const [company, setCompany] = useState(''); const [service, setService] = useState(''); const [budget, setBudget] = useState(''); const [email, setEmail] = useState(''); const handleSend = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); }; return (
[ 06 ] — START A PROJECT

Got a project?
Let's make it
unforgettable.

{sent ? (
Got it. We'll be in touch. ✦
) : (
I'm setName(e.target.value)} placeholder="your name" style={{ fontSize: 'inherit', fontFamily: 'var(--font-display)', fontStyle: 'italic' }} /> from setCompany(e.target.value)} placeholder="company" style={{ fontSize: 'inherit', fontFamily: 'var(--font-display)', fontStyle: 'italic' }} /> ,
interested in ,
with a budget of .
Reach me at setEmail(e.target.value)} placeholder="your@email.com" style={{ fontSize: 'inherit', fontFamily: 'var(--font-display)', fontStyle: 'italic', minWidth: 220 }} /> .
)} {/* Sidebar contact info */}
{[ { label: 'WhatsApp', val: '+91 98765 43210', href: 'https://wa.me/919876543210' }, { label: 'Email', val: 'hello@eriont.in', href: 'mailto:hello@eriont.in' }, ].map(({ label, val, href }) => ( {label} ))}
); }; // ── FOOTER ──────────────────────────────────────────────────────────────────── const FooterSection = () => { const nameRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver(([e]) => { if (e.isIntersecting && nameRef.current) nameRef.current.classList.add('filled'); }, { threshold: 0.3 }); if (nameRef.current) observer.observe(nameRef.current); return () => observer.disconnect(); }, []); const cols = [ { title: 'Services', links: ['Custom Software', 'Ecommerce', 'SEO + AEO', 'Performance Mktg', 'AI Automation'] }, { title: 'Industries', links: ['Jewelry & Export', 'Healthcare', 'D2C Brands', 'Real Estate', 'Hospitality'] }, { title: 'Company', links: ['About', 'Process', 'Work', 'Careers', 'Blog'] }, { title: 'Connect', links: ['hello@eriont.in', '+91 98765 43210', 'Jaipur, Rajasthan 302001', 'LinkedIn', 'Instagram'] }, ]; return ( ); }; Object.assign(window, { ProcessSection, TestimonialsSection, AboutSection, ContactSection, FooterSection });