Homepage pop

src/AuthContext.tsx

@@ -2,34 +2,45 @@ import React, { createContext, useState, useContext, useEffect } from 'react';
 import { getCurrentUser } from '@/lib/auth';
 
 interface AuthContextType {
-  isLoggedIn: boolean;
-  setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
+	isLoggedIn: boolean;
+	setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
+	userId: string | number;
+	setUserId: React.Dispatch<React.SetStateAction<string | number>>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
+	children,
+}) => {
+	const [isLoggedIn, setIsLoggedIn] = useState(false);
+	const [userId, setUserId] = useState(0);
 
-  useEffect(() => {
-    const checkLoginStatus = async () => {
-      const user = await getCurrentUser();
-      setIsLoggedIn(!!user);
-    };
-    checkLoginStatus();
-  }, []);
+	useEffect(() => {
+		const checkLoginStatus = async () => {
+			const user = await getCurrentUser();
+			if (user) {
+				const id = user.id;
+				setUserId(id);
+			}
+			setIsLoggedIn(!!user);
+		};
+		checkLoginStatus();
+	}, []);
 
-  return (
-    <AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
-      {children}
-    </AuthContext.Provider>
-  );
+	return (
+		<AuthContext.Provider
+			value={{ isLoggedIn, setIsLoggedIn, userId, setUserId }}
+		>
+			{children}
+		</AuthContext.Provider>
+	);
 };
 
 export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};
+	const context = useContext(AuthContext);
+	if (context === undefined) {
+		throw new Error('useAuth must be used within an AuthProvider');
+	}
+	return context;
+};

src/components/CarouselStages/CarouselStages.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import stage1 from '/stage1.jpg';
+import stage2 from '/stage2.jpg';
+import stage3 from '/stage3.jpg';
+import stage4 from '/stage4.jpg';
+import stage5 from '/stage5.png';
+
+const stages = [
+	{
+		id: 1,
+		image: stage1,
+		caption: 'Graduating university',
+	},
+	{
+		id: 2,
+		image: stage2,
+		caption: 'Beginning a career',
+	},
+	{
+		id: 3,
+		image: stage3,
+		caption: 'Giving back',
+	},
+	{
+		id: 4,
+		image: stage4,
+		caption: 'Exploring the world',
+	},
+	{
+		id: 5,
+		image: stage5,
+		caption: 'Starting a business',
+	},
+];
+
+function CarouselStages() {
+	const [current, setCurrent] = useState(0);
+
+	useEffect(() => {
+		setTimeout(() => {
+			slideRight();
+		}, 10000);
+	}),
+		[current];
+
+	const slideRight = () => {
+		setCurrent(current === stages.length - 1 ? 0 : current + 1);
+	};
+	return (
+		<div className='box-content h-64 w-full max-w-lg relative'>
+			<ul>
+				{stages.map((stage, index: number) => (
+					<li
+						key={stage.id}
+						className={`absolute top-0 left-0 w-full h-full transition-opacity duration-500 ease-in-out 
+                ${index === current ? 'opacity-100' : 'opacity-0'} ${index === current ? 'pointer-events-auto' : 'pointer-events-none'}`}
+					>
+						<figure>
+							<img src={stage.image} />
+							<figcaption>{stage.caption}</figcaption>
+						</figure>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}
+
+export default CarouselStages;

src/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import { SocialIcon } from 'react-social-icons';
 
 export function Footer() {
 	return (
-		<div className='bg-lilac p-8 text-offWhite mt-8'>
+		<div className='bg-lilac p-8 text-offWhite'>
 			<div className='grid grid-cols-1 md:grid-cols-4 gap-6 '>
 				{/* Social Media Section */}
 				<div className='flex flex-col items-center gap-4'>

src/components/NavBar/NavBar.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useMediaQuery } from 'react-responsive'
+import { useMediaQuery } from 'react-responsive';
 import NavItems from './NavItems';
 import MobileNavItems from './MobileNavItems';
 import { Button } from '../ui/button';
@@ -8,33 +8,33 @@ import { FaBars } from 'react-icons/fa6';
 import { useAuth } from '@/AuthContext'; // Import useAuth
 
 function NavBar() {
-    const isMobile = useMediaQuery({ maxWidth: 768 });
-    const { isLoggedIn } = useAuth(); // Use the isLoggedIn state from AuthContext
+	const isMobile = useMediaQuery({ maxWidth: 768 });
+	const { isLoggedIn } = useAuth(); // Use the isLoggedIn state from AuthContext
 
-    return (
-        <header className="w-full flex items-center justify-between p-4 sticky top-0 bg-white z-10 shadow-md">
-            <Link to="/" className="shrink-0">
-                <img src="./logo.png" className="size-20" alt="Nisa Invest" />
-            </Link>
-            {isMobile ? (
-                <Sheet>
-                    <SheetTrigger asChild>
-                        <Button variant="outline" size="icon">
-                            <FaBars className="h-6 w-6" />
-                        </Button>
-                    </SheetTrigger>
-                    <SheetContent side="right">
-                        <MobileNavItems
-                            classNameValue={'flex-col gap-2'}
-                            isLoggedIn={isLoggedIn}
-                        />
-                    </SheetContent>
-                </Sheet>
-            ) : (
-                <NavItems classNameValue="" isLoggedIn={isLoggedIn} />
-            )}
-        </header>
-    );
+	return (
+		<header className='w-full flex items-center justify-between p-4 sticky top-0 bg-white z-20 shadow-md'>
+			<Link to='/' className='shrink-0'>
+				<img src='./logo.png' className='size-20' alt='Nisa Invest' />
+			</Link>
+			{isMobile ? (
+				<Sheet>
+					<SheetTrigger asChild>
+						<Button variant='outline' size='icon'>
+							<FaBars className='h-6 w-6' />
+						</Button>
+					</SheetTrigger>
+					<SheetContent side='right'>
+						<MobileNavItems
+							classNameValue={'flex-col gap-2'}
+							isLoggedIn={isLoggedIn}
+						/>
+					</SheetContent>
+				</Sheet>
+			) : (
+				<NavItems classNameValue='' isLoggedIn={isLoggedIn} />
+			)}
+		</header>
+	);
 }
 
 export default NavBar;

src/components/ProfileCard/ProfileCard.tsx

@@ -37,7 +37,7 @@ export const ProfileCard: React.FC<ProfileCardProps> = ({
 				</div>
 			</div>
 			<Button className='mt-4' variant='outline'>
-				<Link to={`/advisors/${bioPage}`}>Book My Session</Link>
+				<Link to={`/booking`}>Book My Session</Link>
 			</Button>
 		</div>
 	);

src/pages/Advisors/Advisors.tsx

@@ -11,7 +11,7 @@ import {
 	FaSeedling,
 } from 'react-icons/fa6';
 
-const stepsList: Step[] = [
+export const stepsList: Step[] = [
 	{
 		icon: FaCalendarCheck,
 		number: 1,

src/pages/Home/Home.tsx

@@ -1,17 +1,19 @@
-import CarouselQuote from '@/components/CarouselQuote/CarouselQuote';
 import { quotes } from '@/components/CarouselQuote/data';
 import { CarouselTestimonial } from '@/components/CarouselTestimonial/CarouselTestimonial';
 import { testimonials } from '@/components/CarouselTestimonial/Testimonials';
 import { ProfileCard } from '@/components/ProfileCard/ProfileCard';
 import fahanImage from '/fahan_square.jpg';
 import { Button } from '@/components/ui/button';
 import { Link } from 'react-router-dom';
+import CarouselStages from '@/components/CarouselStages/CarouselStages';
+import StepsCard from '@/components/StepsCard/StepsCard';
+import { stepsList } from '../Advisors/Advisors';
 
 function Home() {
 	return (
 		<main className='min-h-screen h-fit'>
 			{/* Section #1 */}
-			<div className='h-screen w-full bg-lilac flex flex-col items-center justify-around'>
+			<div className='h-screen w-full bg-lilac flex flex-col items-center justify-around px-8'>
 				<div className='max-w-[950px] flex flex-col justify-between gap-6'>
 					<div className='flex gap-4'>
 						<div>
@@ -41,11 +43,56 @@ function Home() {
 				</div>
 			</div>
 			{/* Section #2 */}
-			<div className='h-screen w-full bg-offWhite flex flex-col items-center justify-around'>
-				<CarouselQuote quotes={quotes} />
+			<div className='h-auto w-full bg-white flex flex-col items-center justify-around p-8'>
+				<blockquote className='border-lilac border-l-8 pl-4 max-w-xl space-y-4'>
+					<p>
+						Anas ibn Malik reported: A man said, “O Messenger of Allah, should I
+						tie my camel and trust in Allah, or should I leave her untied and
+						trust in Allah?” The Prophet, peace and blessings be upon him, said,
+						“Tie her and trust in Allah.”
+					</p>
+					<footer>– Sunan al-Tirmidhī 2517</footer>
+				</blockquote>
 			</div>
 			{/* Section #3 */}
-			<div className='h-screen w-full bg-offWhite flex flex-col items-center justify-around'>
+			<div className='min-h-screen w-full bg-offWhite flex items-center justify-around px-8'>
+				<div className='grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl pt-8 mx-auto items-center'>
+					<blockquote className='border-lilac border-l-8 pl-4 max-w-xl'>
+						<p>
+							“Salaam, I'm Fahan, founder of Nisa Invest. As we navigate life's
+							incredible milestones, managing our finances is a challenge we all
+							face. As a Muslim woman working in finance, I sought knowledge and
+							guidance from various sources to ensure my actions align with my
+							values. I realised this process needs to be simpler. It should
+							feel like having a conversation with someone who is genuinely
+							ready to help you.”
+						</p>
+					</blockquote>
+					<CarouselStages />
+				</div>
+			</div>
+			{/* Section #4 */}
+			<div className='min-h-screen w-full bg-offWhite flex flex-col items-center justify-center space-y-16 px-8'>
+				<div className='text-center space-y-2'>
+					<h2 className='text-3xl font-playfair font-bold'>How it works</h2>
+					<p className='text-xl'>
+						Bismillah, we will begin with a conversation, sister to sister
+					</p>
+				</div>
+				<div className='flex flex-col md:flex-row gap-3 justify-center'>
+					<StepsCard steps={stepsList} />
+				</div>
+				<blockquote className='border-lilac border-l-8 pl-4 max-w-xl'>
+					<p>
+						“With every Nisa Invest financial guidance session, a mangrove tree
+						is planted in our names. The tree planting operations provide
+						crucial income to local communities. May Allah accept it from us and
+						put barakah on our efforts, Ameen.”
+					</p>
+				</blockquote>
+			</div>
+			{/* Section #5 */}
+			<div className='h-screen w-full bg-offWhite flex flex-col items-center justify-around px-8'>
 				<ProfileCard
 					name='Fahan Ibrahim-Hashi'
 					position='Financial Advisor'