App Store Screenshots Generator

// src/app/page.tsx — minimal scaffold pattern"use client";
import { toPng } from "html-to-image";import { useRef, useState } from "react";
// --- Design tokens / theme presets ---const THEMES = {  "clean-light": {    bg: "#F6F1EA",    fg: "#171717",    accent: "#5B7CFA",    font: "Inter",  },  "dark-bold": {    bg: "#0B1020",    fg: "#F8FAFC",    accent: "#8B5CF6",    font: "Inter",  },  "warm-editorial": {    bg: "#F7E8DA",    fg: "#2B1D17",    accent: "#D97706",    font: "Playfair Display",  },} as const;
type ThemeKey = keyof typeof THEMES;
// --- Export sizes (width x height in px) ---const EXPORT_SIZES = {  "6.9": { w: 1320, h: 2868 },  "6.5": { w: 1284, h: 2778 },  "6.3": { w: 1206, h: 2622 },  "6.1": { w: 1125, h: 2436 },} as const;
// --- Slide data ---const SLIDES = [  {    id: 1,    headline: "Track Every Habit,\nEvery Day",    subheadline: "Build streaks that stick",    screenshot: "/screenshots/en/home.png",    layout: "phone-right", // varies per slide: phone-left | phone-right | phone-center  },  {    id: 2,    headline: "See Your Progress\nAt a Glance",    subheadline: "Beautiful weekly summaries",    screenshot: "/screenshots/en/stats.png",    layout: "phone-left",  },  // ... more slides];
// --- Screenshot canvas (designed at 6.9" — 1320x2868) ---function ScreenshotSlide({  slide,  theme,  slideRef,}: {  slide: (typeof SLIDES)[0];  theme: (typeof THEMES)[ThemeKey];  slideRef: React.RefObject<HTMLDivElement>;}) {  return (    <div      ref={slideRef}      style={{        width: 1320,        height: 2868,        background: theme.bg,        color: theme.fg,        fontFamily: theme.font,        position: "relative",        overflow: "hidden",      }}    >      {/* Headline */}      <div        style={{          position: "absolute",          top: 180,          left: 80,          right: 80,          fontSize: 96,          fontWeight: 800,          lineHeight: 1.1,          whiteSpace: "pre-line",        }}      >        {slide.headline}      </div>
      {/* Subheadline */}      <div        style={{          position: "absolute",          top: 520,          left: 80,          fontSize: 48,          color: theme.accent,          fontWeight: 500,        }}      >        {slide.subheadline}      </div>
      {/* iPhone mockup + app screenshot */}      <div        style={{          position: "absolute",          bottom: 0,          right: slide.layout === "phone-right" ? 0 : "auto",          left: slide.layout === "phone-left" ? 0 : "auto",        }}      >        {/* App screenshot inside mockup */}        <div style={{ position: "relative", width: 660, height: 1430 }}>          <img            src={slide.screenshot}            style={{              position: "absolute",              top: 28,              left: 24,              width: 612,              borderRadius: 52,            }}            alt=""          />          {/* Mockup frame sits on top */}          <img            src="/mockup.png"            style={{ position: "absolute", inset: 0, width: "100%" }}            alt=""          />        </div>      </div>    </div>  );}
// --- Export helper ---async function exportSlide(  ref: React.RefObject<HTMLDivElement>,  slideId: number,  size: keyof typeof EXPORT_SIZES,  locale: string,  themeName: string) {  if (!ref.current) return;
  const { w, h } = EXPORT_SIZES[size];  const scale = w / 1320; // designed at 1320px wide
  const dataUrl = await toPng(ref.current, {    width: w,    height: h,    style: { transform: `scale(${scale})`, transformOrigin: "top left" },  });
  const link = document.createElement("a");  link.download = `slide-${slideId}-${locale}-${themeName}-${size}in.png`;  link.href = dataUrl;  link.click();}
// --- Main page ---export default function ScreenshotGenerator() {  const [activeTheme, setActiveTheme] = useState<ThemeKey>("clean-light");  const [activeLocale, setActiveLocale] = useState("en");  const slideRefs = useRef<React.RefObject<HTMLDivElement>[]>(    SLIDES.map(() => ({ current: null } as React.RefObject<HTMLDivElement>))  );
  const theme = THEMES[activeTheme];
  return (    <div style={{ padding: 40, background: "#111", minHeight: "100vh" }}>      {/* Controls */}      <div style={{ display: "flex", gap: 16, marginBottom: 40 }}>        {(Object.keys(THEMES) as ThemeKey[]).map((t) => (          <button            key={t}            onClick={() => setActiveTheme(t)}            style={{              padding: "8px 16px",              background: activeTheme === t ? "#fff" : "#333",              color: activeTheme === t ? "#000" : "#fff",              border: "none",              borderRadius: 8,              cursor: "pointer",            }}          >            {t}          </button>        ))}
        {/* Bulk export all slides at all sizes */}        <button          onClick={async () => {            for (const [i, slide] of SLIDES.entries()) {              for (const size of Object.keys(EXPORT_SIZES) as (keyof typeof EXPORT_SIZES)[]) {                await exportSlide(                  slideRefs.current[i],                  slide.id,                  size,                  activeLocale,                  activeTheme                );              }            }          }}          style={{            padding: "8px 16px",            background: theme.accent,            color: "#fff",            border: "none",            borderRadius: 8,            cursor: "pointer",            marginLeft: "auto",          }}        >          Export All        </button>      </div>
      {/* Slides */}      <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>        {SLIDES.map((slide, i) => (          <div key={slide.id}>            <ScreenshotSlide              slide={slide}              theme={theme}              slideRef={slideRefs.current[i]}            />            {/* Per-slide export buttons */}            <div style={{ display: "flex", gap: 8, marginTop: 12 }}>              {(Object.keys(EXPORT_SIZES) as (keyof typeof EXPORT_SIZES)[]).map(                (size) => (                  <button                    key={size}                    onClick={() =>                      exportSlide(                        slideRefs.current[i],                        slide.id,                        size,                        activeLocale,                        activeTheme                      )                    }                    style={{                      padding: "6px 12px",                      background: "#222",                      color: "#fff",                      border: "1px solid #444",                      borderRadius: 6,                      cursor: "pointer",                      fontSize: 13,                    }}                  >                    Export {size}"                  </button>                )              )}            </div>          </div>        ))}      </div>    </div>  );}

// Locale-aware copy dictionaryconst COPY: Record<string, Record<number, { headline: string; subheadline: string }>> = {  en: {    1: { headline: "Track Every Habit,\nEvery Day", subheadline: "Build streaks that stick" },    2: { headline: "See Your Progress\nAt a Glance", subheadline: "Beautiful weekly summaries" },  },  de: {    1: { headline: "Jede Gewohnheit\nIm Blick", subheadline: "Baue Serien auf, die halten" },    2: { headline: "Fortschritt auf\neinen Blick", subheadline: "Wöchentliche Übersichten" },  },  ar: {    1: { headline: "تتبع كل عادة\nكل يوم", subheadline: "ابنِ سلاسل تدوم" },    2: { headline: "اطّلع على تقدمك\nدفعة واحدة", subheadline: "ملخصات أسبوعية جميلة" },  },};
// RTL-aware canvas wrapperfunction LocaleCanvas({ locale, children }: { locale: string; children: React.ReactNode }) {  const isRTL = ["ar", "he", "fa"].includes(locale);  return (    <div dir={isRTL ? "rtl" : "ltr"} style={{ textAlign: isRTL ? "right" : "left" }}>      {children}    </div>  );}

// Wait for fonts before exportawait document.fonts.ready;const dataUrl = await toPng(ref.current, { width: w, height: h });