This commit is contained in:
mike
commit
b3df1a50b5
2 changed files with 206 additions and 199 deletions
|
|
@ -14,5 +14,10 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src="https://unami.smigz.com/script.js"
|
||||||
|
data-website-id="e07c8f76-9786-4201-a47a-482fd9d485a9"
|
||||||
|
></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,200 +1,202 @@
|
||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import FeaturedRoadmaps from "./FeaturedRoadmaps";
|
import FeaturedRoadmaps from "./FeaturedRoadmaps";
|
||||||
import MailingListDialog from "./MailingListDialog";
|
import MailingListDialog from "./MailingListDialog";
|
||||||
import roadmaps from "../roadmaps.json";
|
import roadmaps from "../roadmaps.json";
|
||||||
import "./Home.css"; // Import the custom CSS file
|
import "./Home.css"; // Import the custom CSS file
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
const [menuOpen, setMenuOpen] = useState(false);
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
const sectionsRef = useRef([]);
|
const sectionsRef = useRef([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
entry.target.classList.add("animate-fade-in");
|
entry.target.classList.add("animate-fade-in");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
{ threshold: 0.1 },
|
{ threshold: 0.1 },
|
||||||
);
|
);
|
||||||
|
|
||||||
sectionsRef.current.forEach((section) => {
|
sectionsRef.current.forEach((section) => {
|
||||||
if (section) {
|
if (section) {
|
||||||
observer.observe(section);
|
observer.observe(section);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
sectionsRef.current.forEach((section) => {
|
sectionsRef.current.forEach((section) => {
|
||||||
if (section) {
|
if (section) {
|
||||||
observer.unobserve(section);
|
observer.unobserve(section);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleDialogOpen = () => {
|
const handleDialogOpen = () => {
|
||||||
setDialogOpen(true);
|
setDialogOpen(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDialogClose = () => {
|
const handleDialogClose = () => {
|
||||||
setDialogOpen(false);
|
setDialogOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleMenuToggle = (isOpen) => {
|
const handleMenuToggle = (isOpen) => {
|
||||||
setMenuOpen(isOpen);
|
setMenuOpen(isOpen);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
|
<div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section
|
<section
|
||||||
className="w-full py-16 md:py-24 bg-gradient-to-b from-dark-900 to-dark-800 text-white opacity-0"
|
className="w-full py-16 md:py-24 bg-gradient-to-b from-dark-900 to-dark-800 text-white opacity-0"
|
||||||
ref={(el) => (sectionsRef.current[0] = el)}
|
ref={(el) => (sectionsRef.current[0] = el)}
|
||||||
>
|
>
|
||||||
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-12">
|
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-12">
|
||||||
<div className="md:w-1/2 flex flex-col items-start">
|
<div className="md:w-1/2 flex flex-col items-start">
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
|
||||||
Pivot into <span className="text-primary-500">tech</span>
|
Pivot into <span className="text-primary-500">tech</span>
|
||||||
<br />
|
<br />
|
||||||
<span className="font-medium text-3xl md:text-4xl lg:text-5xl">with a head start</span>
|
<span className="font-medium text-3xl md:text-4xl lg:text-5xl">with a head start</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-gray-300 mb-8 max-w-lg">
|
<p className="text-lg text-gray-300 mb-8 max-w-lg">
|
||||||
Empowering minorities to overcome barriers and succeed in the tech
|
Empowering minorities to overcome barriers and succeed in the tech
|
||||||
industry with confidence and community support.
|
industry with confidence and community support.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-wrap gap-4">
|
<div className="flex flex-wrap gap-4">
|
||||||
<button
|
<button
|
||||||
className="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-lg transition-colors duration-300 transform hover:scale-105"
|
className="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-lg transition-colors duration-300 transform hover:scale-105"
|
||||||
onClick={handleDialogOpen}
|
onClick={handleDialogOpen}
|
||||||
>
|
data-umami-event="Start Today Button"
|
||||||
Start Your Journey
|
>
|
||||||
</button>
|
Start Your Journey
|
||||||
<Link
|
</button>
|
||||||
to="/roadmap"
|
<Link
|
||||||
className="px-6 py-3 bg-transparent border-2 border-primary-500 text-primary-400 font-medium rounded-lg hover:bg-primary-500/10 transition-colors duration-300"
|
to="/roadmap"
|
||||||
>
|
className="px-6 py-3 bg-transparent border-2 border-primary-500 text-primary-400 font-medium rounded-lg hover:bg-primary-500/10 transition-colors duration-300"
|
||||||
Explore Roadmaps
|
>
|
||||||
</Link>
|
Explore Roadmaps
|
||||||
</div>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-8 md:mt-0 md:w-1/2 flex justify-center">
|
</div>
|
||||||
<img
|
<div className="mt-8 md:mt-0 md:w-1/2 flex justify-center">
|
||||||
src="/hero-logo.png"
|
<img
|
||||||
alt="Tech illustration"
|
src="/hero-logo.png"
|
||||||
className="w-full max-w-md rounded-lg shadow-2xl transform hover:rotate-1 transition-transform duration-500"
|
alt="Tech illustration"
|
||||||
/>
|
className="w-full max-w-md rounded-lg shadow-2xl transform hover:rotate-1 transition-transform duration-500"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Features Section */}
|
|
||||||
<section
|
{/* Features Section */}
|
||||||
className="w-full py-16 bg-dark-800 text-white opacity-0"
|
<section
|
||||||
ref={(el) => (sectionsRef.current[1] = el)}
|
className="w-full py-16 bg-dark-800 text-white opacity-0"
|
||||||
>
|
ref={(el) => (sectionsRef.current[1] = el)}
|
||||||
<div className="container mx-auto px-6">
|
>
|
||||||
<div className="text-center mb-16">
|
<div className="container mx-auto px-6">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose Our Roadmaps</h2>
|
<div className="text-center mb-16">
|
||||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose Our Roadmaps</h2>
|
||||||
Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources.
|
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||||
</p>
|
Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<div className="text-primary-500 text-4xl mb-4">
|
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
<div className="text-primary-500 text-4xl mb-4">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
</svg>
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||||
</div>
|
</svg>
|
||||||
<h3 className="text-2xl font-bold mb-2">Curated Resources</h3>
|
</div>
|
||||||
<p className="text-gray-300">
|
<h3 className="text-2xl font-bold mb-2">Curated Resources</h3>
|
||||||
Hand-picked learning resources tested and approved by industry professionals.
|
<p className="text-gray-300">
|
||||||
</p>
|
Hand-picked learning resources tested and approved by industry professionals.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
|
||||||
<div className="text-primary-500 text-4xl mb-4">
|
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
<div className="text-primary-500 text-4xl mb-4">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
</svg>
|
<path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||||
</div>
|
</svg>
|
||||||
<h3 className="text-2xl font-bold mb-2">Community Support</h3>
|
</div>
|
||||||
<p className="text-gray-300">
|
<h3 className="text-2xl font-bold mb-2">Community Support</h3>
|
||||||
Join a community of like-minded individuals on similar journeys.
|
<p className="text-gray-300">
|
||||||
</p>
|
Join a community of like-minded individuals on similar journeys.
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
|
||||||
<div className="text-primary-500 text-4xl mb-4">
|
<div className="bg-dark-700 p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
<div className="text-primary-500 text-4xl mb-4">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
</svg>
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
</div>
|
</svg>
|
||||||
<h3 className="text-2xl font-bold mb-2">Clear Progression</h3>
|
</div>
|
||||||
<p className="text-gray-300">
|
<h3 className="text-2xl font-bold mb-2">Clear Progression</h3>
|
||||||
Step-by-step guidance from basics to advanced topics with practical challenges.
|
<p className="text-gray-300">
|
||||||
</p>
|
Step-by-step guidance from basics to advanced topics with practical challenges.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Featured Roadmaps Section */}
|
|
||||||
<section
|
{/* Featured Roadmaps Section */}
|
||||||
className="w-full py-16 bg-gradient-to-b from-dark-800 to-dark-700 text-white opacity-0"
|
<section
|
||||||
ref={(el) => (sectionsRef.current[2] = el)}
|
className="w-full py-16 bg-gradient-to-b from-dark-800 to-dark-700 text-white opacity-0"
|
||||||
>
|
ref={(el) => (sectionsRef.current[2] = el)}
|
||||||
<FeaturedRoadmaps roadmaps={roadmaps} />
|
>
|
||||||
</section>
|
<FeaturedRoadmaps roadmaps={roadmaps} />
|
||||||
|
</section>
|
||||||
{/* Testimonials (Coming Soon) */}
|
|
||||||
<section
|
{/* Testimonials (Coming Soon) */}
|
||||||
className="w-full py-16 bg-dark-700 text-white opacity-0"
|
<section
|
||||||
ref={(el) => (sectionsRef.current[3] = el)}
|
className="w-full py-16 bg-dark-700 text-white opacity-0"
|
||||||
>
|
ref={(el) => (sectionsRef.current[3] = el)}
|
||||||
<div className="container mx-auto px-6 text-center">
|
>
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-8">Success Stories</h2>
|
<div className="container mx-auto px-6 text-center">
|
||||||
<div className="bg-dark-600 p-8 rounded-xl shadow-lg max-w-2xl mx-auto">
|
<h2 className="text-3xl md:text-4xl font-bold mb-8">Success Stories</h2>
|
||||||
<p className="text-xl italic mb-6">
|
<div className="bg-dark-600 p-8 rounded-xl shadow-lg max-w-2xl mx-auto">
|
||||||
"Testimonials from our successful community members coming soon... Join us and become one of our success stories!"
|
<p className="text-xl italic mb-6">
|
||||||
</p>
|
"Testimonials from our successful community members coming soon... Join us and become one of our success stories!"
|
||||||
<div className="flex justify-center">
|
</p>
|
||||||
<Link to="/about" className="text-primary-400 hover:text-primary-300 transition-colors font-medium">
|
<div className="flex justify-center">
|
||||||
Learn more about our mission →
|
<Link to="/about" className="text-primary-400 hover:text-primary-300 transition-colors font-medium">
|
||||||
</Link>
|
Learn more about our mission →
|
||||||
</div>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</section>
|
||||||
{/* Call to Action */}
|
|
||||||
<section
|
{/* Call to Action */}
|
||||||
className="w-full py-16 bg-gradient-to-b from-dark-700 to-dark-900 text-white opacity-0"
|
<section
|
||||||
ref={(el) => (sectionsRef.current[4] = el)}
|
className="w-full py-16 bg-gradient-to-b from-dark-700 to-dark-900 text-white opacity-0"
|
||||||
>
|
ref={(el) => (sectionsRef.current[4] = el)}
|
||||||
<div className="container mx-auto px-6 text-center">
|
>
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Start Your Tech Journey?</h2>
|
<div className="container mx-auto px-6 text-center">
|
||||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">Ready to Start Your Tech Journey?</h2>
|
||||||
Join our community today and get access to all our roadmaps, resources, and supportive network.
|
<p className="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
|
||||||
</p>
|
Join our community today and get access to all our roadmaps, resources, and supportive network.
|
||||||
<button
|
</p>
|
||||||
onClick={handleDialogOpen}
|
<button
|
||||||
className="px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white text-lg font-medium rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105"
|
onClick={handleDialogOpen}
|
||||||
>
|
className="px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white text-lg font-medium rounded-lg shadow-lg transition-all duration-300 transform hover:scale-105"
|
||||||
Join Our Community
|
data-umami-event="Join Now Button"
|
||||||
</button>
|
>
|
||||||
</div>
|
Join Our Community
|
||||||
</section>
|
</button>
|
||||||
|
</div>
|
||||||
<MailingListDialog open={dialogOpen} onClose={handleDialogClose} />
|
</section>
|
||||||
</div>
|
|
||||||
);
|
<MailingListDialog open={dialogOpen} onClose={handleDialogClose} />
|
||||||
};
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
Loading…
Add table
Reference in a new issue