UI Hover Effects (#17)

* feat: update hover animations for primary and link buttons

* feat: modifies footer and navbar styles

Author: alagappan17

package-lock.json

@@ -21,9 +21,10 @@
     "@types/node": "^22.10.6",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-config-next": "15.1.4",
-    "postcss": "^8.5.0",
+    "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3"
   }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

postcss.config.js

@@ -35,13 +35,13 @@ const Layout = ({
           />
           <div className="absolute top-0 left-0 pt-16 max-w-16 z-5 pl-[7vw] flex flex-col sm:flex-row">
             <Link
-              className="text-sm font-semibold mr-10 mb-5 sm:mb-10 w-44 bg-white text-black rounded-full shadow-[0.1rem_0.2rem_0.5rem_rgba(0,0,0,0.15)] px-6 py-2.5 border-none animation-easein-slow shift-to-right"
+              className="team-button animation-easein primary-button primary-button--blue"
               href="/contact/#consult"
             >
               Culture@Procedure
             </Link>
             <Link
-              className="text-sm font-semibold mr-10 mb-5 sm:mb-10 w-44 bg-white text-black rounded-full shadow-[0.1rem_0.2rem_0.5rem_rgba(0,0,0,0.15)] px-6 py-2.5 border-none animation-easein-slow shift-to-right"
+              className="team-button animation-easein primary-button primary-button--green"
               href="/contact/#consult"
             >
               Team@Procedure

src/app/about/[slug]/layout.tsx

@@ -49,8 +49,8 @@ const About = () => {
         title="Our Story"
       />
       <TeamsData />
-      <section>
-        <Consultation type="transparent" />
+      <section className="mt-12">
+        <Consultation type="colored" backgroundColor="#c3201f" />
       </section>
     </>
   )

src/app/about/page.tsx

@@ -2,7 +2,7 @@ import { capabilitiesData } from '@/constants/constant'
 import Link from 'next/link'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
-import Image from 'next/image'
+import { ArrowRightIcon } from '@heroicons/react/16/solid'
 
 const CapabilitiesNavigation = () => {
   return (
@@ -14,7 +14,14 @@ const CapabilitiesNavigation = () => {
         >
           <h2
             className={twMerge(
-              `text-5xl text-gray-500 font-bold mb-9 dot capitalize after:bg-[#7EB9E6]`
+              'text-5xl text-gray-500 font-bold mb-9 dot',
+              `${
+                data.title === 'think'
+                  ? 'dot-red'
+                  : data.title === 'build'
+                  ? 'dot-blue'
+                  : 'dot-green'
+              }`
             )}
           >
             {data.title}
@@ -23,18 +30,25 @@ const CapabilitiesNavigation = () => {
             {data.items.map(item => (
               <li className="group relative" key={item.title}>
                 <Link
-                  className="text-black w-full text-2xl font-light block py-2.5 pr-12 border-b border-b-black/10 animation-easein-slow shift-to-right bg-white"
+                  className="nav-link text-black w-full text-2xl font-light block py-2.5 pr-12 border-b border-b-black/10"
                   href={item.href}
                 >
-                  {item.title}
+                  <div className="flex justify-between items-center w-full">
+                    {item.title}
+                    <div className="nav-link-button opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
+                      <ArrowRightIcon className="nav-link-icon" />
+                      <div
+                        className={`nav-link-slide translate-x-full group-hover:translate-x-0 transition-transform duration-500 ${
+                          data.title === 'think'
+                            ? 'nav-link-slide--red'
+                            : data.title === 'build'
+                            ? 'nav-link-slide--blue'
+                            : 'nav-link-slide--green'
+                        }`}
+                      />
+                    </div>
+                  </div>
                 </Link>
-                <Image
-                  className="block lg:hidden top-0 right-0 absolute group-hover:block"
-                  width={49}
-                  height={49}
-                  src="/assets/arrow-button.svg"
-                  alt="pointer"
-                />
               </li>
             ))}
           </ul>

src/app/capabilities/components/CapablitiesNavigation.tsx

@@ -22,18 +22,21 @@ const links = [
     description:
       'Services to help you make the right decisions to achieve business goals',
     href: '/capabilities/#think',
+    navLinkSlide: 'nav-link-slide--red',
   },
   {
     title: 'Build',
     description:
       'We build products faster and better to deliver right to your customers',
     href: '/capabilities/#build',
+    navLinkSlide: 'nav-link-slide--blue',
   },
   {
     title: 'Measure',
     description:
       'We continually track how well our strategies and products are work',
     href: '/capabilities/#measure',
+    navLinkSlide: 'nav-link-slide--green',
   },
 ]
 
@@ -65,7 +68,7 @@ const AgileDeliverySection = () => {
                 <Link
                   key={index}
                   className={twMerge(
-                    'border-t flex items-end py-5 justify-between text-black border-b border-b-black/10 animation-easein-slow shift-to-right',
+                    'border-t flex items-end py-5 justify-between text-black border-b border-b-black/10 animation-easein-slow shift-to-right nav-link group',
                     index === 0 ? 'border-t-black/10' : ''
                   )}
                   href={link.href}
@@ -75,8 +78,9 @@ const AgileDeliverySection = () => {
                     <h6 className="font-medium mb-1">{link.description}</h6>
                   </div>
                   <div className="ml-10 mb-5 mr-5 relative left-0">
-                    <div className="p-2 rounded-full shadow-md">
-                      <ArrowRightIcon className="w-5 h-5 text-red-500" />
+                    <div className="nav-link-button">
+                      <ArrowRightIcon className="nav-link-icon" />
+                      <div className={`nav-link-slide ${link.navLinkSlide}`} />
                     </div>
                   </div>
                 </Link>