/* global React, Spark, Wordmark, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect, BlogRouter */
// ============================================================
// SPARKIO — Landing Page
// ============================================================
const { useState, useEffect, useRef } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "Ember",
"font": "Geist",
"theme": "Dark",
"motion": "Subtle",
"projects": "Card grid"
}/*EDITMODE-END*/;
const ACCENTS = {
Ember: { g1:"#FF6A1A", g2:"#FF8A3D", g3:"#FFC46B", ember:"#FF7A2E", flame:"#FFA23E", glow:"#FFD37A", coal:"#C5471A" },
Violet: { g1:"#6D28D9", g2:"#8B5CF6", g3:"#C4B5FD", ember:"#8B5CF6", flame:"#A78BFA", glow:"#C4B5FD", coal:"#5B21B6" },
Azure: { g1:"#1D4ED8", g2:"#3B82F6", g3:"#93C5FD", ember:"#3B82F6", flame:"#60A5FA", glow:"#93C5FD", coal:"#1E40AF" },
Duotone: { g1:"#E11D74", g2:"#FB6F4C", g3:"#FFC46B", ember:"#FB6F4C", flame:"#FF8A5B", glow:"#FFC46B", coal:"#BE185D" },
};
const FONTS = {
Geist: "'Geist', system-ui, sans-serif",
"Space Grotesk": "'Space Grotesk', system-ui, sans-serif",
Helvetica: "'Helvetica Neue', Helvetica, Arial, sans-serif",
};
const PROJECTS = [
["Founder", "Interactive business history simulator inspired by the stories and decisions behind the world's most influential companies.", "Simulator", "https://founder.sparkio.me/"],
["Blest", "Platform for managing language institutes, students, courses and learning operations.", "Education", "https://app.blestlearning.com/"],
["Fidelis Church", "Church administration and community management platform.", "Community", "https://fidelischurch.sparkio.me/"],
["Fidelis Wealth", "Personal wealth tracking platform for assets, liabilities and financial reporting.", "Fintech", "https://fidelis.sparkio.me/"],
["GoPlanify", "Appointment scheduling platform created to simplify booking experiences for businesses and customers.", "Scheduling", "https://www.goplanify.com/"],
["AppGrid", "Platform designed to help independent developers connect their products with potential customers.", "Marketplace", "https://appgrid.sparkio.me/"],
["Global Prayer", "Spanish-language Christian community for sharing public or private prayer requests and receiving spiritual support in real time.", "Community", "https://prayer.sparkio.me"],
["Meal Planner", "Personalized weekly meal plans and shopping lists for families, adapted to dietary needs and Latin American food culture.", "Foodtech", "https://mealplanner.sparkio.me"],
];
// — scroll reveal (data-rv attribute survives React re-renders) —
function useReveal() {
const ioRef = useRef(null);
if (!ioRef.current && typeof IntersectionObserver !== "undefined") {
ioRef.current = new IntersectionObserver((es) => {
es.forEach((e) => {
if (e.isIntersecting) { e.target.dataset.rv = "1"; ioRef.current.unobserve(e.target); }
});
}, { threshold: 0.12 });
}
React.useLayoutEffect(() => {
document.querySelectorAll(".reveal:not([data-rv])").forEach((el) => {
if (ioRef.current) ioRef.current.observe(el);
else el.dataset.rv = "1";
});
});
}
function Nav() {
return (
);
}
function Hero({ motionOn }) {
const wrapRef = useRef(null);
const [p, setP] = useState({ x: 0, y: 0 });
useEffect(() => {
if (!motionOn) { setP({ x: 0, y: 0 }); return; }
const h = (e) => {
const r = wrapRef.current?.getBoundingClientRect(); if (!r) return;
setP({ x: (e.clientX - r.left - r.width / 2) / r.width, y: (e.clientY - r.top - r.height / 2) / r.height });
};
window.addEventListener("mousemove", h);
return () => window.removeEventListener("mousemove", h);
}, [motionOn]);
const par = (k) => ({ transform: `translate(${p.x * k}px, ${p.y * k}px)` });
return (
{/* floating sparks — kept clear of the headline column */}
Small projects. Big curiosity.
Turning sparks
into products.
We build software, automation tools, learning platforms, and experiments that solve real problems.
);
}
function Philosophy() {
const steps = ["Build.", "Learn.", "Launch.", "Repeat."];
const [active, setActive] = useState(0);
useEffect(() => {
const t = setInterval(() => setActive((a) => (a + 1) % 4), 1500);
return () => clearInterval(t);
}, []);
const lines = ["Some ideas become products.", "Some become experiments.", "Some fail.", "All of them teach us something."];
return (
Philosophy
{steps.map((s, i) => (
{s}
))}
{lines.map((l, i) => (
{l}
))}
);
}
function ProjectsGrid() {
return (
);
}
function ProjectsList() {
return (
);
}
function ProjectsBento() {
const spans = ["span 2", "span 1", "span 1", "span 1", "span 1", "span 2", "span 1", "span 1"];
return (
{PROJECTS.map(([n, d, tag, url], i) => {
const feat = i === 0 || i === 5;
return (
{tag}
);
})}
Projects
Things we've built.
Some shipped. Some still cooking. Each one started as a spark.
{layout === "Editorial list" ?
: layout === "Bento" ?
:
}
);
}
function Closing() {
return (
We believe creativity is no longer limited by technical barriers. Ideas can move faster than ever.
Sparkio exists to explore what happens when curiosity, software and AI come together.
Follow along→
);
}
function Footer() {
return (
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useReveal();
const a = ACCENTS[t.accent] || ACCENTS.Ember;
const motionOn = t.motion !== "Off";
const rootStyle = {
"--g1": a.g1, "--g2": a.g2, "--g3": a.g3,
"--ember": a.ember, "--flame": a.flame, "--glow": a.glow, "--coal": a.coal,
"--font-sans": FONTS[t.font] || FONTS.Geist,
};
const cls = `page ${t.theme === "Light" ? "light" : ""} ${motionOn ? "m-on" : ""} ${t.motion === "Lively" ? "m-lively" : ""}`;
const isBlog = window.location.pathname === '/blog' || window.location.pathname.startsWith('/blog/');
if (isBlog) {
return (
);
}
return (
{
const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].ember === v) || "Ember";
setTweak("accent", name);
}} />
setTweak("font", v)} />
setTweak("theme", v)} />
setTweak("projects", v)} />
setTweak("motion", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();