feat: Introduce shared settings components, implement user settings pages, and refactor agent settings pages to utilize them.
This commit is contained in:
pradeepkumar
245
src/app/about/page.tsx
Normal file
245
src/app/about/page.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
'use client';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { CommonHeader } from '@/components/layout/CommonHeader';
|
||||
import { Footer } from '@/components/layout/Footer';
|
||||
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
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.',
|
||||
},
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
|
||||
<CommonHeader />
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 w-full">
|
||||
{/* Hero Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8">
|
||||
<div className="text-center">
|
||||
{/* Mission Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 border border-[#00293d]/20 rounded-full mb-6">
|
||||
<Image
|
||||
src="/assets/icons/verified-badge-orange.svg"
|
||||
alt=""
|
||||
width={19}
|
||||
height={19}
|
||||
/>
|
||||
<span className="font-fractul font-medium text-[14px] text-[#00293d]">
|
||||
Our Mission
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="font-fractul font-bold text-[32px] lg:text-[40px] text-[#00293d] leading-tight mb-6">
|
||||
Connecting You with Trusted Agents.
|
||||
</h1>
|
||||
|
||||
{/* Description */}
|
||||
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed mb-8 max-w-[550px] mx-auto">
|
||||
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.
|
||||
</p>
|
||||
|
||||
{/* CTA Button */}
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
<Image
|
||||
src="/assets/images/user_home_top.png"
|
||||
alt="City buildings"
|
||||
width={1200}
|
||||
height={500}
|
||||
className="w-full h-auto object-cover"
|
||||
priority
|
||||
/>
|
||||
{/* 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]">
|
||||
Building the future of property.
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<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">
|
||||
<div className="text-center">
|
||||
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
|
||||
15k+
|
||||
</p>
|
||||
<p className="font-serif text-[14px] text-[#00293d]">
|
||||
Verified Agents
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-fractul font-bold text-[28px] lg:text-[32px] text-[#e58625]">
|
||||
98%
|
||||
</p>
|
||||
<p className="font-serif text-[14px] text-[#00293d]">
|
||||
Customer Satisfaction
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Why Choose Us Section */}
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
|
||||
{/* Section Header */}
|
||||
<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">
|
||||
Why Choose Us
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Image
|
||||
src={feature.icon}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
</div>
|
||||
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Section */}
|
||||
<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">
|
||||
Meet the minds behind the platform.
|
||||
</h2>
|
||||
<p className="font-serif text-[14px] text-[#00293d] max-w-[500px] mx-auto">
|
||||
Our team is passionate about making real estate connections easier and more transparent for everyone.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Team Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
{teamMembers.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">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
width={180}
|
||||
height={180}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-1">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="font-serif text-[14px] text-[#e58625]">
|
||||
{member.role}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
Ready to find an agent?
|
||||
</h2>
|
||||
<p className="font-serif text-[13px] text-[#00293d] mb-5">
|
||||
Discover trusted agents and start your property journey with confidence.
|
||||
</p>
|
||||
<Link
|
||||
href="/agents"
|
||||
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"
|
||||
>
|
||||
Start Your Search
|
||||
<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>
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user