Skip to content

Commit

Permalink
Merge pull request #97 from rajatsinghal02/main
Browse files Browse the repository at this point in the history 
Card Styling Updated issue no #54 Resolved
  • Loading branch information
@ajay-dhangar
ajay-dhangar authored Oct 6, 2024
2 parents e08d4d3 + d2d8ff2 commit 86db2cb
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 75 deletions.
137 changes: 77 additions & 60 deletions src/components/Homepage/GetInvolvedSection.tsx
View file
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
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

0 comments on commit 86db2cb

Please sign in to comment.