Merge version_2 into main #1
196
src/app/page.tsx
196
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={[
|
||||
{
|
||||
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"
|
||||
}
|
||||
]}
|
||||
products={menuItems.map(item => ({
|
||||
...item,
|
||||
onProductClick: () => setSelectedMenuItem(item.id)
|
||||
}))}
|
||||
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={[
|
||||
{
|
||||
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"
|
||||
}
|
||||
]}
|
||||
testimonials={reviews.map(review => ({
|
||||
...review,
|
||||
onClick: () => setSelectedReview(review.id)
|
||||
})) as any}
|
||||
/>
|
||||
{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: [
|
||||
|
||||
Reference in New Issue
Block a user