Update src/components/sections/testimonial/TestimonialCardSix.tsx
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
'use client';
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from 'react';
|
||||||
|
|
||||||
interface Testimonial {
|
interface Testimonial {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -10,156 +10,152 @@ interface Testimonial {
|
|||||||
shortText: string;
|
shortText: string;
|
||||||
fullText: string;
|
fullText: string;
|
||||||
avatar?: string;
|
avatar?: string;
|
||||||
|
rating?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface TestimonialCardSixProps {
|
const testimonials: Testimonial[] = [
|
||||||
testimonials?: Testimonial[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultTestimonials: Testimonial[] = [
|
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
author: "Sarah Johnson",
|
author: 'Sarah Johnson',
|
||||||
role: "Product Manager",
|
role: 'Product Manager',
|
||||||
company: "TechCorp",
|
company: 'Tech Innovations Inc',
|
||||||
shortText: "Amazing service!",
|
shortText: 'Exceptional service and support.',
|
||||||
fullText:
|
fullText: 'This product has completely transformed how our team works. The exceptional service and support from the team made the transition seamless. We saw a 40% improvement in productivity within the first month.',
|
||||||
"This service has completely transformed how we manage our projects. The intuitive interface and powerful features have saved us countless hours. The support team is incredibly responsive and helpful. I would highly recommend this to any team looking to improve their workflow.",
|
avatar: '👩💼',
|
||||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
|
rating: 5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
author: "Michael Chen",
|
author: 'Michael Chen',
|
||||||
role: "CEO",
|
role: 'CEO',
|
||||||
company: "StartupXYZ",
|
company: 'Digital Solutions Ltd',
|
||||||
shortText: "Game changer!",
|
shortText: 'Best investment we made this year.',
|
||||||
fullText:
|
fullText: 'Best investment we made this year. The platform is intuitive, powerful, and the ROI has exceeded our expectations. The team is responsive and genuinely cares about customer success. Highly recommended for any growing business.',
|
||||||
"We've been using this platform for 6 months now and the results speak for themselves. Our team productivity has increased by 40%, and the ROI has been exceptional. The platform scales beautifully with our growing needs. Couldn't ask for a better solution.",
|
avatar: '👨💼',
|
||||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Michael",
|
rating: 5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
author: "Emily Rodriguez",
|
author: 'Emily Rodriguez',
|
||||||
role: "Design Lead",
|
role: 'Operations Director',
|
||||||
company: "Creative Studios",
|
company: 'Global Enterprises',
|
||||||
shortText: "Exceeded expectations!",
|
shortText: 'Streamlined our entire workflow.',
|
||||||
fullText:
|
fullText: 'Streamlined our entire workflow and reduced operational costs significantly. The implementation was smooth, and the training provided was comprehensive. Our team is now more efficient than ever before.',
|
||||||
"The design and user experience are top-notch. Every detail has been thoughtfully considered. The collaboration features make it easy for our distributed team to work together seamlessly. This is the kind of tool that makes you wonder how you ever worked without it.",
|
avatar: '👩💻',
|
||||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emily",
|
rating: 5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
author: "David Park",
|
author: 'David Thompson',
|
||||||
role: "Operations Director",
|
role: 'Founder',
|
||||||
company: "Global Solutions",
|
company: 'StartUp Ventures',
|
||||||
shortText: "Best investment ever!",
|
shortText: 'Game-changer for our startup.',
|
||||||
fullText:
|
fullText: 'A true game-changer for our startup. The scalability and flexibility of the solution allowed us to grow without limitations. Customer support is outstanding and always available when we need them.',
|
||||||
"We've tried many solutions before, but this one stands out. The implementation was smooth, the training was comprehensive, and the ongoing support is exceptional. Our team adopted it immediately and we're seeing measurable improvements in efficiency and accuracy.",
|
avatar: '👨🚀',
|
||||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=David",
|
rating: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
author: 'Jessica Lee',
|
||||||
|
role: 'Marketing Lead',
|
||||||
|
company: 'Creative Agency Pro',
|
||||||
|
shortText: 'Transformed our client deliverables.',
|
||||||
|
fullText: 'Transformed our client deliverables and improved our team collaboration. The analytics and reporting features are incredibly detailed and actionable. We\'ve already recommended it to several clients.',
|
||||||
|
avatar: '👩🎨',
|
||||||
|
rating: 5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
author: 'Robert Martinez',
|
||||||
|
role: 'Technical Director',
|
||||||
|
company: 'Enterprise Solutions',
|
||||||
|
shortText: 'Robust, reliable, and secure.',
|
||||||
|
fullText: 'Robust, reliable, and secure platform that meets all our enterprise requirements. The API documentation is excellent, and integration with our existing systems was straightforward. Outstanding technical support team.',
|
||||||
|
avatar: '👨💻',
|
||||||
|
rating: 5,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function TestimonialCardSix({
|
interface CardProps {
|
||||||
testimonials = defaultTestimonials,
|
testimonial: Testimonial;
|
||||||
}: TestimonialCardSixProps) {
|
}
|
||||||
const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
|
|
||||||
|
|
||||||
const toggleFlip = (id: number) => {
|
function TestimonialCard({ testimonial }: CardProps) {
|
||||||
setFlipped((prev) => ({
|
const [isFlipped, setIsFlipped] = useState(false);
|
||||||
...prev,
|
|
||||||
[id]: !prev[id],
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-slate-50 to-slate-100">
|
|
||||||
<div className="max-w-6xl mx-auto">
|
|
||||||
<div className="text-center mb-12">
|
|
||||||
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
|
|
||||||
What Our Clients Say
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-gray-600">
|
|
||||||
Hover over cards to see full testimonials
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
{testimonials.map((testimonial) => (
|
|
||||||
<div
|
<div
|
||||||
key={testimonial.id}
|
|
||||||
className="h-80 cursor-pointer perspective"
|
className="h-80 cursor-pointer perspective"
|
||||||
onClick={() => toggleFlip(testimonial.id)}
|
onMouseEnter={() => setIsFlipped(true)}
|
||||||
|
onMouseLeave={() => setIsFlipped(false)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
style={{
|
style={{
|
||||||
transformStyle: "preserve-3d",
|
transformStyle: 'preserve-3d',
|
||||||
transform: flipped[testimonial.id]
|
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||||||
? "rotateY(180deg)"
|
|
||||||
: "rotateY(0deg)",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Front of card */}
|
{/* Front Side */}
|
||||||
<div
|
<div
|
||||||
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between"
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
|
||||||
style={{ backfaceVisibility: "hidden" }}
|
style={{ backfaceVisibility: 'hidden' }}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center gap-4 mb-4">
|
<div className="flex items-center gap-4 mb-4">
|
||||||
{testimonial.avatar && (
|
<div className="text-4xl">{testimonial.avatar}</div>
|
||||||
<img
|
|
||||||
src={testimonial.avatar}
|
|
||||||
alt={testimonial.author}
|
|
||||||
className="w-12 h-12 rounded-full"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-gray-900">
|
<h3 className="font-semibold text-gray-900">{testimonial.author}</h3>
|
||||||
{testimonial.author}
|
<p className="text-sm text-gray-600">{testimonial.role}</p>
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-gray-600">
|
|
||||||
{testimonial.role}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-gray-700 text-sm mb-4">
|
|
||||||
"{testimonial.shortText}"
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<p className="text-xs text-gray-500">{testimonial.company}</p>
|
<p className="text-xs text-gray-500">{testimonial.company}</p>
|
||||||
<div className="flex gap-1">
|
</div>
|
||||||
{[...Array(5)].map((_, i) => (
|
</div>
|
||||||
|
<div className="flex gap-1 mb-4">
|
||||||
|
{Array.from({ length: testimonial.rating || 5 }).map((_, i) => (
|
||||||
<span key={i} className="text-yellow-400">
|
<span key={i} className="text-yellow-400">
|
||||||
★
|
★
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-gray-700 text-sm leading-relaxed">{testimonial.shortText}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-xs text-gray-500 text-center mt-4">Hover to read more</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Back of card */}
|
{/* Back Side */}
|
||||||
<div
|
<div
|
||||||
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-between text-white"
|
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-center border border-blue-700"
|
||||||
style={{
|
style={{
|
||||||
backfaceVisibility: "hidden",
|
backfaceVisibility: 'hidden',
|
||||||
transform: "rotateY(180deg)",
|
transform: 'rotateY(180deg)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div>
|
<p className="text-white text-sm leading-relaxed font-medium">
|
||||||
<h3 className="font-semibold text-lg mb-3">
|
{testimonial.fullText}
|
||||||
{testimonial.author}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-blue-100 leading-relaxed">
|
|
||||||
"{testimonial.fullText}"
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<p className="text-blue-200 text-xs mt-4 text-center italic">
|
||||||
<p className="text-xs text-blue-200 text-center">
|
— {testimonial.author}
|
||||||
Click to flip back
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TestimonialCardSix() {
|
||||||
|
return (
|
||||||
|
<section className="py-16 px-4 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Clients Say</h2>
|
||||||
|
<p className="text-lg text-gray-600">
|
||||||
|
Hover over any card to read the full testimonial
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{testimonials.map((testimonial) => (
|
||||||
|
<TestimonialCard key={testimonial.id} testimonial={testimonial} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user