umpordez 1.2.1 → 1.3.1

package/.claude/settings.local.json

@@ -46,7 +46,9 @@
       "Bash(md5 /tmp/umptest/everything/mobile/testapp/assets/icon.png /Users/ligeiro/dev/tranqs/app/mobile/tranqs/assets/icon.png)",
       "Bash(git merge *)",
       "Bash(git tag *)",
-      "Bash(npm pack *)"
+      "Bash(npm pack *)",
+      "Read(//Users/ligeiro/dev/dropa/**)",
+      "Read(//Users/ligeiro/dev/growerheleper-v2/app/**)"
     ]
   }
 }

package/README.md

@@ -98,11 +98,19 @@ It asks **what to generate** first:
 |---|---|
 | everything          | server + admin UI + site + mobile |
 | web-only            | server + admin UI + site (no mobile) |
+| mobile-and-site     | mobile app + app-store landing page (no server, no admin) |
 | mobile-and-server   | server + mobile (no UI) |
 | just-mobile         | mobile only (assumes external API) |
 
+The **public site** ships two landing flavors and the CLI picks by
+preset: a **SaaS landing** (CTAs → admin signup) for server/admin
+presets, and an **app-store landing** (App Store / Play buttons,
+pricing, download) for `mobile-and-site`, branded from your primary
+color.
+
 Then a few questions (name, domain, ports, primary color, mobile
-bundle ID if applicable). After scaffold:
+bundle ID + **splash style** — instant show-up or animated — if
+applicable). After scaffold:
 
 ```bash
 cd my-project
@@ -212,6 +220,25 @@ umpordez --version                check version
 - **fetch-api** now supports PUT and PATCH methods plus safer
   URL parameter filtering (skips null/undefined values).
 
+## What's new in 1.3
+
+Ship a mobile app + its marketing site in one shot:
+
+- **`mobile-and-site` preset** — mobile app + app-store landing page,
+  no server or admin. The "indie mobile app" shape.
+- **App-store landing** — App Store / Play buttons, phone mockup,
+  pricing, download CTAs; branded from your primary color. The CLI
+  picks SaaS vs app landing by preset (and `umpordez update` keeps
+  the right flavor).
+- **Splash choice** — instant show-up (default; native splash hides on
+  font load) or the animated splash, chosen at scaffold time.
+- **Store launch kit** (every mobile preset) — `CHANGELOG.md` +
+  `docs/store-listing.md`, `store-copy.md`, `releases.md`,
+  `screenshots.md`.
+- **Screenshot + release automation** — `frame-shots.mjs`,
+  `gen-mockups.mjs`, `screenshots-capture.sh` + Maestro flow,
+  `appstore-resize.sh`, and `misc/build-local.sh`.
+
 ## What changed in 1.1
 
 The big one. v1.0.x was server + web only. v1.1 adds:

package/cli.mjs

@@ -41,13 +41,15 @@ function showHelp() {
     console.log(`  umpordez --version               ${dim('Show version')}`);
     console.log('');
     console.log(green.bold('What you get:'));
+    console.log(`  ${green('>')} Presets: everything / web-only / mobile+site / mobile+server / just-mobile`);
     console.log(`  ${green('>')} Multi-tenant auth (cookie-based JWT)`);
     console.log(`  ${green('>')} Admin API + Site API (Express)`);
     console.log(`  ${green('>')} React admin panel (Vite + shadcn/ui)`);
     console.log(`  ${green('>')} PostgreSQL + Knex.js migrations`);
     console.log(`  ${green('>')} S3 file uploads with signed URLs`);
-    console.log(`  ${green('>')} EJS-based public site`);
-    console.log(`  ${green('>')} Console task runner`);
+    console.log(`  ${green('>')} Public site — SaaS or app-store landing (EJS + i18n + SEO)`);
+    console.log(`  ${green('>')} Mobile app (Expo + TS) — instant or animated splash`);
+    console.log(`  ${green('>')} Store launch kit (listing, copy, changelog, screenshots)`);
     console.log(`  ${green('>')} Role-based access (admin/owner/manager/user)`);
     console.log(`  ${green('>')} Production build system with versioning`);
     console.log('');

package/create.mjs

@@ -4,7 +4,11 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
-import { buildReplacements } from './template-variables.mjs';
+import {
+    buildReplacements,
+    APP_LANDING_SWAPS,
+    SITE_VARIANT_DIR
+} from './template-variables.mjs';
 import { generateIcons } from './icons.mjs';
 import { writeInitialManifest } from './update.mjs';
 
@@ -45,6 +49,17 @@ const PRESETS = {
         wantsAdminUi: true,
         wantsSite: true,
     },
+    'mobile-and-site': {
+        label: 'Mobile app + landing page (no server, no admin)',
+        includes: ['mobile', 'ui/site', 'scripts', 'doc'],
+        wantsMobile: true,
+        wantsServer: false,
+        wantsAdminUi: false,
+        wantsSite: true,
+        // Swaps the SaaS landing for the app-marketing landing
+        // (App Store / Play buttons, pricing, download CTA).
+        appLanding: true,
+    },
     'mobile-and-server': {
         label: 'Mobile + server only (no admin UI, no site)',
         includes: ['server', 'mobile', 'misc', 'scripts', 'doc'],
@@ -70,6 +85,8 @@ const ROOT_FILES_BY_PRESET = {
     'web-only':           ['CLAUDE.md', 'AGENTS.md', 'README.md',
                            'architecture.md', 'code.md',
                            'install.sh', 'seed.sh', 'dev.sh'],
+    'mobile-and-site':    ['CLAUDE.md', 'AGENTS.md', 'README.md',
+                           'code.md', 'install.sh', 'dev.sh'],
     'mobile-and-server':  ['CLAUDE.md', 'AGENTS.md', 'README.md',
                            'architecture.md', 'code.md',
                            'install.sh', 'seed.sh', 'dev.sh'],
@@ -266,6 +283,16 @@ async function promptProjectDetails() {
                 ? true
                 : 'Lowercase alphanumeric, dashes allowed',
         },
+        {
+            type: 'list',
+            name: 'splashStyle',
+            message: 'Splash screen:',
+            choices: [
+                { name: 'Instant show-up (recommended)', value: 'instant' },
+                { name: 'Animated (glow + logo + pulse)', value: 'animated' },
+            ],
+            default: 'instant',
+        },
     ];
 
     const answers = await inquirer.prompt([
@@ -296,6 +323,7 @@ async function promptProjectDetails() {
         androidPackage: answers.androidPackage
             ?? toReverseDomain(answers.domain),
         mobileScheme:   answers.mobileScheme ?? answers.slug,
+        splashStyle:    answers.splashStyle  ?? 'instant',
         ...answers,
     };
 }
@@ -331,17 +359,28 @@ function showSummary(details) {
     }
     console.log(`  ${chalk.bold('Color:')}        ${chalk.hex(details.primaryColor)('██')} ${details.primaryColor}`);
     console.log(`  ${chalk.bold('Theme:')}        ${details.defaultTheme}`);
+    if (presetDef.wantsSite) {
+        console.log(`  ${chalk.bold('Landing:')}      ${cyan(
+            presetDef.appLanding ? 'app store (download)' : 'SaaS (signup)'
+        )}`);
+    }
     if (presetDef.wantsMobile) {
         console.log(`  ${chalk.bold('iOS:')}          ${details.iosBundleId}`);
         console.log(`  ${chalk.bold('Android:')}      ${details.androidPackage}`);
         console.log(`  ${chalk.bold('Scheme:')}       ${details.mobileScheme}://`);
+        console.log(`  ${chalk.bold('Splash:')}       ${details.splashStyle === 'animated'
+            ? 'animated (glow + logo)'
+            : 'instant show-up'}`);
     }
     console.log('');
     console.log(dim('  Generates:'));
     if (presetDef.wantsServer)  console.log(dim(`  ${green('>')} Admin API + Site API (Express + TS)`));
     if (presetDef.wantsAdminUi) console.log(dim(`  ${green('>')} React admin panel (Vite + shadcn/ui)`));
-    if (presetDef.wantsSite)    console.log(dim(`  ${green('>')} Public site (EJS + Tailwind)`));
+    if (presetDef.wantsSite)    console.log(dim(`  ${green('>')} ${presetDef.appLanding
+        ? 'App landing page (store buttons + pricing)'
+        : 'Public site (EJS + Tailwind)'}`));
     if (presetDef.wantsMobile)  console.log(dim(`  ${green('>')} Mobile app (Expo + TS + auth + theme)`));
+    if (presetDef.wantsMobile)  console.log(dim(`  ${green('>')} Store launch kit (listing, copy, changelog, screenshots)`));
     if (presetDef.wantsServer)  console.log(dim(`  ${green('>')} PostgreSQL migrations + seed`));
     console.log('');
 }
@@ -383,7 +422,7 @@ function replacePlaceholders(content, replacements) {
 // config, git ignore) doesn't belong to any single sub-app.
 const ALWAYS_KEEP = new Set(['.claude']);
 
-async function copyTemplate(outputDir, preset) {
+export async function copyTemplate(outputDir, preset) {
     const presetDef = PRESETS[preset];
     await fs.promises.cp(TEMPLATE_DIR, outputDir, { recursive: true });
 
@@ -442,6 +481,25 @@ async function copyTemplate(outputDir, preset) {
             await fs.promises.rm(path.join(outputDir, entry.name));
         }
     }
+
+    // Landing-page variant swap. App-focused presets replace the SaaS
+    // landing with the app-marketing one before placeholder replacement
+    // runs (so the swapped files get their placeholders filled too). The
+    // _variants staging dir is always removed — it never ships.
+    if (presetDef.appLanding) {
+        for (const [variant, canonical] of APP_LANDING_SWAPS) {
+            const from = path.join(outputDir, variant);
+            const to = path.join(outputDir, canonical);
+            if (fs.existsSync(from)) {
+                await fs.promises.rm(to, { force: true });
+                await fs.promises.rename(from, to);
+            }
+        }
+    }
+    await fs.promises.rm(
+        path.join(outputDir, SITE_VARIANT_DIR),
+        { recursive: true, force: true }
+    );
 }
 
 export async function createProject() {
@@ -565,9 +623,14 @@ export async function createProject() {
             'scripts/run-ios.sh',
             'scripts/release-android.sh',
             'scripts/generate-icons.sh',
-            'scripts/install-native.sh'
+            'scripts/install-native.sh',
+            'scripts/appstore-resize.sh',
+            'scripts/screenshots-capture.sh'
         );
     }
+    if (details.presetDef.wantsServer) {
+        scripts.push('misc/build-local.sh');
+    }
 
     for (const script of scripts) {
         const scriptPath = path.join(outputDir, script);
@@ -638,8 +701,10 @@ function showNextSteps(details) {
         console.log(`  ${green('3.')} ./seed.sh`);
         console.log(`  ${green('4.')} ./dev.sh`);
     } else {
-        console.log(`  ${green('2.')} cd mobile/${details.slug} && npm install`);
-        console.log(`  ${green('3.')} npm run start`);
+        // No DB to seed, but install.sh + dev.sh still orchestrate the
+        // site + mobile (they guard on directory existence).
+        console.log(`  ${green('2.')} ./install.sh`);
+        console.log(`  ${green('3.')} ./dev.sh`);
     }
     console.log('');
     if (presetDef.wantsAdminUi) {
@@ -653,6 +718,7 @@ function showNextSteps(details) {
     }
     if (presetDef.wantsMobile) {
         console.log(dim(`  Mobile:       cd mobile/${details.slug} && npm run ios | android | web`));
+        console.log(dim(`  Store kit:    mobile/${details.slug}/docs/ (listing, copy, screenshots) + CHANGELOG.md`));
     }
     console.log('');
     console.log(dim('  Happy hacking! - ') + cyan('youtube.com/ligeiro'));

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "umpordez",
     "type": "module",
-    "version": "1.2.1",
+    "version": "1.3.1",
     "description": "SaaS starter kit generator — server, admin SPA, public site (i18n), mobile app (offline-first, IAP, native push)",
     "main": "cli.mjs",
     "scripts": {

package/template/CLAUDE.md

@@ -58,7 +58,7 @@ URLs:
 Folders that the preset didn't ship are simply absent. `dev.sh`
 and `install.sh` guard on existence per directory, so the same
 script works for every preset (everything / web-only /
-mobile-and-server / just-mobile).
+mobile-and-site / mobile-and-server / just-mobile).
 
 ## Multi-tenancy model
 

package/template/misc/build-local.sh

@@ -0,0 +1,82 @@
+#!/bin/bash
+#
+# build-local — produce a production build of every web sub-project this
+# repo ships (server, admin SPA, public site) into a sibling `builds/`
+# directory, bump a build number and (optionally) commit + push it.
+#
+# Layout produced (matches CLAUDE.md → Deployment):
+#   ../builds/server/         server `npm run build` output + deps
+#   ../builds/ui/admin/dist/  Vite build (nginx serves this)
+#   ../builds/ui/site/        compiled site + views + public
+#
+# Usage (from the project root):
+#   ./misc/build-local.sh            # build into ../builds
+#   ./misc/build-local.sh --push     # also git commit + tag + push builds
+#
+# Each block is guarded on directory existence, so the same script works
+# whatever preset generated this project.
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "$ROOT"
+
+BUILD_DIR="${BUILD_DIR:-../builds}"
+PUSH=0
+for arg in "$@"; do
+    case "$arg" in
+        --push) PUSH=1 ;;
+    esac
+done
+
+mkdir -p "$BUILD_DIR"
+
+# ── Build number ────────────────────────────────────────────────────
+NUM_FILE="$BUILD_DIR/build-number"
+number=$(cat "$NUM_FILE" 2>/dev/null || echo 0)
+next=$((number + 1))
+
+# ── Server ──────────────────────────────────────────────────────────
+if [ -d server ]; then
+    echo "==> Building server…"
+    (cd server && npm run build)
+    mkdir -p "$BUILD_DIR/server"
+    rsync -a --delete \
+        --exclude node_modules --exclude .env \
+        server/dist/ "$BUILD_DIR/server/dist/" 2>/dev/null || true
+    cp server/package.json server/package-lock.json "$BUILD_DIR/server/" 2>/dev/null || true
+fi
+
+# ── Admin SPA ───────────────────────────────────────────────────────
+if [ -d ui/admin ]; then
+    echo "==> Building admin SPA…"
+    (cd ui/admin && npm run build)
+    mkdir -p "$BUILD_DIR/ui/admin"
+    rsync -a --delete ui/admin/dist/ "$BUILD_DIR/ui/admin/dist/"
+fi
+
+# ── Public site ─────────────────────────────────────────────────────
+if [ -d ui/site ]; then
+    echo "==> Building public site…"
+    (cd ui/site && npm run build)
+    mkdir -p "$BUILD_DIR/ui/site"
+    rsync -a --delete \
+        --exclude node_modules --exclude .env \
+        ui/site/build/ "$BUILD_DIR/ui/site/build/" 2>/dev/null || true
+    cp ui/site/package.json "$BUILD_DIR/ui/site/" 2>/dev/null || true
+    cp -R ui/site/views "$BUILD_DIR/ui/site/" 2>/dev/null || true
+    cp -R ui/site/public "$BUILD_DIR/ui/site/" 2>/dev/null || true
+fi
+
+echo "$next" > "$NUM_FILE"
+echo ""
+echo "Build #$next written to $BUILD_DIR"
+
+# ── Optional: commit + push the builds repo ─────────────────────────
+if [ "$PUSH" = "1" ] && [ -d "$BUILD_DIR/.git" ]; then
+    echo "==> Committing + pushing builds…"
+    (cd "$BUILD_DIR" \
+        && git add . \
+        && git commit -m "build: #$next" \
+        && git tag -a "$next" -m "#$next" \
+        && git push && git push origin --tags)
+fi

package/template/mobile/{{PROJECT_SLUG}}/App.tsx

@@ -15,13 +15,16 @@ import AnimatedSplash from './src/components/AnimatedSplash';
 import { toastConfig } from './src/components/ToastConfig';
 import { initDb } from './src/services/db';
 import { syncAllContent } from './src/services/content';
+import { SPLASH_ANIMATED } from './src/config';
 
 // Hide the native splash screen so our AnimatedSplash takes over the
 // transition. Best-effort — if the call fails (rare), we just continue.
 SplashScreen.preventAutoHideAsync().catch(() => { /* best-effort */ });
 
 export default function App() {
-    const [splashDone, setSplashDone] = useState<boolean>(false);
+    // Instant show-up (SPLASH_ANIMATED = false) starts already "done" so
+    // no overlay ever mounts — the app appears the moment fonts load.
+    const [splashDone, setSplashDone] = useState<boolean>(!SPLASH_ANIMATED);
 
     useEffect(() => {
         // Init runs in the background. App rendering doesn't wait on
@@ -79,7 +82,7 @@ export default function App() {
                     </AuthProvider>
                 </ThemeProvider>
 
-                {!splashDone && (
+                {SPLASH_ANIMATED && !splashDone && (
                     <AnimatedSplash onDone={() => setSplashDone(true)} />
                 )}
             </SafeAreaProvider>

package/template/mobile/{{PROJECT_SLUG}}/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to **{{PROJECT_NAME}}** (the mobile app). This is the
+source of truth for what shipped; store "What's New" copy is derived from
+it in [`docs/releases.md`](./docs/releases.md).
+
+Format loosely follows [Keep a Changelog](https://keepachangelog.com);
+versions match `app.json` (`version` / `ios.buildNumber` /
+`android.versionCode`).
+
+## [Unreleased]
+
+### Added
+- First public build.
+
+### Changed
+-
+
+### Fixed
+-
+
+<!--
+When you cut a release:
+  1. `../../scripts/bump-version.sh patch|minor|major`
+  2. Move the items above under a new `## [x.y.z] - YYYY-MM-DD` heading.
+  3. Reset [Unreleased] to empty Added/Changed/Fixed.
+  4. Translate the highlights into store copy in docs/releases.md.
+-->

package/template/mobile/{{PROJECT_SLUG}}/CLAUDE.md

@@ -6,7 +6,7 @@ auth, 5-tab navigator, offline SQLite, custom-native modules.
 ```
 src/
 ├── App.tsx, index.ts
-├── config.ts                  API base URL + provider client IDs
+├── config.ts                  API base URL + client IDs + SPLASH_ANIMATED
 ├── theme/colors.ts            Palette generated from primary color
 ├── i18n/                      pt-BR default + en (react-i18next)
 ├── contexts/
@@ -95,6 +95,15 @@ hasCompletedOnboarding
   Use `./scripts/prebuild.sh` (refuses --clean). To genuinely
   reset, move customizations into `plugins/` first.
 
+## Splash
+
+`config.ts` exports `SPLASH_ANIMATED` (set at scaffold time). When
+`false` (instant show-up, the default) the native splash hides the
+moment fonts load and the app appears immediately — `AnimatedSplash`
+never mounts. When `true`, `App.tsx` overlays `AnimatedSplash`
+(glow + logo + pulse ring, ~2s) until it finishes. The component ships
+either way; flip the flag to switch behavior.
+
 ## Adding a screen
 
 1. **Page** — `src/pages/<scope>/<Name>.tsx`. Typed via

package/template/mobile/{{PROJECT_SLUG}}/docs/releases.md

@@ -0,0 +1,78 @@
+# Store release notes
+
+Copy-paste texts for publishing {{PROJECT_NAME}} updates to the **Apple
+App Store** (App Store Connect → *What's New in This Version*) and **Google
+Play** (Play Console → release → *Release notes*).
+
+Character limits to respect:
+
+- **Apple — Promotional Text**: max **170 chars** per language. Evergreen
+  blurb above the description; updatable without a build.
+- **Apple — "What's New"**: max **4000 chars** per language. Roomy; use a
+  structured highlights + fixes block.
+- **Google Play — release notes**: max **500 chars per language**. Paste
+  the whole locale-tagged block; Play parses the `<locale>` tags. Keep each
+  language tight and benefit-first.
+
+Primary market is Brazil, so **pt-BR is the lead copy**; en mirrors it.
+Source of truth for what shipped: [`../CHANGELOG.md`](../CHANGELOG.md).
+
+House style: never a hyphen as a separator; use `;` `,` `.` instead.
+
+---
+
+## App Store — Promotional Text (≤170 chars / language)
+
+Evergreen marketing blurb shown above the description. Not tied to a build
+— update anytime. Order: pt-BR, en.
+
+```
+
+```
+
+```
+
+```
+
+---
+
+## App Store — "What's New" (≤4000 chars / language)
+
+Per release. Lead with the biggest user-facing win. Order: pt-BR, en.
+
+```
+Novidades desta versão:
+
+•
+•
+
+Correções e melhorias de estabilidade.
+```
+
+```
+What's new in this version:
+
+•
+•
+
+Fixes and stability improvements.
+```
+
+---
+
+## Google Play — Release notes (≤500 chars / language)
+
+Paste the whole block; Play parses the locale tags.
+
+```
+<pt-BR>
+•
+•
+Correções e melhorias.
+</pt-BR>
+<en-US>
+•
+•
+Fixes and improvements.
+</en-US>
+```

package/template/mobile/{{PROJECT_SLUG}}/docs/screenshots.md

@@ -0,0 +1,84 @@
+# Store screenshots
+
+Produce the full set — **N screens × 2 locales (pt-BR, en) × store sizes**
+(iPhone, Android phone, iPad, Android tablet) — with a brand caption and no
+design tool. Both routes below feed the same framer,
+`scripts/frame-shots.mjs`.
+
+> Apple accepts up to 10 screenshots; Google Play caps at 8. Produce 8 and
+> they upload as-is to both.
+
+Everything lands under `mobile/{{PROJECT_SLUG}}/screenshots/` (git-ignored):
+
+```
+screenshots/raw/<locale>/NN-*.png          phone source screens
+screenshots/raw-tablet/<locale>/NN-*.png   tablet source screens
+screenshots/store/<preset>/<locale>/*.png  framed, upload-ready
+```
+
+Presets → sizes: `iphone` 1290×2796 · `android` 1080×2340 · `ipad`
+2048×2732 · `androidtablet` 1600×2560.
+
+---
+
+## Option A — Headless mockups (no simulator)
+
+`scripts/gen-mockups.mjs` renders recreations of your screens straight to
+PNGs — no simulator, runs anywhere in ~1s. Ships as a **starting point**:
+edit the `DATA` block (copy shown) and the `SCREENS` list (which screens,
+what layout) to match your app, then:
+
+```bash
+node scripts/gen-mockups.mjs     # → screenshots/raw + raw-tablet
+node scripts/frame-shots.mjs     # → screenshots/store/**
+```
+
+Both stores allow marketing recreations of the UI. Dev deps:
+`@resvg/resvg-js`, `lucide-static` (add them to the mobile app if missing).
+
+## Option B — Real device captures (Maestro)
+
+Pixel-true captures of the live app on a booted simulator/emulator, driven
+by [Maestro](https://maestro.mobile.dev/). Tune the screen labels in
+`scripts/screenshots.flow.yaml` to your nav first (it matches tab labels in
+both languages).
+
+```bash
+./scripts/run-ios.sh                       # or: cd mobile/{{PROJECT_SLUG}} && npm run android
+./scripts/screenshots-capture.sh phone     # → screenshots/raw
+# boot an iPad / Android tablet, then:
+./scripts/screenshots-capture.sh tablet    # → screenshots/raw-tablet
+node scripts/frame-shots.mjs               # frame both sets
+```
+
+The flow resets the app, gets past onboarding, switches the in-app language
+per locale and captures each screen. Bundle IDs:
+
+```
+iOS      {{IOS_BUNDLE_ID}}
+Android  {{ANDROID_PACKAGE}}   (pass --app-id {{ANDROID_PACKAGE}} on Android)
+```
+
+---
+
+## Captions & order
+
+Numeric filename prefixes (`00-…`, `01-…`) drive both the order **and** the
+caption lookup in `frame-shots.mjs` (the `CAPTIONS` map). Keep them
+numbered. Captions should mirror [`store-copy.md`](./store-copy.md); the
+first and last carry the strongest download pitch (most visitors only see
+the first 2–3 frames).
+
+Preview the framing without any raw captures:
+
+```bash
+node scripts/frame-shots.mjs --selftest
+node scripts/frame-shots.mjs --preset=iphone --locale=en
+```
+
+## Store requirements
+
+- **Apple** requires a 6.9"/6.5" iPhone set; add the iPad set when
+  `supportsTablet: true` in `app.json`.
+- **Google Play** takes up to 8 phone + tablet screenshots, long edge
+  320–3840px.