setMobileOpen(false)} aria-hidden="true" />
)}
);
}
// ── Industries strip (Section A) ───────────────────────
const INDUSTRIES = [
"Print shops", "Auto body", "Gyms & fitness", "Food & pastry",
"Retail & fashion", "Healthcare", "Salons",
];
function IndustriesStrip() {
return (
{INDUSTRIES.map((t) => (
{t}
))}
);
}
// ── Portfolio grid (Section B) ─────────────────────────
const PROJECTS = [
{ title: "O'Sweet", tag: "Pastry · Morocco", sub: "CEO P&L + Staff Payroll + E-commerce", grad: "linear-gradient(145deg, #1a1235 0%, #2d1b4a 100%)", accent: "#a78bfa", pills: ["Dashboard", "E-commerce", "Payroll"] },
{ title: "PrintTrack", tag: "Print shop · LA", sub: "Pipeline + Invoicing + 3 Portals", grad: "linear-gradient(145deg, #101c33 0%, #1a3060 100%)", accent: "#6BA3D6", pills: ["Pipeline", "Invoices", "3 portals"] },
{ title: "CNK Collision", tag: "Auto body · LA", sub: "Shop CRM + ETA Alerts", grad: "linear-gradient(145deg, #2a1212 0%, #4a1e1e 100%)", accent: "#f87171", pills: ["Vehicle CRM", "Alerts"] },
{ title: "A&M Fitness", tag: "Training · NoHo", sub: "CRM + Student Portal + Website", grad: "linear-gradient(145deg, #1a1508 0%, #3d2a0a 100%)", accent: "#fbbf24", pills: ["CRM", "Portal", "Website"] },
{ title: "MediTrack", tag: "Healthcare", sub: "Intake CRM + Compliance Audit", grad: "linear-gradient(145deg, #0c1a30 0%, #153060 100%)", accent: "#60a5fa", pills: ["Intake CRM", "Audit log"] },
{ title: "Pica Loca", tag: "Street food · LA", sub: "Bilingual Landing Page + Menu", grad: "linear-gradient(145deg, #3D2A0A 0%, #6B4D1A 100%)", accent: "#facc15", pills: ["EN/ES", "Menu"] },
];
function Portfolio() {
return (
{PROJECTS.map((p, i) => (
{p.title}
{p.tag}
{p.sub}
{p.pills.map((pill) => {pill})}
))}
);
}
// ── What You Get (Section C) ──────────────────────────
const SERVICES = [
{ num: "01", title: "Your dashboard", desc: "One screen for everything — orders, revenue, customers, alerts. Know what's happening without asking anyone." },
{ num: "02", title: "Client portal", desc: "Your customers check their own status, upload files, view invoices. They stop calling five times a day." },
{ num: "03", title: "Automations", desc: "Notifications when orders move. Alerts when stock runs low. Follow-ups that send themselves." },
];
function WhatYouGet() {
return (
{SERVICES.map((s, i) => (
{s.num}
{s.title}
{s.desc}
))}
);
}
// ── How It Works (Section D) ──────────────────────────
const HOW_STEPS = [
{ num: "01", title: "Ibrahim visits your shop", desc: "No slides. No jargon. He watches how you work and spots what's slow.", tag: "In person · free" },
{ num: "02", title: "Demo in 48 hours", desc: "A working demo with your name on it. Real screens, real data, real logins.", tag: "Your brand · your data" },
{ num: "03", title: "Live in one week", desc: "We deploy, train your team, and keep monitoring. Pause anytime.", tag: "You're in control" },
];
function HowItWorks() {
return (
How it works
Three steps. One week.
{HOW_STEPS.map((s) => (
{s.num}
{s.title}
{s.desc}
{s.tag}
))}
);
}
// ── Pricing (Section E) ────────────────────────────────
const TIERS_NEW = [
{
name: "Setup — Basic",
sub: "System install on your business",
price: "$799",
period: "One-time",
features: ["Custom dashboard", "Client portal + logins", "Domain + hosting", "Branded emails", "Training + guide"],
pop: false,
},
{
name: "Setup + Website",
sub: "Everything in Basic + full website",
price: "$1,399",
period: "One-time",
features: ["Everything in Basic", "Mobile-friendly website", "Google Business sync", "SEO + contact form", "Photo gallery"],
pop: true,
},
];
function Pricing() {
return (
{TIERS_NEW.map((t, i) => (
{t.name}
{t.sub}
{t.price}
{t.period}
{t.features.map((f) => - {f}
)}
Get started →
))}
+ Monthly maintenance to keep your system running and evolving. Pause anytime.
);
}
// ── Founders (Section F) ──────────────────────────────
function Founders() {
return (
I
Ibrahim
Co-founder · Face-to-face
Ibrahim visits your shop, understands your workflow, and translates your reality into a system that fits. He shows up, sets you up, and makes sure it works.
O
Oussama
Co-founder · Engineering & AI
Oussama designs and builds every dashboard, portal, and automation. The reason your system ships in days and works the way your business works.
);
}
// ── CTA (Section G) ───────────────────────────────────
function CTA() {
const [email, setEmail] = useState("");
const [status, setStatus] = useState("idle"); // idle | sending | sent | error
const submit = async () => {
if (!email.includes("@") || status === "sending") return;
setStatus("sending");
try {
const res = await fetch(SUPABASE_URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
"apikey": SUPABASE_ANON,
"Authorization": "Bearer " + SUPABASE_ANON,
"Prefer": "return=minimal",
},
body: JSON.stringify({
email: email,
source: "cta-email-gate",
}),
});
if (!res.ok) throw new Error("insert failed");
setStatus("sent");
} catch {
setStatus("error");
setTimeout(() => setStatus("idle"), 3000);
}
};
return (
);
}
// ── Footer (Section H) ────────────────────────────────
function Footer() {
return (
);
}
// ── Sticky Mobile CTA ─────────────────────────────────
function StickyMobileCTA() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const contact = document.getElementById("contact");
if (!contact) return;
const onScroll = () => {
const contactTop = contact.getBoundingClientRect().top;
const windowH = window.innerHeight;
setVisible(window.scrollY > windowH * 0.8 && contactTop > windowH * 0.5);
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
// ── App ───────────────────────────────────────────────
function App() {
useReveal();
useEffect(() => {
var s = document.createElement('script');
s.src = 'animations.js';
s.onload = function () { window.initScrollAnimations && window.initScrollAnimations(); };
document.body.appendChild(s);
}, []);
return (
<>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);
);
}
// ── Nav ────────────────────────────────────────────────
function Nav() {
const [mobileOpen, setMobileOpen] = useState(false);
const handleLinkClick = () => setMobileOpen(false);
useEffect(() => {
if (!mobileOpen) return;
const onKey = (e) => { if (e.key === 'Escape') setMobileOpen(false); };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [mobileOpen]);
useEffect(() => {
document.body.style.overflow = mobileOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [mobileOpen]);
return (