|
|
|
|
@@ -1,43 +1,111 @@
|
|
|
|
|
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
|
|
|
|
// file as the canonical source for the "reviews" 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 TextAnimation from "@/components/ui/TextAnimation";
|
|
|
|
|
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
|
|
|
|
import ScrollReveal from "@/components/ui/ScrollReveal";
|
|
|
|
|
import Carousel from "@/components/ui/Carousel";
|
|
|
|
|
import { cls } from "@/lib/utils";
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
|
|
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
|
const avatars = [
|
|
|
|
|
{
|
|
|
|
|
name: "Shawn D",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-dark-haired-latin-man-posing-with-arms-folded-kitchen_74855-8094.jpg"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Roxanne G",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-carefree-brunette-woman-sitting-couch-living-room-online-shopping_1258-201984.jpg"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Richard G",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "April M",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-businessman-using-modern-smart-phone-young-happy-man-working-his-office-holding-cellphone_1391-602.jpg"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Lora O",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/courier-delivering-groceries-home_23-2149738006.jpg"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
type Avatar = {
|
|
|
|
|
name: string;
|
|
|
|
|
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
|
|
|
|
|
|
|
|
|
const ReviewsInline = () => {
|
|
|
|
|
const visibleAvatars = avatars.slice(0, 6);
|
|
|
|
|
const remainingCount = avatars.length - visibleAvatars.length;
|
|
|
|
|
|
|
|
|
|
export default function ReviewsSection(): React.JSX.Element {
|
|
|
|
|
return (
|
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
|
|
|
<SectionErrorBoundary name="reviews">
|
|
|
|
|
<TestimonialTrustCard
|
|
|
|
|
quote="This company is amazing to work with and absolutely the best. I cannot recommend them enough to anyone. On time, very thorough with the diagnostic of the problem and explained the best cost effective way to fix it. I wish I could give them more stars."
|
|
|
|
|
rating={5}
|
|
|
|
|
author="Shawn Deidrich"
|
|
|
|
|
avatars={[
|
|
|
|
|
{
|
|
|
|
|
name: "Shawn D",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-handsome-dark-haired-latin-man-posing-with-arms-folded-kitchen_74855-8094.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Roxanne G",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-carefree-brunette-woman-sitting-couch-living-room-online-shopping_1258-201984.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Richard G",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12311.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "April M",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiling-businessman-using-modern-smart-phone-young-happy-man-working-his-office-holding-cellphone_1391-602.jpg",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "Lora O",
|
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/courier-delivering-groceries-home_23-2149738006.jpg",
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
textAnimation="slide-up"
|
|
|
|
|
/>
|
|
|
|
|
</SectionErrorBoundary>
|
|
|
|
|
<section aria-label="Testimonials section" className="py-20">
|
|
|
|
|
<div className="flex flex-col items-center gap-5 w-content-width mx-auto">
|
|
|
|
|
<ScrollReveal variant="fade-blur" className="flex gap-1.5">
|
|
|
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
|
|
|
<Star
|
|
|
|
|
key={index}
|
|
|
|
|
className={cls("size-6 text-accent", index < 5 ? "fill-accent" : "fill-transparent")}
|
|
|
|
|
strokeWidth={1.5}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
|
|
|
|
|
<Carousel className="w-full" itemClassName="w-full shrink-0 flex flex-col items-center justify-center px-4">
|
|
|
|
|
<div className="flex flex-col items-center gap-6 w-full max-w-5xl mx-auto">
|
|
|
|
|
<TextAnimation
|
|
|
|
|
text={"This company is amazing to work with and absolutely the best. I cannot recommend them enough to anyone. On time, very thorough with the diagnostic of the problem and explained the best cost effective way to fix it. I wish I could give them more stars."}
|
|
|
|
|
variant={"slide-up"}
|
|
|
|
|
gradientText={false}
|
|
|
|
|
tag="p"
|
|
|
|
|
className="text-3xl md:text-4xl 2xl:text-5xl leading-[1.2] font-semibold text-center text-balance"
|
|
|
|
|
/>
|
|
|
|
|
<ScrollReveal variant="fade-blur" delay={0.1} className="text-lg md:text-xl leading-snug text-center text-balance">
|
|
|
|
|
<p>{"Shawn Deidrich"}</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex flex-col items-center gap-6 w-full max-w-5xl mx-auto">
|
|
|
|
|
<TextAnimation
|
|
|
|
|
text={"Nick was excellent. Explained a few things on questions I had, very professionally. I appreciate the time he took in conversation while he was doing the work. Very courteous and respectful. I would definitely recommend ACHSM to trusted people who would only respect and honor you in business. Thanks again."}
|
|
|
|
|
variant={"slide-up"}
|
|
|
|
|
gradientText={false}
|
|
|
|
|
tag="p"
|
|
|
|
|
className="text-3xl md:text-4xl 2xl:text-5xl leading-[1.2] font-semibold text-center text-balance"
|
|
|
|
|
/>
|
|
|
|
|
<ScrollReveal variant="fade-blur" delay={0.1} className="text-lg md:text-xl leading-snug text-center text-balance">
|
|
|
|
|
<p>{"Richard Gutierrez"}</p>
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
</Carousel>
|
|
|
|
|
|
|
|
|
|
<ScrollReveal variant="fade-blur" delay={0.2} className="flex items-center justify-center mt-1">
|
|
|
|
|
{visibleAvatars.map((avatar, index) => (
|
|
|
|
|
<div
|
|
|
|
|
key={avatar.name}
|
|
|
|
|
className={cls("relative size-12 md:size-16 overflow-hidden rounded-full border-2 border-background", index > 0 && "-ml-5")}
|
|
|
|
|
style={{ zIndex: visibleAvatars.length - index }}
|
|
|
|
|
>
|
|
|
|
|
<ImageOrVideo imageSrc={avatar.imageSrc} videoSrc={avatar.videoSrc} />
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
{remainingCount > 0 && (
|
|
|
|
|
<div
|
|
|
|
|
className="flex items-center justify-center size-12 md:size-16 -ml-5 rounded-full border-2 border-background card"
|
|
|
|
|
style={{ zIndex: 0 }}
|
|
|
|
|
>
|
|
|
|
|
<span className="text-sm md:text-base font-semibold">+{remainingCount}</span>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</ScrollReveal>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default function ReviewsSection() {
|
|
|
|
|
return (
|
|
|
|
|
<div data-webild-section="reviews" id="reviews">
|
|
|
|
|
<ReviewsInline />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
