Compare commits
8 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| f2e158417c | |||
|
|
507b8089af | ||
| 11dd42d2d5 | |||
|
|
ebdecb29ac | ||
| 9796406679 | |||
|
|
3c06ac5fcc | ||
| 60de31312b | |||
|
|
3aaaee4e5a |
@@ -42,7 +42,7 @@ export default function Layout() {
|
||||
<SiteBackgroundSlot />
|
||||
<SectionErrorBoundary name="navbar">
|
||||
<NavbarFloating
|
||||
logo="Pupusa Haven"
|
||||
logo="Pupusas Deli"
|
||||
ctaButton={{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
@@ -54,8 +54,21 @@ export default function Layout() {
|
||||
</main>
|
||||
<SectionErrorBoundary name="footer">
|
||||
<FooterSimple
|
||||
brand="Pupusa Haven"
|
||||
brand="Pupusas Deli"
|
||||
columns={[
|
||||
{
|
||||
title: "Location",
|
||||
items: [
|
||||
{
|
||||
label: "2615 Little Rock Rd",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Charlotte, NC 28214",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
@@ -91,7 +104,7 @@ export default function Layout() {
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyright="© 2024 Pupusa Haven. All rights reserved."
|
||||
copyright="© 2024 Pupusas Deli. All rights reserved."
|
||||
links={[
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
|
||||
@@ -1,226 +1,35 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
|
||||
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { Award, Heart, Smile } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import MenuSection from './HomePage/sections/Menu';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import PopularItemsSection from './HomePage/sections/PopularItems';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="Authentic Delicacies"
|
||||
title="If happiness had a smell, it would be fresh pupusas."
|
||||
description="Hearty, authentic, and always fresh to order. Experience the true taste of El Salvador in the heart of the city."
|
||||
primaryButton={{
|
||||
text: "See Menu",
|
||||
href: "#menu",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Find Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-grilled-arepas-basket_23-2148716351.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-indian-dosa-arrangement_23-2149086032.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arepas-plate-with-corn_23-2148708248.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/main-course-restaurant_7939-2376.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-food-assortment_23-2148747701.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arepas-dough-grill-pan_23-2148716421.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-food-frame-with-copy-space_23-2148716376.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arepas-dough-wooden-board_23-2148716322.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arepas-bowl-with-cloth_23-2148742385.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-salad-with-herbs-upper-side-it-dark-background_140725-80582.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arepas-with-flour-bowl_23-2148716370.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-dumplings-with-pork-meat-placemat-against-black-backdrop_23-2148123681.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="A Little Piece of Home"
|
||||
description="We are a small, family-run deli serving up hearty portions and warm hospitality. From the moment you walk in, you'll feel like family."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dining-room-background-zoom-calls_23-2149684443.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesRevealCards
|
||||
tag="Our Signature Dishes"
|
||||
title="Freshness in Every Bite"
|
||||
description="We take pride in our recipes, passed down through generations."
|
||||
items={[
|
||||
{
|
||||
title: "Traditional Pupusas",
|
||||
description: "Handmade with fresh cheese, beans, and seasoned chicharron, griddled to perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-arab-food-tea_23-2147796937.jpg",
|
||||
},
|
||||
{
|
||||
title: "Authentic Horchata",
|
||||
description: "Not too sweet, not powdery. A perfect cooling treat for any meal.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-cocktail-purple-background_23-2150251314.jpg",
|
||||
},
|
||||
{
|
||||
title: "Cabbage Salad",
|
||||
description: "Crisp, tangy curtido prepared fresh daily to accompany every order.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-taco-ingredients_23-2148629329.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MenuSection />
|
||||
<PopularItemsSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Community Favorites"
|
||||
title="Why Our Guests Love Us"
|
||||
description="High standards and satisfied appetites keep our griddle busy."
|
||||
metrics={[
|
||||
{
|
||||
icon: Smile,
|
||||
title: "Happy Guests",
|
||||
value: "10,000+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Years Served",
|
||||
value: "7",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Pupusas Sold",
|
||||
value: "50,000+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Guest Voices"
|
||||
title="What Our Friends Are Saying"
|
||||
description="Hearty, fresh, and friendly — hear why our regulars keep coming back."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Foodie",
|
||||
quote: "Best pupusas in the city! Totally delicious and authentic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-selfie-with-food_23-2147826855.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Local Guide",
|
||||
quote: "Pleasant little deli with hearty food and friendly service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-smiling-confident-looking-side-street_839833-24417.jpg",
|
||||
},
|
||||
{
|
||||
name: "Katia Rodriguez",
|
||||
role: "Traveler",
|
||||
quote: "The pupusas tasted great! I got one of each and a chicken quesadilla.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/summer-vibes-sunny-day_23-2151961723.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ashley Pico",
|
||||
role: "Regular",
|
||||
quote: "So good! The horchata was tasty not to sweet. Definitely worth it.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-smiling-woman_171337-4210.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ian",
|
||||
role: "Frequent Guest",
|
||||
quote: "The cheese pupusa is simply perfect, I can't imagine how you could improve it.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-with-delicious-food_23-2149250117.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Common Questions"
|
||||
title="Need More Information?"
|
||||
description="Here is everything you need to know about our pupusa deli."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "We are conveniently located not too far from the airport!",
|
||||
},
|
||||
{
|
||||
question: "Do you accept walk-ins?",
|
||||
answer: "Yes, absolutely! We love seeing new faces every day.",
|
||||
},
|
||||
{
|
||||
question: "Are your pupusas made fresh?",
|
||||
answer: "Always made fresh to order, just the way you like them.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Visit Us"
|
||||
text="Come visit our deli today and taste authentic Salvadoran pupusas made with love."
|
||||
primaryButton={{
|
||||
text: "Get Directions",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us",
|
||||
href: "tel:5555555555",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
21
src/pages/HomePage/sections/About.tsx
Normal file
21
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="A Little Piece of Home"
|
||||
description="We are a small, family-run deli serving up hearty portions and warm hospitality. From the moment you walk in, you'll feel like family."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/dining-room-background-zoom-calls_23-2149684443.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Visit Us"
|
||||
text="Come visit our deli today at 2615 Little Rock Rd, Charlotte, NC 28214 and taste authentic Salvadoran pupusas made with love."
|
||||
primaryButton={{
|
||||
text: "Get Directions",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Us: +1 980-256-5980",
|
||||
href: "tel:+19802565980",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/Faq.tsx
Normal file
39
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Common Questions"
|
||||
title="Need More Information?"
|
||||
description="Here is everything you need to know about our pupusa deli."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "We are conveniently located not too far from the airport!",
|
||||
},
|
||||
{
|
||||
question: "Do you accept walk-ins?",
|
||||
answer: "Yes, absolutely! We love seeing new faces every day.",
|
||||
},
|
||||
{
|
||||
question: "Are your pupusas made fresh?",
|
||||
answer: "Always made fresh to order, just the way you like them.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
68
src/pages/HomePage/sections/Hero.tsx
Normal file
68
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplitVerticalMarquee
|
||||
tag="Authentic Delicacies"
|
||||
title="If happiness had a smell, it would be fresh pupusas."
|
||||
description="Hearty, authentic, and always fresh to order. Experience the true taste of El Salvador in the heart of the city."
|
||||
primaryButton={{
|
||||
text: "See Menu",
|
||||
href: "#menu",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Find Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
leftItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-grilled-arepas-basket_23-2148716351.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-indian-dosa-arrangement_23-2149086032.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arepas-plate-with-corn_23-2148708248.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/main-course-restaurant_7939-2376.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-delicious-food-assortment_23-2148747701.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arepas-dough-grill-pan_23-2148716421.jpg",
|
||||
},
|
||||
]}
|
||||
rightItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-food-frame-with-copy-space_23-2148716376.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arepas-dough-wooden-board_23-2148716322.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-arepas-bowl-with-cloth_23-2148742385.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-salad-with-herbs-upper-side-it-dark-background_140725-80582.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arepas-with-flour-bowl_23-2148716370.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/japanese-dumplings-with-pork-meat-placemat-against-black-backdrop_23-2148123681.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Menu.tsx
Normal file
37
src/pages/HomePage/sections/Menu.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "menu" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MenuSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesRevealCards
|
||||
tag="Our Signature Dishes"
|
||||
title="Freshness in Every Bite"
|
||||
description="We take pride in our recipes, passed down through generations."
|
||||
items={[
|
||||
{
|
||||
title: "Traditional Pupusas",
|
||||
description: "Handmade with fresh cheese, beans, and seasoned chicharron, griddled to perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-arab-food-tea_23-2147796937.jpg",
|
||||
},
|
||||
{
|
||||
title: "Authentic Horchata",
|
||||
description: "Not too sweet, not powdery. A perfect cooling treat for any meal.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-cocktail-purple-background_23-2150251314.jpg",
|
||||
},
|
||||
{
|
||||
title: "Cabbage Salad",
|
||||
description: "Crisp, tangy curtido prepared fresh daily to accompany every order.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-taco-ingredients_23-2148629329.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Metrics.tsx
Normal file
38
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import { Award, Heart, Smile } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Community Favorites"
|
||||
title="Why Our Guests Love Us"
|
||||
description="High standards and satisfied appetites keep our griddle busy."
|
||||
metrics={[
|
||||
{
|
||||
icon: Smile,
|
||||
title: "Happy Guests",
|
||||
value: "10,000+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Years Served",
|
||||
value: "7",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Pupusas Sold",
|
||||
value: "50,000+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
src/pages/HomePage/sections/PopularItems.tsx
Normal file
77
src/pages/HomePage/sections/PopularItems.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { motion } from 'motion/react';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
||||
|
||||
export default function PopularItemsSection() {
|
||||
const popularItems = [
|
||||
{
|
||||
name: "Bean and Cheese Pupusa",
|
||||
description: "Our most popular item! Melted cheese and savory refried beans inside a warm, handmade corn tortilla.",
|
||||
price: "$3.50",
|
||||
imageSrc: "https://picsum.photos/seed/368528480/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Revueltas (Pork, Bean & Cheese)",
|
||||
description: "The classic combination of seasoned pork chicharron, beans, and cheese.",
|
||||
price: "$4.00",
|
||||
imageSrc: "https://picsum.photos/seed/1350818826/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Loroco and Cheese Pupusa",
|
||||
description: "A traditional Salvadoran favorite featuring the unique, earthy flavor of loroco flower buds.",
|
||||
price: "$4.00",
|
||||
imageSrc: "https://picsum.photos/seed/2068017062/1200/800"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section data-webild-section="popular-items" id="popular-items" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="flex flex-col items-center text-center mb-16">
|
||||
<ScrollReveal variant="fade">
|
||||
<Tag text="Customer Favorites" className="mb-4" />
|
||||
</ScrollReveal>
|
||||
<TextAnimation
|
||||
text="Most Loved by Our Guests"
|
||||
variant="fade-blur"
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
||||
gradientText={false}
|
||||
/>
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<p className="text-lg text-accent max-w-2xl mx-auto mb-8">
|
||||
Discover the dishes that keep our customers coming back for more. From our famous bean and cheese pupusas to traditional favorites, there's something for everyone.
|
||||
</p>
|
||||
<Button text="Order Online Now" variant="primary" href="#order" />
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{popularItems.map((item, index) => (
|
||||
<ScrollReveal variant="fade" key={index} delay={0.1 * index} className="h-full">
|
||||
<div className="card h-full flex flex-col overflow-hidden rounded-lg">
|
||||
<div className="relative h-64 w-full">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col flex-grow">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-bold text-foreground">{item.name}</h3>
|
||||
<span className="text-lg font-semibold text-foreground">{item.price}</span>
|
||||
</div>
|
||||
<p className="text-accent flex-grow mb-6">{item.description}</p>
|
||||
<Button text="Add to Order" variant="secondary" className="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Guest Voices"
|
||||
title="What Our Friends Are Saying"
|
||||
description="Hearty, fresh, and friendly — hear why our regulars keep coming back."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Foodie",
|
||||
quote: "Best pupusas in the city! Totally delicious and authentic.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-selfie-with-food_23-2147826855.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Local Guide",
|
||||
quote: "Pleasant little deli with hearty food and friendly service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-smiling-confident-looking-side-street_839833-24417.jpg",
|
||||
},
|
||||
{
|
||||
name: "Katia Rodriguez",
|
||||
role: "Traveler",
|
||||
quote: "The pupusas tasted great! I got one of each and a chicken quesadilla.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/summer-vibes-sunny-day_23-2151961723.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ashley Pico",
|
||||
role: "Regular",
|
||||
quote: "So good! The horchata was tasty not to sweet. Definitely worth it.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-smiling-woman_171337-4210.jpg",
|
||||
},
|
||||
{
|
||||
name: "Ian",
|
||||
role: "Frequent Guest",
|
||||
quote: "The cheese pupusa is simply perfect, I can't imagine how you could improve it.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-with-delicious-food_23-2149250117.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user