Updates

2025-05-19 16:07:01 +00:00 · 2023-08-08 16:20:45 +02:00 · 2023-08-08 16:20:45 +02:00 · 22aab2f657
commit 22aab2f657
parent 3e513eaf99
39 changed files with 1259 additions and 594 deletions
--- 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"
--- 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;
-}
+  @apply absolute !right-4 !top-1/2 text-high-contrast !transition-transform !duration-100 hover:scale-100 hover:!text-high-contrast lg:hidden;
+}
--- 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>
  );
--- 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 = {
--- a/components.json
+++ 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"
+  }
+}
--- 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
--- 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>
  );
 }
--- 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>
  );
--- 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
--- 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>
    </>
  );
 }
--- 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}
--- 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>
--- 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() {
--- 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;
+}
--- 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>
--- a/components/layout/header/mobile-modal.tsx
+++ 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>
+    </>
+  );
+}
--- a/components/ui/loading-dots.tsx
+++ b/components/ui/loading-dots.tsx
--- 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>
    </>
-  )
-}
+  );
+};
--- a/components/preview-suspense.tsx
+++ 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';
--- 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({
--- a/components/ui/dropdown/dropdown.tsx
+++ b/components/ui/dropdown/dropdown.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
+};
--- 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>
+    </>
  );
 }
--- a/components/ui/navigation-menu/index.ts
+++ b/components/ui/navigation-menu/index.ts
@ -1,2 +0,0 @@
-export * from './navigation-menu';
-
--- a/components/ui/navigation-menu/navigation-menu.tsx
+++ b/components/ui/navigation-menu/navigation-menu.tsx
@ -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
-}
-
--- a/components/ui/sheet.tsx
+++ 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
+};
--- 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
--- a/lib/constants.ts
+++ 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';
--- 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 {
--- 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() });
+}
--- 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
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@ -201,6 +201,8 @@ export type ShopifyCollectionProductsOperation = {
  };
  variables: {
    handle: string;
+    reverse?: boolean;
+    sortKey?: string;
  };
 };

--- 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))
-}
--- 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",
--- 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",
--- 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'],
--- 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",
--- 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
--- 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
  },
-}
+}
--- 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"]
-}
+}