From 6e4a35caf83a2ff396948a34bde481feb0f77512 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 9 Jun 2026 13:04:31 +0000
Subject: [PATCH] Bob AI: Refined about section layout and styling

---
 src/pages/HomePage/sections/About.tsx | 40 +++++++++++++++------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
index 941dd5e..a6d769d 100644
--- a/src/pages/HomePage/sections/About.tsx
+++ b/src/pages/HomePage/sections/About.tsx
@@ -3,6 +3,7 @@
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import Tag from "@/components/ui/Tag";
 
 const primaryButton = {
   text: "Our Story",
@@ -22,35 +23,38 @@ interface AboutTextProps {
 const AboutInline = () => {
   return (
     <section aria-label="About section" className="py-20">
-      <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-2 gap-4 md:gap-12 items-center">
-          <div className="flex flex-col gap-6">
-            <ul className="space-y-4 text-lg text-muted-foreground bg-card p-6 rounded-2xl">
-              <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>
+      <div className="w-content-width mx-auto flex flex-col gap-8">
+        <div className="flex flex-col gap-4 items-start">
+          <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"
+          />
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-stretch">
+          <div className="flex flex-col gap-6 h-full">
+            <ul className="space-y-6 text-lg text-muted-foreground bg-card p-8 rounded-2xl border border-border flex-grow flex flex-col justify-center">
+              <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>
 
             {(primaryButton || secondaryButton) && (
-              <div className="flex flex-wrap gap-3 mt-2">
+              <div className="flex flex-wrap gap-4 mt-auto">
                 {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">
+          <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="w-full h-full object-cover"
+              className="absolute inset-0 w-full h-full object-cover"
             />
           </div>
         </div>
-- 
2.49.1