// Services.jsx — services, work, process sections const Services = () => { const services = [ { idx: 'I', sign: '☾', name: 'Public Shopify apps', desc: 'End-to-end development of apps destined for the Shopify App Store — from ideation and billing to reviews and growth.', bullets: ['Concept & validation', 'App Store listing & ASO', 'Polaris-native UI', 'Billing, webhooks, auth'], }, { idx: 'II', sign: '✦', name: 'Custom merchant apps', desc: 'Private apps tailored to a single merchant — internal tools, ERP bridges, fulfilment logic, niche checkout flows.', bullets: ['Admin extensions', 'Custom checkout UI', 'ERP / 3PL integrations', 'B2B & wholesale logic'], }, { idx: 'III', sign: '◐', name: 'Audits & rescue', desc: 'We inherit underperforming apps and bring them back into orbit — performance, reviews, architecture, billing health.', bullets: ['Codebase audits', 'Performance passes', 'Shopify compliance', 'Migration & rewrites'], }, ]; return (
§ 01 / Services What we build

Three orbits of Shopify work — each one guided by the same north star: a merchant who ships.

{services.map((s, i) => (
{s.idx} {s.sign}

{s.name}

{s.desc}

    {s.bullets.map((b, j) => (
  • ✦ {b}
    • ))}
))}
— Every engagement starts with a discovery call. Request a chart →
); }; // ——— NutriScore Launch Spotlight ——— const NutriScoreSpotlight = () => { const grades = [ { letter: 'A', color: '#2e7d32', label: 'Excellent' }, { letter: 'B', color: '#558b2f', label: 'Good' }, { letter: 'C', color: '#f9a825', label: 'Moderate' }, { letter: 'D', color: '#e65100', label: 'Poor' }, { letter: 'E', color: '#b71c1c', label: 'Bad' }, ]; const features = [ { sign: '◐', title: 'A–E Grading engine', desc: 'Calculates official Nutri-Score grades automatically from your product nutritional data.' }, { sign: '✦', title: 'AI-powered analysis', desc: 'GPT-4 reads product descriptions and metafields to surface nutritional highlights and dietary suitability.' }, { sign: '☾', title: 'Bulk sync', desc: 'Import scores across your entire catalogue in one batch — single product or whole collection.' }, { sign: '◯', title: 'Live dashboard', desc: 'Grade distribution, coverage %, and missing-score alerts at a glance.' }, ]; return (
{/* Section header */}
§ 02a / New Launch Now live on Shopify

Nutri-Score for Shopify — nutritional transparency, charted at scale.

{/* Hero card */}
{/* Left: identity & description */}
N
NutriScore
Public Shopify app · 2026
In review ✦

NutriScore calculates and displays official A–E nutritional grades for food products in your Shopify store — helping merchants meet labelling transparency expectations without any manual data entry.

{/* Grade badges */}
{grades.map(g => (
{g.letter}
{g.label}
))}
{/*
Install on Shopify → View demo
*/}
{/* Right: feature list */}
Key capabilities
{features.map((f, i) => (
{f.sign}
{f.title}

{f.desc}

))}
{/* Stats bar */}
{[ { num: 'A–E', label: 'Grade scale' }, { num: 'GPT-4', label: 'AI engine' }, { num: 'Bulk', label: 'Sync mode' }, { num: 'Free trial', label: 'To get started' }, ].map((s, i) => (
{s.num}
{s.label}
))}
); }; // ——— Featured Work ——— const Work = () => { const apps = [ { id: '01', name: 'NutriScore', kind: 'Public app', year: '2026', note: 'A–E nutritional grading for food merchants on Shopify.', tag: '◐', isNew: true, }, { id: '02', name: 'Company details submission', kind: 'Public app', year: '2025', note: 'Collects company fields at checkout or pre-checkout, depending by plan.', tag: '☾', }, { id: '03', name: 'Carrier service app', kind: 'Public app', year: '2025', note: 'Custom rates and shipping methods for a client, wired into Shopify checkout.', tag: '✦', }, { id: '04', name: 'Bulk stock sync', kind: 'Custom app', year: '2025', note: 'Imports and reconciles inventory from external systems into Shopify.', tag: '◐', }, { id: '05', name: 'Custom checkout UI', kind: 'Custom app', year: '2025', note: 'Checkout UI and flow tailored for one merchant.', tag: '☽', }, ]; return (
§ 02 / Work Selected constellations

A small catalogue of apps we've charted — public on the Store, or bespoke for a single merchant.

{apps.map((a, i) => ( { e.currentTarget.style.paddingLeft = '16px'; e.currentTarget.style.background = 'color-mix(in oklch, var(--accent) 4%, transparent)'; }} onMouseLeave={e => { e.currentTarget.style.paddingLeft = ''; e.currentTarget.style.background = ''; }} > {a.id}

{a.name}

{a.isNew && ( New ✦ )}
{a.note}
{a.kind} {a.year} {a.tag} ))}
); }; // ——— Process ——— const Process = () => { const steps = [ { phase: 'New moon', num: '01', title: 'Orientation', desc: 'A discovery session where we chart ambitions, constraints, and what "done" looks like.' }, { phase: 'Waxing crescent', num: '02', title: 'Charting', desc: 'We draft the architecture, flows, and billing model — written plainly, signed off together.' }, { phase: 'First quarter', num: '03', title: 'Construction', desc: 'Focused weekly builds. You see every commit; we ship working software each sprint.' }, { phase: 'Full moon', num: '04', title: 'Rise', desc: 'Launch day. App Store listing, merchant rollout, or handoff — whichever keeps you closest to your customers.' }, { phase: 'Waning', num: '05', title: 'Care', desc: 'Ongoing orbit — monitoring, support, and iteration. We stay until you no longer need us.' }, ]; return (
§ 03 / Process How we work

Five phases, in step with the moon — a rhythm merchants can plan around.

{/* Moon phases row */}
{steps.map((s, i) => (
{s.phase}
— {s.num} —

{s.title}

{s.desc}

))}
); }; // ——— Contact CTA ——— const ContactCTA = () => (
✦ Epilogue

When the stars align,
your app will ship.

We take on four new projects per quarter. Tell us what you're building and we'll chart a path.

); const Footer = ({ setPage }) => ( ); Object.assign(window, { Services, NutriScoreSpotlight, Work, Process, ContactCTA, Footer });