Merge version_8_1783089540816 into main #7
@@ -1,58 +1,149 @@
|
||||
// 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 ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
const testimonials = [
|
||||
{
|
||||
name: "Claire Miller",
|
||||
role: "Food Blogger",
|
||||
company: "EatLocal",
|
||||
rating: 5,
|
||||
result: "Featured their sourdough in a post that drove 10k+ new readers.",
|
||||
imageSrc: "https://picsum.photos/seed/1052007197/1200/800"
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Local Resident",
|
||||
company: "Neighbor",
|
||||
rating: 5,
|
||||
result: "Subscribed for 2 years straight, saving 15% on weekly artisan loaves.",
|
||||
imageSrc: "https://picsum.photos/seed/1232930319/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Sarah Smith",
|
||||
role: "Chef",
|
||||
company: "Bistro",
|
||||
rating: 5,
|
||||
result: "Boosted our lunch sandwich sales by 30% after switching to their bread.",
|
||||
imageSrc: "https://picsum.photos/seed/274719499/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Mike Ross",
|
||||
role: "Teacher",
|
||||
company: "Public School",
|
||||
rating: 5,
|
||||
result: "Ordered 50+ loaves for our school fundraiser, raising over $500.",
|
||||
imageSrc: "https://picsum.photos/seed/1477195051/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Jane Wilson",
|
||||
role: "Designer",
|
||||
company: "Studio",
|
||||
rating: 5,
|
||||
result: "Their reliable catering delivery has flawlessly served 12 of our client events.",
|
||||
imageSrc: "https://picsum.photos/seed/681714153/1200/800"
|
||||
}
|
||||
];
|
||||
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
role: string;
|
||||
company: string;
|
||||
rating: number;
|
||||
result?: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const TestimonialsInline = () => {
|
||||
const duplicated = [...testimonials, ...testimonials, ...testimonials, ...testimonials];
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Testimonials"
|
||||
title="Loved by Locals"
|
||||
description="See why our neighbors make us part of their daily routine."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Claire Miller",
|
||||
role: "Food Blogger",
|
||||
company: "EatLocal",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.pexels.com/photos/16771767/pexels-photo-16771767.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "John Doe",
|
||||
role: "Local Resident",
|
||||
company: "Neighbor",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.pexels.com/photos/34699447/pexels-photo-34699447.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Sarah Smith",
|
||||
role: "Chef",
|
||||
company: "Bistro",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.pexels.com/photos/8429811/pexels-photo-8429811.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Mike Ross",
|
||||
role: "Teacher",
|
||||
company: "Public School",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.pexels.com/photos/6563916/pexels-photo-6563916.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
{
|
||||
name: "Jane Wilson",
|
||||
role: "Designer",
|
||||
company: "Studio",
|
||||
rating: 5,
|
||||
imageSrc: "https://images.pexels.com/photos/24863757/pexels-photo-24863757.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
<section aria-label="Testimonials section" className="pt-20 pb-10">
|
||||
<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>{"Testimonials"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Loved by Locals"}
|
||||
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={"See why our neighbors make us part of their daily routine."}
|
||||
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>
|
||||
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="w-content-width mx-auto overflow-hidden mask-fade-x-medium">
|
||||
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "60s" }}>
|
||||
{duplicated.map((testimonial, i) => (
|
||||
<div key={i} className="relative shrink-0 w-60 md:w-75 2xl:w-80 aspect-4/5 mb-10 mr-3 md:mr-5 rounded overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc={testimonial.imageSrc}
|
||||
videoSrc={testimonial.videoSrc}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
<span className="text-2xl font-semibold leading-snug truncate">{testimonial.name}</span>
|
||||
|
||||
<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>
|
||||
{testimonial.result && (
|
||||
<p className="text-sm text-accent mt-2 line-clamp-3">
|
||||
"{testimonial.result}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<div data-webild-section="testimonials" data-section="testimonials" id="testimonials">
|
||||
<TestimonialsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user