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
3
public/assets/icons/cities-icon.svg
Normal file
3
public/assets/icons/cities-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.30556 9.09722L6.31944 9.08194M11.8611 9.09722L11.875 9.08194M6.30556 14.6528L6.31944 14.6375M11.8611 14.6528L11.875 14.6375M6.30556 20.2083L6.31944 20.1931M11.8611 20.2083L11.875 20.1931M17.4167 25.75H1.58333C1.36232 25.75 1.15036 25.6622 0.994078 25.5059C0.837797 25.3496 0.75 25.1377 0.75 24.9167V4.36111C0.75 4.1401 0.837797 3.92814 0.994078 3.77186C1.15036 3.61558 1.36232 3.52778 1.58333 3.52778H9.08333V1.58333C9.08333 1.36232 9.17113 1.15036 9.32741 0.994078C9.48369 0.837797 9.69565 0.75 9.91667 0.75H16.5833C16.8043 0.75 17.0163 0.837797 17.1726 0.994078C17.3289 1.15036 17.4167 1.36232 17.4167 1.58333V9.08333M17.4167 25.75H24.9167C25.1377 25.75 25.3496 25.6622 25.5059 25.5059C25.6622 25.3496 25.75 25.1377 25.75 24.9167V9.91667C25.75 9.69565 25.6622 9.48369 25.5059 9.32741C25.3496 9.17113 25.1377 9.08333 24.9167 9.08333H17.4167M17.4167 25.75V20.1944M17.4167 9.08333V14.6389M17.4167 20.1944V14.6389M17.4167 20.1944H20.1944M17.4167 14.6389H20.1944" stroke="#E58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
7
public/assets/icons/properties-icon.svg
Normal file
7
public/assets/icons/properties-icon.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg width="25" height="41" viewBox="0 0 25 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.46 6.47607L23.1484 23.4048H1.85156L0.540039 6.47607H24.46Z" stroke="#E58625"/>
|
||||
<mask id="path-2-inside-1_2_3683" fill="white">
|
||||
<path d="M6.94531 8.63233V0H18.0563V8.63233"/>
|
||||
</mask>
|
||||
<path d="M6.94531 0V-1H5.94531V0H6.94531ZM18.0563 0H19.0563V-1H18.0563V0ZM6.94531 8.63233H7.94531V0H6.94531H5.94531V8.63233H6.94531ZM6.94531 0V1H18.0563V0V-1H6.94531V0ZM18.0563 0H17.0563V8.63233H18.0563H19.0563V0H18.0563Z" fill="#E58625" mask="url(#path-2-inside-1_2_3683)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 574 B |
3
public/assets/icons/quote-marks.svg
Normal file
3
public/assets/icons/quote-marks.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="23" height="16" viewBox="0 0 23 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 16V9.6C0 7.73333 0.266667 6.06667 0.8 4.6C1.36667 3.1 2.13333 1.83333 3.1 0.8L5.5 2.4C4.7 3.33333 4.1 4.36667 3.7 5.5C3.33333 6.6 3.15 7.76667 3.15 9H6.5V16H0ZM12 16V9.6C12 7.73333 12.2667 6.06667 12.8 4.6C13.3667 3.1 14.1333 1.83333 15.1 0.8L17.5 2.4C16.7 3.33333 16.1 4.36667 15.7 5.5C15.3333 6.6 15.15 7.76667 15.15 9H18.5V16H12Z" fill="#00293d"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 466 B |
@@ -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