src/pages/HomePage/sections/About.tsx

@@ -2,6 +2,7 @@
 // @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";
 
 const primaryButton = {
   text: "Our Story",
@@ -21,28 +22,37 @@ interface AboutTextProps {
 const AboutInline = () => {
   return (
     <section aria-label="About section" className="py-20">
-      <div className="w-content-width mx-auto flex flex-col gap-2 items-center">
-        <TextAnimation
-          text={"Grandeur Hotel: A Sanctuary of Elegance"}
-          variant="fade"
-          gradientText={false}
-          tag="h2"
-          className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-        />
+      <div className="w-content-width mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        <div className="flex flex-col gap-6">
+          <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"
+          />
 
-        <ul className="mt-8 space-y-4 text-lg text-muted-foreground max-w-2xl text-center">
-          <li>• Five-Star Amenities including world-class dining and spa</li>
-          <li>• Luxurious Suites with premium bedding and stunning views</li>
-          <li>• Prime Location in the heart of the city</li>
-          <li>• Personalized 24/7 concierge services</li>
-        </ul>
+          <ul className="space-y-4 text-lg text-muted-foreground">
+            <li>• Five-Star Amenities including world-class dining and spa</li>
+            <li>• Luxurious Suites with premium bedding and stunning views</li>
+            <li>• Prime Location in the heart of the city</li>
+            <li>• Personalized 24/7 concierge services</li>
+          </ul>
 
-        {(primaryButton || secondaryButton) && (
-          <div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3">
-            {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />}
-            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
-          </div>
-        )}
+          {(primaryButton || secondaryButton) && (
+            <div className="flex flex-wrap gap-3 mt-2">
+              {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="relative aspect-square lg:aspect-[4/5] w-full rounded-2xl overflow-hidden">
+          <ImageOrVideo 
+            imageSrc="https://picsum.photos/seed/610319491/1200/800" 
+            className="w-full h-full object-cover"
+          />
+        </div>
       </div>
     </section>
   );