home page styling changes
This commit is contained in:
jackiettran
@@ -1,10 +1,10 @@
|
||||
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';
|
||||
import ItemCard from '../components/ItemCard';
|
||||
import AuthButton from '../components/AuthButton';
|
||||
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";
|
||||
import ItemCard from "../components/ItemCard";
|
||||
import AuthButton from "../components/AuthButton";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { user } = useAuth();
|
||||
@@ -17,7 +17,7 @@ const Home: React.FC = () => {
|
||||
const response = await itemAPI.getItems({ limit: 8 });
|
||||
setFeaturedItems(response.data.items);
|
||||
} catch (error) {
|
||||
console.error('Error fetching items:', error);
|
||||
console.error("Error fetching items:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -28,70 +28,56 @@ const Home: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Hero Section */}
|
||||
<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="fs-2 fw-bold mb-2">
|
||||
Rent Anything, From Anyone, Anywhere
|
||||
</h1>
|
||||
<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">
|
||||
Start Renting
|
||||
</Link>
|
||||
{user ? (
|
||||
<Link to="/create-item" className="btn btn-outline-light">
|
||||
List Your Items
|
||||
</Link>
|
||||
) : (
|
||||
<AuthButton mode="signup" className="btn btn-outline-light">
|
||||
Start Earning
|
||||
</AuthButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div className="py-4" style={{ backgroundColor: "#2C3E50" }}>
|
||||
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
|
||||
{loading ? (
|
||||
<div className="text-center py-4">
|
||||
<div className="spinner-border text-primary" role="status">
|
||||
<div
|
||||
className="spinner-border"
|
||||
role="status"
|
||||
style={{ color: "#4A90E2" }}
|
||||
>
|
||||
<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">
|
||||
<ItemCard item={item} variant="compact" />
|
||||
<>
|
||||
<div className="row g-4">
|
||||
{featuredItems.map((item) => (
|
||||
<div key={item.id} className="col-md-6 col-lg-4 col-xl-3">
|
||||
<ItemCard item={item} variant="compact" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{featuredItems.length > 0 && (
|
||||
<div className="text-center mt-4">
|
||||
<Link
|
||||
to="/items"
|
||||
className="btn btn-link"
|
||||
style={{ color: "#4A90E2" }}
|
||||
>
|
||||
View All <i className="bi bi-arrow-right"></i>
|
||||
</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">
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.7)" }}>
|
||||
No items available for rent yet.
|
||||
</p>
|
||||
<Link
|
||||
to="/create-item"
|
||||
className="btn"
|
||||
style={{
|
||||
backgroundColor: "#4A90E2",
|
||||
color: "white",
|
||||
borderColor: "#4A90E2",
|
||||
}}
|
||||
>
|
||||
Be the first to list an item!
|
||||
</Link>
|
||||
</div>
|
||||
@@ -99,40 +85,164 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<div className="py-5" style={{ backgroundColor: "#34495e" }}>
|
||||
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h2 className="mb-4" style={{ color: "white" }}>
|
||||
Why Choose CommunityRentals.App?
|
||||
</h2>
|
||||
<div className="d-flex mb-3">
|
||||
<i
|
||||
className="bi bi-check-circle-fill me-3"
|
||||
style={{ fontSize: "1.5rem", color: "#7FB069" }}
|
||||
></i>
|
||||
<div>
|
||||
<h5 style={{ color: "white" }}>Save Money</h5>
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
|
||||
Why buy when you can rent? Access items for a fraction of
|
||||
the purchase price.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex mb-3">
|
||||
<i
|
||||
className="bi bi-check-circle-fill me-3"
|
||||
style={{ fontSize: "1.5rem", color: "#7FB069" }}
|
||||
></i>
|
||||
<div>
|
||||
<h5 style={{ color: "white" }}>Earn Extra Income</h5>
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
|
||||
Turn your unused items into a revenue stream. Your garage
|
||||
could be a goldmine.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex mb-3">
|
||||
<i
|
||||
className="bi bi-check-circle-fill me-3"
|
||||
style={{ fontSize: "1.5rem", color: "#7FB069" }}
|
||||
></i>
|
||||
<div>
|
||||
<h5 style={{ color: "white" }}>Build Community</h5>
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
|
||||
Connect with neighbors and help each other. Sharing builds
|
||||
stronger communities.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<i
|
||||
className="bi bi-check-circle-fill me-3"
|
||||
style={{ fontSize: "1.5rem", color: "#7FB069" }}
|
||||
></i>
|
||||
<div>
|
||||
<h5 style={{ color: "white" }}>Reduce Waste</h5>
|
||||
<p style={{ color: "rgba(255, 255, 255, 0.8)" }}>
|
||||
Share instead of everyone buying. It's better for your
|
||||
wallet and the planet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-center">
|
||||
<h2 className="mb-4" style={{ color: "white" }}>
|
||||
Ready to Get Started?
|
||||
</h2>
|
||||
<p
|
||||
className="lead mb-4"
|
||||
style={{ color: "rgba(255, 255, 255, 0.9)" }}
|
||||
>
|
||||
Join thousands of people sharing and renting in your community
|
||||
</p>
|
||||
<div className="d-flex gap-3 justify-content-center flex-wrap">
|
||||
{user ? (
|
||||
<Link
|
||||
to="/create-item"
|
||||
className="btn btn-lg"
|
||||
style={{
|
||||
backgroundColor: "#7FB069",
|
||||
color: "white",
|
||||
borderColor: "#7FB069",
|
||||
}}
|
||||
>
|
||||
Start Earning
|
||||
</Link>
|
||||
) : (
|
||||
<AuthButton
|
||||
mode="signup"
|
||||
className="btn btn-lg"
|
||||
style={{
|
||||
backgroundColor: "#7FB069",
|
||||
color: "white",
|
||||
borderColor: "#7FB069",
|
||||
}}
|
||||
>
|
||||
Start Earning
|
||||
</AuthButton>
|
||||
)}
|
||||
<Link
|
||||
to="/items"
|
||||
className="btn btn-lg"
|
||||
style={{
|
||||
backgroundColor: "#4A90E2",
|
||||
color: "white",
|
||||
borderColor: "#4A90E2",
|
||||
}}
|
||||
>
|
||||
Browse Rentals
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* How It Works - For Renters */}
|
||||
<div className="py-5">
|
||||
<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="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">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-search text-primary" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-search"
|
||||
style={{ fontSize: "3rem", color: "#4A90E2" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>1. Find What You Need</h4>
|
||||
<p className="text-muted">
|
||||
Browse our marketplace for tools, equipment, electronics, and more.
|
||||
Filter by location, price, and availability.
|
||||
Browse our marketplace for tools, equipment, electronics, and
|
||||
more. Filter by location, price, and availability.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-4 text-center">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-calendar-check text-primary" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-calendar-check"
|
||||
style={{ fontSize: "3rem", color: "#4A90E2" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>2. Book Your Rental</h4>
|
||||
<p className="text-muted">
|
||||
Select your rental dates, choose delivery or pickup, and pay securely.
|
||||
Your payment is held until the owner confirms.
|
||||
Select your rental dates, choose delivery or pickup, and pay
|
||||
securely. Your payment is held until the owner confirms.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-4 text-center">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-box-arrow-right text-primary" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-box-arrow-right"
|
||||
style={{ fontSize: "3rem", color: "#4A90E2" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>3. Enjoy & Return</h4>
|
||||
<p className="text-muted">
|
||||
Use the item for your project or event, then return it as agreed.
|
||||
Rate your experience to help the community.
|
||||
Use the item for your project or event, then return it as
|
||||
agreed. Rate your experience to help the community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,168 +250,56 @@ const Home: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* How It Works - For Owners */}
|
||||
<div className="py-5 bg-light">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<h2 className="text-center mb-5">For Owners: Turn Your Idle Items Into Income</h2>
|
||||
<div className="py-5" style={{ backgroundColor: "#F7F9FB" }}>
|
||||
<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">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-camera text-success" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-camera"
|
||||
style={{ fontSize: "3rem", color: "#7FB069" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>1. List Your Items</h4>
|
||||
<p className="text-muted">
|
||||
Take photos, set your price, and choose when your items are available.
|
||||
List anything from power tools to party supplies.
|
||||
Take photos, set your price, and choose when your items are
|
||||
available. List anything from power tools to party supplies.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-4 text-center">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-bell text-success" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-bell"
|
||||
style={{ fontSize: "3rem", color: "#7FB069" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>2. Accept Requests</h4>
|
||||
<p className="text-muted">
|
||||
Review rental requests and accept the ones that work for you.
|
||||
Review rental requests and accept the ones that work for you.
|
||||
Set your own rules and requirements.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-4 text-center">
|
||||
<div className="mb-3">
|
||||
<i className="bi bi-cash-stack text-success" style={{ fontSize: '3rem' }}></i>
|
||||
<i
|
||||
className="bi bi-cash-stack"
|
||||
style={{ fontSize: "3rem", color: "#7FB069" }}
|
||||
></i>
|
||||
</div>
|
||||
<h4>3. Get Paid</h4>
|
||||
<p className="text-muted">
|
||||
Earn money from items sitting in your garage.
|
||||
Payments are processed securely after each rental.
|
||||
Earn money from items sitting in your garage. Payments are
|
||||
processed securely after each rental.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popular Categories */}
|
||||
<div className="py-5">
|
||||
<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">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-tools text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Tools</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-camera-fill text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Electronics</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-bicycle text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Sports</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-music-note-beamed text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Music</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-balloon text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Party</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6 col-md-4 col-lg-2">
|
||||
<div className="card h-100 text-center border-0 shadow-sm">
|
||||
<div className="card-body">
|
||||
<i className="bi bi-tree text-primary mb-2" style={{ fontSize: '2rem' }}></i>
|
||||
<h6 className="mb-0">Outdoor</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<div className="py-5 bg-light">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-6">
|
||||
<h2 className="mb-4">Why Choose CommunityRentals.App?</h2>
|
||||
<div className="d-flex mb-3">
|
||||
<i className="bi bi-check-circle-fill text-success me-3" style={{ fontSize: '1.5rem' }}></i>
|
||||
<div>
|
||||
<h5>Save Money</h5>
|
||||
<p className="text-muted">Why buy when you can rent? Access expensive items for a fraction of the purchase price.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex mb-3">
|
||||
<i className="bi bi-check-circle-fill text-success me-3" style={{ fontSize: '1.5rem' }}></i>
|
||||
<div>
|
||||
<h5>Earn Extra Income</h5>
|
||||
<p className="text-muted">Turn your unused items into a revenue stream. Your garage could be a goldmine.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex mb-3">
|
||||
<i className="bi bi-check-circle-fill text-success me-3" style={{ fontSize: '1.5rem' }}></i>
|
||||
<div>
|
||||
<h5>Build Community</h5>
|
||||
<p className="text-muted">Connect with neighbors and help each other. Sharing builds stronger communities.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<i className="bi bi-check-circle-fill text-success me-3" style={{ fontSize: '1.5rem' }}></i>
|
||||
<div>
|
||||
<h5>Reduce Waste</h5>
|
||||
<p className="text-muted">Share instead of everyone buying. It's better for your wallet and the planet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6 text-center">
|
||||
<i className="bi bi-shield-check" style={{ fontSize: '15rem', color: '#e0e0e0' }}></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="bg-primary text-white py-5">
|
||||
<div className="container text-center">
|
||||
<h2 className="mb-4">Ready to Get Started?</h2>
|
||||
<p className="lead mb-4">
|
||||
Join thousands of people sharing and renting in your community
|
||||
</p>
|
||||
<div className="d-flex gap-3 justify-content-center flex-wrap">
|
||||
<Link to="/items" className="btn btn-light btn-lg">
|
||||
Browse Rentals
|
||||
</Link>
|
||||
{user ? (
|
||||
<Link to="/create-item" className="btn btn-outline-light btn-lg">
|
||||
List an Item
|
||||
</Link>
|
||||
) : (
|
||||
<AuthButton mode="signup" className="btn btn-outline-light btn-lg">
|
||||
Sign Up Free
|
||||
</AuthButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default Home;
|
||||
|
||||
Reference in New Issue
Block a user