feat: Integrate CMS to dynamically populate home page sections with dedicated content types and a new service.

This commit is contained in:
pradeepkumar
2026-02-22 21:52:54 +05:30
parent c5dc139633
commit b235378815
9 changed files with 227 additions and 86 deletions

View File

@@ -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&apos; 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}