"use client"
import * as React from "react"
import { useTheme } from "next-themes"
import {
CardTransformed,
CardsContainer,
ContainerScroll,
ReviewStars,
} from "@/components/blocks/animated-cards-stack"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
const TESTIMONIALS = [
{
id: "testimonial-3",
name: "James S.",
profession: "Frontend Developer",
rating: 5,
description:
"Their innovative solutions and quick turnaround time made our collaboration incredibly successful. Highly recommended!",
avatarUrl:
"https://cdn.21st.dev/assets/mirror/40/407ec2dc4a31cb8219557df265181c36183857203abb36ecf42f68cd28b3c688.jpg",
},
{
id: "testimonial-1",
name: "Jessica H.",
profession: "Web Designer",
rating: 4.5,
description:
"The attention to detail and user experience in their work is exceptional. I'm thoroughly impressed with the final product.",
avatarUrl:
"https://cdn.21st.dev/assets/mirror/a8/a8b4be7d4fb97c25668586eb7299f13b33c1441e50bc0977c0170554f42a098d.jpg",
},
{
id: "testimonial-2",
name: "Lisa M.",
profession: "UX Designer",
rating: 5,
description:
"Working with them was a game-changer for our project. Their expertise and professionalism exceeded our expectations.",
avatarUrl:
"https://cdn.21st.dev/assets/mirror/77/77a35dbc27aef64a38b60f1a5a7dfbe9d693ff8e424b61d11ed557d6244a4459.jpg",
},
{
id: "testimonial-4",
name: "Jane D.",
profession: "UI/UX Designer",
rating: 4.5,
description:
"The quality of work and communication throughout the project was outstanding. They delivered exactly what we needed.",
avatarUrl:
"https://cdn.21st.dev/assets/mirror/34/34706f540eb89d15c32d70a9f03cb11011613531735df1c7507c5ab8a0a754ff.jpg",
},
]
const ANIM_IMAGES = [
"https://cdn.21st.dev/assets/mirror/b0/b0ef9cdbf2e813f5eced5ca218a23d2e587c389235218783b73cc0288470d8a9.jpg",
"https://cdn.21st.dev/assets/mirror/55/550e7c983227046d3c3b3b03bf1922438371a1042488deda657de42630dd7b68.jpg",
"https://cdn.21st.dev/assets/mirror/49/49df7aba837b750e34f5028503fba61b76499622332fd7bf0a8d48d3325c8e67.jpg",
"https://cdn.21st.dev/assets/mirror/69/69fc5ebb1ce6cbcfd2e5975f59e1a2dd65896a69b3680380af86540676c74fa7.jpg",
"https://cdn.21st.dev/assets/mirror/86/86caf176ec57b630127fb3d69525dc880a9cd505e5b795b88d4a933798a37f13.jpg",
]
function getSectionClass(theme: string | undefined) {
return theme === "dark"
? "bg-destructive text-secondary px-8 py-12"
: "bg-accent px-8 py-12"
}
function getReviewStarsClass(theme: string | undefined) {
return theme === "dark" ? "text-primary" : "text-teal-500"
}
function getTextClass(theme: string | undefined) {
return theme === "dark" ? "text-primary-foreground" : ""
}
function getAvatarClass(theme: string | undefined) {
return theme === "dark"
? "!size-12 border border-stone-700"
: "!size-12 border border-stone-300"
}
function getCardVariant(theme: string | undefined) {
return theme === "dark" ? "dark" : "light"
}
export function TestimonialsVariant() {
const { theme } = useTheme()
return (
<section className={getSectionClass(theme)}>
<div>
<h3 className="text-center text-4xl font-semibold">Testimonials</h3>
<p className="mx-auto mt-2 max-w-lg text-center text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
consequatur reprehenderit.
</p>
</div>
<ContainerScroll className="container h-[300vh] ">
<div className="sticky left-0 top-0 h-svh w-full py-12">
<CardsContainer className="mx-auto size-full h-[450px] w-[350px]">
{TESTIMONIALS.map((testimonial, index) => (
<CardTransformed
arrayLength={TESTIMONIALS.length}
key={testimonial.id}
variant={getCardVariant(theme)}
index={index + 2}
role="article"
aria-labelledby={`card-${testimonial.id}-title`}
aria-describedby={`card-${testimonial.id}-content`}
>
<div className="flex flex-col items-center space-y-4 text-center">
<ReviewStars
className={getReviewStarsClass(theme)}
rating={testimonial.rating}
/>
<div className={`mx-auto w-4/5 text-lg ${getTextClass(theme)}`}>
<blockquote cite="#">{testimonial.description}</blockquote>
</div>
</div>
<div className="flex items-center gap-4">
<Avatar className={getAvatarClass(theme)}>
<AvatarImage
src={testimonial.avatarUrl}
alt={`Portrait of ${testimonial.name}`}
/>
<AvatarFallback>
{testimonial.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div>
<span className="block text-lg font-semibold tracking-tight md:text-xl">
{testimonial.name}
</span>
<span className="block text-sm text-muted-foreground ">
{testimonial.profession}
</span>
</div>
</div>
</CardTransformed>
))}
</CardsContainer>
</div>
</ContainerScroll>
</section>
)
}
export const AwardsVariant = () => {
return (
<section className="bg-accent px-8 py-12">
<div>
<h2 className="text-center text-4xl font-semibold">Recognitions</h2>
<p className="mx-auto mt-2 max-w-lg text-center text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
consequatur reprehenderit.
</p>
</div>
<ContainerScroll className="container h-[300vh] ">
<div className="sticky left-0 top-0 h-svh w-full py-12">
<CardsContainer className="mx-auto size-full h-72 w-[440px]">
<CardTransformed
className="items-start justify-evenly border-none bg-blue-600/80 text-secondary backdrop-blur-md"
arrayLength={TESTIMONIALS.length}
index={1}
>
<div className="flex flex-col items-start justify-start space-y-4 ">
<div className="flex size-16 items-center justify-center rounded-sm bg-secondary/50 text-2xl">
🏆
</div>
<div>
<h4 className="text-sm uppercase tracking-wide">Awwwards</h4>
<h3 className="text-2xl font-bold">Site of the Day</h3>
</div>
</div>
<p className=" text-secondary/80">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellendus consequatur reprehenderit.
</p>
</CardTransformed>
<CardTransformed
className="items-start justify-evenly border-none bg-orange-600/80 text-secondary backdrop-blur-md"
arrayLength={TESTIMONIALS.length}
index={2}
>
<div className="flex flex-col items-start justify-start space-y-4 ">
<div className="flex size-16 items-center justify-center rounded-sm bg-secondary/50 text-2xl">
🚀
</div>
<div>
<h4 className="text-sm uppercase tracking-wide">
Performance
</h4>
<h3 className="text-2xl font-bold">100% Performance Score</h3>
</div>
</div>
<p className=" text-secondary/80">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellendus consequatur reprehenderit.
</p>
</CardTransformed>
<CardTransformed
className="items-start justify-evenly border-none bg-cyan-600/80 text-secondary backdrop-blur-md"
arrayLength={TESTIMONIALS.length}
index={3}
>
<div className="flex flex-col items-start justify-start space-y-4 ">
<div className="flex size-16 items-center justify-center rounded-sm bg-secondary/50 text-2xl">
🎯
</div>
<div>
<h4 className="text-sm uppercase tracking-wide">
CSS awaaards
</h4>
<h3 className="text-2xl font-bold">Honorable Mention</h3>
</div>
</div>
<p className=" text-secondary/80">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellendus consequatur reprehenderit.
</p>
</CardTransformed>
<CardTransformed
className="items-start justify-evenly border-none bg-violet-600/80 text-secondary backdrop-blur-md"
arrayLength={TESTIMONIALS.length}
index={4}
>
<div className="flex flex-col items-start justify-start space-y-4 ">
<div className="flex size-16 items-center justify-center rounded-sm bg-secondary/50 text-2xl">
🎖
</div>
<div>
<h4 className="text-sm uppercase tracking-wide">awaaards</h4>
<h4 className="text-2xl font-bold">Most Creative Design</h4>
</div>
</div>
<p className=" text-secondary/80">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repellendus consequatur reprehenderit.
</p>
</CardTransformed>
</CardsContainer>
</div>
</ContainerScroll>
</section>
)
}
export const ImagesVariant = () => {
return (
<section className=" bg-slate-900 px-8 py-12">
<div>
<h2 className="text-center text-4xl font-semibold">
Try our AI Fantázomai
</h2>
<p className="mx-auto mt-2 max-w-lg text-center text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
consequatur reprehenderit.
</p>
</div>
<ContainerScroll className="container h-[300vh] ">
<div className="sticky left-0 top-0 h-svh w-full py-12">
<CardsContainer className="mx-auto size-full h-[420px] w-[320px]">
{ANIM_IMAGES.map((imageUrl, index) => (
<CardTransformed
arrayLength={ANIM_IMAGES.length}
key={index}
index={index + 2}
variant={"dark"}
className="overflow-hidden !rounded-sm !p-0"
>
<img
src={imageUrl}
alt="anime"
className="size-full object-cover"
width={"100%"}
height={"100%"}
/>
</CardTransformed>
))}
</CardsContainer>
</div>
</ContainerScroll>
</section>
)
}
Part of Systaliko UI — browse the full library on 21st.dev.