Bob AI: Fix grid columns in about section to show image on the right

Merge version_28_1780498219714 into main

src/pages/HomePage.tsx

@@ -18,6 +18,9 @@ import ContactSection from './HomePage/sections/Contact';
 
 
 
+
+{/* webild-stub @2026-06-03T14:44:17.404Z: in the hero section on top of the big image let's add floating cards with kpi number and description. */}
+
 {/* webild-stub @2026-06-03T14:42:44.419Z: in the hero section on top of the big image let's add floating cards with kpi number and description. on mouse move they should have a nice moving animation */}
 
 {/* webild-stub @2026-06-03T14:40:24.768Z: add floating KPI cards in the hero section, they should move with a parallax effect as I move my mouse around in the hero section */}

src/pages/HomePage/sections/About.tsx

@@ -1,11 +1,60 @@
 import React from 'react';
+import Tag from "@/components/ui/Tag";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Button from "@/components/ui/Button";
+import { Check } from "lucide-react";
 
 export default function AboutSection() {
   return (
-    <section id="about" className="bg-background">
-      <div className="max-w-content-width mx-auto px-6 text-center">
-        {/* Text 'Our Legacy of Hospitality' removed as requested */}
+    <section data-webild-section="about" id="about" className="bg-background py-24">
+  <div className="max-w-content-width mx-auto px-6">
+    <ScrollReveal variant="slide-up">
+      <div className="text-center max-w-3xl mx-auto mb-16 space-y-6">
+        <Tag text="About Us" />
+        <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
+          A Legacy of Unparalleled Hospitality
+        </h2>
+        <p className="text-lg text-muted-foreground leading-relaxed">
+          Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
+        </p>
       </div>
-    </section>
+    </ScrollReveal>
+
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+      <ScrollReveal variant="slide-up">
+        <div className="space-y-8">
+          <ul className="space-y-4">
+            {[
+              "Award-winning fine dining restaurants",
+              "World-class spa and wellness center",
+              "24/7 personalized concierge service",
+              "Breathtaking panoramic city views",
+              "State-of-the-art fitness facilities"
+            ].map((item, index) => (
+              <li key={index} className="flex items-center gap-3">
+                <div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+                  <Check className="w-4 h-4 text-primary" />
+                </div>
+                <span className="text-foreground">{item}</span>
+              </li>
+            ))}
+          </ul>
+          <Button text="Discover Our Story" variant="primary" />
+        </div>
+      </ScrollReveal>
+      
+      <ScrollReveal variant="fade">
+        <div className="relative h-[500px] rounded-theme overflow-hidden">
+          <ImageOrVideo 
+            imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/10"></div>
+        </div>
+      </ScrollReveal>
+    </div>
+  </div>
+</section>
   );
 }