Merge version_18_1781012229068 into main

Merge version_18_1781012229068 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f5f5f5;
-  --primary-cta: #ffdf7d;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffff;
-  --accent: #b8860b;
-  --background-accent: #8b6914;
+  --background: #fdfbf7;
+  --card: #f5f0e6;
+  --foreground: #3d3531;
+  --primary-cta: #3d3531;
+  --primary-cta-text: #fdfbf7;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #3d3531;
+  --accent: #c4b5a1;
+  --background-accent: #c4b5a1;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

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,26 +1,75 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "about" section.
+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 AboutText from '@/components/sections/about/AboutText';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+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 id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-              <AboutText
-          title="Grandeur Hotel: A Sanctuary of Elegance"
-          primaryButton={{
-            text: "Our Story",
-            href: "#",
-          }}
-          secondaryButton={{
-            text: "Virtual Tour",
-            href: "#",
-          }}
-        />
-        </SectionErrorBoundary>
+    <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>
   );
-}
+}