From 32668d7e415f5888e288b9c9f7f6b7b52b8d5f0a Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 15 Jan 2025 23:20:27 +0100
Subject: [PATCH 01/10] Improve overall design

---
 src/components/Footer/Footer.component.tsx    | 10 ++--
 src/components/Header/Header.component.tsx    |  4 +-
 src/components/Header/Navbar.component.tsx    | 34 +++--------
 src/components/Index/Hero.component.tsx       | 39 +++++++-----
 src/components/Layout/Layout.component.tsx    | 22 ++++---
 src/components/Layout/PageTitle.component.tsx | 14 ++---
 .../Product/DisplayProducts.component.tsx     | 60 +++++++++----------
 7 files changed, 91 insertions(+), 92 deletions(-)

diff --git a/src/components/Footer/Footer.component.tsx b/src/components/Footer/Footer.component.tsx
index ec58b663e..0acea4f35 100644
--- a/src/components/Footer/Footer.component.tsx
+++ b/src/components/Footer/Footer.component.tsx
@@ -4,10 +4,12 @@
  * @returns {JSX.Element} - Rendered component
  */
 const Footer = () => (
-  <footer className="bg-white mb-4 hidden md:block px-4">
-    <div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 border border-gray-200 rounded lg:max-w-[1490px]">
-      <div className="text-gray-600 mx-auto">
-        &copy; {new Date().getFullYear()} Daniel / w3bdesign
+  <footer className="w-full bg-white border-t border-gray-200 mt-12">
+    <div className="container mx-auto px-6">
+      <div className="py-4">
+        <div className="text-gray-600 text-center">
+          &copy; {new Date().getFullYear()} Daniel / w3bdesign
+        </div>
       </div>
     </div>
   </footer>
diff --git a/src/components/Header/Header.component.tsx b/src/components/Header/Header.component.tsx
index e1634df18..a85f9b4b6 100644
--- a/src/components/Header/Header.component.tsx
+++ b/src/components/Header/Header.component.tsx
@@ -25,7 +25,9 @@ const Header = ({ title }: IHeaderProps) => (
         key="pagetitle"
       />
     </Head>
-    <Navbar />
+    <div className="container mx-auto px-6">
+      <Navbar />
+    </div>
   </>
 );
 
diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index ea96a0c34..ac0db6998 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -16,46 +16,30 @@ import useIsMobile from '@/utils/hooks/useIsMobile';
 const Navbar = () => {
   const isMobile = useIsMobile();
   return (
-    <header>
-      <nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
-        <div className="container flex flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
-          <div
-            className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
-            id="menu"
-          >
-            <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
+    <header className="border-b border-gray-200">
+      <nav id="header" className="top-0 z-50 w-full bg-white">
+        <div className="container flex flex-col md:flex-row items-center justify-between px-6 py-4 mx-auto mt-0">
+          <div className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1" id="menu">
+            <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0 space-x-8">
               <li>
                 <Link href="/produkter">
-                  <span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
+                  <span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
                     Produkter
                   </span>
                 </Link>
               </li>
               <li>
                 <Link href="/kategorier">
-                  <span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
+                  <span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
                     Kategorier
                   </span>
                 </Link>
               </li>
             </ul>
           </div>
-          <div className="order-1 md:order-2 md:hidden lg:block">
+          <div className="order-1 md:order-2">
             <Link href="/">
-              <span className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
-                <svg
-                  className="mr-2 text-gray-800 fill-current"
-                  xmlns="https://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  aria-label="Nettbutikk logo"
-                >
-                  <path
-                    d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
-                    aria-label="Nettbutikk logo"
-                  />
-                </svg>
+              <span className="flex items-center text-xl font-bold tracking-widest text-gray-900 no-underline hover:text-gray-700 transition-colors">
                 NETTBUTIKK
               </span>
             </Link>
diff --git a/src/components/Index/Hero.component.tsx b/src/components/Index/Hero.component.tsx
index 23e7529cc..d15fccc4a 100644
--- a/src/components/Index/Hero.component.tsx
+++ b/src/components/Index/Hero.component.tsx
@@ -1,25 +1,36 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
 /**
  * Renders Hero section for Index page
- * @function PageTitle
+ * @function Hero
  * @returns {JSX.Element} - Rendered component
  */
 const Hero = () => (
-  <section
-    id="hero"
-    className="flex w-full mx-auto bg-right bg-cover mt-14 md:pt-0 md:items-center bg-hero-background h-[24rem] lg:max-w-[1490px]"
-  >
-    <div className="container mx-auto">
-      <div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
-        <h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
+  <section className="relative w-full h-[60vh] overflow-hidden">
+    <div className="absolute inset-0">
+      <Image
+        src="/images/hero.jpg"
+        alt="Hero image"
+        fill
+        priority
+        className="object-cover object-center"
+        quality={90}
+      />
+      <div className="absolute inset-0 bg-black bg-opacity-30" />
+    </div>
+    
+    <div className="relative h-full container mx-auto flex items-center">
+      <div className="max-w-xl">
+        <h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
           Stripete Zig Zag Pute Sett
         </h1>
-
-        <a
-          className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
-          href="#"
+        <Link 
+          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"
         >
-          se utvalget
-        </a>
+          Se Utvalget
+        </Link>
       </div>
     </div>
   </section>
diff --git a/src/components/Layout/Layout.component.tsx b/src/components/Layout/Layout.component.tsx
index 5745eb905..6da365eac 100644
--- a/src/components/Layout/Layout.component.tsx
+++ b/src/components/Layout/Layout.component.tsx
@@ -57,13 +57,21 @@ const Layout = ({ children, title }: ILayoutProps) => {
 
   return (
     <div className="flex flex-col min-h-screen w-full mx-auto">
-      <div className="container min-w-[140vw] sm:min-w-[95vw] md:px-4 lg:px-6 py-2 lg:max-w-[1600px] mx-auto">
-        <Header title={title} />
-        <PageTitle title={title} />
-        <main className="flex-grow">{children}</main>
-        <Footer />
-        <Stickynav />
-      </div>
+      <Header title={title} />
+      {title === 'Hjem' ? (
+        <>
+          <main className="flex-grow">
+            {children}
+          </main>
+        </>
+      ) : (
+        <div className="container mx-auto px-6">
+          <PageTitle title={title} />
+          <main className="flex-grow">{children}</main>
+        </div>
+      )}
+      <Footer />
+      <Stickynav />
     </div>
   );
 };
diff --git a/src/components/Layout/PageTitle.component.tsx b/src/components/Layout/PageTitle.component.tsx
index d3d524f6d..c241b0c63 100644
--- a/src/components/Layout/PageTitle.component.tsx
+++ b/src/components/Layout/PageTitle.component.tsx
@@ -11,14 +11,12 @@ interface IPageTitleProps {
  * @returns {JSX.Element} - Rendered component
  */
 const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
-  <section
-    className={`container ${
-      marginLeft ? 'p-4' : 'p-0'
-    }  pl-4 mx-auto mt-24 text-center bg-white`}
-  >
-    <span className="py-2 text-2xl font-bold tracking-wide text-center text-gray-800 no-underline uppercase hover:no-underline">
-      {title}
-    </span>
+  <section className="w-full bg-white border-b border-gray-200">
+    <div className="container mx-auto py-12 px-6">
+      <h1 className="text-2xl text-center tracking-wider text-gray-900 uppercase">
+        {title}
+      </h1>
+    </div>
   </section>
 );
 
diff --git a/src/components/Product/DisplayProducts.component.tsx b/src/components/Product/DisplayProducts.component.tsx
index 891f4ed2c..9d0114acc 100644
--- a/src/components/Product/DisplayProducts.component.tsx
+++ b/src/components/Product/DisplayProducts.component.tsx
@@ -47,10 +47,10 @@ interface IDisplayProductsProps {
  */
 
 const DisplayProducts = ({ products }: IDisplayProductsProps) => (
-  <section className="container mx-auto bg-white">
+  <section className="container mx-auto bg-white py-12">
     <div
       id="product-container"
-      className="flex flex-wrap items-center mb-[120px] md:mb-0"
+      className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
     >
       {products ? (
         products.map(
@@ -77,34 +77,29 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
             }
 
             return (
-              <div
-                key={uuidv4()}
-                className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
-              >
+              <div key={uuidv4()} className="group">
                 <Link
                   href={`/produkt/${encodeURIComponent(
                     slug,
                   )}?id=${encodeURIComponent(databaseId)}`}
                 >
-                  <span>
+                  <div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
                     {image ? (
                       <img
                         id="product-image"
-                        className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
+                        className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
                         alt={name}
                         src={image.sourceUrl}
                       />
                     ) : (
                       <img
                         id="product-image"
-                        className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
+                        className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
                         alt={name}
-                        src={
-                          process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
-                        }
+                        src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
                       />
                     )}
-                  </span>
+                  </div>
                 </Link>
                 <Link
                   href={`/produkt/${encodeURIComponent(
@@ -112,32 +107,31 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                   )}?id=${encodeURIComponent(databaseId)}`}
                 >
                   <span>
-                    <div className="flex justify-center pt-3">
-                      <p className="font-bold text-center cursor-pointer text-2xl">
+                    <div className="mt-4">
+                      <p className="text-base text-center cursor-pointer hover:text-gray-600 transition-colors">
                         {name}
                       </p>
                     </div>
                   </span>
                 </Link>
-                {/* Display sale price when on sale */}
-                {onSale && (
-                  <div className="flex justify-center">
-                    <div className="pt-1 text-gray-900 text-xl">
-                      {variations && filteredVariantPrice(price, '')}
-                      {!variations && salePrice}
+                <div className="mt-2 text-center">
+                  {onSale ? (
+                    <div className="flex justify-center items-center space-x-2">
+                      <span className="text-red-600">
+                        {variations && filteredVariantPrice(price, '')}
+                        {!variations && salePrice}
+                      </span>
+                      <span className="text-gray-500 text-sm line-through">
+                        {variations && filteredVariantPrice(price, 'right')}
+                        {!variations && regularPrice}
+                      </span>
                     </div>
-                    <div className="pt-1 ml-2 text-gray-500 line-through text-lg">
-                      {variations && filteredVariantPrice(price, 'right')}
-                      {!variations && regularPrice}
-                    </div>
-                  </div>
-                )}
-                {/* Display regular price when not on sale */}
-                {!onSale && (
-                  <p className="pt-1 text-center text-gray-900 text-xl">
-                    {price}
-                  </p>
-                )}
+                  ) : (
+                    <span className="text-gray-900">
+                      {price}
+                    </span>
+                  )}
+                </div>
               </div>
             );
           },

From 366d9dcecd5860f6d6be08ae9219353d1af5a862 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 15 Jan 2025 23:32:44 +0100
Subject: [PATCH 02/10] Improve mobile design

---
 src/components/Header/Navbar.component.tsx | 59 ++++++++++++----------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index ac0db6998..fe6d0d4d0 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -18,40 +18,47 @@ const Navbar = () => {
   return (
     <header className="border-b border-gray-200">
       <nav id="header" className="top-0 z-50 w-full bg-white">
-        <div className="container flex flex-col md:flex-row items-center justify-between px-6 py-4 mx-auto mt-0">
-          <div className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1" id="menu">
-            <ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0 space-x-8">
-              <li>
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          {isMobile ? (
+            // Mobile layout - logo with search below
+            <div className="flex flex-col space-y-4">
+              <div className="text-center">
+                <Link href="/">
+                  <span className="text-lg font-bold tracking-widest text-gray-900">
+                    NETTBUTIKK
+                  </span>
+                </Link>
+              </div>
+              <div className="w-full">
+                <MobileSearch />
+              </div>
+            </div>
+          ) : (
+            // Desktop layout
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-8">
                 <Link href="/produkter">
-                  <span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
+                  <span className="text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
                     Produkter
                   </span>
                 </Link>
-              </li>
-              <li>
                 <Link href="/kategorier">
-                  <span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
+                  <span className="text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
                     Kategorier
                   </span>
                 </Link>
-              </li>
-            </ul>
-          </div>
-          <div className="order-1 md:order-2">
-            <Link href="/">
-              <span className="flex items-center text-xl font-bold tracking-widest text-gray-900 no-underline hover:text-gray-700 transition-colors">
-                NETTBUTIKK
-              </span>
-            </Link>
-          </div>
-          <div
-            className="flex items-center order-2 md:order-3"
-            id="nav-content"
-          >
-            <AlgoliaSearchBox />
-            <MobileSearch />
-            {!isMobile && <Cart />}
-          </div>
+              </div>
+              <Link href="/">
+                <span className="text-xl font-bold tracking-widest text-gray-900 hover:text-gray-700 transition-colors">
+                  NETTBUTIKK
+                </span>
+              </Link>
+              <div className="flex items-center space-x-3">
+                <AlgoliaSearchBox />
+                <Cart />
+              </div>
+            </div>
+          )}
         </div>
       </nav>
     </header>

From b3eb8416b4e608a5dd0771352ff70ed03bfd7af4 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 15 Jan 2025 23:34:42 +0100
Subject: [PATCH 03/10] Footer at bottom

---
 src/components/Layout/Layout.component.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout/Layout.component.tsx b/src/components/Layout/Layout.component.tsx
index 6da365eac..95322e9ab 100644
--- a/src/components/Layout/Layout.component.tsx
+++ b/src/components/Layout/Layout.component.tsx
@@ -60,18 +60,20 @@ const Layout = ({ children, title }: ILayoutProps) => {
       <Header title={title} />
       {title === 'Hjem' ? (
         <>
-          <main className="flex-grow">
+          <main className="flex-1">
             {children}
           </main>
         </>
       ) : (
-        <div className="container mx-auto px-6">
+        <div className="container mx-auto px-6 flex-1">
           <PageTitle title={title} />
-          <main className="flex-grow">{children}</main>
+          <main>{children}</main>
         </div>
       )}
-      <Footer />
-      <Stickynav />
+      <div className="mt-auto">
+        <Footer />
+        <Stickynav />
+      </div>
     </div>
   );
 };

From f53bfb625a1a65d199d9d2b920a5c93316134f3d Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 15 Jan 2025 23:54:23 +0100
Subject: [PATCH 04/10] Hide logo on ipad

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

diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index fe6d0d4d0..be4813704 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -48,7 +48,7 @@ const Navbar = () => {
                   </span>
                 </Link>
               </div>
-              <Link href="/">
+              <Link href="/" className="hidden lg:block">
                 <span className="text-xl font-bold tracking-widest text-gray-900 hover:text-gray-700 transition-colors">
                   NETTBUTIKK
                 </span>

From 0200b4414c63941b5d85e85edfc1bd47b32efa10 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Wed, 15 Jan 2025 23:55:25 +0100
Subject: [PATCH 05/10] Bold title

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

diff --git a/src/components/Product/DisplayProducts.component.tsx b/src/components/Product/DisplayProducts.component.tsx
index 9d0114acc..50cc5b977 100644
--- a/src/components/Product/DisplayProducts.component.tsx
+++ b/src/components/Product/DisplayProducts.component.tsx
@@ -108,7 +108,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 >
                   <span>
                     <div className="mt-4">
-                      <p className="text-base text-center cursor-pointer hover:text-gray-600 transition-colors">
+                      <p className="text-base font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
                         {name}
                       </p>
                     </div>

From 7dc96582da75ed7e12b1c0cfe4900894df19c05e Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:00:07 +0100
Subject: [PATCH 06/10] Animation

---
 src/components/Header/Navbar.component.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index be4813704..5980cdc2a 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -38,13 +38,19 @@ const Navbar = () => {
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-8">
                 <Link href="/produkter">
-                  <span className="text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
-                    Produkter
+                  <span className="text-sm uppercase tracking-wider group relative">
+                    <span className="relative inline-block">
+                      <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
+                      Produkter
+                    </span>
                   </span>
                 </Link>
                 <Link href="/kategorier">
-                  <span className="text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
-                    Kategorier
+                  <span className="text-sm uppercase tracking-wider group relative">
+                    <span className="relative inline-block">
+                      <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
+                      Kategorier
+                    </span>
                   </span>
                 </Link>
               </div>

From 6a094f94ffd45af7c15a55c03cb44061a3451d75 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:01:08 +0100
Subject: [PATCH 07/10] Font size

---
 src/components/Header/Navbar.component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/Navbar.component.tsx b/src/components/Header/Navbar.component.tsx
index 5980cdc2a..b933a2f7d 100644
--- a/src/components/Header/Navbar.component.tsx
+++ b/src/components/Header/Navbar.component.tsx
@@ -38,7 +38,7 @@ const Navbar = () => {
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-8">
                 <Link href="/produkter">
-                  <span className="text-sm uppercase tracking-wider group relative">
+                  <span className="text-base uppercase tracking-wider group relative">
                     <span className="relative inline-block">
                       <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
                       Produkter
@@ -46,7 +46,7 @@ const Navbar = () => {
                   </span>
                 </Link>
                 <Link href="/kategorier">
-                  <span className="text-sm uppercase tracking-wider group relative">
+                  <span className="text-base uppercase tracking-wider group relative">
                     <span className="relative inline-block">
                       <span className="absolute -bottom-1 left-0 w-0 h-px bg-gray-900 group-hover:w-full transition-all duration-500"></span>
                       Kategorier

From 779db89580a8f754b7408fdd1b021818470d98cd Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:03:49 +0100
Subject: [PATCH 08/10] Remove unused variable

---
 src/components/Layout/PageTitle.component.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Layout/PageTitle.component.tsx b/src/components/Layout/PageTitle.component.tsx
index c241b0c63..db5a0b3a3 100644
--- a/src/components/Layout/PageTitle.component.tsx
+++ b/src/components/Layout/PageTitle.component.tsx
@@ -1,6 +1,5 @@
 interface IPageTitleProps {
   title: string;
-  marginLeft?: boolean;
 }
 
 /**
@@ -10,7 +9,7 @@ interface IPageTitleProps {
  * @param {string} title - Title for the page. Is set in <title>{title}</title>
  * @returns {JSX.Element} - Rendered component
  */
-const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
+const PageTitle = ({ title }: IPageTitleProps) => (
   <section className="w-full bg-white border-b border-gray-200">
     <div className="container mx-auto py-12 px-6">
       <h1 className="text-2xl text-center tracking-wider text-gray-900 uppercase">

From 2170b16934823527870f3ac4a46a36f7202936fb Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:06:51 +0100
Subject: [PATCH 09/10] Hover animation

---
 .../Product/SingleProduct.component.tsx       | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Product/SingleProduct.component.tsx b/src/components/Product/SingleProduct.component.tsx
index c9c063f45..964ad5320 100644
--- a/src/components/Product/SingleProduct.component.tsx
+++ b/src/components/Product/SingleProduct.component.tsx
@@ -42,7 +42,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
   if (process.browser) {
     DESCRIPTION_WITHOUT_HTML = new DOMParser().parseFromString(
       description,
-      'text/html'
+      'text/html',
     ).body.textContent;
   }
 
@@ -58,17 +58,19 @@ const SingleProduct = ({ product }: IProductRootObject) => {
         <div className="container mx-auto px-4 py-8">
           <div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
             {/* Image Container */}
-            <div className="mb-6 md:mb-0">
-              <img
-                id="product-image"
-                src={
-                  image?.sourceUrl ||
-                  process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
-                  placeholderFallBack
-                }
-                alt={name}
-                className="w-full h-auto object-cover transition duration-500 ease-in-out transform md:hover:scale-105"
-              />
+            <div className="mb-6 md:mb-0 group">
+              <div className="max-w-xl mx-auto aspect-[3/4] relative overflow-hidden bg-gray-100">
+                <img
+                  id="product-image"
+                  src={
+                    image?.sourceUrl ||
+                    process.env.NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL ||
+                    placeholderFallBack
+                  }
+                  alt={name}
+                  className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
+                />
+              </div>
             </div>
 
             {/* Product Details Container */}
@@ -126,14 +128,16 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                     id="variant"
                     name="variant"
                     className="w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                    onChange={(e) => setSelectedVariation(Number(e.target.value))}
+                    onChange={(e) =>
+                      setSelectedVariation(Number(e.target.value))
+                    }
                   >
                     {product.variations.nodes.map(
                       ({ id, name, databaseId, stockQuantity }) => (
                         <option key={id} value={databaseId}>
                           {name.split('- ').pop()} - ({stockQuantity} på lager)
                         </option>
-                      )
+                      ),
                     )}
                   </select>
                 </div>

From 4a6b10118eeaa6d09a9fd1658bb25bd7a7ef7173 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 00:09:57 +0100
Subject: [PATCH 10/10] Cleanup

---
 src/components/Layout/Layout.component.tsx    | 6 +-----
 src/components/Layout/PageTitle.component.tsx | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Layout/Layout.component.tsx b/src/components/Layout/Layout.component.tsx
index 95322e9ab..b806f4447 100644
--- a/src/components/Layout/Layout.component.tsx
+++ b/src/components/Layout/Layout.component.tsx
@@ -59,11 +59,7 @@ const Layout = ({ children, title }: ILayoutProps) => {
     <div className="flex flex-col min-h-screen w-full mx-auto">
       <Header title={title} />
       {title === 'Hjem' ? (
-        <>
-          <main className="flex-1">
-            {children}
-          </main>
-        </>
+        <main className="flex-1">{children}</main>
       ) : (
         <div className="container mx-auto px-6 flex-1">
           <PageTitle title={title} />
diff --git a/src/components/Layout/PageTitle.component.tsx b/src/components/Layout/PageTitle.component.tsx
index db5a0b3a3..451cf1116 100644
--- a/src/components/Layout/PageTitle.component.tsx
+++ b/src/components/Layout/PageTitle.component.tsx
@@ -5,7 +5,6 @@ interface IPageTitleProps {
 /**
  * Renders page title for each page.
  * @function PageTitle
- * @param {boolean} marginLeft - Adds extra margin left if true
  * @param {string} title - Title for the page. Is set in <title>{title}</title>
  * @returns {JSX.Element} - Rendered component
  */