create-velocity-astro 1.4.2 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-velocity-astro",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "Create Velocity - A CLI to scaffold production-ready Astro 6 + Tailwind v4 projects",
   "type": "module",
   "license": "MIT",

package/templates/i18n/src/components/hero/Hero.astro

@@ -1,248 +1,154 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import { cn } from '@/lib/cn';
-
-interface Props extends HTMLAttributes<'section'> {
-  /** Text alignment */
-  align?: 'center' | 'left' | 'right';
-  /** Layout mode */
-  layout?: 'single' | 'split';
-  /** Split column ratio (only applies when layout="split") */
-  splitRatio?: '1:1' | '1:2' | '2:1';
-  /** Background style */
-  background?: 'default' | 'secondary' | 'invert' | 'gradient' | 'image';
-  /** Background image URL (only applies when background="image") */
-  backgroundImage?: string;
-  /** Vertical padding size */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Show background grid pattern */
-  showGrid?: boolean;
-  /** Show decorative gradient blob */
-  showBlob?: boolean;
-  /** Blob position (only applies when showBlob is true) */
-  blobPosition?: 'left' | 'right' | 'center';
-  /** Convenience prop for badge text */
-  badge?: string;
-  /** Show pulsing dot on badge */
-  badgeIcon?: boolean;
-  /** Convenience prop for title text */
-  title?: string;
-  /** Text within title to highlight with brand color */
-  titleHighlight?: string;
-  /** Convenience prop for description text */
-  description?: string;
-  /** Heading element for title */
-  titleElement?: 'h1' | 'h2';
-}
-
-const {
-  align = 'left',
-  layout = 'single',
-  splitRatio = '1:1',
-  background = 'default',
-  backgroundImage,
-  size = 'lg',
-  showGrid = false,
-  showBlob = false,
-  blobPosition = 'right',
-  badge,
-  badgeIcon = false,
-  title,
-  titleHighlight,
-  description,
-  titleElement = 'h1',
-  class: className,
-  ...attrs
-} = Astro.props;
-
-// Check which slots are provided
-const hasBadgeSlot = Astro.slots.has('badge');
-const hasTitleSlot = Astro.slots.has('title');
-const hasDescriptionSlot = Astro.slots.has('description');
-const hasActionsSlot = Astro.slots.has('actions');
-const hasAsideSlot = Astro.slots.has('aside');
-const hasSocialProofSlot = Astro.slots.has('social-proof');
-
-// Background variants
-const backgrounds: Record<NonNullable<Props['background']>, string> = {
-  default: 'bg-background',
-  secondary: 'bg-background-secondary',
-  invert: 'bg-surface-invert text-on-invert',
-  gradient: 'bg-gradient-to-br from-background via-background to-background-secondary',
-  image: 'bg-cover bg-center bg-no-repeat',
-};
-
-// Size (padding) variants
-const sizes: Record<NonNullable<Props['size']>, string> = {
-  sm: 'pt-20 pb-12 md:pt-24 md:pb-16',
-  md: 'pt-24 pb-16 md:pt-32 md:pb-24',
-  lg: 'pt-32 pb-20 md:pt-40 md:pb-32',
-  xl: 'pt-40 pb-28 md:pt-48 md:pb-40',
-};
-
-// Alignment variants
-const alignments: Record<NonNullable<Props['align']>, string> = {
-  left: 'text-left items-start',
-  center: 'text-center items-center',
-  right: 'text-right items-end',
-};
-
-// Split ratio grid classes
-const splitRatios: Record<NonNullable<Props['splitRatio']>, string> = {
-  '1:1': 'lg:grid-cols-2',
-  '1:2': 'lg:grid-cols-[1fr_2fr]',
-  '2:1': 'lg:grid-cols-[2fr_1fr]',
-};
-
-// Blob position variants
-const blobPositions: Record<NonNullable<Props['blobPosition']>, string> = {
-  left: '-left-20 -top-20',
-  right: '-right-20 -top-20',
-  center: 'left-1/2 -translate-x-1/2 -top-20',
-};
-
-// Title element
-const TitleElement = titleElement;
-
-// Compute classes
-const sectionClasses = cn(
-  'relative overflow-hidden',
-  sizes[size],
-  backgrounds[background],
-  className
-);
-
-const contentClasses = cn(
-  'z-10 flex flex-col',
-  alignments[align]
-);
-
-const gridClasses = cn(
-  'mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-6',
-  layout === 'split' && splitRatios[splitRatio],
-  layout === 'split' && 'lg:gap-20'
-);
-
-// Title text processing
-function processTitle(text: string, highlight?: string): string {
-  if (!highlight) return text;
-  return text.replace(highlight, `<span class="text-brand-500">${highlight}</span>`);
-}
----
-
-<section class={sectionClasses} style={background === 'image' && backgroundImage ? `background-image: url('${backgroundImage}')` : undefined} {...attrs}>
-  {/* Background grid pattern */}
-  {showGrid && (
-    <div
-      class="bg-grid-pattern pointer-events-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)] opacity-40"
-      aria-hidden="true"
-    />
-  )}
-
-  {/* Background overlay for image background */}
-  {background === 'image' && (
-    <div class="absolute inset-0 bg-background/80" aria-hidden="true" />
-  )}
-
-  <div class={gridClasses}>
-    {/* Content Column */}
-    <div class={contentClasses}>
-      {/* Badge */}
-      {(hasBadgeSlot || badge) && (
-        <div class="border-border bg-background mb-6 inline-flex items-center rounded-full border px-3 py-1 shadow-sm">
-          {badgeIcon && (
-            <span class="bg-brand-500 mr-2 flex h-2 w-2 animate-pulse rounded-full" aria-hidden="true" />
-          )}
-          {hasBadgeSlot ? (
-            <slot name="badge" />
-          ) : (
-            <span class={cn(
-              'text-xs font-medium',
-              background === 'invert' ? 'text-foreground' : 'text-foreground-secondary'
-            )}>{badge}</span>
-          )}
-        </div>
-      )}
-
-      {/* Title */}
-      {(hasTitleSlot || title) && (
-        <TitleElement class={cn(
-          'font-display mb-6 text-5xl leading-[1.1] font-bold tracking-tight text-balance md:text-6xl lg:text-7xl',
-          background === 'invert' ? 'text-on-invert' : 'text-foreground'
-        )}>
-          {hasTitleSlot ? (
-            <slot name="title" />
-          ) : (
-            <Fragment set:html={processTitle(title!, titleHighlight)} />
-          )}
-        </TitleElement>
-      )}
-
-      {/* Description */}
-      {(hasDescriptionSlot || description) && (
-        <p class={cn(
-          'mb-8 max-w-xl text-lg leading-relaxed',
-          background === 'invert' ? 'text-on-invert/70' : 'text-foreground-muted',
-          align === 'center' && 'mx-auto'
-        )}>
-          {hasDescriptionSlot ? (
-            <slot name="description" />
-          ) : (
-            description
-          )}
-        </p>
-      )}
-
-      {/* Actions */}
-      {hasActionsSlot && (
-        <div class={cn(
-          'flex w-full flex-col gap-4 sm:w-auto sm:flex-row',
-          align === 'center' && 'justify-center'
-        )}>
-          <slot name="actions" />
-        </div>
-      )}
-
-      {/* Social Proof */}
-      {hasSocialProofSlot && (
-        <div class={cn(
-          'mt-8 flex items-center gap-4 text-sm',
-          background === 'invert' ? 'text-on-invert/60' : 'text-foreground-subtle'
-        )}>
-          <slot name="social-proof" />
-        </div>
-      )}
-    </div>
-
-    {/* Aside Column (for split layout) */}
-    {layout === 'split' && hasAsideSlot && (
-      <div class="relative z-10 w-full">
-        <slot name="aside" />
-        {/* Decorative blob */}
-        {showBlob && (
-          <div
-            class={cn(
-              'bg-brand-200/20 pointer-events-none absolute h-64 w-64 rounded-full blur-3xl',
-              blobPositions[blobPosition]
-            )}
-            aria-hidden="true"
-          />
-        )}
-      </div>
-    )}
-
-    {/* Decorative blob for single layout */}
-    {layout === 'single' && showBlob && (
-      <div
-        class={cn(
-          'bg-brand-200/20 pointer-events-none absolute h-64 w-64 rounded-full blur-3xl',
-          blobPositions[blobPosition]
-        )}
-        aria-hidden="true"
-      />
-    )}
-  </div>
-
-  {/* Default slot for additional content */}
-  <slot />
-</section>
+---
+import type { HTMLAttributes } from 'astro/types';
+import { cn } from '@/lib/cn';
+
+interface Props extends HTMLAttributes<'section'> {
+  /** Layout mode: centered single column or split two-column */
+  layout?: 'centered' | 'split';
+  /** Vertical padding size */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Show background grid pattern */
+  showGrid?: boolean;
+  /** Show decorative gradient blob */
+  showBlob?: boolean;
+  /** Blob position (only applies when showBlob is true) */
+  blobPosition?: 'left' | 'right' | 'center';
+}
+
+const {
+  layout = 'centered',
+  size = 'lg',
+  showGrid = false,
+  showBlob = false,
+  blobPosition = 'right',
+  class: className,
+  ...attrs
+} = Astro.props;
+
+// Check which slots are provided
+const hasBadgeSlot = Astro.slots.has('badge');
+const hasTitleSlot = Astro.slots.has('title');
+const hasDescriptionSlot = Astro.slots.has('description');
+const hasActionsSlot = Astro.slots.has('actions');
+const hasAsideSlot = Astro.slots.has('aside');
+
+// Size (padding) variants - asymmetric: more top padding for header clearance
+const sizes: Record<NonNullable<Props['size']>, string> = {
+  sm: 'pt-[var(--space-page-top-sm)] pb-[var(--space-section-sm)]',
+  md: 'pt-[var(--space-page-top)] pb-[var(--space-section-md)]',
+  lg: 'pt-[calc(var(--space-page-top)+var(--space-8))] pb-[var(--space-section-lg)]',
+  xl: 'pt-[calc(var(--space-page-top)+var(--space-16))] pb-[var(--space-section-xl)]',
+};
+
+// Blob position variants
+const blobPositions: Record<NonNullable<Props['blobPosition']>, string> = {
+  left: '-left-20 -top-20',
+  right: '-right-20 -top-20',
+  center: 'left-1/2 -translate-x-1/2 -top-20',
+};
+
+// Compute alignment based on layout
+const alignment = layout === 'centered' ? 'text-center items-center' : 'text-left items-start';
+
+// Compute classes
+const sectionClasses = cn(
+  'relative overflow-hidden bg-background',
+  sizes[size],
+  className
+);
+
+const contentClasses = cn(
+  'z-10 flex flex-col',
+  alignment
+);
+
+const gridClasses = cn(
+  'mx-auto grid max-w-6xl grid-cols-1 items-center gap-[var(--space-section-gap)] px-6',
+  layout === 'split' && 'lg:grid-cols-2 lg:gap-[var(--space-section-gap)]'
+);
+---
+
+<section class={sectionClasses} {...attrs}>
+  {/* Background grid pattern */}
+  {showGrid && (
+    <div
+      class="bg-grid-pattern pointer-events-none absolute inset-0 [mask-image:linear-gradient(to_bottom,white,transparent)] opacity-40"
+      aria-hidden="true"
+    />
+  )}
+
+  <div class={gridClasses}>
+    {/* Content Column */}
+    <div class={cn(contentClasses, 'order-1 lg:order-none')}>
+      {/* Badge Slot */}
+      {hasBadgeSlot && (
+        <div class="mb-[var(--space-heading-gap)]">
+          <slot name="badge" />
+        </div>
+      )}
+
+      {/* Title Slot */}
+      {hasTitleSlot && (
+        <div class={cn(
+          'mb-[var(--space-heading-gap)]',
+          '[&>h1]:font-display [&>h1]:text-5xl [&>h1]:leading-[1.1] [&>h1]:font-bold [&>h1]:tracking-tight [&>h1]:text-balance [&>h1]:text-foreground md:[&>h1]:text-6xl lg:[&>h1]:text-7xl',
+          '[&>h2]:font-display [&>h2]:text-4xl [&>h2]:leading-[1.1] [&>h2]:font-bold [&>h2]:tracking-tight [&>h2]:text-balance [&>h2]:text-foreground md:[&>h2]:text-5xl lg:[&>h2]:text-6xl'
+        )}>
+          <slot name="title" />
+        </div>
+      )}
+
+      {/* Description Slot */}
+      {hasDescriptionSlot && (
+        <div class={cn(
+          'mb-[var(--space-stack-lg)] max-w-xl text-lg leading-relaxed text-foreground-muted',
+          '[&>p]:text-lg [&>p]:leading-relaxed [&>p]:text-foreground-muted',
+          layout === 'centered' && 'mx-auto'
+        )}>
+          <slot name="description" />
+        </div>
+      )}
+
+      {/* Actions Slot */}
+      {hasActionsSlot && (
+        <div class={cn(
+          'flex w-full flex-col gap-4 sm:w-auto sm:flex-row',
+          layout === 'centered' && 'justify-center'
+        )}>
+          <slot name="actions" />
+        </div>
+      )}
+
+      {/* Default slot for additional content (social proof, etc.) */}
+      <slot />
+    </div>
+
+    {/* Aside Column (for split layout) */}
+    {layout === 'split' && hasAsideSlot && (
+      <div class="relative z-10 w-full order-2 lg:order-none">
+        <slot name="aside" />
+        {/* Decorative blob for split layout */}
+        {showBlob && (
+          <div
+            class={cn(
+              'bg-brand-200/20 pointer-events-none absolute h-64 w-64 rounded-full blur-3xl',
+              blobPositions[blobPosition]
+            )}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    )}
+
+    {/* Decorative blob for centered layout */}
+    {layout === 'centered' && showBlob && (
+      <div
+        class={cn(
+          'bg-brand-200/20 pointer-events-none absolute h-64 w-64 rounded-full blur-3xl',
+          blobPositions[blobPosition]
+        )}
+        aria-hidden="true"
+      />
+    )}
+  </div>
+</section>

package/templates/i18n/src/components/landing/CTA.astro

@@ -32,18 +32,6 @@ interface Props extends HTMLAttributes<'section'> {
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Max width of content */
   maxWidth?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Show logo */
-  showLogo?: boolean;
-  /** Logo size */
-  logoSize?: 'md' | 'lg' | 'xl' | '2xl';
-  /** Heading text (alternative to slot) */
-  heading?: string;
-  /** Text to highlight in brand color (within heading) */
-  headingHighlight?: string;
-  /** Description text (alternative to slot) */
-  description?: string;
-  /** Content alignment */
-  align?: 'center' | 'left';
   /** Show copy command button */
   showCopyCommand?: boolean;
   /** Command to copy (e.g., npm create velocity@latest) */
@@ -55,12 +43,6 @@ const {
   variant = 'default',
   size = 'lg',
   maxWidth = 'lg',
-  showLogo = true,
-  logoSize = '2xl',
-  heading,
-  headingHighlight,
-  description,
-  align = 'center',
   showCopyCommand = true,
   command,
   id = 'cta',
@@ -95,10 +77,10 @@ const highlightStyles = {
 };
 
 const sizes = {
-  sm: 'py-16 md:py-20',
-  md: 'py-20 md:py-24',
-  lg: 'py-24 md:py-32',
-  xl: 'py-32 md:py-40',
+  sm: 'py-[var(--space-section-sm)]',
+  md: 'py-[var(--space-section-md)]',
+  lg: 'py-[var(--space-section-lg)]',
+  xl: 'py-[var(--space-section-xl)]',
 };
 
 const maxWidths = {
@@ -108,15 +90,10 @@ const maxWidths = {
   xl: 'max-w-4xl',
 };
 
-const alignStyles = {
-  center: 'text-center mx-auto',
-  left: 'text-left',
-};
-
 // Use translations for default content
-const displayHeading = heading || t('cta.title');
-const displayHighlight = headingHighlight || t('cta.titleHighlight');
-const displayDescription = description || t('cta.description');
+const displayHeading = t('cta.title');
+const displayHighlight = t('cta.titleHighlight');
+const displayDescription = t('cta.description');
 const displayCommand = command || t('cta.command');
 const copiedText = t('common.copied');
 const docsLabel = t('cta.docs');
@@ -127,6 +104,7 @@ function processHeading(text: string, highlight?: string): string {
   return text.replace(highlight, `<span class="${highlightStyles[variant]}">${highlight}</span>`);
 }
 
+const hasLogoSlot = Astro.slots.has('logo');
 const hasHeadingSlot = Astro.slots.has('heading');
 const hasDescriptionSlot = Astro.slots.has('description');
 const hasActionsSlot = Astro.slots.has('actions');
@@ -141,54 +119,61 @@ const buttonId = `copy-command-${Math.random().toString(36).slice(2, 9)}`;
   {...attrs}
 >
   <div class="mx-auto max-w-6xl px-6">
-    <div class={cn(maxWidths[maxWidth], alignStyles[align])}>
-      {showLogo && (
+    <div class={cn(maxWidths[maxWidth], 'text-center mx-auto')}>
+      {/* Logo Slot */}
+      {hasLogoSlot ? (
+        <div class="mb-[var(--space-stack-lg)]">
+          <slot name="logo" />
+        </div>
+      ) : (
         <Logo
-          size={logoSize}
+          size="2xl"
           forceDark={isInvert}
-          class={cn('mb-8', align === 'center' && 'mx-auto')}
+          class="mb-[var(--space-stack-lg)] mx-auto"
         />
       )}
 
+      {/* Heading Slot */}
       {hasHeadingSlot ? (
-        <h2 class={cn(
-          'font-display text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-4 md:mb-6',
-          headingStyles[variant]
+        <div class={cn(
+          'mb-[var(--space-heading-gap)]',
+          '[&>h2]:font-display [&>h2]:text-3xl md:[&>h2]:text-4xl lg:[&>h2]:text-5xl [&>h2]:font-bold [&>h2]:text-balance',
+          isInvert ? '[&>h2]:text-on-invert' : '[&>h2]:text-foreground'
         )}>
           <slot name="heading" />
-        </h2>
+        </div>
       ) : (
         <h2
           class={cn(
-            'font-display text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-4 md:mb-6',
+            'font-display text-3xl md:text-4xl lg:text-5xl font-bold text-balance mb-[var(--space-heading-gap)]',
             headingStyles[variant]
           )}
           set:html={processHeading(displayHeading, displayHighlight)}
         />
       )}
 
+      {/* Description Slot */}
       {hasDescriptionSlot ? (
-        <p class={cn('text-lg md:text-xl mb-8 md:mb-10', descriptionStyles[variant])}>
+        <div class={cn(
+          'text-lg md:text-xl mb-[var(--space-stack-lg)]',
+          '[&>p]:text-lg md:[&>p]:text-xl',
+          isInvert ? 'text-on-invert-secondary [&>p]:text-on-invert-secondary' : 'text-foreground-muted [&>p]:text-foreground-muted'
+        )}>
           <slot name="description" />
-        </p>
+        </div>
       ) : (
-        <p class={cn('text-lg md:text-xl mb-8 md:mb-10', descriptionStyles[variant])}>
+        <p class={cn('text-lg md:text-xl mb-[var(--space-stack-lg)]', descriptionStyles[variant])}>
           {displayDescription}
         </p>
       )}
 
+      {/* Actions Slot */}
       {hasActionsSlot ? (
-        <div class={cn(
-          'flex flex-col gap-4 sm:flex-row',
-          align === 'center' && 'items-center justify-center'
-        )}>
+        <div class="flex flex-col gap-4 sm:flex-row items-center justify-center">
           <slot name="actions" />
         </div>
       ) : showCopyCommand && (
-        <div class={cn(
-          'flex flex-col gap-4 sm:flex-row',
-          align === 'center' && 'items-center justify-center'
-        )}>
+        <div class="flex flex-col gap-4 sm:flex-row items-center justify-center">
           <button
             type="button"
             id={buttonId}

package/templates/i18n/src/components/layout/Footer.astro

@@ -100,7 +100,7 @@ const t = useTranslations(locale);
 // Get navigation items from i18n routes or custom nav
 const defaultNav = getNavRoutes(locale);
 const navItems: NavItem[] = nav || defaultNav.map(route => ({
-  label: route.label,
+  label: t(route.label as any) || route.label,
   href: route.path,
 }));
 

package/templates/i18n/src/components/layout/Header.astro

@@ -111,7 +111,7 @@ const isInvert = colorScheme === 'invert';
 // Get navigation items from i18n routes or custom nav
 const defaultNav = getNavRoutes(locale);
 const navItems: NavItem[] = nav || [...extraNav, ...defaultNav.map(route => ({
-  label: route.label,
+  label: t(route.label as any) || route.label,
   href: route.path,
 }))];
 

package/templates/i18n/src/i18n/helpers.ts

@@ -241,29 +241,32 @@ export type NavRoute = {
   routeId: RouteId;
   label: string;
   order: number;
+  path: string;
 };
 
 /**
  * Get routes that should appear in navigation, sorted by order
  *
- * @returns Array of navigation routes with their translation keys
+ * @param locale - The locale to get paths for (defaults to defaultLocale)
+ * @returns Array of navigation routes with their translation keys and localized paths
  *
  * @example
- * const navRoutes = getNavRoutes();
+ * const navRoutes = getNavRoutes('en');
  * // → [
- * //   { routeId: 'components', label: 'nav.components', order: 1 },
- * //   { routeId: 'blog', label: 'nav.blog', order: 2 },
- * //   { routeId: 'about', label: 'nav.about', order: 3 },
- * //   { routeId: 'contact', label: 'nav.contact', order: 4 },
+ * //   { routeId: 'components', label: 'nav.components', order: 1, path: '/components' },
+ * //   { routeId: 'blog', label: 'nav.blog', order: 2, path: '/blog' },
+ * //   { routeId: 'about', label: 'nav.about', order: 3, path: '/about' },
+ * //   { routeId: 'contact', label: 'nav.contact', order: 4, path: '/contact' },
  * // ]
  */
-export function getNavRoutes(): NavRoute[] {
+export function getNavRoutes(locale: Locale = defaultLocale): NavRoute[] {
   return Object.entries(routes)
     .filter(([_, route]) => route.nav?.show === true)
     .map(([routeId, route]) => ({
       routeId: routeId as RouteId,
       label: route.nav!.label,
       order: route.nav!.order,
+      path: getLocalizedPath(routeId as RouteId, locale),
     }))
     .sort((a, b) => a.order - b.order);
 }

package/templates/i18n/src/pages/[lang]/[...about].astro

@@ -5,6 +5,7 @@
  */
 import PageLayout from '@/layouts/PageLayout.astro';
 import Icon from '@/components/ui/Icon.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Card from '@/components/ui/Card.astro';
 import { Hero } from '@/components/hero';
 import { locales, defaultLocale, isValidLocale, type Locale } from '@/i18n/config';
@@ -42,21 +43,16 @@ const t = useTranslations(locale);
   lang={locale}
   routeId="about"
 >
-  <Hero
-    layout="single"
-    align="center"
-    size="sm"
-    showGrid
-    badge={t('about.hero.badge')}
-    badgeIcon
-    titleElement="h1"
-  >
-    <Fragment slot="title">
+  <Hero layout="centered" size="sm" showGrid>
+    <Badge slot="badge" pill pulse>{t('about.hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('about.hero.title')} <span class="text-brand-500">{t('about.hero.titleHighlight')}</span>
-    </Fragment>
-    <Fragment slot="description">
+    </h1>
+
+    <p slot="description">
       {t('about.hero.description')}
-    </Fragment>
+    </p>
   </Hero>
 
   <!-- Mission Section -->

package/templates/i18n/src/pages/[lang]/[...contact].astro

@@ -5,6 +5,7 @@
  */
 import PageLayout from '@/layouts/PageLayout.astro';
 import Icon from '@/components/ui/Icon.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Button from '@/components/ui/Button.astro';
 import Input from '@/components/ui/Input.astro';
 import Textarea from '@/components/ui/Textarea.astro';
@@ -46,21 +47,16 @@ const t = useTranslations(locale);
   lang={locale}
   routeId="contact"
 >
-  <Hero
-    layout="single"
-    align="center"
-    size="sm"
-    showGrid
-    badge={t('contact.hero.badge')}
-    badgeIcon
-    titleElement="h1"
-  >
-    <Fragment slot="title">
+  <Hero layout="centered" size="sm" showGrid>
+    <Badge slot="badge" pill pulse>{t('contact.hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('contact.hero.title')} <span class="text-brand-500">{t('contact.hero.titleHighlight')}</span>
-    </Fragment>
-    <Fragment slot="description">
+    </h1>
+
+    <p slot="description">
       {t('contact.hero.description')}
-    </Fragment>
+    </p>
   </Hero>
 
   <!-- Contact Form Section -->

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

@@ -6,6 +6,7 @@
 import LandingLayout from '@/layouts/LandingLayout.astro';
 import { Hero } from '@/components/hero';
 import Button from '@/components/ui/Button.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Icon from '@/components/ui/Icon.astro';
 import SocialProof from '@/components/ui/SocialProof.astro';
 import TerminalDemo from '@/components/ui/TerminalDemo.tsx';
@@ -44,23 +45,16 @@ const ctaLink = '#cta';
   lang={locale}
   routeId="home"
 >
-  <Hero
-    layout="split"
-    align="left"
-    size="lg"
-    showGrid
-    showBlob
-    blobPosition="right"
-    badge={t('hero.badge')}
-    badgeIcon
-  >
-    <Fragment slot="title">
+  <Hero layout="split" size="lg" showGrid showBlob blobPosition="right">
+    <Badge slot="badge" pill pulse>{t('hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('hero.title')} <span class="text-brand-500">{t('hero.titleHighlight')}</span>
-    </Fragment>
+    </h1>
 
-    <Fragment slot="description">
+    <p slot="description">
       {t('hero.description')}
-    </Fragment>
+    </p>
 
     <Fragment slot="actions">
       <Button size="lg" href={ctaLink}>
@@ -81,7 +75,7 @@ const ctaLink = '#cta';
     <TerminalDemo slot="aside" client:load />
 
     <SocialProof
-      slot="social-proof"
+      class="mt-[var(--space-stack-lg)]"
       text={t('hero.socialProof')}
       avatars={[
         'https://i.pravatar.cc/150?img=12',

package/templates/i18n/src/pages/about.astro

@@ -5,6 +5,7 @@
  */
 import PageLayout from '@/layouts/PageLayout.astro';
 import Icon from '@/components/ui/Icon.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Card from '@/components/ui/Card.astro';
 import { Hero } from '@/components/hero';
 import { defaultLocale } from '@/i18n/config';
@@ -20,21 +21,16 @@ const t = useTranslations(locale);
   lang={locale}
   routeId="about"
 >
-  <Hero
-    layout="single"
-    align="center"
-    size="sm"
-    showGrid
-    badge={t('about.hero.badge')}
-    badgeIcon
-    titleElement="h1"
-  >
-    <Fragment slot="title">
+  <Hero layout="centered" size="sm" showGrid>
+    <Badge slot="badge" pill pulse>{t('about.hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('about.hero.title')} <span class="text-brand-500">{t('about.hero.titleHighlight')}</span>
-    </Fragment>
-    <Fragment slot="description">
+    </h1>
+
+    <p slot="description">
       {t('about.hero.description')}
-    </Fragment>
+    </p>
   </Hero>
 
   <!-- Mission Section -->

package/templates/i18n/src/pages/contact.astro

@@ -5,6 +5,7 @@
  */
 import PageLayout from '@/layouts/PageLayout.astro';
 import Icon from '@/components/ui/Icon.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Button from '@/components/ui/Button.astro';
 import Input from '@/components/ui/Input.astro';
 import Textarea from '@/components/ui/Textarea.astro';
@@ -24,21 +25,16 @@ const t = useTranslations(locale);
   lang={locale}
   routeId="contact"
 >
-  <Hero
-    layout="single"
-    align="center"
-    size="sm"
-    showGrid
-    badge={t('contact.hero.badge')}
-    badgeIcon
-    titleElement="h1"
-  >
-    <Fragment slot="title">
+  <Hero layout="centered" size="sm" showGrid>
+    <Badge slot="badge" pill pulse>{t('contact.hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('contact.hero.title')} <span class="text-brand-500">{t('contact.hero.titleHighlight')}</span>
-    </Fragment>
-    <Fragment slot="description">
+    </h1>
+
+    <p slot="description">
       {t('contact.hero.description')}
-    </Fragment>
+    </p>
   </Hero>
 
   <!-- Contact Form Section -->

package/templates/i18n/src/pages/index.astro

@@ -6,6 +6,7 @@
 import LandingLayout from '@/layouts/LandingLayout.astro';
 import { Hero } from '@/components/hero';
 import Button from '@/components/ui/Button.astro';
+import Badge from '@/components/ui/Badge.astro';
 import Icon from '@/components/ui/Icon.astro';
 import SocialProof from '@/components/ui/SocialProof.astro';
 import TerminalDemo from '@/components/ui/TerminalDemo.tsx';
@@ -29,23 +30,16 @@ const ctaLink = '#cta';
   lang={locale}
   routeId="home"
 >
-  <Hero
-    layout="split"
-    align="left"
-    size="lg"
-    showGrid
-    showBlob
-    blobPosition="right"
-    badge={t('hero.badge')}
-    badgeIcon
-  >
-    <Fragment slot="title">
+  <Hero layout="split" size="lg" showGrid showBlob blobPosition="right">
+    <Badge slot="badge" pill pulse>{t('hero.badge')}</Badge>
+
+    <h1 slot="title">
       {t('hero.title')} <span class="text-brand-500">{t('hero.titleHighlight')}</span>
-    </Fragment>
+    </h1>
 
-    <Fragment slot="description">
+    <p slot="description">
       {t('hero.description')}
-    </Fragment>
+    </p>
 
     <Fragment slot="actions">
       <Button size="lg" href={ctaLink}>
@@ -66,7 +60,7 @@ const ctaLink = '#cta';
     <TerminalDemo slot="aside" client:load />
 
     <SocialProof
-      slot="social-proof"
+      class="mt-[var(--space-stack-lg)]"
       text={t('hero.socialProof')}
       avatars={[
         'https://i.pravatar.cc/150?img=12',