stack-site-builder 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -11,6 +11,30 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.16.0] - 2026-07-22
+
+### Added
+
+- **`apps` collection — product landings** — Things-style marketing pages
+  driven entirely by frontmatter (`template: 'landing'`): hero with app icon,
+  App Store / Google Play buttons (`"#"` renders disabled with a
+  "coming soon" label) and a Product Hunt badge; alternating feature rows
+  with optional device-frame screenshots and auto-rotating carousels; a
+  video "themes" showcase with tab switching; a highlights grid; pricing
+  tiers with a featured ribbon; a closing CTA; and legal links. Entries may
+  nest — `apps/<lang>/<slug>/privacy.mdx` renders at
+  `/apps/<slug>/privacy/` as a plain prose page (`template: 'page'`) — via
+  one catch-all route. Landing media (icons, screenshots, videos, frame art)
+  are `public/` paths. `nav: true` puts a landing in the header nav. The
+  section is on by default; an empty collection builds zero pages.
+- **Data-driven "cards" home** — a site that isn't a catalog can declare
+  `home: { template: 'cards', hero, cards, cta }` in `src/data/site.ts` and
+  get a hero + wide-card grid + CTA homepage instead of the stack catalog.
+  Localized strings use per-locale records (`{ ko: '…', en: '…' }`) with
+  default-locale fallback, like category labels. On a cards home the
+  header's catalog-anchored Browse link hides itself; the catalog routes
+  still build (empty without stacks).
+
 ## [1.15.0] - 2026-07-22
 
 ### Added
@@ -162,6 +186,7 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.16.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.15.0...v1.16.0
 [1.15.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.14.0...v1.15.0
 [1.14.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.13.0...v1.14.0
 [1.13.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.12.0...v1.13.0

package/README.md

@@ -125,6 +125,38 @@ teaser: A public one-liner for the login gate.
 
 Routes mirror concepts: `/course/`, `/course/<slug>/`, `/course/category/<id>/`.
 
+## Apps (product landings)
+
+The `apps` collection renders Things-style marketing pages from frontmatter
+alone (`template: 'landing'`): hero with store buttons and an optional Product
+Hunt badge, alternating feature rows (device-frame screenshots, auto-rotating
+carousels), a video themes showcase, a highlights grid, pricing tiers, a
+closing CTA and legal links. Landing media are `public/` paths. Entries nest:
+`apps/<lang>/flowstate.mdx` → `/apps/flowstate/`, and
+`apps/<lang>/flowstate/privacy.mdx` → `/apps/flowstate/privacy/` (a plain
+prose page). `nav: true` adds a header link. See
+`playground/src/content/apps/` for a complete example.
+
+## Homepage
+
+The default home is the stack catalog. A site that isn't a catalog can swap in
+a data-driven home from `src/data/site.ts`:
+
+```ts
+home: {
+  template: 'cards',
+  hero: { icon: '/img/logo.png', subtitle: { ko: '…', en: '…' } },
+  cardsTitle: { ko: '앱', en: 'Apps' },
+  cards: [{ href: '/apps/flowstate/', name: 'FlowState', icon: '/img/icon.png',
+            rounded: true, description: { ko: '…', en: '…' }, tags: ['iOS'] }],
+  cta: { title: { … }, description: { … }, button: { label: { … }, href: '/course/' } },
+},
+```
+
+Localized values are either one string or a per-locale record with
+default-locale fallback. On a cards home the header's Browse link (which
+anchors into the catalog) hides itself.
+
 ## Body components
 
 Reusable MDX-body components, importable from any collection's content:

package/index.d.ts

@@ -7,6 +7,7 @@ export type SectionKey =
   | 'concepts'
   | 'articles'
   | 'courses'
+  | 'apps'
   | 'samples'
   | 'slides'
   | 'glossary'

package/index.mjs

@@ -29,6 +29,9 @@ const PAGES = [
   // Standalone top-level pages (the `pages` collection), e.g. an About/소개
   // page. A single dynamic route per locale renders every entry at `/<slug>/`.
   '[page].astro',
+  // App/product pages (the `apps` collection): marketing landings and their
+  // nested subpages (privacy/terms) via one catch-all.
+  'apps/[...id].astro',
   // Per-locale RSS feed of the articles collection (an endpoint, not a page).
   'rss.xml.ts',
   'article/index.astro',
@@ -67,6 +70,7 @@ function sectionOf(file) {
   if (file.startsWith('concept/')) return 'concepts';
   if (file.startsWith('article/')) return 'articles';
   if (file.startsWith('course/')) return 'courses';
+  if (file.startsWith('apps/')) return 'apps';
   if (file.startsWith('sample/')) return 'samples';
   if (file.startsWith('slides/')) return 'slides';
   if (file === 'glossary.astro') return 'glossary';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/components/AppLanding.astro

@@ -0,0 +1,445 @@
+---
+// Things-style app/product landing, rendered entirely from an `apps` entry's
+// frontmatter (`template: 'landing'`): hero (icon / store buttons / Product
+// Hunt badge), alternating feature rows (with optional device frame and
+// auto-rotating screenshot carousels), a video "themes" showcase, a highlights
+// grid, pricing tiers, a closing CTA and legal links. Sections render only
+// when their data is present, so a minimal landing is just hero + features.
+//
+// All media (icons, screenshots, videos, the frame art) are `public/` paths;
+// `description`-like strings may carry authored <br> tags (rendered as HTML).
+import { site } from '@aas-data/site';
+import type { AppEntry } from '../lib/apps';
+import type { Lang } from '../i18n/ui';
+
+interface Props {
+  entry: AppEntry;
+  lang: Lang;
+}
+
+const { entry } = Astro.props;
+const d = entry.data;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const withBase = (p?: string) => (p && p.startsWith('/') ? base + p : p);
+const frame = withBase(d.phoneFrameImage);
+// Optional site contact for the legal "support" link (read defensively — not
+// every site declares an email).
+const email = (site as { email?: string }).email;
+
+const storeButtons = d.stores
+  ? [
+      { href: d.stores.appstore, brand: 'App Store', label: d.stores.appstoreLabel },
+      { href: d.stores.playstore, brand: 'Google Play', label: d.stores.playstoreLabel },
+    ].filter((b) => b.href)
+  : [];
+
+// Alternation matches the Hugo original: odd rows get the tinted background,
+// even rows put the visual on the left.
+const altBg = (i: number) => i % 2 === 1;
+---
+
+<div class="aas-landing">
+  {/* ---- hero ---- */}
+  <section
+    class:list={[
+      'aas-bleed py-16 text-center',
+      d.heroBg && `aas-hero-bg-${d.heroBg}`,
+    ]}
+  >
+    <div class="mx-auto max-w-[75rem] px-5">
+      {d.icon && <img src={withBase(d.icon)} alt="" class="mx-auto h-24 w-24 rounded-[22%] shadow-lg" />}
+      <h1 class="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">{d.title}</h1>
+      {d.subtitle && <p class="mt-3 text-xl text-[var(--aas-muted)]" set:html={d.subtitle} />}
+      {
+        storeButtons.length > 0 && (
+          <div class="mt-7 flex flex-wrap items-start justify-center gap-3">
+            {storeButtons.map((b) => (
+              <span class="inline-flex flex-col items-center gap-1.5">
+                <a
+                  href={b.href === '#' ? undefined : b.href}
+                  {...(b.href !== '#' ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                  class:list={[
+                    'rounded-full bg-[var(--aas-accent)] px-6 py-2.5 font-semibold text-white no-underline',
+                    b.href === '#' && 'pointer-events-none opacity-40',
+                  ]}
+                >
+                  {b.brand}
+                </a>
+                {b.label && <span class="text-xs text-[var(--aas-muted)]">{b.label}</span>}
+              </span>
+            ))}
+          </div>
+        )
+      }
+      {d.tagline && <p class="mt-5 text-sm text-[var(--aas-muted)]" set:html={d.tagline} />}
+      {
+        d.productHunt && (
+          <p class="mt-6">
+            <a href={d.productHunt.url} target="_blank" rel="noopener noreferrer" class="inline-block">
+              <img src={d.productHunt.image} alt={d.productHunt.alt} width="250" height="54" loading="lazy" />
+            </a>
+          </p>
+        )
+      }
+    </div>
+  </section>
+
+  {/* ---- alternating feature rows ---- */}
+  {
+    d.features.map((f, i) => {
+      const imgs = f.images.length > 0 ? f.images : f.image ? [f.image] : [];
+      const isSvg = imgs.length === 1 && /\.svg$/i.test(imgs[0]);
+      return (
+        <section class:list={['aas-bleed py-16', altBg(i) && 'bg-[var(--aas-panel)]']}>
+          <div
+            class:list={[
+              'mx-auto grid max-w-[75rem] items-center gap-10 px-5 md:grid-cols-2',
+            ]}
+          >
+            <div class:list={[!altBg(i) && 'md:order-2']}>
+              {f.label && (
+                <p class="text-sm font-semibold tracking-wide text-[var(--aas-accent)] uppercase">{f.label}</p>
+              )}
+              <h2 class="mt-2 text-3xl font-bold tracking-tight">{f.title}</h2>
+              <p class="mt-4 leading-relaxed text-[var(--aas-muted)]" set:html={f.description} />
+            </div>
+            <div class:list={['flex justify-center', !altBg(i) && 'md:order-1']}>
+              {imgs.length > 1 ? (
+                <div class="aas-carousel w-full max-w-xs" data-carousel>
+                  <div class="aas-carousel-track" data-track>
+                    {imgs.map((src) => (
+                      <div class="aas-carousel-slide">
+                        {f.phoneFrame && frame ? (
+                          <span class="aas-phone">
+                            <img class="aas-phone-frame" src={frame} alt="" loading="lazy" />
+                            <img class="aas-phone-screen" src={withBase(src)} alt={f.title} loading="lazy" />
+                          </span>
+                        ) : (
+                          <img src={withBase(src)} alt={f.title} class="w-full rounded-2xl" loading="lazy" />
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                  <div class="mt-3 flex justify-center gap-1.5" data-dots />
+                </div>
+              ) : imgs.length === 1 ? (
+                isSvg ? (
+                  <img src={withBase(imgs[0])} alt={f.title} class="aas-feature-icon" loading="lazy" />
+                ) : f.phoneFrame && frame ? (
+                  <span class="aas-phone max-w-xs">
+                    <img class="aas-phone-frame" src={frame} alt="" loading="lazy" />
+                    <img class="aas-phone-screen" src={withBase(imgs[0])} alt={f.title} loading="lazy" />
+                  </span>
+                ) : (
+                  <img src={withBase(imgs[0])} alt={f.title} class="max-w-full rounded-2xl" loading="lazy" />
+                )
+              ) : null}
+            </div>
+          </div>
+        </section>
+      );
+    })
+  }
+
+  {/* ---- themes showcase (video tabs) ---- */}
+  {
+    d.themes.length > 0 && (
+      <section class:list={['aas-bleed py-16 text-center', altBg(d.features.length) && 'bg-[var(--aas-panel)]']}>
+        <div class="mx-auto max-w-[75rem] px-5" data-themes>
+          {d.themesTitle && <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{d.themesTitle}</h2>}
+          {d.themesSubtitle && <p class="mt-2 mb-10 text-[var(--aas-muted)]">{d.themesSubtitle}</p>}
+          <div class="mb-8 flex justify-center gap-2">
+            {d.themes.map((t, i) => (
+              <button
+                type="button"
+                class="aas-theme-tab rounded-full border border-[var(--aas-border)] px-4 py-2 text-lg"
+                data-theme={String(i)}
+                aria-pressed={i === 0 ? 'true' : 'false'}
+                title={t.name}
+              >
+                {t.icon ?? String(i + 1)}
+              </button>
+            ))}
+          </div>
+          <div class="grid items-center gap-10 md:grid-cols-2">
+            <div class="flex justify-center">
+              <span class="aas-phone max-w-xs">
+                {frame && <img class="aas-phone-frame" src={frame} alt="" loading="lazy" />}
+                {d.themes.map((t, i) => (
+                  <video
+                    class:list={['aas-phone-screen aas-theme-video', i !== 0 && 'hidden']}
+                    data-theme={String(i)}
+                    autoplay={i === 0}
+                    muted
+                    playsinline
+                    poster={withBase(t.poster)}
+                  >
+                    <source src={withBase(t.video)} type="video/mp4" />
+                  </video>
+                ))}
+              </span>
+            </div>
+            <div class="text-left">
+              {d.themes.map((t, i) => (
+                <div class:list={['aas-theme-detail', i !== 0 && 'hidden']} data-theme={String(i)}>
+                  <h3 class="text-2xl font-bold">{t.name}</h3>
+                  {t.tabDesc && <p class="mt-1 text-sm text-[var(--aas-accent)]">{t.tabDesc}</p>}
+                  <p class="mt-4 leading-relaxed text-[var(--aas-muted)]" set:html={t.description} />
+                </div>
+              ))}
+            </div>
+          </div>
+          {d.themesLandscape && (
+            <div class="mt-14">
+              <h3 class="text-xl font-bold">{d.themesLandscape.title}</h3>
+              <p class="mt-1 mb-6 text-[var(--aas-muted)]">{d.themesLandscape.description}</p>
+              <img
+                src={withBase(d.themesLandscape.image)}
+                alt={d.themesLandscape.title}
+                class="mx-auto max-w-full rounded-2xl sm:max-w-2xl"
+                loading="lazy"
+              />
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
+
+  {/* ---- highlights grid ---- */}
+  {
+    d.highlights.length > 0 && (
+      <section class="aas-bleed bg-[var(--aas-panel)] py-16 text-center">
+        <div class="mx-auto max-w-[75rem] px-5">
+          {d.highlightsTitle && <h2 class="mb-10 text-3xl font-bold tracking-tight sm:text-4xl">{d.highlightsTitle}</h2>}
+          <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {d.highlights.map((h) => (
+              <div class="rounded-3xl border border-[var(--aas-border)] bg-[var(--aas-bg)] p-6">
+                {h.icon && <img src={withBase(h.icon)} alt="" class="aas-feature-glyph mx-auto mb-4 h-10 w-10" loading="lazy" />}
+                <h3 class="font-semibold">{h.title}</h3>
+                <p class="mt-2 text-sm leading-relaxed text-[var(--aas-muted)]" set:html={h.description} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  {/* ---- pricing ---- */}
+  {
+    d.pricing.length > 0 && (
+      <section class="aas-bleed py-16 text-center">
+        <div class="mx-auto max-w-[75rem] px-5">
+          {d.pricingTitle && <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{d.pricingTitle}</h2>}
+          {d.pricingSubtitle && <p class="mt-2 text-[var(--aas-muted)]">{d.pricingSubtitle}</p>}
+          {d.pricingNotes.length > 0 && (
+            <p class="mt-2 text-sm text-[var(--aas-muted)] opacity-75">
+              {d.pricingNotes.map((n, i) => (
+                <>
+                  {i > 0 && <br />}
+                  {n}
+                </>
+              ))}
+            </p>
+          )}
+          <div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {d.pricing.map((p) => (
+              <div
+                class:list={[
+                  'relative rounded-3xl border p-6 text-left',
+                  p.featured
+                    ? 'border-[var(--aas-accent)] bg-[var(--aas-panel)] shadow-lg'
+                    : 'border-[var(--aas-border)] bg-[var(--aas-panel)]',
+                ]}
+              >
+                {p.featured && d.pricingBadge && (
+                  <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[var(--aas-accent)] px-3 py-0.5 text-xs font-semibold text-white">
+                    {d.pricingBadge}
+                  </span>
+                )}
+                <h3 class="font-semibold">{p.name}</h3>
+                <p class="mt-2 text-3xl font-bold">
+                  {p.price}
+                  {p.period && <span class="ml-1 text-sm font-normal text-[var(--aas-muted)]">{p.period}</span>}
+                </p>
+                <ul class="mt-4 space-y-2 text-sm text-[var(--aas-muted)]">
+                  {p.items.map((it) => (
+                    <li class="flex gap-2">
+                      <span aria-hidden="true" class="text-[var(--aas-accent)]">✓</span>
+                      {it}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  {/* ---- closing CTA ---- */}
+  {
+    (d.ctaTitle || d.ctaDescription) && (
+      <section class="aas-bleed bg-[var(--aas-panel)] py-16 text-center">
+        <div class="mx-auto max-w-[75rem] px-5">
+          {d.ctaTitle && <h2 class="text-3xl font-bold tracking-tight">{d.ctaTitle}</h2>}
+          {d.ctaDescription && <p class="mt-3 text-[var(--aas-muted)]" set:html={d.ctaDescription} />}
+          {storeButtons.length > 0 && (
+            <div class="mt-7 flex flex-wrap items-start justify-center gap-3">
+              {storeButtons.map((b) => (
+                <span class="inline-flex flex-col items-center gap-1.5">
+                  <a
+                    href={b.href === '#' ? undefined : b.href}
+                    {...(b.href !== '#' ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                    class:list={[
+                      'rounded-full bg-[var(--aas-accent)] px-6 py-2.5 font-semibold text-white no-underline',
+                      b.href === '#' && 'pointer-events-none opacity-40',
+                    ]}
+                  >
+                    {b.brand}
+                  </a>
+                  {b.label && <span class="text-xs text-[var(--aas-muted)]">{b.label}</span>}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    )
+  }
+
+  {/* ---- legal links ---- */}
+  {
+    d.legal && (
+      <section class="py-10 text-center text-sm">
+        <div class="flex flex-wrap justify-center gap-6 text-[var(--aas-muted)]">
+          {d.legal.privacy && <a href="privacy/" class="no-underline hover:text-[var(--aas-text)]">{d.legal.privacy}</a>}
+          {d.legal.terms && <a href="terms/" class="no-underline hover:text-[var(--aas-text)]">{d.legal.terms}</a>}
+          {d.legal.support && email && (
+            <a href={`mailto:${email}`} class="no-underline hover:text-[var(--aas-text)]">{d.legal.support}</a>
+          )}
+        </div>
+      </section>
+    )
+  }
+</div>
+
+<style>
+  /* Full-bleed section: escape BaseLayout's centered container. */
+  .aas-bleed {
+    position: relative;
+    left: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    right: 50%;
+    width: 100vw;
+  }
+  /* Screenshot inside the device-frame art. The frame draws on top; the
+     screen sits inset behind it (tune per frame art via site CSS if needed). */
+  .aas-phone {
+    position: relative;
+    display: inline-block;
+  }
+  .aas-phone-frame {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    pointer-events: none;
+  }
+  .aas-phone :global(.aas-phone-screen) {
+    position: absolute;
+    z-index: 1;
+    inset: 2.5% 5.5%;
+    width: 89%;
+    height: 95%;
+    object-fit: cover;
+    border-radius: 9% / 4.5%;
+  }
+  .aas-feature-icon {
+    width: 10rem;
+    opacity: 0.9;
+  }
+  /* Monochrome icon files follow the text color in dark mode. */
+  :root[data-theme='dark'] .aas-feature-glyph,
+  :root[data-theme='dark'] .aas-feature-icon {
+    filter: invert(1) hue-rotate(180deg);
+  }
+  .aas-carousel {
+    overflow: hidden;
+  }
+  .aas-carousel-track {
+    display: flex;
+    transition: transform 0.45s ease;
+  }
+  .aas-carousel-slide {
+    flex: 0 0 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .aas-theme-tab[aria-pressed='true'] {
+    border-color: var(--aas-accent);
+    background: var(--aas-tint);
+  }
+</style>
+
+<script>
+  // Screenshot carousels: dots + 4s auto-advance.
+  document.querySelectorAll<HTMLElement>('[data-carousel]').forEach((carousel) => {
+    const track = carousel.querySelector<HTMLElement>('[data-track]');
+    const dots = carousel.querySelector<HTMLElement>('[data-dots]');
+    const total = track?.children.length ?? 0;
+    if (!track || !dots || total < 2) return;
+    let current = 0;
+    const buttons: HTMLButtonElement[] = [];
+    const goTo = (idx: number) => {
+      current = idx;
+      track.style.transform = `translateX(-${current * 100}%)`;
+      buttons.forEach((b, j) => b.setAttribute('aria-pressed', String(j === current)));
+    };
+    for (let i = 0; i < total; i++) {
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className =
+        'h-2 w-2 rounded-full border border-[var(--aas-border)] aria-[pressed=true]:bg-[var(--aas-accent)] aria-[pressed=true]:border-[var(--aas-accent)]';
+      b.setAttribute('aria-pressed', String(i === 0));
+      b.setAttribute('aria-label', String(i + 1));
+      b.addEventListener('click', () => goTo(i));
+      dots.appendChild(b);
+      buttons.push(b);
+    }
+    setInterval(() => goTo((current + 1) % total), 4000);
+  });
+
+  // Themes showcase: tab switching; a finished video advances to the next
+  // theme after a beat.
+  document.querySelectorAll<HTMLElement>('[data-themes]').forEach((root) => {
+    const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('.aas-theme-tab'));
+    const videos = Array.from(root.querySelectorAll<HTMLVideoElement>('.aas-theme-video'));
+    const details = Array.from(root.querySelectorAll<HTMLElement>('.aas-theme-detail'));
+    if (tabs.length < 2) return;
+    const switchTo = (idx: number) => {
+      const s = String(idx);
+      tabs.forEach((t) => t.setAttribute('aria-pressed', String(t.dataset.theme === s)));
+      details.forEach((el) => el.classList.toggle('hidden', el.dataset.theme !== s));
+      videos.forEach((v) => {
+        const on = v.dataset.theme === s;
+        v.classList.toggle('hidden', !on);
+        if (on) {
+          v.currentTime = 0;
+          v.play().catch(() => {});
+        } else {
+          v.pause();
+        }
+      });
+    };
+    tabs.forEach((t) => t.addEventListener('click', () => switchTo(Number(t.dataset.theme))));
+    videos.forEach((v) =>
+      v.addEventListener('ended', () => {
+        const cur = Number(v.dataset.theme);
+        setTimeout(() => switchTo((cur + 1) % tabs.length), 2000);
+      }),
+    );
+  });
+</script>

package/src/components/CardsHome.astro

@@ -0,0 +1,108 @@
+---
+// The data-driven "cards" homepage (see src/lib/home.ts): hero with the site
+// icon/name, a stack of wide link cards (apps, sections, external links — the
+// Things-style studio home), and a closing CTA banner. Everything renders
+// from `site.home`; sections without data simply don't render.
+import { site } from '@aas-data/site';
+import { home, loc, locList } from '../lib/home';
+import { useTranslations, type Lang } from '../i18n/ui';
+
+interface Props {
+  lang: Lang;
+}
+
+const { lang } = Astro.props;
+const t = useTranslations(lang);
+const h = home;
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const withBase = (p?: string) => (p && p.startsWith('/') ? base + p : p);
+
+const heroTitle = loc(h?.hero?.title, lang) ?? site.name;
+const heroSubtitle = loc(h?.hero?.subtitle, lang) ?? t('site.tagline');
+const extAttrs = (external?: boolean) =>
+  external ? { target: '_blank', rel: 'noopener noreferrer' } : {};
+---
+
+<section class="py-14 text-center">
+  {h?.hero?.icon && <img src={withBase(h.hero.icon)} alt="" class="mx-auto h-20 w-20 rounded-[22%] shadow-md" />}
+  <h1 class="mt-5 text-4xl font-bold tracking-tight sm:text-5xl">{heroTitle}</h1>
+  <p class="mx-auto mt-4 max-w-2xl text-xl text-[var(--aas-muted)]" set:html={heroSubtitle} />
+</section>
+
+{
+  (h?.cards?.length ?? 0) > 0 && (
+    <section class="aas-bleed bg-[var(--aas-panel)] py-14">
+      <div class="mx-auto max-w-[75rem] px-5">
+        {h?.cardsTitle && <h2 class="mb-6 text-3xl font-bold tracking-tight">{loc(h.cardsTitle, lang)}</h2>}
+        <div class="flex flex-col gap-5">
+          {h?.cards?.map((c) => (
+            <a
+              href={c.href}
+              {...extAttrs(c.external)}
+              class="aas-lift flex items-center gap-6 rounded-3xl border border-[var(--aas-border)] bg-[var(--aas-bg)] p-6 no-underline"
+            >
+              {c.icon && (
+                <img
+                  src={withBase(c.icon)}
+                  alt=""
+                  class:list={['h-20 w-20 shrink-0', c.rounded ? 'rounded-[22%]' : 'rounded-xl']}
+                  loading="lazy"
+                />
+              )}
+              <span class="min-w-0">
+                <span class="block text-xl font-semibold text-[var(--aas-text)]">{loc(c.name, lang)}</span>
+                {c.description && (
+                  <span
+                    class="mt-1 block leading-relaxed text-[var(--aas-muted)]"
+                    set:html={loc(c.description, lang)}
+                  />
+                )}
+                {locList(c.tags, lang).length > 0 && (
+                  <span class="mt-3 flex flex-wrap gap-1.5">
+                    {locList(c.tags, lang).map((tag) => (
+                      <span class="rounded-full border border-[var(--aas-border)] px-2 py-0.5 text-xs text-[var(--aas-muted)]">
+                        {tag}
+                      </span>
+                    ))}
+                  </span>
+                )}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+{
+  h?.cta && (
+    <section class="py-16 text-center">
+      {h.cta.title && <h2 class="text-3xl font-bold tracking-tight">{loc(h.cta.title, lang)}</h2>}
+      {h.cta.description && (
+        <p class="mx-auto mt-3 max-w-2xl text-[var(--aas-muted)]" set:html={loc(h.cta.description, lang)} />
+      )}
+      {h.cta.button && (
+        <a
+          href={h.cta.button.href}
+          {...extAttrs(h.cta.button.external)}
+          class="mt-7 inline-block rounded-full bg-[var(--aas-accent)] px-7 py-3 font-semibold text-white no-underline"
+        >
+          {loc(h.cta.button.label, lang)}
+        </a>
+      )}
+    </section>
+  )
+}
+
+<style>
+  /* Full-bleed section: escape BaseLayout's centered container. */
+  .aas-bleed {
+    position: relative;
+    left: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    right: 50%;
+    width: 100vw;
+  }
+</style>

package/src/content.ts

@@ -306,6 +306,137 @@ export function defineAasCollections({
     }),
   });
 
+  /**
+   * The `apps` collection holds product/app pages — a Things-style marketing
+   * landing per app (`template: 'landing'`) plus its plain subpages (privacy,
+   * terms — `template: 'page'`, the default). Entries are locale-partitioned
+   * and may nest: `apps/<lang>/<slug>.mdx` renders at `/apps/<slug>/`,
+   * `apps/<lang>/<slug>/privacy.mdx` at `/apps/<slug>/privacy/`.
+   *
+   * Landing visuals (icons, screenshots, videos, the phone-frame art) are
+   * plain `public/` paths — videos can't go through the image pipeline, so
+   * the whole landing keeps one convention instead of two.
+   */
+  const apps = defineCollection({
+    loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/apps' }),
+    schema: z.object({
+      title: z.string(),
+      description: z.string().optional(), // meta description
+      // 'landing' renders the structured marketing page below; 'page' renders
+      // the markdown body like a standalone page (legal subpages).
+      template: z.enum(['landing', 'page']).default('page'),
+      // Header-nav placement, like the `pages` collection (default off —
+      // landings are usually reached from the home cards).
+      nav: z.boolean().default(false),
+      navLabel: z.string().optional(),
+      order: z.number().default(0),
+
+      // ---- hero ----
+      subtitle: z.string().optional(),
+      icon: z.string().optional(), // app icon (public/ path)
+      // Free-form key a site can target from its CSS (`.aas-hero-bg-<key>`)
+      // for a custom hero background.
+      heroBg: z.string().optional(),
+      tagline: z.string().optional(), // small print under the store buttons (may contain <br>)
+      productHunt: z
+        .object({ url: z.string().url(), image: z.string().url(), alt: z.string() })
+        .optional(),
+      // Store links; "#" renders the button disabled (not yet released), the
+      // label is small print under a button (e.g. "5월 출시 예정").
+      stores: z
+        .object({
+          appstore: z.string().optional(),
+          appstoreLabel: z.string().optional(),
+          playstore: z.string().optional(),
+          playstoreLabel: z.string().optional(),
+        })
+        .optional(),
+
+      // ---- alternating feature rows ----
+      // Device-frame art that screenshots render inside when `phoneFrame` is
+      // set (one per page; features opt in individually).
+      phoneFrameImage: z.string().optional(),
+      features: z
+        .array(
+          z.object({
+            label: z.string().optional(), // small eyebrow above the title
+            title: z.string(),
+            description: z.string(), // may contain <br>
+            image: z.string().optional(),
+            images: z.array(z.string()).default([]), // 2+ → auto-rotating carousel
+            phoneFrame: z.boolean().default(false),
+          }),
+        )
+        .default([]),
+
+      // ---- highlights grid (icon cards) ----
+      highlightsTitle: z.string().optional(),
+      highlights: z
+        .array(
+          z.object({
+            icon: z.string().optional(), // public/ path
+            title: z.string(),
+            description: z.string(),
+          }),
+        )
+        .default([]),
+
+      // ---- themes showcase (video tabs, auto-rotating) ----
+      themesTitle: z.string().optional(),
+      themesSubtitle: z.string().optional(),
+      themes: z
+        .array(
+          z.object({
+            name: z.string(),
+            description: z.string(),
+            tabDesc: z.string().optional(),
+            video: z.string(), // public/ path (mp4)
+            poster: z.string().optional(),
+            icon: z.string().optional(), // emoji or short text on the tab button
+          }),
+        )
+        .default([]),
+      themesLandscape: z
+        .object({ title: z.string(), description: z.string(), image: z.string() })
+        .optional(),
+
+      // ---- pricing ----
+      pricingTitle: z.string().optional(),
+      pricingSubtitle: z.string().optional(),
+      pricingBadge: z.string().optional(), // ribbon on the featured tier
+      pricingNotes: z.array(z.string()).default([]),
+      pricing: z
+        .array(
+          z.object({
+            name: z.string(),
+            price: z.string(),
+            period: z.string().optional(), // "/월", "일회성", …
+            featured: z.boolean().default(false),
+            items: z.array(z.string()).default([]),
+          }),
+        )
+        .default([]),
+
+      // ---- closing CTA + legal links ----
+      ctaTitle: z.string().optional(),
+      ctaDescription: z.string().optional(),
+      // Localized labels; privacy/terms link to the sibling subpages, support
+      // opens mailto site.email.
+      legal: z
+        .object({
+          privacy: z.string().optional(),
+          terms: z.string().optional(),
+          support: z.string().optional(),
+        })
+        .optional(),
+
+      draft: z.boolean().default(false),
+      // Login-gated page (encrypted body; see docs/private-content-design.md).
+      private: z.boolean().default(false),
+      teaser: z.string().optional(),
+    }),
+  });
+
   /**
    * The `pages` collection holds standalone top-level pages — an About/소개, a
    * contact page, terms, etc. Unlike the other collections there's no index or
@@ -338,5 +469,5 @@ export function defineAasCollections({
       }),
   });
 
-  return { stacks, articles, concepts, courses, slides, pages };
+  return { stacks, articles, concepts, courses, slides, apps, pages };
 }

package/src/layouts/BaseLayout.astro

@@ -7,6 +7,8 @@ import LanguageSwitcher from '../components/LanguageSwitcher.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
 import { getNavPages, pageSlugOf } from '../lib/pages';
+import { getNavApps, appSlugOf } from '../lib/apps';
+import { homeTemplate } from '../lib/home';
 import { sectionEnabled, type SectionKey } from '../lib/sections';
 
 interface Props {
@@ -41,6 +43,8 @@ const isDefaultHome = path === '' && lang === 'en';
 // e.g. an About/소개 page. Rendered as their own nav items alongside the
 // built-in sections; the accessible label comes from the page's own frontmatter.
 const navPages = await getNavPages(lang);
+// App landings that opt into a header link (the `apps` collection's `nav`).
+const navApps = await getNavApps(lang);
 
 // The header sections, as data — rendered twice from one source so the two
 // layouts never drift: an icon-only row (≥sm) and a labelled dropdown menu
@@ -54,12 +58,18 @@ const allNavItems: {
   keepFilters?: boolean;
   section?: SectionKey;
 }[] = [
-  {
-    href: `${home}#categories`,
-    label: t('nav.browse'),
-    keepFilters: true,
-    svg: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
-  },
+  // Browse anchors into the catalog home's category sections — it only makes
+  // sense when the site keeps the catalog home template.
+  ...(homeTemplate === 'catalog'
+    ? [
+        {
+          href: `${home}#categories`,
+          label: t('nav.browse'),
+          keepFilters: true,
+          svg: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
+        },
+      ]
+    : []),
   {
     href: getRelativeLocaleUrl(lang, 'course/'),
     label: t('nav.courses'),
@@ -96,6 +106,12 @@ const allNavItems: {
     section: 'glossary',
     svg: '<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>',
   },
+  ...navApps.map((a) => ({
+    href: getRelativeLocaleUrl(lang, `apps/${appSlugOf(a)}/`),
+    label: a.data.navLabel ?? a.data.title,
+    section: 'apps' as SectionKey,
+    svg: '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
+  })),
   ...navPages.map((p) => ({
     href: getRelativeLocaleUrl(lang, `${pageSlugOf(p)}/`),
     label: p.data.navLabel ?? p.data.title,

package/src/lib/apps.ts

@@ -0,0 +1,24 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import type { Lang } from '../i18n/ui';
+
+export type AppEntry = CollectionEntry<'apps'>;
+
+/** The url slug of an app page — its id minus the `<lang>/` prefix. May be
+ *  nested (`flowstate-ai/privacy`), which the catch-all route renders at the
+ *  matching subpath. */
+export function appSlugOf(entry: AppEntry): string {
+  return entry.id.replace(/^[a-z]{2}\//, '');
+}
+
+/** Published app pages for one locale, in `order` (then title) order. */
+export async function getApps(lang: Lang): Promise<AppEntry[]> {
+  const all = await getCollection('apps');
+  return all
+    .filter((e) => e.id.startsWith(`${lang}/`) && !e.data.draft)
+    .sort((a, b) => a.data.order - b.data.order || a.data.title.localeCompare(b.data.title));
+}
+
+/** The subset of {@link getApps} that opts into a header-nav link. */
+export async function getNavApps(lang: Lang): Promise<AppEntry[]> {
+  return (await getApps(lang)).filter((e) => e.data.nav);
+}

package/src/lib/home.ts

@@ -0,0 +1,61 @@
+import { site } from '@aas-data/site';
+import { defaultLang, type Lang } from '../i18n/ui';
+
+/**
+ * The data-driven "cards" homepage. By default the theme home is the stack
+ * catalog; a site that isn't a catalog (a studio/product site) declares
+ * `home: { template: 'cards', … }` in `src/data/site.ts` and gets a
+ * hero + card grid + CTA home instead. The catalog routes still build (they
+ * are simply empty when the site has no stacks), and the header's Browse
+ * link — which anchors into the catalog home — hides itself.
+ *
+ * Strings are `Localized`: either one string for every locale, or a
+ * per-locale record (`{ ko: '…', en: '…' }`) that falls back to the default
+ * locale, matching how category labels work.
+ */
+export type Localized = string | Record<string, string>;
+
+export interface HomeCard {
+  href: string;
+  external?: boolean;
+  name: Localized;
+  description?: Localized;
+  icon?: string; // public/ path
+  rounded?: boolean; // app-icon style rounding for the icon
+  tags?: string[] | Record<string, string[]>;
+}
+
+export interface HomeConfig {
+  template: 'cards';
+  hero?: {
+    icon?: string; // public/ path, shown above the title
+    title?: Localized; // defaults to site.name
+    subtitle?: Localized; // defaults to the site.tagline UI string
+  };
+  cardsTitle?: Localized;
+  cards?: HomeCard[];
+  cta?: {
+    title?: Localized;
+    description?: Localized;
+    button?: { label: Localized; href: string; external?: boolean };
+  };
+}
+
+export const home: HomeConfig | undefined = (site as { home?: HomeConfig }).home;
+
+/** Which homepage the site gets: the catalog (default) or the cards home. */
+export const homeTemplate: 'catalog' | 'cards' = home?.template === 'cards' ? 'cards' : 'catalog';
+
+/** Resolve a Localized string for `lang` (default locale, then any, as fallback). */
+export function loc(v: Localized | undefined, lang: Lang): string | undefined {
+  if (v == null) return undefined;
+  if (typeof v === 'string') return v;
+  return v[lang] ?? v[defaultLang] ?? Object.values(v)[0];
+}
+
+/** Resolve a per-locale (or shared) string list for `lang`. */
+export function locList(v: string[] | Record<string, string[]> | undefined, lang: Lang): string[] {
+  if (v == null) return [];
+  if (Array.isArray(v)) return v;
+  return v[lang] ?? v[defaultLang] ?? Object.values(v)[0] ?? [];
+}

package/src/lib/sections.ts

@@ -20,6 +20,7 @@ export type SectionKey =
   | 'concepts'
   | 'articles'
   | 'courses'
+  | 'apps'
   | 'samples'
   | 'slides'
   | 'glossary'
@@ -29,6 +30,7 @@ const DEFAULTS: Record<SectionKey, boolean> = {
   concepts: true,
   articles: true,
   courses: false, // opt-in: needs src/data/course-categories.ts on the site
+  apps: true, // no site data needed; an empty collection builds zero pages
   samples: true,
   slides: true,
   glossary: true,

package/src/pages/[...lang]/apps/[...id].astro

@@ -0,0 +1,67 @@
+---
+import { site } from '@aas-data/site';
+import { render } from 'astro:content';
+import type { GetStaticPaths } from 'astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import AppLanding from '../../../components/AppLanding.astro';
+import PrivateGate from '../../../components/PrivateGate.astro';
+import TocRail from '../../../components/TocRail.astro';
+import MermaidLoader from '../../../components/MermaidLoader.astro';
+import { getApps, appSlugOf } from '../../../lib/apps';
+import { allLocales, langParam } from '../../../lib/locales';
+import { inlineMd } from '../../../lib/inline-md';
+
+export const getStaticPaths = (async () => {
+  const paths: Awaited<ReturnType<GetStaticPaths>> = [];
+  for (const lang of allLocales) {
+    for (const entry of await getApps(lang)) {
+      paths.push({ params: { lang: langParam(lang), id: appSlugOf(entry) }, props: { lang, entry } });
+    }
+  }
+  return paths;
+}) satisfies GetStaticPaths;
+
+const { lang, entry } = Astro.props;
+const slug = appSlugOf(entry);
+const priv = entry.data.private;
+const isLanding = entry.data.template === 'landing';
+// Plain 'page' template (privacy/terms subpages) renders the markdown body.
+const { Content, headings } = await render(entry);
+const tocItems = headings.filter((h) => h.depth >= 2 && h.depth <= 3);
+const bodyHasMermaid = (entry.body ?? '').includes('```mermaid');
+---
+
+<BaseLayout
+  title={`${entry.data.title} — ${site.name}`}
+  description={priv ? entry.data.teaser : (entry.data.description ?? entry.data.subtitle)}
+  lang={lang}
+  path={`apps/${slug}/`}
+  noindex={priv}
+>
+  <PrivateGate enabled={priv} lang={lang} title={entry.data.title} teaser={entry.data.teaser}>
+    {
+      isLanding ? (
+        <AppLanding entry={entry} lang={lang} />
+      ) : (
+        <>
+          <header class="pb-6">
+            <h1 class="text-3xl font-bold tracking-tight">{entry.data.title}</h1>
+            {entry.data.description && (
+              <p
+                class="mt-2 aas-md text-lg whitespace-pre-line text-[var(--aas-muted)]"
+                set:html={inlineMd(entry.data.description)}
+              />
+            )}
+          </header>
+          <div class="mt-4 flex items-start gap-8">
+            <article class="prose max-w-none aas-reading min-w-0 flex-1">
+              <Content />
+            </article>
+            <TocRail lang={lang} items={tocItems} />
+          </div>
+          {bodyHasMermaid && <MermaidLoader />}
+        </>
+      )
+    }
+  </PrivateGate>
+</BaseLayout>

package/src/pages/[...lang]/index.astro

@@ -3,6 +3,8 @@ import { site } from '@aas-data/site';
 import type { GetStaticPaths } from 'astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Home from '../../components/Home.astro';
+import CardsHome from '../../components/CardsHome.astro';
+import { homeTemplate } from '../../lib/home';
 import { allLocales, langParam } from '../../lib/locales';
 
 export const getStaticPaths = (() =>
@@ -12,5 +14,5 @@ const { lang } = Astro.props;
 ---
 
 <BaseLayout title={site.name} lang={lang} path="">
-  <Home lang={lang} />
+  {homeTemplate === 'cards' ? <CardsHome lang={lang} /> : <Home lang={lang} />}
 </BaseLayout>