home page rework
This commit is contained in:
jackiettran
@@ -1,49 +1,141 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { itemAPI } from '../services/api';
|
||||
import { Item } from '../types';
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
const [featuredItems, setFeaturedItems] = useState<Item[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFeaturedItems = async () => {
|
||||
try {
|
||||
const response = await itemAPI.getItems({ limit: 8 });
|
||||
setFeaturedItems(response.data.items);
|
||||
} catch (error) {
|
||||
console.error('Error fetching items:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFeaturedItems();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Hero Section */}
|
||||
<div className="bg-primary text-white py-5">
|
||||
<div className="container">
|
||||
<div className="row align-items-center min-vh-50">
|
||||
<div className="bg-primary text-white py-3">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h1 className="display-4 fw-bold mb-4">
|
||||
<h1 className="fs-2 fw-bold mb-2">
|
||||
Rent Anything, From Anyone, Anywhere
|
||||
</h1>
|
||||
<p className="lead mb-4">
|
||||
<p className="mb-3">
|
||||
Join the sharing economy. Rent items you need for a fraction of the cost,
|
||||
or earn money from things you already own.
|
||||
</p>
|
||||
<div className="d-flex gap-3 flex-wrap">
|
||||
<Link to="/items" className="btn btn-light btn-lg">
|
||||
<Link to="/items" className="btn btn-light">
|
||||
Start Renting
|
||||
</Link>
|
||||
{user ? (
|
||||
<Link to="/create-item" className="btn btn-outline-light btn-lg">
|
||||
<Link to="/create-item" className="btn btn-outline-light">
|
||||
List Your Items
|
||||
</Link>
|
||||
) : (
|
||||
<Link to="/register" className="btn btn-outline-light btn-lg">
|
||||
<Link to="/register" className="btn btn-outline-light">
|
||||
Start Earning
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-center">
|
||||
<i className="bi bi-box-seam" style={{ fontSize: '15rem', opacity: 0.3 }}></i>
|
||||
<div className="col-lg-6 text-center d-none d-lg-block">
|
||||
<i className="bi bi-box-seam" style={{ fontSize: '8rem', opacity: 0.3 }}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Featured Items Section */}
|
||||
<div className="py-4 bg-light">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 className="mb-0">Items for Rent</h2>
|
||||
<Link to="/items" className="btn btn-link">
|
||||
View All <i className="bi bi-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-4">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row g-4">
|
||||
{featuredItems.map((item) => (
|
||||
<div key={item.id} className="col-md-6 col-lg-4 col-xl-3">
|
||||
<Link to={`/items/${item.id}`} className="text-decoration-none">
|
||||
<div className="card h-100 shadow-sm hover-shadow">
|
||||
{item.images && item.images.length > 0 ? (
|
||||
<img
|
||||
src={item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={item.name}
|
||||
style={{ height: '150px', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="card-img-top bg-light d-flex align-items-center justify-content-center"
|
||||
style={{ height: '150px' }}
|
||||
>
|
||||
<i className="bi bi-image text-muted" style={{ fontSize: '2rem' }}></i>
|
||||
</div>
|
||||
)}
|
||||
<div className="card-body p-2">
|
||||
<h6 className="card-title text-truncate mb-1">{item.name}</h6>
|
||||
<p className="card-text text-muted small text-truncate mb-1">
|
||||
{item.location}
|
||||
</p>
|
||||
<div className="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
{item.pricePerDay && (
|
||||
<div className="fw-bold small">
|
||||
${item.pricePerDay}/day
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<small className="text-muted" style={{ fontSize: '0.75rem' }}>
|
||||
{item.owner?.firstName || 'Unknown'}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && featuredItems.length === 0 && (
|
||||
<div className="text-center py-5">
|
||||
<p className="text-muted">No items available for rent yet.</p>
|
||||
<Link to="/create-item" className="btn btn-primary">
|
||||
Be the first to list an item!
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How It Works - For Renters */}
|
||||
<div className="py-5">
|
||||
<div className="container">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<h2 className="text-center mb-5">For Renters: Get What You Need, When You Need It</h2>
|
||||
<div className="row g-4">
|
||||
<div className="col-md-4 text-center">
|
||||
@@ -82,7 +174,7 @@ const Home: React.FC = () => {
|
||||
|
||||
{/* How It Works - For Owners */}
|
||||
<div className="py-5 bg-light">
|
||||
<div className="container">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<h2 className="text-center mb-5">For Owners: Turn Your Idle Items Into Income</h2>
|
||||
<div className="row g-4">
|
||||
<div className="col-md-4 text-center">
|
||||
@@ -121,7 +213,7 @@ const Home: React.FC = () => {
|
||||
|
||||
{/* Popular Categories */}
|
||||
<div className="py-5">
|
||||
<div className="container">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<h2 className="text-center mb-5">Popular Rental Categories</h2>
|
||||
<div className="row g-3">
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
@@ -178,7 +270,7 @@ const Home: React.FC = () => {
|
||||
|
||||
{/* Benefits Section */}
|
||||
<div className="py-5 bg-light">
|
||||
<div className="container">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h2 className="mb-4">Why Choose Rentall?</h2>
|
||||
@@ -241,30 +333,6 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="py-5">
|
||||
<div className="container">
|
||||
<div className="row text-center">
|
||||
<div className="col-md-3">
|
||||
<h2 className="text-primary">1000+</h2>
|
||||
<p className="text-muted">Active Items</p>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<h2 className="text-primary">500+</h2>
|
||||
<p className="text-muted">Happy Renters</p>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<h2 className="text-primary">$50k+</h2>
|
||||
<p className="text-muted">Earned by Owners</p>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<h2 className="text-primary">4.8★</h2>
|
||||
<p className="text-muted">Average Rating</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user