From a82dae84c3d22bca8a6c8a30b5282a8cd17b028e Mon Sep 17 00:00:00 2001
From: development <mulikavj@gmail.com>
Date: Mon, 29 Dec 2025 09:01:02 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 162 +++++++++++------------------------------------
 1 file changed, 37 insertions(+), 125 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6e9a23e..0655e68 100644
--- a/src/app/page.tsx
+++ b/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">
-- 
2.49.1