Enhance UI components with new gradients and animations; update button styles for smoother transitions, improve hero section layout, and add marquee text animation for better visual appeal.

Author: Adnanarodiya

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

@@ -11,15 +11,15 @@ 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(
-          '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',
+          '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}
       >
-        <p className="btn-clip group-hover:opacity-0 transition-opacity duration-300"></p>
+        <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>

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

@@ -10,6 +10,7 @@ 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;
 
@@ -24,28 +25,29 @@ 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="z-50 flex justify-center items-center text-center h-screen">
+    <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 text-hacktoberfest-light-pink">
+          <h1 className="text-5xl font-medium uppercase heading-text">
             Search your language
           </h1>
           <form
-            className="items-center w-full max-w-xs mx-auto 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-blue"
+                  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-blue 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>
@@ -79,6 +81,7 @@ export function Hero() {
             </ul>
           </div>
         </div>
+        <MarqueTextAnimation />
       </div>
       <div className="absolute top-0 left-0 w-full h-full -z-10">
         <HeroSectionSvg className="w-full h-full" />

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/styles/globals.css

@@ -53,7 +53,17 @@ a {
   transition:
     inset 300ms ease-in-out,
     clip-path 300ms ease-in-out,
-    color 300ms ease-in-out;
+    color 300ms ease-in-out !important;
+}
+
+.btn-clip:hover {
+  inset: 0px;
+  color: transparent;
+}
+
+.heading-text {
+  color: #ffffff;
+  text-shadow: rgb(from #d0cce3 r g b / 0.5) 0px 0px 10px;
 }
 
 .container-query {
@@ -90,3 +100,31 @@ a {
     @apply w-full left-0;
   }
 }
+.text-webkit {
+  -webkit-text-stroke: 1px #5a5ab5;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-marquee-reverse {
+  animation: marquee-reverse 20s linear infinite;
+}

tailwind.config.ts

@@ -12,12 +12,14 @@ const config = {
         sans: ['var(--font-space-grotesk)', 'ui-sans-serif', 'system-ui']
       },
       backgroundImage: {
-        'gradient-radial':
-          '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%)',
+        'hero-gradient':
+          '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%)',
         '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%)'
+          '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%)',
+        'square-box-gradient':
+          'linear-gradient(to right,rgb(194, 194, 255) 0px,rgb(194, 194, 255) 12px,transparent 12px,transparent 28px,rgb(90, 90, 181) 28px,rgb(90, 90, 181) 40px,transparent 40px,transparent 56px,rgb(64, 63, 125) 56px,rgb(64, 63, 125) 68px)'
       },
       backgroundSize: {
         '50': '50%',