Compare commits
57 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 0e15ac6743 | |||
| 6d9e9dd1de | |||
| 5ad5b70abd | |||
| bbd1d940f5 | |||
| c4d6150f97 | |||
| 8669205162 | |||
| 4b80d12b1a | |||
| 6f12638b6c | |||
| 53fb5395ee | |||
| b835d782b5 | |||
| 2261f26964 | |||
| 23ffe58c4c | |||
| 7e04d96a45 | |||
| e573943c1e | |||
| 159b470218 | |||
| 8ff368d3d3 | |||
| e7acd3741f | |||
| 4853a321d0 | |||
| 7326f957e8 | |||
| 4aff06cf99 | |||
| 230bf054b7 | |||
| 3610bf240e | |||
| c4ca5dab37 | |||
|
|
4de0487e6c | ||
| b6adf8ab20 | |||
| ac1e2fd51c | |||
| 2c5f386918 | |||
| 87c07e5050 | |||
| b5332b9636 | |||
| a0d6e7e4c7 | |||
| d0f76043dc | |||
| fba5e53632 | |||
| 5aa88dabc7 | |||
| b756664b32 | |||
| 3f55b4a35e | |||
| 47c3e1b0f0 | |||
| b6f9a2ddaf | |||
| ae1363e964 | |||
| 6e407a553c | |||
| 4d1236ab14 | |||
| 92eef808f6 | |||
| 5dff9f9582 | |||
| 9fc21d6dbd | |||
| 1d0b0edca0 | |||
| c0811a63b8 | |||
| 06ff7b8c2e | |||
| dfbef698d0 | |||
|
|
5ede6d8f1a | ||
| 6cb6d24ca0 | |||
| 315809ed14 | |||
|
|
44efcd2109 | ||
| cc31ce9fb9 | |||
|
|
9f804dbc94 | ||
| bbe843e5f4 | |||
|
|
97a19c2817 | ||
| 6c18a92cbd | |||
|
|
584d600495 |
@@ -1,253 +1,28 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeaturesBentoGridCta from '@/components/sections/features/FeaturesBentoGridCta';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { Award, Star } 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; this shell only fixes render order.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ProductsSection from './HomePage/sections/Products';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroBillboardBrand
|
||||
brand="The Daily Crumb"
|
||||
description="Freshly Baked Goodness, Made Daily. Artisan breads, pastries, and custom cakes crafted with premium ingredients. Order online or visit us today."
|
||||
primaryButton={{
|
||||
text: "Order Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Our Menu",
|
||||
href: "#products",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-woman-working-bakery_23-2150273148.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Our Passion for Perfection"
|
||||
descriptions={[
|
||||
"At The Daily Crumb, we believe that every bite should be a moment of pure joy. Our journey began with a simple desire: to bring authentic, handcrafted baked goods to our community. We use time-honored techniques and the finest, freshest ingredients to create products that not only taste incredible but also tell a story.",
|
||||
"From the moment our doors open, the aroma of warm bread and sweet pastries fills the air, inviting you into a world where tradition meets innovation. We're proud to be a local staple, a place where friends gather, families celebrate, and everyone can find something delicious to brighten their day. Our commitment to quality extends beyond our ingredients to the care we put into every loaf, every cake, and every smile we share with our customers.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Delights"
|
||||
title="Explore Our Oven-Fresh Creations"
|
||||
description="From flaky croissants to custom celebration cakes, discover your new favorite treat."
|
||||
items={[
|
||||
{
|
||||
title: "Flaky Croissants",
|
||||
description: "Buttery, golden, and perfect with your morning coffee.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/freshly-baked-croissant-white-plate-with-black-coffee_181624-60129.jpg",
|
||||
},
|
||||
{
|
||||
title: "Artisan Sourdough",
|
||||
description: "Slow-fermented for a rich flavor and perfect crust.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/loaf-bread-tied-with-rope-wooden-board_114579-72178.jpg",
|
||||
},
|
||||
{
|
||||
title: "Gourmet Cupcakes",
|
||||
description: "Beautifully decorated and bursting with flavor.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423807.jpg",
|
||||
},
|
||||
{
|
||||
title: "Signature Cookies",
|
||||
description: "Classic recipes with a homemade taste you'll love.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bunch-cookies-bundled-together-marble-background_114579-25950.jpg",
|
||||
},
|
||||
{
|
||||
title: "Seasonal Fruit Pies",
|
||||
description: "Made with the freshest fruits of the season.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fruit-pie-arrangement_23-2148531646.jpg",
|
||||
},
|
||||
{
|
||||
title: "Custom Celebration Cakes",
|
||||
description: "Designed to make your special moments unforgettable.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/from-cake-table_23-2147783757.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sweet Cinnamon Rolls",
|
||||
description: "Warm, gooey, and topped with decadent cream cheese frosting.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cinnamon-rolls-buns-wooden-table-kanelbulle-swedish-dessert_123827-22535.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBentoGridCta
|
||||
tag="Why Choose Us"
|
||||
title="The Heart of Our Craft"
|
||||
description="Dedicated to quality, freshness, and community joy in every creation."
|
||||
features={[
|
||||
{
|
||||
title: "Premium Ingredients",
|
||||
description: "We source only the finest, freshest, and often local ingredients for superior taste and quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-local-farmers-selling-natural-bio-produce_482257-77615.jpg",
|
||||
},
|
||||
{
|
||||
title: "Artisan Craftsmanship",
|
||||
description: "Our bakers pour passion and expertise into every handcrafted item, ensuring perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-delicious-gulas-dish-arrangement_23-2149072564.jpg",
|
||||
},
|
||||
{
|
||||
title: "Community Focused",
|
||||
description: "We are proud to be a beloved part of the neighborhood, serving generations with warmth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-preparing-challah-dish-hanukkah_23-2151102350.jpg",
|
||||
},
|
||||
{
|
||||
title: "Convenient Ordering",
|
||||
description: "Enjoy our delights in-store or through easy online ordering and pickup options.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-sunglasses-shopping-cart-illustration-design_460848-11469.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Happy Customers"
|
||||
title="What Our Community Says"
|
||||
description="Hear from those who've savored our freshly baked goodness and experienced our warm service."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Local Resident",
|
||||
quote: "The Daily Crumb is my go-to for morning pastries. Their croissants are simply divine and the staff always makes my day!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-pretty-girl-model-standing-holding-cabbage_114579-74354.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark T.",
|
||||
role: "Small Business Owner",
|
||||
quote: "I order all my corporate event pastries from here. Always fresh, always delicious, and always on time!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-looking-front-smiliung-cheerfully-showing-ok-sign-standing-orange-wall_141793-96581.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
role: "Food Blogger",
|
||||
quote: "Every item from The Daily Crumb is a masterpiece. Their sourdough bread is a game-changer, perfectly crusty and airy inside.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-short-hair-wearing-white-polo-shirt-holding-notebook-pen-writing-with-serious-face_141793-46470.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
role: "Parent",
|
||||
quote: "Their custom cakes for birthdays are incredible! Beautiful designs and amazing flavors. My kids absolutely love them.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-male-showing-paper-bag-t-shirt-jacket-looking-cheery-front-view_176474-91622.jpg",
|
||||
},
|
||||
{
|
||||
name: "Grace L.",
|
||||
role: "Retiree",
|
||||
quote: "This bakery feels like home. The warm service and the aroma of fresh bread always make my visits a delight. A true neighborhood gem.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-shot-cheerful-attractive-grandmother-white-shirt-holding-piece-freshly-baked-berry-pie-birthday-having-joyful-facial-expression-smiling-broadly_343059-1898.jpg",
|
||||
},
|
||||
{
|
||||
name: "James & Lily",
|
||||
role: "Couple",
|
||||
quote: "We discovered The Daily Crumb last year and haven't looked back. Their coffee and pastries are our weekend ritual!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-feeding-woman-with-croissant-bed_23-2148012227.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="A Legacy of Sweetness"
|
||||
description="Serving our community with passion and delicious creations, one baked good at a time."
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
title: "Years Baking",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Original Recipes",
|
||||
value: "100+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Happy Customers",
|
||||
value: "10,000+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Questions?"
|
||||
title="Your Baking Questions, Answered"
|
||||
description="Find quick answers to common queries about our products, ingredients, and ordering process."
|
||||
items={[
|
||||
{
|
||||
question: "What are your opening hours?",
|
||||
answer: "We are open Monday to Saturday from 7:00 AM to 6:00 PM, and Sunday from 8:00 AM to 4:00 PM. Holiday hours may vary, please check our social media for updates.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer gluten-free options?",
|
||||
answer: "Yes, we have a selection of delicious gluten-free breads and pastries. Please ask our staff for today's specific offerings, as our menu rotates frequently.",
|
||||
},
|
||||
{
|
||||
question: "How can I place a custom cake order?",
|
||||
answer: "Custom cake orders can be placed directly through our website's 'Order Now' section or by calling us during business hours. We recommend ordering at least one week in advance.",
|
||||
},
|
||||
{
|
||||
question: "Do you deliver?",
|
||||
answer: "Currently, we offer in-store pickup for all online orders. We are exploring delivery options for the future. Stay tuned for updates!",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-loving-couple-bakers-standing-bakery-holding-bread_171337-15988.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Indulge?"
|
||||
text="Taste the difference of freshly baked quality. Place your order or visit us today for a delightful experience!"
|
||||
primaryButton={{
|
||||
text: "Order Online Now",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Find Our Location",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<HeroSection />
|
||||
<AboutSection />
|
||||
<ProductsSection />
|
||||
<FeaturesSection />
|
||||
<TestimonialsSection />
|
||||
<MetricsSection />
|
||||
<FaqSection />
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.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 "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Our Passion for Perfection"
|
||||
descriptions={[
|
||||
"At The Daily Crumb, we believe that every bite should be a moment of pure joy. Our journey began with a simple desire: to bring authentic, handcrafted baked goods to our community. We use time-honored techniques and the finest, freshest ingredients to create products that not only taste incredible but also tell a story.",
|
||||
"From the moment our doors open, the aroma of warm bread and sweet pastries fills the air, inviting you into a world where tradition meets innovation. We're proud to be a local staple, a place where friends gather, families celebrate, and everyone can find something delicious to brighten their day. Our commitment to quality extends beyond our ingredients to the care we put into every loaf, every cake, and every smile we share with our customers.",
|
||||
]}
|
||||
/>
|
||||
</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="Ready to Indulge?"
|
||||
text="Taste the difference of freshly baked quality. Place your order or visit us today for a delightful experience!"
|
||||
primaryButton={{
|
||||
text: "Order Online Now",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Find Our Location",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSplitMedia
|
||||
tag="Questions?"
|
||||
title="Your Baking Questions, Answered"
|
||||
description="Find quick answers to common queries about our products, ingredients, and ordering process."
|
||||
items={[
|
||||
{
|
||||
question: "What are your opening hours?",
|
||||
answer: "We are open Monday to Saturday from 7:00 AM to 6:00 PM, and Sunday from 8:00 AM to 4:00 PM. Holiday hours may vary, please check our social media for updates.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer gluten-free options?",
|
||||
answer: "Yes, we have a selection of delicious gluten-free breads and pastries. Please ask our staff for today's specific offerings, as our menu rotates frequently.",
|
||||
},
|
||||
{
|
||||
question: "How can I place a custom cake order?",
|
||||
answer: "Custom cake orders can be placed directly through our website's 'Order Now' section or by calling us during business hours. We recommend ordering at least one week in advance.",
|
||||
},
|
||||
{
|
||||
question: "Do you deliver?",
|
||||
answer: "Currently, we offer in-store pickup for all online orders. We are exploring delivery options for the future. Stay tuned for updates!",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/happy-loving-couple-bakers-standing-bakery-holding-bread_171337-15988.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Features.tsx
Normal file
42
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// 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 FeaturesBentoGridCta from '@/components/sections/features/FeaturesBentoGridCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesBentoGridCta
|
||||
tag="Why Choose Us"
|
||||
title="The Heart of Our Craft"
|
||||
description="Dedicated to quality, freshness, and community joy in every creation."
|
||||
features={[
|
||||
{
|
||||
title: "Premium Ingredients",
|
||||
description: "We source only the finest, freshest, and often local ingredients for superior taste and quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-local-farmers-selling-natural-bio-produce_482257-77615.jpg",
|
||||
},
|
||||
{
|
||||
title: "Artisan Craftsmanship",
|
||||
description: "Our bakers pour passion and expertise into every handcrafted item, ensuring perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/traditional-delicious-gulas-dish-arrangement_23-2149072564.jpg",
|
||||
},
|
||||
{
|
||||
title: "Community Focused",
|
||||
description: "We are proud to be a beloved part of the neighborhood, serving generations with warmth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-preparing-challah-dish-hanukkah_23-2151102350.jpg",
|
||||
},
|
||||
{
|
||||
title: "Convenient Ordering",
|
||||
description: "Enjoy our delights in-store or through easy online ordering and pickup options.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-sunglasses-shopping-cart-illustration-design_460848-11469.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
83
src/pages/HomePage/sections/Hero.tsx
Normal file
83
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
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 ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import LoopCarousel from "@/components/ui/LoopCarousel";
|
||||
|
||||
type HeroBillboardBrandProps = {
|
||||
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 pt-25 pb-20 md:pt-30">
|
||||
<HeroBackgroundSlot />
|
||||
<div className="flex flex-col gap-10 md:gap-12 w-content-width mx-auto">
|
||||
<div className="flex flex-col items-end gap-5">
|
||||
<AutoFillText className="w-full font-semibold" paddingY="">{"Taste the Freshness: Your Daily Slice of Joy Awaits"}</AutoFillText>
|
||||
|
||||
<TextAnimation
|
||||
text={"Freshly Baked Goodness, Made Daily. Artisan breads, pastries, and custom cakes crafted with premium ingredients. Order online or visit us today."}
|
||||
variant="fade-blur"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="w-full md:w-1/2 text-lg md:text-2xl leading-snug text-balance text-right"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-end gap-3 mt-1 md:mt-2">
|
||||
<a
|
||||
href="#contact"
|
||||
className="relative inline-flex items-center justify-center px-8 py-4 font-bold text-primary-cta-text bg-primary-cta rounded-xl shadow-[0_8px_0_0_rgba(0,0,0,0.8)] hover:translate-y-1 hover:shadow-[0_4px_0_0_rgba(0,0,0,0.8)] active:translate-y-2 active:shadow-none transition-all"
|
||||
>
|
||||
Order Now
|
||||
</a>
|
||||
<a
|
||||
href="#products"
|
||||
className="relative inline-flex items-center justify-center px-8 py-4 font-bold text-secondary-cta-text bg-secondary-cta rounded-xl shadow-[0_8px_0_0_rgba(0,0,0,0.2)] hover:translate-y-1 hover:shadow-[0_4px_0_0_rgba(0,0,0,0.2)] active:translate-y-2 active:shadow-none transition-all border border-border"
|
||||
>
|
||||
Our Menu
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="fade" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/medium-shot-woman-working-bakery_23-2150273148.jpg"} className="aspect-4/5 md:aspect-video" />
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="w-full max-w-4xl mx-auto mt-12">
|
||||
<p className="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-8 text-center">
|
||||
Trusted by companies we work with
|
||||
</p>
|
||||
<div className="w-full overflow-hidden">
|
||||
<LoopCarousel>
|
||||
{[
|
||||
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg",
|
||||
"https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg"
|
||||
].map((logo, i) => (
|
||||
<div key={i} className="flex items-center justify-center w-40 mx-8">
|
||||
<img src={logo} alt="Company Logo" className="h-8 md:h-12 w-auto object-contain opacity-50 grayscale hover:opacity-100 hover:grayscale-0 transition-all" />
|
||||
</div>
|
||||
))}
|
||||
</LoopCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function HeroSection() {
|
||||
return (
|
||||
<div data-webild-section="hero" id="hero">
|
||||
<HeroInline />
|
||||
</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, Star } 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="Our Impact"
|
||||
title="A Legacy of Sweetness"
|
||||
description="Serving our community with passion and delicious creations, one baked good at a time."
|
||||
metrics={[
|
||||
{
|
||||
icon: Star,
|
||||
title: "Years Baking",
|
||||
value: "15+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Original Recipes",
|
||||
value: "100+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Happy Customers",
|
||||
value: "10,000+",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
115
src/pages/HomePage/sections/Products.tsx
Normal file
115
src/pages/HomePage/sections/Products.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
description: string;
|
||||
href: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
interface FeaturesRevealCardsBentoProps {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: [FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem, FeatureItem];
|
||||
}
|
||||
|
||||
const ProductsInline = () => {
|
||||
const gridClasses = [
|
||||
"md:col-span-2",
|
||||
"md:col-span-4",
|
||||
"md:col-span-3",
|
||||
"md:col-span-3",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
"md:col-span-2",
|
||||
];
|
||||
|
||||
const staggerDelays = [
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0,
|
||||
0.1,
|
||||
0.2,
|
||||
];
|
||||
|
||||
return (
|
||||
<section aria-label="Features reveal cards bento section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center w-content-width mx-auto gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Our Delights"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Explore Our Oven-Fresh Creations"}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"From flaky croissants to custom celebration cakes, discover your new favorite treat."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-6 gap-3">
|
||||
{[{"description":"Buttery, golden, and perfect with your morning coffee.","href":"#","buttonText":"Buy Now","title":"Flaky Croissants ⭐⭐⭐⭐⭐","imageSrc":"http://img.b2bpic.net/free-photo/freshly-baked-croissant-white-plate-with-black-coffee_181624-60129.jpg"},{"description":"Slow-fermented for a rich flavor and perfect crust.","href":"#","imageSrc":"http://img.b2bpic.net/free-photo/loaf-bread-tied-with-rope-wooden-board_114579-72178.jpg","buttonText":"Buy Now","title":"Artisan Sourdough ⭐⭐⭐⭐⭐"},{"description":"Beautifully decorated and bursting with flavor.","href":"#","imageSrc":"http://img.b2bpic.net/free-photo/delicious-rainbow-cupcake-still-life_23-2150423807.jpg","buttonText":"Buy Now","title":"Gourmet Cupcakes ⭐⭐⭐⭐⭐"},{"description":"Classic recipes with a homemade taste you'll love.","href":"#","buttonText":"Buy Now","title":"Signature Cookies ⭐⭐⭐⭐⭐","imageSrc":"http://img.b2bpic.net/free-photo/bunch-cookies-bundled-together-marble-background_114579-25950.jpg"},{"buttonText":"Buy Now","title":"Seasonal Fruit Pies ⭐⭐⭐⭐⭐","imageSrc":"http://img.b2bpic.net/free-photo/top-view-fruit-pie-arrangement_23-2148531646.jpg","href":"#","description":"Made with the freshest fruits of the season."},{"imageSrc":"http://img.b2bpic.net/free-photo/from-cake-table_23-2147783757.jpg","title":"Custom Celebration Cakes ⭐⭐⭐⭐⭐","buttonText":"Buy Now","description":"Designed to make your special moments unforgettable.","href":"#"},{"title":"Sweet Cinnamon Rolls ⭐⭐⭐⭐⭐","buttonText":"Buy Now","imageSrc":"http://img.b2bpic.net/free-photo/cinnamon-rolls-buns-wooden-table-kanelbulle-swedish-dessert_123827-22535.jpg","description":"Warm, gooey, and topped with decadent cream cheese frosting.","href":"#"}].map((item, index) => (
|
||||
<ScrollReveal key={item.title} variant="slide-up" delay={staggerDelays[index]} className={cls("col-span-1 group", gridClasses[index])}>
|
||||
<a href={item.href} className="block relative overflow-hidden rounded">
|
||||
<div className="h-80 xl:h-100 2xl:h-120 overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc={item.imageSrc}
|
||||
videoSrc={item.videoSrc}
|
||||
className="rounded group-hover:scale-105 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -inset-x-px -bottom-px h-2/5 backdrop-blur-xl mask-fade-top-overlay" aria-hidden="true" />
|
||||
<div className="absolute inset-x-3 bottom-3 2xl:inset-x-4 2xl:bottom-4 z-10">
|
||||
<div className="relative flex flex-col gap-1 md:gap-0 md:group-hover:gap-1 p-3 2xl:p-4 transition-all duration-400">
|
||||
<div className="absolute inset-0 -z-10 card rounded translate-y-0 opacity-100 md:translate-y-full md:opacity-0 transition-all duration-400 ease-out md:group-hover:translate-y-0 md:group-hover:opacity-100" />
|
||||
<h3 className="text-2xl font-semibold leading-snug text-foreground md:text-white transition-colors duration-400 md:group-hover:text-foreground">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="grid grid-rows-[1fr] md:grid-rows-[0fr] transition-all duration-400 ease-out md:group-hover:grid-rows-[1fr]">
|
||||
<p className="overflow-hidden text-base leading-snug text-foreground opacity-100 md:opacity-0 transition-opacity duration-400 md:group-hover:opacity-100">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ProductsSection() {
|
||||
return (
|
||||
<div data-webild-section="products" id="products">
|
||||
<ProductsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
src/pages/HomePage/sections/Testimonials.tsx
Normal file
58
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// 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="Happy Customers"
|
||||
title="What Our Community Says"
|
||||
description="Hear from those who've savored our freshly baked goodness and experienced our warm service."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Local Resident",
|
||||
quote: "The Daily Crumb is my go-to for morning pastries. Their croissants are simply divine and the staff always makes my day!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-pretty-girl-model-standing-holding-cabbage_114579-74354.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark T.",
|
||||
role: "Small Business Owner",
|
||||
quote: "I order all my corporate event pastries from here. Always fresh, always delicious, and always on time!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-looking-front-smiliung-cheerfully-showing-ok-sign-standing-orange-wall_141793-96581.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
role: "Food Blogger",
|
||||
quote: "Every item from The Daily Crumb is a masterpiece. Their sourdough bread is a game-changer, perfectly crusty and airy inside.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-short-hair-wearing-white-polo-shirt-holding-notebook-pen-writing-with-serious-face_141793-46470.jpg",
|
||||
},
|
||||
{
|
||||
name: "David K.",
|
||||
role: "Parent",
|
||||
quote: "Their custom cakes for birthdays are incredible! Beautiful designs and amazing flavors. My kids absolutely love them.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-male-showing-paper-bag-t-shirt-jacket-looking-cheery-front-view_176474-91622.jpg",
|
||||
},
|
||||
{
|
||||
name: "Grace L.",
|
||||
role: "Retiree",
|
||||
quote: "This bakery feels like home. The warm service and the aroma of fresh bread always make my visits a delight. A true neighborhood gem.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-shot-cheerful-attractive-grandmother-white-shirt-holding-piece-freshly-baked-berry-pie-birthday-having-joyful-facial-expression-smiling-broadly_343059-1898.jpg",
|
||||
},
|
||||
{
|
||||
name: "James & Lily",
|
||||
role: "Couple",
|
||||
quote: "We discovered The Daily Crumb last year and haven't looked back. Their coffee and pastries are our weekend ritual!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-feeding-woman-with-croissant-bed_23-2148012227.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user