Merge version_30_1780498473353 into main #30

Merged
bender merged 1 commits from version_30_1780498473353 into main 2026-06-03 14:56:20 +00:00

View File

@@ -8,53 +8,53 @@ import { Check } from "lucide-react";
export default function AboutSection() {
return (
<section data-webild-section="about" id="about" className="bg-background py-24">
<div className="max-w-content-width mx-auto px-6">
<ScrollReveal variant="slide-up">
<div className="text-center max-w-3xl mx-auto mb-16 space-y-6">
<Tag text="About Us" />
<h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
A Legacy of Unparalleled Hospitality
</h2>
<p className="text-lg text-muted-foreground leading-relaxed">
Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
</p>
</div>
</ScrollReveal>
<div className="max-w-content-width mx-auto px-6">
<ScrollReveal variant="slide-up">
<div className="bg-card border border-border rounded-theme p-8 md:p-12 mb-16 space-y-6 max-w-4xl mx-auto text-left">
<Tag text="About Us" />
<h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
A Legacy of Unparalleled Hospitality
</h2>
<p className="text-lg text-muted-foreground leading-relaxed">
Nestled in the heart of the city, The Grand Hotel has been a beacon of luxury and comfort for over a century. Our commitment to excellence is reflected in every detail, from our meticulously designed rooms to our world-class dining experiences.
</p>
</div>
</ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<ScrollReveal variant="slide-up">
<div className="space-y-8">
<ul className="space-y-4">
{[
"Award-winning fine dining restaurants",
"World-class spa and wellness center",
"24/7 personalized concierge service",
"Breathtaking panoramic city views",
"State-of-the-art fitness facilities"
].map((item, index) => (
<li key={index} className="flex items-center gap-3">
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
<Check className="w-4 h-4 text-primary" />
</div>
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
<Button text="Discover Our Story" variant="primary" />
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
<ScrollReveal variant="slide-up">
<div className="space-y-8">
<ul className="space-y-4">
{[
"Award-winning fine dining restaurants",
"World-class spa and wellness center",
"24/7 personalized concierge service",
"Breathtaking panoramic city views",
"State-of-the-art fitness facilities"
].map((item, index) => (
<li key={index} className="flex items-center gap-3">
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
<Check className="w-4 h-4 text-primary" />
</div>
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
<Button text="Discover Our Story" variant="primary" />
</div>
</ScrollReveal>
<ScrollReveal variant="fade">
<div className="relative h-[500px] rounded-theme overflow-hidden">
<ImageOrVideo
imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/10"></div>
</div>
</ScrollReveal>
</div>
</ScrollReveal>
<ScrollReveal variant="fade">
<div className="relative h-[500px] rounded-theme overflow-hidden">
<ImageOrVideo
imageSrc="https://images.unsplash.com/photo-1542314831-c6a4d14d837e?q=80&w=2000&auto=format&fit=crop"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/10"></div>
</div>
</ScrollReveal>
</div>
</div>
</section>
</div>
</section>
);
}