bender/a97a02cf-6585-4cd6-94f9-c90f6a08bd94
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/tag/Tag.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:56:37 +00:00
parent 2c25d973d7
commit f59a4beb36
1 changed files with 31 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/tag/Tag.tsx
View File

@@ -23,36 +23,27 @@ const defaultTestimonials: Testimonial[] = [
role: 'Product Manager',
company: 'TechCorp',
excerpt: 'Amazing experience working with this team.',
fullText: 'This has been an absolutely transformative experience. The team went above and beyond to ensure our project succeeded. Their attention to detail and commitment to excellence is unmatched. I would highly recommend them to anyone looking for top-tier service.',
fullText: 'This has been an absolutely transformative experience. The team went above and beyond to ensure our project succeeded. Their attention to detail and commitment to excellence is unmatched in the industry.',
avatar: '👩‍💼',
},
{
id: '2',
author: 'Michael Chen',
role: 'CEO',
company: 'StartupXYZ',
company: 'StartupHub',
excerpt: 'Exceeded all our expectations.',
fullText: 'From day one, they demonstrated exceptional professionalism and expertise. They understood our vision and delivered results that surpassed our expectations. The collaboration was seamless and the outcomes were outstanding. Truly a game-changer for our business.',
fullText: 'From day one, they demonstrated exceptional expertise and professionalism. The results speak for themselves - we saw a 300% improvement in our metrics. Highly recommend to anyone looking for top-tier service.',
avatar: '👨‍💼',
},
{
id: '3',
author: 'Emily Rodriguez',
role: 'Design Lead',
company: 'Creative Studios',
company: 'CreativeStudio',
excerpt: 'Best decision we made this year.',
fullText: 'Working with this team was the best decision we made all year. Their innovative approach and creative solutions transformed our project completely. They were responsive, professional, and genuinely invested in our success. I cannot recommend them highly enough.',
fullText: 'The collaboration was seamless and the final product exceeded our vision. They understood our brand deeply and delivered something truly special. We are already planning our next project together.',
avatar: '👩‍🎨',
},
{
id: '4',
author: 'David Park',
role: 'Operations Director',
company: 'Global Solutions Inc',
excerpt: 'Incredible attention to detail.',
fullText: 'The level of detail and care they put into every aspect of the project was incredible. They anticipated our needs, solved problems proactively, and delivered exceptional results on time and within budget. Their expertise and dedication made all the difference.',
avatar: '👨‍💼',
},
];
export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
@@ -66,18 +57,18 @@ export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
};
return (
<div className="w-full py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full py-12 px-4 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">
<h2 className="text-4xl font-bold text-slate-900 mb-4">
What Our Clients Say
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-slate-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">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{testimonials.map((testimonial) => (
<div
key={testimonial.id}
@@ -95,53 +86,52 @@ export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
>
{/* Front of card */}
<div
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',
}}
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-8 flex flex-col justify-between border border-slate-200"
style={{ backfaceVisibility: 'hidden' }}
>
<div>
<div className="flex items-center gap-4 mb-4">
<div className="text-4xl">{testimonial.avatar}</div>
<div className="flex items-center gap-4 mb-6">
<div className="text-5xl">{testimonial.avatar}</div>
<div>
<h3 className="font-semibold text-gray-900 text-sm">
<h3 className="font-bold text-slate-900">
{testimonial.author}
</h3>
<p className="text-xs text-gray-600">
<p className="text-sm text-slate-600">
{testimonial.role}
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-slate-500">
{testimonial.company}
</p>
</div>
</div>
<p className="text-gray-700 text-sm leading-relaxed">
<p className="text-slate-700 italic text-lg leading-relaxed">
"{testimonial.excerpt}"
</p>
</div>
<div className="flex gap-1">
{[...Array(5)].map((_, i) => (
<span key={i} className="text-yellow-400">
★
</span>
))}
<div className="text-center text-sm text-slate-500 font-medium">
Click to read more
</div>
</div>
{/* Back of card */}
<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-center border border-blue-700"
className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg shadow-lg p-8 flex flex-col justify-between border border-blue-500"
style={{
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
}}
>
<p className="text-white text-sm leading-relaxed font-medium">
<div>
<h3 className="font-bold text-white mb-4 text-lg">
{testimonial.author}
</h3>
<p className="text-blue-50 leading-relaxed text-sm">
{testimonial.fullText}
</p>
<p className="text-blue-100 text-xs mt-4 font-semibold">
— {testimonial.author}
</p>
</div>
<div className="text-center text-xs text-blue-200 font-medium">
Click to go back
</div>
</div>
</div>
</div>