dotechbro/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: dialog on join now btn
All checks were successful
Build and Deploy Docker Image / build (push) Successful in 41s
Details

Browse source
This commit is contained in:
Mike 2024-10-22 10:22:34 -04:00
parent 258d1e77c4
commit 2a25618be6
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/Home.jsx
View file

@ -1,8 +1,8 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
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);
@ -14,11 +14,11 @@ const Home = () => {
(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) => {
@ -49,7 +49,7 @@ const Home = () => {
}; };
return ( return (
<div className={`page-content ${menuOpen ? 'dropdown-active' : ''}`}> <div className={`page-content ${menuOpen ? "dropdown-active" : ""}`}>
<div className="flex flex-col items-center justify-center w-full"> <div className="flex flex-col items-center justify-center w-full">
<div <div
className="w-full p-8 flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 opacity-0" className="w-full p-8 flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 opacity-0"
@ -62,7 +62,8 @@ const Home = () => {
<span className="font-semibold">with a head start</span> <span className="font-semibold">with a head start</span>
</h2> </h2>
<p className="mt-4 text-lg max-w-2xl"> <p className="mt-4 text-lg max-w-2xl">
Empowering minorities to overcome barriers and succeed in the tech industry with confidence. Empowering minorities to overcome barriers and succeed in the tech
industry with confidence.
</p> </p>
<button <button
className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300" className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300"
@ -72,7 +73,11 @@ const Home = () => {
</button> </button>
</div> </div>
<div className="mt-8 md:mt-0 md:w-1/2 flex justify-center"> <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-lg" /> <img
src="/hero-logo.png"
alt="Tech illustration"
className="w-full max-w-md rounded-lg shadow-lg"
/>
</div> </div>
</div> </div>
@ -97,9 +102,13 @@ const Home = () => {
> >
<h2 className="text-4xl font-bold mb-8">Join Our Community</h2> <h2 className="text-4xl font-bold mb-8">Join Our Community</h2>
<p className="text-lg max-w-2xl mx-auto"> <p className="text-lg max-w-2xl mx-auto">
Connect with like-minded individuals, share your journey, and get support from our community. Connect with like-minded individuals, share your journey, and get
support from our community.
</p> </p>
<button className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300"> <button
onClick={handleDialogOpen}
className="mt-8 px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300"
>
Join Now Join Now
</button> </button>
</div> </div>
@ -111,3 +120,4 @@ const Home = () => {
}; };
export default Home; export default Home;