Update src/app/page.tsx

src/app/layout.tsx

@@ -1277,4 +1277,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -5,40 +5,11 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
 import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
 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 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) => {
-    setSelectedRoom(selectedRoom === roomId ? null : roomId);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -139,71 +110,38 @@ export default function LandingPage() {
       </div>
       
       <div id="products" data-section="products">
-        <ProductCardFive
+        <ProductCardSeven
           title="Curated Room Collection"
           description="Select from our thoughtfully designed rooms and suites"
           tag="Accommodations"
           products={[
             {
               id: "1",
+              name: "Deluxe Room",
+              price: "$250/night",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
-              imageAlt: "Deluxe Room",
-              button: { text: "View Details", onClick: () => handleViewDetails("1") }
+              imageAlt: "Deluxe Room"
             },
             {
               id: "2",
+              name: "Executive Suite",
+              price: "$450/night",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
-              imageAlt: "Executive Suite",
-              button: { text: "View Details", onClick: () => handleViewDetails("2") }
+              imageAlt: "Executive Suite"
             },
             {
               id: "3",
+              name: "Premium Suite with View",
+              price: "$650/night",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
-              imageAlt: "Premium Suite with View",
-              button: { text: "View Details", onClick: () => handleViewDetails("3") }
+              imageAlt: "Premium Suite with View"
             }
           ]}
-          gridVariant="three-columns-all-equal-width"
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
         />
-        
-        {selectedRoom && roomSpecifications[selectedRoom] && (
-          <div className="w-full max-w-4xl mx-auto mt-8 p-6 bg-card rounded-lg border border-accent">
-            <div className="space-y-4">
-              <h3 className="text-2xl font-bold text-foreground">
-                {selectedRoom === "1" ? "Deluxe Room" : selectedRoom === "2" ? "Executive Suite" : "Premium Suite with View"} Specifications
-              </h3>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <p className="text-sm text-foreground/60 mb-2">Beds</p>
-                  <p className="text-lg font-semibold text-foreground">{roomSpecifications[selectedRoom].beds}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-foreground/60 mb-2">Size</p>
-                  <p className="text-lg font-semibold text-foreground">{roomSpecifications[selectedRoom].sqft}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-foreground/60 mb-2">Price</p>
-                  <p className="text-lg font-semibold text-primary-cta">{roomSpecifications[selectedRoom].price}</p>
-                </div>
-                <div>
-                  <p className="text-sm text-foreground/60 mb-2">Amenities</p>
-                  <ul className="space-y-1">
-                    {roomSpecifications[selectedRoom].amenities.map((amenity, idx) => (
-                      <li key={idx} className="text-sm text-foreground flex items-start">
-                        <span className="mr-2">•</span>
-                        <span>{amenity}</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
       
       <div id="testimonials" data-section="testimonials">
@@ -283,4 +221,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}