// Home page — Pixel Craft
function HomePage() {
const { go } = useRouter();
const { lang } = useT();
const L = window.I18N[lang].home;
return (
);
}
// ============ Hero ============
function Hero({ L, go, lang }) {
return (
{/* Floating doodles in corners */}
{L.eyebrow} ✏️
{L.title1}
{L.title2}
{L.title3}
{L.sub}
);
}
function Stat({ n, label }) {
return (
);
}
// ============ Hero Demo: animated draw → game ============
function HeroDemo({ L, lang }) {
const [phase, setPhase] = useState(0); // 0=draw, 1=cut, 2=game
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setPhase(p => (p + 1) % 3);
}, 3200);
return () => clearInterval(id);
}, []);
// Game animation ticker
useEffect(() => {
if (phase !== 2) return;
let raf;
const start = performance.now();
const loop = () => {
setTick((performance.now() - start) / 1000);
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [phase]);
const labels = [L.heroLabelDraw, L.heroLabelSound, L.heroLabelGame];
return (
{/* Phase label */}
{/* Phase dots */}
{[0, 1, 2].map(i => (
))}
{/* Floating doodles around hero card */}
{/* PHASE 0: drawing strokes appear */}
{phase === 0 && }
{/* PHASE 1: sound waves around the sprite */}
{phase === 1 && }
{/* PHASE 2: tiny game with sprite jumping over obstacles */}
{phase === 2 && }
);
}
function DrawPhase() {
// animate stroke-dashoffset on each path
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
const paths = ref.current.querySelectorAll("path,circle");
paths.forEach((p) => {
try {
const len = p.getTotalLength ? p.getTotalLength() : 300;
p.style.strokeDasharray = String(len);
p.style.strokeDashoffset = String(len);
p.style.transition = "none";
// force reflow
// eslint-disable-next-line no-unused-expressions
p.getBoundingClientRect();
p.style.transition = `stroke-dashoffset 1.6s ease`;
p.style.strokeDashoffset = "0";
} catch (e) {}
});
}, []);
return (
);
}
function SoundPhase() {
return (
{/* Sound bars */}
{[0,1,2,3,4].map(i => (
))}
{/* Sound ripples */}
{[0,1,2].map(i => (
))}
{/* Little note doodles */}
♪
♫
);
}
function GamePhase({ tick }) {
// Hero jumps over obstacles in a tiny side-scroller
const jumpY = Math.max(0, Math.sin(tick * 3.2) * 38);
const scroll = (tick * 60) % 200;
return (
{/* Sky / clouds */}
{/* Ground */}
{/* Score */}
{String(Math.floor(tick * 100)).padStart(5, "0")}
{/* Obstacles (cacti made of red blobs) - scroll left */}
{[0,1,2].map(i => {
const x = ((i * 200 - scroll * 1.5) % 280 + 280) % 280 - 30;
return (
);
})}
{/* Hero */}
{/* "POW" speech bubble when jumping high */}
{jumpY > 30 && (
)}
{L.howEyebrow}
{L.howTitle}
{steps.map((s, i) => (
))}
);
}
// ============ Templates Strip ============
function TemplatesStrip({ lang, go }) {
const L = window.I18N[lang].home;
const tpls = window.TEMPLATES;
return (
{L.templatesEyebrow}
{L.templatesTitle}
{tpls.map((t, i) => (
{ e.preventDefault(); go("pricing"); }} className="card wiggle-hover" style={{
background: t.color, color: "#fff",
transform: `rotate(${[-2, 1.5, -1, 2.5][i]}deg)`,
textDecoration: "none",
cursor: "pointer",
minHeight: 180,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}>
{t.emoji}
{t[lang].name}
{t[lang].tag}
))}
);
}
// ============ Featured Games ============
function FeaturedGames({ L, lang, go }) {
const games = (window.GAMES || []).slice(0, 4);
return (
);
}
function GameCardMini({ game, idx, lang, go }) {
return (
go("games")}>
{game.title}
{lang === "th" ? "โดย" : "by"} {game.author}, {game.age}
{/* Coffee cup doodle */}
);
}
// ============ Big CTA ============
function BigCTA({ L, go, lang }) {
return (
);
}
window.HomePage = HomePage;