diff --git a/src/index.css b/src/index.css
index 2499f83..3de4c74 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #121212;
-  --foreground: #ffffff;
-  --primary-cta: #106EFB;
+  --background: #0B0B0F;
+  --card: #121216;
+  --foreground: #F7F4EE;
+  --primary-cta: #7C5CFF;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #000000;
-  --accent: #535353;
-  --background-accent: #106EFB;
+  --secondary-cta: #18D5C2;
+  --secondary-cta-text: #0B0B0F;
+  --accent: #D8D8D8;
+  --background-accent: #7C5CFF;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -88,8 +88,8 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Inter Tight', sans-serif;
-  --font-tight: "Inter Tight", sans-serif;
+  --font-sans: 'Inter', sans-serif;
+  --font-tight: "Space Grotesk", sans-serif;
   --font-mono: monospace;
 
   /* Border Radius */
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index f594af1..effe024 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -1,45 +1,112 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "hero" section.
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import { motion } from "motion/react";
+import TiltedCarousel from "@/components/ui/TiltedCarousel";
 
-import React from 'react';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+const primaryButton = {
+  href: "#contact",
+  text: "Get Your Personalized Demo"
+};
+const secondaryButton = {
+  href: "#demo",
+  text: "Watch AI Receptionist Demo"
+};
 
-export default function HeroSection(): React.JSX.Element {
+const HeroBillboardTiltedCarousel = () => {
   return (
-    <div id="hero" data-section="hero">
-        <SectionErrorBoundary name="hero">
-              <HeroBillboardTiltedCarousel
-        tag="AI Operating System"
-        title="Automate Your Business, Multiply Your Revenue"
-        description="Your AI-powered operating system answers calls, books appointments, automates follow-ups, and manages customers—so you generate revenue while away."
-        primaryButton={{"text":"Get Your Personalized Demo","href":"#contact"}}
-        secondaryButton={{
-            text: "Book Strategy Call",
-            href: "#contact",
-          }}
-        items={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-robot-holding-biotech-pill_183364-118328.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/account-manager-using-ai-chatbot-help-talking-with-customers_482257-126148.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/work-office-doesn-t-have-boring_329181-10357.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/research-analysis-ideas-strategy-information-concept_53876-123886.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/people-holding-icons-digital-brands_53876-65398.jpg",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/server-racks-storing-ai-datasets-simulation-training-predictive-tasks_482257-124190.jpg",
-            },
-          ]}
-      />
-        </SectionErrorBoundary>
+    <section className="relative w-full min-h-[90vh] flex items-center justify-center bg-background overflow-hidden pt-24 pb-16">
+      {/* Background Effects */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-primary-cta/20 blur-[120px] rounded-full opacity-50" />
+        <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-secondary-cta/10 blur-[100px] rounded-full opacity-30" />
+        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay"></div>
       </div>
+
+      <div className="w-content-width mx-auto relative z-10 flex flex-col items-center text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="mb-8"
+        >
+          <Tag text="YOURSMATE™" className="bg-card border border-white/10 text-accent px-4 py-1.5 rounded-full text-sm font-medium tracking-wide" />
+        </motion.div>
+
+        <div className="max-w-5xl mx-auto mb-8">
+          <TextAnimation 
+            text="We Build Businesses That Run Even When You Don't." 
+            variant="fade-blur" 
+            tag="h1" 
+            className="text-5xl md:text-7xl font-bold text-foreground tracking-tight leading-[1.1]"
+            gradientText={false}
+          />
+        </div>
+
+        <motion.p 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="text-lg md:text-xl text-accent max-w-3xl mx-auto mb-12 leading-relaxed"
+        >
+          We build complete AI-powered Business Operating Systems that answer your calls, book appointments, automate follow-ups, collect Google reviews, manage customers, and help your business generate more revenue—even when you're away.
+        </motion.p>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="flex flex-col sm:flex-row items-center gap-4"
+        >
+          <Button 
+            text={primaryButton.text} 
+            href={primaryButton.href} 
+            variant="primary"
+            className="px-8 py-4 text-lg rounded-full shadow-[0_0_30px_rgba(124,92,255,0.3)] hover:shadow-[0_0_40px_rgba(124,92,255,0.5)] transition-all"
+          />
+          <Button 
+            text={secondaryButton.text} 
+            href={secondaryButton.href} 
+            variant="secondary"
+            className="px-8 py-4 text-lg rounded-full bg-card border border-white/10 hover:bg-white/5 transition-all flex items-center gap-2"
+          />
+        </motion.div>
+
+        {/* Dashboard Preview */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7, delay: 0.5 }}
+          className="mt-20 w-full max-w-6xl relative"
+        >
+          <div className="absolute -inset-1 bg-gradient-to-r from-primary-cta to-secondary-cta rounded-2xl blur opacity-20"></div>
+          <div className="relative rounded-2xl border border-white/10 bg-card/80 backdrop-blur-xl overflow-hidden shadow-2xl">
+            <div className="flex items-center px-4 py-3 border-b border-white/10 bg-black/40">
+              <div className="flex gap-2">
+                <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
+                <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
+                <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
+              </div>
+              <div className="mx-auto text-xs text-accent font-mono">yoursmate.com/system</div>
+            </div>
+            <img 
+              src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2940&auto=format&fit=crop" 
+              alt="Business Operating System Dashboard" 
+              className="w-full h-auto object-cover opacity-80 mix-blend-luminosity hover:mix-blend-normal transition-all duration-700"
+            />
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default function HeroSection() {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroBillboardTiltedCarousel />
+    </div>
   );
 }