80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import React from 'react'
|
|
import { Star } from 'lucide-react'
|
|
import { AnimateIn } from '@/components/AnimateIn'
|
|
|
|
interface ReviewItem {
|
|
author: string
|
|
location?: string
|
|
rating?: number
|
|
content: string
|
|
}
|
|
|
|
interface ReviewsBlockProps {
|
|
badge?: string
|
|
heading: string
|
|
subheading?: string
|
|
items?: ReviewItem[]
|
|
}
|
|
|
|
export function ReviewsBlockComponent(props: ReviewsBlockProps) {
|
|
const { badge, heading, subheading, items } = props
|
|
|
|
return (
|
|
<section className="py-24 bg-white border-b-2 border-[#1f1f1f]">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
|
|
<AnimateIn direction="up">
|
|
<div className="max-w-3xl mb-14">
|
|
{badge && (
|
|
<div className="inline-block bg-[#FFED00] text-[#1f1f1f] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-[#1f1f1f]">
|
|
{badge}
|
|
</div>
|
|
)}
|
|
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
|
|
{heading}
|
|
</h2>
|
|
{subheading && (
|
|
<p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
|
|
{subheading}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
{items && items.length > 0 && (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
|
|
{items.map((item, idx) => (
|
|
<AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
|
|
<div
|
|
className="bg-[#f4f4f4] border-2 border-[#1f1f1f] p-8 h-full flex flex-col justify-between hover-lift transition-all"
|
|
>
|
|
<div>
|
|
<div className="flex items-center gap-1 text-[#1f1f1f] mb-6">
|
|
{Array.from({ length: item.rating || 5 }).map((_, sIdx) => (
|
|
<Star key={sIdx} className="h-5 w-5 fill-[#FFED00] stroke-[#1f1f1f]" />
|
|
))}
|
|
</div>
|
|
<p className="text-sm text-[#333333] leading-relaxed font-medium">
|
|
"{item.content}"
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t-2 border-[#e0e0e0]">
|
|
<div className="font-black uppercase text-[#1f1f1f] text-xs tracking-wider">
|
|
{item.author}
|
|
</div>
|
|
{item.location && (
|
|
<div className="text-xs text-[#666666] mt-0.5 font-medium">
|
|
{item.location}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|