Update src/app/page.tsx

src/app/page.tsx

@@ -4,13 +4,45 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
 import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
-import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
 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"
@@ -69,71 +101,143 @@ export default function LandingPage() {
       </div>
       
       <div id="features" data-section="features">
-        <FeatureCardTwentyOne
+        <ProductCardSeven
           title="World-Class Amenities"
           description="Every detail crafted for your comfort and pleasure"
           tag="Amenities"
-          accordionItems={[
-            {
-              id: "01",
-              title: "Spa & Wellness",
-              content: "Rejuvenate with our signature treatments featuring traditional Japanese therapies and modern wellness techniques."
-            },
-            {
-              id: "02",
-              title: "Fine Dining",
-              content: "Savor exquisite cuisine from award-winning chefs blending traditional and contemporary culinary arts."
-            },
-            {
-              id: "03",
-              title: "Fitness Center",
-              content: "State-of-the-art equipment and expert trainers available 24/7 to support your wellness goals."
-            },
-            {
-              id: "04",
-              title: "Sky Lounge",
-              content: "Unwind with panoramic views of Tokyo's skyline while enjoying premium cocktails and curated selections."
-            }
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
-          imageAlt="Amenities showcase"
-          useInvertedBackground="noInvert"
-          mediaPosition="left"
-        />
-      </div>
-      
-      <div id="products" data-section="products">
-        <ProductCardFive
-          title="Curated Room Collection"
-          description="Select from our thoughtfully designed rooms and suites"
-          tag="Accommodations"
           products={[
             {
               id: "1",
+              name: "Spa & Wellness",
+              price: "Rejuvenate",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
-              imageAlt: "Deluxe Room",
-              button: { text: "View Details", href: "#" }
+              imageAlt: "Spa & Wellness"
             },
             {
               id: "2",
+              name: "Fine Dining",
+              price: "Experience",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
-              imageAlt: "Executive Suite",
-              button: { text: "View Details", href: "#" }
+              imageAlt: "Fine Dining"
             },
             {
               id: "3",
+              name: "Fitness Center",
+              price: "Strengthen",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
-              imageAlt: "Premium Suite with View",
-              button: { text: "View Details", href: "#" }
+              imageAlt: "Fitness Center"
+            },
+            {
+              id: "4",
+              name: "Sky Lounge",
+              price: "Unwind",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837634719-5otl8omu.jpg",
+              imageAlt: "Sky Lounge"
             }
           ]}
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
         />
       </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>
+      </div>
+      
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardTwo
           title="Guest Experiences"