feat: Refactor TestimonialsSection to use a new TestimonialCard component and introduce new SVG icons for quotes, cities, and properties.
This commit is contained in:
pradeepkumar
@@ -1,102 +1,160 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: '1',
|
||||
rating: 5,
|
||||
title: 'I have been working with Lorem...',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
|
||||
author: 'Caren Robert',
|
||||
title: 'I have been working with Lorem ..',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Conor Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
rating: 5,
|
||||
title: 'I have been working with Lorem...',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
|
||||
author: 'Caren Robert',
|
||||
title: 'I have been working with Lorem ..',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Conor Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
rating: 5,
|
||||
title: 'I have been working with Lorem...',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.',
|
||||
author: 'Caren Robert',
|
||||
title: 'I have been working with Lorem ..',
|
||||
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisl eget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc. Integer sed arcu vitae risus feugiat vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
|
||||
author: 'Conor Kenney',
|
||||
role: 'Chief Operations Officer',
|
||||
},
|
||||
];
|
||||
|
||||
function StarRating({ rating }: { rating: number }) {
|
||||
interface TestimonialCardProps {
|
||||
title: string;
|
||||
content: string;
|
||||
author: string;
|
||||
role: string;
|
||||
rating: number;
|
||||
}
|
||||
|
||||
function TestimonialCard({ title, content, author, role, rating }: TestimonialCardProps) {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<svg
|
||||
key={i}
|
||||
className={`w-5 h-5 ${i < rating ? 'text-[#f5a623]' : 'text-gray-300'}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
<div className="bg-white rounded-[15px] p-6 shadow-[0px_4px_20px_rgba(0,0,0,0.08)]">
|
||||
{/* Quote Icon */}
|
||||
<div className="mb-4">
|
||||
<Image
|
||||
src="/assets/icons/quote-marks.svg"
|
||||
alt="Quote"
|
||||
width={23}
|
||||
height={16}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-fractul font-bold text-[14px] leading-normal text-[#00293d] mb-3">
|
||||
{title}
|
||||
</h3>
|
||||
|
||||
{/* Content */}
|
||||
<p className="font-serif font-normal text-[14px] leading-normal text-[#00293d] mb-4">
|
||||
{content}
|
||||
</p>
|
||||
|
||||
{/* Star Rating */}
|
||||
<div className="flex gap-1 mb-3">
|
||||
{[...Array(rating)].map((_, i) => (
|
||||
<Image
|
||||
key={i}
|
||||
src="/assets/icons/star-yellow.svg"
|
||||
alt="Star"
|
||||
width={18}
|
||||
height={17}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Author Info */}
|
||||
<div>
|
||||
<p className="font-serif font-medium text-[14px] leading-normal text-[#00293d]">
|
||||
{author}
|
||||
</p>
|
||||
<p className="font-serif font-semibold text-[14px] leading-normal text-[#00293d]">
|
||||
{role}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TestimonialsSection() {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-[#f5f9f8]">
|
||||
<section className="py-12 md:py-16 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d] mb-4">
|
||||
Our Clients' Trust Is Our Foundation
|
||||
</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto mb-6">
|
||||
<p className="font-fractul font-medium text-[14px] leading-normal text-[#00293d] mb-2">
|
||||
We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.
|
||||
</p>
|
||||
<p className="text-gray-600">
|
||||
Clients rate our real estate services an average of 4.8 on average, based on recent client reviews.
|
||||
<p className="font-fractul font-medium text-[14px] leading-normal text-[#00293d]">
|
||||
Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Rating Summary */}
|
||||
<div className="flex justify-center items-center gap-8 mb-12">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-3xl font-bold text-[#00293d]">4.8 / 5 Stars</span>
|
||||
{/* Stats Section */}
|
||||
<div className="flex justify-center items-center gap-8 md:gap-12 mb-10">
|
||||
{/* Cities Stat */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/assets/icons/cities-icon.svg"
|
||||
alt="Cities"
|
||||
width={27}
|
||||
height={27}
|
||||
/>
|
||||
<div>
|
||||
<span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
|
||||
25+ Cities &
|
||||
</span>
|
||||
<br />
|
||||
<span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
|
||||
neighborhoods served
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-600">1,200+ Happy Clients</span>
|
||||
|
||||
{/* Properties Stat */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/assets/icons/properties-icon.svg"
|
||||
alt="Properties"
|
||||
width={25}
|
||||
height={24}
|
||||
/>
|
||||
<div>
|
||||
<span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
|
||||
1,000+ Properties
|
||||
</span>
|
||||
<br />
|
||||
<span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
|
||||
bought and sold for our clients.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonials Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{testimonials.map((testimonial) => (
|
||||
<div
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow"
|
||||
>
|
||||
{/* Rating */}
|
||||
<div className="mb-4">
|
||||
<StarRating rating={testimonial.rating} />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="font-bold text-[#00293d] mb-3">{testimonial.title}</h3>
|
||||
|
||||
{/* Content */}
|
||||
<p className="text-gray-600 text-sm mb-6 leading-relaxed">
|
||||
{testimonial.content}
|
||||
</p>
|
||||
|
||||
{/* Author */}
|
||||
<div className="border-t pt-4">
|
||||
<p className="font-semibold text-[#00293d]">{testimonial.author}</p>
|
||||
<p className="text-sm text-gray-500">{testimonial.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
title={testimonial.title}
|
||||
content={testimonial.content}
|
||||
author={testimonial.author}
|
||||
role={testimonial.role}
|
||||
rating={testimonial.rating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user