Merge pull request #232 from Adnanarodiya/main

Update with latest Design

Author: max-programming

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 package-lock.json
+.env*
 
 # testing
 /coverage

CONTRIBUTING.md

@@ -6,17 +6,23 @@ Thank you for your interest in contributing to the Hacktoberfest Projects Finder
 
 1. Fork the repository on GitHub.
 2. Clone your forked repository:
+
 ```sh
 git clone https://github.com/your-username/hacktoberfest-projects.git
 ```
+
 3. Navigate to the project directory:
+
 ```sh
 cd hacktoberfest-projects
 ```
+
 4. Install dependencies (we recommend using `pnpm`):
+
 ```sh
 pnpm install
 ```
+
 5. Copy the `.env.example` file to `.env.local` and fill in the required environment variables.
 
 ## Creating a GitHub OAuth Application
@@ -27,9 +33,11 @@ To use GitHub authentication in the project, you need to create a GitHub OAuth a
 2. Navigate to "Developer settings" > "OAuth Apps".
 3. Click on "New OAuth App".
 4. Fill in the application details:
+
 - Application name: "Hacktoberfest Projects Finder" (or your preferred name)
 - Homepage URL: `http://localhost:3000` (for local development)
 - Authorization callback URL: `http://localhost:3000/api/auth/callback/github`
+
 5. Click "Register application".
 6. On the next page, you'll see your Client ID. Click "Generate a new client secret" to create your Client Secret.
 7. Copy the Client ID and Client Secret to your `.env.local` file.
@@ -41,25 +49,39 @@ Xata is used as the database for this project. Follow these steps to set it up:
 1. Sign up for a Xata account at https://lite.xata.io/
 2. Create a new workspace and database from Xata dashboard
 3. Install the Xata CLI globally:
+
 ```sh
 npm install -g "@xata.io/cli@latest"
 ```
+
 4. Authenticate with Xata:
+
 ```sh
 xata auth login
 ```
+
 5. Initialize the database:
+
 ```sh
 xata init
 ```
+
 5. Upload the database schema:
+
 ```sh
 xata schema upload db-schema.json
 ```
 
+6. Generate the Xata client:
+
+```sh
+xata codegen
+```
+
 ## Environment Variables
 
 Create a `.env.local` file in the root of the project and add the following variables:
+
 ```sh
 AUTH_SECRET="" # A random string
 AUTH_URL="" # Should be http://localhost:3000 for local development
@@ -72,13 +94,14 @@ NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="" # Optional
 NEXT_PUBLIC_ANALYTICS_WEBSITE_ID="" # Optional
 ```
 
-Make sure to fill in the required values for each variable. The `AUTH_SECRET` should be a random string, and `AUTH_URL` should be set to `http://localhost:3000` for local development. The `XATA_BRANCH` should typically be set to "main" unless you're using a different branch. 
+Make sure to fill in the required values for each variable. The `AUTH_SECRET` should be a random string, and `AUTH_URL` should be set to `http://localhost:3000` for local development. The `XATA_BRANCH` should typically be set to "main" unless you're using a different branch.
 
-Remember to remove env variables that are optional and you are empty, they will cause validation errors 
+Remember to remove env variables that are optional and you are empty, they will cause validation errors
 
 ## Running the Project
 
 After setting up the environment variables, you can start the development server:
+
 ```sh
 pnpm dev
 ```
@@ -88,14 +111,18 @@ The application should now be running at `http://localhost:3000`.
 ## Making Contributions
 
 1. Create a new branch for your feature or bug fix:
+
 ```sh
 git checkout -b feature/your-feature-name
 ```
+
 2. Make your changes and commit them with a descriptive commit message.
 3. Push your changes to your fork:
+
 ```sh
 git push origin feature/your-feature-name
 ```
+
 4. Create a pull request from your fork to the main repository.
 
 Please ensure your code follows the project's coding standards and includes appropriate tests if applicable.

eslint.config.mjs

@@ -1,21 +1,24 @@
-import { defineConfig } from "eslint/config";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
+import { defineConfig } from 'eslint/config';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all
 });
 
-export default defineConfig([{
-    extends: compat.extends("next/core-web-vitals"),
+export default defineConfig([
+  {
+    extends: compat.extends('next/core-web-vitals'),
 
     rules: {
-        "@next/next/no-img-element": 0,
-    },
-}]);
+      '@next/next/no-img-element': 0,
+      'react/no-unescaped-entities': 0
+    }
+  }
+]);

public/favicon.svg

@@ -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 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out',
           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/button.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/header.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/hero.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/language-button.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>
+  );
+}