This commit is contained in:
mike
commit
b3df1a50b5
2 changed files with 206 additions and 199 deletions
|
|
@ -14,5 +14,10 @@
|
|||
<body>
|
||||
<div id="root"></div>
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
|
||||
{/* Hero Section */}
|
||||
<section
|
||||
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)}
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
<br />
|
||||
<span className="font-medium text-3xl md:text-4xl lg:text-5xl">with a head start</span>
|
||||
</h1>
|
||||
<p className="text-lg text-gray-300 mb-8 max-w-lg">
|
||||
Empowering minorities to overcome barriers and succeed in the tech
|
||||
industry with confidence and community support.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<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"
|
||||
onClick={handleDialogOpen}
|
||||
>
|
||||
Start Your Journey
|
||||
</button>
|
||||
<Link
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 md:mt-0 md:w-1/2 flex justify-center">
|
||||
<img
|
||||
src="/hero-logo.png"
|
||||
alt="Tech illustration"
|
||||
className="w-full max-w-md rounded-lg shadow-2xl transform hover:rotate-1 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section
|
||||
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">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose Our Roadmaps</h2>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||
Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources.
|
||||
</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="text-primary-500 text-4xl mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Curated Resources</h3>
|
||||
<p className="text-gray-300">
|
||||
Hand-picked learning resources tested and approved by industry professionals.
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Community Support</h3>
|
||||
<p className="text-gray-300">
|
||||
Join a community of like-minded individuals on similar journeys.
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Clear Progression</h3>
|
||||
<p className="text-gray-300">
|
||||
Step-by-step guidance from basics to advanced topics with practical challenges.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Roadmaps Section */}
|
||||
<section
|
||||
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>
|
||||
|
||||
{/* Testimonials (Coming Soon) */}
|
||||
<section
|
||||
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="bg-dark-600 p-8 rounded-xl shadow-lg max-w-2xl mx-auto">
|
||||
<p className="text-xl italic mb-6">
|
||||
"Testimonials from our successful community members coming soon... Join us and become one of our success stories!"
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<Link to="/about" className="text-primary-400 hover:text-primary-300 transition-colors font-medium">
|
||||
Learn more about our mission →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section
|
||||
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>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
|
||||
Join our community today and get access to all our roadmaps, resources, and supportive network.
|
||||
</p>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MailingListDialog open={dialogOpen} onClose={handleDialogClose} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
|
||||
{/* Hero Section */}
|
||||
<section
|
||||
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)}
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
<br />
|
||||
<span className="font-medium text-3xl md:text-4xl lg:text-5xl">with a head start</span>
|
||||
</h1>
|
||||
<p className="text-lg text-gray-300 mb-8 max-w-lg">
|
||||
Empowering minorities to overcome barriers and succeed in the tech
|
||||
industry with confidence and community support.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<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"
|
||||
onClick={handleDialogOpen}
|
||||
data-umami-event="Start Today Button"
|
||||
>
|
||||
Start Your Journey
|
||||
</button>
|
||||
<Link
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 md:mt-0 md:w-1/2 flex justify-center">
|
||||
<img
|
||||
src="/hero-logo.png"
|
||||
alt="Tech illustration"
|
||||
className="w-full max-w-md rounded-lg shadow-2xl transform hover:rotate-1 transition-transform duration-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section
|
||||
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">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose Our Roadmaps</h2>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto">
|
||||
Our carefully designed roadmaps will guide you through your tech journey with clear steps and resources.
|
||||
</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="text-primary-500 text-4xl mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Curated Resources</h3>
|
||||
<p className="text-gray-300">
|
||||
Hand-picked learning resources tested and approved by industry professionals.
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Community Support</h3>
|
||||
<p className="text-gray-300">
|
||||
Join a community of like-minded individuals on similar journeys.
|
||||
</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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<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>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold mb-2">Clear Progression</h3>
|
||||
<p className="text-gray-300">
|
||||
Step-by-step guidance from basics to advanced topics with practical challenges.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Roadmaps Section */}
|
||||
<section
|
||||
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>
|
||||
|
||||
{/* Testimonials (Coming Soon) */}
|
||||
<section
|
||||
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="bg-dark-600 p-8 rounded-xl shadow-lg max-w-2xl mx-auto">
|
||||
<p className="text-xl italic mb-6">
|
||||
"Testimonials from our successful community members coming soon... Join us and become one of our success stories!"
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<Link to="/about" className="text-primary-400 hover:text-primary-300 transition-colors font-medium">
|
||||
Learn more about our mission →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section
|
||||
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>
|
||||
<p className="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
|
||||
Join our community today and get access to all our roadmaps, resources, and supportive network.
|
||||
</p>
|
||||
<button
|
||||
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"
|
||||
data-umami-event="Join Now Button"
|
||||
>
|
||||
Join Our Community
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<MailingListDialog open={dialogOpen} onClose={handleDialogClose} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Loading…
Add table
Reference in a new issue