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,67 +1,75 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Tag from "@/components/ui/Tag";
+import { Star, BedDouble, MapPin, ConciergeBell } from "lucide-react";
 
-const primaryButton = {
-  text: "Our Story",
-  href: "#"
-};
-const secondaryButton = {
-  text: "Virtual Tour",
-  href: "#"
-};
+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.",
+    },
+  ];
 
-interface AboutTextProps {
-  title: string;
-  primaryButton?: { text: string; href: string };
-  secondaryButton?: { text: string; href: string };
-}
-
-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"
-          />
-
-          <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} />}
+    <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>
-          )}
-        </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"
-          />
+          </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>
   );
-};
-
-export default function AboutSection() {
-  return (
-    <div data-webild-section="about" id="about">
-      <AboutInline />
-    </div>
-  );
-}
+}