Compare commits
2 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| fe2f930714 | |||
|
e03197aead |
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #f5faff;
|
||||
--background: #fffafa;
|
||||
--card: #ffffff;
|
||||
--foreground: #001122;
|
||||
--primary-cta: #15479c;
|
||||
--primary-cta-text: #f5faff;
|
||||
--foreground: #1a0000;
|
||||
--primary-cta: #e63946;
|
||||
--primary-cta-text: #fffafa;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #001122;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #7ba3cf;
|
||||
--secondary-cta-text: #1a0000;
|
||||
--accent: #f5c4c7;
|
||||
--background-accent: #f09199;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,259 +1,38 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import { CheckCircle, Clock, Leaf, Smile, Star, Truck } 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 FeaturesSection from './HomePage/sections/Features';
|
||||
import MenuSection from './HomePage/sections/Menu';
|
||||
import ReviewsSection from './HomePage/sections/Reviews';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import GallerySection from './HomePage/sections/Gallery';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBrand
|
||||
brand="TACOS 24"
|
||||
description="Authentic street tacos, fast service, and fresh ingredients. Located in Châteauguay, serving up the best flavours in town."
|
||||
primaryButton={{
|
||||
text: "Order Online",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "See Menu",
|
||||
href: "#menu",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-mexican-food-with-meat-vegetables_23-2148614395.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
<GallerySection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="About Us"
|
||||
title="Freshness in Every Bite"
|
||||
description="At TACOS 24, we believe in real ingredients and fast, friendly service. Whether you're grabbing a quick lunch or dinner for the family, we make every meal an experience."
|
||||
items={[
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Fast Service",
|
||||
description: "Quick prep for your busy life.",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Fresh Ingredients",
|
||||
description: "Local produce and quality meats.",
|
||||
},
|
||||
{
|
||||
icon: Smile,
|
||||
title: "Friendly Staff",
|
||||
description: "Welcoming atmosphere guaranteed.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hands-preparing-tasty-mexican-food_23-2147812182.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBorderGlow
|
||||
tag="Why Choose Us"
|
||||
title="Our Commitment"
|
||||
description="We are proud to be a local staple in Châteauguay. Here's why our customers keep coming back."
|
||||
features={[
|
||||
{
|
||||
icon: Star,
|
||||
title: "4.7 Star Rating",
|
||||
description: "Consistently high praise from locals.",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Dine-in & Takeout",
|
||||
description: "Enjoy it here or on the go.",
|
||||
},
|
||||
{
|
||||
icon: Truck,
|
||||
title: "Reliable Delivery",
|
||||
description: "Your favorite meal brought to you.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesImageBento
|
||||
tag="Our Menu"
|
||||
title="Signature Flavours"
|
||||
description="Explore our delicious variety of tacos and sides, prepared fresh every day."
|
||||
items={[
|
||||
{
|
||||
title: "Classic Beef",
|
||||
description: "Slow-cooked seasoned beef.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tacos_23-2148159779.jpg",
|
||||
},
|
||||
{
|
||||
title: "Zesty Chicken",
|
||||
description: "Marinated in lime and cilantro.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-mexican-taco-plate_23-2148181582.jpg",
|
||||
},
|
||||
{
|
||||
title: "Spicy Pork",
|
||||
description: "Bold and authentic spice.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-tacos-plate_23-2148750431.jpg",
|
||||
},
|
||||
{
|
||||
title: "Fresh Shrimp",
|
||||
description: "Grilled to perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/palatable-shrimp-dish_23-2147761580.jpg",
|
||||
},
|
||||
{
|
||||
title: "Veggie Mix",
|
||||
description: "Black beans and roasted corn.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-taco-with-beans-guacamole-wooden-table_123827-36211.jpg",
|
||||
},
|
||||
{
|
||||
title: "Loaded Nachos",
|
||||
description: "Cheese, salsa, and jalapenos.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-mexican-nachos-tortilla-chips-plate-with-mexican-tacos-cutting-board_23-2148042538.jpg",
|
||||
},
|
||||
{
|
||||
title: "Guacamole",
|
||||
description: "Fresh and creamy, served with chips.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fresh-homemade-hot-guacamole-sauce-with-nachos-top-view_114579-7080.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MenuSection />
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<SectionErrorBoundary name="reviews">
|
||||
<TestimonialQuoteCards
|
||||
tag="Testimonials"
|
||||
title="What People Say"
|
||||
description="Join our happy community of taco lovers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Louise Garai",
|
||||
role: "Local Diner",
|
||||
quote: "The food was delicious & staff very pleasant..even the young students who came in for lunch. An enjoyable meal.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-restaurant_23-2148006619.jpg",
|
||||
},
|
||||
{
|
||||
name: "Nosa",
|
||||
role: "Local Guide",
|
||||
quote: "The food was great it was tasty and very filling, the prices are reasonable and the service was fast 10/10.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/good-humoured-caucasian-woman-enjoying-healthy-food-indoor-shot-smiling-girl-eating-salad_197531-17196.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Foodie",
|
||||
quote: "Excellent choice for a place to eat! Definitely coming back for more.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517448.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Local Resident",
|
||||
quote: "Friendly staff and a welcoming atmosphere. My kids love the nachos!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-happy-people-communicating-while-having-lunch-together-dining-room_637285-3564.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "Regular",
|
||||
quote: "The best tacos in Châteauguay. Consistent quality every time I visit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-mexican-woman-eating-ranchero-food_23-2150222253.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ReviewsSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Impact"
|
||||
title="Numbers That Matter"
|
||||
description="Serving quality food to our wonderful community."
|
||||
metrics={[
|
||||
{
|
||||
value: "86+",
|
||||
title: "Five-Star Reviews",
|
||||
features: [
|
||||
"Consistently happy guests",
|
||||
"High quality service",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "58+",
|
||||
title: "Photos Shared",
|
||||
features: [
|
||||
"Capturing flavor",
|
||||
"Foodie approved",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "10/10",
|
||||
title: "Rating",
|
||||
features: [
|
||||
"Fast service",
|
||||
"Great value",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Need Help?"
|
||||
title="Frequently Asked Questions"
|
||||
description="Here is what you need to know about our services."
|
||||
items={[
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "We are at 77d Boulevard d'Anjou, Châteauguay, Quebec.",
|
||||
},
|
||||
{
|
||||
question: "What are your hours?",
|
||||
answer: "We are open daily and close at 10:00 PM.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer delivery?",
|
||||
answer: "Yes, we are available on major delivery apps.",
|
||||
},
|
||||
{
|
||||
question: "Is there parking available?",
|
||||
answer: "Yes, we have plenty of parking for our customers.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Visit Us"
|
||||
text="Come visit TACOS 24 for the most authentic street tacos in Châteauguay!"
|
||||
primaryButton={{
|
||||
text: "Get Directions",
|
||||
href: "https://maps.google.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Call Now",
|
||||
href: "tel:4184406997",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
39
src/pages/HomePage/sections/About.tsx
Normal file
39
src/pages/HomePage/sections/About.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 "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import { CheckCircle, Clock, Leaf, Smile, Star, Truck } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="About Us"
|
||||
title="Freshness in Every Bite"
|
||||
description="At TACOS 24, we believe in real ingredients and fast, friendly service. Whether you're grabbing a quick lunch or dinner for the family, we make every meal an experience."
|
||||
items={[
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Fast Service",
|
||||
description: "Quick prep for your busy life.",
|
||||
},
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Fresh Ingredients",
|
||||
description: "Local produce and quality meats.",
|
||||
},
|
||||
{
|
||||
icon: Smile,
|
||||
title: "Friendly Staff",
|
||||
description: "Welcoming atmosphere guaranteed.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hands-preparing-tasty-mexican-food_23-2147812182.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
src/pages/HomePage/sections/Contact.tsx
Normal file
65
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const primaryButton = {
|
||||
href: "https://maps.google.com/?q=77d+Boulevard+d'Anjou,+Châteauguay,+Quebec+J6J+3P7",
|
||||
text: "Get Directions"
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "Call (418) 440-6997",
|
||||
href: "tel:4184406997"
|
||||
};
|
||||
|
||||
const ContactInline = () => {
|
||||
return (
|
||||
<section aria-label="Contact section" className="py-20">
|
||||
<div className="w-content-width mx-auto">
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-10 py-10 px-8 rounded card">
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Location & Hours"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Find us at 77d Boulevard d'Anjou, Châteauguay. We are open until 10 p.m. for dine-in, takeout, and delivery!"}
|
||||
variant="fade-blur"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl 2xl:text-5xl leading-[1.15] font-semibold text-left text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-start gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-[400px] rounded-xl overflow-hidden">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1m2!1s0x4cc93c8b5b5b5b5b%3A0x5b5b5b5b5b5b5b5b!2s77d%20Boul.%20d'Anjou%2C%20Ch%C3%A2teauguay%2C%20QC%20J6J%203P7!5e0!3m2!1sen!2sca!4v1620000000000!5m2!1sen!2sca"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="TACOS 24 Location Map"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<div data-webild-section="contact" id="contact">
|
||||
<ContactInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Faq.tsx
Normal file
38
src/pages/HomePage/sections/Faq.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 "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="Need Help?"
|
||||
title="Frequently Asked Questions"
|
||||
description="Here is what you need to know about our services."
|
||||
items={[
|
||||
{
|
||||
question: "Where are you located?",
|
||||
answer: "We are at 77d Boulevard d'Anjou, Châteauguay, Quebec.",
|
||||
},
|
||||
{
|
||||
question: "What are your hours?",
|
||||
answer: "We are open daily and close at 10:00 PM.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer delivery?",
|
||||
answer: "Yes, we are available on major delivery apps.",
|
||||
},
|
||||
{
|
||||
question: "Is there parking available?",
|
||||
answer: "Yes, we have plenty of parking for our customers.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/Features.tsx
Normal file
22
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "features" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
|
||||
import { CheckCircle, Clock, Leaf, Smile, Star, Truck } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBorderGlow
|
||||
tag="Why Choose Us"
|
||||
title="Fresh Ingredients, Fast Service"
|
||||
description="We are proud to be a local staple in Châteauguay. Open until 10 p.m. daily."
|
||||
features={[{"description":"Consistently high praise from locals.","title":"4.7 Star Rating","icon":"Star"},{"description":"Enjoy it here or on the go.","icon":"CheckCircle","title":"Dine-in & Takeout"},{"title":"Reliable Delivery","icon":"Truck","description":"Your favorite meal brought to you."},{"icon":"Clock","title":"Open Late","description":"We are open until 10 p.m. every day."}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
src/pages/HomePage/sections/Gallery.tsx
Normal file
65
src/pages/HomePage/sections/Gallery.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
|
||||
export default function GallerySection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="gallery" data-webild-section="gallery">
|
||||
<section className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<ScrollReveal variant="fade">
|
||||
<Tag text="Gallery" className="mb-4" />
|
||||
</ScrollReveal>
|
||||
<TextAnimation
|
||||
text="Fresh Ingredients"
|
||||
variant="slide-up"
|
||||
tag="h2"
|
||||
gradientText={false}
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
||||
/>
|
||||
<ScrollReveal variant="fade" delay={0.2}>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
A look at our vibrant dishes, prepared fresh every day with authentic flavors and bold spices.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Fresh Ingredients",
|
||||
imageSrc: "https://images.unsplash.com/photo-1565299585323-38d6b0865b47?q=80&w=1980&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
title: "Vibrant Dishes",
|
||||
imageSrc: "https://images.unsplash.com/photo-1613514785940-daed07799d9b?q=80&w=2070&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
title: "Bold Spices",
|
||||
imageSrc: "https://images.unsplash.com/photo-1552332386-f8dd00dc2f85?q=80&w=2071&auto=format&fit=crop",
|
||||
},
|
||||
{
|
||||
title: "Hot & Ready",
|
||||
imageSrc: "https://images.unsplash.com/photo-1599974579688-8dbdd335c77f?q=80&w=2094&auto=format&fit=crop",
|
||||
}
|
||||
].map((item, index) => (
|
||||
<ScrollReveal variant="fade" key={index} delay={0.1 * index} className="group relative aspect-[4/5] rounded-2xl overflow-hidden shadow-lg">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 transition-opacity duration-300" />
|
||||
<div className="absolute bottom-0 left-0 p-6">
|
||||
<h3 className="text-xl font-bold text-white">{item.title}</h3>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
79
src/pages/HomePage/sections/Hero.tsx
Normal file
79
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import AutoFillText from "@/components/ui/AutoFillText";
|
||||
import Tag from "@/components/ui/Tag";
|
||||
import { Clock } from "lucide-react";
|
||||
|
||||
const primaryButton = {
|
||||
href: "#menu",
|
||||
text: "View Menu"
|
||||
};
|
||||
const secondaryButton = {
|
||||
href: "#contact",
|
||||
text: "Get Directions"
|
||||
};
|
||||
|
||||
type HeroBrandProps = {
|
||||
brand: string;
|
||||
description: string;
|
||||
primaryButton: { text: string; href: string };
|
||||
secondaryButton: { text: string; href: string };
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const HeroInline = () => {
|
||||
return (
|
||||
<section
|
||||
aria-label="Hero section"
|
||||
className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"
|
||||
>
|
||||
<HeroBackgroundSlot />
|
||||
<ImageOrVideo
|
||||
imageSrc={"https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?q=80&w=2070&auto=format&fit=crop"}
|
||||
className="absolute inset-0 w-full h-full object-cover rounded-none"
|
||||
/>
|
||||
|
||||
<div
|
||||
className="absolute z-10 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 backdrop-blur-xl mask-[linear-gradient(to_bottom,transparent,black_60%)]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 w-content-width mx-auto pb-5">
|
||||
<div className="flex flex-col">
|
||||
<div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5">
|
||||
<div className="w-full md:w-1/2 flex flex-col gap-4">
|
||||
<Tag text="Open until 10 p.m." icon={Clock} className="w-fit bg-primary-cta/20 text-white border-primary-cta/30" />
|
||||
<TextAnimation
|
||||
text={"Authentic street tacos, fast service, and fresh ingredients. Located in Châteauguay, serving up the best flavours in town. Open until 10 p.m."}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="text-lg md:text-2xl text-balance font-normal text-white leading-snug"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full md:w-1/2 flex justify-start md:justify-end">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AutoFillText className="font-semibold text-white">{"TACOS 24"}</AutoFillText>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Menu.tsx
Normal file
21
src/pages/HomePage/sections/Menu.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 "menu" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MenuSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="menu" data-section="menu">
|
||||
<SectionErrorBoundary name="menu">
|
||||
<FeaturesImageBento
|
||||
tag="Featured Menu"
|
||||
title="Taco Combos & Specials"
|
||||
description="Explore our delicious variety of tacos and sides, prepared fresh every day. Don't miss our daily specials!"
|
||||
items={[{"title":"Classic Beef Tacos","description":"Slow-cooked seasoned beef with fresh cilantro and onions.","imageSrc":"https://images.unsplash.com/photo-1565299585323-38d6b0865b47?q=80&w=1980&auto=format&fit=crop"},{"title":"Zesty Chicken Tacos","description":"Marinated in lime and cilantro, served with fresh salsa.","imageSrc":"https://images.unsplash.com/photo-1613514785940-daed07799d9b?q=80&w=2070&auto=format&fit=crop"},{"title":"Spicy Pork Al Pastor","imageSrc":"https://images.unsplash.com/photo-1552332386-f8dd00dc2f85?q=80&w=2071&auto=format&fit=crop","description":"Bold and authentic spice, topped with pineapple."},{"title":"Fresh Shrimp Tacos","description":"Grilled to perfection with a tangy slaw.","imageSrc":"https://images.unsplash.com/photo-1599974579688-8dbdd335c77f?q=80&w=2094&auto=format&fit=crop"},{"title":"Veggie Mix Tacos","imageSrc":"https://images.unsplash.com/photo-1624300629298-e94b1738c5e8?q=80&w=2072&auto=format&fit=crop","description":"Black beans, roasted corn, and fresh avocado."},{"title":"Loaded Nachos","imageSrc":"https://images.unsplash.com/photo-1513456852971-30c0b8199d4d?q=80&w=1935&auto=format&fit=crop","description":"Cheese, salsa, jalapenos, and your choice of meat."},{"title":"Fresh Guacamole","description":"Fresh and creamy, served with house-made chips.","imageSrc":"https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?q=80&w=1974&auto=format&fit=crop"}]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// 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 MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Our Impact"
|
||||
title="Numbers That Matter"
|
||||
description="Serving quality food to our wonderful community."
|
||||
metrics={[
|
||||
{
|
||||
value: "86+",
|
||||
title: "Five-Star Reviews",
|
||||
features: [
|
||||
"Consistently happy guests",
|
||||
"High quality service",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "58+",
|
||||
title: "Photos Shared",
|
||||
features: [
|
||||
"Capturing flavor",
|
||||
"Foodie approved",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "10/10",
|
||||
title: "Rating",
|
||||
features: [
|
||||
"Fast service",
|
||||
"Great value",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Reviews.tsx
Normal file
52
src/pages/HomePage/sections/Reviews.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 "reviews" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ReviewsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="reviews" data-section="reviews">
|
||||
<SectionErrorBoundary name="reviews">
|
||||
<TestimonialQuoteCards
|
||||
tag="Testimonials"
|
||||
title="What People Say"
|
||||
description="Join our happy community of taco lovers."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Louise Garai",
|
||||
role: "Local Diner",
|
||||
quote: "The food was delicious & staff very pleasant..even the young students who came in for lunch. An enjoyable meal.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-restaurant_23-2148006619.jpg",
|
||||
},
|
||||
{
|
||||
name: "Nosa",
|
||||
role: "Local Guide",
|
||||
quote: "The food was great it was tasty and very filling, the prices are reasonable and the service was fast 10/10.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/good-humoured-caucasian-woman-enjoying-healthy-food-indoor-shot-smiling-girl-eating-salad_197531-17196.jpg",
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Foodie",
|
||||
quote: "Excellent choice for a place to eat! Definitely coming back for more.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517448.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Local Resident",
|
||||
quote: "Friendly staff and a welcoming atmosphere. My kids love the nachos!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-happy-people-communicating-while-having-lunch-together-dining-room_637285-3564.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "Regular",
|
||||
quote: "The best tacos in Châteauguay. Consistent quality every time I visit.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-mexican-woman-eating-ranchero-food_23-2150222253.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user