Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page styling changes

Browse Source
This commit is contained in:
jackiettran
2025-11-04 17:17:44 -05:00
parent 6ec7858bbd
commit 9c258177ae
4 changed files with 247 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/AuthButton.tsx
View File

@@ -6,9 +6,10 @@ interface AuthButtonProps {
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
asLink?: boolean; 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 { openAuthModal } = useAuth();
const handleClick = (e: React.MouseEvent) => { const handleClick = (e: React.MouseEvent) => {
@@ -22,6 +23,7 @@ const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children,
href="#" href="#"
onClick={handleClick} onClick={handleClick}
className={className} className={className}
style={style}
> >
{children} {children}
</a> </a>
@@ -32,6 +34,7 @@ const AuthButton: React.FC<AuthButtonProps> = ({ mode, className = '', children,
<button <button
onClick={handleClick} onClick={handleClick}
className={className} className={className}
style={style}
> >
{children} {children}
</button> </button>

160
frontend/src/components/Footer.tsx
View File

@@ -4,139 +4,51 @@ import { Link } from 'react-router-dom';
const Footer: React.FC = () => { const Footer: React.FC = () => {
return ( return (
<footer className="bg-dark text-white"> <footer className="bg-dark text-white">
<div className="container-fluid py-4" style={{ maxWidth: '1800px' }}> <div className="container py-4">
<div className="row"> <div className="text-center">
<div className="col-lg-3"> {/* Social Media Icons */}
<h5 className="mb-3"> <div className="mb-3">
<i className="bi bi-box-seam me-2"></i> <a href="#" className="text-white-50 me-3">
CommunityRentals.App <i className="bi bi-facebook"></i>
</h5> </a>
<p className="small text-white-50"> <a href="#" className="text-white-50 me-3">
The marketplace for renting anything, from anyone, anywhere. <i className="bi bi-twitter"></i>
</p> </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>
<div className="col-lg-2 col-md-6">
<h6 className="mb-3">FAQ</h6> {/* Essential Links */}
<ul className="list-unstyled small"> <div className="mb-3 small">
<li className="mb-2"> <Link to="/about" className="text-decoration-none text-white-50 me-2">
<Link to="/faq/renters" className="text-decoration-none text-white-50"> About
Renter FAQ </Link>
</Link> <span className="text-white-50">•</span>
</li> <Link to="/contact" className="text-decoration-none text-white-50 mx-2">
<li className="mb-2"> Contact
<Link to="/faq/owners" className="text-decoration-none text-white-50"> </Link>
Owner FAQ <span className="text-white-50">•</span>
</Link> <Link to="/privacy" className="text-decoration-none text-white-50 mx-2">
</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">
Privacy Policy Privacy Policy
</Link> </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 Terms of Service
</Link> </Link>
</div> </div>
{/* Copyright */}
<p className="small text-white-50 mb-0">
© 2025 CommunityRentals.App. All rights reserved.
</p>
</div> </div>
</div> </div>
</footer> </footer>
); );
}; };
export default Footer; export default Footer;

4
frontend/src/components/Navbar.tsx
View File

@@ -111,10 +111,11 @@ const Navbar: React.FC = () => {
} }
/> />
<span <span
className="input-group-text bg-white text-muted" className="input-group-text text-muted"
style={{ style={{
borderLeft: "0", borderLeft: "0",
borderRight: "1px solid #dee2e6", borderRight: "1px solid #dee2e6",
backgroundColor: "#f8f9fa",
}} }}
> >
in in
@@ -127,7 +128,6 @@ const Navbar: React.FC = () => {
onChange={(e) => onChange={(e) =>
handleSearchInputChange("location", e.target.value) handleSearchInputChange("location", e.target.value)
} }
style={{ borderLeft: "0" }}
/> />
<button className="btn btn-outline-secondary" type="submit"> <button className="btn btn-outline-secondary" type="submit">
<i className="bi bi-search"></i> <i className="bi bi-search"></i>

412
frontend/src/pages/Home.tsx
View File

@@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { useAuth } from '../contexts/AuthContext'; import { useAuth } from "../contexts/AuthContext";
import { itemAPI } from '../services/api'; import { itemAPI } from "../services/api";
import { Item } from '../types'; import { Item } from "../types";
import ItemCard from '../components/ItemCard'; import ItemCard from "../components/ItemCard";
import AuthButton from '../components/AuthButton'; import AuthButton from "../components/AuthButton";
const Home: React.FC = () => { const Home: React.FC = () => {
const { user } = useAuth(); const { user } = useAuth();
@@ -17,7 +17,7 @@ const Home: React.FC = () => {
const response = await itemAPI.getItems({ limit: 8 }); const response = await itemAPI.getItems({ limit: 8 });
setFeaturedItems(response.data.items); setFeaturedItems(response.data.items);
} catch (error) { } catch (error) {
console.error('Error fetching items:', error); console.error("Error fetching items:", error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -28,70 +28,56 @@ const Home: React.FC = () => {
return ( return (
<div> <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 */} {/* Featured Items Section */}
<div className="py-4 bg-light"> <div className="py-4" style={{ backgroundColor: "#2C3E50" }}>
<div className="container-fluid" style={{ maxWidth: '1800px' }}> <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 ? ( {loading ? (
<div className="text-center py-4"> <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> <span className="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
) : ( ) : (
<div className="row g-4"> <>
{featuredItems.map((item) => ( <div className="row g-4">
<div key={item.id} className="col-md-6 col-lg-4 col-xl-3"> {featuredItems.map((item) => (
<ItemCard item={item} variant="compact" /> <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>
))} )}
</div> </>
)} )}
{!loading && featuredItems.length === 0 && ( {!loading && featuredItems.length === 0 && (
<div className="text-center py-5"> <div className="text-center py-5">
<p className="text-muted">No items available for rent yet.</p> <p style={{ color: "rgba(255, 255, 255, 0.7)" }}>
<Link to="/create-item" className="btn btn-primary"> 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! Be the first to list an item!
</Link> </Link>
</div> </div>
@@ -99,40 +85,164 @@ const Home: React.FC = () => {
</div> </div>
</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 */} {/* How It Works - For Renters */}
<div className="py-5"> <div className="py-5">
<div className="container-fluid" style={{ maxWidth: '1800px' }}> <div className="container-fluid" style={{ maxWidth: "1800px" }}>
<h2 className="text-center mb-5">For Renters: Get What You Need, When You Need It</h2> <h2 className="text-center mb-5">
For Renters: Get What You Need, When You Need It
</h2>
<div className="row g-4"> <div className="row g-4">
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>1. Find What You Need</h4> <h4>1. Find What You Need</h4>
<p className="text-muted"> <p className="text-muted">
Browse our marketplace for tools, equipment, electronics, and more. Browse our marketplace for tools, equipment, electronics, and
Filter by location, price, and availability. more. Filter by location, price, and availability.
</p> </p>
</div> </div>
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>2. Book Your Rental</h4> <h4>2. Book Your Rental</h4>
<p className="text-muted"> <p className="text-muted">
Select your rental dates, choose delivery or pickup, and pay securely. Select your rental dates, choose delivery or pickup, and pay
Your payment is held until the owner confirms. securely. Your payment is held until the owner confirms.
</p> </p>
</div> </div>
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>3. Enjoy & Return</h4> <h4>3. Enjoy & Return</h4>
<p className="text-muted"> <p className="text-muted">
Use the item for your project or event, then return it as agreed. Use the item for your project or event, then return it as
Rate your experience to help the community. agreed. Rate your experience to help the community.
</p> </p>
</div> </div>
</div> </div>
@@ -140,168 +250,56 @@ const Home: React.FC = () => {
</div> </div>
{/* How It Works - For Owners */} {/* How It Works - For Owners */}
<div className="py-5 bg-light"> <div className="py-5" style={{ backgroundColor: "#F7F9FB" }}>
<div className="container-fluid" style={{ maxWidth: '1800px' }}> <div className="container-fluid" style={{ maxWidth: "1800px" }}>
<h2 className="text-center mb-5">For Owners: Turn Your Idle Items Into Income</h2> <h2 className="text-center mb-5">
For Owners: Turn Your Idle Items Into Income
</h2>
<div className="row g-4"> <div className="row g-4">
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>1. List Your Items</h4> <h4>1. List Your Items</h4>
<p className="text-muted"> <p className="text-muted">
Take photos, set your price, and choose when your items are available. Take photos, set your price, and choose when your items are
List anything from power tools to party supplies. available. List anything from power tools to party supplies.
</p> </p>
</div> </div>
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>2. Accept Requests</h4> <h4>2. Accept Requests</h4>
<p className="text-muted"> <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. Set your own rules and requirements.
</p> </p>
</div> </div>
<div className="col-md-4 text-center"> <div className="col-md-4 text-center">
<div className="mb-3"> <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> </div>
<h4>3. Get Paid</h4> <h4>3. Get Paid</h4>
<p className="text-muted"> <p className="text-muted">
Earn money from items sitting in your garage. Earn money from items sitting in your garage. Payments are
Payments are processed securely after each rental. processed securely after each rental.
</p> </p>
</div> </div>
</div> </div>
</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> </div>
); );
}; };
export default Home; export default Home;