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 FeaturedRoadmaps from './FeaturedRoadmaps';
import MailingListDialog from './MailingListDialog';
import roadmaps from '../roadmaps.json';
import './Home.css'; // Import the custom CSS file
import React, { useState, useEffect, useRef } from "react";
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);
@ -14,11 +14,11 @@ const Home = () => {
(entries) => {
entries.forEach((entry) => {
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) => {
@ -49,7 +49,7 @@ const Home = () => {
};
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="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>
</h2>
<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>
<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"
@ -72,7 +73,11 @@ const Home = () => {
</button>
</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-lg" />
<img
src="/hero-logo.png"
alt="Tech illustration"
className="w-full max-w-md rounded-lg shadow-lg"
/>
</div>
</div>
@ -97,9 +102,13 @@ const Home = () => {
>
<h2 className="text-4xl font-bold mb-8">Join Our Community</h2>
<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>
<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
</button>
</div>
@ -111,3 +120,4 @@ const Home = () => {
};
export default Home;