Update styles and components for improved UI; add new gradients and button effects, modify layout background color, and enhance button accessibility.

Author: Adnanarodiya

.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

@@ -14,12 +14,15 @@ export function Button({
     <div className="relative inline-block group w-fit">
       <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 transition-all duration-300 ease-in-out',
           className
         )}
         {...props}
       >
-        {children}
+        <p className="btn-clip group-hover:opacity-0 transition-opacity duration-300"></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

@@ -13,7 +13,7 @@ export async function Header() {
 
   return (
     <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="border border-hacktoberfest-light-blue rounded-lg py-4 px-6 container mx-auto  backdrop-blur-md shadow-lg">
         <div className="flex justify-between items-center">
           <Link href="/" className="z-5">
             <LogoIconsSvg />

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

@@ -24,14 +24,14 @@ export function Hero() {
   }
 
   return (
-    <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">
+    <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="z-50 flex justify-center items-center text-center h-screen">
+        <div className="max-w-md space-y-5">
+          <h1 className="text-5xl font-medium uppercase text-hacktoberfest-light-pink">
             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"
             onSubmit={handleSearch}
           >
             <div className="flex w-full">
@@ -51,15 +51,15 @@ export function Hero() {
               </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
@@ -79,8 +79,8 @@ export function Hero() {
             </ul>
           </div>
         </div>
-      </div> */}
-      <div className="absolute top-0 left-0 w-full h-full">
+      </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/layout.tsx

@@ -18,7 +18,7 @@ const spaceGrotesk = Space_Grotesk({
 export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
     <html className={spaceGrotesk.variable}>
-      <body className="font-sans font-normal bg-hacktoberfest-dark-green">
+      <body className="font-sans font-normal bg-hacktoberfest-blue">
         {children}
         <Footer />
         <SessionProvider>

src/styles/globals.css

@@ -17,15 +17,43 @@ a {
 }
 
 .btn-clip {
+  --corner-size: 5px;
+  --border-width: 1px;
+  --full-width: calc(var(--corner-size) + var(--border-width));
+  position: absolute;
+  inset: -2px;
+  background-color: white;
   clip-path: polygon(
-    12px 0px,
-    100% 0px,
-    100% 72%,
-    calc(100% - 12px) 100%,
+    0px var(--full-width),
+    var(--border-width) var(--full-width),
+    var(--border-width) var(--border-width),
+    var(--full-width) var(--border-width),
+    var(--full-width) 0px,
+    0px 0px,
     0px 100%,
-    0px 12px
+    100% 100%,
+    100% 0px,
+    calc(100% - var(--full-width)) 0px,
+    calc(100% - var(--full-width)) var(--border-width),
+    calc(100% - var(--border-width)) var(--border-width),
+    calc(100% - var(--border-width)) var(--full-width),
+    100% var(--full-width),
+    100% calc(100% - var(--full-width)),
+    calc(100% - var(--border-width)) calc(100% - var(--full-width)),
+    calc(100% - var(--border-width)) calc(100% - var(--border-width)),
+    calc(100% - var(--full-width)) calc(100% - var(--border-width)),
+    calc(100% - var(--full-width)) 100%,
+    var(--full-width) 100%,
+    var(--full-width) calc(100% - var(--border-width)),
+    var(--border-width) calc(100% - var(--border-width)),
+    var(--border-width) calc(100% - var(--full-width)),
+    0px calc(100% - var(--full-width)),
+    0px var(--full-width)
   );
-  border-radius: 2px;
+  transition:
+    inset 300ms ease-in-out,
+    clip-path 300ms ease-in-out,
+    color 300ms ease-in-out;
 }
 
 .container-query {

tailwind.config.ts

@@ -13,7 +13,11 @@ const config = {
       },
       backgroundImage: {
         'gradient-radial':
-          'radial-gradient(30% 50% at center 50%, var(--tw-gradient-stops))'
+          'radial-gradient(30% 50% at center 50%, var(--tw-gradient-stops))',
+        'primary-btn-hover-gradient':
+          'linear-gradient(270deg, rgb(194, 194, 255) 0%, rgb(90, 90, 181) 100%)',
+        'primary-btn-gradient':
+          'linear-gradient(90deg,rgb(from rgb(90, 90, 181) r g b / 0.15) 0%,rgb(from rgb(194, 194, 255) r g b / 0.15) 100%)'
       },
       backgroundSize: {
         '50': '50%',
@@ -23,17 +27,22 @@ const config = {
         sm: '0 1px 2px var(--tw-shadow-color)',
         DEFAULT:
           '0 0 10px var(--tw-shadow-color), 0 0 20px var(--tw-shadow-color)',
-        lg: '0 8px 16px var(--tw-shadow-color)'
+        lg: '0 8px 16px var(--tw-shadow-color)',
+        'button-shadow': 'transparent 0px 0px 0px 1px',
+        'primary-btn-shadow':
+          'rgb(from rgb(208, 204, 227) r g b / 0.25) 0px 0px 0px 1px'
       },
       colors: {
         hacktoberfest: {
           black: '#1C1C1C',
           green: '#50DA4C',
+          blue: '#1c1c3f',
           pink: '#FF8BFF',
-          light: '#FEFDF8',
+          light: '#d0cce3',
           beige: '#F3F0E0',
           'dark-green': '#183717',
           'light-green': '#D8FFD8',
+          'light-blue': '#403f7d',
           'deep-pink': '#C401C4',
           'light-pink': '#FFDBFF'
         }