Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card Styling Updated issue no #54 Resolved #97

Merged
merged 1 commit into from
Oct 6, 2024
Merged

Card Styling Updated issue no #54 Resolved #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 77 additions & 60 deletions src/components/Homepage/GetInvolvedSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,108 +17,125 @@ const GetInvolvedSection: React.FC = () => {
</p>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Hackathons
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Participate in our hackathons to showcase your skills and win
exciting prizes!
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>


<div className=" flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Hackathons
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Participate in our hackathons to showcase your skills and win exciting prizes!
</p>
{/* Center the button */}
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>

<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">

<div className=" flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Workshops
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Join our workshops to learn about the latest technologies and best
practices in software development.
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>

{/* Event 3 */}
<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Community Meetups
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Connect with fellow contributors and share ideas at our regular
community meetups.
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>

{/* Event 4 */}
<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Mentorship Programs
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Sign up for our mentorship programs to get guidance from
experienced developers in the industry.
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>

{/* Event 5 */}
<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Online Courses
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Enroll in our online courses to gain valuable skills and
certifications.
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>
{/* Event 5 */}
<div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Online Courses
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Enroll in our online courses to gain valuable skills and certifications.
</p>
{/* Center the button */}
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>


<div className="relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<div className="flex flex-col justify-between relative bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105 duration-300">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
Open Source Contributions
</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">
Contribute to our project and enhance your coding skills while
making a positive impact!
</p>
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
<div className="flex justify-center">
<Link
to="#"
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition hover:bg-blue-700"
>
Learn More
</Link>
</div>
<div className="absolute inset-0 bg-blue-100 opacity-30 rounded-lg"></div>
</div>
</div>
Expand Down
35 changes: 20 additions & 15 deletions src/components/Homepage/PopularAlgorithmsSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,33 +47,38 @@ const PopularAlgorithmsSection: React.FC = () => {
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{algorithms.map((algorithm, index) => (
<motion.div
key={index}
className="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-2xl hover:bg-[#3b82f6] cursor-pointer group" // Added cursor-pointer
initial={{ scale: 1 }}
whileHover={{ scale: 1.05 }} // Scale on hover
whileTap={{ scale: 0.95 }} // Scale down on tap
>
<motion.div
className="absolute inset-0 border-2 border-transparent rounded-lg "
initial={{ borderColor: "transparent" }}
whileHover={{ borderColor: "#3b82f6" }} // Add blue background on hover
transition={{ duration: 0.3 }}
/>
<div className="relative z-10 ">
key={index}
className="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 ease-in-out hover:shadow-2xl hover:bg-[#3b82f6] cursor-pointer group flex flex-col justify-between h-full"
initial={{ scale: 1 }}
whileHover={{ scale: 1.05 }} // Scale on hover
whileTap={{ scale: 0.95 }} // Scale down on tap
>
<motion.div
className="absolute inset-0 border-2 border-transparent rounded-lg"
initial={{ borderColor: "transparent" }}
whileHover={{ borderColor: "#3b82f6" }} // Add blue border on hover
transition={{ duration: 0.3 }}
/>
<div className="relative z-10 flex flex-col justify-between h-full">
<div>
<h3 className="text-2xl font-semibold text-gray-800 dark:text-white group-hover:text-white mb-4">
{algorithm.title}
</h3>
<p className="text-gray-600 dark:text-gray-300 group-hover:text-slate-50 ">
<p className="text-gray-600 dark:text-gray-300 group-hover:text-slate-50">
{algorithm.description}
</p>
</div>
<div className="flex justify-center mt-auto">
<Link
to={algorithm.link}
className="inline-block bg-blue-600 text-white px-4 py-2 rounded shadow transition-colors duration-300 group-hover:bg-white group-hover:text-blue-700"
>
Learn More
</Link>
</div>
</motion.div>
</div>
</motion.div>

))}
</div>
</div>
Expand Down