Update src/tag/Tag.tsx
This commit is contained in:
@@ -23,36 +23,27 @@ const defaultTestimonials: Testimonial[] = [
|
|||||||
role: 'Product Manager',
|
role: 'Product Manager',
|
||||||
company: 'TechCorp',
|
company: 'TechCorp',
|
||||||
excerpt: 'Amazing experience working with this team.',
|
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: '👩💼',
|
avatar: '👩💼',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: '2',
|
||||||
author: 'Michael Chen',
|
author: 'Michael Chen',
|
||||||
role: 'CEO',
|
role: 'CEO',
|
||||||
company: 'StartupXYZ',
|
company: 'StartupHub',
|
||||||
excerpt: 'Exceeded all our expectations.',
|
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: '👨💼',
|
avatar: '👨💼',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '3',
|
id: '3',
|
||||||
author: 'Emily Rodriguez',
|
author: 'Emily Rodriguez',
|
||||||
role: 'Design Lead',
|
role: 'Design Lead',
|
||||||
company: 'Creative Studios',
|
company: 'CreativeStudio',
|
||||||
excerpt: 'Best decision we made this year.',
|
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: '👩🎨',
|
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) {
|
export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
|
||||||
@@ -66,18 +57,18 @@ export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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="max-w-6xl mx-auto">
|
||||||
<div className="text-center mb-12">
|
<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
|
What Our Clients Say
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-gray-600">
|
<p className="text-lg text-slate-600">
|
||||||
Hover over cards to see full testimonials
|
Hover over cards to see full testimonials
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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) => (
|
{testimonials.map((testimonial) => (
|
||||||
<div
|
<div
|
||||||
key={testimonial.id}
|
key={testimonial.id}
|
||||||
@@ -95,53 +86,52 @@ export default function Tag({ testimonials = defaultTestimonials }: TagProps) {
|
|||||||
>
|
>
|
||||||
{/* Front of card */}
|
{/* Front of card */}
|
||||||
<div
|
<div
|
||||||
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-8 flex flex-col justify-between border border-slate-200"
|
||||||
style={{
|
style={{ backfaceVisibility: 'hidden' }}
|
||||||
backfaceVisibility: 'hidden',
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center gap-4 mb-4">
|
<div className="flex items-center gap-4 mb-6">
|
||||||
<div className="text-4xl">{testimonial.avatar}</div>
|
<div className="text-5xl">{testimonial.avatar}</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 className="font-semibold text-gray-900 text-sm">
|
<h3 className="font-bold text-slate-900">
|
||||||
{testimonial.author}
|
{testimonial.author}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-xs text-gray-600">
|
<p className="text-sm text-slate-600">
|
||||||
{testimonial.role}
|
{testimonial.role}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-gray-500">
|
<p className="text-xs text-slate-500">
|
||||||
{testimonial.company}
|
{testimonial.company}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-700 text-sm leading-relaxed">
|
<p className="text-slate-700 italic text-lg leading-relaxed">
|
||||||
"{testimonial.excerpt}"
|
"{testimonial.excerpt}"
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-1">
|
<div className="text-center text-sm text-slate-500 font-medium">
|
||||||
{[...Array(5)].map((_, i) => (
|
Click to read more
|
||||||
<span key={i} className="text-yellow-400">
|
|
||||||
★
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Back of card */}
|
{/* Back of card */}
|
||||||
<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-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={{
|
style={{
|
||||||
backfaceVisibility: 'hidden',
|
backfaceVisibility: 'hidden',
|
||||||
transform: 'rotateY(180deg)',
|
transform: 'rotateY(180deg)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className="text-white text-sm leading-relaxed font-medium">
|
<div>
|
||||||
{testimonial.fullText}
|
<h3 className="font-bold text-white mb-4 text-lg">
|
||||||
</p>
|
{testimonial.author}
|
||||||
<p className="text-blue-100 text-xs mt-4 font-semibold">
|
</h3>
|
||||||
— {testimonial.author}
|
<p className="text-blue-50 leading-relaxed text-sm">
|
||||||
</p>
|
{testimonial.fullText}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center text-xs text-blue-200 font-medium">
|
||||||
|
Click to go back
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user