/* Mid sections — about, why-choose, services, process. */ /* ───────────────────────────────────────────────────────────────── ABOUT — image, stats grid, CTAs ───────────────────────────────────────────────────────────────── */ function About() { return (
Axious Creative Studio workspace
5.0★
Google Rating
40+ businesses

A 5-star rated web design studio based in Cape Town — building 100% custom-coded websites from scratch. No WordPress, no templates. Every project hand-built for speed, SEO, and complete design freedom.

{[ { num: "40+", label: "Websites Built" }, { num: "5.0★", label: "Google Rating" }, { num: "7 days", label: "Avg. Delivery" }, { num: "R2,499", label: "Starting Price" }, ].map((s, i) => (
{s.num}
{s.label}
))}
); } /* ───────────────────────────────────────────────────────────────── WHY CHOOSE — editorial benefit rows ───────────────────────────────────────────────────────────────── */ const WHY_BENEFITS = [ { stat: "R2,499", title: "Affordable Pricing", desc: "Website packages starting from R2,499 — transparent, all-inclusive pricing with no hidden fees. Pay a deposit to start, balance only on delivery." }, { stat: "5.0★", title: "5-Star Rated Studio", desc: "Over 40 South African businesses built and launched. Every project is backed by a written service agreement and dedicated aftercare support." }, { stat: "24/7", title: "Your Own Client Portal", desc: "Log in to your personal portal to track project milestones, view live website performance analytics, and make payments online — any time." }, { stat: "90+", title: "Built for Google", desc: "Every website ships scoring 90+ on Google PageSpeed. SSL secured, mobile-first, and structured for SEO dominance from day one." }, { stat: "0", title: "Zero Templates Used", desc: "100% hand-coded React — no WordPress, no Wix, no page builders. You own a bespoke digital asset built exactly for your business." }, { stat: "SA", title: "South African Support", desc: "Cape Town-based team available on WhatsApp and email. Same-day responses, local market understanding, and nationwide service." }, ]; function WhyChoose() { return (
{WHY_BENEFITS.map((b, i) => (
e.currentTarget.style.background = "rgba(249,115,22,0.025)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"} >
{b.stat}

{b.title}

{b.desc}

 ))}
Start Your Project View Packages
); } /* ───────────────────────────────────────────────────────────────── SERVICES — grid with cursor-following spotlight + reveal-on-hover detail. ───────────────────────────────────────────────────────────────── */ const SERVICES = [ { code: "01", title: "Custom websites", blurb: "Hand-coded React or Astro — no Wix, no Wordpress. Designed for your brand, not a template.", bullets: ["5–25 page builds", "Mobile-first", "SSR + edge cache"], icon: ( ), }, { code: "02", title: "E-commerce", blurb: "Yoco, PayFast, Stripe — wired with inventory, shipping, abandoned-cart and South-African tax.", bullets: ["Multi-currency", "Shopify + custom", "POS sync"], icon: ( ), }, { code: "03", title: "AI chat & ops", blurb: "GPT-powered assistants tied to your booking, quotes and CRM — answers in seconds, books in one tap.", bullets: ["WhatsApp integration", "Lead capture", "Auto-quote"], icon: ( ), }, { code: "04", title: "Client portals", blurb: "Logged-in dashboards for invoices, files, bookings, support — your brand, your data.", bullets: ["Auth + roles", "Stripe / PayFast", "Audit logs"], icon: ( ), }, { code: "05", title: "SEO & growth", blurb: "Local + technical SEO with monthly reports. Page-one Cape Town listings for the keywords that pay.", bullets: ["Core web vitals", "Schema markup", "Backlink outreach"], icon: ( ), }, { code: "06", title: "POS systems", blurb: "Cloud point-of-sale, hardware install + staff training. Live inventory across all your stores.", bullets: ["Restaurants / retail", "Offline-first", "Hardware kit"], icon: ( ), }, { code: "07", title: "Axious Smart Chat", blurb: "WhatsApp Business API chatbots that sell, book and support 24/7 — on the channel your clients already use.", bullets: ["WhatsApp API verified", "AI-powered replies", "Broadcasts & CRM sync"], icon: ( ), }, { code: "08", title: "Business email", blurb: "Professional @yourdomain.co.za mailboxes, email marketing campaigns and branded signatures for your whole team.", bullets: ["@yourdomain mailboxes", "Campaign manager", "Mobile sync + calendar"], icon: ( ), }, ]; function ServiceCard({ s }) { const ref = useRef(null); const [pos, setPos] = useState({ x: -200, y: -200, hovered: false }); const onMove = (e) => { const r = ref.current.getBoundingClientRect(); setPos({ x: e.clientX - r.left, y: e.clientY - r.top, hovered: true }); }; const onLeave = () => setPos((p) => ({ ...p, hovered: false })); return (
{/* spotlight */}
{s.code}
{s.icon}

{s.title}

{s.blurb}

Explore
); } function Services() { return (
{SERVICES.map((s) => )}
); } function SectionHead({ label, title, sub, align = "left" }) { return (
◆  {label}

{sub && (

{sub}

)}
); } /* ───────────────────────────────────────────────────────────────── PROCESS — sticky vertical timeline that reveals as you scroll. Framer: useScroll({offset: ["start end", "end start"]}) → useTransform. ───────────────────────────────────────────────────────────────── */ const STEPS = [ { n: "01", title: "Discovery call", body: "30-minute deep-dive on the business, the audience, the competition. Comes back as a written brief." }, { n: "02", title: "Brand + wireframes", body: "Black-and-white blueprints first — structure before colour. We iterate fast on Figma." }, { n: "03", title: "Hi-fi design", body: "Pixel-perfect screens with motion specs. You approve every screen before code." }, { n: "04", title: "Hand-coded build", body: "React or Astro, written from scratch. Live preview links update daily." }, { n: "05", title: "Launch + grow", body: "We migrate DNS, set SEO, train your team and stay on call for the first 30 days." }, ]; function Process() { const ref = useRef(null); const [progress, setProgress] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; const onScroll = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight; // 0 when top of section enters bottom of viewport, 1 when bottom leaves top const total = r.height + vh; const passed = Math.min(Math.max(vh - r.top, 0), total); setProgress(Math.min(1, passed / total)); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
◆  Process / 02

Five weeks.
Five honest steps.

No black-box agencies, no surprise invoices. You see the work as it happens — and you approve every milestone before we move on.

E
Elvis Mthembu
Founder & Lead Developer
{/* spine */}
    {STEPS.map((s, i) => ( ))}
); } function ProcessStep({ step, index, progress }) { const ref = useRef(null); const [inView, setInView] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((es) => es.forEach((e) => setInView(e.isIntersecting)), { rootMargin: "-40% 0px -40% 0px" }); io.observe(ref.current); return () => io.disconnect(); }, []); return (
  • STEP {step.n}

    {step.title}

    {step.body}
    • ); } Object.assign(window, { Services, ServiceCard, SectionHead, Process, ProcessStep });