feat: update Hero component to accept theme prop and add logo images

Author: cfboy

src/App.tsx

@@ -13,7 +13,7 @@ function App() {
     <div className="min-h-screen">
       <Navbar theme={theme} onToggleTheme={toggleTheme} />
       <main>
-        <Hero />
+        <Hero theme={theme} />
         <Services />
         <About />
         <Contact />

src/assets/images/logos/full-logo-light.png

@@ -1,8 +1,15 @@
 import { ArrowDown, Phone } from 'lucide-react'
 
+import fullLogoLight from '@/assets/images/logos/full-logo-light.png'
+import fullLogoDark from '@/assets/images/logos/full-logo.png'
 import { ButtonLink } from '@/components/ui/button'
 
-export function Hero() {
+interface HeroProps {
+  theme: 'light' | 'dark'
+}
+
+export function Hero({ theme }: HeroProps) {
+  const logoSrc = theme === 'light' ? fullLogoLight : fullLogoDark
   return (
     <section
       id="inicio"
@@ -21,22 +28,24 @@ export function Hero() {
       </div>
 
       <div className="relative mx-auto max-w-6xl px-4 py-20 text-center sm:px-6">
-        {/* Logo mark */}
-        <div className="mx-auto mb-8 flex h-28 w-28 items-center justify-center rounded-full bg-[var(--accent)] shadow-lg sm:h-36 sm:w-36">
-          <HeroLogo className="h-20 w-20 sm:h-28 sm:w-28" />
-        </div>
-
         <h1 className="mb-4 text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
           <span className="text-[var(--primary)]">Centro de Servicios</span>
           <br />
           <span className="text-[var(--secondary)]">Educativos</span>
         </h1>
-
-        <p className="mx-auto mb-4 max-w-2xl text-lg text-[var(--muted-foreground)] sm:text-xl">
+        {/* Logo mark */}
+        <div className="mx-auto">
+          <img
+            src={logoSrc}
+            alt="MAC Educando Logo"
+            className="mx-auto h-48 w-auto sm:h-64 md:h-80"
+          />
+        </div>
+        {/* <p className="mx-auto mb-4 max-w-2xl text-lg text-[var(--muted-foreground)] sm:text-xl">
           <span className="font-semibold text-[var(--primary)]">
             M Adviser and Consultant Inc.
           </span>
-        </p>
+        </p> */}
 
         <p className="mx-auto mb-10 max-w-2xl text-base text-[var(--muted-foreground)] sm:text-lg">
           Ofrecemos una amplia gama de servicios orientados al desarrollo{' '}
@@ -75,162 +84,3 @@ export function Hero() {
     </section>
   )
 }
-
-function HeroLogo({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 200 200" className={className} aria-hidden="true">
-      <defs>
-        <linearGradient id="trunk-grad" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor="#e8751a" />
-          <stop offset="100%" stopColor="#8a3e0b" />
-        </linearGradient>
-      </defs>
-
-      {/* M letter */}
-      <path
-        d="M30 175 L30 95 L65 130 L100 95 L135 130 L170 95 L170 175 L148 175 L148 125 L120 158 L100 135 L80 158 L52 125 L52 175 Z"
-        fill="var(--primary)"
-        opacity="0.9"
-      />
-
-      {/* Tree trunk */}
-      <path
-        d="M92 95 C95 55 100 40 100 35 C100 40 105 55 108 95"
-        fill="url(#trunk-grad)"
-      />
-
-      {/* Branches */}
-      <path
-        d="M100 60 C85 55 78 48 75 42"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M100 60 C115 55 122 48 125 42"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M100 50 C88 42 82 35 80 28"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M100 50 C112 42 118 35 120 28"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M100 42 C94 35 90 28 88 22"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <path
-        d="M100 42 C106 35 110 28 112 22"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-
-      {/* Leaves - dark green */}
-      <ellipse
-        cx="75"
-        cy="38"
-        rx="10"
-        ry="6"
-        fill="#2d6a2e"
-        transform="rotate(-35 75 38)"
-      />
-      <ellipse
-        cx="88"
-        cy="20"
-        rx="9"
-        ry="5.5"
-        fill="#1b441b"
-        transform="rotate(-15 88 20)"
-      />
-      <ellipse cx="100" cy="14" rx="9" ry="5" fill="#2d6a2e" />
-
-      {/* Leaves - light green */}
-      <ellipse
-        cx="125"
-        cy="38"
-        rx="10"
-        ry="6"
-        fill="#7cb342"
-        transform="rotate(35 125 38)"
-      />
-      <ellipse
-        cx="112"
-        cy="20"
-        rx="9"
-        ry="5.5"
-        fill="#4e9a47"
-        transform="rotate(15 112 20)"
-      />
-      <ellipse
-        cx="68"
-        cy="48"
-        rx="8"
-        ry="5"
-        fill="#7cb342"
-        transform="rotate(-25 68 48)"
-      />
-
-      {/* Leaves - yellow accent */}
-      <ellipse
-        cx="80"
-        cy="28"
-        rx="7"
-        ry="4.5"
-        fill="#ffd600"
-        transform="rotate(-20 80 28)"
-      />
-      <ellipse
-        cx="132"
-        cy="48"
-        rx="8"
-        ry="5"
-        fill="#ffd600"
-        transform="rotate(25 132 48)"
-      />
-      <ellipse
-        cx="120"
-        cy="28"
-        rx="7"
-        ry="4.5"
-        fill="#ffd600"
-        transform="rotate(20 120 28)"
-      />
-
-      {/* Extra detail leaves */}
-      <ellipse
-        cx="94"
-        cy="30"
-        rx="6"
-        ry="4"
-        fill="#4e9a47"
-        transform="rotate(-10 94 30)"
-      />
-      <ellipse
-        cx="106"
-        cy="30"
-        rx="6"
-        ry="4"
-        fill="#2d6a2e"
-        transform="rotate(10 106 30)"
-      />
-    </svg>
-  )
-}

src/assets/images/logos/full-logo.png

@@ -1,6 +1,7 @@
 import { Menu, X, Sun, Moon } from 'lucide-react'
 import { useState } from 'react'
 
+import mLogo from '@/assets/images/logos/m-logo.png'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -23,7 +24,7 @@ export function Navbar({ theme, onToggleTheme }: NavbarProps) {
     <nav className="fixed top-0 z-50 w-full border-b border-[var(--border)] bg-[var(--background)]/95 backdrop-blur-sm">
       <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6">
         <a href="#inicio" className="flex items-center gap-2">
-          <MacLogo className="h-10 w-10" />
+          <img src={mLogo} alt="MAC Logo" className="h-10 w-10" />
           <span className="text-lg font-bold text-[var(--primary)]">
             MAC{' '}
             <span className="hidden text-[var(--secondary)] sm:inline">
@@ -103,63 +104,3 @@ export function Navbar({ theme, onToggleTheme }: NavbarProps) {
     </nav>
   )
 }
-
-function MacLogo({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} aria-hidden="true">
-      {/* M letter */}
-      <path
-        d="M15 85 L15 40 L35 65 L50 45 L65 65 L85 40 L85 85 L72 85 L72 60 L58 78 L50 68 L42 78 L28 60 L28 85 Z"
-        fill="var(--primary)"
-      />
-      {/* Tree trunk */}
-      <path
-        d="M47 45 Q50 20 53 45"
-        fill="none"
-        stroke="#d4651a"
-        strokeWidth="3"
-      />
-      {/* Leaves */}
-      <ellipse
-        cx="42"
-        cy="25"
-        rx="6"
-        ry="4"
-        fill="#2d6a2e"
-        transform="rotate(-30 42 25)"
-      />
-      <ellipse
-        cx="50"
-        cy="18"
-        rx="5"
-        ry="3.5"
-        fill="#4e9a47"
-        transform="rotate(0 50 18)"
-      />
-      <ellipse
-        cx="58"
-        cy="25"
-        rx="6"
-        ry="4"
-        fill="#7cb342"
-        transform="rotate(30 58 25)"
-      />
-      <ellipse
-        cx="45"
-        cy="32"
-        rx="5"
-        ry="3"
-        fill="#ffd600"
-        transform="rotate(-20 45 32)"
-      />
-      <ellipse
-        cx="55"
-        cy="32"
-        rx="5"
-        ry="3"
-        fill="#2d6a2e"
-        transform="rotate(20 55 32)"
-      />
-    </svg>
-  )
-}