home page styling changes
This commit is contained in:
jackiettran
@@ -6,9 +6,10 @@ interface AuthButtonProps {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
asLink?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children, asLink = false }) => {
|
||||
const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children, asLink = false, style }) => {
|
||||
const { openAuthModal } = useAuth();
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
@@ -22,6 +23,7 @@ const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children,
|
||||
href="#"
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
@@ -32,6 +34,7 @@ const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children,
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
|
||||
@@ -4,135 +4,47 @@ import { Link } from 'react-router-dom';
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<footer className="bg-dark text-white">
|
||||
<div className="container-fluid py-4" style={{ maxWidth: '1800px' }}>
|
||||
<div className="row">
|
||||
<div className="col-lg-3">
|
||||
<h5 className="mb-3">
|
||||
<i className="bi bi-box-seam me-2"></i>
|
||||
CommunityRentals.App
|
||||
</h5>
|
||||
<p className="small text-white-50">
|
||||
The marketplace for renting anything, from anyone, anywhere.
|
||||
</p>
|
||||
<div className="container py-4">
|
||||
<div className="text-center">
|
||||
{/* Social Media Icons */}
|
||||
<div className="mb-3">
|
||||
<a href="#" className="text-white-50 me-3">
|
||||
<i className="bi bi-facebook"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50 me-3">
|
||||
<i className="bi bi-twitter"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50 me-3">
|
||||
<i className="bi bi-instagram"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50">
|
||||
<i className="bi bi-linkedin"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<h6 className="mb-3">FAQ</h6>
|
||||
<ul className="list-unstyled small">
|
||||
<li className="mb-2">
|
||||
<Link to="/faq/renters" className="text-decoration-none text-white-50">
|
||||
Renter FAQ
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/faq/owners" className="text-decoration-none text-white-50">
|
||||
Owner FAQ
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/faq/payments" className="text-decoration-none text-white-50">
|
||||
Payments
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/help" className="text-decoration-none text-white-50">
|
||||
Help Center
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<h6 className="mb-3">For Renters</h6>
|
||||
<ul className="list-unstyled small">
|
||||
<li className="mb-2">
|
||||
<Link to="/items" className="text-decoration-none text-white-50">
|
||||
Browse Items
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/how-it-works" className="text-decoration-none text-white-50">
|
||||
How It Works
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/safety" className="text-decoration-none text-white-50">
|
||||
Safety Tips
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<h6 className="mb-3">For Owners</h6>
|
||||
<ul className="list-unstyled small">
|
||||
<li className="mb-2">
|
||||
<Link to="/create-item" className="text-decoration-none text-white-50">
|
||||
List an Item
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/owner-guide" className="text-decoration-none text-white-50">
|
||||
Owner Guide
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/insurance" className="text-decoration-none text-white-50">
|
||||
Insurance
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-2 col-md-6">
|
||||
<h6 className="mb-3">Company</h6>
|
||||
<ul className="list-unstyled small">
|
||||
<li className="mb-2">
|
||||
<Link to="/about" className="text-decoration-none text-white-50">
|
||||
About Us
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/contact" className="text-decoration-none text-white-50">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<Link to="/careers" className="text-decoration-none text-white-50">
|
||||
Careers
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-1 col-md-6">
|
||||
<h6 className="mb-3">Follow Us</h6>
|
||||
<div className="d-flex gap-3">
|
||||
<a href="#" className="text-white-50">
|
||||
<i className="bi bi-facebook"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50">
|
||||
<i className="bi bi-twitter"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50">
|
||||
<i className="bi bi-instagram"></i>
|
||||
</a>
|
||||
<a href="#" className="text-white-50">
|
||||
<i className="bi bi-linkedin"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-4 bg-secondary" />
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<p className="small text-white-50 mb-0">
|
||||
© 2025 CommunityRentals.App. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-md-6 text-md-end">
|
||||
<Link to="/privacy" className="text-decoration-none text-white-50 small me-3">
|
||||
|
||||
{/* Essential Links */}
|
||||
<div className="mb-3 small">
|
||||
<Link to="/about" className="text-decoration-none text-white-50 me-2">
|
||||
About
|
||||
</Link>
|
||||
<span className="text-white-50">•</span>
|
||||
<Link to="/contact" className="text-decoration-none text-white-50 mx-2">
|
||||
Contact
|
||||
</Link>
|
||||
<span className="text-white-50">•</span>
|
||||
<Link to="/privacy" className="text-decoration-none text-white-50 mx-2">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link to="/terms" className="text-decoration-none text-white-50 small">
|
||||
<span className="text-white-50">•</span>
|
||||
<Link to="/terms" className="text-decoration-none text-white-50 ms-2">
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<p className="small text-white-50 mb-0">
|
||||
© 2025 CommunityRentals.App. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -111,10 +111,11 @@ const Navbar: React.FC = () => {
|
||||
}
|
||||
/>
|
||||
<span
|
||||
className="input-group-text bg-white text-muted"
|
||||
className="input-group-text text-muted"
|
||||
style={{
|
||||
borderLeft: "0",
|
||||
borderRight: "1px solid #dee2e6",
|
||||
backgroundColor: "#f8f9fa",
|
||||
}}
|
||||
>
|
||||
in
|
||||
@@ -127,7 +128,6 @@ const Navbar: React.FC = () => {
|
||||
onChange={(e) =>
|
||||
handleSearchInputChange("location", e.target.value)
|
||||
}
|
||||
style={{ borderLeft: "0" }}
|
||||
/>
|
||||
<button className="btn btn-outline-secondary" type="submit">
|
||||
<i className="bi bi-search"></i>
|
||||
|
||||
@@ -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,23 +250,31 @@ 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">
|
||||
@@ -166,140 +284,20 @@ const Home: React.FC = () => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user