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;
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>

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

@@ -4,139 +4,51 @@ 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>
);
};
export default Footer;
export default Footer;

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

@@ -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>