186 lines
10 KiB
TypeScript
186 lines
10 KiB
TypeScript
import React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import NextHead from 'next/head';
|
|
import {
|
|
mdiShieldCheck,
|
|
mdiTools,
|
|
mdiFlash,
|
|
mdiInformationOutline,
|
|
mdiBriefcaseAccountOutline,
|
|
mdiAccountGroupOutline
|
|
} from '@mdi/js';
|
|
import BaseIcon from '../../components/BaseIcon';
|
|
import LayoutGuest from '../../layouts/Guest';
|
|
import { getPageTitle } from '../../config';
|
|
|
|
export default function AboutPage() {
|
|
const projectName = 'Fix-It-Local';
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 text-slate-900">
|
|
<NextHead>
|
|
<title>{getPageTitle('About Us')}</title>
|
|
<meta name="description" content={`Learn more about ${projectName} and how we help businesses and customers connect.`} />
|
|
</NextHead>
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-slate-900 text-white py-20 lg:py-32 relative overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div className="absolute top-0 -left-4 w-96 h-96 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
|
<div className="absolute bottom-0 -right-4 w-96 h-96 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
|
|
</div>
|
|
<div className="container mx-auto px-6 relative z-10 text-center">
|
|
<h1 className="text-4xl lg:text-6xl font-bold mb-6">Connecting Local Communities</h1>
|
|
<p className="text-xl text-slate-400 max-w-3xl mx-auto leading-relaxed">
|
|
{projectName} is a modern service directory built on trust, transparency, and AI-powered efficiency. We bridge the gap between quality service professionals and the customers who need them.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Our Mission */}
|
|
<section className="py-24 container mx-auto px-6 max-w-5xl">
|
|
<div className="grid md:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<div className="inline-flex items-center px-4 py-2 rounded-full bg-emerald-100 text-emerald-700 text-sm font-semibold mb-6">
|
|
<BaseIcon path={mdiInformationOutline} size={18} className="mr-2" />
|
|
Our Mission
|
|
</div>
|
|
<h2 className="text-3xl lg:text-4xl font-bold mb-6 text-slate-900 leading-tight">Empowering Quality Businesses & Serving Homeowners</h2>
|
|
<p className="text-lg text-slate-600 mb-6 leading-relaxed">
|
|
We started {projectName} because we saw how difficult it was for homeowners to find reliable, verified help, and how hard it was for skilled professionals to stand out in a sea of unverified listings.
|
|
</p>
|
|
<p className="text-lg text-slate-600 leading-relaxed">
|
|
Our platform uses advanced verification evidence and AI-driven matching to ensure that every connection made is based on quality, reliability, and fair pricing.
|
|
</p>
|
|
</div>
|
|
<div className="bg-white p-8 rounded-3xl shadow-xl border border-slate-100 relative">
|
|
<div className="absolute -top-6 -right-6 w-24 h-24 bg-emerald-500 rounded-2xl flex items-center justify-center shadow-lg transform rotate-12">
|
|
<BaseIcon path={mdiShieldCheck} size={48} className="text-white" />
|
|
</div>
|
|
<div className="space-y-6">
|
|
<div className="flex items-start">
|
|
<div className="bg-emerald-50 p-3 rounded-xl mr-4">
|
|
<BaseIcon path={mdiShieldCheck} size={24} className="text-emerald-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 mb-1">Trust First</h4>
|
|
<p className="text-slate-500 text-sm">Every business is verified with real evidence.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="bg-blue-50 p-3 rounded-xl mr-4">
|
|
<BaseIcon path={mdiFlash} size={24} className="text-blue-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 mb-1">AI Efficiency</h4>
|
|
<p className="text-slate-500 text-sm">Find the right pro in seconds, not hours.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="bg-purple-50 p-3 rounded-xl mr-4">
|
|
<BaseIcon path={mdiTools} size={24} className="text-purple-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-slate-900 mb-1">Quality Guaranteed</h4>
|
|
<p className="text-slate-500 text-sm">Focusing on high-rated local professionals.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How We Help */}
|
|
<section className="py-24 bg-slate-100">
|
|
<div className="container mx-auto px-6">
|
|
<h2 className="text-3xl lg:text-5xl font-bold text-center mb-16">How We Help</h2>
|
|
<div className="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
|
{/* For Businesses */}
|
|
<div className="bg-white p-12 rounded-[2rem] shadow-sm border border-slate-200">
|
|
<div className="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-blue-500/20">
|
|
<BaseIcon path={mdiBriefcaseAccountOutline} size={32} className="text-white" />
|
|
</div>
|
|
<h3 className="text-3xl font-bold mb-6 text-slate-900">For Businesses</h3>
|
|
<ul className="space-y-4 mb-8">
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
|
|
Build trust with verified badges
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
|
|
Receive high-quality, matched leads
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
|
|
Showcase reviews and past work
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-blue-500 mr-3 shrink-0" />
|
|
No lead-spam or irrelevant requests
|
|
</li>
|
|
</ul>
|
|
<p className="text-slate-500 italic border-t border-slate-100 pt-6">
|
|
"We help local professionals focus on what they do best, while we handle the discovery and matching."
|
|
</p>
|
|
</div>
|
|
|
|
{/* For Customers */}
|
|
<div className="bg-white p-12 rounded-[2rem] shadow-sm border border-slate-200">
|
|
<div className="w-16 h-16 bg-emerald-500 rounded-2xl flex items-center justify-center mb-8 shadow-lg shadow-emerald-500/20">
|
|
<BaseIcon path={mdiAccountGroupOutline} size={32} className="text-white" />
|
|
</div>
|
|
<h3 className="text-3xl font-bold mb-6 text-slate-900">For Customers</h3>
|
|
<ul className="space-y-4 mb-8">
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
|
|
Find verified, background-checked pros
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
|
|
Transparent pricing and job histories
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
|
|
Free and fast matching with AI
|
|
</li>
|
|
<li className="flex items-center text-slate-600">
|
|
<BaseIcon path={mdiShieldCheck} size={20} className="text-emerald-500 mr-3 shrink-0" />
|
|
Secure communication and history
|
|
</li>
|
|
</ul>
|
|
<p className="text-slate-500 italic border-t border-slate-100 pt-6">
|
|
"Find the perfect help for your home without the stress of unverified listings or endless phone calls."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* The Process */}
|
|
<section className="py-24 container mx-auto px-6 max-w-5xl">
|
|
<h2 className="text-3xl lg:text-5xl font-bold text-center mb-16">The Process</h2>
|
|
<div className="grid md:grid-cols-4 gap-8">
|
|
{[
|
|
{ title: 'Search', desc: 'Find categories or specific services.', icon: mdiTools },
|
|
{ title: 'Request', desc: 'Describe your job needs in detail.', icon: mdiInformationOutline },
|
|
{ title: 'Match', desc: 'AI finds the best pro for you.', icon: mdiFlash },
|
|
{ title: 'Resolve', desc: 'Job completed with transparency.', icon: mdiShieldCheck }
|
|
].map((step, i) => (
|
|
<div key={i} className="text-center group">
|
|
<div className="w-16 h-16 bg-slate-900 text-white rounded-2xl flex items-center justify-center mb-6 mx-auto group-hover:bg-emerald-500 transition-colors duration-300">
|
|
<BaseIcon path={step.icon} size={32} />
|
|
</div>
|
|
<h4 className="font-bold text-xl mb-2">{i+1}. {step.title}</h4>
|
|
<p className="text-slate-500 text-sm leading-relaxed">{step.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
AboutPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|