|
|
|
|
@@ -1,75 +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 Card from "@/components/ui/Card";
|
|
|
|
|
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 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">
|
|
|
|
|
<Card className="flex-grow flex flex-col justify-center p-8">
|
|
|
|
|
<ul className="space-y-6 text-lg text-muted-foreground">
|
|
|
|
|
<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>
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
{(primaryButton || secondaryButton) && (
|
|
|
|
|
<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>
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
|
<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="absolute inset-0 w-full h-full object-cover"
|
|
|
|
|
{/* 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"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default function AboutSection() {
|
|
|
|
|
return (
|
|
|
|
|
<div data-webild-section="about" id="about">
|
|
|
|
|
<AboutInline />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
