src/pages/HomePage/sections/About.tsx

@@ -22,36 +22,37 @@ interface AboutTextProps {
 const AboutInline = () => {
   return (
     <section aria-label="About section" className="py-20">
-      <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"
-          />
+      <div className="w-content-width mx-auto flex flex-col gap-12">
+        <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"
+        />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <div className="flex flex-col gap-6">
+            <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>
 
-          <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 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"
-          />
+            {(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>
       </div>
     </section>