From a75a2e7feb6cd495a791c089a5e0e415fc194b44 Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Mon, 7 Aug 2023 15:06:13 +0200
Subject: [PATCH 1/6] Structural changes

---
 .../category-page-preview.tsx                 |  0
 .../category-page.tsx                         |  0
 .../home-page-preview.tsx                     |  0
 .../home-page.tsx                             |  0
 .../[[...slug]] => ...[[...slug]]}/page.tsx   |  4 +-
 .../product-page-preview.tsx                  |  0
 .../product-page.tsx                          |  0
 .../single-page-preview.tsx                   |  0
 .../single-page.tsx                           |  0
 app/[locale]/[slug]/page.tsx                  | 44 +++++++++
 app/[locale]/category/[slug]/page.tsx         | 41 ++++++++
 app/[locale]/layout.tsx                       |  9 +-
 app/[locale]/page.tsx                         | 27 ++++++
 app/[locale]/product/[slug]/page.tsx          | 89 ++++++++++++++++++
 components/layout/footer/footer.tsx           | 24 +++--
 components/layout/header/header.tsx           | 21 ++---
 .../modules/blurb-section/blurb-section.tsx   | 53 +++++------
 components/modules/hero/hero.tsx              | 57 ++++++------
 components/product/product-view.tsx           | 12 +--
 components/ui/card/card.tsx                   | 93 ++++++++-----------
 .../ui/locale-switcher/locale-switcher.tsx    |  4 +-
 components/ui/product-card/product-card.tsx   |  2 +-
 i18n-config.ts                                |  4 +-
 lib/sanity/queries.tsx                        | 54 +++++------
 middleware.ts                                 |  1 -
 25 files changed, 359 insertions(+), 180 deletions(-)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/category-page-preview.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/category-page.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/home-page-preview.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/home-page.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/page.tsx (98%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/product-page-preview.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/product-page.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/single-page-preview.tsx (100%)
 rename {app/[locale]/[[...slug]] => ...[[...slug]]}/single-page.tsx (100%)
 create mode 100644 app/[locale]/[slug]/page.tsx
 create mode 100644 app/[locale]/category/[slug]/page.tsx
 create mode 100644 app/[locale]/page.tsx
 create mode 100644 app/[locale]/product/[slug]/page.tsx

diff --git a/app/[locale]/[[...slug]]/category-page-preview.tsx b/...[[...slug]]/category-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/category-page-preview.tsx
rename to ...[[...slug]]/category-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/category-page.tsx b/...[[...slug]]/category-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/category-page.tsx
rename to ...[[...slug]]/category-page.tsx
diff --git a/app/[locale]/[[...slug]]/home-page-preview.tsx b/...[[...slug]]/home-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/home-page-preview.tsx
rename to ...[[...slug]]/home-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/home-page.tsx b/...[[...slug]]/home-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/home-page.tsx
rename to ...[[...slug]]/home-page.tsx
diff --git a/app/[locale]/[[...slug]]/page.tsx b/...[[...slug]]/page.tsx
similarity index 98%
rename from app/[locale]/[[...slug]]/page.tsx
rename to ...[[...slug]]/page.tsx
index 0ab67b638..af5b76004 100644
--- a/app/[locale]/[[...slug]]/page.tsx
+++ b/...[[...slug]]/page.tsx
@@ -41,7 +41,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
 
   return (
     <div className="flex flex-col">
-      <Header localeData={localeData} />
+      <Header />
       <main className="flex-1">
         <article>
           {isEnabled ? (
@@ -65,7 +65,7 @@ export default async function Page({ params }: { params: { slug: string[]; local
           )}
         </article>
       </main>
-      <Footer />
+      <Footer localeData={localeData} />
     </div>
   );
 }
diff --git a/app/[locale]/[[...slug]]/product-page-preview.tsx b/...[[...slug]]/product-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/product-page-preview.tsx
rename to ...[[...slug]]/product-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/product-page.tsx b/...[[...slug]]/product-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/product-page.tsx
rename to ...[[...slug]]/product-page.tsx
diff --git a/app/[locale]/[[...slug]]/single-page-preview.tsx b/...[[...slug]]/single-page-preview.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/single-page-preview.tsx
rename to ...[[...slug]]/single-page-preview.tsx
diff --git a/app/[locale]/[[...slug]]/single-page.tsx b/...[[...slug]]/single-page.tsx
similarity index 100%
rename from app/[locale]/[[...slug]]/single-page.tsx
rename to ...[[...slug]]/single-page.tsx
diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[slug]/page.tsx
new file mode 100644
index 000000000..a2f51cdd3
--- /dev/null
+++ b/app/[locale]/[slug]/page.tsx
@@ -0,0 +1,44 @@
+import DynamicContentManager from 'components/layout/dynamic-content-manager';
+import { pageQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export const runtime = 'edge';
+
+export const revalidate = 43200; // 12 hours in seconds
+
+export async function generateMetadata({
+  params
+}: {
+  params: { locale: string; slug: string };
+}): Promise<Metadata> {
+  const page = await clientFetch(pageQuery, params);
+
+  if (!page) return notFound();
+
+  return {
+    title: page.seo?.title || page.title,
+    description: page.seo?.description || page.bodySummary,
+    openGraph: {
+      publishedTime: page.createdAt,
+      modifiedTime: page.updatedAt,
+      type: 'article'
+    }
+  };
+}
+
+interface PageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default async function Page({ params }: PageParams) {
+  const page = await clientFetch(pageQuery, params);
+
+  if (!page) return notFound();
+
+  return <DynamicContentManager content={page?.content} />;
+}
diff --git a/app/[locale]/category/[slug]/page.tsx b/app/[locale]/category/[slug]/page.tsx
new file mode 100644
index 000000000..a069cb3e1
--- /dev/null
+++ b/app/[locale]/category/[slug]/page.tsx
@@ -0,0 +1,41 @@
+import Text from 'components/ui/text/text';
+import { categoryQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const category = await clientFetch(categoryQuery, params);
+
+  if (!category) return notFound();
+
+  return {
+    title: category.seo.title || category.title,
+    description: category.seo.description || category.description
+  };
+}
+
+interface CategoryPageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export default async function ProductPage({ params }: CategoryPageParams) {
+  const category = await clientFetch(categoryQuery, params);
+
+  if (!category) return notFound();
+
+  const { title } = category;
+
+  return (
+    <div className="mb-8 flex w-full flex-col px-4 lg:my-16 lg:px-8 2xl:px-16">
+      <Text variant={'pageHeading'}>{title}</Text>
+    </div>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 3d2a7833c..36ec12ff1 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,7 +1,10 @@
+import Footer from 'components/layout/footer/footer';
+import Header from 'components/layout/header/header';
 import { NextIntlClientProvider } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
+import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
 const SITE_NAME = 'KM Storefront';
@@ -36,7 +39,7 @@ const inter = Inter({
 });
 
 export function generateStaticParams() {
-  return [{ locale: 'sv' }, { locale: 'en' }];
+  return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
 }
 
 interface LocaleLayoutProps {
@@ -59,7 +62,9 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
     <html lang={locale} className={inter.variable}>
       <body className="flex min-h-screen flex-col">
         <NextIntlClientProvider locale={locale} messages={messages}>
-          {children}
+          <Header />
+          <main className="flex-1">{children}</main>
+          <Footer />
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 000000000..4cdfde43d
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,27 @@
+import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
+import { homePageQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+export const runtime = 'edge';
+
+export const metadata = {
+  description: 'High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm.',
+  openGraph: {
+    type: 'website'
+  }
+};
+
+interface HomePageParams {
+  params: {
+    locale: string;
+  };
+}
+
+export default async function HomePage({ params }: HomePageParams) {
+  const data = await clientFetch(homePageQuery, params);
+
+  return (
+    <>
+      <DynamicContentManager content={data?.content} />
+    </>
+  );
+}
diff --git a/app/[locale]/product/[slug]/page.tsx b/app/[locale]/product/[slug]/page.tsx
new file mode 100644
index 000000000..db6ebef81
--- /dev/null
+++ b/app/[locale]/product/[slug]/page.tsx
@@ -0,0 +1,89 @@
+import ProductView from 'components/product/product-view';
+import { productQuery } from 'lib/sanity/queries';
+import { clientFetch } from 'lib/sanity/sanity.client';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+interface ProductPageParams {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const product = await clientFetch(productQuery, params);
+
+  if (!product) return notFound();
+
+  const { alt } = product.images[0] || '';
+  const { url } = product.images[0].asset || {};
+  const { width, height } = product.images[0].asset.metadata.dimensions;
+  // const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    // @TODO ROBOTS SETTINGS???
+    // robots: {
+    //   index: indexable,
+    //   follow: indexable,
+    //   googleBot: {
+    //     index: indexable,
+    //     follow: indexable
+    //   }
+    // },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage({ params }: ProductPageParams) {
+  const product = await clientFetch(productQuery, params);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    // @TODO UPDATE TO STORM URL???
+    image: product.images[0].asset.url
+    // offers: {
+    //   '@type': 'AggregateOffer',
+    //   availability: product.availableForSale
+    //     ? 'https://schema.org/InStock'
+    //     : 'https://schema.org/OutOfStock',
+    //   priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+    //   highPrice: product.priceRange.maxVariantPrice.amount,
+    //   lowPrice: product.priceRange.minVariantPrice.amount
+    // }
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <ProductView product={product} relatedProducts={[]} />;
+    </>
+  );
+}
diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx
index d20e96d72..b4b20657c 100644
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@@ -1,28 +1,40 @@
-'use client'
+'use client';
 
+// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+// interface FooterProps {
+//   localeData: {
+//     type: string;
+//     locale: string;
+//     translations: [];
+//   };
+// }
 
 const Footer = () => {
+  // const locale = useLocale();
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
   const t = useTranslations('ui');
 
   return (
     <footer className="border-t border-ui-border bg-app">
-      <div className="mx-auto w-full py-4 px-4 lg:py-6 lg:px-8 2xl:px-16 2xl:py-8">
-        <div className="flex flex-col w-full space-y-2 items-center transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0">
+      <div className="mx-auto flex w-full flex-col">
+        <div className="flex w-full flex-col items-center space-y-2 p-4 transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
-          <p className="text-sm text-low-contrast">
+          {/* <LocaleSwitcher localeData={localeData} currentLocale={locale} /> */}
+        </div>
+        <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
+          <p className="text-xs text-white">
             &copy; {copyrightDate} Kodamera - {t('copyright')}
           </p>
         </div>
       </div>
     </footer>
   );
-}
+};
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index def85641d..8244d222e 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import {
   NavigationMenu,
@@ -14,15 +13,9 @@ import Link from 'next/link';
 import { FC } from 'react';
 import HeaderRoot from './header-root';
 
-interface HeaderProps {
-  localeData: {
-    type: string;
-    locale: string;
-    translations: [];
-  };
-}
+interface HeaderProps {}
 
-const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
+const Header: FC<HeaderProps> = () => {
   const locale = useLocale();
 
   return (
@@ -43,21 +36,21 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
             <NavigationMenu delayDuration={0} className="hidden lg:block">
               <NavigationMenuList>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/junior'} legacyBehavior passHref>
+                  <Link href={'/category/barn'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Junior
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/trojor'} legacyBehavior passHref>
+                  <Link href={'/category/trojor'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Tröjor
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
-                  <Link href={'/kategori/byxor'} legacyBehavior passHref>
+                  <Link href={'/category/byxor'} legacyBehavior passHref>
                     <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       Byxor
                     </NavigationMenuLink>
@@ -66,9 +59,7 @@ const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
               </NavigationMenuList>
             </NavigationMenu>
           </div>
-          <div>
-            <LocaleSwitcher localeData={localeData} currentLocale={locale} />
-          </div>
+          <div></div>
         </div>
       </div>
     </HeaderRoot>
diff --git a/components/modules/blurb-section/blurb-section.tsx b/components/modules/blurb-section/blurb-section.tsx
index ee5241d4e..1ed8ddc0d 100644
--- a/components/modules/blurb-section/blurb-section.tsx
+++ b/components/modules/blurb-section/blurb-section.tsx
@@ -1,16 +1,16 @@
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
-const Card = dynamic(() => import('components/ui/card'))
+import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
+const Card = dynamic(() => import('components/ui/card'));
 
-import Text from 'components/ui/text'
+import Text from 'components/ui/text';
 
 interface BlurbSectionProps {
-  blurbs: any
-  title: string
-  mobileLayout: string
-  desktopLayout: string
-  imageFormat: 'square' | 'portrait' | 'landscape'
+  blurbs: any;
+  title: string;
+  mobileLayout: string;
+  desktopLayout: string;
+  imageFormat: 'square' | 'portrait' | 'landscape';
 }
 
 const BlurbSection = ({
@@ -18,37 +18,33 @@ const BlurbSection = ({
   mobileLayout,
   desktopLayout,
   blurbs,
-  imageFormat,
+  imageFormat
 }: BlurbSectionProps) => {
   const gridLayout =
     desktopLayout === '2-column'
       ? 'lg:grid-cols-2'
       : desktopLayout === '3-column'
       ? 'lg:grid-cols-3'
-      : 'lg:grid-cols-4'
+      : 'lg:grid-cols-4';
 
-  const sliderLayout =
-    desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4
+  const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4;
 
   return (
     <div>
       {title ? (
-        <Text
-          className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
-          variant="sectionHeading"
-        >
+        <Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
           {title}
         </Text>
       ) : (
         <Text
-          className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
+          className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
           variant="sectionHeading"
         >
           No title provided yet
         </Text>
       )}
       <div
-        className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${
+        className={`grid px-4 ${gridLayout} gap-x-4 gap-y-8 ${
           mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden'
         } lg:px-8 2xl:!px-16`}
       >
@@ -63,15 +59,11 @@ const BlurbSection = ({
                 imageFormat={blurb?.imageFormat}
               />
             </div>
-          )
+          );
         })}
       </div>
 
-      <div
-        className={`${
-          mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
-        }`} 
-      >
+      <div className={`${mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'}`}>
         {blurbs && (
           <Carousel
             gliderClasses={'px-4 lg:px-8 2xl:px-16'}
@@ -80,9 +72,8 @@ const BlurbSection = ({
             responsive={{
               breakpoint: 1024,
               settings: {
-                slidesToShow:
-                  sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout,
-              },
+                slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout
+              }
             }}
           >
             {blurbs.map((blurb: any, index: number) => (
@@ -100,7 +91,7 @@ const BlurbSection = ({
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default BlurbSection
+export default BlurbSection;
diff --git a/components/modules/hero/hero.tsx b/components/modules/hero/hero.tsx
index 928a078ff..9b8d46346 100644
--- a/components/modules/hero/hero.tsx
+++ b/components/modules/hero/hero.tsx
@@ -1,41 +1,40 @@
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-
-import Link from 'components/ui/link/link'
-import Text from 'components/ui/text/text'
-const SanityImage = dynamic(() => import('components/ui/sanity-image'))
+import Link from 'components/ui/link/link';
+import Text from 'components/ui/text/text';
+const SanityImage = dynamic(() => import('components/ui/sanity-image'));
 
 interface HeroProps {
-  variant: string
-  text?: string
-  label?: string
-  title: string
-  image: object | any
-  desktopImage: object | any
+  variant: string;
+  text?: string;
+  label?: string;
+  title: string;
+  image: object | any;
+  desktopImage: object | any;
   link: {
-    title: string
+    title: string;
     reference: {
-      title: string
+      title: string;
       slug: {
-        current: string
-      }
-    }
-  }
+        current: string;
+      };
+    };
+  };
 }
 
-type HeroSize = keyof typeof heroSize
+type HeroSize = keyof typeof heroSize;
 
 const heroSize = {
-  fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(100vh-4rem)]',
-  halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]',
-}
+  fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(75vh-4rem)]',
+  halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]'
+};
 
 const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
-  const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen
+  const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
 
   return (
     <div
-      className={`relative w-screen ${heroClass} flex flex-col justify-end relative text-high-contrast`}
+      className={`relative w-screen ${heroClass} relative flex flex-col justify-end text-high-contrast`}
     >
       {image && (
         <SanityImage
@@ -44,10 +43,10 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
           priority={true}
           width={1200}
           height={600}
-          className="absolute inset-0 h-full w-full object-cover z-10"
+          className="absolute inset-0 z-10 h-full w-full object-cover"
         />
       )}
-      <div className="flex flex-col items-start text-high-contrast absolute max-w-md z-50 left-4 bottom-5 lg:max-w-2xl lg:bottom-8 lg:left-8 2xl:left-16 2xl:bottom-16">
+      <div className="absolute bottom-5 left-4 z-50 flex max-w-md flex-col items-start text-high-contrast lg:bottom-8 lg:left-8 lg:max-w-2xl 2xl:bottom-16 2xl:left-16">
         {label && (
           <Text className="mb-1 lg:mb-2" variant="label">
             {label}
@@ -67,7 +66,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
         )}
         {link?.reference && (
           <Link
-            className="inline-flex transition bg-high-contrast text-white text-base py-4 px-10 mt-6 hover:bg-low-contrast lg:mt-8"
+            className="mt-6 inline-flex bg-high-contrast px-10 py-4 text-base text-white transition hover:bg-low-contrast lg:mt-8"
             href={link.reference.slug.current}
           >
             {link?.title ? link.title : link.reference.title}
@@ -75,7 +74,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Hero
+export default Hero;
diff --git a/components/product/product-view.tsx b/components/product/product-view.tsx
index 106499290..07176bead 100644
--- a/components/product/product-view.tsx
+++ b/components/product/product-view.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
-import Price from 'components/product/price';
-import SanityImage from 'components/ui/sanity-image';
+import SanityImage from 'components/ui/sanity-image/sanity-image';
+import Text from 'components/ui/text/text';
 import { Product } from 'lib/storm/types/product';
 import { cn } from 'lib/utils';
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
+import Price from './price';
 const ProductCard = dynamic(() => import('components/ui/product-card'));
-const Text = dynamic(() => import('components/ui/text'));
 interface ProductViewProps {
   product: Product;
   relatedProducts: Product[];
@@ -27,7 +27,7 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
           <div className={`pdp aspect-square lg:hidden`}>
             {images && (
               <Carousel
-                hasArrows={true}
+                hasArrows={images.length > 1 ? true : false}
                 hasDots={false}
                 gliderClasses={'lg:px-8 2xl:px-16'}
                 slidesToScroll={1}
@@ -69,11 +69,11 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
           </div>
         </div>
 
-        <div className="col-span-1 mx-auto flex h-auto w-full flex-col px-4 py-6 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
+        <div className="col-span-1 mx-auto flex h-auto w-full flex-col p-4 lg:sticky lg:top-8 lg:col-span-5 lg:px-8 lg:py-0 lg:pr-0 2xl:top-16 2xl:px-16 2xl:pr-0">
           <Text variant={'productHeading'}>{product.name}</Text>
 
           <Price
-            className="text-sm font-medium leading-tight lg:text-base"
+            className="mt-2 text-sm font-medium leading-tight lg:text-base"
             amount={`${product.price.value}`}
             currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
           />
diff --git a/components/ui/card/card.tsx b/components/ui/card/card.tsx
index 723c63021..5dbb1e442 100644
--- a/components/ui/card/card.tsx
+++ b/components/ui/card/card.tsx
@@ -1,48 +1,49 @@
-'use client'
+'use client';
 
-import SanityImage from 'components/ui/sanity-image'
-import { cn } from 'lib/utils'
-import Link from 'next/link'
-import { FC } from 'react'
+import SanityImage from 'components/ui/sanity-image';
+import { cn } from 'lib/utils';
+import Link from 'next/link';
+import { FC } from 'react';
 
 interface CardProps {
-  className?: string
-  title: string
-  image: object | any
-  link: object | any
-  text?: string
-  imageFormat?: 'square' | 'portrait' | 'landscape'
+  className?: string;
+  title: string;
+  image: object | any;
+  link: object | any;
+  text?: string;
+  imageFormat?: 'square' | 'portrait' | 'landscape';
 }
 
-const placeholderImg = '/product-img-placeholder.svg'
+const placeholderImg = '/product-img-placeholder.svg';
 
-const Card: FC<CardProps> = ({
-  className,
-  title,
-  image,
-  link,
-  text,
-  imageFormat = 'square',
-}) => {
-  const rootClassName = cn('relative', className)
+const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
+  const rootClassName = cn('relative', className);
 
-  const { linkType } = link
+  const { linkType } = link;
 
   const imageWrapperClasses = cn('w-full h-full overflow-hidden relative', {
     ['aspect-square']: imageFormat === 'square',
     ['aspect-[3/4]']: imageFormat === 'portrait',
-    ['aspect-[4/3]']: imageFormat === 'landscape',
-  })
-  const imageClasses = cn('object-cover w-full h-full')
+    ['aspect-[4/3]']: imageFormat === 'landscape'
+  });
+  const imageClasses = cn('object-cover w-full h-full');
 
   function Card() {
     if (linkType === 'internal') {
+      const type = link.internalLink.reference._type;
+
+      let href = '';
+
+      if (type === 'product') {
+        href = `/product/${link.internalLink.reference.slug.current}`;
+      } else if (type === 'category') {
+        href = `/category/${link.internalLink.reference.slug.current}`;
+      } else {
+        return `${link.internalLink.reference.slug.current}`;
+      }
+
       return (
-        <Link
-          href={link.internalLink.reference.slug.current}
-          className={rootClassName}
-          aria-label={title}
-        >
+        <Link href={href} className={rootClassName} aria-label={title}>
           <div className="flex flex-col">
             {image && (
               <div className={imageWrapperClasses}>
@@ -54,25 +55,17 @@ const Card: FC<CardProps> = ({
                 />
               </div>
             )}
-            <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+            <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
               {title}
             </h3>
-            {text && (
-              <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-                {text}
-              </p>
-            )}
+            {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
           </div>
         </Link>
-      )
+      );
     }
 
     return (
-      <a
-        href={link.externalLink.url}
-        className={rootClassName}
-        aria-label={title}
-      >
+      <a href={link.externalLink.url} className={rootClassName} aria-label={title}>
         <div className="flex flex-col">
           {image && (
             <div className={imageWrapperClasses}>
@@ -84,20 +77,16 @@ const Card: FC<CardProps> = ({
               />
             </div>
           )}
-          <h3 className="mt-2 text-high-contrast font-medium text-sm underline underline-offset-2 lg:text-lg lg:mt-3 lg:underline-offset-4 2xl:text-xl">
+          <h3 className="mt-2 text-sm font-medium text-high-contrast underline underline-offset-2 lg:mt-3 lg:text-lg lg:underline-offset-4 2xl:text-xl">
             {title}
           </h3>
-          {text && (
-            <p className="text-sm mt-1 text-low-contrast lg:text-base lg:mt-2">
-              {text}
-            </p>
-          )}
+          {text && <p className="mt-1 text-sm text-low-contrast lg:mt-2 lg:text-base">{text}</p>}
         </div>
       </a>
-    )
+    );
   }
 
-  return <Card />
-}
+  return <Card />;
+};
 
-export default Card
+export default Card;
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
index da7381659..bd9150c2a 100644
--- a/components/ui/locale-switcher/locale-switcher.tsx
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -7,7 +7,7 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { i18n } from '../../../i18n-config';
+import { supportedLanguages } from '../../../i18n-config';
 
 interface LocaleSwitcherProps {
   currentLocale: string;
@@ -58,7 +58,7 @@ export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwit
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="drop-shadow-xl">
           <ul className="">
-            {i18n.locales.map((locale) => {
+            {supportedLanguages.locales.map((locale) => {
               if (currentLocale === locale.id) {
                 return;
               } else {
diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx
index fb73aa980..96f29ddd0 100644
--- a/components/ui/product-card/product-card.tsx
+++ b/components/ui/product-card/product-card.tsx
@@ -23,7 +23,7 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
 
   return (
     <Link
-      href={`${product.slug}`}
+      href={`/product/${product.slug}`}
       className={rootClassName}
       aria-label={product.name}
       locale={product.locale}
diff --git a/i18n-config.ts b/i18n-config.ts
index c320efda0..8a34813cd 100644
--- a/i18n-config.ts
+++ b/i18n-config.ts
@@ -1,4 +1,4 @@
-export const i18n = {
+export const supportedLanguages = {
   defaultLocale: 'sv',
   locales: [
     {
@@ -12,4 +12,4 @@ export const i18n = {
   ],
 } as const
 
-export type Locale = typeof i18n['locales'][number]
\ No newline at end of file
+export type Locale = typeof supportedLanguages['locales'][number]
\ No newline at end of file
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index 1e35dcbff..945046a9a 100644
--- a/lib/sanity/queries.tsx
+++ b/lib/sanity/queries.tsx
@@ -107,6 +107,7 @@ export const modules = `
     desktopLayout,
     imageFormat,
     blurbs[]->{
+      _type,
       title,
       text,
       link {
@@ -209,29 +210,27 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la
     "slug": slug.current,
     "locale": language
   },
-  "product": {
-    id,
-    "name": title,
-    description,
-    "descriptionHtml": "",
-    images[] {
-      ${imageFields}
-    },
-    price {
-      value,
-      currencyCode,
-      retailPrice
-    },
-    options[] {
-      id,
-      displayName,
-      values[] {
-        label,
-        "hexColors": hexColors.hex
-      }
-    },
-    "variants": []
+  id,
+  "name": title,
+  description,
+  "descriptionHtml": "",
+  images[] {
+    ${imageFields}
   },
+  price {
+    value,
+    currencyCode,
+    retailPrice
+  },
+  options[] {
+    id,
+    displayName,
+    values[] {
+      label,
+      "hexColors": hexColors.hex
+    }
+  },
+  "variants": [],
   seo {
     ${seoFields}
   }
@@ -243,15 +242,8 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
   title,
   "slug": slug.current,
   "locale": language,
-  showBanner,
-  banner {
-    _type,
-    _key,
-    title,
-    text,
-    image {
-      ${imageFields}
-    }
+  image {
+    ${imageFields}
   },
   "translations": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
     title,
diff --git a/middleware.ts b/middleware.ts
index ece2879b7..decff6084 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -6,7 +6,6 @@ export default createMiddleware({
  
   // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
   defaultLocale: 'sv',
-  localeDetection: false
 });
  
 export const config = {

From 6527974989136f3b54c8955c46ea0bd7e704270f Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Mon, 7 Aug 2023 16:40:42 +0200
Subject: [PATCH 2/6] Catch all routes

---
 .env.example                                  |  1 +
 app/[locale]/{[slug] => [...slug]}/page.tsx   | 41 +++++++++++++++--
 app/[locale]/layout.tsx                       | 19 +++-----
 app/[locale]/product/[slug]/page.tsx          |  2 +
 components/layout/footer/copyright.tsx        | 15 ++++++
 components/layout/footer/footer.tsx           | 18 ++------
 components/ui/card/card.tsx                   |  4 +-
 .../ui/locale-switcher/locale-switcher.tsx    | 46 ++++++++++---------
 8 files changed, 93 insertions(+), 53 deletions(-)
 rename app/[locale]/{[slug] => [...slug]}/page.tsx (54%)
 create mode 100644 components/layout/footer/copyright.tsx

diff --git a/.env.example b/.env.example
index 821ecb11f..9ac741a18 100644
--- a/.env.example
+++ b/.env.example
@@ -19,5 +19,6 @@ VERCEL_GIT_PULL_REQUEST_ID=""
 TWITTER_CREATOR="@kodamera"
 TWITTER_SITE="https://kodamera.se"
 SITE_NAME="KM Storefront"
+SITE_DESCRIPTION="High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm."
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=
 SHOPIFY_STORE_DOMAIN=
diff --git a/app/[locale]/[slug]/page.tsx b/app/[locale]/[...slug]/page.tsx
similarity index 54%
rename from app/[locale]/[slug]/page.tsx
rename to app/[locale]/[...slug]/page.tsx
index a2f51cdd3..6a621b175 100644
--- a/app/[locale]/[slug]/page.tsx
+++ b/app/[locale]/[...slug]/page.tsx
@@ -11,9 +11,25 @@ export const revalidate = 43200; // 12 hours in seconds
 export async function generateMetadata({
   params
 }: {
-  params: { locale: string; slug: string };
+  params: { locale: string; slug: string[] };
 }): Promise<Metadata> {
-  const page = await clientFetch(pageQuery, params);
+  let queryParams = {
+    locale: params.locale,
+    slug: ''
+  };
+
+  if (params.slug.length > 1) {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug.join('/')}`
+    };
+  } else {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug}`
+    };
+  }
+  const page = await clientFetch(pageQuery, queryParams);
 
   if (!page) return notFound();
 
@@ -31,12 +47,29 @@ export async function generateMetadata({
 interface PageParams {
   params: {
     locale: string;
-    slug: string;
+    slug: string[];
   };
 }
 
 export default async function Page({ params }: PageParams) {
-  const page = await clientFetch(pageQuery, params);
+  let queryParams = {
+    locale: params.locale,
+    slug: ''
+  };
+
+  if (params.slug.length > 1) {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug.join('/')}`
+    };
+  } else {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug}`
+    };
+  }
+
+  const page = await clientFetch(pageQuery, queryParams);
 
   if (!page) return notFound();
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 36ec12ff1..105907983 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -7,27 +7,22 @@ import { ReactNode } from 'react';
 import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
-const SITE_NAME = 'KM Storefront';
-const SITE_DESCRIPTION = 'Webb och digitalbyrå från Göteborg';
-const TWITTER_CREATOR = '@kodamera.se';
-const TWITTER_SITE = 'https://kodamera.se';
-
 export const metadata = {
   title: {
-    default: SITE_NAME,
-    template: `%s | ${SITE_NAME}`
+    default: process.env.SITE_NAME,
+    template: `%s | ${process.env.SITE_NAME}`
   },
-  description: SITE_DESCRIPTION,
+  description: process.env.SITE_DESCRIPTION,
   robots: {
     follow: true,
     index: true
   },
-  ...(TWITTER_CREATOR &&
-    TWITTER_SITE && {
+  ...(process.env.TWITTER_CREATOR &&
+    process.env.TWITTER_SITE && {
       twitter: {
         card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
-        site: TWITTER_SITE
+        creator: process.env.TWITTER_CREATOR,
+        site: process.env.TWITTER_SITE
       }
     })
 };
diff --git a/app/[locale]/product/[slug]/page.tsx b/app/[locale]/product/[slug]/page.tsx
index db6ebef81..19083ed90 100644
--- a/app/[locale]/product/[slug]/page.tsx
+++ b/app/[locale]/product/[slug]/page.tsx
@@ -55,6 +55,8 @@ export async function generateMetadata({
 export default async function ProductPage({ params }: ProductPageParams) {
   const product = await clientFetch(productQuery, params);
 
+  console.log(params);
+
   if (!product) return notFound();
 
   const productJsonLd = {
diff --git a/components/layout/footer/copyright.tsx b/components/layout/footer/copyright.tsx
new file mode 100644
index 000000000..d93063b4e
--- /dev/null
+++ b/components/layout/footer/copyright.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+export default function CopyRight() {
+  const currentYear = new Date().getFullYear();
+  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
+  const t = useTranslations('ui');
+
+  return (
+    <p className="text-xs text-white">
+      &copy; {copyrightDate} Kodamera - {t('copyright')}
+    </p>
+  );
+}
diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx
index b4b20657c..5bdeadc04 100644
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@@ -1,9 +1,8 @@
-'use client';
-
-// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
+import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
-import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import CopyRight from './copyright';
+
 // interface FooterProps {
 //   localeData: {
 //     type: string;
@@ -13,11 +12,6 @@ import Link from 'next/link';
 // }
 
 const Footer = () => {
-  // const locale = useLocale();
-  const currentYear = new Date().getFullYear();
-  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const t = useTranslations('ui');
-
   return (
     <footer className="border-t border-ui-border bg-app">
       <div className="mx-auto flex w-full flex-col">
@@ -25,12 +19,10 @@ const Footer = () => {
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
-          {/* <LocaleSwitcher localeData={localeData} currentLocale={locale} /> */}
+          <LocaleSwitcher />
         </div>
         <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
-          <p className="text-xs text-white">
-            &copy; {copyrightDate} Kodamera - {t('copyright')}
-          </p>
+          <CopyRight />
         </div>
       </div>
     </footer>
diff --git a/components/ui/card/card.tsx b/components/ui/card/card.tsx
index 5dbb1e442..09cd57d76 100644
--- a/components/ui/card/card.tsx
+++ b/components/ui/card/card.tsx
@@ -14,8 +14,6 @@ interface CardProps {
   imageFormat?: 'square' | 'portrait' | 'landscape';
 }
 
-const placeholderImg = '/product-img-placeholder.svg';
-
 const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
   const rootClassName = cn('relative', className);
 
@@ -39,7 +37,7 @@ const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat
       } else if (type === 'category') {
         href = `/category/${link.internalLink.reference.slug.current}`;
       } else {
-        return `${link.internalLink.reference.slug.current}`;
+        href = `${link.internalLink.reference.slug.current}`;
       }
 
       return (
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
index bd9150c2a..c6057f9b3 100644
--- a/components/ui/locale-switcher/locale-switcher.tsx
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -1,43 +1,47 @@
+'use client';
+
 import LanguageIcon from 'components/icons/language';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger
 } from 'components/ui/dropdown/dropdown';
+import { useLocale } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { supportedLanguages } from '../../../i18n-config';
 
-interface LocaleSwitcherProps {
-  currentLocale: string;
-  localeData: {
-    type: string;
-    locale: string;
-    translations: [];
-  };
-}
+// interface LocaleSwitcherProps {
+// localeData: {
+//   type: string;
+//   locale: string;
+//   translations: [];
+// };
+// }
 
-export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwitcherProps) {
+export default function LocaleSwitcher() {
   const pathName = usePathname();
-  const translations = localeData.translations;
+  const currentLocale = useLocale();
+
+  // const translations = localeData.translations;
 
   const redirectedPathName = (locale: string) => {
-    if (!pathName || translations.length === 0) return '/';
+    if (!pathName) return '/';
 
-    if (translations.length > 0) {
-      const translation = translations.find((obj) => {
-        return obj['locale'] === locale;
-      });
+    // if (translations.length > 0) {
+    //   const translation = translations.find((obj) => {
+    //     return obj['locale'] === locale;
+    //   });
 
-      if (translation) {
-        const url = `/${translation['locale']}${translation['slug']}`;
+    //   if (translation) {
+    //     const url = `/${translation['locale']}${translation['slug']}`;
 
-        return url;
-      }
-    }
+    //     return url;
+    //   }
+    // }
 
-    return '/';
+    return `/${locale}`;
   };
 
   const [isOpen, setIsOpen] = useState(false);

From 3e513eaf99e35a215bfd4f7e92c571c8c1279875 Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Tue, 8 Aug 2023 11:46:46 +0200
Subject: [PATCH 3/6] Updates

---
 app/[locale]/layout.tsx                       |  37 ++-
 components/cart/actions.ts                    |  69 +++++
 components/cart/add-to-cart.tsx               |  68 +++++
 components/cart/button.tsx                    |  64 -----
 components/cart/close-cart.tsx                |  10 +
 components/cart/delete-item-button.tsx        |  56 ++--
 components/cart/edit-item-quantity-button.tsx |  67 +++--
 components/cart/index.tsx                     |  15 +-
 components/cart/modal.tsx                     | 244 +++++++++---------
 components/cart/open-cart.tsx                 |  24 ++
 components/grid/index.tsx                     |  26 --
 components/grid/three-items.tsx               |  53 ----
 components/grid/tile.tsx                      |  70 -----
 components/layout/footer/copyright.tsx        |   2 -
 components/layout/header/header.tsx           |  41 +--
 components/layout/product-grid-items.tsx      |  29 ---
 components/modules/hero/hero.tsx              |   2 +-
 components/preview-suspense.tsx               |   4 -
 components/price.tsx                          |  24 ++
 components/product/variant-selector.tsx       | 129 ++++-----
 components/prose.tsx                          |   2 +-
 components/ui/product-card/product-card.tsx   |   7 -
 components/ui/wishlist-button/index.ts        |   1 -
 .../ui/wishlist-button/wishlist-button.tsx    |  79 ------
 lib/constants.tsx                             |  25 --
 lib/storm/types/product.ts                    |  55 ----
 package.json                                  |   6 +-
 27 files changed, 449 insertions(+), 760 deletions(-)
 create mode 100644 components/cart/actions.ts
 create mode 100644 components/cart/add-to-cart.tsx
 delete mode 100644 components/cart/button.tsx
 create mode 100644 components/cart/close-cart.tsx
 create mode 100644 components/cart/open-cart.tsx
 delete mode 100644 components/grid/index.tsx
 delete mode 100644 components/grid/three-items.tsx
 delete mode 100644 components/grid/tile.tsx
 delete mode 100644 components/layout/product-grid-items.tsx
 delete mode 100644 components/preview-suspense.tsx
 create mode 100644 components/price.tsx
 delete mode 100644 components/ui/wishlist-button/index.ts
 delete mode 100644 components/ui/wishlist-button/wishlist-button.tsx

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 105907983..e8999055b 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,10 +1,9 @@
 import Footer from 'components/layout/footer/footer';
 import Header from 'components/layout/header/header';
-import { NextIntlClientProvider } from 'next-intl';
+import { useLocale } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
-import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
 export const metadata = {
@@ -33,34 +32,30 @@ const inter = Inter({
   variable: '--font-inter'
 });
 
-export function generateStaticParams() {
-  return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
-}
+// export function generateStaticParams() {
+//   return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
+// }
 
-interface LocaleLayoutProps {
+export default function LocaleLayout({
+  children,
+  params
+}: {
   children: ReactNode;
-  params: {
-    locale: string;
-  };
-}
+  params: { locale: string };
+}) {
+  const locale = useLocale();
 
-export default async function LocaleLayout({ children, params: { locale } }: LocaleLayoutProps) {
-  let messages;
-
-  try {
-    messages = (await import(`../../messages/${locale}.json`)).default;
-  } catch (error) {
+  // Show a 404 error if the user requests an unknown locale
+  if (params.locale !== locale) {
     notFound();
   }
 
   return (
     <html lang={locale} className={inter.variable}>
       <body className="flex min-h-screen flex-col">
-        <NextIntlClientProvider locale={locale} messages={messages}>
-          <Header />
-          <main className="flex-1">{children}</main>
-          <Footer />
-        </NextIntlClientProvider>
+        <Header />
+        <main className="flex-1">{children}</main>
+        <Footer />
       </body>
     </html>
   );
diff --git a/components/cart/actions.ts b/components/cart/actions.ts
new file mode 100644
index 000000000..3fb013194
--- /dev/null
+++ b/components/cart/actions.ts
@@ -0,0 +1,69 @@
+'use server';
+
+import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
+
+export const addItem = async (variantId: string | undefined): Promise<String | undefined> => {
+  let cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
+  if (!cartId || !cart) {
+    cart = await createCart();
+    cartId = cart.id;
+    cookies().set('cartId', cartId);
+  }
+
+  if (!variantId) {
+    return 'Missing product variant ID';
+  }
+
+  try {
+    await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
+  } catch (e) {
+    return 'Error adding item to cart';
+  }
+};
+
+export const removeItem = async (lineId: string): Promise<String | undefined> => {
+  const cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+  try {
+    await removeFromCart(cartId, [lineId]);
+  } catch (e) {
+    return 'Error removing item from cart';
+  }
+};
+
+export const updateItemQuantity = async ({
+  lineId,
+  variantId,
+  quantity
+}: {
+  lineId: string;
+  variantId: string;
+  quantity: number;
+}): Promise<String | undefined> => {
+  const cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+  try {
+    await updateCart(cartId, [
+      {
+        id: lineId,
+        merchandiseId: variantId,
+        quantity
+      }
+    ]);
+  } catch (e) {
+    return 'Error updating item quantity';
+  }
+};
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
new file mode 100644
index 000000000..f9d21c0fd
--- /dev/null
+++ b/components/cart/add-to-cart.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { PlusIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import { addItem } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
+import { ProductVariant } from 'lib/shopify/types';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useTransition } from 'react';
+
+export function AddToCart({
+  variants,
+  availableForSale
+}: {
+  variants: ProductVariant[];
+  availableForSale: boolean;
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every(
+      (option) => option.value === searchParams.get(option.name.toLowerCase())
+    )
+  );
+  const selectedVariantId = variant?.id || defaultVariantId;
+  const title = !availableForSale
+    ? 'Out of stock'
+    : !selectedVariantId
+    ? 'Please select options'
+    : undefined;
+
+  return (
+    <button
+      aria-label="Add item to cart"
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
+      onClick={() => {
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
+
+        startTransition(async () => {
+          const error = await addItem(selectedVariantId);
+
+          if (error) {
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
+          }
+
+          router.refresh();
+        });
+      }}
+      className={clsx(
+        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
+        {
+          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
+          'cursor-not-allowed': isPending
+        }
+      )}
+    >
+      <div className="absolute left-0 ml-4">
+        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+      </div>
+      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+    </button>
+  );
+}
diff --git a/components/cart/button.tsx b/components/cart/button.tsx
deleted file mode 100644
index aed87ee7a..000000000
--- a/components/cart/button.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useCookies } from 'react-cookie';
-
-import CartIcon from 'components/icons/cart';
-import CartModal from './modal';
-
-import type { Cart } from 'lib/shopify/types';
-
-export default function CartButton({
-  cart,
-  cartIdUpdated
-}: {
-  cart: Cart;
-  cartIdUpdated: boolean;
-}) {
-  const [, setCookie] = useCookies(['cartId']);
-  const [cartIsOpen, setCartIsOpen] = useState(false);
-  const quantityRef = useRef(cart.totalQuantity);
-
-  // Temporary hack to update the `cartId` cookie when it changes since we cannot update it
-  // on the server-side (yet).
-  useEffect(() => {
-    if (cartIdUpdated) {
-      setCookie('cartId', cart.id, {
-        path: '/',
-        sameSite: 'strict',
-        secure: process.env.NODE_ENV === 'production'
-      });
-    }
-    return;
-  }, [setCookie, cartIdUpdated, cart.id]);
-
-  useEffect(() => {
-    // Open cart modal when when quantity changes.
-    if (cart.totalQuantity !== quantityRef.current) {
-      // But only if it's not already open (quantity also changes when editing items in cart).
-      if (!cartIsOpen) {
-        setCartIsOpen(true);
-      }
-
-      // Always update the quantity reference
-      quantityRef.current = cart.totalQuantity;
-    }
-  }, [cartIsOpen, cart.totalQuantity, quantityRef]);
-
-  return (
-    <>
-      <CartModal isOpen={cartIsOpen} onClose={() => setCartIsOpen(false)} cart={cart} />
-
-      <button
-        aria-label="Open cart"
-        onClick={() => {
-          setCartIsOpen(true);
-        }}
-        className="relative right-0 top-0"
-        data-testid="open-cart"
-      >
-        <CartIcon quantity={cart.totalQuantity} />
-      </button>
-    </>
-  );
-}
diff --git a/components/cart/close-cart.tsx b/components/cart/close-cart.tsx
new file mode 100644
index 000000000..515b94843
--- /dev/null
+++ b/components/cart/close-cart.tsx
@@ -0,0 +1,10 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function CloseCart({ className }: { className?: string }) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+    </div>
+  );
+}
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 0d191aba6..605adcf51 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -1,53 +1,43 @@
-import CloseIcon from 'components/icons/close';
-import LoadingDots from 'components/ui/loading-dots';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import LoadingDots from 'components/loading-dots';
 import { useRouter } from 'next/navigation';
-import { startTransition, useState } from 'react';
 
 import clsx from 'clsx';
+import { removeItem } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
+import { useTransition } from 'react';
 
 export default function DeleteItemButton({ item }: { item: CartItem }) {
   const router = useRouter();
-  const [removing, setRemoving] = useState(false);
+  const [isPending, startTransition] = useTransition();
 
-  async function handleRemove() {
-    setRemoving(true);
-
-    const response = await fetch(`/api/cart`, {
-      method: 'DELETE',
-      body: JSON.stringify({
-        lineId: item.id
-      })
-    });
-    const data = await response.json();
-
-    if (data.error) {
-      alert(data.error);
-      return;
-    }
-
-    setRemoving(false);
-
-    startTransition(() => {
-      router.refresh();
-    });
-  }
   return (
     <button
       aria-label="Remove cart item"
-      onClick={handleRemove}
-      disabled={removing}
+      onClick={() => {
+        startTransition(async () => {
+          const error = await removeItem(item.id);
+
+          if (error) {
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
+          }
+
+          router.refresh();
+        });
+      }}
+      disabled={isPending}
       className={clsx(
-        'ease flex min-w-[36px] max-w-[36px] items-center justify-center border px-2 transition-all duration-200 hover:border-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-900',
+        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
         {
-          'cursor-not-allowed px-0': removing
+          'cursor-not-allowed px-0': isPending
         }
       )}
     >
-      {removing ? (
-        <LoadingDots className="bg-black dark:bg-white" />
+      {isPending ? (
+        <LoadingDots className="bg-white" />
       ) : (
-        <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4" />
+        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
       )}
     </button>
   );
diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
index 1b837a772..e846196ca 100644
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -1,10 +1,10 @@
 import { useRouter } from 'next/navigation';
-import { startTransition, useState } from 'react';
+import { useTransition } from 'react';
 
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import MinusIcon from 'components/icons/minus';
-import PlusIcon from 'components/icons/plus';
-import LoadingDots from 'components/ui/loading-dots';
+import { removeItem, updateItemQuantity } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 
 export default function EditItemQuantityButton({
@@ -15,52 +15,45 @@ export default function EditItemQuantityButton({
   type: 'plus' | 'minus';
 }) {
   const router = useRouter();
-  const [editing, setEditing] = useState(false);
+  const [isPending, startTransition] = useTransition();
 
-  async function handleEdit() {
-    setEditing(true);
-
-    const response = await fetch(`/api/cart`, {
-      method: type === 'minus' && item.quantity - 1 === 0 ? 'DELETE' : 'PUT',
-      body: JSON.stringify({
-        lineId: item.id,
-        variantId: item.merchandise.id,
-        quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
-      })
-    });
-
-    const data = await response.json();
-
-    if (data.error) {
-      alert(data.error);
-      return;
-    }
-
-    setEditing(false);
-
-    startTransition(() => {
-      router.refresh();
-    });
-  }
   return (
     <button
       aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
-      onClick={handleEdit}
-      disabled={editing}
+      onClick={() => {
+        startTransition(async () => {
+          const error =
+            type === 'minus' && item.quantity - 1 === 0
+              ? await removeItem(item.id)
+              : await updateItemQuantity({
+                  lineId: item.id,
+                  variantId: item.merchandise.id,
+                  quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
+                });
+
+          if (error) {
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
+          }
+
+          router.refresh();
+        });
+      }}
+      disabled={isPending}
       className={clsx(
-        'ease flex min-w-[36px] max-w-[36px] items-center justify-center border px-2 transition-all duration-200 hover:border-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-900',
+        'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
         {
-          'cursor-not-allowed': editing,
+          'cursor-not-allowed': isPending,
           'ml-auto': type === 'minus'
         }
       )}
     >
-      {editing ? (
+      {isPending ? (
         <LoadingDots className="bg-black dark:bg-white" />
       ) : type === 'plus' ? (
-        <PlusIcon className="h-4 w-4" />
+        <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
       ) : (
-        <MinusIcon className="h-4 w-4" />
+        <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
       )}
     </button>
   );
diff --git a/components/cart/index.tsx b/components/cart/index.tsx
index 0e3ffcdc1..3e250ba93 100644
--- a/components/cart/index.tsx
+++ b/components/cart/index.tsx
@@ -1,23 +1,14 @@
-import { createCart, getCart } from 'lib/shopify';
+import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
-import CartButton from './button';
+import CartModal from './modal';
 
 export default async function Cart() {
   const cartId = cookies().get('cartId')?.value;
-  let cartIdUpdated = false;
   let cart;
 
   if (cartId) {
     cart = await getCart(cartId);
   }
 
-  // If the `cartId` from the cookie is not set or the cart is empty
-  // (old carts becomes `null` when you checkout), then get a new `cartId`
-  //  and re-fetch the cart.
-  if (!cartId || !cart) {
-    cart = await createCart();
-    cartIdUpdated = true;
-  }
-
-  return <CartButton cart={cart} cartIdUpdated={cartIdUpdated} />;
+  return <CartModal cart={cart} />;
 }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 6f92a556e..4fbfcc6ad 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -1,84 +1,86 @@
-import { Dialog } from '@headlessui/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import Image from 'next/image';
-import Link from 'next/link';
+'use client';
 
-import CloseIcon from 'components/icons/close';
-import ShoppingBagIcon from 'components/icons/shopping-bag';
-import Price from 'components/product/price';
+import { Dialog, Transition } from '@headlessui/react';
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import CloseCart from './close-cart';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
+import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {
   [key: string]: string;
 };
 
-export default function CartModal({
-  isOpen,
-  onClose,
-  cart
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-  cart: Cart;
-}) {
-  return (
-    <AnimatePresence initial={false}>
-      {isOpen && (
-        <Dialog
-          as={motion.div}
-          initial="closed"
-          animate="open"
-          exit="closed"
-          key="dialog"
-          static
-          open={isOpen}
-          onClose={onClose}
-          className="relative z-50"
-        >
-          <motion.div
-            variants={{
-              open: { opacity: 1, backdropFilter: 'blur(0.5px)' },
-              closed: { opacity: 0, backdropFilter: 'blur(0px)' }
-            }}
-            className="fixed inset-0 bg-black/30"
-            aria-hidden="true"
-          />
+export default function CartModal({ cart }: { cart: Cart | undefined }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const quantityRef = useRef(cart?.totalQuantity);
+  const openCart = () => setIsOpen(true);
+  const closeCart = () => setIsOpen(false);
 
-          <div className="fixed inset-0 flex justify-end" data-testid="cart">
-            <Dialog.Panel
-              as={motion.div}
-              variants={{
-                open: { translateX: 0 },
-                closed: { translateX: '100%' }
-              }}
-              transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
-              className="flex w-full flex-col bg-white p-8 text-black dark:bg-black dark:text-white md:w-3/5 lg:w-2/5"
-            >
+  useEffect(() => {
+    // Open cart modal when quantity changes.
+    if (cart?.totalQuantity !== quantityRef.current) {
+      // But only if it's not already open (quantity also changes when editing items in cart).
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+
+      // Always update the quantity reference
+      quantityRef.current = cart?.totalQuantity;
+    }
+  }, [isOpen, cart?.totalQuantity, quantityRef]);
+
+  return (
+    <>
+      <button aria-label="Open cart" onClick={openCart}>
+        <OpenCart quantity={cart?.totalQuantity} />
+      </button>
+      <Transition show={isOpen}>
+        <Dialog onClose={closeCart} className="relative z-50">
+          <Transition.Child
+            as={Fragment}
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="opacity-0 backdrop-blur-none"
+            enterTo="opacity-100 backdrop-blur-[.5px]"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="opacity-100 backdrop-blur-[.5px]"
+            leaveTo="opacity-0 backdrop-blur-none"
+          >
+            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-all ease-in-out duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-all ease-in-out duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
-                <p className="text-lg font-bold">My Cart</p>
-                <button
-                  aria-label="Close cart"
-                  onClick={onClose}
-                  className="text-black transition-colors hover:text-gray-500 dark:text-gray-100"
-                  data-testid="close-cart"
-                >
-                  <CloseIcon className="h-7" />
+                <p className="text-lg font-semibold">My Cart</p>
+
+                <button aria-label="Close cart" onClick={closeCart}>
+                  <CloseCart />
                 </button>
               </div>
 
-              {cart.lines.length === 0 ? (
+              {!cart || cart.lines.length === 0 ? (
                 <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
-                  <ShoppingBagIcon className="h-16" />
+                  <ShoppingCartIcon className="h-16" />
                   <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
                 </div>
-              ) : null}
-              {cart.lines.length !== 0 ? (
-                <div className="flex h-full flex-col justify-between overflow-hidden">
-                  <ul className="flex-grow overflow-auto p-6">
+              ) : (
+                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
+                  <ul className="flex-grow overflow-auto py-4">
                     {cart.lines.map((item, i) => {
                       const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
@@ -94,77 +96,79 @@ export default function CartModal({
                       );
 
                       return (
-                        <li key={i} data-testid="cart-item">
-                          <Link
-                            className="flex flex-row space-x-4 py-4"
-                            href={merchandiseUrl}
-                            onClick={onClose}
-                          >
-                            <div className="relative h-16 w-16 cursor-pointer overflow-hidden bg-white">
-                              <Image
-                                className="h-full w-full object-cover"
-                                width={64}
-                                height={64}
-                                alt={
-                                  item.merchandise.product.featuredImage.altText ||
-                                  item.merchandise.product.title
-                                }
-                                src={item.merchandise.product.featuredImage.url}
+                        <li
+                          key={i}
+                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                        >
+                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                            <div className="absolute z-40 -mt-2 ml-[55px]">
+                              <DeleteItemButton item={item} />
+                            </div>
+                            <Link
+                              href={merchandiseUrl}
+                              onClick={closeCart}
+                              className="z-30 flex flex-row space-x-4"
+                            >
+                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                                <Image
+                                  className="h-full w-full object-cover"
+                                  width={64}
+                                  height={64}
+                                  alt={
+                                    item.merchandise.product.featuredImage.altText ||
+                                    item.merchandise.product.title
+                                  }
+                                  src={item.merchandise.product.featuredImage.url}
+                                />
+                              </div>
+
+                              <div className="flex flex-1 flex-col text-base">
+                                <span className="leading-tight">
+                                  {item.merchandise.product.title}
+                                </span>
+                                {item.merchandise.title !== DEFAULT_OPTION ? (
+                                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                    {item.merchandise.title}
+                                  </p>
+                                ) : null}
+                              </div>
+                            </Link>
+                            <div className="flex h-16 flex-col justify-between">
+                              <Price
+                                className="flex justify-end space-y-2 text-right text-sm"
+                                amount={item.cost.totalAmount.amount}
+                                currencyCode={item.cost.totalAmount.currencyCode}
                               />
-                            </div>
-                            <div className="flex flex-1 flex-col text-base">
-                              <span className="font-semibold">
-                                {item.merchandise.product.title}
-                              </span>
-                              {item.merchandise.title !== DEFAULT_OPTION ? (
-                                <p className="text-sm" data-testid="cart-product-variant">
-                                  {item.merchandise.title}
+                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                                <EditItemQuantityButton item={item} type="minus" />
+                                <p className="w-6 text-center">
+                                  <span className="w-full text-sm">{item.quantity}</span>
                                 </p>
-                              ) : null}
+                                <EditItemQuantityButton item={item} type="plus" />
+                              </div>
                             </div>
-                            <Price
-                              className="flex flex-col justify-between space-y-2 text-sm"
-                              amount={item.cost.totalAmount.amount}
-                              currencyCode={item.cost.totalAmount.currencyCode}
-                            />
-                          </Link>
-                          <div className="flex h-9 flex-row">
-                            <DeleteItemButton item={item} />
-                            <p className="ml-2 flex w-full items-center justify-center border dark:border-gray-700">
-                              <span className="w-full px-2">{item.quantity}</span>
-                            </p>
-                            <EditItemQuantityButton item={item} type="minus" />
-                            <EditItemQuantityButton item={item} type="plus" />
                           </div>
                         </li>
                       );
                     })}
                   </ul>
-                  <div className="border-t border-gray-200 pt-2 text-sm text-black dark:text-white">
-                    <div className="mb-2 flex items-center justify-between">
-                      <p>Subtotal</p>
-                      <Price
-                        className="text-right"
-                        amount={cart.cost.subtotalAmount.amount}
-                        currencyCode={cart.cost.subtotalAmount.currencyCode}
-                      />
-                    </div>
-                    <div className="mb-2 flex items-center justify-between">
+                  <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
                       <p>Taxes</p>
                       <Price
-                        className="text-right"
+                        className="text-right text-base text-black dark:text-white"
                         amount={cart.cost.totalTaxAmount.amount}
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
                     </div>
-                    <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Shipping</p>
                       <p className="text-right">Calculated at checkout</p>
                     </div>
-                    <div className="mb-2 flex items-center justify-between font-bold">
+                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                       <p>Total</p>
                       <Price
-                        className="text-right"
+                        className="text-right text-base text-black dark:text-white"
                         amount={cart.cost.totalAmount.amount}
                         currencyCode={cart.cost.totalAmount.currencyCode}
                       />
@@ -172,16 +176,16 @@ export default function CartModal({
                   </div>
                   <a
                     href={cart.checkoutUrl}
-                    className="flex w-full items-center justify-center bg-black p-3 text-sm font-medium uppercase text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black"
+                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
                   >
-                    <span>Proceed to Checkout</span>
+                    Proceed to Checkout
                   </a>
                 </div>
-              ) : null}
+              )}
             </Dialog.Panel>
-          </div>
+          </Transition.Child>
         </Dialog>
-      )}
-    </AnimatePresence>
+      </Transition>
+    </>
   );
 }
diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx
new file mode 100644
index 000000000..fa8226ab5
--- /dev/null
+++ b/components/cart/open-cart.tsx
@@ -0,0 +1,24 @@
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function OpenCart({
+  className,
+  quantity
+}: {
+  className?: string;
+  quantity?: number;
+}) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <ShoppingCartIcon
+        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+      />
+
+      {quantity ? (
+        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
+          {quantity}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
deleted file mode 100644
index 07dc0d2a9..000000000
--- a/components/grid/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import clsx from 'clsx';
-
-function Grid(props: React.ComponentProps<'ul'>) {
-  return (
-    <ul {...props} className={clsx('grid grid-flow-row  gap-4 py-5', props.className)}>
-      {props.children}
-    </ul>
-  );
-}
-
-function GridItem(props: React.ComponentProps<'li'>) {
-  return (
-    <li
-      {...props}
-      className={clsx(
-        'relative aspect-square h-full w-full overflow-hidden transition-opacity',
-        props.className
-      )}
-    >
-      {props.children}
-    </li>
-  );
-}
-
-Grid.Item = GridItem;
-export default Grid;
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
deleted file mode 100644
index 6814a171a..000000000
--- a/components/grid/three-items.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { GridTileImage } from 'components/grid/tile';
-import { getCollectionProducts } from 'lib/shopify';
-import type { Product } from 'lib/shopify/types';
-import Link from 'next/link';
-
-function ThreeItemGridItem({
-  item,
-  size,
-  background
-}: {
-  item: Product;
-  size: 'full' | 'half';
-  background: 'white' | 'pink' | 'purple' | 'black';
-}) {
-  return (
-    <div
-      className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
-    >
-      <Link className="block h-full" href={`/product/${item.handle}`}>
-        <GridTileImage
-          src={item.featuredImage.url}
-          width={size === 'full' ? 1080 : 540}
-          height={size === 'full' ? 1080 : 540}
-          priority={true}
-          background={background}
-          alt={item.title}
-          labels={{
-            title: item.title as string,
-            amount: item.priceRange.maxVariantPrice.amount,
-            currencyCode: item.priceRange.maxVariantPrice.currencyCode
-          }}
-        />
-      </Link>
-    </div>
-  );
-}
-
-export async function ThreeItemGrid() {
-  // Collections that start with `hidden-*` are hidden from the search page.
-  const homepageItems = await getCollectionProducts('hidden-homepage-featured-items');
-
-  if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
-
-  const [firstProduct, secondProduct, thirdProduct] = homepageItems;
-
-  return (
-    <section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
-      <ThreeItemGridItem size="full" item={firstProduct} background="purple" />
-      <ThreeItemGridItem size="half" item={secondProduct} background="black" />
-      <ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
-    </section>
-  );
-}
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
deleted file mode 100644
index 7d4ccab41..000000000
--- a/components/grid/tile.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import clsx from 'clsx';
-import Image from 'next/image';
-
-import Price from 'components/product/price';
-
-export function GridTileImage({
-  isInteractive = true,
-  background,
-  active,
-  labels,
-  ...props
-}: {
-  isInteractive?: boolean;
-  background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
-  active?: boolean;
-  labels?: {
-    title: string;
-    amount: string;
-    currencyCode: string;
-    isSmall?: boolean;
-  };
-} & React.ComponentProps<typeof Image>) {
-  return (
-    <div
-      className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', {
-        'bg-white dark:bg-white': background === 'white',
-        'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink',
-        'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple',
-        'bg-gray-900 dark:bg-gray-900': background === 'black',
-        'bg-violetDark dark:bg-violetDark': background === 'purple-dark',
-        'bg-blue-500 dark:bg-blue-500': background === 'blue',
-        'bg-cyan-500 dark:bg-cyan-500': background === 'cyan',
-        'bg-gray-100 dark:bg-gray-100': background === 'gray',
-        'bg-gray-100 dark:bg-gray-900': !background,
-        relative: labels
-      })}
-    >
-      {active !== undefined && active ? (
-        <span className="absolute h-full w-full bg-white opacity-25"></span>
-      ) : null}
-      {props.src ? (
-        <Image
-          className={clsx('relative h-full w-full object-contain', {
-            'transition duration-300 ease-in-out hover:scale-105': isInteractive
-          })}
-          {...props}
-          alt={props.title || ''}
-        />
-      ) : null}
-      {labels ? (
-        <div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
-          <h3
-            data-testid="product-name"
-            className={clsx(
-              'inline bg-white box-decoration-clone py-3 pl-5 font-semibold leading-loose shadow-[1.25rem_0_0] shadow-white dark:bg-black dark:shadow-black',
-              !labels.isSmall ? 'text-3xl' : 'text-lg'
-            )}
-          >
-            {labels.title}
-          </h3>
-          <Price
-            className="w-fit bg-white px-5 py-3 text-sm font-semibold dark:bg-black dark:text-white"
-            amount={labels.amount}
-            currencyCode={labels.currencyCode}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-}
diff --git a/components/layout/footer/copyright.tsx b/components/layout/footer/copyright.tsx
index d93063b4e..966d08d87 100644
--- a/components/layout/footer/copyright.tsx
+++ b/components/layout/footer/copyright.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useTranslations } from 'next-intl';
 
 export default function CopyRight() {
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index 8244d222e..cec0819ae 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,21 +1,9 @@
-'use client';
-
 import Logo from 'components/ui/logo/logo';
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  navigationMenuTriggerStyle
-} from 'components/ui/navigation-menu';
 import { useLocale } from 'next-intl';
 import Link from 'next/link';
-import { FC } from 'react';
 import HeaderRoot from './header-root';
 
-interface HeaderProps {}
-
-const Header: FC<HeaderProps> = () => {
+const Header = () => {
   const locale = useLocale();
 
   return (
@@ -33,33 +21,8 @@ const Header: FC<HeaderProps> = () => {
           </div>
 
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-            <NavigationMenu delayDuration={0} className="hidden lg:block">
-              <NavigationMenuList>
-                <NavigationMenuItem>
-                  <Link href={'/category/barn'} legacyBehavior passHref>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                      Junior
-                    </NavigationMenuLink>
-                  </Link>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <Link href={'/category/trojor'} legacyBehavior passHref>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                      Tröjor
-                    </NavigationMenuLink>
-                  </Link>
-                </NavigationMenuItem>
-                <NavigationMenuItem>
-                  <Link href={'/category/byxor'} legacyBehavior passHref>
-                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                      Byxor
-                    </NavigationMenuLink>
-                  </Link>
-                </NavigationMenuItem>
-              </NavigationMenuList>
-            </NavigationMenu>
+            Menu
           </div>
-          <div></div>
         </div>
       </div>
     </HeaderRoot>
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
deleted file mode 100644
index 0c0e907ed..000000000
--- a/components/layout/product-grid-items.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Grid from 'components/grid';
-import { GridTileImage } from 'components/grid/tile';
-import { Product } from 'lib/shopify/types';
-import Link from 'next/link';
-
-export default function ProductGridItems({ products }: { products: Product[] }) {
-  return (
-    <>
-      {products.map((product) => (
-        <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="h-full w-full" href={`/product/${product.handle}`}>
-            <GridTileImage
-              alt={product.title}
-              labels={{
-                isSmall: true,
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              width={600}
-              height={600}
-            />
-          </Link>
-        </Grid.Item>
-      ))}
-    </>
-  );
-}
diff --git a/components/modules/hero/hero.tsx b/components/modules/hero/hero.tsx
index 9b8d46346..9b5754230 100644
--- a/components/modules/hero/hero.tsx
+++ b/components/modules/hero/hero.tsx
@@ -26,7 +26,7 @@ type HeroSize = keyof typeof heroSize;
 
 const heroSize = {
   fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(75vh-4rem)]',
-  halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]'
+  halfScreen: 'aspect-square max-h-[50vh] lg:aspect-auto lg:min-h-[50vh]'
 };
 
 const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
diff --git a/components/preview-suspense.tsx b/components/preview-suspense.tsx
deleted file mode 100644
index d45e24877..000000000
--- a/components/preview-suspense.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-'use client'
-
-// Once rollup supports 'use client' module directives then 'next-sanity' will include them and this re-export will no longer be necessary
-export { PreviewSuspense as default } from 'next-sanity/preview'
diff --git a/components/price.tsx b/components/price.tsx
new file mode 100644
index 000000000..e7090148d
--- /dev/null
+++ b/components/price.tsx
@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+const Price = ({
+  amount,
+  className,
+  currencyCode = 'USD',
+  currencyCodeClassName
+}: {
+  amount: string;
+  className?: string;
+  currencyCode: string;
+  currencyCodeClassName?: string;
+} & React.ComponentProps<'p'>) => (
+  <p suppressHydrationWarning={true} className={className}>
+    {`${new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: currencyCode,
+      currencyDisplay: 'narrowSymbol'
+    }).format(parseFloat(amount))}`}
+    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
+  </p>
+);
+
+export default Price;
diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx
index 6aaf06a7c..89f2a322c 100644
--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@@ -1,22 +1,15 @@
-// @ts-nocheck
-
 'use client';
 
 import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { usePathname, useSearchParams } from 'next/navigation';
 
-type ParamsMap = {
-  [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
-};
-
-type OptimizedVariant = {
+type Combination = {
   id: string;
   availableForSale: boolean;
-  params: URLSearchParams;
-  [key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
+  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
 };
 
 export function VariantSelector({
@@ -27,8 +20,7 @@ export function VariantSelector({
   variants: ProductVariant[];
 }) {
   const pathname = usePathname();
-  const currentParams = useSearchParams();
-  const router = useRouter();
+  const searchParams = useSearchParams();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -36,96 +28,77 @@ export function VariantSelector({
     return null;
   }
 
-  // Discard any unexpected options or values from url and create params map.
-  const paramsMap: ParamsMap = Object.fromEntries(
-    Array.from(currentParams.entries()).filter(([key, value]) =>
-      options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
+  const combinations: Combination[] = variants.map((variant) => ({
+    id: variant.id,
+    availableForSale: variant.availableForSale,
+    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
+    ...variant.selectedOptions.reduce(
+      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
+      {}
     )
-  );
-
-  // Optimize variants for easier lookups.
-  const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
-    const optimized: OptimizedVariant = {
-      id: variant.id,
-      availableForSale: variant.availableForSale,
-      params: new URLSearchParams()
-    };
-
-    variant.selectedOptions.forEach((selectedOption) => {
-      const name = selectedOption.name.toLowerCase();
-      const value = selectedOption.value;
-
-      optimized[name] = value;
-      optimized.params.set(name, value);
-    });
-
-    return optimized;
-  });
-
-  // Find the first variant that is:
-  //
-  // 1. Available for sale
-  // 2. Matches all options specified in the url (note that this
-  //    could be a partial match if some options are missing from the url).
-  //
-  // If no match (full or partial) is found, use the first variant that is
-  // available for sale.
-  const selectedVariant: OptimizedVariant | undefined =
-    optimizedVariants.find(
-      (variant) =>
-        variant.availableForSale &&
-        Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
-    ) || optimizedVariants.find((variant) => variant.availableForSale);
-
-  const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
-  const currentUrl = createUrl(pathname, currentParams);
-  const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
-
-  if (currentUrl !== selectedVariantUrl) {
-    router.replace(selectedVariantUrl);
-  }
+  }));
 
   return options.map((option) => (
     <dl className="mb-8" key={option.id}>
       <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
       <dd className="flex flex-wrap gap-3">
         {option.values.map((value) => {
-          // Base option params on selected variant params.
-          const optionParams = new URLSearchParams(selectedVariantParams);
-          // Update the params using the current option to reflect how the url would change.
-          optionParams.set(option.name.toLowerCase(), value);
+          const optionNameLowerCase = option.name.toLowerCase();
 
-          const optionUrl = createUrl(pathname, optionParams);
+          // Base option params on current params so we can preserve any other param state in the url.
+          const optionSearchParams = new URLSearchParams(searchParams.toString());
 
-          // The option is active if it in the url params.
-          const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
+          // Update the option params using the current option to reflect how the url *would* change,
+          // if the option was clicked.
+          optionSearchParams.set(optionNameLowerCase, value);
+          const optionUrl = createUrl(pathname, optionSearchParams);
 
-          // The option is available for sale if it fully matches the variant in the option's url params.
-          // It's super important to note that this is the options params, *not* the selected variant's params.
-          // This is the "magic" that will cross check possible future variant combinations and preemptively
-          // disable combinations that are not possible.
-          const isAvailableForSale = optimizedVariants.find((a) =>
-            Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
-          )?.availableForSale;
+          // In order to determine if an option is available for sale, we need to:
+          //
+          // 1. Filter out all other param state
+          // 2. Filter out invalid options
+          // 3. Check if the option combination is available for sale
+          //
+          // This is the "magic" that will cross check possible variant combinations and preemptively
+          // disable combinations that are not available. For example, if the color gray is only available in size medium,
+          // then all other sizes should be disabled.
+          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
+            options.find(
+              (option) => option.name.toLowerCase() === key && option.values.includes(value)
+            )
+          );
+          const isAvailableForSale = combinations.find((combination) =>
+            filtered.every(
+              ([key, value]) => combination[key] === value && combination.availableForSale
+            )
+          );
 
+          // The option is active if it's in the url params.
+          const isActive = searchParams.get(optionNameLowerCase) === value;
+
+          // You can't disable a link, so we need to render something that isn't clickable.
           const DynamicTag = isAvailableForSale ? Link : 'p';
+          const dynamicProps = {
+            ...(isAvailableForSale && { scroll: false })
+          };
 
           return (
             <DynamicTag
               key={value}
+              aria-disabled={!isAvailableForSale}
               href={optionUrl}
               title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
               className={clsx(
-                'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm',
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
                 {
-                  'cursor-default ring-2 ring-black dark:ring-white': isActive,
-                  'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white':
+                  'cursor-default ring-2 ring-blue-600': isActive,
+                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
                     !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700':
+                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
                     !isAvailableForSale
                 }
               )}
-              data-testid={isActive ? 'selected-variant' : 'variant'}
+              {...dynamicProps}
             >
               {value}
             </DynamicTag>
diff --git a/components/prose.tsx b/components/prose.tsx
index 2445ee588..f910d2296 100644
--- a/components/prose.tsx
+++ b/components/prose.tsx
@@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
   return (
     <div
       className={clsx(
-        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-gray-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
         className
       )}
       dangerouslySetInnerHTML={{ __html: html as string }}
diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx
index 96f29ddd0..b4619f109 100644
--- a/components/ui/product-card/product-card.tsx
+++ b/components/ui/product-card/product-card.tsx
@@ -8,8 +8,6 @@ import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { FC } from 'react';
 
-const WishlistButton = dynamic(() => import('components/ui/wishlist-button'));
-
 const SanityImage = dynamic(() => import('components/ui/sanity-image'));
 
 interface Props {
@@ -30,11 +28,6 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
     >
       {variant === 'default' && (
         <div className={'relative flex h-full w-full flex-col justify-center'}>
-          <WishlistButton
-            className={'absolute right-4 top-4 z-10'}
-            productId={product.id}
-            variant={product?.variants ? (product.variants[0] as any) : null}
-          />
           <div className="relative h-full w-full overflow-hidden">
             {product?.images && (
               <SanityImage
diff --git a/components/ui/wishlist-button/index.ts b/components/ui/wishlist-button/index.ts
deleted file mode 100644
index 8ed750d03..000000000
--- a/components/ui/wishlist-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './wishlist-button';
diff --git a/components/ui/wishlist-button/wishlist-button.tsx b/components/ui/wishlist-button/wishlist-button.tsx
deleted file mode 100644
index c721a24b4..000000000
--- a/components/ui/wishlist-button/wishlist-button.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Product, ProductVariant } from 'lib/storm/types/product'
-import { cn } from 'lib/utils'
-import { Heart } from 'lucide-react'
-import { useTranslations } from 'next-intl'
-import React, { FC, useState } from 'react'
-
-type Props = {
-  productId: Product['id']
-  variant: ProductVariant
-} & React.ButtonHTMLAttributes<HTMLButtonElement>
-
-const WishlistButton: FC<Props> = ({
-  productId,
-  variant,
-  className,
-  ...props
-}) => {
-  const [loading, setLoading] = useState(false)
-  const t = useTranslations('ui.button')
-
-  // @ts-ignore Wishlist is not always enabled
-  // const itemInWishlist = data?.items?.find(
-  //   // @ts-ignore Wishlist is not always enabled
-  //   (item) => item.product_id === productId && item.variant_id === variant.id
-  // )
-
-  const handleWishlistChange = async (e: any) => {
-    e.preventDefault()
-
-    if (loading) return
-
-    // A login is required before adding an item to the wishlist
-    // if (!customer) {
-    //   setModalView('LOGIN_VIEW')
-    //   return openModal()
-    // }
-
-    // setLoading(true)
-
-    // try {
-    //   if (itemInWishlist) {
-    //     await removeItem({ id: itemInWishlist.id! })
-    //   } else {
-    //     await addItem({
-    //       productId,
-    //       variantId: variant?.id!,
-    //     })
-    //   }
-
-    //   setLoading(false)
-    // } catch (err) {
-    //   setLoading(false)
-    // }
-  }
-
-  return (
-    <button
-      aria-label={t('wishList')}
-      className={cn(
-        'w-10 h-10 text-high-contrast bg-app border border-high-contrast flex items-center justify-center font-semibold cursor-pointer text-sm duration-200 ease-in-out transition-[color,background-color,opacity] ',
-        className
-      )}
-      // onClick={handleWishlistChange}
-      {...props}
-    >
-      <Heart
-        className={cn(
-          'duration-200 ease-in-out w-5 h-5 transition-[transform,fill] text-current',
-          {
-            ['fill-low-contrast']: loading,
-            // ['fill-high-contrast']: itemInWishlist,
-          }
-        )}
-      />
-    </button>
-  )
-}
-
-export default WishlistButton
diff --git a/lib/constants.tsx b/lib/constants.tsx
index 9038127e3..e69de29bb 100644
--- a/lib/constants.tsx
+++ b/lib/constants.tsx
@@ -1,25 +0,0 @@
-export type SortFilterItem = {
-  title: string;
-  slug: string | null;
-  sortKey: 'RELEVANCE' | 'BEST_SELLING' | 'CREATED_AT' | 'PRICE';
-  reverse: boolean;
-};
-
-export const defaultSort: SortFilterItem = {
-  title: 'Relevance',
-  slug: null,
-  sortKey: 'RELEVANCE',
-  reverse: false
-};
-
-export const sorting: SortFilterItem[] = [
-  defaultSort,
-  { title: 'Trending', slug: 'trending-desc', sortKey: 'BEST_SELLING', reverse: false }, // asc
-  { title: 'Latest arrivals', slug: 'latest-desc', sortKey: 'CREATED_AT', reverse: true },
-  { title: 'Price: Low to high', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
-  { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
-];
-
-export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
-export const DEFAULT_OPTION = 'Default Title';
-export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';
diff --git a/lib/storm/types/product.ts b/lib/storm/types/product.ts
index 786f07e66..9758c801f 100644
--- a/lib/storm/types/product.ts
+++ b/lib/storm/types/product.ts
@@ -147,61 +147,6 @@ export interface Product {
   locale?: string
 }
 
-export interface SearchProductsBody {
-  /**
-   * The search query string to filter the products by.
-   */
-  search?: string
-  /**
-   * The category ID to filter the products by.
-   */
-  categoryId?: string
-  /**
-   * The brand ID to filter the products by.
-   */
-  brandId?: string
-  /**
-   * The sort key to sort the products by.
-   * @example 'trending-desc' | 'latest-desc' | 'price-asc' | 'price-desc'
-   */
-  sort?: string
-  /**
-   * The locale code, used to localize the product data (if the provider supports it).
-   */
-  locale?: string
-}
-
-/**
- * Fetches a list of products based on the given search criteria.
- */
-export type SearchProductsHook = {
-  data: {
-    /**
-     * List of products matching the query.
-     */
-    products: Product[]
-    /**
-     * Indicates if there are any products matching the query.
-     */
-    found: boolean
-  }
-  body: SearchProductsBody
-  input: SearchProductsBody
-  fetcherInput: SearchProductsBody
-}
-
-/**
- * Product API schema
- */
-
-export type ProductsSchema = {
-  endpoint: {
-    options: {}
-    handlers: {
-      getProducts: SearchProductsHook
-    }
-  }
-}
 
 /**
  *  Product operations
diff --git a/package.json b/package.json
index 0d9c946fa..9df2095e6 100644
--- a/package.json
+++ b/package.json
@@ -37,9 +37,9 @@
     "framer-motion": "^8.5.5",
     "is-empty-iterable": "^3.0.0",
     "lucide-react": "^0.194.0",
-    "next": "13.4.7",
-    "next-intl": "^2.14.6",
-    "next-sanity": "^4.3.2",
+    "next": "13.4.13",
+    "next-intl": "3.0.0-beta.9",
+    "next-sanity": "^5.2.3",
     "react": "18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",

From 22aab2f657c612ccfc3abe4bf9add5584018d15b Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Tue, 8 Aug 2023 16:20:45 +0200
Subject: [PATCH 4/6] Updates

---
 .env.example                                  |  10 +
 app/[locale]/globals.css                      |  89 ++-
 app/[locale]/layout.tsx                       |  37 +-
 app/[locale]/product/[slug]/page.tsx          |   2 -
 components.json                               |  16 +
 components/cart/add-to-cart.tsx               |   6 +-
 components/cart/close-cart.tsx                |   4 +-
 components/cart/delete-item-button.tsx        |   5 +-
 components/cart/edit-item-quantity-button.tsx |   4 +-
 components/cart/modal.tsx                     | 261 ++++----
 components/cart/open-cart.tsx                 |  13 +-
 .../dynamic-content-manager.tsx               |   4 +-
 components/layout/footer/copyright.tsx        |   2 +
 components/layout/footer/footer.tsx           |  64 +-
 components/layout/header/header.tsx           |  27 +-
 components/layout/header/mobile-modal.tsx     |  26 +
 components/{ui => }/loading-dots.tsx          |   0
 components/modules/carousel/carousel.tsx      |  45 +-
 components/preview-suspense.tsx               |   4 +
 components/product/add-to-cart.tsx            |   2 +-
 .../dropdown.tsx => dropdown-menu.tsx}        | 123 ++--
 .../ui/locale-switcher/locale-switcher.tsx    |  56 +-
 components/ui/navigation-menu/index.ts        |   2 -
 .../ui/navigation-menu/navigation-menu.tsx    | 123 ----
 components/ui/sheet.tsx                       | 122 ++++
 components/ui/text/text.tsx                   |   2 +-
 lib/constants.ts                              |  30 +
 lib/sanity/queries.tsx                        |  20 +
 lib/shopify/index.ts                          | 100 +++-
 lib/shopify/queries/collection.ts             |   8 +-
 lib/shopify/types.ts                          |   2 +
 lib/utils.ts                                  |  12 +-
 messages/en.json                              |   3 +-
 messages/sv.json                              |   3 +-
 next.config.js                                |   1 +
 package.json                                  |   9 +-
 pnpm-lock.yaml                                | 561 ++++++++++++++----
 tailwind.config.js                            |  48 +-
 tsconfig.json                                 |   7 +-
 39 files changed, 1259 insertions(+), 594 deletions(-)
 create mode 100644 components.json
 create mode 100644 components/layout/header/mobile-modal.tsx
 rename components/{ui => }/loading-dots.tsx (100%)
 create mode 100644 components/preview-suspense.tsx
 rename components/ui/{dropdown/dropdown.tsx => dropdown-menu.tsx} (58%)
 delete mode 100644 components/ui/navigation-menu/index.ts
 delete mode 100644 components/ui/navigation-menu/navigation-menu.tsx
 create mode 100644 components/ui/sheet.tsx
 create mode 100644 lib/constants.ts

diff --git a/.env.example b/.env.example
index 9ac741a18..3f31f2612 100644
--- a/.env.example
+++ b/.env.example
@@ -16,6 +16,16 @@ VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
 VERCEL_GIT_COMMIT_AUTHOR_NAME=""
 VERCEL_GIT_PULL_REQUEST_ID=""
 
+# Sanity
+NEXT_PUBLIC_SANITY_PROJECT_ID=""
+NEXT_PUBLIC_SANITY_DATASET=""
+NEXT_PUBLIC_SANITY_API_VERSION=""
+
+# Preview
+SANITY_API_READ_TOKEN=""
+SANITY_WEBHOOK_SECRET=""
+
+# Site
 TWITTER_CREATOR="@kodamera"
 TWITTER_SITE="https://kodamera.se"
 SITE_NAME="KM Storefront"
diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index d66461eab..2d7943a69 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -2,9 +2,76 @@
 @tailwind components;
 @tailwind utilities;
 
-@supports (font: -apple-system-body) and (-webkit-appearance: none) {
-  img[loading='lazy'] {
-    clip-path: inset(0.6px);
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
 
@@ -28,7 +95,7 @@
 
 html,
 body {
-  @apply font-sans h-full bg-white text-high-contrast;
+  @apply h-full bg-white font-sans text-high-contrast;
 
   box-sizing: border-box;
   touch-action: manipulation;
@@ -74,11 +141,11 @@ body {
 }
 
 .glider-dots {
-  @apply flex !space-x-[2px] !mt-8;
+  @apply !mt-8 flex !space-x-[2px];
 }
 
 .glider-dot {
-  @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
+  @apply !m-0 !h-4 !w-12 !rounded-none !bg-transparent after:block after:h-[3px] after:w-12 after:bg-ui-border after:content-[''] 2xl:!w-16 2xl:after:w-16;
 }
 
 .glider-dot.active {
@@ -86,17 +153,17 @@ body {
 }
 
 .glider-prev {
-  @apply text-high-contrast !right-12 !-top-10 !left-auto lg:!right-16 lg:!-top-12 2xl:!-top-16 2xl:!right-[100px] !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
+  @apply !-top-10 !left-auto !right-12 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-10 lg:!right-16 2xl:!-top-12 2xl:!right-[100px];
 }
 
 .glider-next {
-  @apply text-high-contrast !right-4 !-top-10 lg:!right-8 lg:!-top-12 2xl:!-top-16 2xl:!right-16 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
+  @apply !-top-10 !right-4 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-10 lg:!right-8 2xl:!-top-12 2xl:!right-16;
 }
 
 .pdp .glider-prev {
-  @apply text-high-contrast absolute !left-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
+  @apply absolute !left-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
 }
 
 .pdp .glider-next {
-  @apply text-high-contrast absolute !right-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
-}
\ No newline at end of file
+  @apply absolute !right-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index e8999055b..0546880c4 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,9 +1,10 @@
 import Footer from 'components/layout/footer/footer';
 import Header from 'components/layout/header/header';
-import { useLocale } from 'next-intl';
+import { NextIntlClientProvider } from 'next-intl';
 import { Inter } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
+import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
 export const metadata = {
@@ -32,30 +33,34 @@ const inter = Inter({
   variable: '--font-inter'
 });
 
-// export function generateStaticParams() {
-//   return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
-// }
+export function generateStaticParams() {
+  return supportedLanguages.locales.map((locale) => ({ locale: locale.id }));
+}
 
-export default function LocaleLayout({
-  children,
-  params
-}: {
+interface LocaleLayoutProps {
   children: ReactNode;
-  params: { locale: string };
-}) {
-  const locale = useLocale();
+  params: {
+    locale: string;
+  };
+}
 
-  // Show a 404 error if the user requests an unknown locale
-  if (params.locale !== locale) {
+export default async function LocaleLayout({ children, params: { locale } }: LocaleLayoutProps) {
+  let messages;
+
+  try {
+    messages = (await import(`../../messages/${locale}.json`)).default;
+  } catch (error) {
     notFound();
   }
 
   return (
     <html lang={locale} className={inter.variable}>
       <body className="flex min-h-screen flex-col">
-        <Header />
-        <main className="flex-1">{children}</main>
-        <Footer />
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <Header locale={locale} />
+          <main className="flex-1">{children}</main>
+          <Footer locale={locale} />
+        </NextIntlClientProvider>
       </body>
     </html>
   );
diff --git a/app/[locale]/product/[slug]/page.tsx b/app/[locale]/product/[slug]/page.tsx
index 19083ed90..db6ebef81 100644
--- a/app/[locale]/product/[slug]/page.tsx
+++ b/app/[locale]/product/[slug]/page.tsx
@@ -55,8 +55,6 @@ export async function generateMetadata({
 export default async function ProductPage({ params }: ProductPageParams) {
   const product = await clientFetch(productQuery, params);
 
-  console.log(params);
-
   if (!product) return notFound();
 
   const productJsonLd = {
diff --git a/components.json b/components.json
new file mode 100644
index 000000000..f8b0c79bc
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
index f9d21c0fd..704fb2a41 100644
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { PlusIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import LoadingDots from 'components/loading-dots';
@@ -39,7 +39,7 @@ export function AddToCart({
       onClick={() => {
         // Safeguard in case someone messes with `disabled` in devtools.
         if (!availableForSale || !selectedVariantId) return;
-
+        // @ts-ignore
         startTransition(async () => {
           const error = await addItem(selectedVariantId);
 
@@ -52,7 +52,7 @@ export function AddToCart({
         });
       }}
       className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
+        'bg-blue-600 relative flex w-full items-center justify-center rounded-full p-4 tracking-wide text-white hover:opacity-90',
         {
           'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
           'cursor-not-allowed': isPending
diff --git a/components/cart/close-cart.tsx b/components/cart/close-cart.tsx
index 515b94843..9907201e8 100644
--- a/components/cart/close-cart.tsx
+++ b/components/cart/close-cart.tsx
@@ -1,10 +1,10 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
+import CloseIcon from 'components/icons/close';
 
 export default function CloseCart({ className }: { className?: string }) {
   return (
     <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
-      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
+      <CloseIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
     </div>
   );
 }
diff --git a/components/cart/delete-item-button.tsx b/components/cart/delete-item-button.tsx
index 605adcf51..1005cb28a 100644
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@@ -1,4 +1,4 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import CloseIcon from 'components/icons/close';
 import LoadingDots from 'components/loading-dots';
 import { useRouter } from 'next/navigation';
 
@@ -15,6 +15,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
     <button
       aria-label="Remove cart item"
       onClick={() => {
+        // @ts-ignore
         startTransition(async () => {
           const error = await removeItem(item.id);
 
@@ -37,7 +38,7 @@ export default function DeleteItemButton({ item }: { item: CartItem }) {
       {isPending ? (
         <LoadingDots className="bg-white" />
       ) : (
-        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <CloseIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white " />
       )}
     </button>
   );
diff --git a/components/cart/edit-item-quantity-button.tsx b/components/cart/edit-item-quantity-button.tsx
index e846196ca..a09102315 100644
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@@ -1,9 +1,10 @@
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { removeItem, updateItemQuantity } from 'components/cart/actions';
+import MinusIcon from 'components/icons/minus';
+import PlusIcon from 'components/icons/plus';
 import LoadingDots from 'components/loading-dots';
 import type { CartItem } from 'lib/shopify/types';
 
@@ -21,6 +22,7 @@ export default function EditItemQuantityButton({
     <button
       aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
       onClick={() => {
+        // @ts-ignore
         startTransition(async () => {
           const error =
             type === 'minus' && item.quantity - 1 === 0
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 4fbfcc6ad..19f63352a 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { Dialog, Transition } from '@headlessui/react';
-import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import ShoppingBagIcon from 'components/icons/shopping-bag';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Fragment, useEffect, useRef, useState } from 'react';
-import CloseCart from './close-cart';
+import { useEffect, useRef, useState } from 'react';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
 import OpenCart from './open-cart';
@@ -21,8 +20,6 @@ type MerchandiseSearchParams = {
 export default function CartModal({ cart }: { cart: Cart | undefined }) {
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart?.totalQuantity);
-  const openCart = () => setIsOpen(true);
-  const closeCart = () => setIsOpen(false);
 
   useEffect(() => {
     // Open cart modal when quantity changes.
@@ -39,153 +36,123 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
 
   return (
     <>
-      <button aria-label="Open cart" onClick={openCart}>
-        <OpenCart quantity={cart?.totalQuantity} />
-      </button>
-      <Transition show={isOpen}>
-        <Dialog onClose={closeCart} className="relative z-50">
-          <Transition.Child
-            as={Fragment}
-            enter="transition-all ease-in-out duration-300"
-            enterFrom="opacity-0 backdrop-blur-none"
-            enterTo="opacity-100 backdrop-blur-[.5px]"
-            leave="transition-all ease-in-out duration-200"
-            leaveFrom="opacity-100 backdrop-blur-[.5px]"
-            leaveTo="opacity-0 backdrop-blur-none"
-          >
-            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-          </Transition.Child>
-          <Transition.Child
-            as={Fragment}
-            enter="transition-all ease-in-out duration-300"
-            enterFrom="translate-x-full"
-            enterTo="translate-x-0"
-            leave="transition-all ease-in-out duration-200"
-            leaveFrom="translate-x-0"
-            leaveTo="translate-x-full"
-          >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
-              <div className="flex items-center justify-between">
-                <p className="text-lg font-semibold">My Cart</p>
+      <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+        <SheetTrigger aria-label="Open cart">
+          <OpenCart quantity={cart?.totalQuantity} />
+        </SheetTrigger>
+        <SheetContent className="bg-app">
+          <SheetHeader>
+            <SheetTitle className="text-lg font-semibold">My cart</SheetTitle>
+          </SheetHeader>
+          {!cart || cart.lines.length === 0 ? (
+            <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
+              <ShoppingBagIcon className="h-12" />
+              <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
+            </div>
+          ) : (
+            <div className="flex h-full flex-col justify-between overflow-hidden p-1">
+              <ul className="flex-grow overflow-auto py-4">
+                {cart.lines.map((item, i) => {
+                  const merchandiseSearchParams = {} as MerchandiseSearchParams;
 
-                <button aria-label="Close cart" onClick={closeCart}>
-                  <CloseCart />
-                </button>
-              </div>
+                  item.merchandise.selectedOptions.forEach(({ name, value }) => {
+                    if (value !== DEFAULT_OPTION) {
+                      merchandiseSearchParams[name.toLowerCase()] = value;
+                    }
+                  });
 
-              {!cart || cart.lines.length === 0 ? (
-                <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
-                  <ShoppingCartIcon className="h-16" />
-                  <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
-                </div>
-              ) : (
-                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
-                  <ul className="flex-grow overflow-auto py-4">
-                    {cart.lines.map((item, i) => {
-                      const merchandiseSearchParams = {} as MerchandiseSearchParams;
+                  const merchandiseUrl = createUrl(
+                    `/product/${item.merchandise.product.handle}`,
+                    new URLSearchParams(merchandiseSearchParams)
+                  );
 
-                      item.merchandise.selectedOptions.forEach(({ name, value }) => {
-                        if (value !== DEFAULT_OPTION) {
-                          merchandiseSearchParams[name.toLowerCase()] = value;
-                        }
-                      });
-
-                      const merchandiseUrl = createUrl(
-                        `/product/${item.merchandise.product.handle}`,
-                        new URLSearchParams(merchandiseSearchParams)
-                      );
-
-                      return (
-                        <li
-                          key={i}
-                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                  return (
+                    <li
+                      key={i}
+                      className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                    >
+                      <div className="relative flex w-full flex-row justify-between px-1 py-4">
+                        <div className="absolute z-40 -mt-2 ml-[55px]">
+                          <DeleteItemButton item={item} />
+                        </div>
+                        <Link
+                          href={merchandiseUrl}
+                          onClick={() => setIsOpen(false)}
+                          className="z-30 flex flex-row space-x-4"
                         >
-                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
-                            <div className="absolute z-40 -mt-2 ml-[55px]">
-                              <DeleteItemButton item={item} />
-                            </div>
-                            <Link
-                              href={merchandiseUrl}
-                              onClick={closeCart}
-                              className="z-30 flex flex-row space-x-4"
-                            >
-                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-                                <Image
-                                  className="h-full w-full object-cover"
-                                  width={64}
-                                  height={64}
-                                  alt={
-                                    item.merchandise.product.featuredImage.altText ||
-                                    item.merchandise.product.title
-                                  }
-                                  src={item.merchandise.product.featuredImage.url}
-                                />
-                              </div>
-
-                              <div className="flex flex-1 flex-col text-base">
-                                <span className="leading-tight">
-                                  {item.merchandise.product.title}
-                                </span>
-                                {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                                    {item.merchandise.title}
-                                  </p>
-                                ) : null}
-                              </div>
-                            </Link>
-                            <div className="flex h-16 flex-col justify-between">
-                              <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
-                                amount={item.cost.totalAmount.amount}
-                                currencyCode={item.cost.totalAmount.currencyCode}
-                              />
-                              <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
-                                <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center">
-                                  <span className="w-full text-sm">{item.quantity}</span>
-                                </p>
-                                <EditItemQuantityButton item={item} type="plus" />
-                              </div>
-                            </div>
+                          <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
+                            <Image
+                              className="h-full w-full object-cover"
+                              width={64}
+                              height={64}
+                              alt={
+                                item.merchandise.product.featuredImage.altText ||
+                                item.merchandise.product.title
+                              }
+                              src={item.merchandise.product.featuredImage.url}
+                            />
                           </div>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                  <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
-                      <p>Taxes</p>
-                      <Price
-                        className="text-right text-base text-black dark:text-white"
-                        amount={cart.cost.totalTaxAmount.amount}
-                        currencyCode={cart.cost.totalTaxAmount.currencyCode}
-                      />
-                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
-                      <p>Shipping</p>
-                      <p className="text-right">Calculated at checkout</p>
-                    </div>
-                    <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
-                      <p>Total</p>
-                      <Price
-                        className="text-right text-base text-black dark:text-white"
-                        amount={cart.cost.totalAmount.amount}
-                        currencyCode={cart.cost.totalAmount.currencyCode}
-                      />
-                    </div>
-                  </div>
-                  <a
-                    href={cart.checkoutUrl}
-                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
-                  >
-                    Proceed to Checkout
-                  </a>
+
+                          <div className="flex flex-1 flex-col text-base">
+                            <span className="leading-tight">{item.merchandise.product.title}</span>
+                            {item.merchandise.title !== DEFAULT_OPTION ? (
+                              <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                {item.merchandise.title}
+                              </p>
+                            ) : null}
+                          </div>
+                        </Link>
+                        <div className="flex h-16 flex-col justify-between">
+                          <Price
+                            className="flex justify-end space-y-2 text-right text-sm"
+                            amount={item.cost.totalAmount.amount}
+                            currencyCode={item.cost.totalAmount.currencyCode}
+                          />
+                          <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
+                            <EditItemQuantityButton item={item} type="minus" />
+                            <p className="w-6 text-center">
+                              <span className="w-full text-sm">{item.quantity}</span>
+                            </p>
+                            <EditItemQuantityButton item={item} type="plus" />
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
+                <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
+                  <p>Taxes</p>
+                  <Price
+                    className="text-right text-base text-black dark:text-white"
+                    amount={cart.cost.totalTaxAmount.amount}
+                    currencyCode={cart.cost.totalTaxAmount.currencyCode}
+                  />
                 </div>
-              )}
-            </Dialog.Panel>
-          </Transition.Child>
-        </Dialog>
-      </Transition>
+                <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
+                  <p>Shipping</p>
+                  <p className="text-right">Calculated at checkout</p>
+                </div>
+                <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
+                  <p>Total</p>
+                  <Price
+                    className="text-right text-base text-black dark:text-white"
+                    amount={cart.cost.totalAmount.amount}
+                    currencyCode={cart.cost.totalAmount.currencyCode}
+                  />
+                </div>
+              </div>
+              <a
+                href={cart.checkoutUrl}
+                className="bg-blue-600 block w-full rounded-full p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+              >
+                Proceed to Checkout
+              </a>
+            </div>
+          )}
+        </SheetContent>
+      </Sheet>
     </>
   );
 }
diff --git a/components/cart/open-cart.tsx b/components/cart/open-cart.tsx
index fa8226ab5..7c3f514a3 100644
--- a/components/cart/open-cart.tsx
+++ b/components/cart/open-cart.tsx
@@ -1,5 +1,5 @@
-import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
+import ShoppingBagIcon from 'components/icons/shopping-bag';
 
 export default function OpenCart({
   className,
@@ -9,13 +9,16 @@ export default function OpenCart({
   quantity?: number;
 }) {
   return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
-      <ShoppingCartIcon
-        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-ui-border text-high-contrast transition-colors">
+      <ShoppingBagIcon
+        className={clsx(
+          'h-4 stroke-current transition-all ease-in-out hover:scale-110 ',
+          className
+        )}
       />
 
       {quantity ? (
-        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
+        <div className="bg-blue-600 absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded text-[11px] font-medium text-white">
           {quantity}
         </div>
       ) : null}
diff --git a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
index 782398d39..847791de2 100644
--- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
+++ b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Info } from 'lucide-react';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
 import dynamic from 'next/dynamic';
 
 import Hero from 'components/modules/hero';
@@ -57,7 +57,7 @@ const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentCompo
           key={`index-${_key}`}
         >
           <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-            <Info className="mr-1" />
+            <InfoCircledIcon className="mr-1" />
             {`No matching component (Type: ${_type})`}
           </span>
         </div>
diff --git a/components/layout/footer/copyright.tsx b/components/layout/footer/copyright.tsx
index 966d08d87..d93063b4e 100644
--- a/components/layout/footer/copyright.tsx
+++ b/components/layout/footer/copyright.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
 
 export default function CopyRight() {
diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx
index 5bdeadc04..c51879838 100644
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@@ -1,32 +1,72 @@
+import Text from '@/components/ui/text';
+import { footerMenuQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
 import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import CopyRight from './copyright';
 
-// interface FooterProps {
-//   localeData: {
-//     type: string;
-//     locale: string;
-//     translations: [];
-//   };
-// }
+interface FooterProps {
+  locale: string;
+}
+
+export default async function Footer({ locale }: FooterProps) {
+  const params = {
+    locale: locale
+  };
+
+  const footerMenus = await clientFetch(footerMenuQuery, params);
 
-const Footer = () => {
   return (
     <footer className="border-t border-ui-border bg-app">
       <div className="mx-auto flex w-full flex-col">
-        <div className="flex w-full flex-col items-center space-y-2 p-4 transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
+        <div className="flex w-full items-center justify-between p-4 transition-colors duration-150 md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
           <LocaleSwitcher />
         </div>
+
+        {footerMenus.length > 0 && (
+          <div className="grid w-full grid-cols-2 gap-4 p-4 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
+            {footerMenus.map((menu: object | any, index: number) => {
+              return (
+                <div key={index}>
+                  <Text variant="label">{menu.title}</Text>
+                  <ul className="mt-2 flex flex-col space-y-1" aria-label={menu.title}>
+                    {menu.menu.links.map((link: object | any, index: number) => {
+                      return (
+                        <li className="text-sm" key={index}>
+                          {link._type == 'linkInternal' ? (
+                            <Link
+                              className="hover:underline"
+                              href={`/${link.reference.locale}/${link.reference.slug.current}`}
+                            >
+                              {link.title}
+                            </Link>
+                          ) : (
+                            <a
+                              className="hover:underline"
+                              href={link.url}
+                              target={link.newWindow ? '_blank' : '_self'}
+                            >
+                              {link.title}
+                            </a>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
         <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
           <CopyRight />
         </div>
       </div>
     </footer>
   );
-};
-
-export default Footer;
+}
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index cec0819ae..8fdd1d63d 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -1,27 +1,42 @@
+import Cart from 'components/cart';
+import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
-import { useLocale } from 'next-intl';
 import Link from 'next/link';
+import { Suspense } from 'react';
 import HeaderRoot from './header-root';
+import MobileModal from './mobile-modal';
 
-const Header = () => {
-  const locale = useLocale();
+interface HeaderProps {
+  locale: string;
+}
 
+const Header = ({ locale }: HeaderProps) => {
   return (
     <HeaderRoot>
       <div className="relative flex flex-col">
         <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
+          <div className="md:hidden">
+            <MobileModal />
+          </div>
+
           <div className="flex items-center">
             <Link
               href={`/${locale}`}
-              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
+              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
               aria-label="Logo"
             >
               <Logo />
             </Link>
           </div>
 
-          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-            Menu
+          <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
+            Desktop Menu
+          </div>
+          <div className="flex justify-end md:w-1/3">
+            <Suspense fallback={<OpenCart />}>
+              {/*// @ts-ignore */}
+              <Cart />
+            </Suspense>
           </div>
         </div>
       </div>
diff --git a/components/layout/header/mobile-modal.tsx b/components/layout/header/mobile-modal.tsx
new file mode 100644
index 000000000..3f2f1fb29
--- /dev/null
+++ b/components/layout/header/mobile-modal.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import MenuIcon from '@/components/icons/menu';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { useState } from 'react';
+
+export default function MobileModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+        <SheetTrigger aria-label="Open menu">
+          <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-ui-border text-high-contrast transition-colors">
+            <MenuIcon className="h-4 stroke-current transition-all ease-in-out hover:scale-110" />
+          </div>
+        </SheetTrigger>
+        <SheetContent side="left" className="bg-app">
+          <SheetHeader>
+            <SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
diff --git a/components/ui/loading-dots.tsx b/components/loading-dots.tsx
similarity index 100%
rename from components/ui/loading-dots.tsx
rename to components/loading-dots.tsx
diff --git a/components/modules/carousel/carousel.tsx b/components/modules/carousel/carousel.tsx
index 105bfccf1..76d35a296 100644
--- a/components/modules/carousel/carousel.tsx
+++ b/components/modules/carousel/carousel.tsx
@@ -1,28 +1,28 @@
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 import 'glider-js/glider.min.css';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
 import React from 'react';
 import Glider from 'react-glider';
 
 export interface CarouselItemProps {
-  children: React.ReactNode
-  className?: string
+  children: React.ReactNode;
+  className?: string;
 }
 
 export const CarouselItem: React.FC<CarouselItemProps> = ({
   children,
   className = 'ml-2 first:ml-0 lg:ml-4'
 }: CarouselItemProps) => {
-  return <div className={className}>{children}</div>
-}
+  return <div className={className}>{children}</div>;
+};
 
 export interface CarouselProps {
-  children: JSX.Element | JSX.Element[] | any
-  gliderClasses?: string
-  hasArrows?: boolean
-  hasDots?: boolean
-  slidesToShow?: number
-  slidesToScroll?: number
-  responsive?: any
+  children: JSX.Element | JSX.Element[] | any;
+  gliderClasses?: string;
+  hasArrows?: boolean;
+  hasDots?: boolean;
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  responsive?: any;
 }
 
 export const Carousel: React.FC<CarouselProps> = ({
@@ -32,29 +32,26 @@ export const Carousel: React.FC<CarouselProps> = ({
   hasDots = true,
   slidesToShow = 1,
   slidesToScroll = 1,
-  responsive,
+  responsive
 }) => {
-
-
   return (
     <>
       <Glider
-        className={`block relative ${gliderClasses}`}
+        className={`relative block ${gliderClasses}`}
         draggable
         slidesToShow={slidesToShow}
         scrollLock
         slidesToScroll={slidesToScroll}
         hasArrows={hasArrows}
         hasDots={hasDots}
-        iconLeft={<ArrowLeft className="stroke-current" />}
-        iconRight={<ArrowRight className="stroke-current" />}
+        iconLeft={<ArrowLeftIcon className="h-6 w-6" />}
+        iconRight={<ArrowRightIcon className="h-6 w-6" />}
         responsive={[responsive]}
       >
-          {React.Children.map(children, (child) => {
-            return React.cloneElement(child)
-          })}
-
+        {React.Children.map(children, (child) => {
+          return React.cloneElement(child);
+        })}
       </Glider>
     </>
-  )
-}
+  );
+};
diff --git a/components/preview-suspense.tsx b/components/preview-suspense.tsx
new file mode 100644
index 000000000..a0acc97e0
--- /dev/null
+++ b/components/preview-suspense.tsx
@@ -0,0 +1,4 @@
+'use client';
+
+// Once rollup supports 'use client' module directives then 'next-sanity' will include them and this re-export will no longer be necessary
+export { PreviewSuspense as default } from 'next-sanity/preview';
diff --git a/components/product/add-to-cart.tsx b/components/product/add-to-cart.tsx
index 550f1ccb9..4314e982b 100644
--- a/components/product/add-to-cart.tsx
+++ b/components/product/add-to-cart.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
 
-import LoadingDots from 'components/ui/loading-dots';
+import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 
 export function AddToCart({
diff --git a/components/ui/dropdown/dropdown.tsx b/components/ui/dropdown-menu.tsx
similarity index 58%
rename from components/ui/dropdown/dropdown.tsx
rename to components/ui/dropdown-menu.tsx
index 1d4d37f12..ef793c703 100644
--- a/components/ui/dropdown/dropdown.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,33 +1,34 @@
-'use client'
+'use client';
 
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons'
-import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons';
 
-import { cn } from 'lib/utils'
+import * as React from 'react';
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+import { cn } from '@/lib/utils';
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className
     )}
@@ -36,9 +37,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -47,14 +47,13 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-high-contrast shadow-md animate-in slide-in-from-left-1',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
   />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,32 +64,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden bg-app text-high-contrast animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -99,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -112,9 +111,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -135,26 +133,22 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold text-high-contrast',
-      inset && 'pl-8',
-      className
-    )}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -162,32 +156,33 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-ui-border', className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <span
-      className={cn(
-        'ml-auto text-xs tracking-widest text-low-contrast',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 
 export {
-  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
-  DropdownMenuShortcut, DropdownMenuSub,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
   DropdownMenuSubContent,
-  DropdownMenuSubTrigger, DropdownMenuTrigger
-}
-
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};
diff --git a/components/ui/locale-switcher/locale-switcher.tsx b/components/ui/locale-switcher/locale-switcher.tsx
index c6057f9b3..b08651dab 100644
--- a/components/ui/locale-switcher/locale-switcher.tsx
+++ b/components/ui/locale-switcher/locale-switcher.tsx
@@ -1,12 +1,13 @@
 'use client';
 
-import LanguageIcon from 'components/icons/language';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger
-} from 'components/ui/dropdown/dropdown';
-import { useLocale } from 'next-intl';
+} from '@/components/ui/dropdown-menu';
+import LanguageIcon from 'components/icons/language';
+import { useLocale, useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
@@ -23,6 +24,7 @@ import { supportedLanguages } from '../../../i18n-config';
 export default function LocaleSwitcher() {
   const pathName = usePathname();
   const currentLocale = useLocale();
+  const t = useTranslations('ui');
 
   // const translations = localeData.translations;
 
@@ -47,40 +49,34 @@ export default function LocaleSwitcher() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div>
+    <>
       <DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
-        <DropdownMenuTrigger asChild>
-          <button
-            className={
-              'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-xs font-semibold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
-            }
-            aria-label="Language selector"
-          >
-            <LanguageIcon className="h-6 w-6" />
-            <span>{currentLocale}</span>
-          </button>
+        <DropdownMenuTrigger
+          className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors"
+          aria-label={t('languageSelector')}
+        >
+          <LanguageIcon className="h-6 w-6" />
+          <span className="sr-only">{currentLocale}</span>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="drop-shadow-xl">
+        <DropdownMenuContent align="end" className="bg-app">
           <ul className="">
             {supportedLanguages.locales.map((locale) => {
-              if (currentLocale === locale.id) {
-                return;
-              } else {
-                return (
-                  <li className="" key={locale.id}>
-                    <Link
-                      className="flex w-full cursor-pointer px-4 py-2 text-sm"
-                      href={redirectedPathName(locale.id)}
-                    >
-                      {locale.title}
-                    </Link>
-                  </li>
-                );
-              }
+              return (
+                <DropdownMenuItem className="p-0" key={locale.id}>
+                  <Link
+                    className={`flex w-full cursor-pointer items-center px-4 py-2 text-sm ${
+                      currentLocale == locale.id && 'font-bold'
+                    }`}
+                    href={redirectedPathName(locale.id)}
+                  >
+                    {locale.title}
+                  </Link>
+                </DropdownMenuItem>
+              );
             })}
           </ul>
         </DropdownMenuContent>
       </DropdownMenu>
-    </div>
+    </>
   );
 }
diff --git a/components/ui/navigation-menu/index.ts b/components/ui/navigation-menu/index.ts
deleted file mode 100644
index 1f801506b..000000000
--- a/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './navigation-menu';
-
diff --git a/components/ui/navigation-menu/navigation-menu.tsx b/components/ui/navigation-menu/navigation-menu.tsx
deleted file mode 100644
index 064c38aef..000000000
--- a/components/ui/navigation-menu/navigation-menu.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-'use client'
-
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from 'lib/utils'
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative flex flex-1 items-center justify-center',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      'group flex flex-1 list-none items-center justify-center',
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
-  'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:bg-subtle disabled:opacity-50 disabled:pointer-events-none hover:bg-ui-hover data-[state=open]:bg-ui-hover data-[active]:bg-ui-active h-10 py-1 px-3 group w-max'
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}
-  >
-    {children}{' '}
-    <ChevronDown
-      className="relative top-[1px] ml-2 h-5 w-5 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=to-start]:slide-out-to-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=from-end]:slide-in-from-right-52 top-0 left-0 w-full md:absolute md:w-auto',
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn('absolute left-0 top-full flex justify-center z-50')}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        'origin-top-center data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:zoom-in-90 data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden drop-shadow bg-white md:w-[var(--radix-navigation-menu-viewport-width)]',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=visible]:fade-in data-[state=hidden]:fade-out top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 bg-ui" />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle
-}
-
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 000000000..bbcfe2f6f
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = ({ className, ...props }: SheetPrimitive.DialogPortalProps) => (
+  <SheetPrimitive.Portal className={cn(className)} {...props} />
+);
+SheetPortal.displayName = SheetPrimitive.Portal.displayName;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 lg:p-6',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left md:max-w-md',
+        right:
+          'inset-y-0 right-0 h-full w-full  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right md:max-w-md'
+      }
+    },
+    defaultVariants: {
+      side: 'right'
+    }
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary md:right-6 md:top-6">
+        <Cross1Icon className="h-6 w-6" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+};
diff --git a/components/ui/text/text.tsx b/components/ui/text/text.tsx
index 66ad02881..51e162ef2 100644
--- a/components/ui/text/text.tsx
+++ b/components/ui/text/text.tsx
@@ -70,7 +70,7 @@ const Text: FunctionComponent<TextProps> = ({
           ['max-w-prose font-display text-2xl font-extrabold leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
             variant === 'sectionHeading',
           ['text-sm font-medium leading-tight lg:text-base']: variant === 'listChildHeading',
-          ['max-w-prose text-sm lg:text-base 2xl:text-lg']: variant === 'label',
+          ['max-w-prose text-lg text-high-contrast lg:text-xl']: variant === 'label',
           ['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph'
         },
         className
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 000000000..99711221a
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,30 @@
+export type SortFilterItem = {
+  title: string;
+  slug: string | null;
+  sortKey: 'RELEVANCE' | 'BEST_SELLING' | 'CREATED_AT' | 'PRICE';
+  reverse: boolean;
+};
+
+export const defaultSort: SortFilterItem = {
+  title: 'Relevance',
+  slug: null,
+  sortKey: 'RELEVANCE',
+  reverse: false
+};
+
+export const sorting: SortFilterItem[] = [
+  defaultSort,
+  { title: 'Trending', slug: 'trending-desc', sortKey: 'BEST_SELLING', reverse: false }, // asc
+  { title: 'Latest arrivals', slug: 'latest-desc', sortKey: 'CREATED_AT', reverse: true },
+  { title: 'Price: Low to high', slug: 'price-asc', sortKey: 'PRICE', reverse: false }, // asc
+  { title: 'Price: High to low', slug: 'price-desc', sortKey: 'PRICE', reverse: true }
+];
+
+export const TAGS = {
+  collections: 'collections',
+  products: 'products'
+};
+
+export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
+export const DEFAULT_OPTION = 'Default Title';
+export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index 945046a9a..cb2ee20f4 100644
--- a/lib/sanity/queries.tsx
+++ b/lib/sanity/queries.tsx
@@ -255,6 +255,26 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
   }
 }`;
 
+// Footer menu query
+export const footerMenuQuery = `*[_type == "footerMenu" && language == $locale] | order(title asc) {
+  _type,
+  title,
+  "locale": language,
+  menu {
+    title,
+    links[] {
+      _type,
+      title,
+      reference-> {
+        slug,
+        "locale": language
+      },
+      url,
+      newWindow
+    }
+  }
+}`;
+
 // Site settings query
 export const siteSettingsQuery = `*[_type == "settings" && language == $locale][0] {
   menuMain {
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index a2f45a36f..a8804d045 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -1,5 +1,8 @@
-import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT } from 'lib/constants';
+import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
 import { isShopifyError } from 'lib/type-guards';
+import { revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
 import {
   addToCartMutation,
   createCartMutation,
@@ -23,6 +26,7 @@ import {
   Cart,
   Collection,
   Connection,
+  Image,
   Menu,
   Page,
   Product,
@@ -52,15 +56,17 @@ const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
 type ExtractVariables<T> = T extends { variables: object } ? T['variables'] : never;
 
 export async function shopifyFetch<T>({
-  query,
-  variables,
+  cache = 'force-cache',
   headers,
-  cache = 'force-cache'
+  query,
+  tags,
+  variables
 }: {
-  query: string;
-  variables?: ExtractVariables<T>;
-  headers?: HeadersInit;
   cache?: RequestCache;
+  headers?: HeadersInit;
+  query: string;
+  tags?: string[];
+  variables?: ExtractVariables<T>;
 }): Promise<{ status: number; body: T } | never> {
   try {
     const result = await fetch(endpoint, {
@@ -75,7 +81,7 @@ export async function shopifyFetch<T>({
         ...(variables && { variables })
       }),
       cache,
-      next: { revalidate: 900 } // 15 minutes
+      ...(tags && { next: { tags } })
     });
 
     const body = await result.json();
@@ -149,6 +155,18 @@ const reshapeCollections = (collections: ShopifyCollection[]) => {
   return reshapedCollections;
 };
 
+const reshapeImages = (images: Connection<Image>, productTitle: string) => {
+  const flattened = removeEdgesAndNodes(images);
+
+  return flattened.map((image) => {
+    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    return {
+      ...image,
+      altText: image.altText || `${productTitle} - ${filename}`
+    };
+  });
+};
+
 const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
   if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
     return undefined;
@@ -158,7 +176,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
 
   return {
     ...rest,
-    images: removeEdgesAndNodes(images),
+    images: reshapeImages(images, product.title),
     variants: removeEdgesAndNodes(variants)
   };
 };
@@ -232,15 +250,16 @@ export async function updateCart(
   return reshapeCart(res.body.data.cartLinesUpdate.cart);
 }
 
-export async function getCart(cartId: string): Promise<Cart | null> {
+export async function getCart(cartId: string): Promise<Cart | undefined> {
   const res = await shopifyFetch<ShopifyCartOperation>({
     query: getCartQuery,
     variables: { cartId },
     cache: 'no-store'
   });
 
+  // Old carts becomes `null` when you checkout.
   if (!res.body.data.cart) {
-    return null;
+    return undefined;
   }
 
   return reshapeCart(res.body.data.cart);
@@ -249,6 +268,7 @@ export async function getCart(cartId: string): Promise<Cart | null> {
 export async function getCollection(handle: string): Promise<Collection | undefined> {
   const res = await shopifyFetch<ShopifyCollectionOperation>({
     query: getCollectionQuery,
+    tags: [TAGS.collections],
     variables: {
       handle
     }
@@ -257,16 +277,27 @@ export async function getCollection(handle: string): Promise<Collection | undefi
   return reshapeCollection(res.body.data.collection);
 }
 
-export async function getCollectionProducts(handle: string): Promise<Product[]> {
+export async function getCollectionProducts({
+  collection,
+  reverse,
+  sortKey
+}: {
+  collection: string;
+  reverse?: boolean;
+  sortKey?: string;
+}): Promise<Product[]> {
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getCollectionProductsQuery,
+    tags: [TAGS.collections, TAGS.products],
     variables: {
-      handle
+      handle: collection,
+      reverse,
+      sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey
     }
   });
 
   if (!res.body.data.collection) {
-    console.log('No collection found for handle', handle);
+    console.log(`No collection found for \`${collection}\``);
     return [];
   }
 
@@ -274,7 +305,10 @@ export async function getCollectionProducts(handle: string): Promise<Product[]>
 }
 
 export async function getCollections(): Promise<Collection[]> {
-  const res = await shopifyFetch<ShopifyCollectionsOperation>({ query: getCollectionsQuery });
+  const res = await shopifyFetch<ShopifyCollectionsOperation>({
+    query: getCollectionsQuery,
+    tags: [TAGS.collections]
+  });
   const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
   const collections = [
     {
@@ -301,6 +335,7 @@ export async function getCollections(): Promise<Collection[]> {
 export async function getMenu(handle: string): Promise<Menu[]> {
   const res = await shopifyFetch<ShopifyMenuOperation>({
     query: getMenuQuery,
+    tags: [TAGS.collections],
     variables: {
       handle
     }
@@ -334,6 +369,7 @@ export async function getPages(): Promise<Page[]> {
 export async function getProduct(handle: string): Promise<Product | undefined> {
   const res = await shopifyFetch<ShopifyProductOperation>({
     query: getProductQuery,
+    tags: [TAGS.products],
     variables: {
       handle
     }
@@ -345,6 +381,7 @@ export async function getProduct(handle: string): Promise<Product | undefined> {
 export async function getProductRecommendations(productId: string): Promise<Product[]> {
   const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
     query: getProductRecommendationsQuery,
+    tags: [TAGS.products],
     variables: {
       productId
     }
@@ -364,6 +401,7 @@ export async function getProducts({
 }): Promise<Product[]> {
   const res = await shopifyFetch<ShopifyProductsOperation>({
     query: getProductsQuery,
+    tags: [TAGS.products],
     variables: {
       query,
       reverse,
@@ -373,3 +411,35 @@ export async function getProducts({
 
   return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
 }
+
+// This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
+export async function revalidate(req: NextRequest): Promise<NextResponse> {
+  // We always need to respond with a 200 status code to Shopify,
+  // otherwise it will continue to retry the request.
+  const collectionWebhooks = ['collections/create', 'collections/delete', 'collections/update'];
+  const productWebhooks = ['products/create', 'products/delete', 'products/update'];
+  const topic = headers().get('x-shopify-topic') || 'unknown';
+  const secret = req.nextUrl.searchParams.get('secret');
+  const isCollectionUpdate = collectionWebhooks.includes(topic);
+  const isProductUpdate = productWebhooks.includes(topic);
+
+  if (!secret || secret !== process.env.SHOPIFY_REVALIDATION_SECRET) {
+    console.error('Invalid revalidation secret.');
+    return NextResponse.json({ status: 200 });
+  }
+
+  if (!isCollectionUpdate && !isProductUpdate) {
+    // We don't need to revalidate anything for any other topics.
+    return NextResponse.json({ status: 200 });
+  }
+
+  if (isCollectionUpdate) {
+    revalidateTag(TAGS.collections);
+  }
+
+  if (isProductUpdate) {
+    revalidateTag(TAGS.products);
+  }
+
+  return NextResponse.json({ status: 200, revalidated: true, now: Date.now() });
+}
diff --git a/lib/shopify/queries/collection.ts b/lib/shopify/queries/collection.ts
index ac3fb4dd9..6396ff8eb 100644
--- a/lib/shopify/queries/collection.ts
+++ b/lib/shopify/queries/collection.ts
@@ -37,9 +37,13 @@ export const getCollectionsQuery = /* GraphQL */ `
 `;
 
 export const getCollectionProductsQuery = /* GraphQL */ `
-  query getCollectionProducts($handle: String!) {
+  query getCollectionProducts(
+    $handle: String!
+    $sortKey: ProductCollectionSortKeys
+    $reverse: Boolean
+  ) {
     collection(handle: $handle) {
-      products(first: 100) {
+      products(sortKey: $sortKey, reverse: $reverse, first: 100) {
         edges {
           node {
             ...product
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index b18ed3b63..23dc02d46 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -201,6 +201,8 @@ export type ShopifyCollectionProductsOperation = {
   };
   variables: {
     handle: string;
+    reverse?: boolean;
+    sortKey?: string;
   };
 };
 
diff --git a/lib/utils.ts b/lib/utils.ts
index acd42f638..2f7f2aac7 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,5 +1,9 @@
-import { ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
 
 export const createUrl = (pathname: string, params: URLSearchParams) => {
   const paramsString = params.toString();
@@ -7,7 +11,3 @@ export const createUrl = (pathname: string, params: URLSearchParams) => {
 
   return `${pathname}${queryString}`;
 };
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
diff --git a/messages/en.json b/messages/en.json
index 755839b26..f44141496 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -9,7 +9,8 @@
       "titlePart": "Preview of:",
       "exitPreviewLabel": "Exit Preview"
     },
-    "copyright": "All rights reserved."
+    "copyright": "All rights reserved.",
+    "languageSelector": "Language selector"
   },
   "search": {
     "search": "Search",
diff --git a/messages/sv.json b/messages/sv.json
index 1fcdec833..05bf4e5a6 100644
--- a/messages/sv.json
+++ b/messages/sv.json
@@ -9,7 +9,8 @@
       "titlePart": "Förhandsvisning av:",
       "exitPreviewLabel": "Avsluta förhandsvisning"
     },
-    "copyright": "Alla rättigheter förbehållna."
+    "copyright": "Alla rättigheter förbehållna.",
+    "languageSelector": "Språkväljare"
   },
   "search": {
     "search": "Sök",
diff --git a/next.config.js b/next.config.js
index 8e03cd0b2..66f89d97f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -11,6 +11,7 @@ module.exports = withBundleAnalyzer(
     },
     experimental: {
       scrollRestoration: true,
+      serverActions: true,
     },
     images: {
       formats: ['image/avif', 'image/webp'],
diff --git a/package.json b/package.json
index 9df2095e6..20c6a0e15 100644
--- a/package.json
+++ b/package.json
@@ -19,14 +19,16 @@
     "*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.14",
     "@next/bundle-analyzer": "^13.4.3",
     "@portabletext/react": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.2",
+    "@sanity/client": "^6.4.4",
     "@sanity/icons": "^2.3.1",
     "@sanity/image-url": "^1.0.2",
+    "@sanity/preview-kit": "^2.4.9",
     "@sanity/types": "^3.11.1",
     "@sanity/ui": "^1.3.3",
     "@sanity/webhook": "^2.0.0",
@@ -36,10 +38,9 @@
     "clsx": "^1.2.1",
     "framer-motion": "^8.5.5",
     "is-empty-iterable": "^3.0.0",
-    "lucide-react": "^0.194.0",
     "next": "13.4.13",
-    "next-intl": "3.0.0-beta.9",
-    "next-sanity": "^5.2.3",
+    "next-intl": "2.19.1",
+    "next-sanity": "^4.3.2",
     "react": "18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20bfc52ad..8ab0c2b43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,15 +1,17 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@headlessui/react': ^1.7.14
   '@next/bundle-analyzer': ^13.4.3
   '@playwright/test': ^1.34.1
   '@portabletext/react': ^3.0.0
+  '@radix-ui/react-dialog': ^1.0.4
   '@radix-ui/react-dropdown-menu': ^2.0.4
   '@radix-ui/react-icons': ^1.3.0
   '@radix-ui/react-navigation-menu': ^1.1.2
+  '@sanity/client': ^6.4.4
   '@sanity/icons': ^2.3.1
   '@sanity/image-url': ^1.0.2
+  '@sanity/preview-kit': ^2.4.9
   '@sanity/types': ^3.11.1
   '@sanity/ui': ^1.3.3
   '@sanity/webhook': ^2.0.0
@@ -31,9 +33,8 @@ specifiers:
   framer-motion: ^8.5.5
   is-empty-iterable: ^3.0.0
   lint-staged: ^13.2.2
-  lucide-react: ^0.194.0
-  next: 13.4.7
-  next-intl: ^2.14.6
+  next: 13.4.13
+  next-intl: 2.19.1
   next-sanity: ^4.3.2
   postcss: ^8.4.23
   prettier: ^2.8.8
@@ -51,14 +52,16 @@ specifiers:
   typescript: 4.9.5
 
 dependencies:
-  '@headlessui/react': 1.7.14_biqbaboplfbrettd7655fr4n2y
   '@next/bundle-analyzer': 13.4.3
   '@portabletext/react': 3.0.0_react@18.2.0
+  '@radix-ui/react-dialog': 1.0.4_fxtgt6bjwd6p4cwoordejim2zi
   '@radix-ui/react-dropdown-menu': 2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q
   '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@radix-ui/react-navigation-menu': 1.1.2_biqbaboplfbrettd7655fr4n2y
+  '@sanity/client': 6.4.4
   '@sanity/icons': 2.3.1_react@18.2.0
   '@sanity/image-url': 1.0.2
+  '@sanity/preview-kit': 2.4.9_esptxo4lplqmefuoebcrocvktm
   '@sanity/types': 3.11.1
   '@sanity/ui': 1.3.3_qzhz75e2qrzz6afgiqoxbiiigi
   '@sanity/webhook': 2.0.0
@@ -68,10 +71,9 @@ dependencies:
   clsx: 1.2.1
   framer-motion: 8.5.5_biqbaboplfbrettd7655fr4n2y
   is-empty-iterable: 3.0.0
-  lucide-react: 0.194.0_react@18.2.0
-  next: 13.4.7_3j7hb26pwgm6spbxoejtjx6xja
-  next-intl: 2.14.6_next@13.4.7+react@18.2.0
-  next-sanity: 4.3.2_g5o3rb6nhmiyhllijtz24ubsme
+  next: 13.4.13_3j7hb26pwgm6spbxoejtjx6xja
+  next-intl: 2.19.1_next@13.4.13+react@18.2.0
+  next-sanity: 4.3.3_yrtytp4b7cnii2glukpxw5dsvi
   react: 18.2.0
   react-cookie: 4.1.1_react@18.2.0
   react-dom: 18.2.0_react@18.2.0
@@ -975,18 +977,6 @@ packages:
       tslib: 2.5.2
     dev: false
 
-  /@headlessui/react/1.7.14_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-    dependencies:
-      client-only: 0.0.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /@humanwhocodes/config-array/0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -1099,8 +1089,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@next/env/13.4.7:
-    resolution: {integrity: sha512-ZlbiFulnwiFsW9UV1ku1OvX/oyIPLtMk9p/nnvDSwI0s7vSoZdRtxXNsaO+ZXrLv/pMbXVGq4lL8TbY9iuGmVw==}
+  /@next/env/13.4.13:
+    resolution: {integrity: sha512-fwz2QgVg08v7ZL7KmbQBLF2PubR/6zQdKBgmHEl3BCyWTEDsAQEijjw2gbFhI1tcKfLdOOJUXntz5vZ4S0Polg==}
     dev: false
 
   /@next/eslint-plugin-next/13.4.3:
@@ -1109,8 +1099,8 @@ packages:
       glob: 7.1.7
     dev: true
 
-  /@next/swc-darwin-arm64/13.4.7:
-    resolution: {integrity: sha512-VZTxPv1b59KGiv/pZHTO5Gbsdeoxcj2rU2cqJu03btMhHpn3vwzEK0gUSVC/XW96aeGO67X+cMahhwHzef24/w==}
+  /@next/swc-darwin-arm64/13.4.13:
+    resolution: {integrity: sha512-ZptVhHjzUuivnXMNCJ6lER33HN7lC+rZ01z+PM10Ows21NHFYMvGhi5iXkGtBDk6VmtzsbqnAjnx4Oz5um0FjA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -1118,8 +1108,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-darwin-x64/13.4.7:
-    resolution: {integrity: sha512-gO2bw+2Ymmga+QYujjvDz9955xvYGrWofmxTq7m70b9pDPvl7aDFABJOZ2a8SRCuSNB5mXU8eTOmVVwyp/nAew==}
+  /@next/swc-darwin-x64/13.4.13:
+    resolution: {integrity: sha512-t9nTiWCLApw8W4G1kqJyYP7y6/7lyal3PftmRturIxAIBlZss9wrtVN8nci50StDHmIlIDxfguYIEGVr9DbFTg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -1127,8 +1117,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-gnu/13.4.7:
-    resolution: {integrity: sha512-6cqp3vf1eHxjIDhEOc7Mh/s8z1cwc/l5B6ZNkOofmZVyu1zsbEM5Hmx64s12Rd9AYgGoiCz4OJ4M/oRnkE16/Q==}
+  /@next/swc-linux-arm64-gnu/13.4.13:
+    resolution: {integrity: sha512-xEHUqC8eqR5DHe8SOmMnDU1K3ggrJ28uIKltrQAwqFSSSmzjnN/XMocZkcVhuncuxYrpbri0iMQstRyRVdQVWg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1136,8 +1126,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-arm64-musl/13.4.7:
-    resolution: {integrity: sha512-T1kD2FWOEy5WPidOn1si0rYmWORNch4a/NR52Ghyp4q7KyxOCuiOfZzyhVC5tsLIBDH3+cNdB5DkD9afpNDaOw==}
+  /@next/swc-linux-arm64-musl/13.4.13:
+    resolution: {integrity: sha512-sNf3MnLAm8rquSSAoeD9nVcdaDeRYOeey4stOWOyWIgbBDtP+C93amSgH/LPTDoUV7gNiU6f+ghepTjTjRgIUQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -1145,8 +1135,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-gnu/13.4.7:
-    resolution: {integrity: sha512-zaEC+iEiAHNdhl6fuwl0H0shnTzQoAoJiDYBUze8QTntE/GNPfTYpYboxF5LRYIjBwETUatvE0T64W6SKDipvg==}
+  /@next/swc-linux-x64-gnu/13.4.13:
+    resolution: {integrity: sha512-WhcRaJJSHyx9OWmKjjz+OWHumiPZWRqmM/09Bt7Up4UqUJFFhGExeztR4trtv3rflvULatu9IH/nTV8fUUgaMA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1154,8 +1144,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-linux-x64-musl/13.4.7:
-    resolution: {integrity: sha512-X6r12F8d8SKAtYJqLZBBMIwEqcTRvUdVm+xIq+l6pJqlgT2tNsLLf2i5Cl88xSsIytBICGsCNNHd+siD2fbWBA==}
+  /@next/swc-linux-x64-musl/13.4.13:
+    resolution: {integrity: sha512-+Y4LLhOWWZQIDKVwr2R17lq2KSN0F1c30QVgGIWfnjjHpH8nrIWHEndhqYU+iFuW8It78CiJjQKTw4f51HD7jA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -1163,8 +1153,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-arm64-msvc/13.4.7:
-    resolution: {integrity: sha512-NPnmnV+vEIxnu6SUvjnuaWRglZzw4ox5n/MQTxeUhb5iwVWFedolPFebMNwgrWu4AELwvTdGtWjqof53AiWHcw==}
+  /@next/swc-win32-arm64-msvc/13.4.13:
+    resolution: {integrity: sha512-rWurdOR20uxjfqd1X9vDAgv0Jb26KjyL8akF9CBeFqX8rVaBAnW/Wf6A2gYEwyYY4Bai3T7p1kro6DFrsvBAAw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -1172,8 +1162,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-ia32-msvc/13.4.7:
-    resolution: {integrity: sha512-6Hxijm6/a8XqLQpOOf/XuwWRhcuc/g4rBB2oxjgCMuV9Xlr2bLs5+lXyh8w9YbAUMYR3iC9mgOlXbHa79elmXw==}
+  /@next/swc-win32-ia32-msvc/13.4.13:
+    resolution: {integrity: sha512-E8bSPwRuY5ibJ3CzLQmJEt8qaWrPYuUTwnrwygPUEWoLzD5YRx9SD37oXRdU81TgGwDzCxpl7z5Nqlfk50xAog==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -1181,8 +1171,8 @@ packages:
     dev: false
     optional: true
 
-  /@next/swc-win32-x64-msvc/13.4.7:
-    resolution: {integrity: sha512-sW9Yt36Db1nXJL+mTr2Wo0y+VkPWeYhygvcHj1FF0srVtV+VoDjxleKtny21QHaG05zdeZnw2fCtf2+dEqgwqA==}
+  /@next/swc-win32-x64-msvc/13.4.13:
+    resolution: {integrity: sha512-4KlyC6jWRubPnppgfYsNTPeWfGCxtWLh5vaOAW/kdzAk9widqho8Qb5S4K2vHmal1tsURi7Onk2MMCV1phvyqA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1286,6 +1276,12 @@ packages:
       '@babel/runtime': 7.21.5
     dev: false
 
+  /@radix-ui/primitive/1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.21.5
+    dev: false
+
   /@radix-ui/react-arrow/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==}
     peerDependencies:
@@ -1322,6 +1318,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-compose-refs/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-context/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
     peerDependencies:
@@ -1331,6 +1341,54 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-context/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-dialog/1.0.4_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-context': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-dismissable-layer': 1.0.4_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-focus-guards': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-focus-scope': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-id': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-portal': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-presence': 1.0.1_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-slot': 1.0.2_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-use-controllable-state': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.5_3stiutgnnbnfnf3uowm5cip22i
+    dev: false
+
   /@radix-ui/react-direction/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
     peerDependencies:
@@ -1356,6 +1414,31 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-dismissable-layer/1.0.4_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-use-escape-keydown': 1.0.3_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-dropdown-menu/2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q:
     resolution: {integrity: sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg==}
     peerDependencies:
@@ -1385,6 +1468,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-focus-guards/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-focus-scope/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==}
     peerDependencies:
@@ -1399,6 +1496,29 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-focus-scope/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-icons/1.3.0_react@18.2.0:
     resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
     peerDependencies:
@@ -1417,6 +1537,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-id/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-layout-effect': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-menu/2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q:
     resolution: {integrity: sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ==}
     peerDependencies:
@@ -1508,6 +1643,27 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-portal/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-presence/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
     peerDependencies:
@@ -1521,6 +1677,28 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-presence/1.0.1_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@radix-ui/react-use-layout-effect': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-primitive/1.0.2_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
     peerDependencies:
@@ -1533,6 +1711,27 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-primitive/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-slot': 1.0.2_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-roving-focus/1.0.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-stjCkIoMe6h+1fWtXlA6cRfikdBzCLp3SnVk7c48cv/uy3DTGoXhN76YaOYUJuy3aEDvDIKwKR5KSmvrtPvQPQ==}
     peerDependencies:
@@ -1563,6 +1762,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-slot/1.0.2_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-callback-ref/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
@@ -1572,6 +1786,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-callback-ref/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-controllable-state/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
     peerDependencies:
@@ -1582,6 +1810,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-controllable-state/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-escape-keydown/1.0.2_react@18.2.0:
     resolution: {integrity: sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==}
     peerDependencies:
@@ -1592,6 +1835,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-escape-keydown/1.0.3_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-layout-effect/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
     peerDependencies:
@@ -1601,6 +1859,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-use-layout-effect/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.21.5
+      '@types/react': 18.0.27
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-previous/1.0.0_react@18.2.0:
     resolution: {integrity: sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==}
     peerDependencies:
@@ -1698,19 +1970,19 @@ packages:
       chalk: 4.1.2
       esbuild: 0.16.17
       esbuild-register: 3.4.2_esbuild@0.16.17
-      get-it: 8.1.3
+      get-it: 8.4.1
       golden-fleece: 1.0.9
       pkg-dir: 5.0.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@sanity/client/6.1.1:
-    resolution: {integrity: sha512-T93HCjJdvylcc1GysF52C3nYyBwiBvygzzIv44EGrRg/NPlWbr4Kc4WaLPmtIsZwadKL6g6F+tNETd5OSUykuA==}
+  /@sanity/client/6.4.4:
+    resolution: {integrity: sha512-A+BZY68/6fOf+UZqx5cjMcBMTmpsdL3HHa1P6phtnnzYjzV3xP3WQ+NVi0U6PgahnEH5aSW6y882QUsBS8jYpQ==}
     engines: {node: '>=14.18'}
     dependencies:
       '@sanity/eventsource': 5.0.0
-      get-it: 8.1.3
+      get-it: 8.4.1
       rxjs: 7.8.1
     transitivePeerDependencies:
       - supports-color
@@ -1742,7 +2014,7 @@ packages:
     dependencies:
       archiver: 5.3.1
       debug: 3.2.7
-      get-it: 8.1.3
+      get-it: 8.4.1
       lodash: 4.17.21
       mississippi: 4.0.0
       p-queue: 2.4.2
@@ -1756,16 +2028,33 @@ packages:
     resolution: {integrity: sha512-wtMYcV5GIDIhVyF/jjmdwq1GdlK07dRL40XMns73VbrFI7FteRltxv48bhYVZPcLkRXb0SHjpDS/icj9/yzbVA==}
     dev: false
 
-  /@sanity/groq-store/2.1.0:
-    resolution: {integrity: sha512-GYWtsi0TyTOXiFbGmlPccKE/UsFom9byU8DpPsshNpD0z2MNy19/L0lAaV5/JdUgb8uu84sEKYMPumkRG94lhw==}
+  /@sanity/groq-store/2.3.4:
+    resolution: {integrity: sha512-7W3ROK858YuAjyoPp9+OfHj00BkJX172b6LyV9peL8DcbMIG0G621Tv+oULLaizkA4y2D+b1sx+AYHWtdtIrew==}
     engines: {node: '>=14.18'}
     dependencies:
       '@sanity/eventsource': 5.0.0
-      '@sanity/types': 3.11.1
+      '@sanity/types': 3.14.5
       fast-deep-equal: 3.1.3
-      groq: 3.11.1
-      groq-js: 1.1.9
-      mendoza: 2.1.1
+      groq: 3.14.5
+      groq-js: 1.1.10
+      mendoza: 2.1.2
+      simple-get: 4.0.1
+      split2: 4.2.0
+      throttle-debounce: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@sanity/groq-store/4.0.3:
+    resolution: {integrity: sha512-6mXBUvOrsSG9G7OP52VQMd114+s1AjkrJZCUIaFlZGJTamFvd8viCgZuykEt5wURIm3nVnx3MmWDZPFCvLvNuQ==}
+    engines: {node: '>=14.18'}
+    dependencies:
+      '@sanity/eventsource': 5.0.0
+      '@sanity/types': 3.14.5
+      fast-deep-equal: 3.1.3
+      groq: 3.14.5
+      groq-js: 1.1.11
+      mendoza: 3.0.3
       simple-get: 4.0.1
       split2: 4.2.0
       throttle-debounce: 5.0.0
@@ -1797,7 +2086,7 @@ packages:
       '@sanity/uuid': 3.0.1
       debug: 3.2.7
       file-url: 2.0.2
-      get-it: 8.1.3
+      get-it: 8.4.1
       get-uri: 2.0.4
       globby: 10.0.2
       gunzip-maybe: 1.4.2
@@ -1861,16 +2150,16 @@ packages:
       - supports-color
     dev: false
 
-  /@sanity/preview-kit/1.5.3_react@18.2.0:
-    resolution: {integrity: sha512-1ZUL9wGu9IU+Ql00C6CM3myiXwmw11IzxMgTvFDZJ0/kWs7+jBF3JpeExge3U/nZxAZ+3otqMb1F8LiBGY5bHw==}
+  /@sanity/preview-kit/1.5.5_react@18.2.0:
+    resolution: {integrity: sha512-RJ+bcLB0cH2vyzqyhb4WMua3xygx4em2fuooKOETo1Z/HyyXqFfWZgCRvFItLS5erKNr0pz7Mbhq7sWhGmuOtg==}
     engines: {node: '>=14'}
     peerDependencies:
       react: ^18.0.0
     dependencies:
-      '@sanity/client': 6.1.1
+      '@sanity/client': 6.4.4
       '@sanity/eventsource': 5.0.0
-      '@sanity/groq-store': 2.1.0
-      '@vercel/stega': 0.0.4
+      '@sanity/groq-store': 2.3.4
+      '@vercel/stega': 0.0.5
       lodash.isplainobject: 4.0.6
       react: 18.2.0
       suspend-react: 0.0.10_react@18.2.0
@@ -1879,6 +2168,31 @@ packages:
       - supports-color
     dev: false
 
+  /@sanity/preview-kit/2.4.9_esptxo4lplqmefuoebcrocvktm:
+    resolution: {integrity: sha512-0j7An0beiMOTMLA+RdzQmAo6Lk6YuKuuARabKTk6rpl4uf117jtveh50DiaZNHieToF9AGXxc9qgYXR0lc4k+w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@sanity/client': ^6.4.3
+      react: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@sanity/client': 6.4.4
+      '@sanity/eventsource': 5.0.0
+      '@sanity/groq-store': 4.0.3
+      '@vercel/stega': 0.1.0
+      lodash.get: 4.4.2
+      lodash.isplainobject: 4.0.6
+      lru-cache: 10.0.0
+      mendoza: 3.0.3
+      react: 18.2.0
+      react-fast-compare: 3.2.2
+      use-sync-external-store: 1.2.0_react@18.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@sanity/schema/3.11.1:
     resolution: {integrity: sha512-YD0Mhrbg+UYH96wkYI9axWNJwK+kGi8AHS9cSLbJ4n2QkVROgBvdPcC6OFxzWY50yhpp6IDP/pvBujefKx8n5g==}
     dependencies:
@@ -1916,7 +2230,16 @@ packages:
   /@sanity/types/3.11.1:
     resolution: {integrity: sha512-TmCtStfZcf1VTKrPFJOjVhWOvjlrBncn86/0UuE7Ftsgq12tQEyPCpKAzAT6E7uUmr15wMUSvCgXX8hn9/poKg==}
     dependencies:
-      '@sanity/client': 6.1.1
+      '@sanity/client': 6.4.4
+      '@types/react': 18.0.27
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@sanity/types/3.14.5:
+    resolution: {integrity: sha512-uQ/SGdzxD8i08PAqIoNTGMfzRZT1JZ6GVB78KfvGt3fwA6C5cz7E6LVZKX9Q+vcqZuc7DTBBH92fcLkM3k8RwQ==}
+    dependencies:
+      '@sanity/client': 6.4.4
       '@types/react': 18.0.27
     transitivePeerDependencies:
       - supports-color
@@ -2100,7 +2423,6 @@ packages:
     resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
     dependencies:
       '@types/react': 18.0.27
-    dev: true
 
   /@types/react-is/17.0.4:
     resolution: {integrity: sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==}
@@ -2262,8 +2584,12 @@ packages:
       ajv: 6.12.6
     dev: false
 
-  /@vercel/stega/0.0.4:
-    resolution: {integrity: sha512-4c9AibBOJ9oGvvev0f5QFbdcDPmOjkxdlrKb5Y70DnAc0ThtFujod8DRGA/RLFQ5lAvgRTdpvoczl8GhHuxFJQ==}
+  /@vercel/stega/0.0.5:
+    resolution: {integrity: sha512-vvuUYW0rBp4Ea9xv0LilqFyDHAW9tvy4GL70G1ayGisQwpOYIPChmiw/56jqZvpxjE9gjQIApLfglOcdZe3PcA==}
+    dev: false
+
+  /@vercel/stega/0.1.0:
+    resolution: {integrity: sha512-5b0PkOJsFBX5alChuIO3qpkt5vIZBevzLPhUQ1UP8UzVjL3F1VllnZxp/thfD8R5ol7D7WHkgZHIjdUBX4tDpQ==}
     dev: false
 
   /@vitejs/plugin-react/3.1.0_vite@4.3.8:
@@ -4143,6 +4469,24 @@ packages:
       - supports-color
     dev: false
 
+  /get-it/8.4.1:
+    resolution: {integrity: sha512-B81/lof6jHW2/YyvH4gzKclBMdHNl2B4hRpuIiwVYtZjUiV5mBAQa2GTX6EPTuNhPxw8K5c14cJAFUa78b4A/g==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      debug: 4.3.4
+      decompress-response: 7.0.0
+      follow-redirects: 1.15.2_debug@4.3.4
+      into-stream: 6.0.0
+      is-plain-object: 5.0.0
+      is-retry-allowed: 2.2.0
+      is-stream: 2.0.1
+      parse-headers: 2.0.5
+      progress-stream: 2.0.0
+      tunnel-agent: 0.6.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /get-nonce/1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
@@ -4348,13 +4692,18 @@ packages:
     resolution: {integrity: sha512-qJeuEgziddryH1ClsJvMoZM9aXNQbBViNZZrJwhHKr2wU8HGGM7uNWNVFglWXMX60MMaa2SClX3UohP76Ut68g==}
     dev: false
 
-  /groq-js/1.1.9:
-    resolution: {integrity: sha512-Kml1SgKotOOEmm1rK1w/K4UprIWJ/UU0SzeO2dPy8ab2wcAGfE82X5CTdaD1AMaP+40Ug1gAsVgPF5S2H/fcPw==}
+  /groq-js/1.1.10:
+    resolution: {integrity: sha512-cYZMSCuBZ5KPB7hDRzkIwTB6qTDtcfqXxcejJPWumSw5gCOInTSvVtfccp0GM7TE1HkF7bF1PR2iSnliFDSSJg==}
     engines: {node: '>= 14'}
     dev: false
 
-  /groq/3.11.1:
-    resolution: {integrity: sha512-g4UG/8+XFbZyrP54yJpM9Mhg7AP/lrgRdu44RrpXask9d3qF2LYMG38cWEyZxn1by6Hcl7ylbTJQzwg85+7QGw==}
+  /groq-js/1.1.11:
+    resolution: {integrity: sha512-LLYg7+nuOOcbQD7FKJjZj442W4ws+j/yggJV474VS6kmeIpBxfNGNMnBsfGSaJ/iDIhknjL4OcDgJ60FL+UJXA==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /groq/3.14.5:
+    resolution: {integrity: sha512-1kpBA0FPgNL72G+Qj4PwyTjpNfOqO6FPzIANc8aDxdesUtg6JVMGYXF6zsvR/9nIMfuT8+TEoyyKT9V7ls8e+g==}
     engines: {node: '>=14'}
     dev: false
 
@@ -5109,6 +5458,10 @@ packages:
     resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
     dev: false
 
+  /lodash.get/4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    dev: false
+
   /lodash.isplainobject/4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -5146,6 +5499,11 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lru-cache/10.0.0:
+    resolution: {integrity: sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==}
+    engines: {node: 14 || >=16.14}
+    dev: false
+
   /lru-cache/5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -5158,14 +5516,6 @@ packages:
     dependencies:
       yallist: 4.0.0
 
-  /lucide-react/0.194.0_react@18.2.0:
-    resolution: {integrity: sha512-3+ysUvaoeYqI/rKCtyeHlnn+7WdAJrAI0zLNKbnfFRAp+GC2Jw/vGWhUY+aPq5JxrVqSWpqGnb/MfkD3N22RAA==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /magic-string/0.27.0:
     resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
     engines: {node: '>=12'}
@@ -5193,6 +5543,16 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
+  /mendoza/2.1.2:
+    resolution: {integrity: sha512-Z2orUYO/RR7hJ2WdMtE1+u7X3/FiZrUpZqdctjxjxAfRODHfSvHKH+5tdEq/dXCf3W3CXSqWM46Ye7ww+KMrtQ==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /mendoza/3.0.3:
+    resolution: {integrity: sha512-xh0Angj7/kuLzJHglH7dVetoSyUt1/2wjmuugB0iBftteS6+xKvwC+bhs+IvF9tITdEdZpIl0XT5QLaL18A5dA==}
+    engines: {node: '>=14.18'}
+    dev: false
+
   /merge-stream/2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -5331,8 +5691,8 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /next-intl/2.14.6_next@13.4.7+react@18.2.0:
-    resolution: {integrity: sha512-RZgQQMAUlGWmPx6gequHRCZf7NKD6ixCskyovRd1AMx0UeNqAZggbL7nFsGA8M7mZbE0twv3+4JLrPse8xbwsg==}
+  /next-intl/2.19.1_next@13.4.13+react@18.2.0:
+    resolution: {integrity: sha512-fk+IGWXxA+UOk+3rIhQqSPYxka+Hk9qKaIpbeF3nNlf8dp1td0oT6srVrPw/uZl5Qoj8El3qQ2mVd3RTLA25cg==}
     engines: {node: '>=10'}
     peerDependencies:
       next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
@@ -5340,13 +5700,13 @@ packages:
     dependencies:
       '@formatjs/intl-localematcher': 0.2.32
       negotiator: 0.6.3
-      next: 13.4.7_3j7hb26pwgm6spbxoejtjx6xja
+      next: 13.4.13_3j7hb26pwgm6spbxoejtjx6xja
       react: 18.2.0
-      use-intl: 2.14.6_react@18.2.0
+      use-intl: 2.19.1_react@18.2.0
     dev: false
 
-  /next-sanity/4.3.2_g5o3rb6nhmiyhllijtz24ubsme:
-    resolution: {integrity: sha512-BLO2vrBfPWRirJacmJ+Nkx9PUlH0MTRGaRPm4LcZtEd4ulCDpw3AbfJHvzfaFy62jeIzcdkWBWLAkzjbXKr8gA==}
+  /next-sanity/4.3.3_yrtytp4b7cnii2glukpxw5dsvi:
+    resolution: {integrity: sha512-537xLC4hpTgV3SGj6w4aXvBvm/nHdyZGtZ5IcZpH33p70J7UjptF4+D4FvWKZGPjF3v3SFk75AHjxWVPORL9RA==}
     engines: {node: '>=16'}
     peerDependencies:
       '@sanity/icons': ^2.0.0
@@ -5358,15 +5718,15 @@ packages:
       sanity: ^3.0.0
       styled-components: ^5.2.0
     dependencies:
-      '@sanity/client': 6.1.1
+      '@sanity/client': 6.4.4
       '@sanity/icons': 2.3.1_react@18.2.0
-      '@sanity/preview-kit': 1.5.3_react@18.2.0
+      '@sanity/preview-kit': 1.5.5_react@18.2.0
       '@sanity/types': 3.11.1
       '@sanity/ui': 1.3.3_qzhz75e2qrzz6afgiqoxbiiigi
       '@sanity/webhook': 2.0.0
       '@types/styled-components': 5.1.26
-      groq: 3.11.1
-      next: 13.4.7_3j7hb26pwgm6spbxoejtjx6xja
+      groq: 3.14.5
+      next: 13.4.13_3j7hb26pwgm6spbxoejtjx6xja
       react: 18.2.0
       sanity: 3.11.1_inskn5v7aqlrr54h6fubgcms5y
       styled-components: 5.3.10_7i5myeigehqah43i5u7wbekgba
@@ -5374,25 +5734,22 @@ packages:
       - supports-color
     dev: false
 
-  /next/13.4.7_3j7hb26pwgm6spbxoejtjx6xja:
-    resolution: {integrity: sha512-M8z3k9VmG51SRT6v5uDKdJXcAqLzP3C+vaKfLIAM0Mhx1um1G7MDnO63+m52qPdZfrTFzMZNzfsgvm3ghuVHIQ==}
+  /next/13.4.13_3j7hb26pwgm6spbxoejtjx6xja:
+    resolution: {integrity: sha512-A3YVbVDNeXLhWsZ8Nf6IkxmNlmTNz0yVg186NJ97tGZqPDdPzTrHotJ+A1cuJm2XfuWPrKOUZILl5iBQkIf8Jw==}
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
-      fibers: '>= 3.1.0'
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
-      fibers:
-        optional: true
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.4.7
+      '@next/env': 13.4.13
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
       caniuse-lite: 1.0.30001489
@@ -5403,15 +5760,15 @@ packages:
       watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.7
-      '@next/swc-darwin-x64': 13.4.7
-      '@next/swc-linux-arm64-gnu': 13.4.7
-      '@next/swc-linux-arm64-musl': 13.4.7
-      '@next/swc-linux-x64-gnu': 13.4.7
-      '@next/swc-linux-x64-musl': 13.4.7
-      '@next/swc-win32-arm64-msvc': 13.4.7
-      '@next/swc-win32-ia32-msvc': 13.4.7
-      '@next/swc-win32-x64-msvc': 13.4.7
+      '@next/swc-darwin-arm64': 13.4.13
+      '@next/swc-darwin-x64': 13.4.13
+      '@next/swc-linux-arm64-gnu': 13.4.13
+      '@next/swc-linux-arm64-musl': 13.4.13
+      '@next/swc-linux-x64-gnu': 13.4.13
+      '@next/swc-linux-x64-musl': 13.4.13
+      '@next/swc-win32-arm64-msvc': 13.4.13
+      '@next/swc-win32-ia32-msvc': 13.4.13
+      '@next/swc-win32-x64-msvc': 13.4.13
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -6498,7 +6855,7 @@ packages:
       '@sanity/bifur-client': 0.3.1
       '@sanity/block-tools': 3.11.1
       '@sanity/cli': 3.11.1
-      '@sanity/client': 6.1.1
+      '@sanity/client': 6.4.4
       '@sanity/color': 2.2.5
       '@sanity/diff': 3.11.1
       '@sanity/eventsource': 5.0.0
@@ -7430,8 +7787,8 @@ packages:
       react: 18.2.0
     dev: false
 
-  /use-intl/2.14.6_react@18.2.0:
-    resolution: {integrity: sha512-ehkW7/CpJkJQUbQZvtUvB+NukmlOS2FEj5rSRBnyRvV+GsbC+CKKDFcMLecyWA12s9wnqcAbEMQMfp3m1jcwPA==}
+  /use-intl/2.19.1_react@18.2.0:
+    resolution: {integrity: sha512-nPsXwwJeH+RuKe2ucN+xmRI7DdfjA7WezXYTJD0JZSPvyIyaledIBlVBbnkxanr+3fpIec3cVG6wvouGp9/lJQ==}
     engines: {node: '>=10'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
diff --git a/tailwind.config.js b/tailwind.config.js
index 31c915bd1..dd72549a6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -41,6 +41,40 @@ module.exports = {
         green: '#55b467',
         red: '#ec5d40',
         yellow: '#ffcb47',
+        // UI.SHADCN.COM
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
       },
       textColor: {
         base: '#333333',
@@ -52,18 +86,18 @@ module.exports = {
         display: ['var(--font-inter-tight)', ...fontFamily.sans],
       },
       keyframes: {
-        'accordion-down': {
+        "accordion-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
@@ -88,4 +122,4 @@ module.exports = {
   future: {
     hoverOnlyWhenSupported: true
   },
-}
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 6cd05f98a..7b48ebb6f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,8 +20,11 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
-}
+}
\ No newline at end of file

From 047e5fe566fe709db9ae01b5b5a0ab05669d8ebf Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Tue, 8 Aug 2023 17:06:04 +0200
Subject: [PATCH 5/6] Updates

---
 ...[[...slug]]/product-page.tsx             |  14 +-
 app/[locale]/layout.tsx                     |   2 +
 app/api/draft/route.ts                      |   4 +-
 components/cart/modal.tsx                   |  12 +-
 components/layout/footer/footer.tsx         |   6 +-
 components/layout/header/desktop-menu.tsx   |  33 +++
 components/layout/header/header.tsx         |  12 +-
 components/ui/product-card/product-card.tsx |   4 +-
 components/ui/sanity-image/sanity-image.tsx |  42 ++--
 components/ui/text/text.tsx                 |   2 +-
 lib/sanity/queries.tsx                      |  10 +-
 lib/sanity/sanity.client.ts                 |   2 +-
 messages/en.json                            |   5 +-
 messages/sv.json                            |   5 +-
 package.json                                |   4 +-
 pnpm-lock.yaml                              | 226 ++++++++++----------
 16 files changed, 214 insertions(+), 169 deletions(-)
 create mode 100644 components/layout/header/desktop-menu.tsx

diff --git a/...[[...slug]]/product-page.tsx b/...[[...slug]]/product-page.tsx
index 1e1e69d71..49d34df0b 100644
--- a/...[[...slug]]/product-page.tsx
+++ b/...[[...slug]]/product-page.tsx
@@ -1,21 +1,19 @@
-import ProductView from "components/product/product-view";
-import { notFound } from "next/navigation";
+import ProductView from 'components/product/product-view';
+import { notFound } from 'next/navigation';
 
 interface ProductPageProps {
-  data: object | any
+  data: object | any;
 }
 
 // This is a Client Component. It receives data as props and
 // has access to state and effects just like Page components
 // in the `pages` directory.
-export default function ProductPage({data }: ProductPageProps) {
+export default function ProductPage({ data }: ProductPageProps) {
   if (!data) {
     return notFound();
   }
-  
+
   const { product } = data;
 
-  return (
-    <ProductView product={product} relatedProducts={[]} />
-  )
+  return <ProductView product={product} relatedProducts={[]} />;
 }
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 0546880c4..bdf536ca2 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -59,6 +59,8 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
         <NextIntlClientProvider locale={locale} messages={messages}>
           <Header locale={locale} />
           <main className="flex-1">{children}</main>
+          {/* @ts-expect-error Server Component */}
+          {/* https://github.com/vercel/next.js/issues/42292 */}
           <Footer locale={locale} />
         </NextIntlClientProvider>
       </body>
diff --git a/app/api/draft/route.ts b/app/api/draft/route.ts
index fa394649f..16c67d5d4 100644
--- a/app/api/draft/route.ts
+++ b/app/api/draft/route.ts
@@ -83,7 +83,7 @@ draftMode().enable();
     return new Response(null, {
         status: 307,
         headers: {
-            Location: `/${product.locale}/${product.slug}`,
+            Location: `/${product.locale}/product/${product.slug}`,
         },
     })
   }
@@ -92,7 +92,7 @@ draftMode().enable();
     return new Response(null, {
         status: 307,
         headers: {
-            Location: `/${category.locale}/${category.slug}`,
+            Location: `/${category.locale}/category/${category.slug}`,
         },
     })
   }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 19f63352a..4a9f3cdf3 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -6,6 +6,7 @@ import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
+import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
@@ -20,6 +21,7 @@ type MerchandiseSearchParams = {
 export default function CartModal({ cart }: { cart: Cart | undefined }) {
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart?.totalQuantity);
+  const t = useTranslations('cart');
 
   useEffect(() => {
     // Open cart modal when quantity changes.
@@ -37,17 +39,17 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
   return (
     <>
       <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
-        <SheetTrigger aria-label="Open cart">
+        <SheetTrigger aria-label={t('openCart')}>
           <OpenCart quantity={cart?.totalQuantity} />
         </SheetTrigger>
         <SheetContent className="bg-app">
           <SheetHeader>
-            <SheetTitle className="text-lg font-semibold">My cart</SheetTitle>
+            <SheetTitle className="text-lg font-semibold">{t('myCartTitle')}</SheetTitle>
           </SheetHeader>
           {!cart || cart.lines.length === 0 ? (
             <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
               <ShoppingBagIcon className="h-12" />
-              <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
+              <p className="mt-6 text-center text-2xl font-bold">{t('empty.title')}</p>
             </div>
           ) : (
             <div className="flex h-full flex-col justify-between overflow-hidden p-1">
@@ -132,7 +134,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                 </div>
                 <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                   <p>Shipping</p>
-                  <p className="text-right">Calculated at checkout</p>
+                  <p className="text-right">{t('calculatedAtCheckout')}</p>
                 </div>
                 <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
                   <p>Total</p>
@@ -147,7 +149,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                 href={cart.checkoutUrl}
                 className="bg-blue-600 block w-full rounded-full p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
               >
-                Proceed to Checkout
+                {t('proceedToCheckout')}
               </a>
             </div>
           )}
diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx
index c51879838..0362e1c66 100644
--- a/components/layout/footer/footer.tsx
+++ b/components/layout/footer/footer.tsx
@@ -1,5 +1,5 @@
 import Text from '@/components/ui/text';
-import { footerMenuQuery } from '@/lib/sanity/queries';
+import { footerMenusQuery } from '@/lib/sanity/queries';
 import { clientFetch } from '@/lib/sanity/sanity.client';
 import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
@@ -15,7 +15,7 @@ export default async function Footer({ locale }: FooterProps) {
     locale: locale
   };
 
-  const footerMenus = await clientFetch(footerMenuQuery, params);
+  const footerMenus = await clientFetch(footerMenusQuery, params);
 
   return (
     <footer className="border-t border-ui-border bg-app">
@@ -33,7 +33,7 @@ export default async function Footer({ locale }: FooterProps) {
               return (
                 <div key={index}>
                   <Text variant="label">{menu.title}</Text>
-                  <ul className="mt-2 flex flex-col space-y-1" aria-label={menu.title}>
+                  <ul className="mt-4 flex flex-col space-y-2" aria-label={menu.title}>
                     {menu.menu.links.map((link: object | any, index: number) => {
                       return (
                         <li className="text-sm" key={index}>
diff --git a/components/layout/header/desktop-menu.tsx b/components/layout/header/desktop-menu.tsx
new file mode 100644
index 000000000..00fd871e6
--- /dev/null
+++ b/components/layout/header/desktop-menu.tsx
@@ -0,0 +1,33 @@
+import { categoriesQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
+import Link from 'next/link';
+
+interface DesktopMenuProps {
+  locale: string;
+}
+
+export default async function DesktopMenu({ locale }: DesktopMenuProps) {
+  const params = {
+    locale: locale
+  };
+
+  const categories = await clientFetch(categoriesQuery, params);
+
+  if (!categories) {
+    return;
+  }
+
+  return (
+    <ul className="flex space-x-4 lg:space-x-6">
+      {categories.map((category: { slug: string } | any, index: number) => {
+        return (
+          <li className="font-medium" key={index}>
+            <Link className="hover:underline" href={`/category/${category.slug}`}>
+              {category.title}
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index 8fdd1d63d..b81f1d6de 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -3,6 +3,7 @@ import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import { Suspense } from 'react';
+import DesktopMenu from './desktop-menu';
 import HeaderRoot from './header-root';
 import MobileModal from './mobile-modal';
 
@@ -13,7 +14,7 @@ interface HeaderProps {
 const Header = ({ locale }: HeaderProps) => {
   return (
     <HeaderRoot>
-      <div className="relative flex flex-col">
+      <div className="relative flex flex-col border-b border-ui-border bg-app">
         <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
           <div className="md:hidden">
             <MobileModal />
@@ -21,7 +22,7 @@ const Header = ({ locale }: HeaderProps) => {
 
           <div className="flex items-center">
             <Link
-              href={`/${locale}`}
+              href={`/`}
               className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
               aria-label="Logo"
             >
@@ -30,11 +31,14 @@ const Header = ({ locale }: HeaderProps) => {
           </div>
 
           <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
-            Desktop Menu
+            {/* @ts-expect-error Server Component */}
+            {/* https://github.com/vercel/next.js/issues/42292 */}
+            <DesktopMenu locale={locale} />
           </div>
           <div className="flex justify-end md:w-1/3">
             <Suspense fallback={<OpenCart />}>
-              {/*// @ts-ignore */}
+              {/* @ts-expect-error Server Component */}
+              {/* https://github.com/vercel/next.js/issues/42292 */}
               <Cart />
             </Suspense>
           </div>
diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx
index b4619f109..f3aeeb57e 100644
--- a/components/ui/product-card/product-card.tsx
+++ b/components/ui/product-card/product-card.tsx
@@ -39,11 +39,11 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
           </div>
 
           <div className={cn('flex flex-col items-start text-high-contrast', className)}>
-            <Text className="mt-2 lg:mt-3" variant="listChildHeading">
+            <Text className="mt-3" variant="listChildHeading">
               {product.title}
             </Text>
             <Price
-              className="text-sm font-medium leading-tight lg:text-base"
+              className="mt-1 text-sm font-bold leading-tight lg:text-base"
               amount={`${product.price.value}`}
               currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
             />
diff --git a/components/ui/sanity-image/sanity-image.tsx b/components/ui/sanity-image/sanity-image.tsx
index 805e4b457..10399978b 100644
--- a/components/ui/sanity-image/sanity-image.tsx
+++ b/components/ui/sanity-image/sanity-image.tsx
@@ -1,21 +1,21 @@
-'use client'
+'use client';
 
-import { urlForImage } from 'lib/sanity/sanity.image'
-import { cn } from 'lib/utils'
-import Image from 'next/image'
+import { urlForImage } from 'lib/sanity/sanity.image';
+import { cn } from 'lib/utils';
+import Image from 'next/image';
 
 interface SanityImageProps {
-  image: object | any
-  alt: string
-  priority?: boolean
-  width?: number
-  height?: number
-  quality?: number
-  sizes?: string
-  className?: string
+  image: object | any;
+  alt: string;
+  priority?: boolean;
+  width?: number;
+  height?: number;
+  quality?: number;
+  sizes?: string;
+  className?: string;
 }
 
-const placeholderImg = '/product-img-placeholder.svg'
+const placeholderImg = '/product-img-placeholder.svg';
 
 export default function SanityImage(props: SanityImageProps) {
   const {
@@ -26,10 +26,10 @@ export default function SanityImage(props: SanityImageProps) {
     height = 1080,
     width = 1080,
     sizes = '100vw',
-    className,
-  } = props
+    className
+  } = props;
 
-  const rootClassName = cn('w-full h-auto', className)
+  const rootClassName = cn('w-full h-auto', className);
 
   const image = source?.asset?._rev ? (
     <>
@@ -39,11 +39,7 @@ export default function SanityImage(props: SanityImageProps) {
         width={width}
         height={height}
         alt={alt}
-        src={urlForImage(source)
-          .width(width)
-          .height(height)
-          .quality(quality)
-          .url()}
+        src={urlForImage(source).width(width).height(height).quality(quality).url()}
         sizes={sizes}
         priority={priority}
         blurDataURL={source.asset.metadata.lqip}
@@ -61,7 +57,7 @@ export default function SanityImage(props: SanityImageProps) {
         priority={false}
       />
     </>
-  )
+  );
 
-  return image
+  return image;
 }
diff --git a/components/ui/text/text.tsx b/components/ui/text/text.tsx
index 51e162ef2..d533a7d72 100644
--- a/components/ui/text/text.tsx
+++ b/components/ui/text/text.tsx
@@ -69,7 +69,7 @@ const Text: FunctionComponent<TextProps> = ({
             variant === 'productHeading',
           ['max-w-prose font-display text-2xl font-extrabold leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
             variant === 'sectionHeading',
-          ['text-sm font-medium leading-tight lg:text-base']: variant === 'listChildHeading',
+          ['text-sm leading-tight lg:text-base']: variant === 'listChildHeading',
           ['max-w-prose text-lg text-high-contrast lg:text-xl']: variant === 'label',
           ['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph'
         },
diff --git a/lib/sanity/queries.tsx b/lib/sanity/queries.tsx
index cb2ee20f4..8418280d0 100644
--- a/lib/sanity/queries.tsx
+++ b/lib/sanity/queries.tsx
@@ -255,8 +255,16 @@ export const categoryQuery = `*[_type == "category" && slug.current == $slug &&
   }
 }`;
 
+// Categories query
+export const categoriesQuery = `*[_type == "category" && language == $locale] | order(title asc) {
+  _type,
+  title,
+  "slug": slug.current,
+  "locale": language,
+}`;
+
 // Footer menu query
-export const footerMenuQuery = `*[_type == "footerMenu" && language == $locale] | order(title asc) {
+export const footerMenusQuery = `*[_type == "footerMenu" && language == $locale] | order(title asc) {
   _type,
   title,
   "locale": language,
diff --git a/lib/sanity/sanity.client.ts b/lib/sanity/sanity.client.ts
index 3c10a146e..b7bd07fb9 100644
--- a/lib/sanity/sanity.client.ts
+++ b/lib/sanity/sanity.client.ts
@@ -9,7 +9,7 @@ export const client = createClient({
   projectId,
   dataset,
   apiVersion,
-  useCdn: false,
+  useCdn: true,
 });
 
 export const clientFetch = cache(client.fetch.bind(client));
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
index f44141496..a4f7706fa 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -39,7 +39,7 @@
     "selectSize": "Select size"
   },
   "cart": {
-    "myCarttitle": "My cart",
+    "myCartTitle": "My cart",
     "subTotal": "Subtotal",
     "taxes": "Taxes",
     "calculatedAtCheckout": "Calculated at checkout",
@@ -62,7 +62,8 @@
     "seo": {
       "title": "My cart",
       "description": "All products in my shopping cart are displayed here"
-    }
+    },
+    "openCart": "Open cart"
   },
   "checkout": {
     "checkoutTitle": "Checkout",
diff --git a/messages/sv.json b/messages/sv.json
index 05bf4e5a6..4728f3112 100644
--- a/messages/sv.json
+++ b/messages/sv.json
@@ -39,7 +39,7 @@
     "selectSize": "Välj storlek"
   },
   "cart": {
-    "myCarttitle": "Min varukorg",
+    "myCartTitle": "Min varukorg",
     "subTotal": "Delsumma",
     "taxes": "Moms",
     "calculatedAtCheckout": "Beräknas i kassan",
@@ -61,7 +61,8 @@
     "seo": {
       "title": "Min varukorg",
       "description": "Här visas alla produkter i min varukorg"
-    }
+    },
+    "openCart": "Öppna varukorg"
   },
   "checkout": {
     "checkoutTitle": "Kassa",
diff --git a/package.json b/package.json
index 20c6a0e15..d54bf79fc 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,8 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/negotiator": "^0.6.1",
     "@types/node": "18.13.0",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.2.19",
+    "@types/react-dom": "18.2.7",
     "@vercel/git-hooks": "^1.0.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.41.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ab0c2b43..fd07cd229 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ specifiers:
   '@tailwindcss/typography': ^0.5.9
   '@types/negotiator': ^0.6.1
   '@types/node': 18.13.0
-  '@types/react': 18.0.27
-  '@types/react-dom': 18.0.10
+  '@types/react': 18.2.19
+  '@types/react-dom': 18.2.7
   '@types/styled-components': ^5.1.26
   '@vercel/git-hooks': ^1.0.0
   '@vercel/og': ^0.1.0
@@ -54,8 +54,8 @@ specifiers:
 dependencies:
   '@next/bundle-analyzer': 13.4.3
   '@portabletext/react': 3.0.0_react@18.2.0
-  '@radix-ui/react-dialog': 1.0.4_fxtgt6bjwd6p4cwoordejim2zi
-  '@radix-ui/react-dropdown-menu': 2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q
+  '@radix-ui/react-dialog': 1.0.4_ml6diaeoljuxdq7psn5bilsrme
+  '@radix-ui/react-dropdown-menu': 2.0.4_3op2lnyzlva6z5yh6fcmfv7uy4
   '@radix-ui/react-icons': 1.3.0_react@18.2.0
   '@radix-ui/react-navigation-menu': 1.1.2_biqbaboplfbrettd7655fr4n2y
   '@sanity/client': 6.4.4
@@ -78,7 +78,7 @@ dependencies:
   react-cookie: 4.1.1_react@18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-glider: 4.0.2_biqbaboplfbrettd7655fr4n2y
-  sanity: 3.11.1_inskn5v7aqlrr54h6fubgcms5y
+  sanity: 3.11.1_onbpdwf2jl4ejbzkwamzbhdwmm
   sharp: 0.32.1
   styled-components: 5.3.10_7i5myeigehqah43i5u7wbekgba
   tailwind-merge: 1.12.0
@@ -89,8 +89,8 @@ devDependencies:
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.3.2
   '@types/negotiator': 0.6.1
   '@types/node': 18.13.0
-  '@types/react': 18.0.27
-  '@types/react-dom': 18.0.10
+  '@types/react': 18.2.19
+  '@types/react-dom': 18.2.7
   '@vercel/git-hooks': 1.0.0
   autoprefixer: 10.4.14_postcss@8.4.23
   eslint: 8.41.0
@@ -905,7 +905,7 @@ packages:
       '@floating-ui/core': 1.2.6
     dev: false
 
-  /@floating-ui/react-dom/0.7.2_5ndqzdd6t4rivxsukjv3i3ak2q:
+  /@floating-ui/react-dom/0.7.2_3op2lnyzlva6z5yh6fcmfv7uy4:
     resolution: {integrity: sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==}
     peerDependencies:
       react: '>=16.8.0'
@@ -914,7 +914,7 @@ packages:
       '@floating-ui/dom': 0.5.4
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      use-isomorphic-layout-effect: 1.1.2_3stiutgnnbnfnf3uowm5cip22i
+      use-isomorphic-layout-effect: 1.1.2_6kgymidexis2l23kiss4by6rqm
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -1318,7 +1318,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-compose-refs/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-compose-refs/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
       '@types/react': '*'
@@ -1328,7 +1328,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1341,7 +1341,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-context/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-context/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
     peerDependencies:
       '@types/react': '*'
@@ -1351,11 +1351,11 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-dialog/1.0.4_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-dialog/1.0.4_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
     peerDependencies:
       '@types/react': '*'
@@ -1370,23 +1370,23 @@ packages:
     dependencies:
       '@babel/runtime': 7.21.5
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-context': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-dismissable-layer': 1.0.4_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-focus-guards': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-focus-scope': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-id': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-portal': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-presence': 1.0.1_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-slot': 1.0.2_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-use-controllable-state': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-context': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-dismissable-layer': 1.0.4_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-focus-guards': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-focus-scope': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-id': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-portal': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-presence': 1.0.1_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-slot': 1.0.2_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-use-controllable-state': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_3stiutgnnbnfnf3uowm5cip22i
+      react-remove-scroll: 2.5.5_6kgymidexis2l23kiss4by6rqm
     dev: false
 
   /@radix-ui/react-direction/1.0.0_react@18.2.0:
@@ -1414,7 +1414,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-dismissable-layer/1.0.4_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-dismissable-layer/1.0.4_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
       '@types/react': '*'
@@ -1429,17 +1429,17 @@ packages:
     dependencies:
       '@babel/runtime': 7.21.5
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-use-escape-keydown': 1.0.3_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-use-callback-ref': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-use-escape-keydown': 1.0.3_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-dropdown-menu/2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q:
+  /@radix-ui/react-dropdown-menu/2.0.4_3op2lnyzlva6z5yh6fcmfv7uy4:
     resolution: {integrity: sha512-y6AT9+MydyXcByivdK1+QpjWoKaC7MLjkS/cH1Q3keEyMvDkiY85m8o2Bi6+Z1PPUlCsMULopxagQOSfN0wahg==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -1450,7 +1450,7 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
       '@radix-ui/react-context': 1.0.0_react@18.2.0
       '@radix-ui/react-id': 1.0.0_react@18.2.0
-      '@radix-ui/react-menu': 2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q
+      '@radix-ui/react-menu': 2.0.4_3op2lnyzlva6z5yh6fcmfv7uy4
       '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
       react: 18.2.0
@@ -1468,7 +1468,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-focus-guards/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-focus-guards/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
       '@types/react': '*'
@@ -1478,7 +1478,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1496,7 +1496,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-focus-scope/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-focus-scope/1.0.3_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1510,11 +1510,11 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@radix-ui/react-use-callback-ref': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -1537,7 +1537,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-id/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-id/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1547,12 +1547,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-use-layout-effect': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
+      '@radix-ui/react-use-layout-effect': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-menu/2.0.4_5ndqzdd6t4rivxsukjv3i3ak2q:
+  /@radix-ui/react-menu/2.0.4_3op2lnyzlva6z5yh6fcmfv7uy4:
     resolution: {integrity: sha512-mzKR47tZ1t193trEqlQoJvzY4u9vYfVH16ryBrVrCAGZzkgyWnMQYEZdUkM7y8ak9mrkKtJiqB47TlEnubeOFQ==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
@@ -1568,7 +1568,7 @@ packages:
       '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
       '@radix-ui/react-focus-scope': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-id': 1.0.0_react@18.2.0
-      '@radix-ui/react-popper': 1.1.1_5ndqzdd6t4rivxsukjv3i3ak2q
+      '@radix-ui/react-popper': 1.1.1_3op2lnyzlva6z5yh6fcmfv7uy4
       '@radix-ui/react-portal': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y
@@ -1578,7 +1578,7 @@ packages:
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-remove-scroll: 2.5.5_3stiutgnnbnfnf3uowm5cip22i
+      react-remove-scroll: 2.5.5_6kgymidexis2l23kiss4by6rqm
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -1608,14 +1608,14 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-popper/1.1.1_5ndqzdd6t4rivxsukjv3i3ak2q:
+  /@radix-ui/react-popper/1.1.1_3op2lnyzlva6z5yh6fcmfv7uy4:
     resolution: {integrity: sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==}
     peerDependencies:
       react: ^16.8 || ^17.0 || ^18.0
       react-dom: ^16.8 || ^17.0 || ^18.0
     dependencies:
       '@babel/runtime': 7.21.5
-      '@floating-ui/react-dom': 0.7.2_5ndqzdd6t4rivxsukjv3i3ak2q
+      '@floating-ui/react-dom': 0.7.2_3op2lnyzlva6z5yh6fcmfv7uy4
       '@radix-ui/react-arrow': 1.0.2_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
       '@radix-ui/react-context': 1.0.0_react@18.2.0
@@ -1643,7 +1643,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-portal/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-portal/1.0.3_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
       '@types/react': '*'
@@ -1657,9 +1657,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-primitive': 1.0.3_fxtgt6bjwd6p4cwoordejim2zi
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-primitive': 1.0.3_ml6diaeoljuxdq7psn5bilsrme
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -1677,7 +1677,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-presence/1.0.1_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-presence/1.0.1_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
       '@types/react': '*'
@@ -1691,10 +1691,10 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@radix-ui/react-use-layout-effect': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@radix-ui/react-use-layout-effect': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -1711,7 +1711,7 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@radix-ui/react-primitive/1.0.3_fxtgt6bjwd6p4cwoordejim2zi:
+  /@radix-ui/react-primitive/1.0.3_ml6diaeoljuxdq7psn5bilsrme:
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
       '@types/react': '*'
@@ -1725,9 +1725,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-slot': 1.0.2_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
-      '@types/react-dom': 18.0.10
+      '@radix-ui/react-slot': 1.0.2_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: false
@@ -1762,7 +1762,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-slot/1.0.2_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-slot/1.0.2_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
       '@types/react': '*'
@@ -1772,8 +1772,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-compose-refs': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
+      '@radix-ui/react-compose-refs': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1786,7 +1786,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-callback-ref/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-use-callback-ref/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1796,7 +1796,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1810,7 +1810,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-controllable-state/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-use-controllable-state/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
       '@types/react': '*'
@@ -1820,8 +1820,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
+      '@radix-ui/react-use-callback-ref': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1835,7 +1835,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-escape-keydown/1.0.3_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-use-escape-keydown/1.0.3_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
       '@types/react': '*'
@@ -1845,8 +1845,8 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@radix-ui/react-use-callback-ref': 1.0.1_3stiutgnnbnfnf3uowm5cip22i
-      '@types/react': 18.0.27
+      '@radix-ui/react-use-callback-ref': 1.0.1_6kgymidexis2l23kiss4by6rqm
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -1859,7 +1859,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-use-layout-effect/1.0.1_3stiutgnnbnfnf3uowm5cip22i:
+  /@radix-ui/react-use-layout-effect/1.0.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
     peerDependencies:
       '@types/react': '*'
@@ -1869,7 +1869,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
@@ -2231,7 +2231,7 @@ packages:
     resolution: {integrity: sha512-TmCtStfZcf1VTKrPFJOjVhWOvjlrBncn86/0UuE7Ftsgq12tQEyPCpKAzAT6E7uUmr15wMUSvCgXX8hn9/poKg==}
     dependencies:
       '@sanity/client': 6.4.4
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -2240,7 +2240,7 @@ packages:
     resolution: {integrity: sha512-uQ/SGdzxD8i08PAqIoNTGMfzRZT1JZ6GVB78KfvGt3fwA6C5cz7E6LVZKX9Q+vcqZuc7DTBBH92fcLkM3k8RwQ==}
     dependencies:
       '@sanity/client': 6.4.4
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -2380,7 +2380,7 @@ packages:
   /@types/hoist-non-react-statics/3.3.1:
     resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       hoist-non-react-statics: 3.3.2
     dev: false
 
@@ -2416,13 +2416,13 @@ packages:
   /@types/react-copy-to-clipboard/5.0.4:
     resolution: {integrity: sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
     dev: false
 
-  /@types/react-dom/18.0.10:
-    resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
+  /@types/react-dom/18.2.7:
+    resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
 
   /@types/react-is/17.0.4:
     resolution: {integrity: sha512-FLzd0K9pnaEvKz4D1vYxK9JmgQPiGk1lu23o1kqGsLeT0iPbRSF7b76+S5T9fD8aRa0B8bY7I/3DebEj+1ysBA==}
@@ -2438,8 +2438,8 @@ packages:
       csstype: 3.1.2
     dev: false
 
-  /@types/react/18.0.27:
-    resolution: {integrity: sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==}
+  /@types/react/18.2.19:
+    resolution: {integrity: sha512-e2S8wmY1ePfM517PqCG80CcE48Xs5k0pwJzuDZsfE8IZRRBfOMCF+XqnFxu6mWtyivum1MQm4aco+WIt6Coimw==}
     dependencies:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.3
@@ -2460,7 +2460,7 @@ packages:
     resolution: {integrity: sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==}
     dependencies:
       '@types/hoist-non-react-statics': 3.3.1
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       csstype: 3.1.2
     dev: false
 
@@ -5728,7 +5728,7 @@ packages:
       groq: 3.14.5
       next: 13.4.13_3j7hb26pwgm6spbxoejtjx6xja
       react: 18.2.0
-      sanity: 3.11.1_inskn5v7aqlrr54h6fubgcms5y
+      sanity: 3.11.1_onbpdwf2jl4ejbzkwamzbhdwmm
       styled-components: 5.3.10_7i5myeigehqah43i5u7wbekgba
     transitivePeerDependencies:
       - supports-color
@@ -6481,7 +6481,7 @@ packages:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
     dev: false
 
-  /react-focus-lock/2.9.4_3stiutgnnbnfnf3uowm5cip22i:
+  /react-focus-lock/2.9.4_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-7pEdXyMseqm3kVjhdVH18sovparAzLg5h6WvIx7/Ck3ekjhrrDMEegHSa3swwC8wgfdd7DIdUVRGeiHT9/7Sgg==}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6491,13 +6491,13 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.21.5
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       focus-lock: 0.11.6
       prop-types: 15.8.1
       react: 18.2.0
       react-clientside-effect: 1.2.6_react@18.2.0
-      use-callback-ref: 1.3.0_3stiutgnnbnfnf3uowm5cip22i
-      use-sidecar: 1.1.2_3stiutgnnbnfnf3uowm5cip22i
+      use-callback-ref: 1.3.0_6kgymidexis2l23kiss4by6rqm
+      use-sidecar: 1.1.2_6kgymidexis2l23kiss4by6rqm
     dev: false
 
   /react-glider/4.0.2_biqbaboplfbrettd7655fr4n2y:
@@ -6535,7 +6535,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /react-remove-scroll-bar/2.3.4_3stiutgnnbnfnf3uowm5cip22i:
+  /react-remove-scroll-bar/2.3.4_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -6545,13 +6545,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
-      react-style-singleton: 2.2.1_3stiutgnnbnfnf3uowm5cip22i
+      react-style-singleton: 2.2.1_6kgymidexis2l23kiss4by6rqm
       tslib: 2.5.2
     dev: false
 
-  /react-remove-scroll/2.5.5_3stiutgnnbnfnf3uowm5cip22i:
+  /react-remove-scroll/2.5.5_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -6561,13 +6561,13 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
-      react-remove-scroll-bar: 2.3.4_3stiutgnnbnfnf3uowm5cip22i
-      react-style-singleton: 2.2.1_3stiutgnnbnfnf3uowm5cip22i
+      react-remove-scroll-bar: 2.3.4_6kgymidexis2l23kiss4by6rqm
+      react-style-singleton: 2.2.1_6kgymidexis2l23kiss4by6rqm
       tslib: 2.5.2
-      use-callback-ref: 1.3.0_3stiutgnnbnfnf3uowm5cip22i
-      use-sidecar: 1.1.2_3stiutgnnbnfnf3uowm5cip22i
+      use-callback-ref: 1.3.0_6kgymidexis2l23kiss4by6rqm
+      use-sidecar: 1.1.2_6kgymidexis2l23kiss4by6rqm
     dev: false
 
   /react-rx/2.1.3_react@18.2.0+rxjs@7.8.1:
@@ -6582,7 +6582,7 @@ packages:
       use-sync-external-store: 1.2.0_react@18.2.0
     dev: false
 
-  /react-style-singleton/2.2.1_3stiutgnnbnfnf3uowm5cip22i:
+  /react-style-singleton/2.2.1_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -6592,7 +6592,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
@@ -6834,7 +6834,7 @@ packages:
       diff-match-patch: 1.0.5
     dev: false
 
-  /sanity/3.11.1_inskn5v7aqlrr54h6fubgcms5y:
+  /sanity/3.11.1_onbpdwf2jl4ejbzkwamzbhdwmm:
     resolution: {integrity: sha512-Z7dy72ITdMEgBcy72dHPLP5bWl3HF16dsYSzedzlFGTUgDL/iizc+WWNS5PiSzQDuB5ez+hPErkTDZ3yC7e7hA==}
     engines: {node: '>=14.18.0'}
     hasBin: true
@@ -6927,7 +6927,7 @@ packages:
       react-copy-to-clipboard: 5.1.0_react@18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-fast-compare: 3.2.2
-      react-focus-lock: 2.9.4_3stiutgnnbnfnf3uowm5cip22i
+      react-focus-lock: 2.9.4_6kgymidexis2l23kiss4by6rqm
       react-is: 18.2.0
       react-refractor: 2.1.7_react@18.2.0
       react-rx: 2.1.3_react@18.2.0+rxjs@7.8.1
@@ -7756,7 +7756,7 @@ packages:
       requires-port: 1.0.0
     dev: false
 
-  /use-callback-ref/1.3.0_3stiutgnnbnfnf3uowm5cip22i:
+  /use-callback-ref/1.3.0_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -7766,7 +7766,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
       tslib: 2.5.2
     dev: false
@@ -7798,7 +7798,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /use-isomorphic-layout-effect/1.1.2_3stiutgnnbnfnf3uowm5cip22i:
+  /use-isomorphic-layout-effect/1.1.2_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
       '@types/react': '*'
@@ -7807,11 +7807,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       react: 18.2.0
     dev: false
 
-  /use-sidecar/1.1.2_3stiutgnnbnfnf3uowm5cip22i:
+  /use-sidecar/1.1.2_6kgymidexis2l23kiss4by6rqm:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -7821,7 +7821,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.2.19
       detect-node-es: 1.1.0
       react: 18.2.0
       tslib: 2.5.2

From d90181fe2955a688c7e4816bbf02244b096b4ecb Mon Sep 17 00:00:00 2001
From: Henrik Larsson <hankisch@gmail.com>
Date: Tue, 8 Aug 2023 17:08:22 +0200
Subject: [PATCH 6/6] Updates

---
 app/[locale]/layout.tsx             | 3 +--
 components/layout/header/header.tsx | 6 ++----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index bdf536ca2..6451f424d 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -59,8 +59,7 @@ export default async function LocaleLayout({ children, params: { locale } }: Loc
         <NextIntlClientProvider locale={locale} messages={messages}>
           <Header locale={locale} />
           <main className="flex-1">{children}</main>
-          {/* @ts-expect-error Server Component */}
-          {/* https://github.com/vercel/next.js/issues/42292 */}
+          {/* @ts-expect-error Server Component (https://github.com/vercel/next.js/issues/42292) */}
           <Footer locale={locale} />
         </NextIntlClientProvider>
       </body>
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index b81f1d6de..d5a9213ee 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -31,14 +31,12 @@ const Header = ({ locale }: HeaderProps) => {
           </div>
 
           <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
-            {/* @ts-expect-error Server Component */}
-            {/* https://github.com/vercel/next.js/issues/42292 */}
+            {/* @ts-expect-error Server Component (https://github.com/vercel/next.js/issues/42292) */}
             <DesktopMenu locale={locale} />
           </div>
           <div className="flex justify-end md:w-1/3">
             <Suspense fallback={<OpenCart />}>
-              {/* @ts-expect-error Server Component */}
-              {/* https://github.com/vercel/next.js/issues/42292 */}
+              {/* @ts-expect-error Server Component (https://github.com/vercel/next.js/issues/42292) */}
               <Cart />
             </Suspense>
           </div>