From e65c53e6aa5a519cfa6aee967e6a90cda7178f49 Mon Sep 17 00:00:00 2001 From: jackiettran <41605212+jackiettran@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:07:53 -0400 Subject: [PATCH] home page rework --- frontend/src/App.tsx | 12 ++- frontend/src/components/Footer.tsx | 142 +++++++++++++++++++++++++++ frontend/src/components/Navbar.tsx | 150 +++++++++++++++-------------- frontend/src/pages/Home.tsx | 146 ++++++++++++++++++++-------- 4 files changed, 336 insertions(+), 114 deletions(-) create mode 100644 frontend/src/components/Footer.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b684077..c685a08 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { AuthProvider } from './contexts/AuthContext'; import Navbar from './components/Navbar'; +import Footer from './components/Footer'; import Home from './pages/Home'; import Login from './pages/Login'; import Register from './pages/Register'; @@ -23,8 +24,10 @@ function App() { return ( - - +
+ +
+ } /> } /> } /> @@ -95,7 +98,10 @@ function App() { } /> - + +
+
); diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx new file mode 100644 index 0000000..91fcb3e --- /dev/null +++ b/frontend/src/components/Footer.tsx @@ -0,0 +1,142 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Footer: React.FC = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index ba207e6..5dda59f 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -13,7 +13,7 @@ const Navbar: React.FC = () => { return ( diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index c05f762..b8220e0 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,49 +1,141 @@ -import React from 'react'; +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'; const Home: React.FC = () => { const { user } = useAuth(); + const [featuredItems, setFeaturedItems] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchFeaturedItems = async () => { + try { + const response = await itemAPI.getItems({ limit: 8 }); + setFeaturedItems(response.data.items); + } catch (error) { + console.error('Error fetching items:', error); + } finally { + setLoading(false); + } + }; + + fetchFeaturedItems(); + }, []); return (
{/* Hero Section */} -
-
-
+
+
+
-

+

Rent Anything, From Anyone, Anywhere

-

+

Join the sharing economy. Rent items you need for a fraction of the cost, or earn money from things you already own.

- + Start Renting {user ? ( - + List Your Items ) : ( - + Start Earning )}
-
- +
+
+ {/* Featured Items Section */} +
+
+
+

Items for Rent

+ + View All + +
+ + {loading ? ( +
+
+ Loading... +
+
+ ) : ( +
+ {featuredItems.map((item) => ( +
+ +
+ {item.images && item.images.length > 0 ? ( + {item.name} + ) : ( +
+ +
+ )} +
+
{item.name}
+

+ {item.location} +

+
+
+ {item.pricePerDay && ( +
+ ${item.pricePerDay}/day +
+ )} +
+ + {item.owner?.firstName || 'Unknown'} + +
+
+
+ +
+ ))} +
+ )} + + {!loading && featuredItems.length === 0 && ( +
+

No items available for rent yet.

+ + Be the first to list an item! + +
+ )} +
+
+ {/* How It Works - For Renters */}
-
+

For Renters: Get What You Need, When You Need It

@@ -82,7 +174,7 @@ const Home: React.FC = () => { {/* How It Works - For Owners */}
-
+

For Owners: Turn Your Idle Items Into Income

@@ -121,7 +213,7 @@ const Home: React.FC = () => { {/* Popular Categories */}
-
+

Popular Rental Categories

@@ -178,7 +270,7 @@ const Home: React.FC = () => { {/* Benefits Section */}
-
+

Why Choose Rentall?

@@ -241,30 +333,6 @@ const Home: React.FC = () => {
- - {/* Stats Section */} -
-
-
-
-

1000+

-

Active Items

-
-
-

500+

-

Happy Renters

-
-
-

$50k+

-

Earned by Owners

-
-
-

4.8★

-

Average Rating

-
-
-
-
); };