home page rework
This commit is contained in:
jackiettran
142
frontend/src/components/Footer.tsx
Normal file
142
frontend/src/components/Footer.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import React from 'react';
|
||||
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>
|
||||
Rentall
|
||||
</h5>
|
||||
<p className="small text-white-50">
|
||||
The marketplace for renting anything, from anyone, anywhere.
|
||||
</p>
|
||||
</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 Rentall. 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
|
||||
</Link>
|
||||
<Link to="/terms" className="text-decoration-none text-white-50 small">
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -13,7 +13,7 @@ const Navbar: React.FC = () => {
|
||||
|
||||
return (
|
||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||
<div className="container">
|
||||
<div className="container-fluid" style={{ maxWidth: '1800px' }}>
|
||||
<Link className="navbar-brand fw-bold" to="/">
|
||||
<i className="bi bi-box-seam me-2"></i>
|
||||
Rentall
|
||||
@@ -30,82 +30,88 @@ const Navbar: React.FC = () => {
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarNav">
|
||||
<ul className="navbar-nav me-auto">
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/items">
|
||||
Browse Items
|
||||
<div className="d-flex align-items-center w-100">
|
||||
<div className="position-absolute start-50 translate-middle-x">
|
||||
<div className="input-group" style={{ width: '400px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Search for items to rent..."
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button className="btn btn-outline-secondary" type="button">
|
||||
<i className="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ms-auto d-flex align-items-center">
|
||||
<Link className="btn btn-outline-primary btn-sm me-3 text-nowrap" to="/create-item">
|
||||
Start Earning
|
||||
</Link>
|
||||
</li>
|
||||
{user && (
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/create-item">
|
||||
List an Item
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
<ul className="navbar-nav">
|
||||
{user ? (
|
||||
<>
|
||||
<li className="nav-item dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="navbarDropdown"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bi bi-person-circle me-1"></i>
|
||||
{user.firstName}
|
||||
</a>
|
||||
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile">
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
<ul className="navbar-nav flex-row">
|
||||
{user ? (
|
||||
<>
|
||||
<li className="nav-item dropdown">
|
||||
<a
|
||||
className="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="navbarDropdown"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="bi bi-person-circle me-1"></i>
|
||||
{user.firstName}
|
||||
</a>
|
||||
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile">
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/my-rentals">
|
||||
<i className="bi bi-calendar-check me-2"></i>My Rentals
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/my-listings">
|
||||
<i className="bi bi-list-ul me-2"></i>My Listings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages">
|
||||
<i className="bi bi-envelope me-2"></i>Messages
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={handleLogout}>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item me-2">
|
||||
<Link className="btn btn-outline-secondary btn-sm text-nowrap" to="/login">
|
||||
Login
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/my-rentals">
|
||||
<i className="bi bi-calendar-check me-2"></i>My Rentals
|
||||
<li className="nav-item">
|
||||
<Link className="btn btn-primary btn-sm text-nowrap" to="/register">
|
||||
Sign Up
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/my-listings">
|
||||
<i className="bi bi-list-ul me-2"></i>My Listings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages">
|
||||
<i className="bi bi-envelope me-2"></i>Messages
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button className="dropdown-item" onClick={handleLogout}>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/login">
|
||||
Login
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="btn btn-primary btn-sm ms-2" to="/register">
|
||||
Sign Up
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user