Refactor header and contributor card components for improved styling and responsiveness; update button hover effects and layout adjustments for better user experience.

Author: Adnanarodiya

src/app/(public)/_components/header.tsx

@@ -35,7 +35,7 @@ export async function Header() {
             </form>
             <Link
               href="/contributors"
-              className="btn btn-square btn-ghost umami--click--contributors-button hover:bg-blue-700 transition-colors"
+              className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors"
             >
               <BsPeopleFill size="1.5rem" color="white" title="Contributors" />
             </Link>
@@ -44,7 +44,7 @@ export async function Header() {
               href="https://github.com/max-programming/hacktoberfest-projects"
               target="_blank"
               rel="noreferrer"
-              className="btn btn-square btn-ghost umami--click--github-button hover:bg-blue-700 transition-colors"
+              className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors"
             >
               <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>

src/app/(public)/contributors/_components/contributor-card.tsx

@@ -40,29 +40,33 @@ export function ContributorCard({ contributor }: ContributorCardProps) {
 
   return (
     <button
-      className="justify-center min-w-full text-center shadow-2xl card focus-within:outline-hacktoberfest-green bg-hacktoberfest-black"
+      className="group justify-center min-w-full text-center shadow-2xl card focus-within:outline-hacktoberfest-blue bg-hacktoberfest-light-blue hover:bg-hacktoberfest-light transition-all duration-300 transform hover:-translate-y-1 overflow-hidden"
       id={contributor.login}
       onClick={() => router.replace(`/contributors#${contributor.login}`)}
       ref={cardRef}
     >
-      <div className="w-full pt-5 mx-auto">
-        <figure className="w-full h-full">
-          <img src={url} alt={contributor.name} className="rounded-xl" />
+      <div className="w-full mx-auto">
+        <figure className="w-full h-56">
+          <img
+            src={url}
+            alt={contributor.name}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
+          />
         </figure>
       </div>
       <div className="w-full gap-3 items-center card-body">
-        <h2 className="text-2xl font-medium text-hacktoberfest-green">
+        <h2 className="text-2xl font-medium text-hacktoberfest-light group-hover:text-hacktoberfest-black">
           {contributor.name}
         </h2>
         <a
           href={contributor.profile}
-          className="link text-hacktoberfest-green hover:text-hacktoberfest-pink w-fit underline-expand"
+          className="link text-hacktoberfest-light group-hover:text-hacktoberfest-black hover:text-hacktoberfest-blue w-fit underline-expand"
         >
           {contributor.profile}
         </a>
         <div className="justify-center mt-auto card-actions">
           <a
-            className="border-2 text-hacktoberfest-light btn border-hacktoberfest-pink hover:border-hacktoberfest-pink btn-outline hover:bg-hacktoberfest-pink hover:text-hacktoberfest-black"
+            className="border-2 text-hacktoberfest-light btn border-hacktoberfest-blue  group-hover:!text-white hover:-translate-y-1"
             href={`https://github.com/${contributor.login}`}
             target="_blank"
             rel="noreferrer"

src/app/(public)/contributors/page.tsx

@@ -17,11 +17,11 @@ export default async function ContributorsPage() {
   return (
     <div>
       <Header />
-      <div className="container mx-auto mb-5">
-        <h1 className="my-5 text-5xl font-medium text-center text-neutral-100">
+      <div className="container mx-auto mb-5 space-y-8 mt-36">
+        <h1 className="text-4xl sm:text-5xl font-medium text-center text-neutral-100">
           Contributors ✨
         </h1>
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 px-4">
           {contributors.map(contributor => (
             <ContributorCard
               key={contributor.login}