diff --git a/src/app/page.tsx b/src/app/page.tsx
index 29c8d78..a6fbe4e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,7 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { Code, MessageSquare, Palette, Sparkles } from 'lucide-react';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
 
 export default function LandingPage() {
   return (
@@ -209,6 +210,10 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroLogo logoText="Refract" description="Experience the future of technology with Refract, where innovation meets simplicity." buttons={[{ label: "Get Started", href: "/start", variant: "primary" }, { label: "Learn More", href: "/about", variant: "secondary" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="Refract Hero Section" className="hero-logo" containerClassName="hero-container" contentContainerClassName="hero-content-container" descriptionClassName="hero-description" buttonContainerClassName="hero-button-container" buttonClassName="hero-button" buttonTextClassName="hero-button-text" logoContainerClassName="hero-logo-container" logoClassName="hero-logo-text" mediaWrapperClassName="hero-media-wrapper" imageClassName="hero-image" blurClassName="hero-blur" dimOverlayClassName="hero-dim-overlay" />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="Refract"