Skip to content

Commit 78ed6fa

Browse files
OzPolOzPol
committed
feat: Enhance home page content for logged-in users
- Added dynamic content for logged-in customers and providers on the home page. - Customers now see a section encouraging them to explore popular services in their area. (This will need to be further developed - currently, if clicked on, the buttons will route to 404) - Providers see a section with tips and best practices along with sample blog post cards ( This will need to be further developed) - Removed the logout button from the middle of the home page for logged-in users. - handle Link components to avoid invalid nesting errors.
1 parent 7a5fd80 commit 78ed6fa

File tree

3 files changed

+67
-14
lines changed

3 files changed

+67
-14
lines changed

‎components/CustomerContent.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// components/CustomerContent.tsx
2+
import Link from 'next/link';
3+
4+
const CustomerContent = () => {
5+
return (
6+
<div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
7+
<h1 className="text-4xl font-bold mb-2">Looking for inspirations?!</h1>
8+
<h2 className="text-2xl mb-6">Check out our latest services and offers tailored just for you.</h2>
9+
<Link href="/popular-services">
10+
<span className="w-full bg-blue-500 text-white py-3 px-6 rounded-lg text-center hover:bg-blue-600">
11+
View Popular Services in Your Area
12+
</span>
13+
</Link>
14+
{/* Add more customer-specific content or components here */}
15+
</div>
16+
);
17+
};
18+
19+
export default CustomerContent;

‎components/ProviderContent.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// components/ProviderContent.tsx
2+
import Link from 'next/link';
3+
4+
const ProviderContent = () => {
5+
return (
6+
<div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
7+
<h1 className="text-4xl font-bold mb-2">Hey there, Pro!</h1>
8+
<h2 className="text-2xl mb-6">Check out some tips and best practices to grow your business.</h2>
9+
{/* Example cards for blog posts */}
10+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
11+
<div className="p-4 bg-gray-100 rounded-md shadow-md">
12+
<h3 className="font-bold text-lg mb-2">Blog Post Title 1</h3>
13+
<p className="text-gray-700 mb-4">Brief description of the blog post content...</p>
14+
<Link href="/blog-post-1">
15+
<span className="text-blue-500 hover:underline">Read More</span>
16+
</Link>
17+
</div>
18+
<div className="p-4 bg-gray-100 rounded-md shadow-md">
19+
<h3 className="font-bold text-lg mb-2">Blog Post Title 2</h3>
20+
<p className="text-gray-700 mb-4">Brief description of the blog post content...</p>
21+
<Link href="/blog-post-2">
22+
<span className="text-blue-500 hover:underline">Read More</span>
23+
</Link>
24+
</div>
25+
{/* Add more cards as needed */}
26+
</div>
27+
</div>
28+
);
29+
};
30+
31+
export default ProviderContent;

‎pages/index.tsx

+17-14
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
import Head from 'next/head';
33
import Link from 'next/link';
44
import { useEffect, useState } from 'react';
5+
import { useRouter } from 'next/router';
6+
import { account } from '../lib/appwrite.config';
7+
import CustomerContent from '../components/CustomerContent';
8+
import ProviderContent from '../components/ProviderContent';
59

610
export default function Home() {
7-
11+
const router = useRouter();
812
const [userType, setUserType] = useState<string | null>(null);
913

1014
useEffect(() => {
@@ -26,6 +30,17 @@ export default function Home() {
2630
fetchSession();
2731
}, []);
2832

33+
const handleLogout = async () => {
34+
try {
35+
await account.deleteSession('current');
36+
localStorage.removeItem('appwriteSession');
37+
localStorage.removeItem('userType');
38+
router.push('/customer-login');
39+
} catch (error) {
40+
console.error('Error logging out:', error);
41+
}
42+
};
43+
2944
return (
3045
<div className="min-h-[81vh] flex flex-col justify-center items-center homepage-background">
3146
<Head>
@@ -36,19 +51,7 @@ export default function Home() {
3651

3752
<main className="relative z-10 flex flex-col md:flex-row justify-center items-center py-8 w-full flex-1">
3853
{userType ? (
39-
<div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
40-
{userType === 'Customer' ? (
41-
<>
42-
<h1 className="text-4xl font-bold mb-2">Looking for inspirations?!</h1>
43-
<p className="text-lg">Check out our latest services and offers tailored just for you.</p>
44-
</>
45-
) : (
46-
<>
47-
<h1 className="text-4xl font-bold mb-2">Hey there, Pro!</h1>
48-
<p className="text-lg">Wanna check out some tips and resources to help grow your business?</p>
49-
</>
50-
)}
51-
</div>
54+
userType === 'Customer' ? <CustomerContent /> : <ProviderContent />
5255
) : (
5356
<div className="flex flex-col items-center space-y-4 p-8 bg-white bg-opacity-80 rounded-md shadow-lg md:w-3/2">
5457
<h1 className="text-4xl font-bold mb-2">ProBooker</h1>

0 commit comments

Comments
 (0)