// Compliance Adda — shared site chrome: icons, nav (with services mega-menu), // footer with newsletter, service card, FAQ accordion, WhatsApp float. // Composes components from the bound design system bundle. const CA_DS = window.ComplianceAddaDesignSystem_3d98ba; const { Button, Card, Badge, Input, Select, NavBar, Footer } = CA_DS; /* ───────────────────────── icons (lucide-style line art, stroke 2.25) ───────────────────────── */ const CA_ICON_PATHS = { "check": ["M20 6 9 17l-5-5"], "chevron-down": ["m6 9 6 6 6-6"], "chevron-right": ["m9 18 6-6-6-6"], "arrow-right": ["M5 12h14", "m12 5 7 7-7 7"], "menu": ["M4 6h16", "M4 12h16", "M4 18h16"], "x": ["M18 6 6 18", "M6 6l12 12"], "search": ["M21 21l-4.35-4.35", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"], "phone": ["M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"], "clock": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "M12 6v6l4 2"], "calendar": ["M8 2v4", "M16 2v4", "M3 10h18", "M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"], "bell": ["M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", "M10.3 21a1.94 1.94 0 0 0 3.4 0"], "building": ["M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", "M10 6h4", "M10 10h4", "M10 14h4", "M10 18h4"], "landmark": ["M3 22h18", "M6 18v-7", "M10 18v-7", "M14 18v-7", "M18 18v-7", "M4 8l8-6 8 6H4Z"], "shield-check": ["M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z", "m9 12 2 2 4-4"], "book-open": ["M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z", "M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z"], "file-text": ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", "M14 2v4a2 2 0 0 0 2 2h4", "M16 13H8", "M16 17H8", "M10 9H8"], "award": ["M12 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z", "M15.48 12.89 17 22l-5-3-5 3 1.52-9.11"], "users": ["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"], "user": ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"], "circle-check": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "m9 12 2 2 4-4"], "lock": ["M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2Z", "M7 11V7a5 5 0 0 1 10 0v4"], "zap": ["M13 2 3 14h9l-1 8 10-12h-9l1-8z"], "globe": ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z", "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20", "M2 12h20"], "map-pin": ["M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"], "mail": ["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"], "indian-rupee": ["M6 3h12", "M6 8h12", "m6 13 8.5 8", "M6 13h3", "M9 3c6.667 0 6.667 10 0 10"], "send": ["M22 2 11 13", "M22 2 15 22l-4-9-9-4z"], "message-circle": ["M7.9 20A9 9 0 1 0 4 16.1L2 22z"], "play": ["M6 4l14 8-14 8z"], "star": ["M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"], }; // Brand marks — rendered filled (pass fill). const CA_BRAND_PATHS = { "instagram": ["M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5zM17.8 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1z"], "facebook": ["M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.51 1.5-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"], "youtube": ["M23.5 6.5a3 3 0 0 0-2.11-2.13C19.5 3.85 12 3.85 12 3.85s-7.5 0-9.39.52A3 3 0 0 0 .5 6.5 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.5 3 3 0 0 0 2.11 2.13c1.89.52 9.39.52 9.39.52s7.5 0 9.39-.52A3 3 0 0 0 23.5 17.5 31 31 0 0 0 24 12a31 31 0 0 0-.5-5.5zM9.6 15.6V8.4l6.2 3.6z"], "twitter": ["M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z"], "threads": ["M17.54 11.17c-.1-.05-.2-.09-.3-.13-.18-3.28-1.97-5.16-4.98-5.18h-.04c-1.8 0-3.3.77-4.22 2.17l1.65 1.13c.69-1.04 1.77-1.26 2.57-1.26h.03c1 .01 1.75.3 2.24.88.35.4.6 1 .72 1.75a13.1 13.1 0 0 0-2.85-.14c-2.86.17-4.7 1.83-4.58 4.16.06 1.18.65 2.2 1.66 2.86.85.56 1.95.83 3.09.77 1.5-.08 2.68-.66 3.51-1.71.63-.8 1.03-1.83 1.21-3.09.72.43 1.25 1 1.54 1.68.5 1.16.53 3.05-1.03 4.6-1.36 1.36-3 1.94-5.48 1.96-2.75-.02-4.83-.9-6.18-2.6C4.09 17.06 3.44 14.79 3.42 12c.02-2.79.67-5.06 1.94-6.75C6.7 3.55 8.78 2.67 11.53 2.65c2.77.02 4.87.9 6.24 2.62.67.85 1.18 1.9 1.51 3.12l1.93-.52c-.4-1.5-1.03-2.79-1.9-3.86C17.63 1.83 14.96.68 11.54.66h-.02c-3.41.02-6.03 1.17-7.79 3.42C2.1 6.06 1.32 8.77 1.3 11.99v.02c.02 3.22.8 5.93 2.43 7.9 1.76 2.26 4.38 3.41 7.79 3.43h.02c3.03-.02 5.17-.81 6.93-2.57 2.3-2.3 2.23-5.18 1.47-6.95-.54-1.27-1.57-2.3-3-2.96l.6.31zm-4.6 4.87c-1.26.07-2.58-.5-2.64-1.73-.05-.91.65-1.92 2.76-2.04.24-.02.48-.02.71-.02.77 0 1.48.07 2.13.22-.24 3.02-1.66 3.5-2.96 3.57z"] }; function Icon({ name, size = 22, stroke = 2.25, color = "currentColor", fill = false, style }) { if (CA_BRAND_PATHS[name]) { return ( ); } const paths = CA_ICON_PATHS[name] || []; return ( ); } /* ───────────────────────── shared bits ───────────────────────── */ function Eyebrow({ children, dark }) { return (
{children}
); } function SectionHead({ eyebrow, title, sub, dark, center, style }) { return (
{eyebrow ? {eyebrow} : null}

{title}

{sub ?

{sub}

: null}
); } function Stars({ n = 5, size = 15 }) { return (
{[...Array(5)].map((_, i) => )}
); } /* link that underlines on hover */ function TextLink({ href, children, style, onClick }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ font: "var(--type-body-md-strong)", color: "var(--color-ink)", textDecoration: h ? "underline" : "none", textUnderlineOffset: 4, display: "inline-flex", alignItems: "center", gap: 6, ...style }}> {children} ); } /* pill-shaped link button (anchor styled like DS Button) */ function PillLink({ href, variant = "primary", children, small, style }) { const [h, setH] = React.useState(false); const skins = { primary: { background: h ? "var(--color-primary-active)" : "var(--color-primary)", color: "var(--color-on-primary)", border: "1px solid transparent" }, secondary: { background: h ? "#e1e5df" : "var(--color-canvas-soft)", color: "var(--color-ink)", border: "1px solid transparent" }, tertiary: { background: h ? "#f4f5f3" : "var(--color-canvas)", color: "var(--color-ink)", border: "1px solid var(--color-ink)" }, dark: { background: h ? "#2a2b28" : "var(--color-ink)", color: "var(--color-canvas)", border: "1px solid transparent" }, }; return ( setH(true)} onMouseLeave={() => setH(false)} style={{ font: "var(--type-button-md)", fontSize: small ? 14 : 16, padding: small ? "8px 18px" : "var(--space-md) var(--space-xl)", borderRadius: "var(--rounded-xl)", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "var(--space-sm)", transition: "background 150ms ease", boxSizing: "border-box", ...skins[variant], ...style }}> {children} ); } /* ───────────────────────── navigation ───────────────────────── */ function BrandBlock() { return ( Compliance Adda Tax · GST · Incorporation ); } function MegaMenu({ onClose }) { const S = window.CA_SERVICES, cats = window.CA_CATS; return (
{cats.map((cat) => (
{cat}
{Object.keys(S).filter((s) => S[s].cat === cat).map((s) => ( { e.currentTarget.style.textDecoration = "underline"; e.currentTarget.style.color = "var(--color-ink)"; }} onMouseLeave={(e) => { e.currentTarget.style.textDecoration = "none"; e.currentTarget.style.color = "var(--color-body)"; }}> {S[s].title.replace(" Registration", "").replace(" Filing", "").replace(" (LLP)", "").replace(" (OPC)", "")} ))}
))}
Fixed professional fees. Government charges billed at cost. Browse all services
); } function SiteNav({ active }) { const [menuOpen, setMenuOpen] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const rootRef = React.useRef(null); React.useEffect(() => { const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setMenuOpen(false); }; const onKey = (e) => { if (e.key === "Escape") { setMenuOpen(false); setMobileOpen(false); } }; document.addEventListener("click", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("click", onDoc); document.removeEventListener("keydown", onKey); }; }, []); const servicesLabel = ( Services ); return (
{/* desktop */}
} links={[ { label: servicesLabel, active: active === "services", onClick: (e) => { e.preventDefault(); e.stopPropagation(); setMenuOpen(!menuOpen); }, href: "services.html" }, { label: "How it works", href: "index.html#process", active: false }, { label: "About", href: "index.html#about", active: active === "about" }, { label: "Resources", href: "index.html#resources", active: false }, { label: "Contact", href: "#contact", active: false }, ]} actions={ {window.CA_PHONE} Talk to an expert } /> {menuOpen ? setMenuOpen(false)} /> : null}
{/* mobile */}
Expert help
{mobileOpen ? (
{[["All services", "services.html"], ["How it works", "index.html#process"], ["About", "index.html#about"], ["Resources", "index.html#resources"], ["Contact", "#contact"]].map(([label, href]) => ( setMobileOpen(false)} style={{ font: "var(--type-body-md-strong)", color: "var(--color-ink)", textDecoration: "none", padding: "12px 4px", borderBottom: "1px solid var(--color-canvas-soft)" }}>{label} ))} {window.CA_PHONE}
) : null}
); } /* ───────────────────────── service card (marketplace + home preview) ───────────────────────── */ function ServiceCard({ slug }) { const d = window.CA_SERVICES[slug]; const popular = window.CA_POPULAR.includes(slug); if (!d) return null; return (
{d.cat} {popular ? Popular : Expert assisted}
e.currentTarget.style.textDecoration = "underline"} onMouseLeave={(e) => e.currentTarget.style.textDecoration = "none"}>{d.title}

{d.tag}

from
{d.price}
timeline
{d.time}
Apply now Details
); } /* ───────────────────────── FAQ accordion ───────────────────────── */ function FaqItem({ q, a, open, onToggle }) { return (

{a}

); } function FaqList({ items }) { const [open, setOpen] = React.useState(0); return (
{items.map((f, i) => setOpen(open === i ? -1 : i)} />)}
); } /* row of circular social icon links */ function SocialRow({ dark }) { const s = window.CA_SOCIALS || {}; const items = [["instagram", s.instagram], ["facebook", s.facebook], ["twitter", s.twitter], ["youtube", s.youtube], ["threads", s.threads]].filter((x) => x[1]); const labels = { instagram: "Instagram", facebook: "Facebook", twitter: "X (Twitter)", youtube: "YouTube", threads: "Threads" }; return (
{items.map(([name, href]) => ( { e.currentTarget.style.background = "var(--color-primary)"; e.currentTarget.style.color = "var(--color-on-primary)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = dark ? "#2a2b28" : "var(--color-canvas-soft)"; e.currentTarget.style.color = dark ? "var(--color-canvas)" : "var(--color-ink)"; }}> ))}
); } /* ───────────────────────── footer (newsletter + DS footer) ───────────────────────── */ function SiteFooter() { const [email, setEmail] = React.useState(""); const [done, setDone] = React.useState(false); return (

Never miss a due date again

One email a month with every GST, TDS and ROC deadline that applies to you. No spam, unsubscribe anytime.

{done ? (
You're on the list — first reminder lands next month.
) : (
{ e.preventDefault(); if (email.trim()) setDone(true); }} style={{ display: "flex", gap: "var(--space-md)", alignItems: "flex-end", flexWrap: "wrap" }}> setEmail(e.target.value)} aria-label="Email address" style={{ minWidth: 240 }} />
)}
} columns={[ { title: "Startup", links: [ { label: "Private limited company", href: "service.html?s=private-limited-company" }, { label: "LLP registration", href: "service.html?s=limited-liability-llp" }, { label: "One person company", href: "service.html?s=one-person-company-opc" }, { label: "Partnership firm", href: "service.html?s=partnership-firm" }, { label: "Startup India (DPIIT)", href: "service.html?s=startup-registration" }, ]}, { title: "Tax & GST", links: [ { label: "GST registration", href: "service.html?s=gst-registration" }, { label: "GST return filing", href: "service.html?s=gst-return" }, { label: "GST annual return", href: "service.html?s=gst-annual-return" }, { label: "Income tax return", href: "service.html?s=income-tax-return" }, { label: "GST LUT filing", href: "service.html?s=gst-lut" }, ]}, { title: "Legal & IPR", links: [ { label: "Trademark registration", href: "service.html?s=trademark-registration" }, { label: "Objection reply", href: "service.html?s=trademark-objection" }, { label: "Opposition", href: "service.html?s=trademark-opposition" }, { label: "FSSAI licence", href: "service.html?s=fssai-registration" }, { label: "MSME / Udyam", href: "service.html?s=msme-registration" }, ]}, { title: "Company", links: [ { label: "About", href: "index.html#about" }, { label: "How it works", href: "index.html#process" }, { label: "Resources", href: "index.html#resources" }, { label: "All services", href: "services.html" }, ]}, ]} fineprint={© 2026 Compliance Adda. Professional fees shown are exclusive of GST; government fees are billed at cost. Compliance Adda is a consultancy and not a government agency.} /> ); } /* ───────────────────────── WhatsApp float + reveal ───────────────────────── */ function WaFloat() { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ position: "fixed", bottom: 22, right: 22, zIndex: 60, width: 56, height: 56, borderRadius: "var(--rounded-pill)", background: h ? "var(--color-primary-active)" : "var(--color-primary)", color: "var(--color-on-primary)", display: "grid", placeItems: "center", boxShadow: "var(--shadow-modal)", transition: "background 150ms ease" }}> ); } function useReveal() { React.useEffect(() => { const els = document.querySelectorAll(".ca-reveal"); if (!("IntersectionObserver" in window)) { els.forEach((el) => el.classList.add("in")); return; } const obs = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); obs.unobserve(en.target); } }); }, { threshold: 0.12 }); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }); } Object.assign(window, { Icon, Eyebrow, SectionHead, Stars, TextLink, PillLink, SiteNav, SiteFooter, ServiceCard, FaqList, WaFloat, useReveal, SocialRow, });