feat: Integrate CMS to dynamically populate home page sections with dedicated content types and a new service.
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import type { TestimonialsContent } from '@/types/cms';
|
||||
|
||||
const testimonials = [
|
||||
const defaultTestimonials = [
|
||||
{
|
||||
id: '1',
|
||||
rating: 5,
|
||||
@@ -86,69 +87,72 @@ function TestimonialCard({ title, content, author, role, rating }: TestimonialCa
|
||||
);
|
||||
}
|
||||
|
||||
export function TestimonialsSection() {
|
||||
const defaultContent: TestimonialsContent = {
|
||||
title: "Our Clients' Trust Is Our Foundation",
|
||||
subtitle: 'We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.',
|
||||
ratingInfo: 'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
|
||||
stats: [
|
||||
{
|
||||
iconPath: '/assets/icons/cities-icon.svg',
|
||||
boldText: '25+ Cities &',
|
||||
normalText: 'neighborhoods served',
|
||||
},
|
||||
{
|
||||
iconPath: '/assets/icons/properties-icon.svg',
|
||||
boldText: '1,000+ Properties',
|
||||
normalText: 'bought and sold for our clients.',
|
||||
},
|
||||
],
|
||||
testimonials: defaultTestimonials,
|
||||
};
|
||||
|
||||
export function TestimonialsSection({ content }: { content?: TestimonialsContent }) {
|
||||
const data = content ?? defaultContent;
|
||||
|
||||
return (
|
||||
<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-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
|
||||
{data.title}
|
||||
</h2>
|
||||
<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.
|
||||
{data.subtitle}
|
||||
</p>
|
||||
<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.
|
||||
{data.ratingInfo}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{data.stats.map((stat, index) => (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
<Image
|
||||
src={stat.iconPath}
|
||||
alt=""
|
||||
width={27}
|
||||
height={27}
|
||||
/>
|
||||
<div>
|
||||
<span className="font-serif font-bold text-[14px] leading-normal text-[#00293d]">
|
||||
{stat.boldText}
|
||||
</span>
|
||||
<br />
|
||||
<span className="font-serif font-normal text-[14px] leading-normal text-[#00293d]">
|
||||
{stat.normalText}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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-6">
|
||||
{testimonials.map((testimonial) => (
|
||||
{data.testimonials.map((testimonial, index) => (
|
||||
<TestimonialCard
|
||||
key={testimonial.id}
|
||||
key={index}
|
||||
title={testimonial.title}
|
||||
content={testimonial.content}
|
||||
author={testimonial.author}
|
||||
|
||||
Reference in New Issue
Block a user