Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ea79c252a3 | |||
| 0088542b7f | |||
| 1e9b6b4300 | |||
| bb10a104d4 |
137
src/app/page.tsx
137
src/app/page.tsx
@@ -197,55 +197,94 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardSixteen
|
<div className="w-full bg-background/50 py-16 md:py-24">
|
||||||
title="What Our Customers Say"
|
<div className="max-w-6xl mx-auto px-4">
|
||||||
description="Hear from families and friends who have experienced our authentic Mexican seafood"
|
<div className="mb-12">
|
||||||
tag="Customer Reviews"
|
<p className="text-primary-cta font-semibold mb-2">Menu Gallery</p>
|
||||||
tagAnimation="slide-up"
|
<h2 className="text-4xl md:text-5xl font-extrabold text-foreground mb-4">Our Menu</h2>
|
||||||
testimonials={[
|
<p className="text-lg text-foreground/70">Browse our complete menu of authentic Mexican seafood dishes</p>
|
||||||
{
|
</div>
|
||||||
id: "testimonial-1", name: "Maria Rodriguez", role: "Family Visit", company: "Spokane Valley", rating: 5,
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12690.jpg", imageAlt: "Maria Rodriguez"
|
{[
|
||||||
},
|
{
|
||||||
{
|
id: "menu-1", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-nxkivr1l.jpg", alt: "Menu Page 1"
|
||||||
id: "testimonial-2", name: "Juan Martinez", role: "Regular Customer", company: "Local Business Owner", rating: 5,
|
},
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/life-after-covid-freedom-concept_23-2149068470.jpg", imageAlt: "Juan Martinez"
|
{
|
||||||
},
|
id: "menu-2", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-z5zcdzr7.jpg", alt: "Menu Page 2"
|
||||||
{
|
},
|
||||||
id: "testimonial-3", name: "Carmen Delgado", role: "Food Enthusiast", company: "Community Member", rating: 5,
|
{
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-cafe-dines-traditional-shakshuka-ayran_169016-16512.jpg", imageAlt: "Carmen Delgado"
|
id: "menu-3", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-lmmbhlch.jpg", alt: "Menu Page 3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "testimonial-4", name: "Miguel Santos", role: "Weekly Visitor", company: "Spokane Valley Resident", rating: 5,
|
id: "menu-4", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-gdotl1bc.jpg", alt: "Menu Page 4"
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-having-lunch-together-restaurant_23-2150520106.jpg", imageAlt: "Miguel Santos"
|
}
|
||||||
},
|
].map((menu) => (
|
||||||
{
|
<div
|
||||||
id: "testimonial-5", name: "Rosa Hernandez", role: "Event Host", company: "Community Organizer", rating: 5,
|
key={menu.id}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663840.jpg", imageAlt: "Rosa Hernandez"
|
className="relative group cursor-pointer overflow-hidden rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
|
||||||
},
|
onClick={() => {
|
||||||
{
|
const modal = document.getElementById(`modal-${menu.id}`);
|
||||||
id: "testimonial-6", name: "Diego Flores", role: "Seafood Lover", company: "Restaurant Critic", rating: 5,
|
if (modal) modal.classList.remove('hidden');
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg", imageAlt: "Diego Flores"
|
}}
|
||||||
}
|
>
|
||||||
]}
|
<img
|
||||||
kpiItems={[
|
src={menu.src}
|
||||||
{ value: "4.9/5", label: "Average Rating" },
|
alt={menu.alt}
|
||||||
{ value: "500+", label: "Happy Customers" },
|
className="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
{ value: "15 Years", label: "Community Trust" }
|
/>
|
||||||
]}
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-all duration-300 flex items-center justify-center">
|
||||||
animationType="slide-up"
|
<span className="text-white font-semibold text-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
textboxLayout="default"
|
Click to Enlarge
|
||||||
useInvertedBackground={true}
|
</span>
|
||||||
containerClassName="py-16 md:py-24"
|
</div>
|
||||||
textBoxTitleClassName="text-4xl md:text-5xl font-extrabold text-foreground"
|
</div>
|
||||||
textBoxDescriptionClassName="text-lg text-foreground/70 mt-2"
|
))}
|
||||||
textBoxTagClassName="text-primary-cta font-semibold"
|
</div>
|
||||||
cardClassName="p-6 rounded-xl"
|
{/* Modal for enlarged images */}
|
||||||
ratingClassName="text-primary-cta font-bold"
|
{[
|
||||||
nameClassName="text-lg font-bold text-foreground mt-3"
|
{
|
||||||
roleClassName="text-sm text-foreground/70"
|
id: "menu-1", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-nxkivr1l.jpg", alt: "Menu Page 1"
|
||||||
companyClassName="text-xs text-foreground/50 mt-1"
|
},
|
||||||
/>
|
{
|
||||||
|
id: "menu-2", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-z5zcdzr7.jpg", alt: "Menu Page 2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "menu-3", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-lmmbhlch.jpg", alt: "Menu Page 3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "menu-4", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Am2LJhLLWUokyhthLvKyFV0QpK/uploaded-1773513245125-gdotl1bc.jpg", alt: "Menu Page 4"
|
||||||
|
}
|
||||||
|
].map((menu) => (
|
||||||
|
<div
|
||||||
|
key={`modal-${menu.id}`}
|
||||||
|
id={`modal-${menu.id}`}
|
||||||
|
className="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
|
||||||
|
onClick={(e) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
e.currentTarget.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="relative max-w-4xl max-h-[90vh] w-full">
|
||||||
|
<img
|
||||||
|
src={menu.src}
|
||||||
|
alt={menu.alt}
|
||||||
|
className="w-full h-auto max-h-[90vh] object-contain"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const modal = document.getElementById(`modal-${menu.id}`);
|
||||||
|
if (modal) modal.classList.add('hidden');
|
||||||
|
}}
|
||||||
|
className="absolute top-4 right-4 bg-white text-black rounded-full w-10 h-10 flex items-center justify-center font-bold hover:bg-foreground hover:text-white transition-all"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
|
|||||||
Reference in New Issue
Block a user