Update src/app/page.tsx

src/app/page.tsx

@@ -12,8 +12,39 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { ChefHat, Fish, Heart, Sparkles, Star } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [selectedReview, setSelectedReview] = useState<string | null>(null);
+  const [selectedMenuItem, setSelectedMenuItem] = useState<string | null>(null);
+
+  const menuItems = [
+    {
+      id: "dish-1",      name: "Seafood Boil Combo",      price: "$45",      imageSrc: "http://img.b2bpic.net/free-photo/uncooked-meat-piece-with-vegetables-blue-table_114579-14748.jpg",      imageAlt: "Cajun-style seafood boil with shrimp, lobster, mussels"
+    },
+    {
+      id: "dish-2",      name: "Garlic Butter Shrimp Pasta",      price: "$38",      imageSrc: "http://img.b2bpic.net/free-psd/delicious-garlic-shrimp-pasta-with-herbs-parmesan_84443-59503.jpg",      imageAlt: "Creamy garlic shrimp pasta with fresh herbs"
+    },
+    {
+      id: "dish-3",      name: "Butter-Poached Lobster Tail",      price: "$52",      imageSrc: "http://img.b2bpic.net/free-photo/grilled-lobster-with-butter-garlic_1203-9963.jpg",      imageAlt: "Premium lobster tail with drawn butter and lemon"
+    }
+  ];
+
+  const reviews = [
+    {
+      id: "testimonial-1",      name: "Sarah Mitchell",      imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",      imageAlt: "Sarah Mitchell, satisfied restaurant customer"
+    },
+    {
+      id: "testimonial-2",      name: "James Chen",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-attractive-adult-male-with-beard-sitting-open-terrace-typing-laptop-looking-screen-with-interested-smile-using-wi-fi-communicate-online-while-away-vacations_273609-6597.jpg",      imageAlt: "James Chen, happy diner"
+    },
+    {
+      id: "testimonial-3",      name: "Emily Rodriguez",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",      imageAlt: "Emily Rodriguez, loyal customer"
+    },
+    {
+      id: "testimonial-4",      name: "Michael Johnson",      imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-with-bright-smile_23-2148563438.jpg",      imageAlt: "Michael Johnson, premium diner"
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -29,7 +60,7 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple
-          brandName="Seafood Premium"
+          brandName="Submarine Crab"
           navItems={[
             { name: "Menu", id: "menu" },
             { name: "About", id: "about" },
@@ -114,17 +145,10 @@ export default function LandingPage() {
         <ProductCardThree
           title="Customer Favorites"
           description="Signature dishes that keep our guests coming back"
-          products={[
+          products={menuItems.map(item => ({
-            {
+            ...item,
-              id: "dish-1",              name: "Seafood Boil Combo",              price: "$45",              imageSrc: "http://img.b2bpic.net/free-photo/uncooked-meat-piece-with-vegetables-blue-table_114579-14748.jpg",              imageAlt: "Cajun-style seafood boil with shrimp, lobster, mussels"
+            onProductClick: () => setSelectedMenuItem(item.id)
-            },
+          }))}
-            {
-              id: "dish-2",              name: "Garlic Butter Shrimp Pasta",              price: "$38",              imageSrc: "http://img.b2bpic.net/free-psd/delicious-garlic-shrimp-pasta-with-herbs-parmesan_84443-59503.jpg",              imageAlt: "Creamy garlic shrimp pasta with fresh herbs"
-            },
-            {
-              id: "dish-3",              name: "Butter-Poached Lobster Tail",              price: "$52",              imageSrc: "http://img.b2bpic.net/free-photo/grilled-lobster-with-butter-garlic_1203-9963.jpg",              imageAlt: "Premium lobster tail with drawn butter and lemon"
-            }
-          ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
@@ -133,6 +157,68 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           carouselMode="buttons"
         />
+        {selectedMenuItem && (
+          <div style={{
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'var(--card)',
+            padding: '2rem',
+            borderRadius: '0.5rem',
+            boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
+            zIndex: 1000,
+            maxWidth: '90%',
+            maxHeight: '80vh',
+            overflow: 'auto'
+          }}>
+            <button
+              onClick={() => setSelectedMenuItem(null)}
+              style={{
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+                backgroundColor: 'var(--primary-cta)',
+                color: 'var(--primary-cta-text)',
+                border: 'none',
+                padding: '0.5rem 1rem',
+                borderRadius: '0.25rem',
+                cursor: 'pointer'
+              }}
+            >
+              Close
+            </button>
+            {menuItems.find(item => item.id === selectedMenuItem) && (
+              <div>
+                <img
+                  src={menuItems.find(item => item.id === selectedMenuItem)!.imageSrc}
+                  alt={menuItems.find(item => item.id === selectedMenuItem)!.imageAlt}
+                  style={{ width: '100%', borderRadius: '0.5rem', marginBottom: '1rem' }}
+                />
+                <h3 style={{ color: 'var(--foreground)', marginBottom: '0.5rem' }}>
+                  {menuItems.find(item => item.id === selectedMenuItem)!.name}
+                </h3>
+                <p style={{ color: 'var(--primary-cta)', fontSize: '1.25rem', fontWeight: 'bold' }}>
+                  {menuItems.find(item => item.id === selectedMenuItem)!.price}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+        {selectedMenuItem && (
+          <div
+            onClick={() => setSelectedMenuItem(null)}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              zIndex: 999
+            }}
+          />
+        )}
       </div>
 
       <div id="social-proof" data-section="social-proof">
@@ -157,21 +243,77 @@ export default function LandingPage() {
           cardTagIcon={Star}
           cardAnimation="blur-reveal"
           useInvertedBackground={false}
-          testimonials={[
+          testimonials={reviews.map(review => ({
-            {
+            ...review,
-              id: "testimonial-1",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",              imageAlt: "Sarah Mitchell, satisfied restaurant customer"
+            onClick: () => setSelectedReview(review.id)
-            },
+          })) as any}
-            {
-              id: "testimonial-2",              name: "James Chen",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-attractive-adult-male-with-beard-sitting-open-terrace-typing-laptop-looking-screen-with-interested-smile-using-wi-fi-communicate-online-while-away-vacations_273609-6597.jpg",              imageAlt: "James Chen, happy diner"
-            },
-            {
-              id: "testimonial-3",              name: "Emily Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",              imageAlt: "Emily Rodriguez, loyal customer"
-            },
-            {
-              id: "testimonial-4",              name: "Michael Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-with-bright-smile_23-2148563438.jpg",              imageAlt: "Michael Johnson, premium diner"
-            }
-          ]}
         />
+        {selectedReview && (
+          <div style={{
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'var(--card)',
+            padding: '2rem',
+            borderRadius: '0.5rem',
+            boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
+            zIndex: 1000,
+            maxWidth: '90%',
+            maxHeight: '80vh',
+            overflow: 'auto'
+          }}>
+            <button
+              onClick={() => setSelectedReview(null)}
+              style={{
+                position: 'absolute',
+                top: '1rem',
+                right: '1rem',
+                backgroundColor: 'var(--primary-cta)',
+                color: 'var(--primary-cta-text)',
+                border: 'none',
+                padding: '0.5rem 1rem',
+                borderRadius: '0.25rem',
+                cursor: 'pointer'
+              }}
+            >
+              Close
+            </button>
+            {reviews.find(review => review.id === selectedReview) && (
+              <div>
+                <img
+                  src={reviews.find(review => review.id === selectedReview)!.imageSrc}
+                  alt={reviews.find(review => review.id === selectedReview)!.imageAlt}
+                  style={{
+                    width: '100px',
+                    height: '100px',
+                    borderRadius: '50%',
+                    marginBottom: '1rem',
+                    objectFit: 'cover'
+                  }}
+                />
+                <h3 style={{ color: 'var(--foreground)', marginBottom: '0.5rem' }}>
+                  {reviews.find(review => review.id === selectedReview)!.name}
+                </h3>
+                <p style={{ color: 'var(--foreground)' }}>5-star verified review</p>
+              </div>
+            )}
+          </div>
+        )}
+        {selectedReview && (
+          <div
+            onClick={() => setSelectedReview(null)}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(0,0,0,0.5)',
+              zIndex: 999
+            }}
+          />
+        )}
       </div>
 
       <div id="faq" data-section="faq">
@@ -222,7 +364,7 @@ export default function LandingPage() {
 
       <div id="footer" data-section="footer">
         <FooterLogoEmphasis
-          logoText="Seafood Premium"
+          logoText="Submarine Crab"
           columns={[
             {
               items: [