diff --git a/public/stage1.jpg b/public/stage1.jpg new file mode 100644 index 0000000..de9ca56 Binary files /dev/null and b/public/stage1.jpg differ diff --git a/public/stage2.jpg b/public/stage2.jpg new file mode 100644 index 0000000..c2c6bb2 Binary files /dev/null and b/public/stage2.jpg differ diff --git a/public/stage3.jpg b/public/stage3.jpg new file mode 100644 index 0000000..a7f515e Binary files /dev/null and b/public/stage3.jpg differ diff --git a/public/stage4.jpg b/public/stage4.jpg new file mode 100644 index 0000000..c510d8c Binary files /dev/null and b/public/stage4.jpg differ diff --git a/public/stage5.png b/public/stage5.png new file mode 100644 index 0000000..d247d7b Binary files /dev/null and b/public/stage5.png differ diff --git a/src/AuthContext.tsx b/src/AuthContext.tsx index cd19780..0ca4122 100644 --- a/src/AuthContext.tsx +++ b/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>; + isLoggedIn: boolean; + setIsLoggedIn: React.Dispatch>; + userId: string | number; + setUserId: React.Dispatch>; } const AuthContext = createContext(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 ( - - {children} - - ); + return ( + + {children} + + ); }; export const useAuth = () => { - const context = useContext(AuthContext); - if (context === undefined) { - throw new Error('useAuth must be used within an AuthProvider'); - } - return context; -}; \ No newline at end of file + const context = useContext(AuthContext); + if (context === undefined) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +}; diff --git a/src/components/CarouselStages/CarouselStages.tsx b/src/components/CarouselStages/CarouselStages.tsx new file mode 100644 index 0000000..010967c --- /dev/null +++ b/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 ( +
+
    + {stages.map((stage, index: number) => ( +
  • +
    + +
    {stage.caption}
    +
    +
    • + ))} +
+
+ ); +} + +export default CarouselStages; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index b6b752d..9ed3de8 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -5,7 +5,7 @@ import { SocialIcon } from 'react-social-icons'; export function Footer() { return ( -
+
{/* Social Media Section */}
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index de48b5e..54b7e34 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/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 ( -
- - Nisa Invest - - {isMobile ? ( - - - - - - - - - ) : ( - - )} -
- ); + return ( +
+ + Nisa Invest + + {isMobile ? ( + + + + + + + + + ) : ( + + )} +
+ ); } export default NavBar; diff --git a/src/components/ProfileCard/ProfileCard.tsx b/src/components/ProfileCard/ProfileCard.tsx index d0ba41b..f8ff624 100644 --- a/src/components/ProfileCard/ProfileCard.tsx +++ b/src/components/ProfileCard/ProfileCard.tsx @@ -37,7 +37,7 @@ export const ProfileCard: React.FC = ({
); diff --git a/src/pages/Advisors/Advisors.tsx b/src/pages/Advisors/Advisors.tsx index e43ab88..0f398ec 100644 --- a/src/pages/Advisors/Advisors.tsx +++ b/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, diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 6b93d38..03d291e 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -1,4 +1,3 @@ -import CarouselQuote from '@/components/CarouselQuote/CarouselQuote'; import { quotes } from '@/components/CarouselQuote/data'; import { CarouselTestimonial } from '@/components/CarouselTestimonial/CarouselTestimonial'; import { testimonials } from '@/components/CarouselTestimonial/Testimonials'; @@ -6,12 +5,15 @@ 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 (
{/* Section #1 */} -
+
@@ -41,11 +43,56 @@ function Home() {
{/* Section #2 */} -
- +
+
+

+ 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.” +

+
– Sunan al-Tirmidhī 2517
+
{/* Section #3 */} -
+
+
+
+

+ “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.” +

+
+ +
+
+ {/* Section #4 */} +
+
+

How it works

+

+ Bismillah, we will begin with a conversation, sister to sister +

+
+
+ +
+
+

+ “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.” +

+
+
+ {/* Section #5 */} +