75 lines
No EOL
3.3 KiB
TypeScript
75 lines
No EOL
3.3 KiB
TypeScript
import accommodationImage2 from "../assets/accommodation-2.jpg";
|
|
|
|
const PremierBargain = () => {
|
|
return (
|
|
<section className="section-dark py-20 px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h2 className="text-6xl font-light text-[hsl(var(--dark-foreground))] mb-2">
|
|
Premier
|
|
</h2>
|
|
<h2 className="text-6xl font-light text-wood-accent">
|
|
Bargain
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="border-l-4 border-wood-accent pl-6">
|
|
<h3 className="text-2xl font-medium text-[hsl(var(--dark-foreground))] mb-2">
|
|
Midtown Manhattan Retreat
|
|
</h3>
|
|
<p className="text-[hsl(var(--dark-muted))] mb-4">
|
|
Experience luxury in the heart of Manhattan with our exclusive premier suite featuring panoramic city views and world-class amenities.
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-3xl font-light text-wood-accent">$200</span>
|
|
<span className="text-[hsl(var(--dark-muted))]">/night</span>
|
|
<span className="text-sm text-[hsl(var(--dark-muted))] line-through">$350/night</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">4.9/5</div>
|
|
<p className="text-[hsl(var(--dark-muted))] text-sm">Guest Rating</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="text-lg font-medium text-[hsl(var(--dark-foreground))]">1,200+</div>
|
|
<p className="text-[hsl(var(--dark-muted))] text-sm">Reviews</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button className="btn-secondary bg-wood-accent text-primary hover:bg-wood-accent/90">
|
|
Book Premier Deal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<div className="card-elevated bg-[hsl(var(--dark-muted))] p-0 overflow-hidden rounded-3xl">
|
|
<img
|
|
src={accommodationImage2}
|
|
alt="Premier Manhattan suite interior"
|
|
className="w-full h-96 object-cover"
|
|
/>
|
|
<div className="absolute top-6 right-6 bg-wood-accent text-primary px-4 py-2 rounded-lg">
|
|
<span className="text-sm font-medium">43% OFF</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute -bottom-4 -left-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
|
|
<span className="text-white text-sm">2 rooms left at this price</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default PremierBargain; |