src/pages/HomePage.tsx

@@ -4,7 +4,6 @@
 
 import React from 'react';
 import HomeSection from './HomePage/sections/Home';
-import AboutSection from './HomePage/sections/About';
 import ExperiencesSection from './HomePage/sections/Experiences';
 import RoomsSection from './HomePage/sections/Rooms';
 import TestimonialsSection from './HomePage/sections/Testimonials';
@@ -12,7 +11,8 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import AboutSection from './HomePage/sections/About';export default function HomePage(): React.JSX.Element {
   return (
     <>
       <HomeSection />

src/pages/HomePage/sections/About.tsx

@@ -1,19 +1,75 @@
-// Created by add_section_from_catalog (AboutMediaOverlay).
+import { motion } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Tag from "@/components/ui/Tag";
+import { Star, BedDouble, MapPin, ConciergeBell } from "lucide-react";
 
-import React from 'react';
-import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
+export default function AboutSection() {
+  const features = [
+    {
+      icon: <Star className="w-6 h-6 text-primary-cta" />,
+      title: "Five-Star Amenities",
+      description: "Enjoy our world-class spa, fitness center, and infinity pool.",
+    },
+    {
+      icon: <BedDouble className="w-6 h-6 text-primary-cta" />,
+      title: "Luxurious Suites",
+      description: "Rest in our premium bedding and elegantly designed rooms.",
+    },
+    {
+      icon: <MapPin className="w-6 h-6 text-primary-cta" />,
+      title: "Prime Location",
+      description: "Located in the heart of the city, steps away from major attractions.",
+    },
+    {
+      icon: <ConciergeBell className="w-6 h-6 text-primary-cta" />,
+      title: "24/7 Concierge",
+      description: "Our dedicated staff is available around the clock to assist you.",
+    },
+  ];
 
-export default function AboutSection(): React.JSX.Element {
   return (
-    <div data-webild-section="about" id="about">
-      <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>
+    <section className="relative w-full py-24 bg-background" data-webild-section="about" id="about">
+      <div className="w-content-width mx-auto px-6">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
+          
+          {/* Left Column: Headline & Text */}
+          <ScrollReveal variant="slide-up" className="flex flex-col items-start space-y-6">
+            <Tag text="Premium Experience" />
+            <TextAnimation 
+              text="Grandeur Hotel: A Sanctuary of Elegance" 
+              variant="slide-up" 
+              tag="h2" 
+              gradientText={false} 
+              className="text-4xl md:text-5xl font-bold text-foreground leading-tight" 
+            />
+            <p className="text-lg text-muted-foreground">
+              Experience five-star amenities, luxurious suites with premium bedding, prime location in the heart of the city, and personalized 24/7 concierge services.
+            </p>
+            <div className="flex flex-wrap gap-4 pt-4">
+              <Button text="Our Story" variant="primary" href="#" />
+              <Button text="Virtual Tour" variant="secondary" href="#" />
+            </div>
+          </ScrollReveal>
+
+          {/* Right Column: Icon Boxes */}
+          <ScrollReveal variant="fade-blur" delay={0.2} className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {features.map((feature, index) => (
+              <div key={index} className="card p-6 flex flex-col items-start space-y-4 rounded-theme">
+                <div className="p-3 bg-background rounded-full shadow-sm">
+                  {feature.icon}
+                </div>
+                <div>
+                  <h3 className="text-xl font-semibold text-foreground mb-2">{feature.title}</h3>
+                  <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
+                </div>
+              </div>
+            ))}
+          </ScrollReveal>
+
+        </div>
+      </div>
+    </section>
   );
-}
+}