Update with latest Design

.github/workflows/check-linting-and-format.yml

@@ -6,7 +6,7 @@ on:
   push:
     branches:
       - main
-  pull_request_target:
+  pull_request:
     branches:
       - main
 

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 package-lock.json
+.env*
 
 # testing
 /coverage
@@ -33,4 +34,4 @@ yarn-error.log*
 
 # vercel
 .vercel
-.env*.local
+.env*.local

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

@@ -11,15 +11,18 @@ export function Button({
   ...props
 }: PropsWithChildren<ButtonProps>) {
   return (
-    <div className="relative inline-block group w-fit">
+    <div className="relative inline-block group w-fit transition-all duration-500">
       <button
         className={cn(
-          'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-md md:btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
+          'text-sm font-bold inline-flex justify-center items-center uppercase py-3 px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-20',
           className
         )}
         {...props}
       >
-        {children}
+        <p className="btn-clip group-hover:opacity-0 duration-300 group-hover:scale-95"></p>
+        <span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-2 font-bold">
+          {children}
+        </span>
       </button>
     </div>
   );

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

@@ -6,33 +6,36 @@ import { BsPeopleFill } from 'react-icons/bs';
 import { SearchForm } from './search-form';
 import { auth } from '@/auth';
 import { signInAction, signOutAction } from '../../actions';
+import { LogoIconsSvg } from '@/components/Icons';
+import { Button } from './button';
+import { MobileMenu } from './mobile-menu';
 
 export async function Header() {
   const session = await auth();
 
   return (
-    <header className="border-b-[0.5px] border-dashed border-b-hacktoberfest-light-green mb-5">
-      <div className="container px-4 py-2 mx-auto">
-        <div className="justify-between shadow-lg navbar">
-          <Link href="/">
-            <img
-              src="/horizontal_beige.png"
-              alt="Hacktoberfest"
-              className="w-56"
-            />
+    <header className="fixed top-0 left-0 w-full z-50 py-3 px-4 sm:px-6">
+      <div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
+        <div className="flex justify-between items-center">
+          <Link href="/" className="z-5">
+            <LogoIconsSvg />
           </Link>
 
-          <SearchForm />
+          {/* Desktop Search - Hidden on mobile */}
+          <div className="hidden md:block">
+            <SearchForm />
+          </div>
 
-          <div className="flex gap-2 lg:ml-40">
+          {/* Desktop Navigation - Hidden on mobile */}
+          <div className="hidden md:flex gap-2 lg:ml-40">
             <form action={session ? signOutAction : signInAction}>
-              <button className="text-white border-white btn btn-ghost border-1 ms-4">
+              <Button className="text-xs sm:text-sm">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
-              </button>
+              </Button>
             </form>
             <Link
               href="/contributors"
-              className="btn btn-square btn-ghost umami--click--contributors-button"
+              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>
@@ -41,11 +44,19 @@ 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"
+              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>
           </div>
+
+          {/* Mobile Hamburger Menu */}
+          <MobileMenu session={session} />
+        </div>
+
+        {/* Mobile Search - Visible only on mobile */}
+        <div className="md:hidden md:mt-4">
+          <SearchForm />
         </div>
       </div>
     </header>

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

@@ -9,6 +9,8 @@ import Link from 'next/link';
 
 import { sortByName } from '@/lib/utils';
 import languages from '@/assets/languages.json';
+import { HeroSectionSvg } from '@/components/Icons';
+import { MarqueTextAnimation } from './marque-text-animation';
 
 const { main: mainLanguages, others: otherLanguages } = languages;
 
@@ -23,62 +25,69 @@ export function Hero() {
   }
 
   return (
-    <div className="min-h-screen pt-10 hero bg-gradient-radial from-hacktoberfest-green to-hacktoberfest-dark-green bg-blend-overlay">
-      <div className="w-0 hero-overlay bg-opacity-60"></div>
-      <div className="text-center hero-content">
-        <div className="max-w-md">
-          <h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-pink">
+    <div className="relative bg-hero-gradient ">
+      <div className="z-50 flex flex-col space-y-8 justify-center items-center text-center min-h-screen pt-28 sm:pt-24">
+        <div className="max-w-md space-y-5">
+          <h1 className="text-5xl font-medium uppercase heading-text">
             Search your language
           </h1>
           <form
-            className="items-center w-full max-w-xs mx-auto my-5 form-control"
+            className="items-center w-full max-w-xs mx-auto form-control outline-none "
             onSubmit={handleSearch}
           >
             <div className="flex w-full">
               <div className="relative flex w-full">
                 <input
                   type="text"
                   placeholder="Search for your language"
-                  className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light focus:outline-hacktoberfest-light-pink placeholder:text-hacktoberfest-light-green"
+                  className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
+                  focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light"
                   name="search"
                 />
               </div>
               <button
                 type="submit"
-                className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light-green border-hacktoberfest-light hover:bg-hacktoberfest-light-pink hover:text-hacktoberfest-deep-pink hover:border-hacktoberfest-light-pink"
+                className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light    hover:bg-primary-btn-hover-gradient"
               >
                 <Search />
               </button>
             </div>
           </form>
-          <p className="mb-5 font-medium uppercase text-hacktoberfest-light">
+          <p className="font-medium uppercase text-hacktoberfest-light">
             Or select the programming language you would like to find
             repositories for.
           </p>
-
-          {mainLanguages.map(language => (
-            <LanguageButton key={language} language={language} />
-          ))}
-
+          <div className="flex flex-wrap gap-6 items-center justify-center ">
+            {mainLanguages.map(language => (
+              <LanguageButton key={language} language={language} />
+            ))}
+          </div>
           <div className="dropdown dropdown-top">
             <Button tabIndex={0} className="umami--click--otherlangs-button">
               Other languages
             </Button>
 
             <ul
               tabIndex={0}
-              className="h-64 p-2 overflow-y-scroll shadow menu dropdown-content bg-base-100 rounded-box w-60"
+              className="h-64 p-2 overflow-y-auto shadow-lg menu dropdown-content bg-white/95 backdrop-blur-sm rounded-xl w-60 border border-gray-200/50 z-[9999]"
             >
               {otherLanguages.sort(sortByName).map(language => (
                 <li key={language}>
-                  <Link href={`/repos/${language.toLowerCase()}`}>
+                  <Link
+                    href={`/repos/${language.toLowerCase()}`}
+                    className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2"
+                  >
                     {language}
                   </Link>
                 </li>
               ))}
             </ul>
           </div>
         </div>
+        <MarqueTextAnimation />
+      </div>
+      <div className="absolute top-0 left-0 w-full h-full -z-10">
+        <HeroSectionSvg className="w-full h-full" />
       </div>
     </div>
   );

src/app/(public)/_components/language-button.tsx

@@ -11,7 +11,7 @@ export function LanguageButton({ language }: LanguageButtonProps) {
 
   return (
     <Link href={`/repos/${lan}`}>
-      <Button className="flex items-center gap-3">
+      <Button>
         <svg className="w-5 h-4">{Icons[lan === 'c++' ? 'cpp' : lan]}</svg>
         {language}
       </Button>

src/app/(public)/_components/marque-text-animation.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const MarqueeItem = () => (
+  <>
+    {Array.from({ length: 4 }).map((_, i) => (
+      <React.Fragment key={i}>
+        <span className="text-center italic font-bold text-4xl md:text-6xl uppercase text-transparent text-webkit">
+          Hacktoberfest 2025
+        </span>
+        <span className="w-[68px] h-[12px] bg-square-box-gradient"></span>
+      </React.Fragment>
+    ))}
+  </>
+);
+
+export function MarqueTextAnimation() {
+  return (
+    <div className="w-full overflow-hidden pb-8">
+      <div className="flex animate-marquee mb-4 sm:mb-8">
+        <div className="flex gap-10 items-center whitespace-nowrap">
+          <MarqueeItem />
+        </div>
+        <div className="flex gap-10 items-center whitespace-nowrap">
+          <MarqueeItem />
+        </div>
+      </div>
+      <div className="flex animate-marquee-reverse">
+        <div className="flex gap-10 items-center whitespace-nowrap">
+          <MarqueeItem />
+        </div>
+        <div className="flex gap-10 items-center whitespace-nowrap">
+          <MarqueeItem />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(public)/_components/mobile-menu.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+import { IoLogoGithub } from 'react-icons/io';
+import { BsPeopleFill } from 'react-icons/bs';
+import { HiMenu, HiX } from 'react-icons/hi';
+
+import { Button } from './button';
+import { signInAction, signOutAction } from '../../actions';
+
+interface MobileMenuProps {
+  session: any;
+}
+
+export function MobileMenu({ session }: MobileMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <div className="md:hidden">
+      {/* Hamburger Button */}
+      <button
+        onClick={toggleMenu}
+        className="text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
+        aria-label="Toggle menu"
+      >
+        {isOpen ? <HiX size="1.5rem" /> : <HiMenu size="1.5rem" />}
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-2  bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
+          <div className="flex flex-col gap-4">
+            <form action={session ? signOutAction : signInAction}>
+              <Button className="w-full text-center text-xs sm:text-sm">
+                {session && session.user ? 'Sign Out' : 'Sign In'}
+              </Button>
+            </form>
+
+            <Link
+              href="/contributors"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              onClick={() => setIsOpen(false)}
+            >
+              <BsPeopleFill size="1.2rem" />
+              <span className="text-sm font-medium">Contributors</span>
+            </Link>
+
+            <a
+              href="https://github.com/max-programming/hacktoberfest-projects"
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              onClick={() => setIsOpen(false)}
+            >
+              <IoLogoGithub size="1.2rem" />
+              <span className="text-sm font-medium">GitHub</span>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/(public)/_components/search-form.tsx

@@ -13,12 +13,14 @@ export function SearchForm() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const { register, handleSubmit, reset } = useForm<FormValues>({
+  const { register, handleSubmit, reset, watch } = useForm<FormValues>({
     defaultValues: {
       searchQuery: searchParams.get('q') as string
     }
   });
 
+  const searchQuery = watch('searchQuery');
+
   if (!pathname.startsWith('/repos')) {
     return null;
   }
@@ -41,17 +43,19 @@ export function SearchForm() {
         <div className="relative">
           <input
             placeholder="Search"
-            className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:outline-hacktoberfest-light-pink placeholder:text-hacktoberfest-light-green"
+            className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200"
             type="text"
             {...register('searchQuery', { required: true })}
           />
-          <button
-            className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
-            type="button"
-            onClick={() => reset()}
-          >
-            <GoX color="white" />
-          </button>
+          {searchQuery && searchQuery.trim() !== '' && (
+            <button
+              className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
+              type="button"
+              onClick={() => reset()}
+            >
+              <GoX color="white" />
+            </button>
+          )}
         </div>
       </form>
     </div>