umpordez 1.2.1 → 1.3.2

package/template/scripts/gen-mockups.mjs

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+/**
+ * gen-mockups — render headless store-screen mockups straight to PNGs,
+ * no simulator required. Runs anywhere in ~1s and feeds frame-shots.mjs.
+ *
+ *   node scripts/gen-mockups.mjs     # → screenshots/raw + raw-tablet
+ *   node scripts/frame-shots.mjs     # → screenshots/store/**
+ *
+ * This ships as a STARTING POINT — the screens below are generic
+ * placeholders in your brand color. Edit SCREENS (which screens, what
+ * they show) and the copy in LABELS to recreate your real app. Both
+ * stores allow marketing recreations of the UI.
+ *
+ * Requires @resvg/resvg-js in the mobile app (add it as a devDependency
+ * if missing: `cd mobile/{{PROJECT_SLUG}} && npm i -D @resvg/resvg-js`).
+ */
+
+import { writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+
+const REPO = join(dirname(fileURLToPath(import.meta.url)), '..');
+const APP = join(REPO, 'mobile', '{{PROJECT_SLUG}}');
+const require = createRequire(join(APP, 'package.json'));
+const { Resvg } = require('@resvg/resvg-js');
+
+const SHOTS = join(APP, 'screenshots');
+
+// Brand + neutral surface palette.
+const PRIMARY = '{{PRIMARY_COLOR}}';
+const INK = '#0B0F12';
+const CARD = '#151A1E';
+const LINE = '#242B31';
+const MUTED = '#3A434B';
+const TEXT = '#E7EBEE';
+
+// Per-locale copy. Add locales freely; each becomes a raw/<locale>/ dir.
+const LABELS = {
+    'pt-BR': {
+        greeting: 'Olá 👋',
+        tabs: ['Início', 'Explorar', 'Biblioteca', 'Perfil'],
+        titles: ['Sua tela inicial', 'Explore', 'Biblioteca', 'Perfil'],
+    },
+    en: {
+        greeting: 'Hi 👋',
+        tabs: ['Home', 'Explore', 'Library', 'Profile'],
+        titles: ['Your home', 'Explore', 'Library', 'Profile'],
+    },
+};
+
+// One entry per screenshot; `active` picks the highlighted tab.
+const SCREENS = [
+    { active: 0 },
+    { active: 1 },
+    { active: 2 },
+    { active: 3 },
+];
+
+const DEVICES = {
+    raw: { w: 1080, h: 2340 },          // phone
+    'raw-tablet': { w: 1600, h: 2560 }, // tablet (portrait)
+};
+
+function screenSvg(w, h, labels, screen) {
+    const pad = Math.round(w * 0.06);
+    const tabW = w / labels.tabs.length;
+    const tabY = h - Math.round(h * 0.09);
+    const tabs = labels.tabs.map((label, i) => {
+        const cx = tabW * i + tabW / 2;
+        const on = i === screen.active;
+        return `
+        <rect x="${cx - 26}" y="${tabY}" width="52" height="52" rx="14" fill="${on ? PRIMARY : MUTED}"/>
+        <text x="${cx}" y="${tabY + 96}" text-anchor="middle" font-family="sans-serif" font-size="30" fill="${on ? TEXT : MUTED}">${label}</text>`;
+    }).join('');
+
+    const rows = [0, 1, 2, 3].map(i => {
+        const y = Math.round(h * 0.46) + i * Math.round(h * 0.1);
+        return `
+        <rect x="${pad}" y="${y}" width="${w - pad * 2}" height="${Math.round(h * 0.085)}" rx="26" fill="${CARD}" stroke="${LINE}" stroke-width="2"/>
+        <rect x="${pad + 30}" y="${y + 28}" width="70" height="70" rx="18" fill="${PRIMARY}" opacity="0.22"/>
+        <rect x="${pad + 130}" y="${y + 34}" width="${Math.round(w * 0.4)}" height="20" rx="10" fill="${MUTED}"/>
+        <rect x="${pad + 130}" y="${y + 70}" width="${Math.round(w * 0.26)}" height="16" rx="8" fill="${LINE}"/>`;
+    }).join('');
+
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+  <rect width="${w}" height="${h}" fill="${INK}"/>
+  <text x="${pad}" y="${Math.round(h * 0.11)}" font-family="sans-serif" font-size="34" fill="${MUTED}">${labels.greeting}</text>
+  <text x="${pad}" y="${Math.round(h * 0.155)}" font-family="sans-serif" font-weight="800" font-size="72" fill="${TEXT}">${labels.titles[screen.active]}</text>
+  <rect x="${pad}" y="${Math.round(h * 0.2)}" width="${w - pad * 2}" height="${Math.round(h * 0.2)}" rx="34" fill="${PRIMARY}"/>
+  <rect x="${pad + 44}" y="${Math.round(h * 0.24)}" width="${Math.round(w * 0.3)}" height="24" rx="12" fill="#000000" opacity="0.35"/>
+  <rect x="${pad + 44}" y="${Math.round(h * 0.29)}" width="${Math.round(w * 0.5)}" height="44" rx="16" fill="#000000" opacity="0.5"/>
+  ${rows}
+  <rect x="0" y="${tabY - 24}" width="${w}" height="2" fill="${LINE}"/>
+  ${tabs}
+</svg>`;
+}
+
+function render(svg, w) {
+    return new Resvg(svg, {
+        fitTo: { mode: 'width', value: w },
+        font: { loadSystemFonts: true, defaultFontFamily: 'sans-serif' },
+    }).render().asPng();
+}
+
+let count = 0;
+for (const [dir, dev] of Object.entries(DEVICES)) {
+    for (const [locale, labels] of Object.entries(LABELS)) {
+        const outDir = join(SHOTS, dir, locale);
+        mkdirSync(outDir, { recursive: true });
+        SCREENS.forEach((screen, i) => {
+            const png = render(screenSvg(dev.w, dev.h, labels, screen), dev.w);
+            const name = String(i).padStart(2, '0');
+            writeFileSync(join(outDir, `${name}-screen.png`), png);
+            count++;
+        });
+        console.log(`  ✓ ${dir}/${locale}: ${SCREENS.length} screens`);
+    }
+}
+console.log(`Done — ${count} raw mockups under mobile/{{PROJECT_SLUG}}/screenshots/`);

package/template/scripts/screenshots-capture.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+#
+# screenshots-capture — drive the Maestro flow for BOTH locales on the
+# currently booted device, writing raw store screenshots.
+#
+# The app must already be built + installed on a booted simulator /
+# emulator. Run:
+#   ./scripts/run-ios.sh        # or: cd mobile/{{PROJECT_SLUG}} && npm run android
+#   ./scripts/screenshots-capture.sh phone
+#
+# Run once on a phone sim and once on an iPad / Android tablet:
+#   ./scripts/screenshots-capture.sh phone     # → screenshots/raw
+#   ./scripts/screenshots-capture.sh tablet    # → screenshots/raw-tablet
+#
+# Raw PNGs are the correct device resolution and can be uploaded to the
+# stores as-is; frame them for polish with frame-shots.mjs (see
+# docs/screenshots.md). Tune the labels below + the flow to your nav.
+set -euo pipefail
+
+GROUP="${1:-phone}"
+case "$GROUP" in
+    phone)  RAW=raw ;;
+    tablet) RAW=raw-tablet ;;
+    *) echo "Usage: $0 [phone|tablet]"; exit 1 ;;
+esac
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+cd "$SCRIPT_DIR/../mobile/{{PROJECT_SLUG}}"
+FLOW="../../scripts/screenshots.flow.yaml"
+
+echo "==> Capturing pt-BR ($GROUP)…"
+maestro test \
+    -e OUT="$RAW/pt-BR" -e LANG_LABEL="Português (Brasil)" \
+    -e IDIOMA="Idioma" -e HOME="Início" -e EXPLORE="Explorar" \
+    -e LIBRARY="Biblioteca" -e PROFILE="Perfil" \
+    -e DARK="Tema escuro" \
+    "$FLOW"
+
+echo "==> Capturing en ($GROUP)…"
+maestro test \
+    -e OUT="$RAW/en" -e LANG_LABEL="English" \
+    -e IDIOMA="Language" -e HOME="Home" -e EXPLORE="Explore" \
+    -e LIBRARY="Library" -e PROFILE="Profile" \
+    -e DARK="Dark theme" \
+    "$FLOW"
+
+echo ""
+echo "Done. Raw screenshots:"
+echo "  mobile/{{PROJECT_SLUG}}/screenshots/$RAW/pt-BR/"
+echo "  mobile/{{PROJECT_SLUG}}/screenshots/$RAW/en/"

package/template/scripts/screenshots.flow.yaml

@@ -0,0 +1,54 @@
+# Maestro flow — capture store screenshots deterministically.
+#
+# Runs on any booted iOS simulator OR Android emulator. It resets the
+# app, gets past onboarding (labels matched in BOTH languages so it works
+# whatever the device language is), switches the in-app language to the
+# target, then walks the main tabs and saves raw PNGs.
+#
+# This is a STARTING POINT — tune the tab labels + steps to your actual
+# navigation. If you seed demo content via a dev-only action, add a tapOn
+# for it after onboarding.
+#
+# Do not run this directly for both locales — use
+# scripts/screenshots-capture.sh, which sets OUT + labels per locale.
+#
+# Raw output lands in screenshots/<OUT>/NN-name.png. iOS bundle is
+# {{IOS_BUNDLE_ID}}; for Android pass --app-id {{ANDROID_PACKAGE}} on the CLI.
+appId: {{IOS_BUNDLE_ID}}
+---
+- launchApp:
+    clearState: true
+    stopApp: true
+
+# ── Get past onboarding (tolerant to device language) ───────────────
+- tapOn:
+    text: "Começar|Get started|Vamos|Continue"
+    retryTapIfNoChange: true
+    optional: true
+- tapOn:
+    text: "Pular|Skip|Começar a usar|Start using"
+    optional: true
+
+# ── Force the target language via Profile → language picker ─────────
+- tapOn: "${PROFILE}|Perfil|Profile"
+- tapOn:
+    text: "${IDIOMA}|Idioma|Language"
+    optional: true
+- tapOn:
+    text: "${LANG_LABEL}"
+    optional: true
+
+# ── 03 Profile ──────────────────────────────────────────────────────
+- takeScreenshot: "screenshots/${OUT}/03-profile"
+
+# ── 00 Home ─────────────────────────────────────────────────────────
+- tapOn: "${HOME}"
+- takeScreenshot: "screenshots/${OUT}/00-home"
+
+# ── 01 Explore ──────────────────────────────────────────────────────
+- tapOn: "${EXPLORE}"
+- takeScreenshot: "screenshots/${OUT}/01-explore"
+
+# ── 02 Library ──────────────────────────────────────────────────────
+- tapOn: "${LIBRARY}"
+- takeScreenshot: "screenshots/${OUT}/02-library"

package/template/ui/site/_variants/app/en.ts

@@ -0,0 +1,131 @@
+import { TranslationShape } from './pt-BR.js';
+
+const en: TranslationShape = {
+    meta: {
+        siteTitle: '{{PROJECT_NAME}} — for iOS and Android',
+        siteDescription: '{{PROJECT_DESCRIPTION}}'
+    },
+    nav: {
+        features: 'Features',
+        howItWorks: 'How it works',
+        pricing: 'Pricing',
+        download: 'Download',
+        languageToggle: 'PT'
+    },
+    hero: {
+        eyebrow: 'Now on iOS and Android',
+        title1: '{{PROJECT_NAME}},',
+        title2: 'in your pocket.',
+        subtitle: '{{PROJECT_DESCRIPTION}}',
+        ctaIos: 'Download on the App Store',
+        ctaAndroid: 'Get it on Google Play',
+        noSub: 'Free to start. No account needed.'
+    },
+    notIs: {
+        title: 'What it is not',
+        items: [
+            'No ads',
+            'No trackers',
+            'No forced sign-up',
+            'No hidden subscription'
+        ],
+        isTitle: 'Just the app you wanted.',
+        isBody: 'Fast, to the point, and built for daily use. Open it '
+            + 'and start; setup can wait until you want it.'
+    },
+    flow: {
+        eyebrow: 'How it works',
+        title: 'Three steps, done',
+        sub: 'No long tutorial. You get it in seconds.',
+        steps: [
+            {
+                title: 'Download',
+                body: 'Install from the App Store or Google Play. Takes '
+                    + 'under a minute.'
+            },
+            {
+                title: 'Open and use',
+                body: 'No sign-up screen in the way. Start on the very '
+                    + 'first screen.'
+            },
+            {
+                title: 'Take it with you',
+                body: 'Works when you need it, wherever you are, at your '
+                    + 'own pace.'
+            }
+        ]
+    },
+    features: {
+        eyebrow: 'Features',
+        title: 'Built for every day',
+        sub: 'The essentials, done well. No bloat, no fuss.',
+        items: [
+            {
+                title: 'Genuinely fast',
+                body: 'Opens instantly and responds to every tap. No '
+                    + 'loading spinners.'
+            },
+            {
+                title: 'Works offline',
+                body: 'Your data lives on the device. Use it on the '
+                    + 'subway, on a plane, with no signal.'
+            },
+            {
+                title: 'Your data is yours',
+                body: 'No trackers, no data selling. What is yours stays '
+                    + 'yours.'
+            },
+            {
+                title: 'Easy to learn',
+                body: 'A clean, direct interface. You find everything '
+                    + 'without a manual.'
+            },
+            {
+                title: 'Backup anytime',
+                body: 'Export and restore in one tap. Switch phones '
+                    + 'without losing a thing.'
+            },
+            {
+                title: 'Light and dark',
+                body: 'Follows the system theme or pin your favorite. '
+                    + 'Comfortable any time of day.'
+            }
+        ]
+    },
+    pricing: {
+        eyebrow: 'Pricing',
+        title: 'One price, everything included',
+        sub: 'No catch, no hidden premium tier.',
+        price: 'Free',
+        priceNote: 'Download and start right now.',
+        included: [
+            'Every feature, no locks',
+            'Works offline',
+            'Backup and restore',
+            'Updates included'
+        ],
+        cta: 'Download now',
+        fine: 'No credit card. No sign-up.'
+    },
+    cta: {
+        title: 'Ready to start?',
+        body: 'Download {{PROJECT_NAME}} and see for yourself in under '
+            + 'a minute.'
+    },
+    footer: {
+        tagline: '{{PROJECT_DESCRIPTION}}',
+        product: 'Product',
+        support: 'Support',
+        contact: 'Get in touch',
+        rights: 'All rights reserved.',
+        terms: 'Terms of Use',
+        privacy: 'Privacy'
+    },
+    notFound: {
+        title: 'Page not found',
+        body: 'The content you are looking for is not here.',
+        cta: 'Back to home'
+    }
+};
+
+export default en;

package/template/ui/site/_variants/app/footer.ejs

@@ -0,0 +1,46 @@
+    <footer class="border-t border-zinc-800 bg-zinc-950">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-10">
+                <div class="col-span-2">
+                    <a href="<%= urlForLocale(locale) %>" class="flex items-center gap-2.5 mb-4">
+                        <span class="w-8 h-8 rounded-xl bg-primary flex items-center justify-center font-black text-zinc-950 text-lg leading-none">
+                            {{PROJECT_NAME_INITIAL}}
+                        </span>
+                        <span class="text-lg font-bold tracking-tight text-zinc-100">{{PROJECT_NAME}}</span>
+                    </a>
+                    <p class="text-sm text-zinc-500 max-w-xs leading-relaxed">
+                        <%= t('footer.tagline') %>
+                    </p>
+                </div>
+
+                <div>
+                    <h4 class="text-xs font-semibold uppercase tracking-wider text-zinc-500 mb-4"><%= t('footer.product') %></h4>
+                    <ul class="space-y-3 text-sm text-zinc-400">
+                        <li><a href="<%= urlForLocale(locale) %>#features" class="hover:text-zinc-100 transition-colors"><%= t('nav.features') %></a></li>
+                        <li><a href="<%= urlForLocale(locale) %>#how-it-works" class="hover:text-zinc-100 transition-colors"><%= t('nav.howItWorks') %></a></li>
+                        <li><a href="<%= urlForLocale(locale) %>#pricing" class="hover:text-zinc-100 transition-colors"><%= t('nav.pricing') %></a></li>
+                    </ul>
+                </div>
+
+                <div>
+                    <h4 class="text-xs font-semibold uppercase tracking-wider text-zinc-500 mb-4"><%= t('footer.support') %></h4>
+                    <ul class="space-y-3 text-sm text-zinc-400">
+                        <li><a href="mailto:contato@{{DOMAIN}}" class="hover:text-zinc-100 transition-colors"><%= t('footer.contact') %></a></li>
+                        <li><a href="<%= urlForLocale(locale) %>#download" class="hover:text-zinc-100 transition-colors"><%= t('nav.download') %></a></li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="border-t border-zinc-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+                <p class="text-sm text-zinc-500">
+                    &copy; <%= currentYear %> {{PROJECT_NAME}}. <%= t('footer.rights') %>
+                </p>
+                <div class="flex gap-6 text-sm text-zinc-500">
+                    <a href="<%= urlForLocale(locale) %>/termos" class="hover:text-zinc-300 transition-colors"><%= t('footer.terms') %></a>
+                    <a href="<%= urlForLocale(locale) %>/privacidade" class="hover:text-zinc-300 transition-colors"><%= t('footer.privacy') %></a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>

package/template/ui/site/_variants/app/header.ejs

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="<%= htmlLang %>">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= typeof title !== 'undefined' ? title : t('meta.siteTitle') %></title>
+    <meta name="description" content="<%= t('meta.siteDescription') %>">
+    <meta name="robots" content="index, follow">
+    <meta name="theme-color" content="{{PRIMARY_COLOR}}">
+
+    <%# SEO: hreflang alternates — tells Google about every translated %>
+    <%# version of this page. x-default points at the primary locale %>
+    <%# so users in unmapped regions see the right language. %>
+    <% hreflangAlternates.forEach(function(alt) { %>
+        <link rel="alternate" hreflang="<%= alt.hreflang %>" href="<%= alt.url %>">
+    <% }); %>
+    <link rel="alternate" hreflang="x-default" href="<%= urlForLocale('pt-BR') %>">
+
+    <%# Canonical URL — avoids duplicate-content issues if the same %>
+    <%# content is reachable via multiple URLs. %>
+    <link rel="canonical" href="<%= canonicalUrl %>">
+
+    <%# Open Graph — locale + alternates for social shares. %>
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="<%= typeof title !== 'undefined' ? title : t('meta.siteTitle') %>">
+    <meta property="og:description" content="<%= t('meta.siteDescription') %>">
+    <meta property="og:locale" content="<%= ogLocale %>">
+    <% ogLocaleAlternates.forEach(function(alt) { %>
+        <meta property="og:locale:alternate" content="<%= alt %>">
+    <% }); %>
+    <meta property="og:url" content="<%= canonicalUrl %>">
+
+    <link rel="stylesheet" href="/css/output.css">
+</head>
+<body class="min-h-screen bg-zinc-950 text-zinc-100 antialiased selection:bg-primary/30">
+    <header class="sticky top-0 z-50 border-b border-zinc-800/80 bg-zinc-950/80 backdrop-blur-md">
+        <nav class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <a href="<%= urlForLocale(locale) %>" class="flex items-center gap-2.5 group">
+                    <span class="w-8 h-8 rounded-xl bg-primary flex items-center justify-center font-black text-zinc-950 text-lg leading-none">
+                        {{PROJECT_NAME_INITIAL}}
+                    </span>
+                    <span class="text-lg font-bold tracking-tight text-zinc-100">{{PROJECT_NAME}}</span>
+                </a>
+
+                <div class="hidden md:flex items-center gap-1">
+                    <a href="<%= urlForLocale(locale) %>#features" class="px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.features') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale) %>#how-it-works" class="px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.howItWorks') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale) %>#pricing" class="px-4 py-2 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.pricing') %>
+                    </a>
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <a href="<%= urlForLocale(locale === 'pt-BR' ? 'en' : 'pt-BR') %>"
+                       class="hidden sm:inline-flex items-center px-3 py-2 text-xs font-bold tracking-wide text-zinc-400 hover:text-zinc-100 transition-colors"
+                       hreflang="<%= locale === 'pt-BR' ? 'en' : 'pt-BR' %>">
+                        <%= t('nav.languageToggle') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale) %>#download"
+                       class="inline-flex items-center gap-2 bg-zinc-100 text-zinc-900 px-4 py-2 rounded-xl hover:bg-white transition-colors text-sm font-semibold">
+                        <%= t('nav.download') %>
+                    </a>
+
+                    <button id="mobile-menu-btn" class="md:hidden p-2 text-zinc-400 hover:text-zinc-100 transition-colors" aria-label="Menu">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <div id="mobile-menu" class="hidden md:hidden pb-4">
+                <div class="flex flex-col gap-1 pt-3 border-t border-zinc-800">
+                    <a href="<%= urlForLocale(locale) %>#features" class="px-4 py-3 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.features') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale) %>#how-it-works" class="px-4 py-3 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.howItWorks') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale) %>#pricing" class="px-4 py-3 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors">
+                        <%= t('nav.pricing') %>
+                    </a>
+                    <a href="<%= urlForLocale(locale === 'pt-BR' ? 'en' : 'pt-BR') %>"
+                       class="px-4 py-3 text-sm font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
+                       hreflang="<%= locale === 'pt-BR' ? 'en' : 'pt-BR' %>">
+                        <%= t('nav.languageToggle') %>
+                    </a>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <script>
+        document.getElementById('mobile-menu-btn').addEventListener('click', function () {
+            document.getElementById('mobile-menu').classList.toggle('hidden');
+        });
+    </script>