mirror of
http://88.130.71.182:3000/BlitTech/Projet1-RealEstate.git
synced 2026-06-12 23:33:21 +00:00
Initial commit
This commit is contained in:
Dosseh91
215
src/pages/Home.tsx
Normal file
215
src/pages/Home.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Search, ArrowRight, Tag, MapPin, Building2, Star } from 'lucide-react';
|
||||
import Button from '../components/common/Button';
|
||||
import Card from '../components/common/Card';
|
||||
import ListingCard from '../components/listings/ListingCard';
|
||||
import { categories, listings } from '../data/mockData';
|
||||
|
||||
const Home: React.FC = () => {
|
||||
// Only show approved listings
|
||||
const approvedListings = listings.filter(listing => listing.status === 'approved');
|
||||
const featuredListings = approvedListings.slice(0, 4);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero section */}
|
||||
<section className="relative bg-gradient-to-r from-primary-900 to-primary-800 text-white overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-20 bg-[url('https://images.pexels.com/photos/106399/pexels-photo-106399.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')] bg-cover bg-center"></div>
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
|
||||
<div className="max-w-3xl">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
|
||||
Discover Professional Listings from Verified Agencies
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 text-primary-100">
|
||||
Browse quality listings across multiple categories, all verified by our admin team.
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-lg p-4 mb-8">
|
||||
<div className="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-3">
|
||||
<div className="relative flex-grow">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="What are you looking for?"
|
||||
className="w-full pl-10 pr-4 py-3 rounded-md border-0 focus:ring-2 focus:ring-accent-500"
|
||||
/>
|
||||
<Search className="absolute left-3 top-3 text-gray-400 h-5 w-5" />
|
||||
</div>
|
||||
<div className="w-full md:w-48">
|
||||
<select className="w-full px-4 py-3 rounded-md border-0 focus:ring-2 focus:ring-accent-500">
|
||||
<option value="">All Categories</option>
|
||||
{categories.map(category => (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<Button variant="secondary" size="lg">
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Link to="/listings">
|
||||
<Button size="lg">
|
||||
Browse All Listings
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/categories">
|
||||
<Button variant="outline" size="lg" className="!text-white border-white hover:bg-white/10">
|
||||
Explore Categories
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured categories */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary-800 mb-4">Browse by Category</h2>
|
||||
<p className="text-lg text-primary-600 max-w-2xl mx-auto">
|
||||
Explore our wide range of categories to find exactly what you're looking for
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{categories.slice(0, 6).map(category => (
|
||||
<Link to={`/categories/${category.slug}`} key={category.id}>
|
||||
<Card hoverable className="h-full group">
|
||||
<div className="p-6 flex items-center">
|
||||
<div className="w-14 h-14 rounded-full bg-primary-100 flex items-center justify-center mr-4 group-hover:bg-accent-100 transition-colors">
|
||||
<Tag className="h-6 w-6 text-primary-600 group-hover:text-accent-600 transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-primary-800 mb-1 group-hover:text-accent-700 transition-colors">
|
||||
{category.name}
|
||||
</h3>
|
||||
<p className="text-sm text-primary-600">
|
||||
{category.description}
|
||||
</p>
|
||||
</div>
|
||||
<ArrowRight className="ml-auto h-5 w-5 text-primary-400 group-hover:text-accent-500 transform group-hover:translate-x-1 transition-all" />
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-10">
|
||||
<Link to="/categories">
|
||||
<Button variant="outline">
|
||||
View All Categories
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured listings */}
|
||||
<section className="py-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center mb-10">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-primary-800 mb-2">Featured Listings</h2>
|
||||
<p className="text-lg text-primary-600">
|
||||
Hand-picked quality listings from our verified agencies
|
||||
</p>
|
||||
</div>
|
||||
<Link to="/listings">
|
||||
<Button variant="outline" className="hidden sm:flex">
|
||||
View All Listings
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{featuredListings.map(listing => (
|
||||
<ListingCard key={listing.id} listing={listing} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-10 sm:hidden">
|
||||
<Link to="/listings">
|
||||
<Button variant="outline">
|
||||
View All Listings
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it works */}
|
||||
<section className="py-16 bg-gradient-to-br from-primary-50 to-accent-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-primary-800 mb-4">How It Works</h2>
|
||||
<p className="text-lg text-primary-600 max-w-2xl mx-auto">
|
||||
Our platform ensures quality listings through a simple but effective process
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent-100 text-accent-600 flex items-center justify-center mx-auto mb-4">
|
||||
<Building2 className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-800 mb-2">Verified Agencies</h3>
|
||||
<p className="text-primary-600">
|
||||
We only allow verified professional agencies to post listings on our platform, ensuring trustworthy offers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent-100 text-accent-600 flex items-center justify-center mx-auto mb-4">
|
||||
<Star className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-800 mb-2">Admin Approval</h3>
|
||||
<p className="text-primary-600">
|
||||
Every listing is reviewed by our admin team before being published to ensure quality and prevent fraud.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-accent-100 text-accent-600 flex items-center justify-center mx-auto mb-4">
|
||||
<MapPin className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-primary-800 mb-2">Direct Contact</h3>
|
||||
<p className="text-primary-600">
|
||||
Easily contact agencies about listings that interest you through our built-in messaging system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-primary-800 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="md:flex md:items-center md:justify-between">
|
||||
<div className="md:w-2/3">
|
||||
<h2 className="text-3xl font-bold mb-4">Are you an agency looking to post listings?</h2>
|
||||
<p className="text-xl text-primary-100 mb-6 md:mb-0">
|
||||
Register your agency today and start showcasing your listings to our audience.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:w-1/3 text-center md:text-right">
|
||||
<Link to="/register">
|
||||
<Button variant="secondary" size="lg">
|
||||
Register as Agency
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user