Refactor header and hero components; add SVG icons for logo and hero section. Update styles for improved responsiveness and visual consistency.

Author: Adnanarodiya

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

@@ -6,33 +6,30 @@ 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';
 
 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-6">
+      <div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-6 container mx-auto bg-[radial-gradient(85.48%_85.48%_at_50%_0%,rgb(64,63,125)_0%,rgb(from_rgb(28,28,63)_r_g_b/_0)_100%)] backdrop-blur-md shadow-lg">
+        <div className="flex justify-between items-center">
+          <Link href="/" className="z-5">
+            <LogoIconsSvg />
           </Link>
 
           <SearchForm />
 
           <div className="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-white border-white btn btn-ghost border-1 ms-4 hover:bg-blue-700 transition-colors">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
               </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:bg-blue-700 transition-colors"
             >
               <BsPeopleFill size="1.5rem" color="white" title="Contributors" />
             </Link>
@@ -41,7 +38,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"
+              className="btn btn-square btn-ghost umami--click--github-button hover:bg-blue-700 transition-colors"
             >
               <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>

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

@@ -9,6 +9,7 @@ import Link from 'next/link';
 
 import { sortByName } from '@/lib/utils';
 import languages from '@/assets/languages.json';
+import { HeroSectionSvg } from '@/components/Icons';
 
 const { main: mainLanguages, others: otherLanguages } = languages;
 
@@ -23,9 +24,8 @@ 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="relative min-h-screen bg-(radial-gradient(85.48% 85.48% at 50% 0%, rgb(64, 63, 125) 0%, rgb(from rgb(28, 28, 63) r g b / 0) 100%)) ">
+      {/* <div className="text-center hero-content">
         <div className="max-w-md">
           <h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light-pink">
             Search your language
@@ -39,13 +39,13 @@ export function Hero() {
                 <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:outline-hacktoberfest-light-pink placeholder:text-hacktoberfest-light-blue"
                   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-blue border-hacktoberfest-light hover:bg-hacktoberfest-light-pink hover:text-hacktoberfest-deep-pink hover:border-hacktoberfest-light-pink"
               >
                 <Search />
               </button>
@@ -79,6 +79,9 @@ export function Hero() {
             </ul>
           </div>
         </div>
+      </div> */}
+      <div className="absolute top-0 left-0 w-full h-full">
+        <HeroSectionSvg className="w-full h-full" />
       </div>
     </div>
   );