From 9e55e99bc1d4b67d8d8d3931ff11a91c019260ea Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:46:41 +0100
Subject: [PATCH 1/4] Fix cart

---
 src/components/Header/Cart.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/Cart.component.tsx b/src/components/Header/Cart.component.tsx
index f8690540d..a3beaaede 100644
--- a/src/components/Header/Cart.component.tsx
+++ b/src/components/Header/Cart.component.tsx
@@ -50,7 +50,7 @@ const Cart = ({ stickyNav }: ICartProps) => {
 
       {productCount && (
         <span
-          className={`w-6 h-6 pb-2 -mt-5 !ml-auto text-center rounded-full
+          className={`w-6 h-6 pb-2 -mt-5 !-ml-2 text-center rounded-full
           ${stickyNav ? 'text-black bg-white' : 'text-white bg-black'}`}
         >
           {productCount}

From 789760f2c5e9333e5aa5f743cfc365479246b6c2 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:46:51 +0100
Subject: [PATCH 2/4] Refactor Button and change Hero button design

---
 src/components/Index/Hero.component.tsx |  8 ++---
 src/components/UI/Button.component.tsx  | 46 ++++++++++++++++++-------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/Index/Hero.component.tsx b/src/components/Index/Hero.component.tsx
index fb324273c..d2cfdd4f4 100644
--- a/src/components/Index/Hero.component.tsx
+++ b/src/components/Index/Hero.component.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import Link from 'next/link';
+import Button from '../UI/Button.component';
 
 /**
  * Renders Hero section for Index page
@@ -25,12 +25,12 @@ const Hero = () => (
         <h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
           Stripete Zig Zag Pute Sett
         </h1>
-        <Link 
+        <Button 
           href="/produkter"
-          className="inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-100 transition-colors duration-200"
+          isHero
         >
           Se Utvalget
-        </Link>
+        </Button>
       </div>
     </div>
   </section>
diff --git a/src/components/UI/Button.component.tsx b/src/components/UI/Button.component.tsx
index 2883d8c34..6420478ea 100644
--- a/src/components/UI/Button.component.tsx
+++ b/src/components/UI/Button.component.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import Link from 'next/link';
 
 type TButtonColors = 'red' | 'blue';
 
@@ -8,6 +9,8 @@ interface IButtonProps {
   color?: TButtonColors;
   children: ReactNode;
   fullWidth?: boolean;
+  isHero?: boolean;
+  href?: string;
 }
 
 /**
@@ -26,21 +29,38 @@ const Button = ({
   color = 'blue',
   children,
   fullWidth = false,
-}: IButtonProps) => (
-  <button
-    onClick={handleButtonClick}
-    disabled={buttonDisabled}
-    className={`px-2 lg:px-4 py-2 font-bold bg-blue-500 border border-gray-400 border-solid rounded text-white ease-in-out transition-all duration-300 disabled:opacity-50
-      ${
+  isHero = false,
+  href,
+}: IButtonProps) => {
+  const buttonClasses = isHero
+    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white'
+    : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${
         color === 'blue'
           ? 'bg-blue-500 hover:bg-blue-600'
           : 'bg-red-500 hover:bg-red-600'
-      }
-      ${fullWidth ? 'w-full md:w-auto' : ''}
-    `}
-  >
-    {children}
-  </button>
-);
+      }`;
+
+  const classes = `${buttonClasses} ease-in-out transition-all duration-300 disabled:opacity-50 ${
+    fullWidth ? 'w-full md:w-auto' : ''
+  }`;
+
+  if (href && isHero) {
+    return (
+      <Link href={href} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      onClick={handleButtonClick}
+      disabled={buttonDisabled}
+      className={classes}
+    >
+      {children}
+    </button>
+  );
+};
 
 export default Button;

From 64f31f50df0ecedbc380473d36a6cbcb472c4bbc Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:55:59 +0100
Subject: [PATCH 3/4] Hero button hover effect

---
 src/components/UI/Button.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/UI/Button.component.tsx b/src/components/UI/Button.component.tsx
index 6420478ea..3489a4251 100644
--- a/src/components/UI/Button.component.tsx
+++ b/src/components/UI/Button.component.tsx
@@ -33,7 +33,7 @@ const Button = ({
   href,
 }: IButtonProps) => {
   const buttonClasses = isHero
-    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white'
+    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white shadow-md'
     : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${
         color === 'blue'
           ? 'bg-blue-500 hover:bg-blue-600'

From 88db27a9614abc1d8c091d67a4f0802e10ea8a99 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 22:57:16 +0100
Subject: [PATCH 4/4] Update Button.component.tsx

---
 src/components/UI/Button.component.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/UI/Button.component.tsx b/src/components/UI/Button.component.tsx
index 3489a4251..c73cd162d 100644
--- a/src/components/UI/Button.component.tsx
+++ b/src/components/UI/Button.component.tsx
@@ -32,13 +32,16 @@ const Button = ({
   isHero = false,
   href,
 }: IButtonProps) => {
+  const getColorClasses = (buttonColor: TButtonColors) => {
+    if (buttonColor === 'blue') {
+      return 'bg-blue-500 hover:bg-blue-600';
+    }
+    return 'bg-red-500 hover:bg-red-600';
+  };
+
   const buttonClasses = isHero
-    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-400 hover:text-white shadow-md'
-    : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${
-        color === 'blue'
-          ? 'bg-blue-500 hover:bg-blue-600'
-          : 'bg-red-500 hover:bg-red-600'
-      }`;
+    ? 'inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white bg-opacity-90 text-gray-900 hover:bg-gray-400 hover:bg-opacity-95 hover:text-white hover:shadow-md'
+    : `px-2 lg:px-4 py-2 font-bold border border-gray-400 border-solid rounded text-white ${getColorClasses(color)}`;
 
   const classes = `${buttonClasses} ease-in-out transition-all duration-300 disabled:opacity-50 ${
     fullWidth ? 'w-full md:w-auto' : ''