@stackonward/cli 1.5.2 → 1.6.0

package/dist/resources/components/nuxt/site-source/app/assets/css/site-shell.css

@@ -1,40 +1,61 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@theme {
+@theme inline {
+  --spacing-icon-xs: var(--site-icon-xs);
+  --spacing-icon-sm: var(--site-icon-sm);
+  --spacing-icon-md: var(--site-icon-md);
+  --spacing-icon-lg: var(--site-icon-lg);
+  --spacing-icon-xl: var(--site-icon-xl);
+  --spacing-icon-2xl: var(--site-icon-2xl);
+  --spacing-icon-3xl: var(--site-icon-3xl);
   --font-sans:
     "Inter", "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
     "BlinkMacSystemFont", "Segoe UI", sans-serif;
   --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
   --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
-  --color-primary: #a86550;
-  --color-primary-hover: #945541;
-  --color-primary-active: #7f4635;
-  --color-primary-contrast: #fff;
-  --color-secondary: #2f6f68;
+  --color-brand: var(--site-color-brand);
+  --color-primary: var(--site-color-primary);
+  --color-primary-hover: var(--site-color-primary-hover);
+  --color-primary-active: var(--site-color-primary-active);
+  --color-primary-contrast: var(--site-color-primary-contrast);
+  --color-secondary: var(--site-color-accent);
   --color-secondary-hover: #285f59;
   --color-secondary-active: #214f4a;
-  --color-success: #16a34a;
+  --color-success: var(--site-color-success);
   --color-info: #2563eb;
-  --color-warning: #b7791f;
-  --color-error: #ff6b5f;
+  --color-warning: var(--site-color-warning);
+  --color-error: var(--site-color-danger);
   --color-neutral: #111827;
-  --color-bg: #fbfaf7;
-  --color-surface: #fff;
-  --color-surface-muted: #f4f0eb;
-  --color-surface-elevated: #efe7df;
-  --color-text: #111827;
-  --color-muted: #52616b;
-  --color-dimmed: #7a8790;
-  --color-border: #dbe3e8;
-  --color-border-strong: #c4d2da;
-  --radius-ml: 8px;
-  --radius-2ml: 10px;
+  --color-bg: var(--site-color-bg);
+  --color-surface: var(--site-color-surface);
+  --color-surface-muted: var(--site-color-surface-muted);
+  --color-surface-elevated: var(--site-color-surface-elevated);
+  --color-text: var(--site-color-text);
+  --color-muted: var(--site-color-muted);
+  --color-dimmed: var(--site-color-dimmed);
+  --color-border: var(--site-color-border);
+  --color-border-strong: var(--site-color-border-strong);
+  --radius-ml: 10px;
+  --radius-2ml: 20px;
+  --shadow-accordion:
+    0 4px 16px color-mix(in srgb, var(--site-color-border) 40%, transparent),
+    0 11px 24px color-mix(in srgb, var(--site-color-border) 20%, transparent);
+  --color-success-hover: color-mix(in srgb, var(--site-color-success) 80%, black);
+  --color-success-active: color-mix(in srgb, var(--site-color-success) 60%, black);
+  --color-success-contrast: #fff;
   --breakpoint-xs: 480px;
   --breakpoint-3xl: 1760px;
 }
 
 :root {
+  --site-icon-xs: 0.75rem;
+  --site-icon-sm: 1rem;
+  --site-icon-md: 1.25rem;
+  --site-icon-lg: 1.5rem;
+  --site-icon-xl: 2rem;
+  --site-icon-2xl: 2.5rem;
+  --site-icon-3xl: 3rem;
   --site-font-sans:
     "Inter", "SF Pro Display", "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
     "BlinkMacSystemFont", "Segoe UI", sans-serif;
@@ -48,6 +69,7 @@
   --site-color-dimmed: #7a8790;
   --site-color-border: #dbe3e8;
   --site-color-border-strong: #c4d2da;
+  --site-color-brand: var(--site-color-primary);
   --site-color-primary: #a86550;
   --site-color-primary-hover: #945541;
   --site-color-primary-active: #7f4635;
@@ -58,8 +80,8 @@
   --site-color-danger: #ff6b5f;
   --site-color-success: #16a34a;
   --site-radius-sm: 4px;
-  --site-radius-md: 8px;
-  --site-radius-lg: 10px;
+  --site-radius-md: 10px;
+  --site-radius-lg: 20px;
   --site-shadow-soft: 0 18px 44px rgb(17 24 39 / 10%);
   --site-shadow-strong: 0 30px 70px rgb(17 24 39 / 16%);
   --site-shell-header-height: 68px;
@@ -123,21 +145,32 @@ html {
 body {
   margin: 0;
   background:
-    linear-gradient(180deg, rgb(168 101 80 / 4.5%), transparent 360px),
-    linear-gradient(180deg, rgb(168 101 80 / 2.5%), transparent 520px), var(--site-color-bg);
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4.5%, transparent),
+      transparent 360px
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 2.5%, transparent),
+      transparent 520px
+    ),
+    var(--site-color-bg);
   overflow-x: clip;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
+@layer base {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
 
-button,
-input,
-textarea,
-select {
-  font: inherit;
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
 }
 
 button,
@@ -146,9 +179,11 @@ summary {
   -webkit-tap-highlight-color: transparent;
 }
 
-:focus-visible {
-  outline: 2px solid var(--site-color-primary);
-  outline-offset: 3px;
+@layer base {
+  :focus-visible {
+    outline: 2px solid var(--site-color-primary);
+    outline-offset: 3px;
+  }
 }
 
 .site-root {
@@ -205,7 +240,7 @@ summary {
   border-color: var(--site-color-primary);
   background: var(--site-color-primary);
   color: var(--site-color-primary-contrast);
-  box-shadow: 0 10px 24px rgb(168 101 80 / 18%);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--site-color-primary) 18%, transparent);
 }
 
 .base-button--primary:hover {
@@ -213,29 +248,29 @@ summary {
 }
 
 .base-button--secondary {
-  border-color: rgb(168 101 80 / 34%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 34%, transparent);
   background: color-mix(in srgb, var(--site-color-surface) 82%, transparent);
   color: var(--site-color-primary);
 }
 
 .base-button--secondary:hover {
-  border-color: rgb(168 101 80 / 48%);
-  background: rgb(168 101 80 / 6%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 48%, transparent);
+  background: color-mix(in srgb, var(--site-color-primary) 6%, transparent);
   color: var(--site-color-primary-hover);
 }
 
 .icon-button {
   width: 44px;
   height: 44px;
-  border-color: rgb(168 101 80 / 22%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 22%, transparent);
   border-radius: var(--site-radius-md);
   background: color-mix(in srgb, var(--site-color-surface) 78%, transparent);
   color: var(--site-color-primary);
 }
 
 .icon-button:hover {
-  border-color: rgb(168 101 80 / 34%);
-  background: rgb(168 101 80 / 6%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 34%, transparent);
+  background: color-mix(in srgb, var(--site-color-primary) 6%, transparent);
   color: var(--site-color-primary-hover);
 }
 
@@ -252,13 +287,13 @@ summary {
   width: 34px;
   height: 34px;
   place-items: center;
-  border: 1px solid rgb(168 101 80 / 18%);
+  border: 1px solid color-mix(in srgb, var(--site-color-primary) 18%, transparent);
   border-radius: var(--site-radius-md);
   background:
     linear-gradient(135deg, rgb(255 255 255 / 22%), transparent 52%), var(--site-color-primary);
   color: var(--site-color-primary-contrast);
   text-transform: uppercase;
-  box-shadow: 0 10px 22px rgb(168 101 80 / 16%);
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--site-color-primary) 16%, transparent);
 }
 
 .site-brand__text {
@@ -273,8 +308,17 @@ summary {
   display: flex;
   flex-direction: column;
   background:
-    linear-gradient(180deg, rgb(168 101 80 / 4.5%), transparent 340px),
-    linear-gradient(180deg, rgb(168 101 80 / 2.5%), transparent 520px), var(--site-color-bg);
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4.5%, transparent),
+      transparent 340px
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 2.5%, transparent),
+      transparent 520px
+    ),
+    var(--site-color-bg);
 }
 
 .site-shell__main {
@@ -326,8 +370,8 @@ summary {
 
 .site-nav-link:hover,
 .site-nav-menu > summary:hover {
-  border-color: rgb(168 101 80 / 18%);
-  background: rgb(168 101 80 / 7%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 18%, transparent);
+  background: color-mix(in srgb, var(--site-color-primary) 7%, transparent);
   color: var(--site-color-text);
 }
 
@@ -366,7 +410,7 @@ summary {
 }
 
 .site-nav-menu__item:hover {
-  background: rgb(168 101 80 / 7%);
+  background: color-mix(in srgb, var(--site-color-primary) 7%, transparent);
 }
 
 .site-nav-menu__item small {
@@ -837,7 +881,13 @@ summary {
 .application-shell__sidebar {
   min-height: 0;
   border-right: 1px solid var(--site-color-border);
-  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4%, transparent),
+      transparent
+    ),
+    var(--site-color-surface);
   overflow-y: auto;
 }
 
@@ -882,8 +932,8 @@ summary {
 
 .application-sidebar__link:hover,
 .application-sidebar__link.router-link-active {
-  border-color: rgb(168 101 80 / 20%);
-  background: rgb(168 101 80 / 7%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 20%, transparent);
+  background: color-mix(in srgb, var(--site-color-primary) 7%, transparent);
   color: var(--site-color-text);
 }
 
@@ -951,13 +1001,19 @@ summary {
   min-height: 200px;
   border: 1px solid var(--site-color-border);
   border-radius: var(--site-radius-lg);
-  background: linear-gradient(180deg, rgb(168 101 80 / 4%), transparent), var(--site-color-surface);
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--site-color-primary) 4%, transparent),
+      transparent
+    ),
+    var(--site-color-surface);
   padding: 20px;
   box-shadow: 0 1px 0 rgb(17 24 39 / 4%);
 }
 
 .content-card:hover {
-  border-color: rgb(168 101 80 / 32%);
+  border-color: color-mix(in srgb, var(--site-color-primary) 32%, transparent);
   box-shadow: var(--site-shadow-soft);
 }
 
@@ -1118,7 +1174,7 @@ summary {
 
   .mobile-nav__link:hover,
   .mobile-nav__group > summary:hover {
-    background: rgb(168 101 80 / 7%);
+    background: color-mix(in srgb, var(--site-color-primary) 7%, transparent);
   }
 
   .mobile-nav__group > summary {

package/dist/resources/components/nuxt/site-source/app/assets/icons/brand/android.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_72_1104)">
+<path d="M3.33234 4.85879C3.07397 4.85879 2.85444 4.94887 2.67421 5.12925C2.49398 5.30957 2.40381 5.52589 2.40381 5.77826V9.65469C2.40381 9.91294 2.49395 10.1323 2.67421 10.3126C2.85444 10.493 3.07385 10.5829 3.33225 10.5829C3.59072 10.5829 3.80855 10.4929 3.9858 10.3126C4.16319 10.1323 4.25182 9.91294 4.25182 9.65469V5.77826C4.25182 5.52579 4.16161 5.30948 3.98138 5.12925C3.80113 4.94896 3.58468 4.85879 3.33234 4.85879ZM4.61258 11.0339C4.61258 11.3103 4.70876 11.5446 4.90105 11.737C5.09336 11.9291 5.32768 12.0253 5.6042 12.0253H6.2713L6.2804 14.0716C6.2804 14.33 6.37054 14.5493 6.5508 14.7296C6.73102 14.9099 6.94743 15.0001 7.19981 15.0001C7.45834 15.0001 7.67762 14.9099 7.85794 14.7296C8.03826 14.5493 8.12834 14.33 8.12834 14.0716V12.0253H9.37227V14.0716C9.37227 14.33 9.46238 14.5493 9.64261 14.7296C9.82306 14.9099 10.0424 15.0001 10.3009 15.0001C10.5591 15.0001 10.7785 14.9099 10.9587 14.7296C11.1389 14.5493 11.2289 14.33 11.2289 14.0716V12.0253H11.9051C12.1754 12.0253 12.4068 11.9293 12.5991 11.737C12.7915 11.5446 12.8877 11.3103 12.8877 11.0339V5.03005H4.61258V11.0339ZM10.7964 1.37925L11.4363 0.198274C11.4784 0.12016 11.4633 0.0600741 11.3913 0.0180488C11.3131 -0.0180406 11.253 -1.16908e-05 11.2111 0.072167L10.5619 1.26204C9.991 1.00964 9.38721 0.883435 8.75007 0.883435C8.11309 0.883435 7.50908 1.00964 6.93812 1.26204L6.28908 0.0721986C6.24715 1.98811e-05 6.18697 -0.018009 6.10885 0.0180803C6.03671 0.0601056 6.02177 0.120191 6.06383 0.198306L6.70387 1.37925C6.05474 1.70973 5.53806 2.171 5.15332 2.76295C4.76872 3.35494 4.57637 4.00253 4.57637 4.70556H12.915C12.915 4.00253 12.7226 3.35491 12.338 2.76295C11.9532 2.171 11.4397 1.7097 10.7964 1.37925ZM7.0959 3.09644C7.02684 3.16559 6.94425 3.20013 6.84807 3.20013C6.7519 3.20013 6.67081 3.16562 6.60463 3.09644C6.53861 3.02739 6.50549 2.94473 6.50549 2.84858C6.50549 2.75241 6.53861 2.66975 6.60463 2.6006C6.67072 2.53145 6.75193 2.49697 6.84807 2.49697C6.94412 2.49697 7.02675 2.53142 7.0959 2.6006C7.16504 2.66975 7.19959 2.75241 7.19959 2.84858C7.19959 2.94476 7.16504 3.02729 7.0959 3.09644ZM10.8957 3.09644C10.8295 3.16559 10.7483 3.20013 10.6522 3.20013C10.556 3.20013 10.4735 3.16562 10.4044 3.09644C10.3352 3.02739 10.3008 2.94473 10.3008 2.84858C10.3008 2.75241 10.3352 2.66975 10.4044 2.6006C10.4735 2.53145 10.556 2.49697 10.6522 2.49697C10.7483 2.49697 10.8295 2.53142 10.8957 2.6006C10.9616 2.66975 10.9948 2.75241 10.9948 2.84858C10.9948 2.94476 10.9617 3.02729 10.8957 3.09644ZM14.8259 5.12471C14.6457 4.94745 14.4263 4.85879 14.1679 4.85879C13.9156 4.85879 13.6992 4.94745 13.519 5.12471C13.3387 5.30203 13.2485 5.51992 13.2485 5.77826V9.65469C13.2485 9.91294 13.3387 10.1323 13.519 10.3126C13.6992 10.493 13.9156 10.5829 14.1679 10.5829C14.4263 10.5829 14.6457 10.4929 14.8259 10.3126C15.0063 10.1323 15.0964 9.91294 15.0964 9.65469V5.77826C15.0964 5.51989 15.0063 5.302 14.8259 5.12471Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_72_1104">
+<rect width="16" height="15" fill="white" transform="translate(0.75)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/resources/components/nuxt/site-source/app/assets/icons/brand/apple.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.38281 1.30664C10.3672 0.00585929 11.7383 0 11.7383 0C11.7383 0 11.9434 1.22168 10.9619 2.39648C9.91602 3.65332 8.72949 3.44824 8.72949 3.44824C8.72949 3.44824 8.50684 2.46094 9.38281 1.30664ZM8.85547 4.30371C9.3623 4.30371 10.3027 3.60645 11.5273 3.60645C13.6367 3.60645 14.4658 5.10645 14.4658 5.10645C14.4658 5.10645 12.8428 5.93555 12.8428 7.94824C12.8428 10.2188 14.8643 11.001 14.8643 11.001C14.8643 11.001 13.4521 14.9766 11.5449 14.9766C10.6689 14.9766 9.98633 14.3848 9.06348 14.3848C8.12305 14.3848 7.18848 14.9971 6.5791 14.9971C4.83594 14.9971 2.63574 11.2266 2.63574 8.19434C2.63574 5.21191 4.49902 3.64746 6.24512 3.64746C7.38184 3.64746 8.26367 4.30371 8.85547 4.30371Z" fill="currentColor"/>
+</svg>

package/dist/resources/components/nuxt/site-source/app/assets/icons/brand/whatsapp.svg

@@ -0,0 +1,5 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="27" cy="27" r="27" fill="#3AC34C"/>
+<path d="M10 44L12.402 35.2698C10.918 32.7088 10.1386 29.8036 10.1423 26.847C10.1459 17.5572 17.7405 10 27.0711 10C31.5998 10.0021 35.8496 11.7567 39.0457 14.9406C40.6222 16.5026 41.8718 18.3604 42.7222 20.4065C43.5726 22.4525 44.0069 24.6462 43.9999 26.8605C43.9957 36.1495 36.4011 43.7082 27.0711 43.7082H27.064C24.2308 43.7068 21.4467 42.9998 18.9742 41.6575L10 44Z" fill="white"/>
+<path d="M22.3214 19.742C21.9823 18.9158 21.6375 19.0278 21.3807 19.0143C21.1366 19.0021 20.8579 19 20.5786 19C20.2993 19 19.8469 19.1056 19.4634 19.5301C19.08 19.9547 18 20.9807 18 23.0677C18 25.1554 19.4986 27.1717 19.7076 27.4543C19.9166 27.7375 22.657 32.0207 26.8531 33.8572C27.8508 34.2939 28.6297 34.555 29.2376 34.7505C30.2395 35.073 31.1513 35.0281 31.8718 34.9189C32.6753 34.7969 34.3463 33.8929 34.6952 32.9025C35.0435 31.9115 35.0435 31.0624 34.9394 30.8855C34.8346 30.7092 34.5559 30.6029 34.1373 30.3903C33.7194 30.1784 31.6628 29.1524 31.2794 29.0111C30.8959 28.8691 30.6173 28.7985 30.338 29.223C30.0594 29.6476 29.258 30.6029 29.0138 30.8855C28.7697 31.1687 28.5256 31.2044 28.1076 30.9925C27.689 30.7799 26.3416 30.3318 24.7445 28.8877C23.5006 27.7632 22.6612 26.374 22.4171 25.9495C22.1729 25.525 22.391 25.2959 22.6 25.084C22.7886 24.8942 23.0186 24.5888 23.2276 24.342C23.4373 24.0937 23.5069 23.9167 23.6462 23.6342C23.7855 23.3509 23.7159 23.1033 23.6111 22.8907C23.5069 22.6788 22.6704 20.5918 22.3214 19.7428V19.742Z" fill="#3AC34C"/>
+</svg>

package/dist/resources/components/nuxt/site-source/app/components/app/Sidebar.vue

@@ -23,7 +23,7 @@ defineEmits<{
           class="application-sidebar__link"
           @click="$emit('navigate')"
         >
-          <UIcon
+          <UiIcon
             v-if="item.icon?.startsWith('i-')"
             :name="item.icon"
             class="application-sidebar__icon"

package/dist/resources/components/nuxt/site-source/app/components/checkout/Status.vue

@@ -72,7 +72,7 @@ const statusMeta = computed(() => {
 
 <template>
   <section v-if="visible" class="checkout-status" :data-tone="statusMeta.tone" role="status">
-    <UIcon :name="statusMeta.icon" class="checkout-status__icon" />
+    <UiIcon :name="statusMeta.icon" class="checkout-status__icon" />
     <div>
       <UiText as="h3" size="lg" weight="bold">{{ statusMeta.title }}</UiText>
       <UiText as="p" tone="muted">{{ statusMeta.description }}</UiText>
@@ -93,8 +93,8 @@ const statusMeta = computed(() => {
 }
 
 .checkout-status__icon {
-  width: 28px;
-  height: 28px;
+  width: var(--site-icon-xl);
+  height: var(--site-icon-xl);
   margin-top: 2px;
   color: var(--site-color-muted);
 }

package/dist/resources/components/nuxt/site-source/app/components/consent/Banner.vue

@@ -4,6 +4,17 @@ defineOptions({ inheritAttrs: false });
 const site = useSiteShell();
 const consent = useConsent();
 const { t } = useI18n();
+const element = ref<HTMLElement | null>(null);
+const { height } = useElementSize(element, undefined, { box: "border-box" });
+const { setLayer, clearLayer } = useFloatingBottomStack();
+watch(
+  [consent.visible, height],
+  ([visible, height]) => {
+    setLayer("consent", { visible, height, order: 0 });
+  },
+  { immediate: true },
+);
+onBeforeUnmount(() => clearLayer("consent"));
 
 const storageMessage = computed(() => {
   if (consent.state.value.error === "read-failed") {
@@ -26,6 +37,7 @@ const storageMessage = computed(() => {
   <ClientOnly>
     <section
       v-if="consent.visible.value"
+      ref="element"
       v-bind="$attrs"
       class="site-consent"
       role="region"
@@ -33,15 +45,18 @@ const storageMessage = computed(() => {
     >
       <div class="site-consent__header">
         <h2>{{ t("consent.title") }}</h2>
-        <button
+        <UiButton
           v-if="consent.state.value.decision"
-          type="button"
+          color="neutral"
+          variant="ghost"
+          size="xs"
+          square
           class="site-consent__close"
           :aria-label="t('consent.close')"
           @click="consent.closeSettings"
         >
-          <UIcon name="i-lucide-x" aria-hidden="true" />
-        </button>
+          <UiIcon name="i-lucide-x" aria-hidden="true" />
+        </UiButton>
       </div>
       <p class="site-consent__message">{{ t("consent.message") }}</p>
       <NuxtLink class="site-consent__policy" :to="site.consent.policyPath">
@@ -51,12 +66,12 @@ const storageMessage = computed(() => {
         {{ storageMessage }}
       </p>
       <div class="site-consent__actions">
-        <button type="button" class="base-button base-button--secondary" @click="consent.reject">
+        <UiButton color="neutral" variant="outline" size="sm" @click="consent.reject">
           {{ t("consent.decline") }}
-        </button>
-        <button type="button" class="base-button base-button--primary" @click="consent.accept">
+        </UiButton>
+        <UiButton size="sm" @click="consent.accept">
           {{ t("consent.allow") }}
-        </button>
+        </UiButton>
       </div>
     </section>
   </ClientOnly>

package/dist/resources/components/nuxt/site-source/app/components/content/CallToAction.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description: string;
+  buttonLabel: string;
+  to: string;
+  logo?: { src: string; alt: string };
+  decoration?: string;
+}>();
+</script>
+
+<template>
+  <section class="call-to-action relative overflow-hidden px-4 py-15">
+    <UiImage
+      v-if="decoration"
+      :src="decoration"
+      alt=""
+      class="absolute start-0 top-0 h-[166px] w-[223px] rotate-180 max-md:h-[83px] max-md:w-[110px]"
+    />
+    <div class="relative z-10 mx-auto flex max-w-7xl flex-col items-center text-center">
+      <UiImage
+        v-if="logo"
+        :src="logo.src"
+        :alt="logo.alt"
+        :width="164"
+        :height="62"
+        fit="contain"
+        class="mb-10 h-[62px] w-auto max-lg:h-12"
+      />
+      <h2 class="mb-5 max-w-[882px] text-[40px] leading-none font-bold max-md:text-[26px]/[34px]">
+        {{ title }}
+      </h2>
+      <p class="mb-10 max-w-[900px] text-base leading-6 font-medium text-muted max-md:mb-7.5">
+        {{ description }}
+      </p>
+      <slot name="action"
+        ><UiButton :to="to" size="lg">{{ buttonLabel }}</UiButton></slot
+      >
+    </div>
+    <UiImage
+      v-if="decoration"
+      :src="decoration"
+      alt=""
+      class="absolute end-0 bottom-0 h-[166px] w-[223px] max-md:h-[83px] max-md:w-[110px]"
+    />
+  </section>
+</template>
+
+<style scoped>
+.call-to-action {
+  background: linear-gradient(
+    270.88deg,
+    color-mix(in srgb, var(--site-color-primary) 28%, var(--site-color-surface)) 0.75%,
+    color-mix(in srgb, var(--site-color-primary) 12%, var(--site-color-surface)) 28.3%,
+    color-mix(in srgb, var(--site-color-primary) 6%, var(--site-color-surface)) 67.73%,
+    color-mix(in srgb, var(--site-color-primary) 18%, var(--site-color-surface)) 99.99%
+  );
+}
+</style>

package/dist/resources/components/nuxt/site-source/app/components/content/Card.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ListItem } from "~/content/types";
+withDefaults(defineProps<{ item: ListItem; preload?: boolean }>(), { preload: false });
+</script>
+
+<template>
+  <article
+    class="flex h-full flex-col gap-5 overflow-hidden rounded-ml bg-surface/60 px-2.5 pt-3.5 pb-7.5 transition duration-300 hover:-translate-y-1 hover:shadow-lg"
+  >
+    <NuxtLinkLocale v-if="item.image" :to="item.to" tabindex="-1" aria-hidden="true">
+      <UiImage
+        :src="item.image.src"
+        :alt="item.image.alt"
+        :preload="preload"
+        :width="323"
+        :height="198"
+        class="aspect-[323/198] h-60 w-full rounded-lg object-cover max-lg:h-auto"
+      />
+    </NuxtLinkLocale>
+    <div class="flex flex-1 flex-col text-sm">
+      <NuxtLinkLocale :to="item.to"
+        ><h3 class="mb-2.5 line-clamp-2 text-lg font-bold">{{ item.title }}</h3></NuxtLinkLocale
+      >
+      <p v-if="item.description" class="mb-5 line-clamp-3 text-dimmed">{{ item.description }}</p>
+      <p v-if="item.author || item.category" class="mt-auto flex flex-wrap gap-2">
+        <span v-if="item.author">{{ item.author }}</span>
+        <NuxtLinkLocale v-if="item.categoryTo" :to="item.categoryTo" class="text-primary">{{
+          item.category
+        }}</NuxtLinkLocale>
+        <span v-else-if="item.category" class="text-primary">{{ item.category }}</span>
+      </p>
+      <time v-if="item.date" :datetime="item.dateTime" class="mt-2.5">{{ item.date }}</time>
+    </div>
+  </article>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/content/Compatibility.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{ icons: string[]; label: string }>();
+</script>
+
+<template>
+  <div class="flex items-center gap-2.5">
+    <UiIcon v-for="icon in icons" :key="icon" :name="icon" class="size-icon-sm text-dimmed" />
+    <span class="text-[10px] font-medium">{{ label }}</span>
+  </div>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/content/Faq.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+const props = defineProps<{ title: string; items: FaqItem[]; buttonLabel?: string; to?: string }>();
+const emit = defineEmits<{ "button-click": [event: MouseEvent] }>();
+const columns = computed(() =>
+  [0, 1].map((column) =>
+    props.items
+      .map((item, index) => ({
+        ...item,
+        label: item.question,
+        content: item.answer,
+        value: String(index),
+        index,
+      }))
+      .filter((item) => item.index % 2 === column),
+  ),
+);
+</script>
+
+<template>
+  <section class="bg-gradient-to-b from-primary/10 to-surface px-4 py-15">
+    <div class="mx-auto w-full max-w-7xl">
+      <h2 class="mb-10 text-center text-3xl font-bold">{{ title }}</h2>
+      <div
+        class="grid grid-cols-2 items-start gap-7.5 max-xl:gap-4.5 max-md:grid-cols-1 max-md:gap-2.5"
+      >
+        <UAccordion
+          v-for="(columnItems, column) in columns"
+          :key="column"
+          type="multiple"
+          :items="columnItems"
+          trailing-icon="i-lucide-plus"
+          :ui="{
+            root: 'space-y-7.5 max-xl:space-y-4.5 max-md:space-y-2.5',
+            trailingIcon: 'text-primary group-data-[state=open]:rotate-45',
+          }"
+        >
+          <template #body="{ item }"
+            ><slot name="answer" :item="item" :index="item.index">{{ item.answer }}</slot></template
+          >
+        </UAccordion>
+      </div>
+      <UiButton
+        v-if="buttonLabel"
+        :to="to"
+        size="lg"
+        class="mx-auto mt-12.5 flex max-md:mt-7.5"
+        @click="emit('button-click', $event)"
+        >{{ buttonLabel }}</UiButton
+      >
+    </div>
+  </section>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/content/Features.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const props = defineProps<{ title: string; description: string }>();
+useSeoMeta({ title: () => props.title, description: () => props.description });
+</script>
+
+<template>
+  <div class="relative w-full"><slot name="banner" /><slot /></div>
+</template>

package/dist/resources/components/nuxt/site-source/app/components/content/List.vue

@@ -17,14 +17,7 @@ defineProps<{
     </header>
 
     <div class="content-list__grid">
-      <NuxtLinkLocale v-for="item in items" :key="item.to" :to="item.to" class="content-card">
-        <small v-if="item.category">{{ item.category }}</small>
-        <h2>{{ item.title }}</h2>
-        <p v-if="item.description">{{ item.description }}</p>
-        <span v-if="item.date || item.author">
-          {{ [item.author, item.date].filter(Boolean).join(" · ") }}
-        </span>
-      </NuxtLinkLocale>
+      <ContentCard v-for="item in items" :key="item.to" :item="item" />
     </div>
   </section>
 </template>