hero

src/components/HeroPage.tsx

@@ -193,7 +193,7 @@ function Header({ isDark, onToggle }: { isDark: boolean; onToggle: () => void })
       <nav className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-6">
         {/* Wordmark */}
         <span className={cn('font-semibold tracking-tight text-sm transition-colors', isDark ? 'text-white' : 'text-black')}>
-          mackie.
+          
         </span>
 
         {/* Desktop links */}
@@ -269,7 +269,12 @@ function Header({ isDark, onToggle }: { isDark: boolean; onToggle: () => void })
 
 // ─── Hero section ─────────────────────────────────────────────────────────────
 
-function HeroSection({ isDark }: { isDark: boolean }) {
+function HeroSection({ isDark, heading, subheading, badgeText }: { 
+  isDark: boolean
+  heading: string
+  subheading: string
+  badgeText: string
+}) {
   const text  = isDark ? 'text-white'          : 'text-black'
   const muted = isDark ? 'text-white/55'       : 'text-black/55'
   const badge = isDark ? 'bg-white/8 border-white/15 text-white/70' : 'bg-black/5 border-black/12 text-black/60'
@@ -303,7 +308,7 @@ function HeroSection({ isDark }: { isDark: boolean }) {
             badge
           )}
         >
-          <span className="text-xs">graphic designer turned developer</span>
+          <span className="text-xs">{badgeText}</span>
           <span className={cn('block h-4 border-l', isDark ? 'border-white/20' : 'border-black/15')} />
           <ArrowRightIcon className="size-3 duration-150 ease-out group-hover:translate-x-1" />
         </a>
@@ -314,7 +319,7 @@ function HeroSection({ isDark }: { isDark: boolean }) {
           'text-balance text-4xl font-medium tracking-tight md:text-5xl lg:text-6xl',
           text
         )}>
-          Hey, I'm Mackie.
+          {heading}
         </h1>
 
         {/* Subline */}
@@ -323,9 +328,7 @@ function HeroSection({ isDark }: { isDark: boolean }) {
           'mx-auto max-w-lg text-base tracking-wide md:text-lg',
           muted
         )}>
-          I built my way into code from scratch — no shortcuts, no excuses.
-          <br className="hidden sm:block" />
-          Full stack, end to end. I take ideas and ship them.
+          {subheading}
         </p>
 
         {/* CTAs */}
@@ -395,7 +398,13 @@ function LogosSection({ isDark }: { isDark: boolean }) {
 // ─── Main export ──────────────────────────────────────────────────────────────
 
 // REPLACE WITH:
-export default function HeroPage() {
+interface HeroPageProps {
+  heading: string
+  subheading: string
+  badgeText: string
+}
+
+export default function HeroPage({ heading, subheading, badgeText }: HeroPageProps) {
   const { isDark, toggle } = useThemeMode()
 
   return (
@@ -410,7 +419,7 @@ export default function HeroPage() {
       <div style={{ position: 'relative', zIndex: 1 }}>
         <Header isDark={isDark} onToggle={toggle} />
         <main>
-          <HeroSection isDark={isDark} />
+          <HeroSection isDark={isDark} heading={heading} subheading={subheading} badgeText={badgeText} />
           <LogosSection isDark={isDark} />
         </main>
       </div>