Merge version_7 into main
Merge version_7 into main
This commit was merged in pull request #7.
This commit is contained in:
162
src/app/page.tsx
162
src/app/page.tsx
@@ -9,40 +9,8 @@ import ProductCardFive from '@/components/sections/product/ProductCardFive';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [selectedRoom, setSelectedRoom] = useState<string | null>(null);
|
||||
const [flipped, setFlipped] = useState<Record<string, boolean>>({});
|
||||
|
||||
const roomSpecifications: Record<string, { beds: string; sqft: string; amenities: string[]; price: string }> = {
|
||||
"1": {
|
||||
beds: "King Bed",
|
||||
sqft: "450 sq ft",
|
||||
amenities: ["Premium bedding", "City view", "Marble bathroom", "Premium toiletries", "In-room dining"],
|
||||
price: "$250/night"
|
||||
},
|
||||
"2": {
|
||||
beds: "Two Queen Beds or King Bed",
|
||||
sqft: "650 sq ft",
|
||||
amenities: ["Premium bedding", "Panoramic city view", "Luxury spa bathroom", "Separate living area", "In-room dining", "Executive lounge access"],
|
||||
price: "$450/night"
|
||||
},
|
||||
"3": {
|
||||
beds: "King Bed + Sofa",
|
||||
sqft: "850 sq ft",
|
||||
amenities: ["Premium bedding", "Panoramic Tokyo view", "Full marble bathroom with soaking tub", "Separate living and dining areas", "In-room fine dining", "Executive concierge", "Premium entertainment system"],
|
||||
price: "$650/night"
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewDetails = (roomId: string) => {
|
||||
setFlipped(prev => ({
|
||||
...prev,
|
||||
[roomId]: !prev[roomId]
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
@@ -143,99 +111,43 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<div className="w-full">
|
||||
{/* Header */}
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-4">Curated Room Collection</h2>
|
||||
<p className="text-base sm:text-lg text-foreground/70 max-w-2xl">Select from our thoughtfully designed rooms and suites</p>
|
||||
</div>
|
||||
|
||||
{/* Flip Cards Grid */}
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
||||
{[
|
||||
{ id: "1", title: "Deluxe Room", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg", imageAlt: "Deluxe Room" },
|
||||
{ id: "2", title: "Executive Suite", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg", imageAlt: "Executive Suite" },
|
||||
{ id: "3", title: "Premium Suite with View", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg", imageAlt: "Premium Suite with View" }
|
||||
].map((room) => (
|
||||
<div key={room.id} className="h-96 sm:h-80 perspective">
|
||||
<div
|
||||
className="relative w-full h-full transition-transform duration-500 ease-in-out"
|
||||
style={{
|
||||
transformStyle: 'preserve-3d',
|
||||
transform: flipped[room.id] ? 'rotateY(180deg)' : 'rotateY(0deg)'
|
||||
}}
|
||||
>
|
||||
{/* Front of Card */}
|
||||
<div
|
||||
className="absolute w-full h-full p-4 sm:p-6 bg-card rounded-lg border border-accent/30 flex flex-col items-center justify-center cursor-pointer hover:border-accent/60 transition-colors"
|
||||
style={{ backfaceVisibility: 'hidden' }}
|
||||
onClick={() => handleViewDetails(room.id)}
|
||||
>
|
||||
<img
|
||||
src={room.imageSrc}
|
||||
alt={room.imageAlt}
|
||||
className="w-full h-full object-cover rounded-md mb-4"
|
||||
/>
|
||||
<h3 className="text-lg sm:text-xl font-bold text-foreground text-center mb-3">{room.title}</h3>
|
||||
<button
|
||||
className="px-4 sm:px-6 py-2 bg-primary-cta text-foreground/90 rounded-lg hover:bg-primary-cta/90 transition-all font-medium text-sm sm:text-base"
|
||||
onClick={() => handleViewDetails(room.id)}
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Back of Card */}
|
||||
<div
|
||||
className="absolute w-full h-full p-4 sm:p-6 bg-card rounded-lg border border-accent/30 flex flex-col justify-center cursor-pointer hover:border-accent/60 transition-colors overflow-y-auto"
|
||||
style={{
|
||||
backfaceVisibility: 'hidden',
|
||||
transform: 'rotateY(180deg)'
|
||||
}}
|
||||
onClick={() => handleViewDetails(room.id)}
|
||||
>
|
||||
<h3 className="text-xl sm:text-2xl font-bold text-foreground mb-4">{room.title} Specifications</h3>
|
||||
|
||||
<div className="space-y-4 text-sm sm:text-base">
|
||||
<div>
|
||||
<p className="text-foreground/60 font-semibold mb-1">Beds</p>
|
||||
<p className="text-foreground">{roomSpecifications[room.id].beds}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-foreground/60 font-semibold mb-1">Size</p>
|
||||
<p className="text-foreground">{roomSpecifications[room.id].sqft}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-foreground/60 font-semibold mb-1">Price</p>
|
||||
<p className="text-primary-cta font-bold text-lg">{roomSpecifications[room.id].price}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-foreground/60 font-semibold mb-2">Amenities</p>
|
||||
<ul className="space-y-1">
|
||||
{roomSpecifications[room.id].amenities.map((amenity, idx) => (
|
||||
<li key={idx} className="text-foreground/80 flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>{amenity}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="mt-4 px-4 py-2 bg-secondary-cta border border-accent text-foreground rounded-lg hover:bg-secondary-cta/80 transition-all font-medium text-sm sm:text-base"
|
||||
onClick={() => handleViewDetails(room.id)}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ProductCardFive
|
||||
title="Curated Room Collection"
|
||||
description="Select from our thoughtfully designed rooms and suites"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Deluxe Room",
|
||||
price: "$250/night",
|
||||
variant: "King Bed • 450 sq ft",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
|
||||
imageAlt: "Deluxe Room",
|
||||
isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Executive Suite",
|
||||
price: "$450/night",
|
||||
variant: "Two Queen or King • 650 sq ft",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
|
||||
imageAlt: "Executive Suite",
|
||||
isFavorited: false
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Premium Suite with View",
|
||||
price: "$650/night",
|
||||
variant: "King Bed + Sofa • 850 sq ft",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
|
||||
imageAlt: "Premium Suite with View",
|
||||
isFavorited: false
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
|
||||
Reference in New Issue
Block a user