diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
index ae23900..48f4d1a 100644
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -1,76 +1,19 @@
-/* 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 ImageOrVideo from "@/components/ui/ImageOrVideo";
-import Tag from "@/components/ui/Tag";
-import Card from "@/components/ui/Card";
+// Created by add_section_from_catalog (AboutMediaOverlay).
 
-const primaryButton = {
-  text: "Our Story",
-  href: "#"
-};
-const secondaryButton = {
-  text: "Virtual Tour",
-  href: "#"
-};
+import React from 'react';
+import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
 
-interface AboutTextProps {
-  title: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-}
-
-const AboutInline = () => {
-  return (
-    <section aria-label="About section" className="py-24">
-      <div className="w-content-width mx-auto flex flex-col gap-16">
-        <div className="flex flex-col gap-4 items-center text-center">
-          <Tag text="Premium Experience" />
-          <TextAnimation
-            text={"Grandeur Hotel: A Sanctuary of Elegance"}
-            variant="fade"
-            gradientText={false}
-            tag="h2"
-            className="text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-balance"
-          />
-          {(primaryButton || secondaryButton) && (
-            <div className="flex flex-wrap justify-center gap-4 mt-4">
-              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-            </div>
-          )}
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-stretch">
-          <div className="flex flex-col gap-6 h-full">
-            <Card className="flex-grow flex flex-col justify-center p-8">
-              <ul className="space-y-6 text-lg text-muted-foreground">
-                <li className="flex items-start gap-3"><span className="text-primary-cta mt-1">•</span><span>Five-Star Amenities including world-class dining and spa</span></li>
-                <li className="flex items-start gap-3"><span className="text-primary-cta mt-1">•</span><span>Luxurious Suites with premium bedding and stunning views</span></li>
-                <li className="flex items-start gap-3"><span className="text-primary-cta mt-1">•</span><span>Prime Location in the heart of the city</span></li>
-                <li className="flex items-start gap-3"><span className="text-primary-cta mt-1">•</span><span>Personalized 24/7 concierge services</span></li>
-              </ul>
-            </Card>
-
-
-          </div>
-          
-          <div className="relative w-full h-full min-h-[400px] rounded-2xl overflow-hidden border border-border">
-            <ImageOrVideo 
-              imageSrc="https://picsum.photos/seed/610319491/1200/800" 
-              className="absolute inset-0 w-full h-full object-cover"
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default function AboutSection() {
+export default function AboutSection(): React.JSX.Element {
   return (
     <div data-webild-section="about" id="about">
-      <AboutInline />
+      <AboutMediaOverlay
+        imageSrc="https://picsum.photos/seed/610319491/1200/800"
+        description="Experience five-star amenities, luxurious suites with premium bedding, prime location in the heart of the city, and personalized 24/7 concierge services."
+        title="Grandeur Hotel: A Sanctuary of Elegance"
+        primaryButton={{"href":"#","text":"Our Story"}}
+        secondaryButton={{"text":"Virtual Tour","href":"#"}}
+        tag="Premium Experience"
+      />
     </div>
   );
 }