diff --git a/index.html b/index.html index 9e81bd6..8475459 100644 --- a/index.html +++ b/index.html @@ -14,5 +14,10 @@
+ diff --git a/src/components/Home.jsx b/src/components/Home.jsx index cd8040c..45fd0d0 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -1,200 +1,202 @@ -import React, { useState, useEffect, useRef } from "react"; -import { Link } from "react-router-dom"; -import FeaturedRoadmaps from "./FeaturedRoadmaps"; -import MailingListDialog from "./MailingListDialog"; -import roadmaps from "../roadmaps.json"; -import "./Home.css"; // Import the custom CSS file - -const Home = () => { - const [dialogOpen, setDialogOpen] = useState(false); - const [menuOpen, setMenuOpen] = useState(false); - const sectionsRef = useRef([]); - - useEffect(() => { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - entry.target.classList.add("animate-fade-in"); - } - }); - }, - { threshold: 0.1 }, - ); - - sectionsRef.current.forEach((section) => { - if (section) { - observer.observe(section); - } - }); - - return () => { - sectionsRef.current.forEach((section) => { - if (section) { - observer.unobserve(section); - } - }); - }; - }, []); - - const handleDialogOpen = () => { - setDialogOpen(true); - }; - - const handleDialogClose = () => { - setDialogOpen(false); - }; - - const handleMenuToggle = (isOpen) => { - setMenuOpen(isOpen); - }; - - return ( -
- {/* Hero Section */} -
(sectionsRef.current[0] = el)} - > -
-
-

- Pivot into tech -
- with a head start -

-

- Empowering minorities to overcome barriers and succeed in the tech - industry with confidence and community support. -

-
- - - Explore Roadmaps - -
-
-
- Tech illustration -
-
-
- - {/* Features Section */} -
(sectionsRef.current[1] = el)} - > -
-
-

Why Choose Our Roadmaps

-

- Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources. -

-
- -
-
-
- - - -
-

Curated Resources

-

- Hand-picked learning resources tested and approved by industry professionals. -

-
- -
-
- - - -
-

Community Support

-

- Join a community of like-minded individuals on similar journeys. -

-
- -
-
- - - -
-

Clear Progression

-

- Step-by-step guidance from basics to advanced topics with practical challenges. -

-
-
-
-
- - {/* Featured Roadmaps Section */} -
(sectionsRef.current[2] = el)} - > - -
- - {/* Testimonials (Coming Soon) */} -
(sectionsRef.current[3] = el)} - > -
-

Success Stories

-
-

- "Testimonials from our successful community members coming soon... Join us and become one of our success stories!" -

-
- - Learn more about our mission → - -
-
-
-
- - {/* Call to Action */} -
(sectionsRef.current[4] = el)} - > -
-

Ready to Start Your Tech Journey?

-

- Join our community today and get access to all our roadmaps, resources, and supportive network. -

- -
-
- - -
- ); -}; - +import React, { useState, useEffect, useRef } from "react"; +import { Link } from "react-router-dom"; +import FeaturedRoadmaps from "./FeaturedRoadmaps"; +import MailingListDialog from "./MailingListDialog"; +import roadmaps from "../roadmaps.json"; +import "./Home.css"; // Import the custom CSS file + +const Home = () => { + const [dialogOpen, setDialogOpen] = useState(false); + const [menuOpen, setMenuOpen] = useState(false); + const sectionsRef = useRef([]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("animate-fade-in"); + } + }); + }, + { threshold: 0.1 }, + ); + + sectionsRef.current.forEach((section) => { + if (section) { + observer.observe(section); + } + }); + + return () => { + sectionsRef.current.forEach((section) => { + if (section) { + observer.unobserve(section); + } + }); + }; + }, []); + + const handleDialogOpen = () => { + setDialogOpen(true); + }; + + const handleDialogClose = () => { + setDialogOpen(false); + }; + + const handleMenuToggle = (isOpen) => { + setMenuOpen(isOpen); + }; + + return ( +
+ {/* Hero Section */} +
(sectionsRef.current[0] = el)} + > +
+
+

+ Pivot into tech +
+ with a head start +

+

+ Empowering minorities to overcome barriers and succeed in the tech + industry with confidence and community support. +

+
+ + + Explore Roadmaps + +
+
+
+ Tech illustration +
+
+
+ + {/* Features Section */} +
(sectionsRef.current[1] = el)} + > +
+
+

Why Choose Our Roadmaps

+

+ Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources. +

+
+ +
+
+
+ + + +
+

Curated Resources

+

+ Hand-picked learning resources tested and approved by industry professionals. +

+
+ +
+
+ + + +
+

Community Support

+

+ Join a community of like-minded individuals on similar journeys. +

+
+ +
+
+ + + +
+

Clear Progression

+

+ Step-by-step guidance from basics to advanced topics with practical challenges. +

+
+
+
+
+ + {/* Featured Roadmaps Section */} +
(sectionsRef.current[2] = el)} + > + +
+ + {/* Testimonials (Coming Soon) */} +
(sectionsRef.current[3] = el)} + > +
+

Success Stories

+
+

+ "Testimonials from our successful community members coming soon... Join us and become one of our success stories!" +

+
+ + Learn more about our mission → + +
+
+
+
+ + {/* Call to Action */} +
(sectionsRef.current[4] = el)} + > +
+

Ready to Start Your Tech Journey?

+

+ Join our community today and get access to all our roadmaps, resources, and supportive network. +

+ +
+
+ + +
+ ); +}; + export default Home; \ No newline at end of file