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

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

@@ -44,27 +44,27 @@ const defaultFeatures: AboutFeaturesContent = {
iconPath: '/assets/icons/verified-badge-orange.svg',
title: 'Verified Agents',
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',
title: 'Total Transparency',
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',
title: 'Simple Journey',
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 = {
title: 'Meet the minds behind the platform.',
title: 'Meet the minds behind the platform',
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: [
{ name: 'Andrew', role: 'Founder & CEO', imageUrl: '/assets/images/professional-1.jpg' },
{ name: 'Thomas', role: 'Co-Founder', imageUrl: '/assets/images/professional-2.jpg' },
@@ -73,9 +73,9 @@ const defaultTeam: AboutTeamContent = {
};
const defaultCta: AboutCtaContent = {
title: 'Ready to find an agent?',
description: 'Discover trusted agents and start your property journey with confidence.',
buttonText: 'Start Your Search',
title: 'Ready to find a agent',
description: 'Search and connect with verified real estate agents who match your needs, location, and goals.',
buttonText: 'Find Agents Now',
};
// ---------------------------------------------------------------------------
@@ -159,19 +159,19 @@ export default function AboutPage() {
</div>
{/* 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}
</h1>
{/* 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}
</p>
{/* CTA Button */}
<Link
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}
</Link>
@@ -180,16 +180,16 @@ export default function AboutPage() {
{/* Hero Image with Overlay Text */}
<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 */}
<img
src={hero.bannerImageUrl || defaultHero.bannerImageUrl}
alt="City buildings"
className="w-full h-auto object-cover"
className="w-full h-full object-cover"
/>
{/* Overlay Text */}
<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}
</h2>
</div>
@@ -199,17 +199,19 @@ export default function AboutPage() {
{/* Stats Section */}
{stats.stats.length > 0 && (
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center justify-center gap-16 lg:gap-32">
{stats.stats.map((stat, index) => (
<div key={index} className="text-center">
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
{stat.value}
</p>
<p className="font-serif text-[14px] text-[#00293d]">
{stat.label}
</p>
</div>
))}
<div className="border-t border-b border-[#00293d]/10 py-6">
<div className="flex items-center justify-center gap-16 lg:gap-32">
{stats.stats.map((stat, index) => (
<div key={index} className="text-center">
<p className="font-fractul font-medium text-[14px] text-[#e58625]">
{stat.value}
</p>
<p className="font-serif text-[14px] text-[#00293d]">
{stat.label}
</p>
</div>
))}
</div>
</div>
</section>
)}
@@ -218,13 +220,16 @@ export default function AboutPage() {
{(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 Header */}
{features.badge && (
<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">
<div className="text-center mb-12">
{features.badge && (
<h2 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
{features.badge}
</span>
</div>
)}
</h2>
)}
<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 */}
{features.features.length > 0 && (
@@ -232,19 +237,19 @@ export default function AboutPage() {
{features.features.map((feature, index) => (
<div
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 && (
<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 */}
<img
src={feature.iconPath}
alt=""
className="w-7 h-7 object-contain"
className="w-[35px] h-[35px] object-contain"
/>
</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}
</h3>
<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 Header */}
<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}
</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}
</p>
</div>
@@ -273,8 +278,8 @@ export default function AboutPage() {
{/* Team Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{team.members.map((member, index) => (
<div key={index} className="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 key={index} className="border border-[#00293d]/10 rounded-[15px] p-4 text-center">
<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 */}
<img
src={member.imageUrl || '/assets/images/professional-1.jpg'}
@@ -282,10 +287,10 @@ export default function AboutPage() {
className="w-full h-full object-cover"
/>
</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}
</h3>
<p className="font-serif text-[14px] text-[#e58625]">
<p className="font-fractul font-light text-[14px] text-black">
{member.role}
</p>
</div>
@@ -294,36 +299,44 @@ export default function AboutPage() {
</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 */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-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-6">
<div className="lg:max-w-[400px] text-center lg:text-left">
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
{isAgent ? 'Manage your profile' : cta.title}
</h2>
<p className="font-serif text-[13px] text-[#00293d] mb-5">
{isAgent ? 'Keep your profile updated and connect with potential clients.' : cta.description}
</p>
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="flex flex-col lg:flex-row items-center justify-between gap-8">
<div className="lg:max-w-[400px]">
<h2 className="font-fractul font-bold text-[30px] text-[#00293d] mb-3">
{isAgent ? 'Manage your profile' : 'Ready to find a agent'}
</h2>
<p className="font-serif font-bold text-[14px] text-[#00293d] mb-6">
{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>
<div className="flex items-center gap-4">
<Link
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}
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
{isAgent ? 'Go to Dashboard' : 'Find Agents Now'}
</Link>
<Link
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>
</div>
<div className="w-[140px] lg:w-[160px]">
<Image
src="/assets/images/agent-illustration.png"
alt="Find an agent"
width={160}
height={160}
className="w-full h-auto"
/>
</div>
</div>
<div className="w-[200px] lg:w-[280px]">
<Image
src="/assets/images/agent-illustration.png"
alt="Find an agent"
width={280}
height={241}
className="w-full h-auto"
/>
</div>
</div>
</section>