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

refactor: Redesign the About page by updating content, descriptions, and various styling elements across all sections.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-08 01:09:47 +05:30
parent 8bfd60efa1
commit 98fbac65bb
1 changed files with 78 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/app/about/page.tsx
View File

@@ -44,27 +44,27 @@ const defaultFeatures: AboutFeaturesContent = {
iconPath: '/assets/icons/verified-badge-orange.svg', iconPath: '/assets/icons/verified-badge-orange.svg',
title: 'Verified Agents', title: 'Verified Agents',
description: description:
'Every agent is vetted and verified for credentials, experience, and customer feedback.', 'All agents on our platform are carefully verified to ensure trust, proven expertise, and consistent service, helping users connect with reliable professionals and enjoy a smooth, confident, and transparent property journey',
}, },
{ {
iconPath: '/assets/icons/shield-verified-icon.svg', iconPath: '/assets/icons/shield-verified-icon.svg',
title: 'Total Transparency', title: 'Total Transparency',
description: description:
'Access honest reviews, transaction history, and verified credentials before connecting.', 'We maintain complete transparency by clearly displaying agent details, reviews, and activity, allowing users to make informed decisions with confidence, clarity, and trust throughout their entire property journey.',
}, },
{ {
iconPath: '/assets/icons/home-icon.svg', iconPath: '/assets/icons/home-icon.svg',
title: 'Simple Journey', title: 'Simple Journey',
description: description:
'From search to settlement, we make finding and working with agents effortless.', 'Our platform simplifies every step of the property process, from discovering the right agent to closing with confidence, making the experience smooth, fast, and stress-free for users at every stage.',
}, },
], ],
}; };
const defaultTeam: AboutTeamContent = { const defaultTeam: AboutTeamContent = {
title: 'Meet the minds behind the platform.', title: 'Meet the minds behind the platform',
subtitle: subtitle:
'Our team is passionate about making real estate connections easier and more transparent for everyone.', 'We are a team of passionate innovators, real estate experts, and designers working together to redefine how people connect with trusted agents.',
members: [ members: [
{ name: 'Andrew', role: 'Founder & CEO', imageUrl: '/assets/images/professional-1.jpg' }, { name: 'Andrew', role: 'Founder & CEO', imageUrl: '/assets/images/professional-1.jpg' },
{ name: 'Thomas', role: 'Co-Founder', imageUrl: '/assets/images/professional-2.jpg' }, { name: 'Thomas', role: 'Co-Founder', imageUrl: '/assets/images/professional-2.jpg' },
@@ -73,9 +73,9 @@ const defaultTeam: AboutTeamContent = {
}; };
const defaultCta: AboutCtaContent = { const defaultCta: AboutCtaContent = {
title: 'Ready to find an agent?', title: 'Ready to find a agent',
description: 'Discover trusted agents and start your property journey with confidence.', description: 'Search and connect with verified real estate agents who match your needs, location, and goals.',
buttonText: 'Start Your Search', buttonText: 'Find Agents Now',
}; };
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@@ -159,19 +159,19 @@ export default function AboutPage() {
</div> </div>
{/* Headline */} {/* Headline */}
<h1 className="font-fractul font-bold text-[32px] lg:text-[40px] text-[#00293d] leading-tight mb-6"> <h1 className="font-fractul font-bold text-[30px] text-[#00293d] leading-tight mb-6">
{hero.headline} {hero.headline}
</h1> </h1>
{/* Description */} {/* Description */}
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed mb-8 max-w-[550px] mx-auto"> <p className="font-serif text-[14px] text-[#00293d] leading-relaxed mb-8 max-w-[600px] mx-auto">
{hero.description} {hero.description}
</p> </p>
{/* CTA Button */} {/* CTA Button */}
<Link <Link
href={isAgent ? '/agent/dashboard' : '/user/profiles'} href={isAgent ? '/agent/dashboard' : '/user/profiles'}
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" className="inline-flex items-center justify-center px-6 h-[46px] border border-[#00293d] rounded-[15px] font-fractul font-bold text-[16px] text-[#00293d] hover:bg-gray-50 transition-colors"
> >
{isAgent ? 'Go to Dashboard' : hero.ctaButtonText} {isAgent ? 'Go to Dashboard' : hero.ctaButtonText}
</Link> </Link>
@@ -180,16 +180,16 @@ export default function AboutPage() {
{/* Hero Image with Overlay Text */} {/* Hero Image with Overlay Text */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8"> <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
<div className="relative rounded-[20px] overflow-hidden"> <div className="relative rounded-[15px] overflow-hidden h-[411px]">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={hero.bannerImageUrl || defaultHero.bannerImageUrl} src={hero.bannerImageUrl || defaultHero.bannerImageUrl}
alt="City buildings" alt="City buildings"
className="w-full h-auto object-cover" className="w-full h-full object-cover"
/> />
{/* Overlay Text */} {/* Overlay Text */}
<div className="absolute bottom-6 left-6 lg:bottom-10 lg:left-10"> <div className="absolute bottom-6 left-6 lg:bottom-10 lg:left-10">
<h2 className="font-fractul font-bold text-[20px] lg:text-[24px] text-[#00293d]"> <h2 className="font-fractul font-medium text-[20px] text-[#00293d]">
{hero.bannerOverlayText} {hero.bannerOverlayText}
</h2> </h2>
</div> </div>
@@ -199,10 +199,11 @@ export default function AboutPage() {
{/* Stats Section */} {/* Stats Section */}
{stats.stats.length > 0 && ( {stats.stats.length > 0 && (
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="border-t border-b border-[#00293d]/10 py-6">
<div className="flex items-center justify-center gap-16 lg:gap-32"> <div className="flex items-center justify-center gap-16 lg:gap-32">
{stats.stats.map((stat, index) => ( {stats.stats.map((stat, index) => (
<div key={index} className="text-center"> <div key={index} className="text-center">
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]"> <p className="font-fractul font-medium text-[14px] text-[#e58625]">
{stat.value} {stat.value}
</p> </p>
<p className="font-serif text-[14px] text-[#00293d]"> <p className="font-serif text-[14px] text-[#00293d]">
@@ -211,6 +212,7 @@ export default function AboutPage() {
</div> </div>
))} ))}
</div> </div>
</div>
</section> </section>
)} )}
@@ -218,13 +220,16 @@ export default function AboutPage() {
{(features.badge || features.features.length > 0) && ( {(features.badge || features.features.length > 0) && (
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20"> <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
{/* Section Header */} {/* Section Header */}
{features.badge && (
<div className="text-center mb-12"> <div className="text-center mb-12">
<span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full"> {features.badge && (
<h2 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
{features.badge} {features.badge}
</span> </h2>
</div>
)} )}
<p className="font-serif text-[14px] text-[#00293d] max-w-[518px] mx-auto">
Our core principles guide every interaction, ensuring you feel confident and supported at every step.
</p>
</div>
{/* Feature Cards */} {/* Feature Cards */}
{features.features.length > 0 && ( {features.features.length > 0 && (
@@ -232,19 +237,19 @@ export default function AboutPage() {
{features.features.map((feature, index) => ( {features.features.map((feature, index) => (
<div <div
key={index} key={index}
className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow" className="border border-[#00293d]/10 rounded-[15px] p-6 text-center"
> >
{feature.iconPath && ( {feature.iconPath && (
<div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="flex justify-center mb-4">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={feature.iconPath} src={feature.iconPath}
alt="" alt=""
className="w-7 h-7 object-contain" className="w-[35px] h-[35px] object-contain"
/> />
</div> </div>
)} )}
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3"> <h3 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">
{feature.title} {feature.title}
</h3> </h3>
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed"> <p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
@@ -262,10 +267,10 @@ export default function AboutPage() {
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 lg:pb-20"> <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 lg:pb-20">
{/* Section Header */} {/* Section Header */}
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3"> <h2 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
{team.title} {team.title}
</h2> </h2>
<p className="font-serif text-[14px] text-[#00293d] max-w-[500px] mx-auto"> <p className="font-serif text-[14px] text-[#00293d] max-w-[471px] mx-auto">
{team.subtitle} {team.subtitle}
</p> </p>
</div> </div>
@@ -273,8 +278,8 @@ export default function AboutPage() {
{/* Team Cards */} {/* Team Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{team.members.map((member, index) => ( {team.members.map((member, index) => (
<div key={index} className="text-center"> <div key={index} className="border border-[#00293d]/10 rounded-[15px] p-4 text-center">
<div className="w-[180px] h-[180px] rounded-full overflow-hidden mx-auto mb-4 border-4 border-[#e58625]/20 bg-gray-100"> <div className="w-full h-[211px] rounded-[15px] overflow-hidden mb-4 border border-[#00293d]/10 bg-gray-100">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
src={member.imageUrl || '/assets/images/professional-1.jpg'} src={member.imageUrl || '/assets/images/professional-1.jpg'}
@@ -282,10 +287,10 @@ export default function AboutPage() {
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-1"> <h3 className="font-fractul font-bold text-[14px] text-black">
{member.name} {member.name}
</h3> </h3>
<p className="font-serif text-[14px] text-[#e58625]"> <p className="font-fractul font-light text-[14px] text-black">
{member.role} {member.role}
</p> </p>
</div> </div>
@@ -294,38 +299,46 @@ export default function AboutPage() {
</section> </section>
)} )}
{/* Divider */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="border-t border-[#00293d]/10" />
</div>
{/* CTA Section */} {/* CTA Section */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16"> <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="max-w-4xl mx-auto border border-[#00293d]/20 rounded-[15px] p-8 lg:p-10"> <div className="flex flex-col lg:flex-row items-center justify-between gap-8">
<div className="flex flex-col lg:flex-row items-center justify-between gap-6"> <div className="lg:max-w-[400px]">
<div className="lg:max-w-[400px] text-center lg:text-left"> <h2 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3"> {isAgent ? 'Manage your profile' : 'Ready to find a agent'}
{isAgent ? 'Manage your profile' : cta.title}
</h2> </h2>
<p className="font-serif text-[13px] text-[#00293d] mb-5"> <p className="font-serif font-bold text-[14px] text-[#00293d] mb-6">
{isAgent ? 'Keep your profile updated and connect with potential clients.' : cta.description} {isAgent ? 'Keep your profile updated and connect with potential clients.' : 'Search and connect with verified real estate agents who match your needs, location, and goals.'}
</p> </p>
<div className="flex items-center gap-4">
<Link <Link
href={isAgent ? '/agent/dashboard' : '/user/profiles'} href={isAgent ? '/agent/dashboard' : '/user/profiles'}
className="inline-flex items-center gap-2 bg-[#e58625] text-white px-5 py-2.5 rounded-full font-fractul font-medium text-[13px] hover:bg-[#d47720] transition-colors" className="inline-flex items-center justify-center px-6 h-[46px] bg-[#e58625] rounded-[15px] font-fractul font-bold text-[16px] text-[#00293d] hover:bg-[#d47720] transition-colors"
> >
{isAgent ? 'Go to Dashboard' : cta.buttonText} {isAgent ? 'Go to Dashboard' : 'Find Agents Now'}
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> </Link>
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/> <Link
</svg> href="/contact"
className="inline-flex items-center justify-center px-6 h-[46px] border border-[#00293d] rounded-[15px] font-fractul font-bold text-[16px] text-[#00293d] hover:bg-gray-50 transition-colors"
>
Get Help
</Link> </Link>
</div> </div>
<div className="w-[140px] lg:w-[160px]"> </div>
<div className="w-[200px] lg:w-[280px]">
<Image <Image
src="/assets/images/agent-illustration.png" src="/assets/images/agent-illustration.png"
alt="Find an agent" alt="Find an agent"
width={160} width={280}
height={160} height={241}
className="w-full h-auto" className="w-full h-auto"
/> />
</div> </div>
</div> </div>
</div>
</section> </section>
</main> </main>