(sectionsRef.current[1] = el)}
- >
-
+ {/* 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.
+
+
+
-
(sectionsRef.current[2] = el)}
- >
-
Testimonials
-
Coming soon...
+ {/* 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!"
+
+
+
+
-
(sectionsRef.current[3] = el)}
- >
-
Join Our Community
-
- Connect with like-minded individuals, share your journey, and get
- support from our community.
+ {/* 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.
- Join Now
+ Join Our Community
-
+
);
};
-export default Home;
-
+export default Home;
\ No newline at end of file
diff --git a/src/components/MailingListDialog.jsx b/src/components/MailingListDialog.jsx
index b1340c8..73191a8 100644
--- a/src/components/MailingListDialog.jsx
+++ b/src/components/MailingListDialog.jsx
@@ -6,6 +6,50 @@ import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+// Create a custom theme that matches our design system
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#22c55e', // primary-600 color
+ },
+ secondary: {
+ main: '#6366f1', // secondary-500 color
+ },
+ background: {
+ default: '#0f172a', // dark-900 color
+ paper: '#1e293b', // dark-800 color
+ },
+ text: {
+ primary: '#f8fafc',
+ secondary: '#94a3b8',
+ },
+ },
+ typography: {
+ fontFamily: 'Inter, system-ui, sans-serif',
+ },
+ shape: {
+ borderRadius: 8,
+ },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: {
+ textTransform: 'none',
+ fontWeight: 500,
+ },
+ },
+ },
+ MuiDialog: {
+ styleOverrides: {
+ paper: {
+ borderRadius: 12,
+ },
+ },
+ },
+ },
+});
const MailingListDialog = ({ open, onClose }) => {
const [name, setName] = useState("");
@@ -18,6 +62,19 @@ const MailingListDialog = ({ open, onClose }) => {
setError("");
setSuccess("");
+ // Basic validation
+ if (!name.trim() || !email.trim()) {
+ setError("Please fill in all fields");
+ return;
+ }
+
+ // Email validation
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ if (!emailRegex.test(email)) {
+ setError("Please enter a valid email address");
+ return;
+ }
+
const form = document.createElement("form");
form.action = "https://tech.us9.list-manage.com/subscribe/post";
form.method = "POST";
@@ -45,63 +102,141 @@ const MailingListDialog = ({ open, onClose }) => {
setSuccess("Thank you for subscribing!");
setName("");
setEmail("");
- onClose();
+
+ // Close the dialog after a short delay to allow user to see the success message
+ setTimeout(() => {
+ onClose();
+ }, 1500);
};
return (
-
- Join Our Mailing List
-
-
- Stay updated with the latest news and updates from Do Tech Bro.
-
- setName(e.target.value)}
- />
- setEmail(e.target.value)}
- />
-
- We promise not to sell your information or email you more than once or
- twice a month.
-
- {error && (
-
- {error}
+
+
+
+ Join Our Community
+
+
+
+
+ Get exclusive access to roadmaps, resources, and updates to accelerate your tech journey.
- )}
- {success && (
-
- {success}
+
+ setName(e.target.value)}
+ sx={{
+ mb: 2,
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'rgba(148, 163, 184, 0.2)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'primary.main',
+ },
+ },
+ '& .MuiInputLabel-root': {
+ color: 'text.secondary',
+ },
+ '& .MuiInputBase-input': {
+ color: 'text.primary',
+ }
+ }}
+ />
+
+ setEmail(e.target.value)}
+ sx={{
+ mb: 2,
+ '& .MuiOutlinedInput-root': {
+ '& fieldset': {
+ borderColor: 'rgba(148, 163, 184, 0.2)',
+ },
+ '&:hover fieldset': {
+ borderColor: 'primary.main',
+ },
+ },
+ '& .MuiInputLabel-root': {
+ color: 'text.secondary',
+ },
+ '& .MuiInputBase-input': {
+ color: 'text.primary',
+ }
+ }}
+ />
+
+
+ We promise not to sell your information or email you more than once or
+ twice a month.
- )}
-
-
-
- Cancel
-
-
- Subscribe
-
-
-
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {success && (
+
+ {success}
+
+ )}
+
+
+
+
+ Cancel
+
+
+
+ Subscribe
+
+
+
+
);
};
-export default MailingListDialog;
-
+export default MailingListDialog;
\ No newline at end of file
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
index 0093105..79a7d3e 100644
--- a/src/components/NotFound.jsx
+++ b/src/components/NotFound.jsx
@@ -1,15 +1,47 @@
import { Link } from 'react-router-dom';
const NotFound = () => {
- return (
-
-
404
-
Oops! The page you're looking for doesn't exist.
-
- Go Back Home
-
+ return (
+
+
+
404
+
+
Page Not Found
+
+
+ Oops! The page you're looking for doesn't exist or has been moved to a different location.
+
+
+
+
- );
+
+
+
+
+ );
};
export default NotFound;
\ No newline at end of file
diff --git a/src/components/Roadmap.jsx b/src/components/Roadmap.jsx
index 4d26941..73c9cdd 100644
--- a/src/components/Roadmap.jsx
+++ b/src/components/Roadmap.jsx
@@ -1,61 +1,145 @@
import { Outlet, useLocation, Link } from 'react-router-dom';
import challenges from '../challenges';
-import roadmaps from '../roadmaps.json'; // Import the roadmaps data
-import Accordion from './Accordion'; // Import the Accordion component
+import roadmaps from '../roadmaps.json';
+import Accordion from './Accordion';
const Roadmap = () => {
- const location = useLocation();
- const isRootPath = location.pathname === '/roadmap';
+ const location = useLocation();
+ const isRootPath = location.pathname === '/roadmap';
- return (
-
-
- Roadmaps
-
-
- Dive into our comprehensive roadmaps designed to illuminate your path into the tech industry. Each roadmap offers step-by-step guidance, tailored resources, and practical tips to help you navigate challenges and seize opportunities. Whether you’re just starting out or looking to advance your career, these roadmaps are your essential tools for success. Let’s chart your course together!
-
+ return (
+
+ {isRootPath ? (
+ <>
+ {/* Hero Section */}
+
+
+
+
Tech Career Roadmaps
+
+ Structured pathways to help you navigate your journey into tech, with step-by-step guidance
+ and curated resources tailored for minorities entering the industry.
+
+
+
+
- {isRootPath && (
- <>
-
+ {/* Challenges Section */}
+
+
+
+
Common Challenges
+
+ We understand the unique obstacles minorities face when entering tech.
+ Here's how our roadmaps address these challenges.
+
+
+
+
-
-
-
Available Roadmaps
-
- {roadmaps.map((roadmap, index) => (
-
-
{roadmap.title}
-
{roadmap.description}
-
- ))}
-
+ {/* Roadmaps Section */}
+
+
+
Available Roadmaps
+
+ Select a roadmap that aligns with your interests and goals. Each provides a clear path
+ from beginner to professional.
+
+
+
+ {roadmaps.map((roadmap, index) => (
+
+
+
+
+ {roadmap.title}
+
+
{roadmap.description}
+
+ {['Beginner-Friendly', 'Step-by-Step', 'Resource Links'].map((tag, i) => (
+
+ {tag}
+
+ ))}
+
-
-
-
More Roadmaps Coming Soon
-
- We’re excited to share that we’re actively developing additional roadmaps to guide you on your tech journey. These resources are designed to empower you, providing clear paths and actionable steps tailored to your goals. Keep an eye out for updates—your future in tech is bright, and we’re here to support you every step of the way!
-
+
+
+ ))}
+
+
+
-
-
Open Source Collaboration
-
- These roadmaps are open source and we welcome collaboration from the community. Feel free to contribute and help us improve these resources.
-
-
- Contribute Now
-
+ {/* Coming Soon Section */}
+
+
+
+
More Roadmaps Coming Soon
+
+
+
+ We're actively developing additional roadmaps for various tech roles including:
+
+
+ Cloud Engineering
+ Machine Learning & AI
+ Product Management
+ Cybersecurity
+ Mobile App Development
+
+
+ Subscribe to our newsletter to get notified when new roadmaps are released.
+
+
+
+
+
+
- {!isRootPath &&
}
-
- );
+ {/* Contribute Section */}
+
+
+
Open Source Collaboration
+
+ These roadmaps are open source and we welcome contributions from the community.
+ Help us improve these resources for everyone.
+
+
+
+ Contribute on GitHub
+
+
+
+
+ ) : (
+
+ )}
+
-
Roadmap Detail: {id}
-
Details for roadmap {id} will be displayed here.
-
+
Roadmap Not Found
+
We couldn't find the roadmap you're looking for.
+
+ View All Roadmaps
+
+
Welcome to your tech journey! This first phase is all about building a solid foundation. You'll get familiar with key concepts, tools, and start building habits that will serve you throughout your career.
+ Key Objectives:
+
+ Understand the field and career opportunities
+ Set up your development environment
+ Learn the fundamental concepts
+ Build your first small projects
+
+ `,
+ resources: [
+ { title: "Free Code Camp", url: "https://www.freecodecamp.org/" },
+ { title: "The Odin Project", url: "https://www.theodinproject.com/" },
+ { title: "MDN Web Docs", url: "https://developer.mozilla.org/" }
+ ]
+ },
+ {
+ title: "Building Skills",
+ description: "Develop core technical skills and start working on meaningful projects.",
+ content: `
+ Now that you have the basics down, it's time to deepen your knowledge and start applying what you've learned to more complex problems and projects.
+ Key Objectives:
+
+ Master core programming concepts
+ Learn industry-standard tools and frameworks
+ Build a portfolio of projects
+ Practice problem-solving skills
+
+ `,
+ resources: [
+ { title: "LeetCode", url: "https://leetcode.com/" },
+ { title: "GitHub Learning Lab", url: "https://lab.github.com/" },
+ { title: "Codecademy", url: "https://www.codecademy.com/" }
+ ]
+ },
+ {
+ title: "Professional Development",
+ description: "Prepare for the job market and develop professional skills.",
+ content: `
+ Technical skills are just one part of a successful tech career. In this phase, you'll focus on the professional aspects of working in tech and prepare for your job search.
+ Key Objectives:
+
+ Create a professional resume and online presence
+ Develop interview skills (technical and behavioral)
+ Build your network and find mentors
+ Learn about industry practices and workflows
+
+ `,
+ resources: [
+ { title: "Tech Interview Handbook", url: "https://www.techinterviewhandbook.org/" },
+ { title: "LinkedIn Learning", url: "https://www.linkedin.com/learning/" },
+ { title: "AngelList", url: "https://angel.co/jobs" }
+ ]
+ },
+ {
+ title: "Landing Your First Role",
+ description: "Strategies for job searching and excelling in your first position.",
+ content: `
+ This is where all your hard work comes together. You'll apply for jobs, go through interviews, and start your professional journey in tech.
+ Key Objectives:
+
+ Develop an effective job search strategy
+ Prepare for technical and behavioral interviews
+ Evaluate job offers and negotiate compensation
+ Plan for success in your first 90 days
+
+ `,
+ resources: [
+ { title: "Hired", url: "https://hired.com/" },
+ { title: "Glassdoor", url: "https://www.glassdoor.com/" },
+ { title: "Blind", url: "https://www.teamblind.com/" }
+ ]
+ }
+ ];
+
+ return (
+
+ {/* Roadmap Header */}
+
+
+
+
+ Back to Roadmaps
+
+
{roadmap.title}
+
{roadmap.description}
+
+
+ {/* Progress Indicator */}
+
+
+
+
+ {steps.map((step, index) => (
+ setActiveStep(index)}
+ className={`flex items-center justify-center w-12 h-12 rounded-full text-lg font-bold ${
+ index === activeStep
+ ? 'bg-primary-500 text-white shadow-lg'
+ : index < activeStep
+ ? 'bg-primary-800 text-primary-200'
+ : 'bg-dark-600 text-gray-400'
+ } transition-all duration-300`}
+ >
+ {index + 1}
+
+ ))}
+
+
+
+ {steps.map((step, index) => (
+
+
{step.title}
+
+ ))}
+
+
+
+ {/* Active Step Content */}
+
+
+
+
{steps[activeStep].title}
+
{steps[activeStep].description}
+
+
+
+
+
Recommended Resources
+
+
+
+
+
+
+ {/* Navigation Buttons */}
+
+
setActiveStep(Math.max(0, activeStep - 1))}
+ disabled={activeStep === 0}
+ className={`flex items-center px-6 py-3 rounded-lg transition-colors ${
+ activeStep === 0
+ ? 'bg-dark-700 text-gray-500 cursor-not-allowed'
+ : 'bg-dark-700 hover:bg-dark-600 text-white'
+ }`}
+ >
+
+
+ Previous Step
+
+
+
setActiveStep(Math.min(steps.length - 1, activeStep + 1))}
+ disabled={activeStep === steps.length - 1}
+ className={`flex items-center px-6 py-3 rounded-lg transition-colors ${
+ activeStep === steps.length - 1
+ ? 'bg-dark-700 text-gray-500 cursor-not-allowed'
+ : 'bg-primary-600 hover:bg-primary-700 text-white'
+ }`}
+ >
+ Next Step
+
+
+
+
+
+ {/* Community Support Section */}
+
+
Need Support?
+
+ Join our community to connect with mentors and peers who are on similar journeys.
+ Get answers to your questions and share your progress.
+
+
+ Join Our Community
+
+
+