@stackonward/cli 0.0.1 → 1.0.0

package/dist/resources/templates/nuxt/app/pages/index.vue

@@ -0,0 +1,626 @@
+<script setup lang="ts">
+const proofItems = [
+  { label: "AI-powered creativity", icon: "i-lucide-sparkles" },
+  { label: "10x faster production", icon: "i-lucide-clock-3" },
+  { label: "On-brand consistency", icon: "i-lucide-shield-check" },
+  { label: "Built for scale", icon: "i-lucide-bar-chart-3" },
+];
+
+const galleryPanels = [
+  { label: "Before", className: "hero-gallery__label--before" },
+  { label: "After", className: "hero-gallery__label--after" },
+  { label: "9:16", className: "hero-gallery__label--vertical" },
+  { label: "1:1", className: "hero-gallery__label--square" },
+  { label: "4:5", className: "hero-gallery__label--portrait" },
+  { label: "16:9", className: "hero-gallery__label--wide" },
+];
+
+const ratioOptions = ["1:1", "4:5", "9:16", "16:9", "3:4"];
+
+const brandNames = ["FERME", "MAISON LUNE", "AURORA", "NOMAD", "KOA", "RITUAL"];
+
+const workflowSteps = [
+  {
+    title: "Upload",
+    copy: "Bring in product shots, references, or a product page.",
+  },
+  {
+    title: "Direct",
+    copy: "Set channel, style, ratio, language, and approval criteria.",
+  },
+  {
+    title: "Publish",
+    copy: "Export images, short videos, banners, and creator briefs.",
+  },
+];
+
+useSeo({
+  title: "Product Media Studio",
+  description:
+    "Generate premium product images, lifestyle scenes, and short-form ad videos for growth teams.",
+  canonicalPath: "/",
+});
+</script>
+
+<template>
+  <section class="landing-page">
+    <section class="hero-section" aria-label="Product media studio">
+      <div class="hero-section__grid">
+        <div class="hero-section__content">
+          <p class="hero-section__eyebrow">AI product media studio</p>
+          <h1>
+            Turn product shots into
+            <span>campaign-<wbr />ready</span>
+            media
+          </h1>
+          <p class="hero-section__copy">
+            Create product photos, lifestyle scenes, and short ads faster, on-brand, and ready for
+            every channel.
+          </p>
+          <div class="hero-section__actions">
+            <NuxtLink class="base-button base-button--primary" to="/app"> Start creating </NuxtLink>
+            <NuxtLink
+              class="base-button base-button--secondary hero-section__secondary-action"
+              to="/ui"
+            >
+              View workflow
+              <UIcon name="i-lucide-play" />
+            </NuxtLink>
+          </div>
+          <div class="proof-list" aria-label="Product proof">
+            <div v-for="item in proofItems" :key="item.label" class="proof-list__item">
+              <UIcon :name="item.icon" />
+              <span>{{ item.label }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="hero-section__media" aria-label="Generated media gallery">
+          <div class="hero-gallery">
+            <img
+              class="hero-gallery__image"
+              src="/media/hero-product-gallery.png"
+              alt="Product image and ad video variations arranged as a channel-ready media gallery"
+            />
+            <span
+              v-for="panel in galleryPanels"
+              :key="panel.label"
+              class="hero-gallery__label"
+              :class="panel.className"
+            >
+              {{ panel.label }}
+            </span>
+            <span class="hero-gallery__video hero-gallery__video--vertical">
+              <UIcon name="i-lucide-play" />
+              0:15
+            </span>
+            <span class="hero-gallery__video hero-gallery__video--wide">
+              <UIcon name="i-lucide-play" />
+              0:08
+            </span>
+          </div>
+          <div class="ratio-toolbar" aria-label="Output ratios">
+            <span>Resize for every channel</span>
+            <button v-for="ratio in ratioOptions" :key="ratio" type="button">
+              {{ ratio }}
+            </button>
+            <button type="button" aria-label="Add ratio">
+              <UIcon name="i-lucide-plus" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="brand-strip" aria-label="Trusted by brands">
+      <p>Trusted by ambitious brands</p>
+      <div>
+        <span v-for="brand in brandNames" :key="brand">{{ brand }}</span>
+      </div>
+    </section>
+
+    <section class="content-section workflow-section">
+      <div class="section-header">
+        <p>Production flow</p>
+        <h2>From a single product input to a complete content workflow.</h2>
+      </div>
+      <div class="workflow-grid">
+        <article v-for="(step, index) in workflowSteps" :key="step.title">
+          <span>{{ String(index + 1).padStart(2, "0") }}</span>
+          <h3>{{ step.title }}</h3>
+          <p>{{ step.copy }}</p>
+        </article>
+      </div>
+    </section>
+
+    <NuxtLink class="floating-action" to="/app"> Start creating </NuxtLink>
+  </section>
+</template>
+
+<style scoped>
+.landing-page {
+  display: grid;
+  gap: 0;
+  padding-bottom: 92px;
+  background: var(--site-color-bg);
+}
+
+.hero-section {
+  overflow: hidden;
+  border-bottom: 1px solid rgb(219 227 232 / 58%);
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / 94%), rgb(251 247 241 / 82%)), var(--site-color-bg);
+}
+
+.hero-section__grid {
+  display: grid;
+  width: min(1300px, calc(100% - 64px));
+  min-height: min(700px, calc(100svh - var(--site-shell-header-height)));
+  margin: 0 auto;
+  grid-template-columns: minmax(500px, 0.9fr) minmax(560px, 1.1fr);
+  align-items: center;
+  gap: 56px;
+  padding: 50px 0 44px;
+}
+
+.hero-section__content {
+  display: grid;
+  min-width: 0;
+  align-content: center;
+  gap: 24px;
+}
+
+.hero-section__eyebrow {
+  margin: 0;
+  color: var(--site-color-accent-warm);
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.hero-section h1,
+.hero-section h2,
+.hero-section h3,
+.hero-section p,
+.content-section h2,
+.content-section h3,
+.content-section p {
+  margin: 0;
+}
+
+.hero-section h1 {
+  max-width: 560px;
+  color: var(--site-color-text);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(52px, 5.8vw, 78px);
+  font-weight: 420;
+  letter-spacing: 0;
+  line-height: 0.98;
+}
+
+.hero-section h1 span {
+  display: block;
+  color: var(--site-color-accent-warm);
+  font-style: italic;
+  font-weight: 400;
+}
+
+.hero-section__copy {
+  max-width: 460px;
+  color: var(--site-color-muted);
+  font-size: 17px;
+  line-height: 1.65;
+}
+
+.hero-section__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.hero-section__secondary-action {
+  border-color: rgb(168 101 80 / 42%);
+  color: var(--site-color-accent-warm);
+}
+
+.hero-section__secondary-action svg {
+  width: 16px;
+  height: 16px;
+}
+
+.proof-list {
+  display: grid;
+  max-width: 560px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0;
+  padding-top: 24px;
+}
+
+.proof-list__item {
+  display: grid;
+  min-height: 78px;
+  align-content: start;
+  gap: 12px;
+  border-left: 1px solid var(--site-color-border);
+  padding: 0 18px;
+  color: var(--site-color-text);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.proof-list__item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.proof-list__item svg {
+  width: 22px;
+  height: 22px;
+  color: var(--site-color-accent);
+}
+
+.hero-section__media {
+  display: grid;
+  min-width: 0;
+  gap: 18px;
+}
+
+.hero-gallery {
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--site-color-surface-muted);
+  box-shadow: 0 22px 60px rgb(17 24 39 / 8%);
+}
+
+.hero-gallery__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.6;
+  object-fit: cover;
+  object-position: center;
+}
+
+.hero-gallery__label,
+.hero-gallery__video {
+  position: absolute;
+  z-index: 1;
+  display: inline-flex;
+  min-height: 30px;
+  align-items: center;
+  gap: 6px;
+  border-radius: var(--site-radius-sm);
+  background: rgb(255 255 255 / 86%);
+  color: var(--site-color-text);
+  padding: 0 10px;
+  box-shadow: 0 8px 22px rgb(17 24 39 / 8%);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.hero-gallery__label {
+  background: rgb(255 255 255 / 88%);
+}
+
+.hero-gallery__video {
+  background: rgb(17 24 39 / 52%);
+  color: #fff;
+  backdrop-filter: blur(10px);
+}
+
+.hero-gallery__video svg {
+  width: 16px;
+  height: 16px;
+}
+
+.hero-gallery__label--before {
+  top: 4%;
+  left: 2%;
+}
+
+.hero-gallery__label--after {
+  top: 4%;
+  left: 53%;
+}
+
+.hero-gallery__label--vertical {
+  top: 4%;
+  right: 14%;
+}
+
+.hero-gallery__label--square {
+  top: 44%;
+  left: 2%;
+}
+
+.hero-gallery__label--portrait {
+  top: 44%;
+  left: 44%;
+}
+
+.hero-gallery__label--wide {
+  top: 55%;
+  right: 16%;
+}
+
+.hero-gallery__video--vertical {
+  top: 36%;
+  right: 13%;
+}
+
+.hero-gallery__video--wide {
+  right: 15%;
+  bottom: 8%;
+}
+
+.ratio-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  color: var(--site-color-muted);
+  font-size: 14px;
+}
+
+.ratio-toolbar span {
+  margin-right: auto;
+  color: var(--site-color-text);
+}
+
+.ratio-toolbar button {
+  display: inline-flex;
+  min-width: 54px;
+  min-height: 34px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(168 101 80 / 28%);
+  border-radius: var(--site-radius-sm);
+  background: rgb(255 255 255 / 82%);
+  color: var(--site-color-primary);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.ratio-toolbar button:hover {
+  border-color: rgb(168 101 80 / 44%);
+  background: rgb(168 101 80 / 6%);
+  color: var(--site-color-primary-hover);
+}
+
+.ratio-toolbar button:last-child {
+  min-width: 34px;
+  border-radius: 50%;
+}
+
+.brand-strip {
+  display: grid;
+  gap: 22px;
+  border-bottom: 1px solid rgb(219 227 232 / 58%);
+  background:
+    linear-gradient(180deg, rgb(244 235 224 / 72%), rgb(255 255 255 / 84%)),
+    var(--site-color-surface-muted);
+  padding: 30px 24px 34px;
+  text-align: center;
+}
+
+.brand-strip p {
+  margin: 0;
+  color: var(--site-color-accent);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.brand-strip div {
+  display: grid;
+  width: min(980px, 100%);
+  margin: 0 auto;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 28px;
+  align-items: center;
+}
+
+.brand-strip span {
+  color: var(--site-color-text);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(18px, 2.2vw, 28px);
+  line-height: 1;
+}
+
+.content-section {
+  display: grid;
+  width: min(1180px, calc(100% - 40px));
+  margin: 0 auto;
+  gap: 28px;
+  padding-top: 72px;
+}
+
+.section-header {
+  display: grid;
+  max-width: 760px;
+  gap: 10px;
+}
+
+.section-header p {
+  color: var(--site-color-accent-warm);
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.content-section h2 {
+  color: var(--site-color-text);
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(34px, 5vw, 56px);
+  font-weight: 420;
+  line-height: 1.05;
+}
+
+.workflow-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.workflow-grid article {
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  border-top: 1px solid var(--site-color-border);
+  padding: 22px 0 0;
+}
+
+.workflow-grid article > span {
+  color: var(--site-color-accent);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.workflow-grid h3 {
+  color: var(--site-color-text);
+  font-size: 20px;
+}
+
+.workflow-grid p {
+  color: var(--site-color-muted);
+  line-height: 1.6;
+}
+
+.floating-action {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  left: 16px;
+  z-index: 42;
+  display: none;
+  min-height: 52px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--site-color-primary);
+  border-radius: var(--site-radius-md);
+  background: var(--site-color-primary);
+  color: var(--site-color-primary-contrast);
+  font-weight: 700;
+  box-shadow: 0 18px 44px rgb(168 101 80 / 22%);
+}
+
+@media (width <= 1100px) {
+  .hero-section__grid {
+    width: min(100% - 40px, 920px);
+    grid-template-columns: 1fr;
+    gap: 42px;
+  }
+
+  .hero-gallery {
+    max-width: 760px;
+  }
+
+  .proof-list {
+    max-width: none;
+  }
+}
+
+@media (width <= 760px) {
+  .hero-section__grid {
+    width: min(100% - 32px, 920px);
+    padding: 42px 0 44px;
+  }
+
+  .hero-section h1 {
+    max-width: 100%;
+    overflow-wrap: break-word;
+    font-size: clamp(42px, 11.5vw, 56px);
+  }
+
+  .hero-section h1 span {
+    overflow-wrap: anywhere;
+  }
+
+  .hero-section__copy {
+    max-width: 100%;
+  }
+
+  .hero-section__actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .hero-section__actions .base-button {
+    width: 100%;
+  }
+
+  .proof-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px 0;
+  }
+
+  .proof-list__item:nth-child(odd) {
+    border-left: 0;
+    padding-left: 0;
+  }
+
+  .hero-gallery__image {
+    aspect-ratio: 0.9;
+    object-position: center;
+  }
+
+  .hero-gallery__label--wide,
+  .hero-gallery__video--wide {
+    display: none;
+  }
+
+  .hero-gallery__label--vertical {
+    right: 8%;
+  }
+
+  .hero-gallery__video--vertical {
+    right: 8%;
+  }
+
+  .ratio-toolbar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .ratio-toolbar span {
+    width: 100%;
+    margin-right: 0;
+  }
+
+  .brand-strip div {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .workflow-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .floating-action {
+    display: flex;
+  }
+}
+
+@media (width <= 460px) {
+  .proof-list {
+    grid-template-columns: 1fr;
+  }
+
+  .proof-list__item {
+    min-height: auto;
+    border-left: 0;
+    border-top: 1px solid var(--site-color-border);
+    padding: 16px 0 0;
+  }
+
+  .proof-list__item:first-child {
+    border-top: 0;
+    padding-top: 0;
+  }
+
+  .brand-strip div {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+</style>

package/dist/resources/templates/nuxt/app/pages/legal/privacy.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+useSeo({
+  title: "Privacy",
+  description: "Static privacy page shell.",
+  canonicalPath: "/legal/privacy",
+});
+</script>
+
+<template>
+  <StaticPage title="Privacy" description="Replace this sample with approved privacy text.">
+    <p>
+      This generated page provides structure only. Consumer projects must supply reviewed privacy
+      disclosures for their data collection, processors, and retention policy.
+    </p>
+    <h2>Data Handling</h2>
+    <p>
+      Add concrete categories of data, processing purposes, retention periods, user rights, contact
+      channels, and regional disclosures.
+    </p>
+  </StaticPage>
+</template>

package/dist/resources/templates/nuxt/app/pages/legal/terms.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+useSeo({
+  title: "Terms",
+  description: "Static terms page shell.",
+  canonicalPath: "/legal/terms",
+});
+</script>
+
+<template>
+  <StaticPage title="Terms" description="Replace this sample with approved legal text.">
+    <p>
+      This generated page provides structure only. Consumer projects must supply reviewed terms that
+      match their product, jurisdiction, and operating model.
+    </p>
+    <h2>Service Terms</h2>
+    <p>
+      Add the binding contract for account use, acceptable use, billing if applicable, termination,
+      and support channels.
+    </p>
+  </StaticPage>
+</template>