Merge version_9_1780919538031 into main #7
@@ -1,40 +1,136 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import { Star } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Sarah J.",
|
||||
role: "Local Professional",
|
||||
company: "Community Member",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-68234.jpg"
|
||||
},
|
||||
{
|
||||
name: "Mark T.",
|
||||
role: "Event Coordinator",
|
||||
company: "City Events",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/defocused-woman-working-laptop-outside-while-having-lunch_23-2148578246.jpg"
|
||||
},
|
||||
{
|
||||
name: "Emily R.",
|
||||
role: "Busy Parent",
|
||||
company: "Family Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-womens-having-lunch-home_23-2148451592.jpg"
|
||||
},
|
||||
{
|
||||
name: "David L.",
|
||||
role: "Office Manager",
|
||||
company: "Local Business",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-bread_1303-5910.jpg"
|
||||
},
|
||||
{
|
||||
name: "Jessica P.",
|
||||
role: "Food Blogger",
|
||||
company: "Taste Trails",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-baker-showing-mobile-phone-front-baked-croissant-shelves_23-2148189103.jpg"
|
||||
},
|
||||
{
|
||||
name: "Robert B.",
|
||||
role: "Loyal Customer",
|
||||
company: "Sweet Delights Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-cheerful-friends-sharing-donuts-cafe_637285-7948.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialOverlayCards
|
||||
tag="What Our Customers Say"
|
||||
title="Sweet Words from Sweet People"
|
||||
description="Hear directly from our satisfied customers about their delightful experiences with Sweet Delights Bakery. Your joy is our greatest reward!"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah J.", role: "Local Professional", company: "Community Member", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-68234.jpg"},
|
||||
{
|
||||
name: "Mark T.", role: "Event Coordinator", company: "City Events", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/defocused-woman-working-laptop-outside-while-having-lunch_23-2148578246.jpg"},
|
||||
{
|
||||
name: "Emily R.", role: "Busy Parent", company: "Family Client", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-womens-having-lunch-home_23-2148451592.jpg"},
|
||||
{
|
||||
name: "David L.", role: "Office Manager", company: "Local Business", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-bread_1303-5910.jpg"},
|
||||
{
|
||||
name: "Jessica P.", role: "Food Blogger", company: "Taste Trails", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-male-baker-showing-mobile-phone-front-baked-croissant-shelves_23-2148189103.jpg"},
|
||||
{
|
||||
name: "Robert B.", role: "Loyal Customer", company: "Sweet Delights Regular", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-cheerful-friends-sharing-donuts-cafe_637285-7948.jpg"},
|
||||
]}
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
role: string;
|
||||
company: string;
|
||||
rating: number;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const TestimonialsInline = () => (
|
||||
<section aria-label="Testimonials section" className="py-20">
|
||||
<div className="flex flex-col gap-8 md:gap-10">
|
||||
<div className="flex flex-col items-center gap-2 w-content-width mx-auto">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"What Our Customers Say"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Sweet Words from Sweet People"}
|
||||
variant="slide-up"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
|
||||
<TextAnimation
|
||||
text={"Hear directly from our satisfied customers about their delightful experiences with Sweet Delights Bakery. Your joy is our greatest reward!"}
|
||||
variant="slide-up"
|
||||
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>
|
||||
|
||||
<ScrollReveal variant="slide-up">
|
||||
<GridOrCarousel >
|
||||
{testimonials.map((testimonial) => (
|
||||
<div key={testimonial.name} className="relative aspect-3/4 rounded overflow-hidden">
|
||||
<ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
|
||||
|
||||
<div className="absolute inset-x-4 bottom-4 xl:inset-x-5 xl:bottom-5 2xl:inset-x-6 2xl:bottom-6 flex flex-col gap-1 xl:gap-2 2xl:gap-3 p-4 xl:p-5 2xl:p-6 card rounded backdrop-blur-sm">
|
||||
<div className="flex gap-1.5 mb-1">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Star
|
||||
key={index}
|
||||
className={cls(
|
||||
"size-5 text-accent",
|
||||
index < testimonial.rating ? "fill-accent" : "fill-transparent"
|
||||
)}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">\n <span className="text-2xl font-semibold leading-snug truncate">{testimonial.name}</span>\n <svg viewBox="0 0 24 24" aria-label="Verified account" className="w-6 h-6 text-[#1d9bf0] fill-current shrink-0">\n <g>\n <path d="M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.918-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.337 2.25c-.416-.165-.866-.25-1.336-.25-2.21 0-3.918 1.79-3.918 4 0 .495.084.965.238 1.4-1.273.65-2.148 2.02-2.148 3.6 0 1.46.827 2.766 2.09 3.472-.076.326-.122.667-.122 1.028 0 2.21 1.71 3.998 3.918 3.998.47 0 .92-.084 1.336-.25C9.182 21.585 10.49 22.5 12 22.5s2.816-.917 3.337-2.25c.416.165.866.25 1.336.25 2.21 0 3.918-1.79 3.918-4 0-.36-.046-.702-.122-1.028 1.263-.706 2.09-2.012 2.09-3.472zm-8.067-5.973l-4.144 4.144-2.043-2.043L6.83 10.04l3.457 3.458 5.56-5.56 1.416 1.416z"></path>\n </g>\n </svg>\n </div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="text-base leading-snug truncate">{testimonial.role}</span>
|
||||
<span className="text-base leading-snug truncate">{testimonial.company}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<div data-webild-section="testimonials" id="testimonials">
|
||||
<TestimonialsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user