Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/home/FeaturesSection.tsx
View File

@@ -1,29 +1,34 @@
'use client';
import Image from 'next/image';
import type { FeaturesContent } from '@/types/cms';
const features = [
{
icon: '/assets/icons/hourglass-icon.svg',
title: 'Hire Quickly',
description: 'Connect with experienced local real estate agents who match your needs and preferences. Our simple process helps you get started quickly and move forward without delays or unnecessary complexity.',
},
{
icon: '/assets/icons/verified-badge-icon.svg',
title: 'Verified Agents',
description: 'All agents are carefully identity-verified and background-checked to ensure trust and safety. You can confidently work with professionals who meet quality and reliability standards.',
},
{
icon: '/assets/icons/star-orange-icon.svg',
title: 'Top Rated',
description: 'Work with highly rated agents known for strong expertise and positive client feedback. Their consistent performance helps you make informed and confident property decisions.',
},
{
icon: '/assets/icons/trusted-people-icon.svg',
title: 'Trusted by Thousands',
description: 'Thousands of buyers, sellers, and renters trust our platform to find reliable agents. Our professionals help people navigate property journeys with confidence and ease.',
},
];
const defaultContent: FeaturesContent = {
title: 'Find Trusted Real Estate Professionals On Demand',
subtitle: 'Quickly connect with the right agents exactly when you need them.',
features: [
{
iconPath: '/assets/icons/hourglass-icon.svg',
title: 'Hire Quickly',
description: 'Connect with experienced local real estate agents who match your needs and preferences. Our simple process helps you get started quickly and move forward without delays or unnecessary complexity.',
},
{
iconPath: '/assets/icons/verified-badge-icon.svg',
title: 'Verified Agents',
description: 'All agents are carefully identity-verified and background-checked to ensure trust and safety. You can confidently work with professionals who meet quality and reliability standards.',
},
{
iconPath: '/assets/icons/star-orange-icon.svg',
title: 'Top Rated',
description: 'Work with highly rated agents known for strong expertise and positive client feedback. Their consistent performance helps you make informed and confident property decisions.',
},
{
iconPath: '/assets/icons/trusted-people-icon.svg',
title: 'Trusted by Thousands',
description: 'Thousands of buyers, sellers, and renters trust our platform to find reliable agents. Our professionals help people navigate property journeys with confidence and ease.',
},
],
};
const agents = [
{
@@ -130,7 +135,9 @@ function AgentCard({ agent, className = '' }: { agent: typeof agents[0]; classNa
);
}
export function FeaturesSection() {
export function FeaturesSection({ content }: { content?: FeaturesContent }) {
const data = content ?? defaultContent;
return (
<section className="py-16 md:py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -140,23 +147,23 @@ export function FeaturesSection() {
{/* Section Header */}
<div className="mb-8">
<h2 className="font-fractul font-bold text-[32px] md:text-[40px] leading-[1.2] text-[#00293d] mb-4">
Find Trusted Real Estate Professionals On Demand
{data.title}
</h2>
<p className="font-fractul font-medium text-[18px] md:text-[20px] leading-[1.4] text-[#00293d]">
Quickly connect with the right agents exactly when you need them.
{data.subtitle}
</p>
</div>
{/* Features Grid - 2x2 */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{features.map((feature, index) => (
{data.features.map((feature, index) => (
<div
key={index}
className="border border-[#00293d]/10 rounded-[15px] p-5"
>
<div className="mb-3">
<Image
src={feature.icon}
src={feature.iconPath}
alt={feature.title}
width={35}
height={35}