Refactor Default Hero to be stand alone component

Author: webstackdev

src/components/Hero/@types/content.ts

@@ -3,44 +3,58 @@
  * Hero Content Column - Default Variant
  */
 import Sprite from '@components/Sprite/index.astro'
-import type { ContentProps as Props } from '@components/Hero/@types/content'
 
-export type { Props }
+export interface Props {
+  pretitle?: string
+  title?: string
+  benefits?: Array<{
+    text: string
+    highlight: string
+  }>
+  primaryLink?: {
+    href: string
+    text: string
+  }
+  secondaryLink?: {
+    href: string
+    text: string
+  }
+}
 
-const { pretitle, title, benefits, primaryLink, secondaryLink } = Astro.props
+const { pretitle, title, benefits, primaryLink, secondaryLink } = Astro.props as Props
 ---
 
 {/* Content Column */}
 <div class="order-2 lg:order-1 space-y-6">
   {/* Pretitle */}
   <span
-    class="inline-block text-sm md:text-base font-bold tracking-wide text-[var(--color-primary)] uppercase"
+    class="inline-block text-sm md:text-base font-bold tracking-wide text-primary uppercase"
   >
     {pretitle}
   </span>
 
   {/* Main Title */}
   <h1
-    class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-[var(--color-text)] leading-tight"
+    class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-text leading-tight"
   >
     {title}
   </h1>
 
   {/* Benefits Section */}
   {
     benefits && benefits.length > 0 && (
-      <div class="bg-[var(--color-bg-offset)] rounded-2xl p-6 md:p-8 border border-[var(--color-border)]">
-        <div class="text-sm font-semibold text-[var(--color-text-offset)] mb-4 uppercase tracking-wide">
+      <div class="bg-bg-offset rounded-2xl p-6 md:p-8 border border-border">
+        <div class="text-sm font-semibold text-text-offset mb-4 uppercase tracking-wide">
           Up to:
         </div>
         <ul class="space-y-4">
           {benefits.map(benefit => (
             <li class="flex items-start gap-3">
-              <span class="flex-shrink-0 w-6 h-6 text-[var(--color-success)] [&_.icon]:w-6 [&_.icon]:h-6 [&_.icon]:stroke-current">
+              <span class="shrink-0 w-6 h-6 text-success [&_.icon]:w-6 [&_.icon]:h-6 [&_.icon]:stroke-current">
                 <Sprite name="check" />
               </span>
-              <span class="text-base md:text-lg text-[var(--color-text)]">
-                <strong class="font-bold text-[var(--color-primary)]">{benefit.highlight}</strong>{' '}
+              <span class="text-base md:text-lg text-text">
+                <strong class="font-bold text-primary">{benefit.highlight}</strong>{' '}
                 {benefit.text}
               </span>
             </li>
@@ -56,7 +70,7 @@ const { pretitle, title, benefits, primaryLink, secondaryLink } = Astro.props
       primaryLink && (
         <a
           href={primaryLink.href}
-          class="group inline-block px-8 py-4 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
+          class="group inline-block px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
         >
           {primaryLink.text}
           <svg
@@ -79,7 +93,7 @@ const { pretitle, title, benefits, primaryLink, secondaryLink } = Astro.props
       secondaryLink && (
         <a
           href={secondaryLink.href}
-          class="group inline-block px-8 py-4 bg-transparent border-2 border-[var(--color-border)] hover:border-[var(--color-primary)] text-[var(--color-text)] hover:text-[var(--color-primary)] font-semibold rounded-xl transition-all duration-200 text-center"
+          class="group inline-block px-8 py-4 bg-transparent border-2 border-border hover:border-primary text-text hover:text-primary font-semibold rounded-xl transition-all duration-200 text-center"
         >
           {secondaryLink.text}
           <svg

src/components/Hero/@types/ctaLinks.ts

@@ -2,18 +2,25 @@
 /**
  * Hero CTA Links - Default Variant
  */
-import type { CtaProps as Props } from '@components/Hero/@types/ctaLinks'
+export interface Props {
+  primaryLink: {
+    href: string
+    text: string
+  }
+  secondaryLink: {
+    href: string
+    text: string
+  }
+}
 
-export type { Props }
-
-const { primaryLink, secondaryLink } = Astro.props
+const { primaryLink, secondaryLink } = Astro.props as Props
 ---
 
 {/* CTA Links */}
 <div class="flex flex-col sm:flex-row gap-4 pt-2">
   <a
     href={primaryLink.href}
-    class="group inline-block px-8 py-4 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
+    class="group inline-block px-8 py-4 bg-primary hover:bg-primary-hover text-white font-semibold rounded-xl transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 text-center"
   >
     {primaryLink.text}
     <svg
@@ -31,7 +38,7 @@ const { primaryLink, secondaryLink } = Astro.props
   </a>
   <a
     href={secondaryLink.href}
-    class="group inline-block px-8 py-4 bg-transparent border-2 border-[var(--color-border)] hover:border-[var(--color-primary)] text-[var(--color-text)] hover:text-[var(--color-primary)] font-semibold rounded-xl transition-all duration-200 text-center"
+    class="group inline-block px-8 py-4 bg-transparent border-2 border-border hover:border-primary text-text hover:text-primary font-semibold rounded-xl transition-all duration-200 text-center"
   >
     {secondaryLink.text}
     <svg

src/components/Hero/@types/image.ts

@@ -3,11 +3,16 @@
  * Hero Image Column - Default Variant
  */
 import { Image as AstroImage } from 'astro:assets'
-import type { ImageProps as Props } from '@components/Hero/@types/image'
+import type { ImageMetadata } from 'astro'
 
-export type { Props }
+export interface Props {
+  image?: {
+    src: ImageMetadata
+    alt: string
+  }
+}
 
-const { image } = Astro.props
+const { image } = Astro.props as Props
 ---
 
 {/* Image Column */}

src/components/Hero/default/content.astro src/components/Hero/Default/content.astrosrc/components/Hero/default/content.astro renamed to src/components/Hero/Default/content.astro

@@ -0,0 +1,54 @@
+---
+import Content from './content.astro'
+import ImageBlock from './image.astro'
+import type { ImageMetadata } from 'astro'
+
+interface Benefit {
+  text: string
+  highlight: string
+}
+
+interface Link {
+  href: string
+  text: string
+}
+
+export interface Props {
+  pretitle?: string
+  title?: string
+  benefits?: Benefit[]
+  primaryLink?: Link
+  secondaryLink?: Link
+  image?: {
+    src: ImageMetadata
+    alt: string
+  }
+}
+
+const {
+  pretitle = 'Client-Focused Web Application Developer',
+  title = 'Building Modern Web Solutions That Drive Results',
+  benefits = [
+    { text: 'increase in sales', highlight: '57%' },
+    { text: 'ROI for every $1', highlight: '$114' },
+    { text: 'conversion', highlight: 'Up to 400%' },
+  ],
+  primaryLink = { href: '/services/web-development', text: 'Improve Your Product' },
+  secondaryLink = { href: '/services/consulting', text: 'Start from scratch' },
+  image,
+} = Astro.props
+---
+
+<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+    <Content
+      pretitle={pretitle}
+      title={title}
+      benefits={benefits}
+      primaryLink={primaryLink}
+      secondaryLink={secondaryLink}
+    />
+
+    <ImageBlock {image} />
+  </div>
+</section>