"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://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", }, { 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://plus.unsplash.com/premium_photo-1690407617542-2f210cf20d7e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D", }, { 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://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D", }, { 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://images.unsplash.com/photo-1580489944761-15a19d654956?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDN8fHxlbnwwfHx8fHw%3D", }, ] const ANIM_IMAGES = [ "https://img.freepik.com/free-photo/portrait-anime-character-doing-fitness-exercising_23-2151666687.jpg?semt=ais_hybrid&w=740", "https://img.freepik.com/free-photo/anime-character-winter_23-2151843507.jpg?semt=ais_hybrid&w=740", "https://img.freepik.com/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568847.jpg?semt=ais_hybrid&w=740", "https://img.freepik.com/free-photo/anime-character-using-virtual-reality-glasses-metaverse_23-2151568850.jpg?t=st=1747007259~exp=1747010859~hmac=0f9056951d9ea1c8bf86dd63e33b00ea3a34e3a40575b5ec5b7bd77cfca69ad6&w=996", "https://img.freepik.com/free-photo/fantasy-anime-style-scene_23-2151135073.jpg?t=st=1747006767~exp=1747010367~hmac=f744af6af2545a9dcb4f01d78af38e2828b0375243bc3c1dfae391b2db68c09f&w=900", ] 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 (

Testimonials

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

{TESTIMONIALS.map((testimonial, index) => (

{testimonial.description}

{testimonial.name .split(" ") .map((n) => n[0]) .join("")}

{testimonial.name} {testimonial.profession}

))}

) } export const AwardsVariant = () => { return (

Recognitions

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

🏆

Awwwards

Site of the Day

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

🚀

Performance

100% Performance Score

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

🎯

CSS awaaards

Honorable Mention

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

🎖

awaaards

Most Creative Design

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

) } export const ImagesVariant = () => { return (

Try our AI Fantázomai

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus consequatur reprehenderit.

{ANIM_IMAGES.map((imageUrl, index) => ( anime

))}

) }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build