// Work cards + testimonial carousel. const WORK_PROJECTS = [ // ── Shefa products ─────────────────────────────────────────────── { key: "luxe", client: "Luxe", role: "Fashion e-commerce", color: "#B45309", accent: "#F59E0B", when: "Product", duration: "14 days", tags: ["Next.js", "Stripe", "Drizzle"], url: null, badge: "Built by Shefa", preview: "/assets/preview-luxe.png", description: "Editorial-first fashion store with seasonal lookbooks, full Stripe checkout, and a CMS-driven product catalogue.", }, { key: "savor", client: "Savor", role: "Restaurant & reservations", color: "#78350F", accent: "#D97706", when: "Product", duration: "14 days", tags: ["Next.js", "Resend", "Vercel"], url: null, badge: "Built by Shefa", preview: "/assets/preview-savor.png", description: "A booking-first restaurant platform with menu management, private dining enquiries, and automated confirmation emails.", }, { key: "domus", client: "Domus", role: "Real estate + map search", color: "#292524", accent: "#A16207", when: "Product", duration: "14 days", tags: ["Next.js", "Mapbox", "Drizzle"], url: null, badge: "Built by Shefa", preview: "/assets/preview-domus.png", description: "Boutique real estate with interactive Mapbox search, listing management, and advisor-led appointment booking.", }, { key: "aura", client: "Aura", role: "Skincare DTC + funnels", color: "#44403C", accent: "#A8A29E", when: "Product", duration: "14 days", tags: ["Next.js", "Stripe", "Klaviyo"], url: null, badge: "Built by Shefa", preview: "/assets/preview-aura.png", description: "A science-led skincare brand selling eight peer-reviewed products with Stripe checkout and Klaviyo email flows.", }, // ── Client sites ────────────────────────────────────────────────── { key: "sppd", client: "SPPD", role: "E-commerce store", color: "#6C3BFF", accent: "#A78BFA", when: "2025", duration: "14 days", tags: ["Next.js", "Vercel", "Supabase"], url: "https://sppd.amachree.dev/", badge: "Client", preview: "/assets/preview-sppd.png", description: "Consumer marketplace with product search, category filtering, and a smooth multi-step checkout.", }, { key: "vintech", client: "Vintech Energies", role: "Brand site + lead gen", color: "#16A34A", accent: "#4ADE80", when: "2025", duration: "14 days", tags: ["Next.js", "Resend", "Vercel"], url: "https://www.vintechenergies.com/", badge: "Client", preview: "/assets/preview-vintech.png", description: "Solar energy brand site with solution explainer, lead capture form, and installation process walkthrough.", }, { key: "atlas", client: "Atlas DAO", role: "NFT raffles + governance", color: "#0EA5E9", accent: "#38BDF8", when: "2025", duration: "14 days", tags: ["Next.js", "Wagmi", "Web3"], url: "https://app.atlasdao.zone/", badge: "Client", preview: "/assets/preview-atlas.png", description: "NFT raffle and DAO governance app with on-chain wallet authentication and live auction countdowns.", }, { key: "soullightsystems", client: "Soul Light Systems", role: "Spiritual wellness platform", color: "#C4956A", accent: "#E8C4A0", when: "2025", duration: "14 days", tags: ["Next.js", "Stripe", "Resend"], url: "https://soullightsystems.com/", badge: "Client", preview: "/assets/preview-soullightsystems.png", description: "Healing and wellness platform offering energetic restoration protocols, curated sessions, and digital courses.", }, ]; function WorkSection() { const isMobile = useIsMobile(); return (
Selected work

Sites shipped. Systems that run.

{ e.currentTarget.style.borderColor = "#8A5CFF"; e.currentTarget.style.color = "#fff"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "#A78BFA"; }}> Be next →
{WORK_PROJECTS.map((p, i) => ( ))}
); } function ProjectCard({ p, isMobile }) { const [hover, setHover] = React.useState(false); const [tilt, setTilt] = React.useState({ x: 0, y: 0 }); const isShefa = p.badge === "Built by Shefa"; const handleMove = (e) => { if (isMobile) return; const r = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; setTilt({ x: y * -6, y: x * 6 }); }; const handleLeave = () => { setHover(false); setTilt({ x: 0, y: 0 }); }; return (
setHover(true)} onMouseLeave={handleLeave} onMouseMove={handleMove} style={{ display: "flex", flexDirection: "column", background: "var(--surface)", border: hover ? `1px solid ${p.color}66` : "1px solid var(--line)", borderRadius: 20, overflow: "hidden", transition: hover ? "border 240ms, box-shadow 240ms" : "all 300ms cubic-bezier(0.4,0,0.2,1)", transform: `perspective(900px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) translateY(${hover ? -4 : 0}px)`, boxShadow: hover ? `0 16px 48px rgba(0,0,0,0.4), 0 0 40px ${p.color}33` : "none", height: "100%", willChange: "transform", }}> {/* Image header */}
{p.preview && ( {p.client} )} {/* Badge top-left */}
{p.badge}
{/* Duration pill — only for client projects */} {!isShefa && (
Shipped · {p.duration}
)} {/* Gradient overlay at bottom of image for text readability */}
{/* Card body */}
{/* Role + when */}
{p.role} {p.when}
{/* Client name */}

{p.client}

{/* Description */}

{p.description}

{/* Tags */}
{p.tags.map((t) => ( {t} ))}
{/* CTA */} {p.url ? ( e.currentTarget.style.opacity = "0.75"} onMouseLeave={(e) => e.currentTarget.style.opacity = "1"}> View live ) : ( Coming soon )}
); } // ---------- TEAM ---------- const TEAM = [ { key: "prince", name: "Prince Amachree", role: "Founder · Design × Systems", bio: "Builds the sites. Wires the automations. Runs the 14 days.", linkedin: "https://www.linkedin.com/in/princeam/", initials: "PA", color: "#6C3BFF", accent: "#A78BFA", photo: null, // drop a file at /assets/team-prince.jpg to activate }, ]; function TeamSection() { const isMobile = useIsMobile(); return (
The team

Built by people who ship.

{TEAM.map((m, i) => ( ))} {/* "More soon" placeholder */}
More people incoming.
); } function TeamCard({ m }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "var(--surface)", border: hover ? `1px solid ${m.color}55` : "1px solid var(--line)", borderRadius: 16, padding: 28, transition: "all 240ms var(--ease-std)", boxShadow: hover ? `0 0 40px ${m.color}22` : "none", transform: hover ? "translateY(-2px)" : "translateY(0)", }} > {/* Avatar */}
{m.photo ? ( {m.name} ) : ( {m.initials} )}

{m.name}

{m.role}

{m.bio}

{ e.currentTarget.style.borderColor = m.color; e.currentTarget.style.color = m.accent; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-strong)"; e.currentTarget.style.color = "var(--line)"; }}> LinkedIn
); } // ---------- TESTIMONIALS (carousel) ---------- const TESTIMONIALS = [ { quote: "We had a deadline that made every other agency say no. Shefa; said yes on the call and shipped in 14 days. We've been compounding off that work ever since.", name: "Maya Okafor", role: "Founder, Northwind Studio", metric: "+218%", metricLabel: "lead-to-call", }, { quote: "The automation layer is the part nobody else does. We launched on a Friday and by Monday morning every order, every form, every review was flowing into the right place.", name: "Daniel Reyes", role: "Ops Lead, Lumen Coffee", metric: "3.4×", metricLabel: "repeat rate", }, { quote: "Fixed price. Calendar locked. Loom walkthrough every Friday. I never wondered where we were. That alone was worth it.", name: "Priya Shah", role: "COO, Axis Health", metric: "42 hrs/wk", metricLabel: "ops time saved", }, ]; function TestimonialsSection() { const isMobile = useIsMobile(); const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (paused) return; const t = setInterval(() => setIdx((i) => (i + 1) % TESTIMONIALS.length), 6000); return () => clearInterval(t); }, [paused]); const t = TESTIMONIALS[idx]; return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
What clients say

The same three things, every time.

{TESTIMONIALS.map((q, i) => (

“{q.quote}”

))}
{t.name}
{t.role}
{t.metric}
{t.metricLabel}
{TESTIMONIALS.map((_, i) => (
); } Object.assign(window, { WorkSection, TestimonialsSection, TeamSection }); // Pricing cards + FAQ accordion. function PricingSection() { const isMobile = useIsMobile(); const items = [ { title: "The 14-day site", price: "$14,000", cadence: "Fixed. One invoice.", best: true, bullets: [ "Up to 6 pages, hi-fi design", "Framer or Next.js, your choice", "CMS + blog set up", "Automation layer (forms, CRM, Slack)", "Analytics + UTM map + dashboard", "Social profile design + launch kit", "2 rounds of revisions", "Loom walkthrough on launch day", ], foot: "Start any Monday. Live by the second Friday.", }, { title: "Care plan", price: "$1,800", cadence: "/ month · optional", bullets: [ "Hosting, monitoring, backups", "Up to 8 hrs of changes per month", "Quarterly site + funnel review", "Priority Slack response", "Cancel anytime, no notice", ], foot: "Most teams add this. Some don't — we don't push it.", }, ]; return (
Pricing

One package. One number.

No SOW gymnastics. No add-on fees. The 14-day site is one fixed price; the care plan is optional and starts the month after launch.

{items.map((it, i) => ( ))}
); } function PriceCard({ it }) { return (
{it.best && (
The product
)}

{it.title}

{it.price}
{it.cadence}
{it.foot}
); } // ---------- FAQ ---------- const FAQ_ITEMS = [ { q: "Why 14 days? Aren't most sites built in 6–8 weeks?", a: "Because most of that time is calendar drift, not work. We pre-build the system (components, automation patterns, analytics scaffolding) so the days you pay for are spent on your site, not on ours. The schedule is the product." }, { q: "What if my brand isn't ready?", a: "Day 1 is voice + content map; day 3 is moodboard + tokens. If you have a logo and a sense of who you're for, we have enough. If you don't, we'll flag it on the discovery call and either pre-work the brand or recommend you build that first." }, { q: "Can you build in [my favorite stack]?", a: "Framer and Next.js are our defaults. Webflow on request. We've also shipped on Astro and Remix. We won't build on WordPress, Wix, or Squarespace — the automation layer doesn't fit cleanly into those." }, { q: "What if it slips past day 14?", a: "It hasn't, on 40+ projects. If a delay is on us, the care plan is free for the first 3 months. If it's on you (delayed sign-offs, missing content), we hold the schedule and resume when you're ready." }, { q: "Do you do redesigns or only net-new sites?", a: "Both. About 60% of our 14-day projects are redesigns. The schedule is the same — kick-off Monday, live the second Friday." }, { q: "Who owns the work?", a: "You. Code, designs, accounts, integrations — all transferred to your ownership on launch day. The Loom walkthrough explains every part of the system you now own." }, ]; function FaqSection() { const isMobile = useIsMobile(); const [open, setOpen] = React.useState(0); return (
Frequently asked

The honest answers.

{FAQ_ITEMS.map((it, i) => { const isOpen = open === i; return (
{it.a}
); })}
); } Object.assign(window, { PricingSection, FaqSection }); // Plan-your-launch wizard — 4 steps with persistent summary side-rail. // Steps: Project type → Scope → Pick your Monday → Confirm. const PROJECT_TYPES = [ { key: "new", title: "New brand site", body: "Marketing site for a new brand or a fresh chapter.", pagesDefault: ["home","about","services","work","contact"] }, { key: "redesign", title: "Redesign", body: "You have a site. It's tired. The team has outgrown it.", pagesDefault: ["home","about","services","work","blog","contact"] }, { key: "dtc", title: "DTC store + funnels", body: "Sell products. The site has to convert and ship.", pagesDefault: ["home","shop","product","cart","about","contact"] }, { key: "internal", title: "Internal tool + automations", body: "Dashboards, ops layers, the system behind the brand.", pagesDefault: ["home","dashboard","docs","contact"] }, ]; const PAGE_OPTIONS = [ { key: "home", label: "Home" }, { key: "about", label: "About" }, { key: "services", label: "Services" }, { key: "work", label: "Work / case studies" }, { key: "blog", label: "Blog / writing" }, { key: "contact", label: "Contact" }, { key: "pricing", label: "Pricing" }, { key: "shop", label: "Shop index" }, { key: "product", label: "Product page" }, { key: "cart", label: "Cart + checkout" }, { key: "dashboard", label: "Dashboard shell" }, { key: "docs", label: "Docs / changelog" }, ]; const ADD_ONS = [ { key: "care", label: "Care plan", price: "+$1,800/mo", body: "Hosting, monitoring, 8 hrs/mo of changes." }, { key: "social", label: "Social hand-off", price: "Included", body: "Profile design + 2-week launch content kit." }, { key: "va", label: "VA on-boarding", price: "+$1,200", body: "We hand-off + train your VA on the new system." }, ]; // Generate the next ~8 Mondays from today. function nextMondays(count = 8, startOffset = 0) { const out = []; const d = new Date(); d.setHours(0, 0, 0, 0); // walk to next Monday while (d.getDay() !== 1) d.setDate(d.getDate() + 1); d.setDate(d.getDate() + startOffset * 7); for (let i = 0; i < count; i++) { const c = new Date(d); out.push(c); d.setDate(d.getDate() + 7); } return out; } function fmtDate(d) { return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" }); } function fmtDateLong(d) { return d.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric", year: "numeric" }); } function addDays(d, n) { const c = new Date(d); c.setDate(c.getDate() + n); return c; } function WizardSection({ accentMode }) { const isMobile = useIsMobile(); const mondays = React.useMemo(() => nextMondays(8, 0), []); // mark first 2 as taken to feel real const taken = React.useMemo(() => new Set([mondays[0].toDateString(), mondays[2].toDateString()]), [mondays]); const [step, setStep] = React.useState(1); const [pType, setPType] = React.useState("new"); const [pages, setPages] = React.useState(["home","about","services","work","contact"]); const [addOns, setAddOns] = React.useState(["social"]); const [monday, setMonday] = React.useState(null); const [name, setName] = React.useState(""); const [email, setEmail] = React.useState(""); const [brand, setBrand] = React.useState(""); const [notes, setNotes] = React.useState(""); const [submitted, setSubmitted] = React.useState(false); // when project type changes, reset page defaults const setTypeAndPages = (k) => { setPType(k); const t = PROJECT_TYPES.find((x) => x.key === k); setPages(t.pagesDefault); }; const togglePage = (k) => setPages((p) => p.includes(k) ? p.filter((x) => x !== k) : [...p, k]); const toggleAddon = (k) => setAddOns((p) => p.includes(k) ? p.filter((x) => x !== k) : [...p, k]); const basePrice = 14000; const addonCost = addOns.reduce((acc, k) => { const a = ADD_ONS.find((x) => x.key === k); if (!a) return acc; if (a.price.startsWith("+$")) return acc + parseInt(a.price.replace(/[^\d]/g, ""), 10) * (a.price.includes("/mo") ? 0 : 1); return acc; }, 0); const total = basePrice + addonCost; const monthlyTotal = addOns.includes("care") ? 1800 : 0; const canNext = (step === 1) || (step === 2 && pages.length > 0) || (step === 3 && monday) || (step === 4 && name && email.includes("@") && brand); const submit = (e) => { e?.preventDefault(); if (!canNext) return; setSubmitted(true); }; const stepTitles = ["Project type", "Scope", "Kick-off Monday", "You"]; return (
{/* big background glow */}
Plan your launch

Pick a Monday. Launch the second Friday.

Four questions. Two minutes. You'll leave with a fixed quote, a calendar slot, and a Slack invite waiting in your inbox.

{submitted ? ( ) : (
{/* LEFT — current step */}
{/* Progress */}
{[1,2,3,4].map((s) => ( {s < 4 && } ))}
{step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && }
{/* Footer nav */}
{step < 4 ? ( ) : ( )}
{/* RIGHT — live summary rail (desktop only) */} {!isMobile && ( )}
)}
); } // ---------- STEP 1: Project Type ---------- function StepProjectType({ value, onChange }) { return (

What are we building?

Pick the closest match. We'll tune the scope on the kick-off call.

{PROJECT_TYPES.map((t) => { const active = value === t.key; return ( ); })}
); } // ---------- STEP 2: Scope ---------- function StepScope({ pages, togglePage, addOns, toggleAddon }) { return (

What's in scope?

Up to 6 pages is included in the fixed price. Add-ons are optional.

Pages · {pages.length} selected
{PAGE_OPTIONS.map((p) => { const active = pages.includes(p.key); return ( ); })}
Add-ons
{ADD_ONS.map((a) => { const active = addOns.includes(a.key); return ( ); })}
); } // ---------- STEP 3: Pick Monday ---------- function StepMonday({ mondays, taken, value, onChange }) { return (

Pick your kick-off Monday.

We start a Monday at 10am. The selected Friday is when your site goes live.

{mondays.map((m, i) => { const isTaken = taken.has(m.toDateString()); const isSelected = value && value.toDateString() === m.toDateString(); return ( ); })}
Open Booked
); } // ---------- STEP 4: Contact ---------- function StepContact({ name, setName, email, setEmail, brand, setBrand, notes, setNotes }) { const fieldStyle = { width: "100%", background: "rgba(10,14,26,0.6)", border: "1px solid var(--line)", color: "var(--text-strong)", padding: "14px 16px", borderRadius: 10, fontFamily: "inherit", fontSize: 14, outline: "none", transition: "border-color 160ms, box-shadow 160ms", }; const onFocus = (e) => { e.currentTarget.style.borderColor = "#8A5CFF"; e.currentTarget.style.boxShadow = "0 0 0 3px rgba(138,92,255,0.18)"; }; const onBlur = (e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.boxShadow = "none"; }; const labelStyle = { fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#A78BFA", fontWeight: 700, marginBottom: 8, display: "block" }; return (

And you?

We'll reply within a day with a one-pager, the Slack invite, and your kick-off calendar hold.

setName(e.target.value)} placeholder="Maya Okafor" style={fieldStyle} onFocus={onFocus} onBlur={onBlur} />
setBrand(e.target.value)} placeholder="Northwind Studio" style={fieldStyle} onFocus={onFocus} onBlur={onBlur} />
setEmail(e.target.value)} placeholder="you@brand.com" type="email" style={fieldStyle} onFocus={onFocus} onBlur={onBlur} />