diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 53ef16b..4608a40 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,47 +1,107 @@ 'use client'; +import { useState, useEffect } from 'react'; import Image from 'next/image'; import Link from 'next/link'; import { CommonHeader } from '@/components/layout/CommonHeader'; import { Footer } from '@/components/layout/Footer'; +import { cmsService } from '@/services/cms.service'; +import type { + AboutHeroContent, + AboutStatsContent, + AboutFeaturesContent, + AboutTeamContent, + AboutCtaContent, + CmsContentRecord, +} from '@/types/cms'; -const teamMembers = [ - { - name: 'Andrew', - role: 'Founder & CEO', - image: '/assets/images/professional-1.jpg', - }, - { - name: 'Thomas', - role: 'Co-Founder', - image: '/assets/images/professional-2.jpg', - }, - { - name: 'Darren', - role: 'Advisor', - image: '/assets/images/professional-3.jpg', - }, -]; +// --------------------------------------------------------------------------- +// Hardcoded defaults (used when no CMS content is saved) +// --------------------------------------------------------------------------- -const features = [ - { - icon: '/assets/icons/verified-badge-orange.svg', - title: 'Verified Agents', - description: 'Every agent is vetted and verified for credentials, experience, and customer feedback.', - }, - { - icon: '/assets/icons/shield-verified-icon.svg', - title: 'Total Transparency', - description: 'Access honest reviews, transaction history, and verified credentials before connecting.', - }, - { - icon: '/assets/icons/home-icon.svg', - title: 'Simple Journey', - description: 'From search to settlement, we make finding and working with agents effortless.', - }, -]; +const defaultHero: AboutHeroContent = { + badge: 'Our Mission', + headline: 'Connecting You with Trusted Agents.', + description: + 'We believe finding the right home shouldn\u2019t be complicated. Our platform bridges the gap between buyers, sellers, and verified real estate agents for a smooth and transparent experience.', + ctaButtonText: 'Find Your Agent', + bannerImageUrl: '/assets/images/user_home_top.png', + bannerOverlayText: 'Building the future of property.', +}; + +const defaultStats: AboutStatsContent = { + stats: [ + { value: '15k+', label: 'Verified Agents' }, + { value: '98%', label: 'Customer Satisfaction' }, + ], +}; + +const defaultFeatures: AboutFeaturesContent = { + badge: 'Why Choose Us', + features: [ + { + iconPath: '/assets/icons/verified-badge-orange.svg', + title: 'Verified Agents', + description: + 'Every agent is vetted and verified for credentials, experience, and customer feedback.', + }, + { + iconPath: '/assets/icons/shield-verified-icon.svg', + title: 'Total Transparency', + description: + 'Access honest reviews, transaction history, and verified credentials before connecting.', + }, + { + iconPath: '/assets/icons/home-icon.svg', + title: 'Simple Journey', + description: + 'From search to settlement, we make finding and working with agents effortless.', + }, + ], +}; + +const defaultTeam: AboutTeamContent = { + title: 'Meet the minds behind the platform.', + subtitle: + 'Our team is passionate about making real estate connections easier and more transparent for everyone.', + members: [ + { name: 'Andrew', role: 'Founder & CEO', imageUrl: '/assets/images/professional-1.jpg' }, + { name: 'Thomas', role: 'Co-Founder', imageUrl: '/assets/images/professional-2.jpg' }, + { name: 'Darren', role: 'Advisor', imageUrl: '/assets/images/professional-3.jpg' }, + ], +}; + +const defaultCta: AboutCtaContent = { + title: 'Ready to find an agent?', + description: 'Discover trusted agents and start your property journey with confidence.', + buttonText: 'Start Your Search', +}; + +// --------------------------------------------------------------------------- +// Page component +// --------------------------------------------------------------------------- export default function AboutPage() { + const [hero, setHero] = useState(defaultHero); + const [stats, setStats] = useState(defaultStats); + const [features, setFeatures] = useState(defaultFeatures); + const [team, setTeam] = useState(defaultTeam); + const [cta, setCta] = useState(defaultCta); + + useEffect(() => { + cmsService.getPageContent('about').then((sections) => { + sections.forEach((s: CmsContentRecord) => { + switch (s.sectionKey) { + case 'hero': setHero(s.content as AboutHeroContent); break; + case 'stats': setStats(s.content as AboutStatsContent); break; + case 'features': setFeatures(s.content as AboutFeaturesContent); break; + case 'team': setTeam(s.content as AboutTeamContent); break; + case 'cta': setCta(s.content as AboutCtaContent); break; + } + }); + }); + }, []); + return (
{/* Header */} @@ -63,18 +123,18 @@ export default function AboutPage() { height={19} /> - Our Mission + {hero.badge}
{/* Headline */}

- Connecting You with Trusted Agents. + {hero.headline}

{/* Description */}

- We believe finding the right home shouldn't be complicated. Our platform bridges the gap between buyers, sellers, and verified real estate agents for a smooth and transparent experience. + {hero.description}

{/* CTA Button */} @@ -82,7 +142,7 @@ export default function AboutPage() { href="/agents" className="inline-flex items-center justify-center w-[160px] h-[46px] border border-[#00293d] rounded-full font-fractul font-medium text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors" > - Find Your Agent + {hero.ctaButtonText} @@ -90,118 +150,112 @@ export default function AboutPage() { {/* Hero Image with Overlay Text */}
- City buildings {/* Overlay Text */}

- Building the future of property. + {hero.bannerOverlayText}

{/* Stats Section */} -
-
-
-

- 15k+ -

-

- Verified Agents -

+ {stats.stats.length > 0 && ( +
+
+ {stats.stats.map((stat, index) => ( +
+

+ {stat.value} +

+

+ {stat.label} +

+
+ ))}
-
-

- 98% -

-

- Customer Satisfaction -

-
-
-
+ + )} {/* Why Choose Us Section */} -
- {/* Section Header */} -
- - Why Choose Us - -
+ {features.features.length > 0 && ( +
+ {/* Section Header */} +
+ + {features.badge} + +
- {/* Feature Cards */} -
- {features.map((feature, index) => ( -
-
- + {/* Feature Cards */} +
+ {features.features.map((feature, index) => ( +
+
+ +
+

+ {feature.title} +

+

+ {feature.description} +

-

- {feature.title} -

-

- {feature.description} -

-
- ))} -
-
+ ))} + +
+ )} {/* Team Section */} -
- {/* Section Header */} -
-

- Meet the minds behind the platform. -

-

- Our team is passionate about making real estate connections easier and more transparent for everyone. -

-
+ {team.members.length > 0 && ( +
+ {/* Section Header */} +
+

+ {team.title} +

+

+ {team.subtitle} +

+
- {/* Team Cards */} -
- {teamMembers.map((member, index) => ( -
-
- {member.name} + {/* Team Cards */} +
+ {team.members.map((member, index) => ( +
+
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {member.name} +
+

+ {member.name} +

+

+ {member.role} +

-

- {member.name} -

-

- {member.role} -

-
- ))} -
-
+ ))} + +
+ )} {/* CTA Section */}
@@ -209,16 +263,16 @@ export default function AboutPage() {

- Ready to find an agent? + {cta.title}

- Discover trusted agents and start your property journey with confidence. + {cta.description}

- Start Your Search + {cta.buttonText} diff --git a/src/types/cms.ts b/src/types/cms.ts index 7ad0941..e5ee27e 100644 --- a/src/types/cms.ts +++ b/src/types/cms.ts @@ -56,6 +56,53 @@ export interface TestimonialsContent { testimonials: TestimonialItem[]; } +export interface AboutHeroContent { + badge: string; + headline: string; + description: string; + ctaButtonText: string; + bannerImageUrl: string; + bannerOverlayText: string; +} + +export interface AboutStatItem { + value: string; + label: string; +} + +export interface AboutStatsContent { + stats: AboutStatItem[]; +} + +export interface AboutFeatureItem { + iconPath: string; + title: string; + description: string; +} + +export interface AboutFeaturesContent { + badge: string; + features: AboutFeatureItem[]; +} + +export interface AboutTeamMember { + name: string; + role: string; + imageUrl: string; +} + +export interface AboutTeamContent { + title: string; + subtitle: string; + members: AboutTeamMember[]; +} + +export interface AboutCtaContent { + title: string; + description: string; + buttonText: string; +} + export interface CmsContentRecord { id: string; pageSlug: string;