commit 7d2fb0c73761f2907b46ef52a2b653fd8f1a1397
Author: Danijel <danijel@martinek.xyz>
Date:   Mon Jan 19 20:21:14 2026 +0100

    chore: transfer repo

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..9ff0463
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,7 @@
+COMPANY_NAME="Vercel Inc."
+TWITTER_CREATOR="@vercel"
+TWITTER_SITE="https://nextjs.org/commerce"
+SITE_NAME="Next.js Commerce"
+SHOPIFY_REVALIDATION_SECRET=""
+SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
+SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
diff --git a/.gitea/workflows/deploy-staging.yml b/.gitea/workflows/deploy-staging.yml
new file mode 100644
index 0000000..1d5b118
--- /dev/null
+++ b/.gitea/workflows/deploy-staging.yml
@@ -0,0 +1,34 @@
+name: Build and Deploy
+on: workflow_dispatch
+
+inputs:
+  user_version:
+    description: 'Custom version (e.g., 1.2.3)'
+    required: true
+    default: '1.0.0'
+
+jobs:
+  deploy:
+    runs-on: sent-shop-vps
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Calculate version
+        id: version
+        run: |
+          SHORT_SHA=$(git rev-parse --short=7 HEAD)
+          APP_VERSION=${{ inputs.user_version }}-${SHORT_SHA}
+          echo "Using version: ${APP_VERSION}"
+
+      - name: Build and deploy
+        env:
+          COMPOSE_PROJECT_NAME: sent-shop  # Unique identifier, must be kept not to overwrite other composes.
+          APP_VERSION: ${{ env.APP_VERSION }}
+          SHOPIFY_REVALIDATION_SECRET: ${{ secrets.SHOPIFY_REVALIDATION_SECRET }}
+          SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${{ secrets.SHOPIFY_STOREFRONT_ACCESS_TOKEN }}
+        run: |
+          docker-compose build
+          docker-compose down
+          docker-compose up -d
+          echo "New version is up and running
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0298027
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+.playwright
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..448434d
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm dev",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..8345c10
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..5df18d1
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,61 @@
+# syntax = docker/dockerfile:1
+
+FROM node:22-slim AS base
+
+ARG PORT=3005
+ARG COMPANY_NAME
+ARG TWITTER_CREATOR
+ARG TWITTER_SITE
+ARG SITE_NAME
+ARG SHOPIFY_REVALIDATION_SECRET
+ARG SHOPIFY_STOREFRONT_ACCESS_TOKEN
+ARG SHOPIFY_STORE_DOMAIN
+
+ENV PORT=${PORT}
+ENV COMPANY_NAME=${COMPANY_NAME}
+ENV TWITTER_CREATOR=${TWITTER_CREATOR}
+ENV TWITTER_SITE=${TWITTER_SITE}
+ENV SITE_NAME=${SITE_NAME}
+ENV SHOPIFY_REVALIDATION_SECRET=${SHOPIFY_REVALIDATION_SECRET}
+ENV SHOPIFY_STOREFRONT_ACCESS_TOKEN=${SHOPIFY_STOREFRONT_ACCESS_TOKEN}
+ENV SHOPIFY_STORE_DOMAIN=${SHOPIFY_STORE_DOMAIN}
+ENV NEXT_TELEMETRY_DISABLED=1
+
+WORKDIR /app
+
+# Dependencies
+FROM base AS dependencies
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Build
+FROM base AS build
+
+COPY --from=dependencies /app/node_modules ./node_modules
+COPY . .
+
+#Should be set to npm run build.
+RUN npm run build 
+
+# Run
+FROM base AS run
+
+ENV NODE_ENV=production
+ENV PORT=$PORT
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+COPY --from=build /app/public ./public
+COPY --from=build --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=build --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE $PORT
+
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ccb4861
--- /dev/null
+++ b/README.md
@@ -0,0 +1,74 @@
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)
+
+# Next.js Commerce
+
+A high-performance, server-rendered Next.js App Router ecommerce application.
+
+This template uses React Server Components, Server Actions, `Suspense`, `useOptimistic`, and more.
+
+<h3 id="v1-note"></h3>
+
+> Note: Looking for Next.js Commerce v1? View the [code](https://github.com/vercel/commerce/tree/v1), [demo](https://commerce-v1.vercel.store), and [release notes](https://github.com/vercel/commerce/releases/tag/v1).
+
+## Providers
+
+Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
+
+Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
+
+- Shopify (this repository)
+- [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
+- [Ecwid by Lightspeed](https://github.com/Ecwid/ecwid-nextjs-commerce/) ([Demo](https://ecwid-nextjs-commerce.vercel.app/))
+- [Geins](https://github.com/geins-io/vercel-nextjs-commerce) ([Demo](https://geins-nextjs-commerce-starter.vercel.app/))
+- [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
+- [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
+- [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
+- [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
+- [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
+- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
+- [Fourthwall](https://github.com/FourthwallHQ/vercel-commerce) ([Demo](https://vercel-storefront.fourthwall.app/))
+
+> Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).
+
+## Integrations
+
+Integrations enable upgraded or additional functionality for Next.js Commerce
+
+- [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
+
+  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
+  - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.
+
+- [React Bricks](https://github.com/ReactBricks/nextjs-commerce-rb) ([Demo](https://nextjs-commerce.reactbricks.com/))
+  - Edit pages, product details, and footer content visually using [React Bricks](https://www.reactbricks.com) visual headless CMS.
+
+## Running locally
+
+You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
+
+> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.
+
+1. Install Vercel CLI: `npm i -g vercel`
+2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`
+3. Download your environment variables: `vercel env pull`
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Your app should now be running on [localhost:3000](http://localhost:3000/).
+
+<details>
+  <summary>Expand if you work at Vercel and want to run locally and / or contribute</summary>
+
+1. Run `vc link`.
+1. Select the `Vercel Solutions` scope.
+1. Connect to the existing `commerce-shopify` project.
+1. Run `vc env pull` to get environment variables.
+1. Run `pnpm dev` to ensure everything is working correctly.
+</details>
+
+## Vercel, Next.js Commerce, and Shopify Integration Guide
+
+You can use this comprehensive [integration guide](https://vercel.com/docs/integrations/ecommerce/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.
diff --git a/app/[page]/layout.tsx b/app/[page]/layout.tsx
new file mode 100644
index 0000000..b99b0bc
--- /dev/null
+++ b/app/[page]/layout.tsx
@@ -0,0 +1,12 @@
+import { Footer } from 'components/layout/footer';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div className="w-full">
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/[page]/opengraph-image.tsx b/app/[page]/opengraph-image.tsx
new file mode 100644
index 0000000..0c9b9a3
--- /dev/null
+++ b/app/[page]/opengraph-image.tsx
@@ -0,0 +1,11 @@
+import { getPage } from 'lib/shopify';
+import OpengraphImage from '../../components/opengraph-image';
+
+export const runtime = 'edge';
+
+export default async function Image({ params }: { params: { page: string } }) {
+  const page = await getPage(params.page);
+  const title = page.seo?.title || page.title;
+
+  return await OpengraphImage({ title });
+}
diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx
new file mode 100644
index 0000000..959a931
--- /dev/null
+++ b/app/[page]/page.tsx
@@ -0,0 +1,45 @@
+import type { Metadata } from 'next';
+
+import Prose from 'components/prose';
+import { getPage } from 'lib/shopify';
+import { notFound } from 'next/navigation';
+
+export async function generateMetadata(props: {
+  params: Promise<{ page: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  const page = await getPage(params.page);
+
+  if (!page) return notFound();
+
+  return {
+    title: page.seo?.title || page.title,
+    description: page.seo?.description || page.bodySummary,
+    openGraph: {
+      publishedTime: page.createdAt,
+      modifiedTime: page.updatedAt,
+      type: 'article'
+    }
+  };
+}
+
+export default async function Page(props: { params: Promise<{ page: string }> }) {
+  const params = await props.params;
+  const page = await getPage(params.page);
+
+  if (!page) return notFound();
+
+  return (
+    <>
+      <h1 className="mb-8">{page.title}</h1>
+      <Prose className="mb-8" html={page.body} />
+      <p className="text-sm italic">
+        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        }).format(new Date(page.updatedAt))}.`}
+      </p>
+    </>
+  );
+}
diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..0d32176
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,11 @@
+import { AboutPageContent } from '@/components/about/AboutPageContent';
+import { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'About Us | Sent',
+  description: 'Learn more about Sent and our mission to create personalized gift boxes for every occasion.'
+};
+
+export default function AboutPage() {
+  return <AboutPageContent />;
+} 
\ No newline at end of file
diff --git a/app/api/products/route.ts b/app/api/products/route.ts
new file mode 100644
index 0000000..00e9a88
--- /dev/null
+++ b/app/api/products/route.ts
@@ -0,0 +1,21 @@
+import { getBoxProducts, getProducts } from 'lib/shopify';
+import { NextResponse } from 'next/server';
+
+export async function GET(request: Request) {
+  try {
+    // Get query parameters
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get('type');
+    
+    if (type === 'boxes') {
+      const boxProducts = await getBoxProducts({});
+      return NextResponse.json({ products: boxProducts });
+    } else {
+      const allProducts = await getProducts({});
+      return NextResponse.json({ products: allProducts });
+    }
+  } catch (error) {
+    console.error('Error fetching products:', error);
+    return NextResponse.json({ error: 'Failed to fetch products' }, { status: 500 });
+  }
+} 
\ No newline at end of file
diff --git a/app/api/revalidate/route.ts b/app/api/revalidate/route.ts
new file mode 100644
index 0000000..4ecc0b4
--- /dev/null
+++ b/app/api/revalidate/route.ts
@@ -0,0 +1,6 @@
+import { revalidate } from 'lib/shopify';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest): Promise<NextResponse> {
+  return revalidate(req);
+}
diff --git a/app/build-box/customize/page.tsx b/app/build-box/customize/page.tsx
new file mode 100644
index 0000000..cc480c9
--- /dev/null
+++ b/app/build-box/customize/page.tsx
@@ -0,0 +1,10 @@
+import { BuildBoxCustomizePage } from "@/components/build-box/BuildBoxCustomizePage";
+import { Metadata } from "next";
+export const metadata: Metadata = {
+  title: "Choose Your Box | Sent",
+  description: "Select the perfect box design to complete your custom gift box."
+};
+
+export default function BuildBoxCustomizeRoute() {
+  return <BuildBoxCustomizePage />;
+} 
\ No newline at end of file
diff --git a/app/build-box/page.tsx b/app/build-box/page.tsx
new file mode 100644
index 0000000..247ae77
--- /dev/null
+++ b/app/build-box/page.tsx
@@ -0,0 +1,11 @@
+import { BuildBoxPage } from "@/components/build-box/BuildBoxPage";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Build Your Box | Sent",
+  description: "Create your custom gift box by selecting products you'd like to include."
+};
+
+export default function BuildBoxRoute() {
+  return <BuildBoxPage />;
+} 
\ No newline at end of file
diff --git a/app/cart/page.tsx b/app/cart/page.tsx
new file mode 100644
index 0000000..aaeebc5
--- /dev/null
+++ b/app/cart/page.tsx
@@ -0,0 +1,10 @@
+import CartPage from 'components/cart/CartPage';
+
+export const metadata = {
+  title: 'Cart',
+  description: 'View your shopping cart and proceed to checkout.',
+};
+
+export default function Cart() {
+  return <CartPage />;
+} 
\ No newline at end of file
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..80b32a4
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+export default function Error({ reset }: { reset: () => void }) {
+  return (
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
+      <h2 className="text-xl font-bold">Oh no!</h2>
+      <p className="my-2">
+        There was an issue with our storefront. This could be a temporary issue, please try your
+        action again.
+      </p>
+      <button
+        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        onClick={() => reset()}
+      >
+        Try Again
+      </button>
+    </div>
+  );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..dc7d843
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/fonts.css b/app/fonts.css
new file mode 100644
index 0000000..f85298c
--- /dev/null
+++ b/app/fonts.css
@@ -0,0 +1,28 @@
+/* AlleNoire fonts */
+/* Regular */
+@font-face {
+  font-family: 'AlleNoire';
+  src: url('/fonts/allenoire-allenoire-regular-400.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Poppins fonts */
+/* Regular */
+@font-face {
+  font-family: 'Poppins Regular';
+  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* SemiBold */
+@font-face {
+  font-family: 'Poppins SemiBold';
+  src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+} 
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..61c6ae2
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,153 @@
+@import './fonts.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom animation for fade-in effect */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+/* Add custom styles below */
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+/* Hide scrollbar but keep functionality */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+@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;
+ 
+    --chart-1: 12 76% 61%;
+ 
+    --chart-2: 173 58% 39%;
+ 
+    --chart-3: 197 37% 24%;
+ 
+    --chart-4: 43 74% 66%;
+ 
+    --chart-5: 27 87% 67%;
+  }
+ 
+  .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%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  html {
+    font-family: 'AlleNoire', system-ui, sans-serif;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'AlleNoire', system-ui, sans-serif;
+  }
+
+  /* Font weight utility classes */
+  .font-extrabold {
+    font-family: 'AlleNoire', system-ui, sans-serif;
+    font-weight: 800;
+  }
+
+  .font-bold {
+    font-family: 'AlleNoire', system-ui, sans-serif;
+    font-weight: 700;
+  }
+
+  .font-semibold {
+    font-family: 'AlleNoire', system-ui, sans-serif;
+    font-weight: 600;
+  }
+
+  /* Set letter-spacing to 0 for all text elements */
+  h1, h2, h3, h4, h5, h6, p, span, div {
+    letter-spacing: 0;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..c35c8b0
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,92 @@
+import { CookieConsent } from '@/components/cookies';
+import { Footer } from '@/components/layout/footer';
+import Navbar from '@/components/layout/navbar';
+import { ReduxProvider } from '@/lib/redux/provider';
+import { cn } from '@/lib/utils';
+import { CartProvider } from 'components/cart/cart-context';
+import { getCart } from 'lib/shopify';
+import { ensureStartsWith } from 'lib/utils';
+import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
+import { ReactNode } from 'react';
+import { Toaster } from 'sonner';
+import './globals.css';
+
+// Add font loading check
+if (typeof window !== 'undefined') {
+  document.fonts.ready.then(() => {
+    console.log('Fonts have loaded.');
+    document.fonts.forEach(font => {
+      console.log(`Font family: ${font.family}, Status: ${font.status}`);
+    });
+  });
+}
+
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
+const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: SITE_NAME!,
+    template: `%s | ${SITE_NAME}`
+  },
+  robots: {
+    follow: true,
+    index: true
+  },
+  ...(twitterCreator &&
+    twitterSite && {
+      twitter: {
+        card: 'summary_large_image',
+        creator: twitterCreator,
+        site: twitterSite
+      }
+    })
+};
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const allCookies = await cookies();
+  const cartId = allCookies.get('cartId')?.value;
+  // Don't await the fetch, pass the Promise to the context provider
+  const cart = getCart(cartId);
+  
+  // Get locale from cookie
+  const localeCookie = allCookies.get('NEXT_LOCALE')?.value;
+  const locale = localeCookie || 'hr';
+
+  return (
+    <html lang={locale}>
+      <head>
+        <meta name="theme-color" content="#ffffff" />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossOrigin="anonymous"
+          referrerPolicy="no-referrer"
+        />
+      </head>
+      <body className={cn("min-h-screen bg-white antialiased")}>
+        <ReduxProvider>
+          <CartProvider cartPromise={cart}>
+            <CookieConsent>
+              <div className="flex flex-col min-h-screen">
+                <Navbar />
+                <main className="flex-grow">
+                  {children}
+                  <Toaster closeButton />
+                </main>
+                <Footer />
+              </div>
+            </CookieConsent>
+          </CartProvider>
+        </ReduxProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
new file mode 100644
index 0000000..ab3ae7a
--- /dev/null
+++ b/app/opengraph-image.tsx
@@ -0,0 +1,8 @@
+import OpengraphImage from '../components/opengraph-image';
+
+export const runtime = 'edge';
+
+export default async function Image() {
+  // Default implementation for root page
+  return await OpengraphImage({ title: 'Sent - Personalizirani poklon paketi' });
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..fa04d62
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,20 @@
+import NewHomePage from "@/components/home/NewHomePage";
+
+// Statički metadata
+export const metadata = {
+  title: 'Sent | Poklon paketi za svaku priliku',
+  description: 'Otkrij čar darivanja uz našu opciju "Složi kutiju". Biraj između pažljivo odabranih proizvoda i složi poklon koji će osvojiti na prvu.',
+  openGraph: {
+    type: 'website',
+    title: 'Sent | Poklon paketi za svaku priliku',
+    description: 'Otkrij čar darivanja uz našu opciju "Složi kutiju". Biraj između pažljivo odabranih proizvoda i složi poklon koji će osvojiti na prvu.'
+  }
+};
+
+export default function HomePage() {
+  return (
+    <>
+      <NewHomePage />
+    </>
+  );
+}
diff --git a/app/privacy-policy/page.tsx b/app/privacy-policy/page.tsx
new file mode 100644
index 0000000..bc39087
--- /dev/null
+++ b/app/privacy-policy/page.tsx
@@ -0,0 +1,64 @@
+import { Heading, Text } from "@/components/ui/Typography";
+import { container } from "@/lib/utils";
+
+export default function PrivacyPolicyPage() {
+  return (
+    <div className={`${container} py-12`}>
+      <Heading level={1} className="mb-8 text-center">Privacy Policy</Heading>
+      
+      <div className="max-w-3xl mx-auto">
+        <Text className="mb-6">
+          Last updated: {new Date().toLocaleDateString()}
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">1. Introduction</Heading>
+        <Text className="mb-4">
+          Welcome to SENT. We respect your privacy and are committed to protecting your personal data. 
+          This privacy policy will inform you about how we look after your personal data when you visit our website 
+          and tell you about your privacy rights and how the law protects you.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">2. The Data We Collect About You</Heading>
+        <Text className="mb-4">
+          Personal data, or personal information, means any information about an individual from which that person can be identified. 
+          It does not include data where the identity has been removed (anonymous data).
+        </Text>
+        <Text className="mb-4">
+          We may collect, use, store and transfer different kinds of personal data about you which we have grouped together as follows:
+        </Text>
+        <ul className="list-disc pl-6 mb-6 space-y-2">
+          <li>Identity Data includes first name, last name, username or similar identifier.</li>
+          <li>Contact Data includes billing address, delivery address, email address and telephone numbers.</li>
+          <li>Financial Data includes payment card details.</li>
+          <li>Transaction Data includes details about payments to and from you and other details of products you have purchased from us.</li>
+          <li>Technical Data includes internet protocol (IP) address, browser type and version, time zone setting and location, browser plug-in types and versions, operating system and platform, and other technology on the devices you use to access this website.</li>
+        </ul>
+        
+        <Heading level={2} className="mb-4 mt-8">3. How We Use Your Personal Data</Heading>
+        <Text className="mb-4">
+          We will only use your personal data when the law allows us to. Most commonly, we will use your personal data in the following circumstances:
+        </Text>
+        <ul className="list-disc pl-6 mb-6 space-y-2">
+          <li>Where we need to perform the contract we are about to enter into or have entered into with you.</li>
+          <li>Where it is necessary for our legitimate interests (or those of a third party) and your interests and fundamental rights do not override those interests.</li>
+          <li>Where we need to comply with a legal obligation.</li>
+        </ul>
+        
+        <Heading level={2} className="mb-4 mt-8">4. Data Security</Heading>
+        <Text className="mb-4">
+          We have put in place appropriate security measures to prevent your personal data from being accidentally lost, used or accessed in an unauthorized way, altered or disclosed. 
+          In addition, we limit access to your personal data to those employees, agents, contractors and other third parties who have a business need to know. 
+          They will only process your personal data on our instructions and they are subject to a duty of confidentiality.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">5. Contact Us</Heading>
+        <Text className="mb-6">
+          If you have any questions about this privacy policy or our privacy practices, please contact us at:
+        </Text>
+        <Text className="font-medium mb-1">Email: info@sentshop.com</Text>
+        <Text className="font-medium mb-1">Phone: +385 1 234 5678</Text>
+        <Text className="font-medium mb-6">Address: Ilica 123, 10000 Zagreb, Croatia</Text>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
new file mode 100644
index 0000000..9fd8674
--- /dev/null
+++ b/app/product/[handle]/page.tsx
@@ -0,0 +1,122 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { BackButton } from '@/components/product/BackButton';
+import { ProductDescription } from '@/components/product/ProductDescription';
+import { container } from '@/lib/utils';
+import { ProductProvider } from 'components/product/product-context';
+import { ProductDetailsSection } from 'components/product/ProductDetailsSection';
+import { ProductGallery } from 'components/product/ProductGallery';
+import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { getProduct } from 'lib/shopify';
+import { Suspense } from 'react';
+
+export async function generateMetadata(props: {
+  params: Promise<{ handle: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const { url, width, height, altText: alt } = product.featuredImage || {};
+  const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    robots: {
+      index: indexable,
+      follow: indexable,
+      googleBot: {
+        index: indexable,
+        follow: indexable
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage(props: { params: Promise<{ handle: string }> }) {
+  const params = await props.params;
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.title,
+    description: product.description,
+    image: product.featuredImage.url,
+    offers: {
+      '@type': 'AggregateOffer',
+      availability: product.availableForSale
+        ? 'https://schema.org/InStock'
+        : 'https://schema.org/OutOfStock',
+      priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+      highPrice: product.priceRange.maxVariantPrice.amount,
+      lowPrice: product.priceRange.minVariantPrice.amount
+    }
+  };
+
+  // If product has only one image, duplicate it to create the gallery effect
+  const galleryImages = product.images.length === 1 
+    ? Array(5).fill(product.images[0]).map(image => ({
+        url: image.url,
+        altText: image.altText,
+        width: image.width,
+        height: image.height
+      }))
+    : product.images;
+
+  return (
+    <ProductProvider>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <div className="py-4">
+        <div className={container}>
+          <BackButton />
+        </div>
+      </div>
+      
+      <div className={container}>
+        <div className="flex flex-col md:flex-row lg:gap-8">
+          <div className="w-full lg:w-3/5">
+            <Suspense
+              fallback={
+                <div className="relative aspect-square h-full max-h-[600px] w-full overflow-hidden" />
+              }
+            >
+              <ProductGallery
+                images={galleryImages.slice(0, 5)}
+              />
+            </Suspense>
+          </div>
+
+          <div className="w-full lg:w-2/5 mt-8 lg:mt-0">
+            <Suspense fallback={null}>
+              <ProductDescription product={product} />
+              <ProductDetailsSection />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </ProductProvider>
+  );
+}
diff --git a/app/products/page.tsx b/app/products/page.tsx
new file mode 100644
index 0000000..961f0ec
--- /dev/null
+++ b/app/products/page.tsx
@@ -0,0 +1,11 @@
+import { ProductsPage } from "@/components/products/ProductsPage";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Products | Sent",
+  description: "Explore our collection of ready-made gift boxes and baskets."
+};
+
+export default function ProductsRoute() {
+  return <ProductsPage />;
+} 
\ No newline at end of file
diff --git a/app/robots.ts b/app/robots.ts
new file mode 100644
index 0000000..c9849a2
--- /dev/null
+++ b/app/robots.ts
@@ -0,0 +1,15 @@
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+
+export default function robots() {
+  return {
+    rules: [
+      {
+        userAgent: '*'
+      }
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+    host: baseUrl
+  };
+}
diff --git a/app/search/[collection]/opengraph-image.tsx b/app/search/[collection]/opengraph-image.tsx
new file mode 100644
index 0000000..cd439ca
--- /dev/null
+++ b/app/search/[collection]/opengraph-image.tsx
@@ -0,0 +1,11 @@
+import { getCollection } from 'lib/shopify';
+import OpengraphImage from '../../../components/opengraph-image';
+
+export const runtime = 'edge';
+
+export default async function Image({ params }: { params: { collection: string } }) {
+  const collection = await getCollection(params.collection);
+  const title = collection?.seo?.title || collection?.title;
+
+  return await OpengraphImage({ title });
+}
diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
new file mode 100644
index 0000000..2392ff6
--- /dev/null
+++ b/app/search/[collection]/page.tsx
@@ -0,0 +1,45 @@
+import { getCollection, getCollectionProducts } from 'lib/shopify';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import ProductGridItems from '@/components/layout/ProductGridItems';
+import Grid from 'components/grid';
+import { defaultSort, sorting } from 'lib/constants';
+
+export async function generateMetadata(props: {
+  params: Promise<{ collection: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  const collection = await getCollection(params.collection);
+
+  if (!collection) return notFound();
+
+  return {
+    title: collection.seo?.title || collection.title,
+    description:
+      collection.seo?.description || collection.description || `${collection.title} products`
+  };
+}
+
+export default async function CategoryPage(props: {
+  params: Promise<{ collection: string }>;
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+  const { sort } = searchParams as { [key: string]: string };
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
+
+  return (
+    <section>
+      {products.length === 0 ? (
+        <p className="py-3 text-lg">{`No products found in this collection`}</p>
+      ) : (
+        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+          <ProductGridItems products={products} />
+        </Grid>
+      )}
+    </section>
+  );
+}
diff --git a/app/search/children-wrapper.tsx b/app/search/children-wrapper.tsx
new file mode 100644
index 0000000..8d345b5
--- /dev/null
+++ b/app/search/children-wrapper.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { Fragment } from 'react';
+
+// Ensure children are re-rendered when the search query changes
+export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
+}
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
new file mode 100644
index 0000000..16171cf
--- /dev/null
+++ b/app/search/layout.tsx
@@ -0,0 +1,24 @@
+import { Footer } from 'components/layout/footer';
+import Collections from 'components/layout/search/collections';
+import FilterList from 'components/layout/search/filter';
+import { sorting } from 'lib/constants';
+import ChildrenWrapper from './children-wrapper';
+
+export default function SearchLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 md:flex-row">
+        <div className="order-first w-full flex-none md:max-w-[125px]">
+          <Collections />
+        </div>
+        <div className="order-last min-h-screen w-full md:order-none">
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </div>
+        <div className="order-none flex-none md:order-last md:w-[125px]">
+          <FilterList list={sorting} title="Sort by" />
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/search/loading.tsx b/app/search/loading.tsx
new file mode 100644
index 0000000..fa87c53
--- /dev/null
+++ b/app/search/loading.tsx
@@ -0,0 +1,18 @@
+import Grid from 'components/grid';
+
+export default function Loading() {
+  return (
+    <>
+      <div className="mb-4 h-6" />
+      <Grid className="grid-cols-2 lg:grid-cols-3">
+        {Array(12)
+          .fill(0)
+          .map((_, index) => {
+            return (
+              <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
+            );
+          })}
+      </Grid>
+    </>
+  );
+}
diff --git a/app/search/page.tsx b/app/search/page.tsx
new file mode 100644
index 0000000..bbe9732
--- /dev/null
+++ b/app/search/page.tsx
@@ -0,0 +1,38 @@
+import ProductGridItems from '@/components/layout/ProductGridItems';
+import Grid from 'components/grid';
+import { defaultSort, sorting } from 'lib/constants';
+import { getProducts } from 'lib/shopify';
+
+export const metadata = {
+  title: 'Search',
+  description: 'Search for products in the store.'
+};
+
+export default async function SearchPage(props: {
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const searchParams = await props.searchParams;
+  const { sort, q: searchValue } = searchParams as { [key: string]: string };
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+
+  const products = await getProducts({ sortKey, reverse, query: searchValue });
+  const resultsText = products.length > 1 ? 'results' : 'result';
+
+  return (
+    <>
+      {searchValue ? (
+        <p className="mb-4">
+          {products.length === 0
+            ? 'There are no products that match '
+            : `Showing ${products.length} ${resultsText} for `}
+          <span className="font-bold">&quot;{searchValue}&quot;</span>
+        </p>
+      ) : null}
+      {products.length > 0 ? (
+        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+          <ProductGridItems products={products} />
+        </Grid>
+      ) : null}
+    </>
+  );
+}
diff --git a/app/sitemap.ts b/app/sitemap.ts
new file mode 100644
index 0000000..8f31ee9
--- /dev/null
+++ b/app/sitemap.ts
@@ -0,0 +1,54 @@
+import { getCollections, getPages, getProducts } from 'lib/shopify';
+import { validateEnvironmentVariables } from 'lib/utils';
+import { MetadataRoute } from 'next';
+
+type Route = {
+  url: string;
+  lastModified: string;
+};
+
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+
+export const dynamic = 'force-dynamic';
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  validateEnvironmentVariables();
+
+  const routesMap = [''].map((route) => ({
+    url: `${baseUrl}${route}`,
+    lastModified: new Date().toISOString()
+  }));
+
+  const collectionsPromise = getCollections().then((collections) =>
+    collections.map((collection) => ({
+      url: `${baseUrl}${collection.path}`,
+      lastModified: collection.updatedAt
+    }))
+  );
+
+  const productsPromise = getProducts({}).then((products) =>
+    products.map((product) => ({
+      url: `${baseUrl}/product/${product.handle}`,
+      lastModified: product.updatedAt
+    }))
+  );
+
+  const pagesPromise = getPages().then((pages) =>
+    pages.map((page) => ({
+      url: `${baseUrl}/${page.handle}`,
+      lastModified: page.updatedAt
+    }))
+  );
+
+  let fetchedRoutes: Route[] = [];
+
+  try {
+    fetchedRoutes = (await Promise.all([collectionsPromise, productsPromise, pagesPromise])).flat();
+  } catch (error) {
+    throw JSON.stringify(error, null, 2);
+  }
+
+  return [...routesMap, ...fetchedRoutes];
+}
diff --git a/app/terms-of-service/page.tsx b/app/terms-of-service/page.tsx
new file mode 100644
index 0000000..595be80
--- /dev/null
+++ b/app/terms-of-service/page.tsx
@@ -0,0 +1,78 @@
+import { Heading, Text } from "@/components/ui/Typography";
+import { container } from "@/lib/utils";
+
+export default function TermsOfServicePage() {
+  return (
+    <div className={`${container} py-12`}>
+      <Heading level={1} className="mb-8 text-center">Terms of Service</Heading>
+      
+      <div className="max-w-3xl mx-auto">
+        <Text className="mb-6">
+          Last updated: {new Date().toLocaleDateString()}
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">1. Agreement to Terms</Heading>
+        <Text className="mb-4">
+          By accessing our website at <span className="font-medium">sentshop.com</span>, you are agreeing to be bound by these terms of service,
+          all applicable laws and regulations, and agree that you are responsible for compliance with any
+          applicable local laws. If you do not agree with any of these terms, you are prohibited from
+          using or accessing this site.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">2. Use License</Heading>
+        <Text className="mb-4">
+          Permission is granted to temporarily download one copy of the materials (information or software) 
+          on SENT's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, 
+          and under this license you may not:
+        </Text>
+        <ul className="list-disc pl-6 mb-6 space-y-2">
+          <li>Modify or copy the materials;</li>
+          <li>Use the materials for any commercial purpose, or for any public display (commercial or non-commercial);</li>
+          <li>Attempt to decompile or reverse engineer any software contained on SENT's website;</li>
+          <li>Remove any copyright or other proprietary notations from the materials; or</li>
+          <li>Transfer the materials to another person or "mirror" the materials on any other server.</li>
+        </ul>
+        <Text className="mb-4">
+          This license shall automatically terminate if you violate any of these restrictions and may be terminated by SENT at any time. 
+          Upon terminating your viewing of these materials or upon the termination of this license, 
+          you must destroy any downloaded materials in your possession whether in electronic or printed format.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">3. Disclaimer</Heading>
+        <Text className="mb-4">
+          The materials on SENT's website are provided on an 'as is' basis. SENT makes no warranties, 
+          expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, 
+          implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property 
+          or other violation of rights.
+        </Text>
+        <Text className="mb-4">
+          Further, SENT does not warrant or make any representations concerning the accuracy, likely results, 
+          or reliability of the use of the materials on its website or otherwise relating to such materials or 
+          on any sites linked to this site.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">4. Limitations</Heading>
+        <Text className="mb-4">
+          In no event shall SENT or its suppliers be liable for any damages (including, without limitation, 
+          damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use 
+          the materials on SENT's website, even if SENT or a SENT authorized representative has been notified orally or in writing 
+          of the possibility of such damage.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">5. Governing Law</Heading>
+        <Text className="mb-4">
+          These terms and conditions are governed by and construed in accordance with the laws of Croatia
+          and you irrevocably submit to the exclusive jurisdiction of the courts in that location.
+        </Text>
+        
+        <Heading level={2} className="mb-4 mt-8">6. Contact Us</Heading>
+        <Text className="mb-6">
+          If you have any questions about these Terms, please contact us at:
+        </Text>
+        <Text className="font-medium mb-1">Email: info@sentshop.com</Text>
+        <Text className="font-medium mb-1">Phone: +385 1 234 5678</Text>
+        <Text className="font-medium mb-6">Address: Ilica 123, 10000 Zagreb, Croatia</Text>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/app/test-boxes/page.tsx b/app/test-boxes/page.tsx
new file mode 100644
index 0000000..0e420ed
--- /dev/null
+++ b/app/test-boxes/page.tsx
@@ -0,0 +1,29 @@
+import { ProductGrid } from "@/components/products/ProductGrid";
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { getBoxProducts } from "lib/shopify";
+
+export default async function TestBoxesPage() {
+  const boxes = await getBoxProducts({
+    sortKey: 'CREATED_AT',
+    reverse: true
+  });
+  
+  return (
+    <Section>
+      <div className="mb-6">
+        <Heading level={1}>Test Box Products</Heading>
+        <Text>Found {boxes.length} box products. This is a temporary test page.</Text>
+      </div>
+      
+      {boxes.length === 0 ? (
+        <div className="p-12 text-center bg-gray-100 rounded-lg">
+          <Text size="lg" className="font-semibold">No box products found</Text>
+          <Text className="mt-2">Try adding products with 'box' in the title or with the 'box' tag.</Text>
+        </div>
+      ) : (
+        <ProductGrid products={boxes} title="Box Products" />
+      )}
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..dea737b
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/components/Label.tsx b/components/Label.tsx
new file mode 100644
index 0000000..1003427
--- /dev/null
+++ b/components/Label.tsx
@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import Price from './price';
+
+const Label = ({
+  title,
+  amount,
+  currencyCode,
+  position = 'bottom'
+}: {
+  title: string;
+  amount: string;
+  currencyCode: string;
+  position?: 'bottom' | 'center';
+}) => {
+  return (
+    <div
+      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4 @container/label', {
+        'lg:px-20 lg:pb-[35%]': position === 'center'
+      })}
+    >
+      <div className="flex items-center bg-white">
+        <h3 className="mr-4 line-clamp-2 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
+        <Price
+          className=""
+          amount={amount}
+          currencyCode={currencyCode}
+          currencyCodeClassName="hidden @[275px]/label:inline"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Label;
diff --git a/components/LoadingDots.tsx b/components/LoadingDots.tsx
new file mode 100644
index 0000000..10e6422
--- /dev/null
+++ b/components/LoadingDots.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+const dots = 'mx-[1px] inline-block h-1 w-1 animate-blink rounded-md';
+
+const LoadingDots = ({ className }: { className: string }) => {
+  return (
+    <span className="mx-2 inline-flex items-center">
+      <span className={clsx(dots, className)} />
+      <span className={clsx(dots, 'animation-delay-[200ms]', className)} />
+      <span className={clsx(dots, 'animation-delay-[400ms]', className)} />
+    </span>
+  );
+};
+
+export default LoadingDots;
diff --git a/components/about/AboutPageContent.tsx b/components/about/AboutPageContent.tsx
new file mode 100644
index 0000000..472f829
--- /dev/null
+++ b/components/about/AboutPageContent.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { ContactForm } from '@/components/ui/ContactForm';
+import { Newsletter } from '@/components/ui/Newsletter';
+import { Section } from '@/components/ui/Section';
+import { Heading, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { container } from '@/lib/utils';
+import Image from 'next/image';
+
+export function AboutPageContent() {
+  const { t } = useTranslation();
+  
+  return (
+    <main>
+      {/* About Us Header Section */}
+      <Section spacing="large">
+        <div className="flex flex-col items-center text-center">
+          <Heading level={1} className="mb-6 tracking-[0]">{t('about.title')}</Heading>
+          <Text className="max-w-3xl mx-auto mb-12 tracking-[0] mb-[80px]">
+            {t('about.description')}
+          </Text>
+          
+          <div className="w-full aspect-[16/9] relative bg-gray-100">
+            <Image 
+              src="/assets/images/image2.webp"
+              alt={t('about.title')} 
+              fill 
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </Section>
+
+      {/* Contact Form Section */}
+      <div className="relative">
+        {/* Top wave */}
+        <div className="w-full">
+          <Image
+            src="/assets/images/Frame6.png"
+            alt=""
+            width={1440}
+            height={140}
+            className="w-full object-cover"
+          />
+        </div>
+        
+        {/* Main content with yellow background */}
+        <div className="bg-[#FFC877] pb-[224px]">
+          <div className={container}>
+            <div className="py-[112px]">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div>
+                  <ContactForm 
+                    title={t('about.contactForm.title')}
+                    subtitle={t('about.contactForm.subtitle')}
+                  />
+                </div>
+                
+                <div className="w-full h-full relative bg-gray-100 min-h-[600px]">
+                  <Image 
+                    src="/assets/images/image22.png"
+                    alt={t('about.contactForm.title')} 
+                    fill 
+                    className="object-cover"
+                    priority
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Newsletter Section */}
+      <div className="relative -mt-[112px]">
+        {/* Top wave that overlaps with yellow section */}
+        <div className="w-full absolute -top-32 z-10">
+          <Image
+            src="/assets/images/Frame4.png"
+            alt=""
+            width={1440}
+            height={140}
+            className="w-full object-cover"
+          />
+        </div>
+        
+        {/* Main content with pink background */}
+        <div className="bg-[#F58EA7]">
+          <div className={container}>
+            <div className="py-[112px]">
+              <Newsletter 
+                title={t('about.newsletter.title')} 
+                subtitle={t('about.newsletter.subtitle')}
+                buttonText={t('about.newsletter.buttonText')}
+                disclaimer={t('about.newsletter.disclaimer')}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/AddBoxToCartClient.tsx b/components/build-box/AddBoxToCartClient.tsx
new file mode 100644
index 0000000..01944dd
--- /dev/null
+++ b/components/build-box/AddBoxToCartClient.tsx
@@ -0,0 +1,173 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { clearBox, selectBoxItems, selectEditingBoxGroupId } from "@/lib/redux/slices/boxSlice";
+import { addItem, removeItem } from "components/cart/actions";
+import { useCart } from "components/cart/cart-context";
+import { Product, ProductVariant } from "lib/shopify/types";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function AddBoxToCartClient() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingProducts, setIsLoadingProducts] = useState(true);
+  const [allProducts, setAllProducts] = useState<Product[]>([]);
+  const [boxProducts, setBoxProducts] = useState<Product[]>([]);
+  const items = useAppSelector(selectBoxItems);
+  const editingBoxGroupId = useAppSelector(selectEditingBoxGroupId);
+  const { addCartItem, cart } = useCart();
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+
+  // Fetch products on mount
+  useEffect(() => {
+    async function fetchProducts() {
+      setIsLoadingProducts(true);
+      try {
+        // Fetch regular products
+        const regularResponse = await fetch('/api/products');
+        const regularData = await regularResponse.json();
+        
+        // Fetch box products
+        const boxesResponse = await fetch('/api/products?type=boxes');
+        const boxesData = await boxesResponse.json();
+        
+        if (regularData.products) setAllProducts(regularData.products);
+        if (boxesData.products) setBoxProducts(boxesData.products);
+      } catch (error) {
+        console.error("Failed to fetch products:", error);
+      } finally {
+        setIsLoadingProducts(false);
+      }
+    }
+    
+    fetchProducts();
+  }, []);
+
+  // Check if we have a box
+  const boxItems = items.filter(item => item.variantId === 'box-container');
+  const productItems = items.filter(item => item.variantId !== 'box-container');
+  
+  const isEnabled = boxItems.length > 0 && !isLoadingProducts;
+
+  const handleAddToCart = async () => {
+    if (isLoading || !isEnabled) return;
+    
+    setIsLoading(true);
+    
+    try {
+      // Save the current box state to localStorage for potential editing later
+      try {
+        const boxState = {
+          boxItems: boxItems,
+          productItems: productItems,
+          boxGroupId: `box-${Date.now()}`
+        };
+        localStorage.setItem('lastBoxState', JSON.stringify(boxState));
+      } catch (error) {
+        console.error("Failed to save box state:", error);
+      }
+      
+      // Generate a unique box ID to group all items together
+      const boxGroupId = `box-${Date.now()}`;
+      
+      // Ako je ovo uređivanje postojećeg boxa, prvo ukloni stari box i sve njegove proizvode
+      if (editingBoxGroupId && cart) {
+        // Pronađi sve proizvode i kontejner koji pripadaju ovom boxu
+        const itemsToRemove = cart.lines.filter(line => {
+          const attrs = line.attributes || [];
+          const itemBoxGroupId = attrs.find(attr => attr.key === 'box_group_id')?.value;
+          return itemBoxGroupId === editingBoxGroupId;
+        });
+        
+        // Ukloni sve pronađene proizvode
+        for (const item of itemsToRemove) {
+          if (item.id && item.merchandise.id) {
+            await removeItem(null, item.merchandise.id, item.id);
+          }
+        }
+      }
+      
+      // Add box items first
+      for (const boxItem of boxItems) {
+        // Find the actual box product from our pre-loaded products
+        const boxProduct = boxProducts.find(p => p.id === boxItem.id);
+        
+        if (boxProduct) {
+          // Get the variant to use
+          const boxVariant = boxProduct.variants[0];
+          
+          if (boxVariant) {
+            // Add box with attribute marking it as a box container and the box group ID
+            await addItem(
+              null, 
+              boxVariant.id, 
+              boxItem.quantity,
+              [
+                { key: "_box_type", value: "container" },
+                { key: "_box_group_id", value: boxGroupId }
+              ]
+            );
+            
+            // Update local cart state
+            addCartItem(boxVariant, boxProduct, boxItem.quantity);
+          }
+        }
+      }
+      
+      // Add product items
+      for (const productItem of productItems) {
+        // Find the actual product from our pre-loaded products
+        const product = allProducts.find(p => p.id === productItem.id);
+        
+        if (product) {
+          // Find the variant
+          let selectedVariant: ProductVariant | undefined;
+          
+          if (productItem.variantId && productItem.variantId !== 'undefined') {
+            selectedVariant = product.variants.find(v => v.id === productItem.variantId);
+          }
+          
+          // If no variant found, use the first one (exactly like AddToCartButton.tsx)
+          if (!selectedVariant) {
+            selectedVariant = product.variants[0];
+          }
+          
+          if (selectedVariant && selectedVariant.id) {
+            // Add product with attribute marking it as a box item and the box group ID
+            await addItem(
+              null, 
+              selectedVariant.id, 
+              productItem.quantity,
+              [
+                { key: "_box_type", value: "item" },
+                { key: "_box_group_id", value: boxGroupId }
+              ]
+            );
+            
+            // Update local cart state
+            addCartItem(selectedVariant, product, productItem.quantity);
+          }
+        }
+      }
+      
+      dispatch(clearBox());
+    } catch (error) {
+      console.error("Failed to add box to cart:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleAddToCart}
+      disabled={isLoading || !isEnabled}
+      variant="primary"
+      className="w-full py-3"
+    >
+      {isLoading ? "Dodaje se..." : isLoadingProducts ? "Učitavanje..." : "Dodaj u košaricu"}
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxClientPage.tsx b/components/build-box/BuildBoxClientPage.tsx
new file mode 100644
index 0000000..bb9366a
--- /dev/null
+++ b/components/build-box/BuildBoxClientPage.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import { Text } from "@/components/ui/Typography";
+import { useAppSelector } from "@/lib/redux/hooks";
+import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
+import { container } from "@/lib/utils";
+import { Product } from "lib/shopify/types";
+import Link from "next/link";
+import { ProductGrid } from "../products/ProductGrid";
+import { BuildBoxSidebar } from "./BuildBoxSidebar";
+
+interface BuildBoxClientPageProps {
+  products: Product[];
+}
+
+export function BuildBoxClientPage({ products }: BuildBoxClientPageProps) {
+  const boxTotal = useAppSelector(selectBoxTotal);
+
+  return (
+    <div className="relative">
+      {/* Main content */}
+      <div className={`${container} lg:pr-[240px]`}>
+        
+        <ProductGrid products={products} title="" />
+        
+        {/* Add bottom padding on mobile to make room for mobile sidebar */}
+        <div className="h-24 lg:hidden"></div>
+      </div>
+      
+      {/* Desktop sidebar - right side, full height with scrolling */}
+      <div className="hidden lg:block fixed top-0 right-0 w-[230px] h-full bg-gray-100 border-l border-gray-200 shadow-sm">
+        <div className="pt-[88px] h-full overflow-y-auto">
+          <BuildBoxSidebar />
+        </div>
+      </div>
+      
+      {/* Mobile sidebar - fixed at bottom of screen */}
+      <div className="lg:hidden fixed bottom-0 left-0 right-0 h-20 bg-white border-t border-gray-200 flex items-center justify-between px-4 z-50">
+        <div>
+          <Text weight="semibold">Cijena boxa: ${boxTotal.toFixed(2)}</Text>
+        </div>
+        <Link 
+          href="/build-box/customize" 
+          className="bg-primary text-white px-6 py-2 rounded disabled:bg-gray-400"
+          aria-disabled={boxTotal === 0}
+          tabIndex={boxTotal === 0 ? -1 : undefined}
+        >
+          Idući korak
+        </Link>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxCustomizeClient.tsx b/components/build-box/BuildBoxCustomizeClient.tsx
new file mode 100644
index 0000000..788dadc
--- /dev/null
+++ b/components/build-box/BuildBoxCustomizeClient.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { addToBox, removeFromBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+// Box option interface
+export interface BoxOption {
+  id: string;
+  title: string;
+  price: number;
+  image: string;
+}
+
+interface BoxCustomizeProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizeClient({ boxes }: BoxCustomizeProps) {
+  const [selectedBoxId, setSelectedBoxId] = useState<string | null>(null);
+  const dispatch = useAppDispatch();
+  const items = useAppSelector(selectBoxItems);
+  
+  // Check if there's already a box in the items and set it as selected on load
+  useEffect(() => {
+    const existingBox = items.find(item => item.variantId === 'box-container');
+    if (existingBox) {
+      setSelectedBoxId(existingBox.id);
+    }
+  }, [items]);
+  
+  // When a box is selected, replace any existing box with the new one
+  const handleSelectBox = (box: BoxOption) => {
+    // If the same box is already selected, do nothing
+    if (selectedBoxId === box.id) return;
+    
+    // Set this box as selected
+    setSelectedBoxId(box.id);
+    
+    // Remove any existing box containers first
+    const existingBoxes = items.filter(item => item.variantId === 'box-container');
+    existingBoxes.forEach(existingBox => {
+      dispatch(removeFromBox({ id: existingBox.id, color: existingBox.color }));
+    });
+    
+    // Add the new box
+    dispatch(addToBox({
+      id: box.id,
+      name: box.title,
+      price: box.price,
+      image: box.image,
+      quantity: 1,
+      variantId: 'box-container', // Mark this as a box container, not a product
+    }));
+  };
+  
+  return (
+    <div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {boxes.map((box) => (
+          <BoxOption 
+            key={box.id} 
+            box={box} 
+            isSelected={selectedBoxId === box.id}
+            onSelect={() => handleSelectBox(box)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Box option component
+function BoxOption({ 
+  box, 
+  isSelected, 
+  onSelect 
+}: { 
+  box: BoxOption; 
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <div className={`border rounded-md overflow-hidden ${isSelected ? 'ring-2 ring-primary' : ''}`}>
+      <div className="relative h-60 overflow-hidden">
+        <Image
+          src={box.image}
+          alt={box.title}
+          fill
+          className="object-cover transition-transform duration-300"
+        />
+        {/* Overlay with "Dodaj u box" button - always visible for selected, only on hover for others */}
+        <div className={`absolute inset-0 flex items-center justify-center ${isSelected ? 'bg-black/40' : 'bg-black/40 opacity-0 hover:opacity-100 transition-opacity duration-300'}`}>
+          <Button 
+            variant="custom"
+            onClick={onSelect}
+          >
+            Dodaj u box
+          </Button>
+        </div>
+        {isSelected && (
+          <div className="absolute top-2 right-2 bg-primary text-white rounded-full p-1 w-6 h-6 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        )}
+      </div>
+      <div className="p-4">
+        <div className="flex justify-between items-start">
+          <h3 className="font-medium">{box.title}</h3>
+          <span className="font-medium">${box.price.toFixed(2)}</span>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxCustomizePage.tsx b/components/build-box/BuildBoxCustomizePage.tsx
new file mode 100644
index 0000000..4d95658
--- /dev/null
+++ b/components/build-box/BuildBoxCustomizePage.tsx
@@ -0,0 +1,21 @@
+import { getBoxProducts } from "lib/shopify";
+import { BoxOption } from "./BuildBoxCustomizeClient";
+import { BuildBoxCustomizePageContent } from "./client/BuildBoxCustomizePageContent";
+
+export async function BuildBoxCustomizePage() {
+  // Fetch boxes from the API
+  const boxes = await getBoxProducts({
+    sortKey: 'CREATED_AT',
+    reverse: true
+  });
+  
+  // Convert products to box options for display
+  const boxOptions: BoxOption[] = boxes.map(box => ({
+    id: box.id,
+    title: box.title,
+    price: parseFloat(box.priceRange.minVariantPrice.amount),
+    image: box.featuredImage?.url || '/placeholder-box.jpg'
+  }));
+
+  return <BuildBoxCustomizePageContent boxes={boxOptions} />;
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxMobileSummary.tsx b/components/build-box/BuildBoxMobileSummary.tsx
new file mode 100644
index 0000000..8e44a3c
--- /dev/null
+++ b/components/build-box/BuildBoxMobileSummary.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { Text } from "@/components/ui/Typography";
+import { useAppSelector } from "@/lib/redux/hooks";
+import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
+import Link from "next/link";
+
+export function BuildBoxMobileSummary() {
+  const boxTotal = useAppSelector(selectBoxTotal);
+
+  return (
+    <div className="lg:hidden fixed bottom-0 left-0 right-0 h-20 bg-white border-t border-gray-200 flex items-center justify-between px-4 z-50">
+      <div>
+        <Text weight="semibold">Cijena boxa: ${boxTotal.toFixed(2)}</Text>
+      </div>
+      <Link 
+        href="/build-box/customize" 
+        className={`px-6 py-2 rounded ${boxTotal > 0 ? 'bg-black text-white' : 'bg-gray-300 text-gray-500 pointer-events-none'}`}
+      >
+        Idući korak
+      </Link>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxPage.tsx b/components/build-box/BuildBoxPage.tsx
new file mode 100644
index 0000000..b72c176
--- /dev/null
+++ b/components/build-box/BuildBoxPage.tsx
@@ -0,0 +1,12 @@
+import { getRegularProducts } from "lib/shopify";
+import { BuildBoxPageContent } from "./client/BuildBoxPageContent";
+
+// Main server component
+export async function BuildBoxPage() {
+  const products = await getRegularProducts({
+    sortKey: 'CREATED_AT',
+    reverse: true
+  });
+  
+  return <BuildBoxPageContent products={products} />;
+} 
\ No newline at end of file
diff --git a/components/build-box/BuildBoxSidebar.tsx b/components/build-box/BuildBoxSidebar.tsx
new file mode 100644
index 0000000..8d0a45d
--- /dev/null
+++ b/components/build-box/BuildBoxSidebar.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { BoxItem, removeFromBox, selectBoxItems, selectBoxTotal, updateQuantity } from "@/lib/redux/slices/boxSlice";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AddBoxToCartClient } from "./AddBoxToCartClient";
+
+export function BuildBoxSidebar() {
+  const dispatch = useAppDispatch();
+  const items = useAppSelector(selectBoxItems);
+  const boxTotal = useAppSelector(selectBoxTotal);
+  const isEmpty = items.length === 0;
+  const pathname = usePathname();
+  
+  // Separate box containers from products
+  const boxContainers = items.filter(item => item.variantId === 'box-container');
+  const products = items.filter(item => item.variantId !== 'box-container');
+  
+  // Check if we have products for the first step
+  const hasProducts = products.length > 0;
+  
+  // Check if we have a selected box for the second step
+  const hasBoxSelected = boxContainers.length > 0;
+  
+  // Determine which page we're on to show appropriate button text
+  const isCustomizePage = pathname.includes('/customize');
+  const nextStepUrl = "/build-box/customize";
+  const nextStepText = "Idući korak";
+  
+  // Determine if the next step button should be disabled
+  const isNextStepDisabled = isEmpty || (!isCustomizePage && !hasProducts);
+
+  const handleUpdateQuantity = (id: string, color: string | undefined, newQuantity: number) => {
+    if (newQuantity < 1) return;
+    dispatch(updateQuantity({ id, color, quantity: newQuantity }));
+  };
+
+  const handleRemoveItem = (id: string, color: string | undefined) => {
+    dispatch(removeFromBox({ id, color }));
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Fixed header - adjusted padding to align with main page title */}
+      <div className="p-4 pt-8 pb-4 border-b">
+        <Heading level={3} className="text-center">Your box</Heading>
+      </div>
+      
+      {/* Scrollable products area */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {isEmpty ? (
+          <div className="text-center py-8 text-gray-500">
+            <Text>Your box is empty</Text>
+            <Text className="text-sm mt-2">Add products to create your box</Text>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Show box container if any */}
+            {boxContainers.length > 0 && (
+              <div className="border-b pb-4 mb-4">
+                <Text className="font-medium mb-2">Box Design</Text>
+                {boxContainers.map((box: BoxItem) => (
+                  <div key={box.compositeKey || box.id} className="flex items-start space-x-3">
+                    <div className="w-20 h-24 relative flex-shrink-0">
+                      <Image 
+                        src={box.image} 
+                        alt={box.name}
+                        fill
+                        className="object-cover rounded-md"
+                      />
+                    </div>
+                    <div className="flex-grow">
+                      <div className="flex justify-between">
+                        <div>
+                          <div className="text-base font-medium">{box.name}</div>
+                          <div className="text-sm text-gray-500">${box.price}</div>
+                        </div>
+                        <button 
+                          onClick={() => handleRemoveItem(box.id, box.color)}
+                          className="text-gray-400 hover:text-red-500"
+                          aria-label="Remove box"
+                        >
+                          <Trash2 size={18} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Product items */}
+            {products.length > 0 && (
+              <>
+                {products.map((item: BoxItem) => (
+                  <div key={item.compositeKey || item.id} className="flex items-start space-x-3">
+                    <div className="w-20 h-24 relative flex-shrink-0">
+                      <Image 
+                        src={item.image} 
+                        alt={item.name}
+                        fill
+                        className="object-cover rounded-md"
+                      />
+                    </div>
+                    <div className="flex-grow flex flex-col justify-between min-w-0">
+                      <div className="flex justify-between">
+                        <div className="max-w-[75%]">
+                          <Text className="text-base font-medium break-words">{item.name}</Text>
+                          <div className="flex items-center mt-1">
+                            <Text className="text-sm text-gray-500">${item.price}</Text>
+                            {item.color && (
+                              <div 
+                                className="w-3 h-3 rounded-full ml-2"
+                                style={{ backgroundColor: item.color }}
+                                aria-label="Color"
+                              />
+                            )}
+                          </div>
+                        </div>
+                        <button 
+                          onClick={() => handleRemoveItem(item.id, item.color)}
+                          className="text-gray-400 hover:text-red-500 ml-2"
+                          aria-label="Remove item"
+                        >
+                          <Trash2 size={18} />
+                        </button>
+                      </div>
+                      
+                      <div className="flex items-center mt-2">
+                        <div className="flex border border-gray-300 rounded-md">
+                          <button
+                            onClick={() => handleUpdateQuantity(item.id, item.color, item.quantity - 1)}
+                            className="px-2 py-1 border-r border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50"
+                            disabled={item.quantity <= 1}
+                            aria-label="Decrease quantity"
+                          >
+                            <Minus size={14} />
+                          </button>
+                          <span className="px-3 py-1 flex items-center justify-center w-8 text-center">
+                            {item.quantity}
+                          </span>
+                          <button
+                            onClick={() => handleUpdateQuantity(item.id, item.color, item.quantity + 1)}
+                            className="px-2 py-1 border-l border-gray-300 text-gray-500 hover:bg-gray-100"
+                            aria-label="Increase quantity"
+                          >
+                            <Plus size={14} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      
+      {/* Fixed price and button at bottom */}
+      <div className="border-t p-4">
+        <div className="flex justify-between mb-4">
+          <Text className="font-medium">Cijena boxa</Text>
+          <Text className="font-medium">${boxTotal.toFixed(2)}</Text>
+        </div>
+        
+        {isCustomizePage ? (
+          <AddBoxToCartClient />
+        ) : (
+          <Link 
+            href={isNextStepDisabled ? "#" : nextStepUrl} 
+            className={isNextStepDisabled ? "pointer-events-none" : ""}
+          >
+            <Button 
+              variant="primary"
+              className="w-full py-3"
+              disabled={isNextStepDisabled}
+            >
+              {nextStepText}
+            </Button>
+          </Link>
+        )}
+        
+        {!isCustomizePage && !hasProducts && !isEmpty && (
+          <Text className="text-xs text-center text-red-500 mt-2">
+            Add at least one product to proceed
+          </Text>
+        )}
+        
+        {isCustomizePage && !hasBoxSelected && !isEmpty && (
+          <Text className="text-xs text-center text-red-500 mt-2">
+            Select a box design to continue
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/ClientSidebarWrapper.tsx b/components/build-box/ClientSidebarWrapper.tsx
new file mode 100644
index 0000000..3ef3d71
--- /dev/null
+++ b/components/build-box/ClientSidebarWrapper.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { Section } from "@/components/ui/Section";
+import { Heading } from "@/components/ui/Typography";
+import { useEffect, useState } from "react";
+import { BuildBoxSidebar } from "./BuildBoxSidebar";
+
+export function ClientSidebarWrapper() {
+  // Use state to prevent hydration errors
+  const [isClient, setIsClient] = useState(false);
+  
+  // After component mounts, set isClient to true
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  
+  // On the server, or during hydration, return a placeholder with the same dimensions
+  if (!isClient) {
+    return (
+      <div className="h-full flex flex-col">
+        <Section spacing="xs" className="border-b">
+          <Heading level={3} className="text-center">Your box</Heading>
+        </Section>
+        <div className="flex-1 p-4">
+          {/* Placeholder content to match dimensions */}
+          <div className="text-center py-8 text-gray-500">
+            <p>Loading...</p>
+          </div>
+        </div>
+        <div className="border-t p-4">
+          <div className="flex justify-between mb-4">
+            <p className="font-medium">Cijena boxa</p>
+            <p className="font-medium">$0.00</p>
+          </div>
+          
+          <button
+            className="w-full py-3 bg-gray-200 text-gray-500 rounded cursor-not-allowed"
+            disabled
+          >
+            Loading...
+          </button>
+        </div>
+      </div>
+    );
+  }
+  
+  // On the client, after hydration, render the actual sidebar
+  return <BuildBoxSidebar />;
+} 
\ No newline at end of file
diff --git a/components/build-box/RedirectIfEmptyBox.tsx b/components/build-box/RedirectIfEmptyBox.tsx
new file mode 100644
index 0000000..96bd769
--- /dev/null
+++ b/components/build-box/RedirectIfEmptyBox.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { useAppSelector } from "@/lib/redux/hooks";
+import { selectBoxItems } from "@/lib/redux/slices/boxSlice";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export function RedirectIfEmptyBox() {
+  const router = useRouter();
+  const items = useAppSelector(selectBoxItems);
+  const [isMounted, setIsMounted] = useState(false);
+  
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  
+  useEffect(() => {
+    if (isMounted && items.length === 0) {
+      router.replace('/build-box');
+    }
+  }, [items, router, isMounted]);
+  
+  return null;
+} 
\ No newline at end of file
diff --git a/components/build-box/client/AddBoxToCartClientWithTranslation.tsx b/components/build-box/client/AddBoxToCartClientWithTranslation.tsx
new file mode 100644
index 0000000..f8d2eae
--- /dev/null
+++ b/components/build-box/client/AddBoxToCartClientWithTranslation.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { clearBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
+import { addItem } from "components/cart/actions";
+import { useCart } from "components/cart/cart-context";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+interface AddBoxToCartClientWithTranslationProps {
+  buttonText?: string;
+}
+
+export function AddBoxToCartClientWithTranslation({ buttonText }: AddBoxToCartClientWithTranslationProps) {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useAppDispatch();
+  const boxItems = useAppSelector(selectBoxItems);
+  const router = useRouter();
+  const { addCartItem } = useCart();
+  
+  // Check if we have a box container
+  const hasBoxContainer = boxItems.some(item => item.variantId === 'box-container');
+  
+  // Disable the button if no box container is selected
+  const isDisabled = !hasBoxContainer;
+  
+  const handleAddToCart = async () => {
+    setIsLoading(true);
+    
+    try {
+      // Get box container details (for image, name etc.)
+      const boxContainer = boxItems.find(item => item.variantId === 'box-container');
+      
+      if (!boxContainer) {
+        throw new Error('No box container selected');
+      }
+      
+      // Generate a unique box ID to group all items together
+      const boxGroupId = `box-${Date.now()}`;
+      
+      // Add box to cart with attribute marking it as a box container
+      await addItem(
+        null, 
+        boxContainer.id, 
+        1,
+        [
+          { key: "_box_type", value: "container" },
+          { key: "_box_group_id", value: boxGroupId }
+        ]
+      );
+      
+      // Add all product items with same box group ID
+      for (const item of boxItems.filter(i => i.variantId !== 'box-container')) {
+        await addItem(
+          null,
+          item.id,
+          item.quantity,
+          [
+            { key: "_box_type", value: "item" },
+            { key: "_box_group_id", value: boxGroupId }
+          ]
+        );
+      }
+      
+      // Clear the box
+      dispatch(clearBox());
+      
+      // Redirect to cart page
+      router.push('/cart');
+    } catch (error) {
+      console.error('Error adding box to cart:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  
+  return (
+    <Button 
+      variant="primary"
+      onClick={handleAddToCart}
+      className="w-full py-3"
+      disabled={isDisabled || isLoading}
+    >
+      {isLoading ? 'Loading...' : (buttonText || t('buildBox.customize.addToCart'))}
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/BuildBoxCustomizeClientWithTranslation.tsx b/components/build-box/client/BuildBoxCustomizeClientWithTranslation.tsx
new file mode 100644
index 0000000..740cdcf
--- /dev/null
+++ b/components/build-box/client/BuildBoxCustomizeClientWithTranslation.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { addToBox, removeFromBox, selectBoxItems } from "@/lib/redux/slices/boxSlice";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+
+export interface BoxOption {
+  id: string;
+  title: string;
+  price: number;
+  image: string;
+}
+
+interface BuildBoxCustomizeClientWithTranslationProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizeClientWithTranslation({ boxes }: BuildBoxCustomizeClientWithTranslationProps) {
+  const { t, locale } = useTranslation();
+  const dispatch = useAppDispatch();
+  const [selectedBox, setSelectedBox] = useState<string | null>(null);
+  const boxItems = useAppSelector(selectBoxItems);
+  
+  // Učitaj odabranu kutiju iz postojećih item-a prilikom učitavanja stranice
+  useEffect(() => {
+    const existingBox = boxItems.find(item => item.variantId === 'box-container');
+    if (existingBox) {
+      setSelectedBox(existingBox.id);
+    }
+  }, [boxItems]);
+
+  const handleSelectBox = (box: BoxOption) => {
+    // Ako je ista kutija već odabrana, ne radi ništa
+    if (selectedBox === box.id) return;
+    
+    setSelectedBox(box.id);
+    
+    // Ukloni sve postojeće kutije iz košarice
+    const existingBoxes = boxItems.filter(item => item.variantId === 'box-container');
+    existingBoxes.forEach(existingBox => {
+      dispatch(removeFromBox({ id: existingBox.id, color: existingBox.color }));
+    });
+    
+    // Add box to the cart
+    dispatch(addToBox({
+      id: box.id,
+      name: box.title,
+      price: box.price,
+      image: box.image,
+      quantity: 1,
+      variantId: 'box-container', // Special ID to identify this as a box
+    }));
+  };
+  
+  return (
+    <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+      {boxes.map((box) => {
+        const isSelected = selectedBox === box.id;
+        return (
+          <div
+            key={box.id}
+            className={`flex flex-col group relative cursor-pointer ${isSelected ? 'ring-2 ring-primary rounded-lg' : ''}`}
+            onClick={() => handleSelectBox(box)}
+          >
+            <div className="relative aspect-[4/3] overflow-hidden rounded-lg">
+              <Image 
+                src={box.image} 
+                alt={box.title} 
+                fill
+                className="object-cover"
+              />
+              
+              {/* Oznaka za odabranu kutiju */}
+              {isSelected && (
+                <div className="absolute top-0 right-0 bg-primary text-white m-2 rounded-full p-1 w-6 h-6 flex items-center justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </div>
+              )}
+              
+              {/* Mobile button - always visible */}
+              <div className="absolute inset-0 flex items-center justify-center md:hidden">
+                <Button
+                  variant={isSelected ? "custom" : "primary"}
+                  className="w-auto shadow-md"
+                >
+                  {isSelected 
+                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
+                    : t('buildBox.customize.options.select')}
+                </Button>
+              </div>
+              
+              {/* Desktop button - visible on hover */}
+              <div className="absolute inset-0 hidden md:flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <Button
+                  variant={isSelected ? "custom" : "primary"}
+                  className="w-auto shadow-md"
+                >
+                  {isSelected 
+                    ? (locale === 'en' ? 'Selected' : 'Odabrano') 
+                    : t('buildBox.customize.options.select')}
+                </Button>
+              </div>
+            </div>
+            
+            <div className="pt-4 flex flex-col">
+              <h3 className="text-lg font-bold">{box.title}</h3>
+              <p className="text-lg font-medium">${box.price.toFixed(2)}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/BuildBoxCustomizePageContent.tsx b/components/build-box/client/BuildBoxCustomizePageContent.tsx
new file mode 100644
index 0000000..2077992
--- /dev/null
+++ b/components/build-box/client/BuildBoxCustomizePageContent.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import Link from "next/link";
+import { BoxOption } from "../BuildBoxCustomizeClient";
+import { RedirectIfEmptyBox } from "../RedirectIfEmptyBox";
+import { BuildBoxCustomizeClientWithTranslation } from "./BuildBoxCustomizeClientWithTranslation";
+import { BuildBoxLayout } from "./BuildBoxLayout";
+
+interface BuildBoxCustomizePageContentProps {
+  boxes: BoxOption[];
+}
+
+export function BuildBoxCustomizePageContent({ boxes }: BuildBoxCustomizePageContentProps) {
+  const { t } = useTranslation();
+  
+  // Back button component
+  const BackButton = (
+    <Link href="/build-box" className="inline-flex items-center text-sm text-gray-600">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
+        <polyline points="15 18 9 12 15 6" />
+      </svg>
+      {t('buildBox.customize.back')}
+    </Link>
+  );
+
+  // If no boxes, display a message
+  if (!boxes || boxes.length === 0) {
+    return (
+      <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
+        <div className="text-center py-8">
+          <p>{t('buildBox.customize.emptyMessage')}</p>
+        </div>
+      </BuildBoxLayout>
+    );
+  }
+
+  return (
+    <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
+      {/* Client component to check if box has items and redirect if empty */}
+      <RedirectIfEmptyBox />
+      
+      {/* Boxes Grid - Client Component */}
+      <BuildBoxCustomizeClientWithTranslation boxes={boxes} />
+    </BuildBoxLayout>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/BuildBoxLayout.tsx b/components/build-box/client/BuildBoxLayout.tsx
new file mode 100644
index 0000000..2e040a8
--- /dev/null
+++ b/components/build-box/client/BuildBoxLayout.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { Heading } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useAppSelector } from "@/lib/redux/hooks";
+import { selectBoxTotal } from "@/lib/redux/slices/boxSlice";
+import { container } from "@/lib/utils";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { ReactNode, useEffect, useState } from "react";
+import { ClientSidebarWrapperWithTranslation } from "./ClientSidebarWrapperWithTranslation";
+
+interface BuildBoxLayoutProps {
+  children: ReactNode;
+  title: string;
+  step: number;
+  totalSteps?: number;
+  backButton?: ReactNode;
+}
+
+export function BuildBoxLayout({ 
+  children, 
+  title, 
+  step, 
+  totalSteps = 2,
+  backButton 
+}: BuildBoxLayoutProps) {
+  const { t } = useTranslation();
+  const [mobileCartOpen, setMobileCartOpen] = useState(false);
+  const storeBoxTotal = useAppSelector(selectBoxTotal);
+  
+  // Dodajemo state za boxTotal koji će se koristiti za prikaz
+  const [displayBoxTotal, setDisplayBoxTotal] = useState(0);
+  
+  // Ažuriramo displayBoxTotal samo na klijentskoj strani
+  useEffect(() => {
+    setDisplayBoxTotal(storeBoxTotal);
+  }, [storeBoxTotal]);
+
+  // Toggle mobile cart sidebar
+  const toggleMobileCart = () => {
+    setMobileCartOpen(!mobileCartOpen);
+  };
+
+  return (
+    <div className="relative">
+      {/* Main content */}
+      <div className={container}>
+        {/* Custom header with step indicator */}
+        <div className="mt-8 mb-8">
+          {/* Za korak 2, gumb nazad je iznad naslova */}
+          {step === 2 && backButton && (
+            <div className="mb-4">
+              {backButton}
+            </div>
+          )}
+          
+          <div className="flex items-center justify-between">
+            {/* Za korak 1, gumb nazad je pored naslova (ako postoji) */}
+            {step === 1 && backButton && (
+              <div>{backButton}</div>
+            )}
+            
+            <Heading level={step === 1 ? 2 : 1} className={step === 1 ? "mt-16" : ""}>
+              {title}:&nbsp;
+              <span className="text-primary">{t('buildBox.step')} {step}</span>
+            </Heading>
+          </div>
+        </div>
+        
+        <div className="pr-0 lg:pr-[240px]">
+          {children}
+        </div>
+
+        {/* Mobile sticky footer with cart button */}
+        <div className="lg:hidden fixed bottom-0 left-0 right-0 bg-[#E8E8E8] p-4 z-20 shadow-sm">
+          <div 
+            className="w-full py-3 flex items-center justify-between cursor-pointer"
+            onClick={toggleMobileCart}
+          >
+            <span className="font-medium">{t('buildBox.sidebar.title')}</span>
+            <ChevronUp size={20} />
+          </div>
+        </div>
+        
+        {/* Add padding at the bottom on mobile to account for the sticky footer */}
+        <div className="h-20 lg:h-0"></div>
+      </div>
+      
+      {/* Desktop sidebar - right side, fixed position */}
+      <div className="hidden lg:block fixed top-[63px] right-0 w-[230px] h-[calc(100vh-65px)] bg-gray-100 border-l border-gray-200 shadow-sm z-10">
+        <ClientSidebarWrapperWithTranslation />
+      </div>
+
+      {/* Mobile full-screen sidebar overlay */}
+      {mobileCartOpen && (
+        <div className="lg:hidden fixed inset-0 bg-white z-50 flex flex-col h-screen max-h-screen overflow-hidden">
+          <div className="flex items-center justify-between p-4">
+            <Heading level={3}>{t('buildBox.sidebar.title')}</Heading>
+            <div 
+              className="cursor-pointer"
+              onClick={toggleMobileCart}
+            >
+              <ChevronDown size={24} />
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            <ClientSidebarWrapperWithTranslation isMobile={true} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/BuildBoxPageContent.tsx b/components/build-box/client/BuildBoxPageContent.tsx
new file mode 100644
index 0000000..40e67bf
--- /dev/null
+++ b/components/build-box/client/BuildBoxPageContent.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { SortDropdown } from "@/components/products/client/SortDropdown";
+import { FilterSidebar } from "@/components/products/FilterSidebar";
+import { useProductFilters } from "@/components/products/hooks/useProductFilters";
+import { FilterButton } from "@/components/products/ProductComponents/FilterButton";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { Product } from "lib/shopify/types";
+import { useState } from "react";
+import { ProductGrid } from "../../products/ProductGrid";
+import { BuildBoxLayout } from "./BuildBoxLayout";
+
+interface BuildBoxPageContentProps {
+  products: Product[];
+}
+
+export function BuildBoxPageContent({ products }: BuildBoxPageContentProps) {
+  const { t } = useTranslation();
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const { 
+    activeFilters, 
+    sortOption, 
+    sortedProducts, 
+    handleApplyFilters, 
+    handleSortChange, 
+    removeFilter, 
+    clearAllFilters, 
+    formatFilterTag 
+  } = useProductFilters(products);
+
+  // If no products, display a message
+  if (!products || products.length === 0) {
+    return (
+      <BuildBoxLayout title={t('buildBox.title')} step={1}>
+        <div className="text-center py-8">
+          <p>{t('buildBox.emptyMessage')}</p>
+        </div>
+      </BuildBoxLayout>
+    );
+  }
+
+  return (
+    <BuildBoxLayout title={t('buildBox.title')} step={1}>
+      <div className="mb-8">
+        {/* Filter and Sort Controls */}
+        <div className="flex justify-between items-center mb-4">
+          <FilterButton onClick={() => setSidebarOpen(true)} />
+          <SortDropdown 
+            value={sortOption} 
+            onChange={handleSortChange}
+            label={t('products.sort.title')}
+          />
+        </div>
+      </div>
+      
+      <ProductGrid 
+        products={sortedProducts} 
+        title="" 
+        showControls={false}
+      />
+      
+      {/* Filter Sidebar */}
+      <FilterSidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        onApplyFilters={handleApplyFilters}
+        activeFilters={activeFilters}
+      />
+    </BuildBoxLayout>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/BuildBoxSidebarWithTranslation.tsx b/components/build-box/client/BuildBoxSidebarWithTranslation.tsx
new file mode 100644
index 0000000..dd8308c
--- /dev/null
+++ b/components/build-box/client/BuildBoxSidebarWithTranslation.tsx
@@ -0,0 +1,210 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
+import { BoxItem, removeFromBox, selectBoxItems, selectBoxTotal, updateQuantity } from "@/lib/redux/slices/boxSlice";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { AddBoxToCartClient } from "../AddBoxToCartClient";
+
+interface BuildBoxSidebarWithTranslationProps {
+  isMobile?: boolean;
+}
+
+export function BuildBoxSidebarWithTranslation({ isMobile = false }: BuildBoxSidebarWithTranslationProps) {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const items = useAppSelector(selectBoxItems);
+  const boxTotal = useAppSelector(selectBoxTotal);
+  const isEmpty = items.length === 0;
+  const pathname = usePathname();
+  
+  // Separate box containers from products
+  const boxContainers = items.filter(item => item.variantId === 'box-container');
+  const products = items.filter(item => item.variantId !== 'box-container');
+  
+  // Check if we have products for the first step
+  const hasProducts = products.length > 0;
+  
+  // Check if we have a selected box for the second step
+  const hasBoxSelected = boxContainers.length > 0;
+  
+  // Determine which page we're on to show appropriate button text
+  const isCustomizePage = pathname.includes('/customize');
+  const nextStepUrl = "/build-box/customize";
+  const nextStepText = t('buildBox.sidebar.nextStep');
+  
+  // Determine if the next step button should be disabled
+  const isNextStepDisabled = isEmpty || (!isCustomizePage && !hasProducts);
+
+  const handleUpdateQuantity = (id: string, color: string | undefined, newQuantity: number) => {
+    if (newQuantity < 1) return;
+    dispatch(updateQuantity({ id, color, quantity: newQuantity }));
+  };
+
+  const handleRemoveItem = (id: string, color: string | undefined) => {
+    dispatch(removeFromBox({ id, color }));
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Fixed header - prikazan samo ako nije mobilni prikaz */}
+      {!isMobile && (
+        <div className="p-4 pt-8 pb-4 border-b">
+          <Heading level={3} className="text-center">{t('buildBox.sidebar.title')}</Heading>
+        </div>
+      )}
+      
+      {/* Scrollable products area */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {isEmpty ? (
+          <div className="text-center py-8 text-gray-500">
+            <Text>{t('buildBox.sidebar.empty')}</Text>
+            <Text className="text-sm mt-2">{t('buildBox.sidebar.emptySubtext')}</Text>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Show box container if any */}
+            {boxContainers.length > 0 && (
+              <div className="border-b pb-4 mb-4">
+                <Text className="font-medium mb-2">{t('buildBox.sidebar.boxDesign')}</Text>
+                {boxContainers.map((box: BoxItem) => (
+                  <div key={box.compositeKey || box.id} className="flex items-start space-x-3">
+                    <div className="w-20 h-24 relative flex-shrink-0">
+                      <Image 
+                        src={box.image} 
+                        alt={box.name}
+                        fill
+                        className="object-cover rounded-md"
+                      />
+                    </div>
+                    <div className="flex-grow">
+                      <div className="flex justify-between">
+                        <div>
+                          <div className="text-base font-medium">{box.name}</div>
+                          <div className="text-sm text-gray-500">${box.price}</div>
+                        </div>
+                        <button 
+                          onClick={() => handleRemoveItem(box.id, box.color)}
+                          className="text-gray-400 hover:text-red-500"
+                          aria-label="Remove box"
+                        >
+                          <Trash2 size={18} />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Product items */}
+            {products.length > 0 && (
+              <>
+                {products.map((item: BoxItem) => (
+                  <div key={item.compositeKey || item.id} className="flex items-start space-x-3">
+                    <div className="w-20 h-24 relative flex-shrink-0">
+                      <Image 
+                        src={item.image} 
+                        alt={item.name}
+                        fill
+                        className="object-cover rounded-md"
+                      />
+                    </div>
+                    <div className="flex-grow flex flex-col justify-between h-24">
+                      <div className="flex justify-between">
+                        <div>
+                          <div className="text-base font-medium">${item.price}</div>
+                          {item.color && (
+                            <div className="text-xs text-gray-500 mt-1 flex items-center">
+                              <div 
+                                className="w-3 h-3 rounded-full mr-1"
+                                style={{ backgroundColor: item.color }}
+                              />
+                              <span>Color</span>
+                            </div>
+                          )}
+                        </div>
+                        <button 
+                          onClick={() => handleRemoveItem(item.id, item.color)}
+                          className="text-gray-400 hover:text-red-500"
+                          aria-label="Remove item"
+                        >
+                          <Trash2 size={18} />
+                        </button>
+                      </div>
+                      
+                      <div className="flex items-center">
+                        <div className="flex border border-gray-300 rounded-md">
+                          <button
+                            onClick={() => handleUpdateQuantity(item.id, item.color, item.quantity - 1)}
+                            className="px-2 py-1 border-r border-gray-300 text-gray-500 hover:bg-gray-100 disabled:opacity-50"
+                            disabled={item.quantity <= 1}
+                            aria-label="Decrease quantity"
+                          >
+                            <Minus size={14} />
+                          </button>
+                          <span className="px-3 py-1 flex items-center justify-center w-8 text-center">
+                            {item.quantity}
+                          </span>
+                          <button
+                            onClick={() => handleUpdateQuantity(item.id, item.color, item.quantity + 1)}
+                            className="px-2 py-1 border-l border-gray-300 text-gray-500 hover:bg-gray-100"
+                            aria-label="Increase quantity"
+                          >
+                            <Plus size={14} />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+      
+      {/* Fixed price and button at bottom */}
+      <div className="border-t p-4">
+        <div className="flex justify-between mb-4">
+          <Text className="font-medium">{t('buildBox.sidebar.boxPrice')}</Text>
+          <Text className="font-medium">${boxTotal.toFixed(2)}</Text>
+        </div>
+        
+        {isCustomizePage ? (
+          <AddBoxToCartClient />
+        ) : (
+          <Link 
+            href={isNextStepDisabled ? "#" : nextStepUrl} 
+            className={isNextStepDisabled ? "pointer-events-none" : ""}
+          >
+            <Button 
+              variant="primary"
+              className="w-full py-3"
+              disabled={isNextStepDisabled}
+            >
+              {nextStepText}
+            </Button>
+          </Link>
+        )}
+        
+        {!isCustomizePage && !hasProducts && !isEmpty && (
+          <Text className="text-xs text-center text-red-500 mt-2">
+            {t('buildBox.sidebar.addProductWarning')}
+          </Text>
+        )}
+        
+        {isCustomizePage && !hasBoxSelected && !isEmpty && (
+          <Text className="text-xs text-center text-red-500 mt-2">
+            {t('buildBox.sidebar.selectBoxWarning')}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/build-box/client/ClientSidebarWrapperWithTranslation.tsx b/components/build-box/client/ClientSidebarWrapperWithTranslation.tsx
new file mode 100644
index 0000000..9ad0f86
--- /dev/null
+++ b/components/build-box/client/ClientSidebarWrapperWithTranslation.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import { Heading } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useEffect, useState } from "react";
+import { BuildBoxSidebarWithTranslation } from "./BuildBoxSidebarWithTranslation";
+
+interface ClientSidebarWrapperWithTranslationProps {
+  isMobile?: boolean;
+}
+
+export function ClientSidebarWrapperWithTranslation({ isMobile = false }: ClientSidebarWrapperWithTranslationProps) {
+  const { t } = useTranslation();
+  // Use state to prevent hydration errors
+  const [isClient, setIsClient] = useState(false);
+  
+  // After component mounts, set isClient to true
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  
+  // On the server, or during hydration, return a placeholder with the same dimensions
+  if (!isClient) {
+    return (
+      <div className="h-full flex flex-col">
+        {!isMobile && (
+          <div className="p-4 pt-8 pb-4 border-b">
+            <Heading level={3} className="text-center">{t('buildBox.sidebar.title')}</Heading>
+          </div>
+        )}
+        <div className="flex-1 p-4">
+          {/* Placeholder content to match dimensions */}
+          <div className="text-center py-8 text-gray-500">
+            <p>Loading...</p>
+          </div>
+        </div>
+        <div className="border-t p-4">
+          <div className="flex justify-between mb-4">
+            <p className="font-medium">{t('buildBox.sidebar.boxPrice')}</p>
+            <p className="font-medium">$0.00</p>
+          </div>
+          
+          <button
+            className="w-full py-3 bg-gray-200 text-gray-500 rounded cursor-not-allowed"
+            disabled
+          >
+            Loading...
+          </button>
+        </div>
+      </div>
+    );
+  }
+  
+  // On the client, after hydration, render the actual sidebar
+  return <BuildBoxSidebarWithTranslation isMobile={isMobile} />;
+} 
\ No newline at end of file
diff --git a/components/carousel.tsx b/components/carousel.tsx
new file mode 100644
index 0000000..80fc0b4
--- /dev/null
+++ b/components/carousel.tsx
@@ -0,0 +1,40 @@
+import { getCollectionProducts } from 'lib/shopify';
+import Link from 'next/link';
+import { GridTileImage } from './grid/tile';
+
+export async function Carousel() {
+  // Collections that start with `hidden-*` are hidden from the search page.
+  const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
+
+  if (!products?.length) return null;
+
+  // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
+  const carouselProducts = [...products, ...products, ...products];
+
+  return (
+    <div className="w-full overflow-x-auto pb-6 pt-1">
+      <ul className="flex gap-4">
+        {carouselProducts.map((product, i) => (
+          <li
+            key={`${product.handle}${i}`}
+            className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
+          >
+            <Link href={`/product/${product.handle}`} className="relative h-full w-full">
+              <GridTileImage
+                alt={product.title}
+                label={{
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                fill
+                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
+              />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/components/cart/CartBoxItem.tsx b/components/cart/CartBoxItem.tsx
new file mode 100644
index 0000000..eaba80a
--- /dev/null
+++ b/components/cart/CartBoxItem.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Heading } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { useAppDispatch } from '@/lib/redux/hooks';
+import { loadBoxForEditing } from '@/lib/redux/slices/boxSlice';
+import Price from 'components/price';
+import { CartItem } from 'lib/shopify/types';
+import { ChevronDown, ChevronUp, Pencil, Trash2 } from 'lucide-react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { CartProductItem } from './CartProductItem';
+import { getUniqueItemKey } from './processCartItems';
+
+interface CartBoxItemProps {
+  boxItem: CartItem;
+  boxProducts: CartItem[];
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+}
+
+export function CartBoxItem({ boxItem, boxProducts, onUpdate, isPending }: CartBoxItemProps) {
+  const { t } = useTranslation();
+  const [isExpanded, setIsExpanded] = useState(true);
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  
+  // Get box attributes if any
+  const boxGroupId = boxItem.attributes?.find(attr => attr.key === '_box_group_id')?.value || 'box';
+  
+  // Handle box deletion - delete box and all products inside it
+  const handleBoxDelete = () => {
+    // First update localStorage to reflect the box deletion
+    try {
+      const boxStateString = localStorage.getItem('lastBoxState');
+      if (boxStateString) {
+        const boxState = JSON.parse(boxStateString);
+        
+        // Check if this is the box that's currently saved for editing
+        if (boxState.originalBoxGroupId === boxGroupId) {
+          // Remove the box from localStorage
+          localStorage.removeItem('lastBoxState');
+        }
+      }
+    } catch (error) {
+      console.error('Error updating box state in localStorage on delete', error);
+    }
+    
+    // First delete the box container
+    onUpdate(boxItem.merchandise.id, 'delete', boxItem.id);
+    
+    // Then delete all products inside the box
+    boxProducts.forEach(product => {
+      if (product.id) {
+        onUpdate(product.merchandise.id, 'delete', product.id);
+      }
+    });
+  };
+
+  // Handle box editing
+  const handleEditBox = () => {
+    // Prvo pokušaj direktno spremiti trenutni boxGroupId u lokalno stanje
+    try {
+      const currentBoxState = localStorage.getItem('lastBoxState');
+      let boxStateObject = currentBoxState ? JSON.parse(currentBoxState) : {};
+      
+      // Dodaj originalni boxGroupId da kasnije znamo što trebamo obrisati
+      boxStateObject.originalBoxGroupId = boxGroupId;
+      localStorage.setItem('lastBoxState', JSON.stringify(boxStateObject));
+    } catch (error) {
+      console.error('Failed to save original box group ID', error);
+    }
+    
+    // Attempt to load box state for editing from localStorage
+    dispatch(loadBoxForEditing());
+    
+    // Redirect to build-box page
+    router.push('/build-box');
+  };
+  
+  return (
+    <div className="mb-6 border-b border-gray-200">
+      {/* Box Header */}
+      <div className="flex items-center justify-between py-4">
+        <div className="flex items-center">
+          {/* Box Image */}
+          <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden">
+            <Image
+              src={boxItem.merchandise.product.featuredImage?.url || ''}
+              alt={boxItem.merchandise.product.title}
+              fill
+              className="object-cover"
+            />
+          </div>
+          
+          {/* Box Details */}
+          <div className="pl-4">
+            <Heading level={4}>
+              {boxItem.merchandise.product.title}
+            </Heading>
+            <Price
+              amount={boxItem.cost.totalAmount.amount}
+              currencyCode={boxItem.cost.totalAmount.currencyCode}
+              className="text-sm mt-1 font-bold"
+            />
+          </div>
+        </div>
+        
+        {/* Box Actions */}
+        <div className="flex items-center gap-6">
+          <Button
+            onClick={handleBoxDelete}
+            variant="default"
+            className="p-0 h-auto border-0 bg-transparent hover:bg-transparent text-gray-500 hover:text-red-500"
+            disabled={isPending}
+            aria-label={t('cart.remove')}
+          >
+            <Trash2 size={20} />
+          </Button>
+          
+          <Button
+            onClick={handleEditBox}
+            variant="default"
+            className="p-0 h-auto border-0 bg-transparent hover:bg-transparent text-gray-500 hover:text-gray-700"
+            aria-label={t('cart.editBox')}
+          >
+            <Pencil size={20} />
+          </Button>
+          
+          <Button
+            onClick={() => setIsExpanded(!isExpanded)}
+            variant="default"
+            className="p-0 h-auto border-0 bg-transparent hover:bg-transparent text-gray-500 hover:text-gray-700"
+            aria-label={isExpanded ? t('cart.collapseBox') : t('cart.expandBox')}
+          >
+            {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
+          </Button>
+        </div>
+      </div>
+      
+      {/* Box Products */}
+      {isExpanded && boxProducts.length > 0 && (
+        <div className="space-y-4 py-2 pb-4">
+          <h4 className="text-sm font-medium text-gray-500 mb-2">{t('cart.customBoxContents')}</h4>
+          {boxProducts.map((item, index) => (
+            <CartProductItem
+              key={getUniqueItemKey(item, boxGroupId, index)}
+              item={item}
+              onUpdate={onUpdate}
+              isPending={isPending}
+              isInBox={true}
+              boxGroupId={boxGroupId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/CartDiscountForm.tsx b/components/cart/CartDiscountForm.tsx
new file mode 100644
index 0000000..ea7c35a
--- /dev/null
+++ b/components/cart/CartDiscountForm.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Label, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { AlertCircle, CheckCircle } from 'lucide-react';
+import { FormEvent, useState, useTransition } from 'react';
+import { validateDiscountCode } from './actions';
+
+export function CartDiscountForm() {
+  const { t } = useTranslation();
+  const [isPending, startTransition] = useTransition();
+  const [couponCode, setCouponCode] = useState('');
+  const [couponMessage, setCouponMessage] = useState<{ text: string; isValid: boolean } | null>(null);
+
+  // Handle coupon validation
+  const handleCouponSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    
+    if (!couponCode.trim()) {
+      setCouponMessage({ 
+        text: 'Please enter a discount code', 
+        isValid: false 
+      });
+      return;
+    }
+    
+    setCouponMessage(null);
+    
+    startTransition(async () => {
+      try {
+        const result = await validateDiscountCode({}, couponCode);
+        setCouponMessage({ 
+          text: result.message, 
+          isValid: result.isValid 
+        });
+      } catch (error) {
+        setCouponMessage({ 
+          text: 'Error validating coupon code', 
+          isValid: false 
+        });
+      }
+    });
+  };
+
+  return (
+    <div className="mt-6">
+      <Label className="mb-2">{t('cart.discountCode')}</Label>
+      <form onSubmit={handleCouponSubmit} className="space-y-2">
+        <div className="flex">
+          <input
+            type="text"
+            className="flex-1 border rounded-l-md p-3"
+            placeholder={t('cart.discountCodePlaceholder')}
+            value={couponCode}
+            onChange={(e) => setCouponCode(e.target.value)}
+            disabled={isPending}
+          />
+          <Button 
+            type="submit" 
+            variant="primary"
+            className="rounded-l-none"
+            disabled={isPending}
+          >
+            {isPending ? 'Loading...' : t('cart.apply')}
+          </Button>
+        </div>
+        
+        {/* Coupon feedback message */}
+        {couponMessage && (
+          <div className={`flex items-center ${couponMessage.isValid ? 'text-green-600' : 'text-red-600'} mt-2`}>
+            {couponMessage.isValid ? 
+              <CheckCircle size={16} className="mr-1" /> : 
+              <AlertCircle size={16} className="mr-1" />
+            }
+            <Text size="sm" as="span" className={couponMessage.isValid ? 'text-green-600' : 'text-red-600'}>
+              {couponMessage.text}
+            </Text>
+          </div>
+        )}
+      </form>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/CartLink.tsx b/components/cart/CartLink.tsx
new file mode 100644
index 0000000..cb3cdf5
--- /dev/null
+++ b/components/cart/CartLink.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { useCart } from 'components/cart/cart-context';
+import { ShoppingCart } from 'lucide-react';
+import Link from 'next/link';
+
+export function CartLink() {
+  const { cart } = useCart();
+  const itemCount = cart?.totalQuantity || 0;
+
+  return (
+    <Link href="/cart" className="group -m-2 flex items-center p-2">
+      <ShoppingCart
+        className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+        aria-hidden="true"
+      />
+      <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
+        {itemCount}
+      </span>
+      <span className="sr-only">items in cart, view cart</span>
+    </Link>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/CartPage.tsx b/components/cart/CartPage.tsx
new file mode 100644
index 0000000..c511642
--- /dev/null
+++ b/components/cart/CartPage.tsx
@@ -0,0 +1,180 @@
+'use client';
+
+import { container } from '@/lib/utils';
+import { useCart } from 'components/cart/cart-context';
+import { useTransition } from 'react';
+import { removeItem, updateItemQuantity } from './actions';
+import { CartDiscountForm } from './CartDiscountForm';
+import { CartSummary } from './CartSummary';
+import { EmptyCartMessage } from './EmptyCartMessage';
+import { useCartProcessing } from './hooks/useCartProcessing';
+import { BoxesSection } from './sections/BoxesSection';
+import { CartHeader } from './sections/CartHeader';
+import { CartLoading } from './sections/CartLoading';
+import { OrderNotes } from './sections/OrderNotes';
+import { ProductsSection } from './sections/ProductsSection';
+
+export default function CartPage() {
+  const { cart, updateCartItem } = useCart();
+  const [isPending, startTransition] = useTransition();
+  const { boxes, standaloneProducts, isGroupingComplete, didInitialProcess } = useCartProcessing(cart);
+
+  if (!cart?.lines.length) {
+    return <EmptyCartMessage />;
+  }
+
+  // Show loading state while processing cart items
+  if (!didInitialProcess || !isGroupingComplete) {
+    return <CartLoading />;
+  }
+
+  const handleUpdateCartItem = (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => {
+    // First update the client-side cart state for immediate feedback
+    updateCartItem(merchandiseId, updateType, itemId);
+    
+    // Update lastBoxState in localStorage if this is a box item
+    try {
+      const boxStateString = localStorage.getItem('lastBoxState');
+      if (boxStateString) {
+        const boxState = JSON.parse(boxStateString);
+        
+        // Check if this item belongs to a box
+        const cartItem = cart.lines.find(item => {
+          if (itemId && item.id) {
+            return item.id === itemId;
+          }
+          return item.merchandise.id === merchandiseId;
+        });
+        
+        if (cartItem) {
+          // Check if it's a box item by looking at attributes
+          const attrs = cartItem.attributes || [];
+          const boxType = attrs.find(attr => attr.key === '_box_type')?.value;
+          const boxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+          
+          if (boxType && boxGroupId) {
+            // Find the corresponding item in the stored state
+            if (boxType === 'item' && boxState.productItems) {
+              if (updateType === 'delete') {
+                // Remove the item from productItems
+                boxState.productItems = boxState.productItems.filter((item: { id: string, variantId: string }) => 
+                  item.id !== cartItem.merchandise.product.id || 
+                  item.variantId !== cartItem.merchandise.id
+                );
+              } else {
+                // Update quantity
+                const productItem = boxState.productItems.find((item: { id: string, variantId: string }) => 
+                  item.id === cartItem.merchandise.product.id &&
+                  item.variantId === cartItem.merchandise.id
+                );
+                
+                if (productItem) {
+                  const newQuantity = updateType === 'plus' 
+                    ? cartItem.quantity + 1 
+                    : Math.max(1, cartItem.quantity - 1);
+                  productItem.quantity = newQuantity;
+                }
+              }
+              
+              // Save updated state back to localStorage
+              localStorage.setItem('lastBoxState', JSON.stringify(boxState));
+            }
+            else if (boxType === 'container' && boxState.boxItems) {
+              if (updateType === 'delete') {
+                // Remove the box
+                boxState.boxItems = boxState.boxItems.filter((item: { id: string }) => 
+                  item.id !== cartItem.merchandise.product.id
+                );
+              } else {
+                // Update quantity
+                const boxItem = boxState.boxItems.find((item: { id: string }) => 
+                  item.id === cartItem.merchandise.product.id
+                );
+                
+                if (boxItem) {
+                  const newQuantity = updateType === 'plus' 
+                    ? cartItem.quantity + 1 
+                    : Math.max(1, cartItem.quantity - 1);
+                  boxItem.quantity = newQuantity;
+                }
+              }
+              
+              // Save updated state back to localStorage
+              localStorage.setItem('lastBoxState', JSON.stringify(boxState));
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error updating box state in localStorage', error);
+    }
+    
+    // Then update the server-side cart
+    startTransition(() => {
+      if (updateType === 'delete') {
+        // Call server action to remove item
+        removeItem({}, merchandiseId, itemId);
+      } else {
+        // Find the specific item to update, using both merchandise ID and item ID if provided
+        let item = cart.lines.find((item: { id?: string, merchandise: { id: string } }) => {
+          if (itemId && item.id) {
+            // If we have item ID, use it for more specific matching
+            return item.id === itemId;
+          }
+          // Fall back to merchandise ID only
+          return item.merchandise.id === merchandiseId;
+        });
+        
+        if (item) {
+          // Calculate new quantity based on the updateType
+          const newQuantity = updateType === 'plus' 
+            ? item.quantity + 1 
+            : Math.max(1, item.quantity - 1);
+          
+          // Call server action to update quantity
+          updateItemQuantity({}, { merchandiseId, quantity: newQuantity, itemId });
+        }
+      }
+    });
+  };
+
+  return (
+    <div className={container}>
+      <div className="pb-20">
+        <div className="flex flex-col lg:flex-row lg:justify-between gap-8">
+          {/* Left Side: Cart Items */}
+          <div className="lg:w-[62%]">
+            <CartHeader totalQuantity={cart.totalQuantity} />
+            
+            {/* Boxes Section */}
+            <BoxesSection 
+              boxes={boxes}
+              onUpdate={handleUpdateCartItem}
+              isPending={isPending}
+            />
+
+            {/* Standalone Products Section */}
+            <ProductsSection 
+              products={standaloneProducts}
+              onUpdate={handleUpdateCartItem}
+              isPending={isPending}
+            />
+
+            {/* Order Notes */}
+            <OrderNotes />
+
+            {/* Discount Form */}
+            <CartDiscountForm />
+          </div>
+
+          {/* Right Side: Order Summary */}
+          <div className="lg:w-[30%]">
+            <div className="mt-6 lg:mt-[72px]">
+              <CartSummary cart={cart} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/CartProductItem.tsx b/components/cart/CartProductItem.tsx
new file mode 100644
index 0000000..5a6709b
--- /dev/null
+++ b/components/cart/CartProductItem.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import { colorHexMap } from '@/components/products/utils/colorUtils';
+import { Button } from '@/components/ui/Button';
+import { Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { useCart } from 'components/cart/cart-context';
+import Price from 'components/price';
+import { CartItem } from 'lib/shopify/types';
+import { Trash2 } from 'lucide-react';
+import Image from 'next/image';
+import { QuantityControls } from './QuantityControls';
+
+interface CartProductItemProps {
+  item: CartItem;
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+  isInBox?: boolean;
+  boxGroupId?: string;
+}
+
+export function CartProductItem({ item, onUpdate, isPending, isInBox = false, boxGroupId }: CartProductItemProps) {
+  const { t } = useTranslation();
+  const { cart } = useCart();
+  
+  // Check if this item has a color option
+  const colorOption = item.merchandise.selectedOptions.find(option => 
+    option.name.toLowerCase() === 'color' || 
+    option.name.toLowerCase() === 'colour' ||
+    option.name.toLowerCase() === 'boja'
+  );
+  
+  // Get the color hex code from the color name if it exists
+  const colorHex = colorOption 
+    ? colorHexMap[colorOption.value.toLowerCase()] || colorOption.value
+    : null;
+
+  // Get the unique ID of this cart item
+  const itemId = item.id;
+  
+  // Handle quantity changes
+  const handleIncrease = () => onUpdate(item.merchandise.id, 'plus', itemId);
+  const handleDecrease = () => onUpdate(item.merchandise.id, 'minus', itemId);
+  
+  // Enhanced delete handler
+  const handleDelete = () => {
+    // Basic delete operation for this item
+    onUpdate(item.merchandise.id, 'delete', itemId);
+    
+    // Special handling for box items
+    if (isInBox && boxGroupId && cart) {
+      // Find all items in this box group
+      const boxItems = cart.lines.filter(line => {
+        const attrs = line.attributes || [];
+        const itemBoxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+        const itemBoxType = attrs.find(attr => attr.key === '_box_type')?.value;
+        return itemBoxGroupId === boxGroupId && itemBoxType === 'item' && line.id !== itemId;
+      });
+      
+      // If this is the last item (only 1 left - the one we're deleting), also delete the box container
+      if (boxItems.length === 0) {
+        // Find the box container
+        const boxContainer = cart.lines.find(line => {
+          const attrs = line.attributes || [];
+          const containerBoxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+          const containerBoxType = attrs.find(attr => attr.key === '_box_type')?.value;
+          return containerBoxGroupId === boxGroupId && containerBoxType === 'container';
+        });
+        
+        // Delete the box container too
+        if (boxContainer && boxContainer.id) {
+          onUpdate(boxContainer.merchandise.id, 'delete', boxContainer.id);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className={`flex flex-wrap md:flex-nowrap items-start ${!isInBox ? 'border-b pb-6' : 'pb-4'}`}>
+      {/* Product Image */}
+      <div className="relative h-20 w-20 flex-shrink-0 overflow-hidden">
+        <Image
+          src={item.merchandise.product.featuredImage?.url || ''}
+          alt={item.merchandise.product.title}
+          fill
+          className="object-cover"
+        />
+      </div>
+      
+      {/* Product Details */}
+      <div className="flex-1 pl-4 min-w-0">
+        <div className="flex flex-col">
+          <Text weight={isInBox ? 'regular' : 'semibold'} className="pr-2 break-words">
+            {item.merchandise.product.title}
+          </Text>
+          
+          {/* Show color indicator if color is available */}
+          {colorHex && (
+            <div className="flex items-center mt-1">
+              <div 
+                className="w-4 h-4 rounded-full" 
+                style={{ backgroundColor: colorHex }}
+                aria-label={`${colorOption?.value || 'Unknown'}`}
+              />
+              <Text size="xs" color="muted" as="span" className="ml-2">
+                {colorOption?.value || ''}
+              </Text>
+            </div>
+          )}
+          
+          <Price
+            amount={item.cost.totalAmount.amount}
+            currencyCode={item.cost.totalAmount.currencyCode}
+            className="text-sm mt-1"
+          />
+        </div>
+      </div>
+
+      {/* Quantity Controls */}
+      <div className="flex items-center ml-auto mt-2 md:mt-0">
+        <div className="mr-4">
+          <QuantityControls
+            quantity={item.quantity}
+            onIncrease={handleIncrease}
+            onDecrease={handleDecrease}
+            isDisabled={isPending}
+            minQuantity={1}
+          />
+        </div>
+        <Button
+          onClick={handleDelete}
+          variant="default"
+          className="p-0 h-auto border-0 bg-transparent hover:bg-transparent text-gray-500 hover:text-red-500"
+          disabled={isPending}
+          aria-label={t('cart.remove')}
+        >
+          <Trash2 size={20} />
+        </Button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/CartSummary.tsx b/components/cart/CartSummary.tsx
new file mode 100644
index 0000000..24f994f
--- /dev/null
+++ b/components/cart/CartSummary.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Heading, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import Price from 'components/price';
+import { Cart } from 'lib/shopify/types';
+import { useState } from 'react';
+import { redirectToCheckout } from './actions';
+
+interface CartSummaryProps {
+  cart: Cart;
+}
+
+export function CartSummary({ cart }: CartSummaryProps) {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCheckout = async () => {
+    setIsLoading(true);
+    await redirectToCheckout();
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="border rounded-md p-6 bg-white sticky top-20">
+      <Heading level={4} className="mb-6">{t('cart.orderSummary')}</Heading>
+      
+      <div className="space-y-4 mb-6">
+        <div className="flex justify-between">
+          <Text weight="semibold">{t('cart.subtotal')}</Text>
+          <Price
+            amount={cart.cost.subtotalAmount.amount}
+            currencyCode={cart.cost.subtotalAmount.currencyCode}
+          />
+        </div>
+        
+        <div className="flex justify-between">
+          <Text weight="semibold">{t('cart.shipping')}</Text>
+          <Text size="sm" color="muted" className="text-right">{t('cart.calculated')}</Text>
+        </div>
+        
+        <div className="flex justify-between">
+          <Text weight="semibold">{t('cart.total')}</Text>
+          <Price
+            amount={cart.cost.totalAmount.amount}
+            currencyCode={cart.cost.totalAmount.currencyCode}
+            className="text-xl font-bold"
+          />
+        </div>
+      </div>
+      
+      <Button
+        onClick={handleCheckout}
+        disabled={isLoading}
+        variant="primary"
+        fullWidth
+        size="lg"
+      >
+        {isLoading ? "Loading..." : t('cart.continueToCheckout')}
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/EmptyCartMessage.tsx b/components/cart/EmptyCartMessage.tsx
new file mode 100644
index 0000000..db42d44
--- /dev/null
+++ b/components/cart/EmptyCartMessage.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Section } from '@/components/ui/Section';
+import { Heading, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+
+export function EmptyCartMessage() {
+  const { t } = useTranslation();
+  
+  return (
+    <Section>
+      <div className="flex flex-col items-center justify-center text-center p-8 max-w-md mx-auto border rounded-lg bg-gray-50">
+        <Heading level={3} className="mb-3">{t('cart.emptyCart')}</Heading>
+        <Text color="muted" className="mb-6">Add some items to your cart to see them here.</Text>
+        <Button 
+          href="/products" 
+          variant="primary"
+        >
+          {t('cart.startShopping')}
+        </Button>
+      </div>
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/QuantityControls.tsx b/components/cart/QuantityControls.tsx
new file mode 100644
index 0000000..6ea9c32
--- /dev/null
+++ b/components/cart/QuantityControls.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Minus, Plus } from 'lucide-react';
+
+interface QuantityControlsProps {
+  quantity: number;
+  onIncrease: () => void;
+  onDecrease: () => void;
+  isDisabled?: boolean;
+  minQuantity?: number;
+}
+
+export function QuantityControls({
+  quantity,
+  onIncrease,
+  onDecrease,
+  isDisabled = false,
+  minQuantity = 1
+}: QuantityControlsProps) {
+  return (
+    <div className="flex border border-gray-300 rounded-md">
+      <Button
+        onClick={onDecrease}
+        variant="default"
+        className="px-3 py-1 border-0 rounded-none"
+        disabled={isDisabled || quantity <= minQuantity}
+        aria-label="Decrease quantity"
+        size="sm"
+      >
+        <Minus size={16} />
+      </Button>
+      <input
+        type="text"
+        value={quantity}
+        readOnly
+        className="w-10 text-center border-x border-gray-300"
+      />
+      <Button
+        onClick={onIncrease}
+        variant="default"
+        className="px-3 py-1 border-0 rounded-none"
+        disabled={isDisabled}
+        aria-label="Increase quantity"
+        size="sm"
+      >
+        <Plus size={16} />
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/actions.ts b/components/cart/actions.ts
new file mode 100644
index 0000000..54679d1
--- /dev/null
+++ b/components/cart/actions.ts
@@ -0,0 +1,251 @@
+'use server';
+
+import { TAGS } from 'lib/constants';
+import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
+import { revalidateTag } from 'next/cache';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function addItem(
+  prevState: any, 
+  selectedVariantId: string | undefined,
+  quantity: number = 1,
+  attributes?: { key: string; value: string }[]
+) {
+  const cookieStore = await cookies();
+  let cartId = cookieStore.get('cartId')?.value;
+
+  if (!selectedVariantId) {
+    return 'Error adding item to cart';
+  }
+
+  try {
+    if (!cartId) {
+      const cart = await createCart();
+      cartId = cart.id!;
+      cookieStore.set('cartId', cartId);
+    }
+
+    await addToCart(cartId, [{ 
+      merchandiseId: selectedVariantId, 
+      quantity,
+      attributes
+    }]);
+    revalidateTag(TAGS.cart);
+  } catch (e) {
+    return 'Error adding item to cart';
+  }
+}
+
+export async function removeItem(prevState: any, merchandiseId: string, itemId?: string) {
+  const cookieStore = await cookies();
+  let cartId = cookieStore.get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
+  try {
+    const cart = await getCart(cartId);
+
+    if (!cart) {
+      return 'Error fetching cart';
+    }
+
+    // Find specific line item - first by itemId if provided, otherwise by merchandiseId
+    let lineItem;
+    
+    if (itemId) {
+      // If we have a specific item ID (e.g., for box items), use that first
+      lineItem = cart.lines.find((line) => line.id === itemId);
+    }
+    
+    // If no item ID was provided or no match was found, fall back to merchandise ID
+    if (!lineItem) {
+      lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);
+    }
+
+    if (lineItem && lineItem.id) {
+      // Check if this is a box item being removed
+      const lineAttributes = lineItem.attributes || [];
+      const boxType = lineAttributes.find(attr => attr.key === '_box_type')?.value;
+      const boxGroupId = lineAttributes.find(attr => attr.key === '_box_group_id')?.value;
+      
+      // If this is a box item (not container), check if it's the last one before removing
+      if (boxType === 'item' && boxGroupId) {
+        // Find all items in this box (excluding the current one we're removing)
+        const remainingBoxItems = cart.lines.filter(line => {
+          const attrs = line.attributes || [];
+          const itemBoxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+          const itemBoxType = attrs.find(attr => attr.key === '_box_type')?.value;
+          
+          return itemBoxGroupId === boxGroupId && 
+                 line.id !== lineItem.id && 
+                 itemBoxType === 'item';
+        });
+        
+        // If this is the last item, find the box container and remove both together
+        if (remainingBoxItems.length === 0) {
+          const boxContainer = cart.lines.find(line => {
+            const attrs = line.attributes || [];
+            const containerBoxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+            const containerBoxType = attrs.find(attr => attr.key === '_box_type')?.value;
+            
+            return containerBoxGroupId === boxGroupId && containerBoxType === 'container';
+          });
+          
+          // If box container exists, remove both item and container in a single operation
+          if (boxContainer && boxContainer.id) {
+            // Batched removal of both the item and box container
+            await removeFromCart(cartId, [lineItem.id, boxContainer.id]);
+          } else {
+            // Just remove the item if no container found
+            await removeFromCart(cartId, [lineItem.id]);
+          }
+        } else {
+          // Not the last item, just remove this one
+          await removeFromCart(cartId, [lineItem.id]);
+        }
+      } else {
+        // Regular item or box container, just remove it
+        await removeFromCart(cartId, [lineItem.id]);
+      }
+      
+      revalidateTag(TAGS.cart);
+    } else {
+      return 'Item not found in cart';
+    }
+  } catch (e) {
+    return 'Error removing item from cart';
+  }
+}
+
+export async function updateItemQuantity(
+  prevState: any,
+  payload: {
+    merchandiseId: string;
+    quantity: number;
+    itemId?: string;
+  }
+) {
+  const cookieStore = await cookies();
+  let cartId = cookieStore.get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
+  const { merchandiseId, quantity, itemId } = payload;
+
+  try {
+    const cart = await getCart(cartId);
+
+    if (!cart) {
+      return 'Error fetching cart';
+    }
+
+    // Find the specific line item to update
+    let lineItem;
+    
+    if (itemId) {
+      // First try to find by specific item ID (for items in multiple boxes)
+      lineItem = cart.lines.find(line => line.id === itemId);
+    }
+    
+    // Fall back to finding by merchandise ID if item ID didn't work
+    if (!lineItem) {
+      lineItem = cart.lines.find(line => line.merchandise.id === merchandiseId);
+    }
+
+    if (lineItem && lineItem.id) {
+      if (quantity === 0) {
+        await removeFromCart(cartId, [lineItem.id]);
+      } else {
+        await updateCart(cartId, [
+          {
+            id: lineItem.id,
+            merchandiseId,
+            quantity
+          }
+        ]);
+      }
+    } else if (quantity > 0) {
+      // If the item doesn't exist in the cart and quantity > 0, add it
+      await addToCart(cartId, [{ merchandiseId, quantity }]);
+    }
+
+    revalidateTag(TAGS.cart);
+  } catch (e) {
+    console.error(e);
+    return 'Error updating item quantity';
+  }
+}
+
+export async function redirectToCheckout() {
+  const cookieStore = await cookies();
+  let cartId = cookieStore.get('cartId')?.value;
+  
+  if (!cartId) {
+    return 'No cart found';
+  }
+
+  let cart = await getCart(cartId);
+  
+  if (!cart) {
+    return 'Error fetching cart';
+  }
+
+  if (!cart.checkoutUrl) {
+    return 'No checkout URL available';
+  }
+
+  redirect(cart.checkoutUrl);
+}
+
+export async function createCartAndSetCookie() {
+  const cookieStore = await cookies();
+  let cart = await createCart();
+  cookieStore.set('cartId', cart.id!);
+}
+
+export async function validateDiscountCode(prevState: any, discountCode: string) {
+  if (!discountCode || discountCode.trim() === '') {
+    return { 
+      isValid: false, 
+      message: 'Please enter a discount code' 
+    };
+  }
+
+  const cookieStore = await cookies();
+  let cartId = cookieStore.get('cartId')?.value;
+
+  if (!cartId) {
+    return { 
+      isValid: false, 
+      message: 'No cart found. Please add items to your cart first.' 
+    };
+  }
+
+  try {
+    // TODO: Implement discount code validation
+    const isValid = Math.random() > 0.5; 
+    
+    if (isValid) {
+      return { 
+        isValid: true, 
+        message: 'Discount code applied successfully!' 
+      };
+    } else {
+      return { 
+        isValid: false, 
+        message: 'Invalid discount code. Please try again.' 
+      };
+    }
+  } catch (e) {
+    console.error('Error validating discount code:', e);
+    return { 
+      isValid: false, 
+      message: 'An error occurred while validating the discount code.' 
+    };
+  }
+}
diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx
new file mode 100644
index 0000000..d3fbc94
--- /dev/null
+++ b/components/cart/add-to-cart.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { addItem } from 'components/cart/actions';
+import { useProduct } from 'components/product/product-context';
+import { Product, ProductVariant } from 'lib/shopify/types';
+import { useState, useTransition } from 'react';
+import { useCart } from './cart-context';
+
+function SubmitButton({
+  availableForSale,
+  selectedVariantId,
+  isLoading
+}: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+  isLoading: boolean;
+}) {
+
+  if (!availableForSale) {
+    return (
+      <Button
+        disabled
+        variant="primary"
+        size="lg"
+        fullWidth
+      >
+        Out Of Stock
+      </Button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <Button
+        aria-label="Please select an option"
+        disabled
+        variant="primary"
+        size="lg"
+        fullWidth
+      >
+        Please Select Options
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      aria-label="Add to cart"
+      disabled={isLoading}
+      variant="primary"
+      size="lg"
+      fullWidth
+    >
+      {isLoading ? 'Adding...' : 'Add to Cart'}
+    </Button>
+  );
+}
+
+export function AddToCart({ product, quantity = 1 }: { product: Product; quantity?: number }) {
+  const { variants, availableForSale } = product;
+  const { addCartItem } = useCart();
+  const { state } = useProduct();
+  const [isPending, startTransition] = useTransition();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every((option) => option.value === state[option.name.toLowerCase()])
+  );
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const selectedVariantId = variant?.id || defaultVariantId;
+  const finalVariant = variants.find((variant) => variant.id === selectedVariantId)!;
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    
+    // Don't proceed if the form is already being processed
+    if (isLoading) return;
+    
+    // Don't proceed if there's no variant ID
+    if (!selectedVariantId) return;
+    
+    // Set loading state
+    setIsLoading(true);
+    
+    // Use the quantity prop passed to the component
+    // No need to get it from formData since there's no quantity input in the form
+    
+    const finalVariant = variants.find((v) => v.id === selectedVariantId);
+    if (!finalVariant) return;
+    
+    // Call the server action to add the item to the cart
+    // @ts-ignore - We know our server action accepts quantity
+    addItem(null, selectedVariantId, quantity)
+      .then(() => {
+        // Add to context cart for immediate UI feedback
+        addCartItem(finalVariant, product, quantity);
+      });
+    
+    // Add a small delay before removing loading state for better UX
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      <SubmitButton 
+        availableForSale={availableForSale} 
+        selectedVariantId={selectedVariantId}
+        isLoading={isLoading} 
+      />
+    </form>
+  );
+}
diff --git a/components/cart/cart-context.tsx b/components/cart/cart-context.tsx
new file mode 100644
index 0000000..6a4efd1
--- /dev/null
+++ b/components/cart/cart-context.tsx
@@ -0,0 +1,217 @@
+'use client';
+
+import type { Cart, CartItem, Product, ProductVariant } from 'lib/shopify/types';
+import React, { createContext, use, useContext, useEffect, useMemo, useOptimistic, useTransition } from 'react';
+
+type UpdateType = 'plus' | 'minus' | 'delete';
+
+type CartAction =
+  | { type: 'UPDATE_ITEM'; payload: { merchandiseId: string; updateType: UpdateType; itemId?: string } }
+  | { type: 'ADD_ITEM'; payload: { variant: ProductVariant; product: Product, quantity: number } };
+
+type CartContextType = {
+  cart: Cart | undefined;
+  updateCartItem: (merchandiseId: string, updateType: UpdateType, itemId?: string) => void;
+  addCartItem: (variant: ProductVariant, product: Product, quantity?: number) => void;
+};
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+function calculateItemCost(quantity: number, price: string): string {
+  return (Number(price) * quantity).toString();
+}
+
+function updateCartItem(item: CartItem, updateType: UpdateType): CartItem | null {
+  if (updateType === 'delete') return null;
+
+  const newQuantity = updateType === 'plus' ? item.quantity + 1 : item.quantity - 1;
+  if (newQuantity === 0) return null;
+
+  const singleItemAmount = Number(item.cost.totalAmount.amount) / item.quantity;
+  const newTotalAmount = calculateItemCost(newQuantity, singleItemAmount.toString());
+
+  return {
+    ...item,
+    quantity: newQuantity,
+    cost: {
+      ...item.cost,
+      totalAmount: {
+        ...item.cost.totalAmount,
+        amount: newTotalAmount
+      }
+    }
+  };
+}
+
+function createOrUpdateCartItem(
+  existingItem: CartItem | undefined,
+  variant: ProductVariant,
+  product: Product,
+  quantity: number = 1
+): CartItem {
+  const newQuantity = existingItem ? existingItem.quantity + quantity : quantity;
+  const totalAmount = calculateItemCost(newQuantity, variant.price.amount);
+
+  return {
+    id: existingItem?.id,
+    quantity: newQuantity,
+    attributes: existingItem?.attributes || [],
+    cost: {
+      totalAmount: {
+        amount: totalAmount,
+        currencyCode: variant.price.currencyCode
+      }
+    },
+    merchandise: {
+      id: variant.id,
+      title: variant.title,
+      selectedOptions: variant.selectedOptions,
+      product: {
+        id: product.id,
+        handle: product.handle,
+        title: product.title,
+        featuredImage: product.featuredImage
+      }
+    }
+  };
+}
+
+function updateCartTotals(lines: CartItem[]): Pick<Cart, 'totalQuantity' | 'cost'> {
+  const totalQuantity = lines.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = lines.reduce((sum, item) => sum + Number(item.cost.totalAmount.amount), 0);
+  const currencyCode = lines[0]?.cost.totalAmount.currencyCode ?? 'USD';
+
+  return {
+    totalQuantity,
+    cost: {
+      subtotalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalTaxAmount: { amount: '0', currencyCode }
+    }
+  };
+}
+
+function createEmptyCart(): Cart {
+  return {
+    id: undefined,
+    checkoutUrl: '',
+    totalQuantity: 0,
+    lines: [],
+    cost: {
+      subtotalAmount: { amount: '0', currencyCode: 'USD' },
+      totalAmount: { amount: '0', currencyCode: 'USD' },
+      totalTaxAmount: { amount: '0', currencyCode: 'USD' }
+    }
+  };
+}
+
+function cartReducer(state: Cart | undefined, action: CartAction): Cart {
+  const currentCart = state || createEmptyCart();
+
+  switch (action.type) {
+    case 'UPDATE_ITEM': {
+      const { merchandiseId, updateType, itemId } = action.payload;
+      const updatedLines = currentCart.lines
+        .map((item) => {
+          // If itemId is provided, only update the specific item
+          if (itemId && item.id !== itemId) {
+            return item;
+          }
+          // Otherwise, update by merchandise ID
+          if (!itemId && item.merchandise.id !== merchandiseId) {
+            return item;
+          }
+          // Update the matching item
+          return updateCartItem(item, updateType);
+        })
+        .filter(Boolean) as CartItem[];
+
+      if (updatedLines.length === 0) {
+        return {
+          ...currentCart,
+          lines: [],
+          totalQuantity: 0,
+          cost: {
+            ...currentCart.cost,
+            totalAmount: { ...currentCart.cost.totalAmount, amount: '0' }
+          }
+        };
+      }
+
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
+    }
+    case 'ADD_ITEM': {
+      const { variant, product, quantity = 1 } = action.payload;
+      const existingItem = currentCart.lines.find((item) => item.merchandise.id === variant.id);
+      const updatedItem = createOrUpdateCartItem(existingItem, variant, product, quantity);
+
+      const updatedLines = existingItem
+        ? currentCart.lines.map((item) => (item.merchandise.id === variant.id ? updatedItem : item))
+        : [...currentCart.lines, updatedItem];
+
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
+    }
+    default:
+      return currentCart;
+  }
+}
+
+export function CartProvider({
+  children,
+  cartPromise
+}: {
+  children: React.ReactNode;
+  cartPromise: Promise<Cart | undefined>;
+}) {
+  const initialCart = use(cartPromise);
+  const [optimisticCart, updateOptimisticCart] = useOptimistic(initialCart, cartReducer);
+  const [isPending, startTransition] = useTransition();
+
+  // More detailed debugging for cart loading
+  useEffect(() => {
+    if (initialCart?.lines?.length) {
+      // Detailed inspection of the cart items and their attributes
+      const itemsWithAttributes = initialCart.lines.filter(item => 
+        item.attributes && item.attributes.length > 0
+      );
+      
+      // Log each item with its attributes for debugging
+      initialCart.lines.forEach((item, index) => {
+        const attrs = item.attributes || [];
+        const boxType = attrs.find(a => a.key === 'box_type')?.value;
+        const boxGroupId = attrs.find(a => a.key === 'box_group_id')?.value;
+      });
+    }
+  }, [initialCart]);
+
+  const updateCartItem = (merchandiseId: string, updateType: UpdateType, itemId?: string) => {
+    startTransition(() => {
+      updateOptimisticCart({ type: 'UPDATE_ITEM', payload: { merchandiseId, updateType, itemId } });
+    });
+  };
+
+  const addCartItem = (variant: ProductVariant, product: Product, quantity: number = 1) => {
+    startTransition(() => {
+      updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product, quantity } });
+    });
+  };
+
+  const value = useMemo(
+    () => ({
+      cart: optimisticCart,
+      updateCartItem,
+      addCartItem
+    }),
+    [optimisticCart]
+  );
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
+}
diff --git a/components/cart/hooks/useCartProcessing.ts b/components/cart/hooks/useCartProcessing.ts
new file mode 100644
index 0000000..94f3436
--- /dev/null
+++ b/components/cart/hooks/useCartProcessing.ts
@@ -0,0 +1,100 @@
+'use client';
+
+import { Cart } from 'lib/shopify/types';
+import { useEffect, useState } from 'react';
+
+export function useCartProcessing(cart: Cart | undefined) {
+  const [boxGroups, setBoxGroups] = useState(new Map<string, { box: any; products: any[] }>());
+  const [standaloneProducts, setStandaloneProducts] = useState<any[]>([]);
+  const [isGroupingComplete, setIsGroupingComplete] = useState(false);
+  const [didInitialProcess, setDidInitialProcess] = useState(false);
+
+  // First-time cart load processing with delay
+  useEffect(() => {
+    if (!cart?.lines?.length) {
+      setIsGroupingComplete(true);
+      return;
+    }
+    
+    // Use a small timeout to ensure cart data is fully loaded
+    const timeoutId = setTimeout(() => {
+      processCartItems();
+    }, 100); // 100ms delay
+    
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  // Process cart items whenever the cart changes after initial load
+  useEffect(() => {
+    if (!didInitialProcess && cart?.lines?.length) {
+      // Skip first update - handled by the first effect
+      return;
+    }
+    
+    if (!cart?.lines?.length) {
+      setIsGroupingComplete(true);
+      return;
+    }
+    
+    processCartItems();
+  }, [cart, didInitialProcess]);
+  
+  // Process cart items function
+  const processCartItems = () => {
+    if (!cart) return;
+    
+    // Set grouping as incomplete at the start
+    setIsGroupingComplete(false);
+    
+    const newBoxGroups = new Map<string, { box: any; products: any[] }>();
+    const newStandaloneProducts: any[] = [];
+
+    // First, sort all items into boxes or standalone products
+    cart.lines.forEach(item => {
+      // Skip items without attributes (avoid runtime errors)
+      if (!item.attributes || item.attributes.length === 0) {
+        newStandaloneProducts.push(item);
+        return;
+      }
+      
+      const boxType = item.attributes.find(attr => attr.key === '_box_type')?.value;
+      const boxGroupId = item.attributes.find(attr => attr.key === '_box_group_id')?.value;
+
+      if (boxType === 'container' && boxGroupId) {
+        // This is a box container
+        if (!newBoxGroups.has(boxGroupId)) {
+          newBoxGroups.set(boxGroupId, { box: item, products: [] });
+        } else {
+          newBoxGroups.get(boxGroupId)!.box = item;
+        }
+      } else if (boxType === 'item' && boxGroupId) {
+        // This is an item that belongs in a box
+        if (!newBoxGroups.has(boxGroupId)) {
+          newBoxGroups.set(boxGroupId, { box: null, products: [item] });
+        } else {
+          newBoxGroups.get(boxGroupId)!.products.push(item);
+        }
+      } else {
+        // This is a standalone product
+        newStandaloneProducts.push(item);
+      }
+    });
+    
+    setBoxGroups(newBoxGroups);
+    setStandaloneProducts(newStandaloneProducts);
+    setDidInitialProcess(true);
+    
+    // Mark grouping as complete
+    setIsGroupingComplete(true);
+  };
+
+  // Get boxes array from the map for rendering
+  const boxes = Array.from(boxGroups.values()).filter(group => group.box);
+
+  return {
+    boxes,
+    standaloneProducts,
+    isGroupingComplete,
+    didInitialProcess
+  };
+} 
\ No newline at end of file
diff --git a/components/cart/processCartItems.tsx b/components/cart/processCartItems.tsx
new file mode 100644
index 0000000..269f444
--- /dev/null
+++ b/components/cart/processCartItems.tsx
@@ -0,0 +1,22 @@
+// Function to get a unique identifier for a cart item
+export function getUniqueItemKey(item: any, boxGroupId?: string, index?: number): string {
+  // Start with the merchandise id
+  let key = item.merchandise.id;
+  
+  // Add the item's own id if available
+  if (item.id) {
+    key = `${key}-${item.id}`;
+  }
+  
+  // Add box group id if it's part of a box
+  if (boxGroupId) {
+    key = `${boxGroupId}-${key}`;
+  }
+  
+  // Add index as fallback to ensure uniqueness
+  if (index !== undefined) {
+    key = `${key}-${index}`;
+  }
+  
+  return key;
+} 
\ No newline at end of file
diff --git a/components/cart/sections/BoxesSection.tsx b/components/cart/sections/BoxesSection.tsx
new file mode 100644
index 0000000..7f34656
--- /dev/null
+++ b/components/cart/sections/BoxesSection.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { CartItem } from 'lib/shopify/types';
+import { CartBoxItem } from '../CartBoxItem';
+
+interface BoxesSectionProps {
+  boxes: Array<{ box: CartItem; products: CartItem[] }>;
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+}
+
+export function BoxesSection({ boxes, onUpdate, isPending }: BoxesSectionProps) {
+  const { t } = useTranslation();
+  
+  if (boxes.length === 0) return null;
+  
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-medium mb-4">{t('cart.boxes')}</h2>
+      <div className="space-y-4">
+        {boxes.map((boxGroup) => (
+          <CartBoxItem
+            key={boxGroup.box.id}
+            boxItem={boxGroup.box}
+            boxProducts={boxGroup.products}
+            onUpdate={onUpdate}
+            isPending={isPending}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/sections/CartHeader.tsx b/components/cart/sections/CartHeader.tsx
new file mode 100644
index 0000000..d66637c
--- /dev/null
+++ b/components/cart/sections/CartHeader.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Heading, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+
+interface CartHeaderProps {
+  totalQuantity: number;
+}
+
+export function CartHeader({ totalQuantity }: CartHeaderProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="my-6 flex items-center justify-between">
+      <Heading level={2}>{t('cart.title')}</Heading>
+      <div className="bg-gray-100 rounded-md px-4 py-2">
+        <Text>{t('cart.itemCount').replace('{count}', totalQuantity.toString())}</Text>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/sections/CartLoading.tsx b/components/cart/sections/CartLoading.tsx
new file mode 100644
index 0000000..0937eb5
--- /dev/null
+++ b/components/cart/sections/CartLoading.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { container } from '@/lib/utils';
+
+export function CartLoading() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className={container}>
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-pulse text-center">
+          <p className="text-lg">{t('cart.loading')}</p>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/sections/OrderNotes.tsx b/components/cart/sections/OrderNotes.tsx
new file mode 100644
index 0000000..03c64e3
--- /dev/null
+++ b/components/cart/sections/OrderNotes.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { Label } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+
+export function OrderNotes() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="mt-8">
+      <Label className="mb-2">{t('cart.notes')}</Label>
+      <textarea
+        className="w-full border rounded-md p-3 min-h-[100px]"
+        placeholder={t('cart.notesPlaceholder')}
+      />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cart/sections/ProductsSection.tsx b/components/cart/sections/ProductsSection.tsx
new file mode 100644
index 0000000..e4b811f
--- /dev/null
+++ b/components/cart/sections/ProductsSection.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { CartItem } from 'lib/shopify/types';
+import { CartProductItem } from '../CartProductItem';
+import { getUniqueItemKey } from '../processCartItems';
+
+interface ProductsSectionProps {
+  products: CartItem[];
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+}
+
+export function ProductsSection({ products, onUpdate, isPending }: ProductsSectionProps) {
+  const { t } = useTranslation();
+  
+  if (products.length === 0) return null;
+  
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-medium mb-4">{t('cart.products')}</h2>
+      <div className="space-y-6">
+        {products.map((item, index) => (
+          <CartProductItem
+            key={getUniqueItemKey(item, 'standalone', index)}
+            item={item}
+            onUpdate={onUpdate}
+            isPending={isPending}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cookies/CookieBanner.tsx b/components/cookies/CookieBanner.tsx
new file mode 100644
index 0000000..dde377e
--- /dev/null
+++ b/components/cookies/CookieBanner.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { useCookieConsent } from './CookieContext';
+
+export function CookieBanner() {
+  const { showBanner, acceptAll, openModal } = useCookieConsent();
+  
+  if (!showBanner) return null;
+  
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-30 bg-white shadow-lg border-t border-gray-200 px-4 py-3">
+      <div className="container mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+        <p className="text-sm text-gray-700 text-center sm:text-left">
+          Ova web stranica koristi kolačiće za poboljšanje korisničkog iskustva.
+          <button 
+            onClick={openModal}
+            className="underline ml-1 hover:text-black"
+          >
+            Više informacija
+          </button>
+        </p>
+        
+        <div className="flex flex-row gap-3">
+          <Button 
+            variant="outline" 
+            size="sm"
+            className="px-3 whitespace-nowrap" 
+            onClick={openModal}
+          >
+            Prilagodi
+          </Button>
+          <Button 
+            variant="primary" 
+            size="sm"
+            className="whitespace-nowrap"
+            onClick={acceptAll}
+          >
+            Prihvati sve
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cookies/CookieCategoryCard.tsx b/components/cookies/CookieCategoryCard.tsx
new file mode 100644
index 0000000..a69f645
--- /dev/null
+++ b/components/cookies/CookieCategoryCard.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { Heading, Text } from '@/components/ui/Typography';
+import { ToggleSwitch } from './ToggleSwitch';
+
+interface CookieCategoryCardProps {
+  title: string;
+  description: string;
+  enabled: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
+export function CookieCategoryCard({ 
+  title, 
+  description, 
+  enabled, 
+  onChange, 
+  disabled = false 
+}: CookieCategoryCardProps) {
+  return (
+    <div className="border rounded-lg p-4">
+      <div className="flex items-center justify-between mb-2">
+        <Heading level={4}>{title}</Heading>
+        <ToggleSwitch 
+          enabled={enabled} 
+          onChange={onChange} 
+          disabled={disabled} 
+        />
+      </div>
+      <Text size="sm" className="text-gray-600">
+        {description}
+      </Text>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/cookies/CookieContext.tsx b/components/cookies/CookieContext.tsx
new file mode 100644
index 0000000..27032ef
--- /dev/null
+++ b/components/cookies/CookieContext.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import Cookies from 'js-cookie';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+// Define cookie categories and their default state
+export const COOKIE_CATEGORIES = {
+  NECESSARY: 'necessary',
+  ANALYTICS: 'analytics',
+  MARKETING: 'marketing',
+  PREFERENCES: 'preferences'
+} as const;
+
+export type CookieCategory = typeof COOKIE_CATEGORIES[keyof typeof COOKIE_CATEGORIES];
+
+export interface CookiePreferences {
+  necessary: boolean; // Always true, can't be disabled
+  analytics: boolean;
+  marketing: boolean;
+  preferences: boolean;
+}
+
+export const DEFAULT_PREFERENCES: CookiePreferences = {
+  necessary: true, // Always true
+  analytics: false,
+  marketing: false,
+  preferences: false
+};
+
+const CONSENT_COOKIE_NAME = 'cookie-consent';
+const COOKIE_EXPIRY_DAYS = 365;
+
+interface CookieContextType {
+  preferences: CookiePreferences;
+  hasConsent: boolean;
+  showBanner: boolean;
+  showModal: boolean;
+  acceptAll: () => void;
+  savePreferences: (newPrefs: CookiePreferences) => void;
+  openModal: () => void;
+  closeModal: () => void;
+  resetConsent: () => void;
+}
+
+const CookieContext = createContext<CookieContextType | undefined>(undefined);
+
+export function CookieProvider({ children }: { children: ReactNode }) {
+  const [preferences, setPreferences] = useState<CookiePreferences>(DEFAULT_PREFERENCES);
+  const [hasConsent, setHasConsent] = useState<boolean>(false);
+  const [showBanner, setShowBanner] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(false);
+  
+  // Load stored consent preferences on mount (client-side only)
+  useEffect(() => {
+    const storedConsent = Cookies.get(CONSENT_COOKIE_NAME);
+    
+    if (storedConsent) {
+      try {
+        const parsedPreferences = JSON.parse(storedConsent);
+        setPreferences({
+          ...DEFAULT_PREFERENCES,
+          ...parsedPreferences,
+          // Ensure necessary cookies are always enabled
+          necessary: true
+        });
+        setHasConsent(true);
+        setShowBanner(false);
+      } catch (error) {
+        console.error('Failed to parse cookie consent', error);
+        setShowBanner(true);
+      }
+    } else {
+      // No stored consent, show the banner
+      setShowBanner(true);
+    }
+  }, []);
+  
+  const savePreferences = (newPrefs: CookiePreferences) => {
+    const updatedPrefs = {
+      ...newPrefs,
+      necessary: true
+    };
+    
+    // Update state
+    setPreferences(updatedPrefs);
+    setHasConsent(true);
+    setShowBanner(false);
+    setShowModal(false);
+    
+    // Save to cookie
+    Cookies.set(CONSENT_COOKIE_NAME, JSON.stringify(updatedPrefs), {
+      expires: COOKIE_EXPIRY_DAYS,
+      path: '/',
+      sameSite: 'strict'
+    });
+    
+    applyPreferences(updatedPrefs);
+  };
+  
+  // Accept all cookies
+  const acceptAll = () => {
+    const allAccepted = {
+      necessary: true,
+      analytics: true,
+      marketing: true,
+      preferences: true
+    };
+    
+    savePreferences(allAccepted);
+  };
+  
+  // Reset consent (for testing)
+  const resetConsent = () => {
+    Cookies.remove(CONSENT_COOKIE_NAME);
+    setPreferences(DEFAULT_PREFERENCES);
+    setHasConsent(false);
+    setShowBanner(true);
+  };
+  
+  const openModal = () => setShowModal(true);
+  const closeModal = () => setShowModal(false);
+  
+  // Apply preferences based on consent
+  const applyPreferences = (prefs: CookiePreferences) => {
+    // Apply analytics preference (without console logs)
+    if (prefs.analytics) {
+      // Enable analytics tracking
+      // Add analytics initialization code here if needed
+    } else {
+      // Disable analytics tracking
+      // Add analytics disabling code here if needed
+    }
+  };
+  
+  const value = {
+    preferences,
+    hasConsent,
+    showBanner,
+    showModal,
+    acceptAll,
+    savePreferences,
+    openModal,
+    closeModal,
+    resetConsent
+  };
+  
+  return (
+    <CookieContext.Provider value={value}>
+      {children}
+    </CookieContext.Provider>
+  );
+}
+
+export function useCookieConsent() {
+  const context = useContext(CookieContext);
+  if (context === undefined) {
+    throw new Error('useCookieConsent must be used within a CookieProvider');
+  }
+  return context;
+} 
\ No newline at end of file
diff --git a/components/cookies/CookieSettingsModal.tsx b/components/cookies/CookieSettingsModal.tsx
new file mode 100644
index 0000000..bc2093d
--- /dev/null
+++ b/components/cookies/CookieSettingsModal.tsx
@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Heading, Text } from '@/components/ui/Typography';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { CookieCategoryCard } from './CookieCategoryCard';
+import { CookiePreferences, useCookieConsent } from './CookieContext';
+
+// Cookie category descriptions
+const COOKIE_DESCRIPTIONS = {
+  necessary: {
+    title: 'Neophodni kolačići',
+    description: 'Ovi kolačići su neophodni za funkcioniranje web stranice i ne mogu biti isključeni. Oni omogućuju osnovne funkcionalnosti poput navigacije stranice i pristupa sigurnim područjima.'
+  },
+  analytics: {
+    title: 'Analitički kolačići',
+    description: 'Ovi kolačići nam pomažu razumjeti kako posjetitelji koriste našu web stranicu, prikupljajući anonimne statističke podatke. Oni nam pomažu poboljšati korisničko iskustvo i performanse stranice.'
+  },
+  marketing: {
+    title: 'Marketinški kolačići',
+    description: 'Ovi kolačići se koriste za praćenje posjetitelja na web stranicama. Namjera je prikazati oglase koji su relevantni i privlačni za pojedinog korisnika i time vrijedniji za izdavače i vanjske oglašivače.'
+  },
+  preferences: {
+    title: 'Kolačići za personalizaciju',
+    description: 'Ovi kolačići omogućuju web stranici da zapamti izbore koje ste napravili (poput korisničkog imena, jezika ili regije) i pružaju poboljšane, personalizirane značajke.'
+  }
+};
+
+export function CookieSettingsModal() {
+  const { preferences, showModal, savePreferences, closeModal } = useCookieConsent();
+  const [localPreferences, setLocalPreferences] = useState<CookiePreferences>(preferences);
+  
+  // Sync with parent preferences when they change
+  useEffect(() => {
+    setLocalPreferences(preferences);
+  }, [preferences]);
+  
+  const handleToggle = (category: keyof CookiePreferences) => {
+    if (category === 'necessary') return; // Necessary cookies can't be disabled
+    
+    setLocalPreferences(prev => ({
+      ...prev,
+      [category]: !prev[category]
+    }));
+  };
+  
+  const handleSave = () => {
+    savePreferences(localPreferences);
+  };
+  
+  if (!showModal) return null;
+  
+  return (
+    <>
+      {/* Backdrop */}
+      <div 
+        className="fixed inset-0 bg-black bg-opacity-50 z-50"
+        onClick={closeModal}
+      />
+      
+      {/* Modal */}
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+          {/* Header */}
+          <div className="p-4 border-b flex justify-between items-center sticky top-0 bg-white z-20">
+            <Heading level={3}>Postavke kolačića</Heading>
+            <button 
+              onClick={closeModal}
+              className="text-gray-500 hover:text-gray-700"
+              aria-label="Close"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+          
+          {/* Content */}
+          <div className="p-6">
+            <Text className="mb-6">
+              Ova web stranica koristi kolačiće za poboljšanje korisničkog iskustva. Možete prilagoditi svoje postavke 
+              kolačića omogućavanjem ili onemogućavanjem svake kategorije. Kolačići označeni kao "Neophodni" 
+              su potrebni za osnovne funkcije web stranice i ne mogu biti isključeni.
+            </Text>
+            
+            {/* Cookie categories */}
+            <div className="space-y-6">
+              {/* Necessary cookies - always enabled */}
+              <CookieCategoryCard
+                title={COOKIE_DESCRIPTIONS.necessary.title}
+                description={COOKIE_DESCRIPTIONS.necessary.description}
+                enabled={true}
+                onChange={() => {}}
+                disabled={true}
+              />
+              
+              {/* Analytics cookies */}
+              <CookieCategoryCard
+                title={COOKIE_DESCRIPTIONS.analytics.title}
+                description={COOKIE_DESCRIPTIONS.analytics.description}
+                enabled={localPreferences.analytics}
+                onChange={() => handleToggle('analytics')}
+              />
+              
+              {/* Marketing cookies */}
+              <CookieCategoryCard
+                title={COOKIE_DESCRIPTIONS.marketing.title}
+                description={COOKIE_DESCRIPTIONS.marketing.description}
+                enabled={localPreferences.marketing}
+                onChange={() => handleToggle('marketing')}
+              />
+              
+              {/* Preference cookies */}
+              <CookieCategoryCard
+                title={COOKIE_DESCRIPTIONS.preferences.title}
+                description={COOKIE_DESCRIPTIONS.preferences.description}
+                enabled={localPreferences.preferences}
+                onChange={() => handleToggle('preferences')}
+              />
+            </div>
+
+            <div className="mt-6 border-t pt-4">
+              <Heading level={4} className="mb-3">O kolačićima</Heading>
+              <Text className="mb-4">
+                Kolačići su male tekstualne datoteke koje web stranice postavljaju na vaš uređaj prilikom posjeta.
+                Koriste se za pamćenje vaših postavki, poboljšanje funkcionalnosti i prikupljanje analitičkih podataka.
+              </Text>
+              
+              <Heading level={4} className="mb-2 mt-4">Kako koristimo kolačiće</Heading>
+              <Text className="mb-4">
+                Koristimo različite vrste kolačića za različite svrhe. Neki su neophodni za rad web stranice,
+                dok drugi nam pomažu optimizirati sadržaj i korisničko iskustvo.
+              </Text>
+              
+              <Heading level={4} className="mb-2 mt-4">Vaša prava</Heading>
+              <Text className="mb-4">
+                U skladu s EU regulativom o kolačićima, omogućujemo vam upravljanje postavkama kolačića.
+                Više informacija možete pronaći u našim <a href="/privacy-policy" className="underline">Pravilima privatnosti</a> i 
+                <a href="/terms-of-service" className="underline ml-1">Uvjetima korištenja</a>.
+              </Text>
+            </div>
+          </div>
+          
+          {/* Footer with buttons */}
+          <div className="p-4 border-t sticky bottom-0 bg-white">
+            <div className="flex justify-end space-x-4">
+              <Button 
+                variant="outline" 
+                onClick={closeModal}
+              >
+                Odustani
+              </Button>
+              <Button 
+                variant="primary"
+                onClick={handleSave}
+              >
+                Spremi postavke
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/components/cookies/ToggleSwitch.tsx b/components/cookies/ToggleSwitch.tsx
new file mode 100644
index 0000000..3180332
--- /dev/null
+++ b/components/cookies/ToggleSwitch.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+interface ToggleSwitchProps {
+  enabled: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
+export function ToggleSwitch({ enabled, onChange, disabled = false }: ToggleSwitchProps) {
+  return (
+    <button 
+      onClick={onChange}
+      disabled={disabled}
+      className={`relative inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}`}
+      type="button"
+      role="switch"
+      aria-checked={enabled}
+    >
+      <div className={`w-10 h-6 rounded-full transition ${enabled ? 'bg-primary' : 'bg-gray-300'}`}></div>
+      <div 
+        className={`absolute inset-y-0 left-0 w-6 h-6 bg-white rounded-full border border-gray-300 transform transition ${
+          enabled ? 'translate-x-4' : 'translate-x-0'
+        }`}
+      ></div>
+    </button>
+  );
+} 
\ No newline at end of file
diff --git a/components/cookies/index.tsx b/components/cookies/index.tsx
new file mode 100644
index 0000000..8abc531
--- /dev/null
+++ b/components/cookies/index.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { CookieBanner } from './CookieBanner';
+import { CookieProvider } from './CookieContext';
+import { CookieSettingsModal } from './CookieSettingsModal';
+
+export function CookieConsent({ children }: { children: React.ReactNode }) {
+  return (
+    <CookieProvider>
+      {children}
+      <CookieBanner />
+      <CookieSettingsModal />
+    </CookieProvider>
+  );
+}
+
+export { useCookieConsent } from './CookieContext';
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
new file mode 100644
index 0000000..9268155
--- /dev/null
+++ b/components/grid/index.tsx
@@ -0,0 +1,21 @@
+import clsx from 'clsx';
+
+function Grid(props: React.ComponentProps<'ul'>) {
+  return (
+    <ul {...props} className={clsx('grid grid-flow-row gap-4', props.className)}>
+      {props.children}
+    </ul>
+  );
+}
+
+function GridItem(props: React.ComponentProps<'li'>) {
+  return (
+    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
+      {props.children}
+    </li>
+  );
+}
+
+Grid.Item = GridItem;
+
+export default Grid;
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
new file mode 100644
index 0000000..76df2ae
--- /dev/null
+++ b/components/grid/three-items.tsx
@@ -0,0 +1,61 @@
+import { GridTileImage } from 'components/grid/tile';
+import { getCollectionProducts } from 'lib/shopify';
+import type { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+
+function ThreeItemGridItem({
+  item,
+  size,
+  priority
+}: {
+  item: Product;
+  size: 'full' | 'half';
+  priority?: boolean;
+}) {
+  return (
+    <div
+      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
+    >
+      <Link
+        className="relative block aspect-square h-full w-full"
+        href={`/product/${item.handle}`}
+        prefetch={true}
+      >
+        <GridTileImage
+          src={item.featuredImage.url}
+          fill
+          sizes={
+            size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
+          }
+          priority={priority}
+          alt={item.title}
+          label={{
+            position: size === 'full' ? 'center' : 'bottom',
+            title: item.title as string,
+            amount: item.priceRange.maxVariantPrice.amount,
+            currencyCode: item.priceRange.maxVariantPrice.currencyCode
+          }}
+        />
+      </Link>
+    </div>
+  );
+}
+
+export async function ThreeItemGrid() {
+  // Collections that start with `hidden-*` are hidden from the search page.
+  const homepageItems = await getCollectionProducts({
+    collection: 'hidden-homepage-featured-items'
+  });
+
+  if (!homepageItems[0] || !homepageItems[1] || !homepageItems[2]) return null;
+
+  const [firstProduct, secondProduct, thirdProduct] = homepageItems;
+
+  return (
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
+      <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
+      <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
+      <ThreeItemGridItem size="half" item={thirdProduct} />
+    </section>
+  );
+}
diff --git a/components/grid/tile.tsx b/components/grid/tile.tsx
new file mode 100644
index 0000000..f75674b
--- /dev/null
+++ b/components/grid/tile.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import Label from '../Label';
+
+export function GridTileImage({
+  isInteractive = true,
+  active,
+  label,
+  ...props
+}: {
+  isInteractive?: boolean;
+  active?: boolean;
+  label?: {
+    title: string;
+    amount: string;
+    currencyCode: string;
+    position?: 'bottom' | 'center';
+  };
+} & React.ComponentProps<typeof Image>) {
+  return (
+    <div
+      className={clsx(
+        'group flex h-full w-full items-center justify-center overflow-hidden',
+      )}
+    >
+      {props.src ? (
+        <Image
+          className='relative h-full w-full object-contain'
+          {...props}
+        />
+      ) : null}
+      {label ? (
+        <Label
+          title={label.title}
+          amount={label.amount}
+          currencyCode={label.currencyCode}
+          position={label.position}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/home/CardSection.tsx b/components/home/CardSection.tsx
new file mode 100644
index 0000000..7cfc12a
--- /dev/null
+++ b/components/home/CardSection.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { CustomCard } from "@/components/ui/CustomCard";
+import { Section } from "@/components/ui/Section";
+import { SectionHeader } from "@/components/ui/SectionHeader";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+
+export function CardSection() {
+  const { t } = useTranslation();
+  
+  // Card data from translations
+  const cardsData = [
+    {
+      title: t('cardSection.cards.0.title'),
+      description: t('cardSection.cards.0.description'),
+      imageSrc: "/assets/images/card1.png",
+      imageAlt: t('cardSection.cards.0.imageAlt')
+    },
+    {
+      title: t('cardSection.cards.1.title'),
+      description: t('cardSection.cards.1.description'),
+      imageSrc: "/assets/images/card2.png",
+      imageAlt: t('cardSection.cards.1.imageAlt')
+    },
+    {
+      title: t('cardSection.cards.2.title'),
+      description: t('cardSection.cards.2.description'),
+      imageSrc: "/assets/images/card3.png",
+      imageAlt: t('cardSection.cards.2.imageAlt')
+    }
+  ];
+
+  return (
+    <Section>
+      <div className="flex flex-col items-start">
+        <SectionHeader 
+          title={t('cardSection.title')}
+          description={t('cardSection.description')}
+          className="mb-[60px]"
+        />
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full">
+          {cardsData.map((card, index) => (
+            <CustomCard
+              key={index}
+              title={card.title}
+              description={card.description}
+              imageSrc={card.imageSrc}
+              imageAlt={card.imageAlt}
+            />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/CustomerReviews.tsx b/components/home/CustomerReviews.tsx
new file mode 100644
index 0000000..eb10989
--- /dev/null
+++ b/components/home/CustomerReviews.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { container } from "@/lib/utils";
+
+// Define the review data structure
+interface Review {
+  id: number;
+  author: string;
+  comment: string;
+}
+
+export function CustomerReviews() {
+  const { t, locale } = useTranslation();
+  
+  // Definiraj reviewse po jeziku
+  const reviews: Review[] = locale === 'en' ? [
+    {
+      id: 1,
+      author: "Emily Johnson",
+      comment: "\"The Build a Box feature made gift-giving so easy and special!\""
+    },
+    {
+      id: 2,
+      author: "Michael Smith",
+      comment: "\"Sent's service exceeded my expectations every time!\""
+    },
+    {
+      id: 3,
+      author: "Sarah Lee",
+      comment: "\"The quality of the items was outstanding!\""
+    }
+  ] : [
+    {
+      id: 1,
+      author: "Ana Kovačić",
+      comment: "\"Opcija 'Složi kutiju' učinila je darivanje tako jednostavnim i posebnim!\""
+    },
+    {
+      id: 2,
+      author: "Marko Horvat",
+      comment: "\"Usluga Sent-a nadmašila je moja očekivanja svaki put!\""
+    },
+    {
+      id: 3,
+      author: "Ivana Novak",
+      comment: "\"Kvaliteta proizvoda bila je izvanredna!\""
+    }
+  ];
+
+  return (
+    <Section className="bg-white overflow-hidden">
+      {/* Keep the heading inside container */}
+      <div className={container}>
+        <Heading level={2} className="text-center mb-[60px]">
+          {t('customerReviews.title')}
+        </Heading>
+      
+        {/* Mobile: Full width scrollable container, Desktop: Grid */}
+        <div className="md:hidden -mx-4">
+          <div className="flex overflow-x-auto pb-6 px-4 snap-x no-scrollbar">
+            {/* Add empty div at start to ensure space */}
+            <div className="shrink-0 w-[5%]"></div>
+            
+            {reviews.map((review) => (
+              <div 
+                key={review.id}
+                className="bg-secondary shrink-0 w-[85%] sm:w-[70%] h-[235px] p-8 flex flex-col snap-center mx-3"
+              >
+                <Text className="mb-6 flex-grow">
+                  {review.comment}
+                </Text>
+                
+                <div className="mt-auto">
+                  <Text className="text-primary font-bold">{review.author}</Text>
+                </div>
+              </div>
+            ))}
+            
+            {/* Add empty div at end to ensure space */}
+            <div className="shrink-0 w-[5%]"></div>
+          </div>
+        </div>
+        
+        {/* Desktop: Original grid layout */}
+        <div className="hidden md:grid md:grid-cols-3 gap-8">
+          {reviews.map((review) => (
+            <div 
+              key={review.id}
+              className="bg-secondary h-[235px] p-8 flex flex-col"
+            >
+              <Text className="mb-6 flex-grow">
+                {review.comment}
+              </Text>
+              
+              <div className="mt-auto">
+                <Text className="text-primary font-bold">{review.author}</Text>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/GiftBoxBuilder.tsx b/components/home/GiftBoxBuilder.tsx
new file mode 100644
index 0000000..6b54053
--- /dev/null
+++ b/components/home/GiftBoxBuilder.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { container } from "@/lib/utils";
+import Image from "next/image";
+
+export function GiftBoxBuilder() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="relative">
+      {/* Top frame image */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame4.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+      
+      {/* Main content with pink background */}
+      <div className="bg-[#F58EA7]">
+        <div className={`${container} py-[80px]`}>
+          <div className="flex flex-col md:flex-row md:items-center">
+            {/* Image container - takes up full width on mobile, half on desktop */}
+            <div className="w-full md:w-1/2 h-[240px] md:h-[500px] relative mb-8 md:mb-0">
+              <Image
+                src="/assets/images/build-box.png"
+                alt={t('giftBoxBuilder.altText')}
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+            
+            {/* Text container - takes up full width on mobile, half on desktop */}
+            <div className="w-full md:w-1/2 md:pl-20">
+              <Heading level={2} className="mb-4">
+                {t('giftBoxBuilder.title')}
+              </Heading>
+              <Text size="lg" className="mb-8">
+                {t('giftBoxBuilder.description')}
+              </Text>
+              <Button 
+                href="/build-box" 
+                variant="filled" 
+                size="lg" 
+                fullWidthMobile
+              >
+                {t('giftBoxBuilder.button')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Bottom frame image */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame5.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/HeroCarousel.tsx b/components/home/HeroCarousel.tsx
new file mode 100644
index 0000000..846f6d4
--- /dev/null
+++ b/components/home/HeroCarousel.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Carousel } from "@/components/ui/Carousel";
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { CarouselSlide } from "@/lib/types/carousel";
+import { container } from "@/lib/utils";
+import Image from "next/image";
+
+export default function HeroCarousel() {
+  const { t } = useTranslation();
+  
+  // Carousel data with translations
+  const carouselData: CarouselSlide[] = [
+    {
+      id: 1,
+      title: t('hero.title'),
+      titleColored: t('hero.title_colored'),
+      titleEnd: t('hero.title_end'),
+      description: t('hero.description'),
+      buttonText: t('hero.build_box_button'),
+      buttonLink: "/build-box",
+      imageSrc: "/assets/images/carousel1.png"
+    },
+    {
+      id: 2,
+      title: t('hero.title'),
+      titleColored: t('hero.title_colored'),
+      titleEnd: t('hero.title_end'),
+      description: t('hero.description'),
+      buttonText: t('hero.build_box_button'),
+      buttonLink: "/build-box",
+      imageSrc: "/assets/images/carousel2.png"
+    },
+    {
+      id: 3,
+      title: t('hero.title'),
+      titleColored: t('hero.title_colored'),
+      titleEnd: t('hero.title_end'),
+      description: t('hero.description'),
+      buttonText: t('hero.build_box_button'),
+      buttonLink: "/build-box",
+      imageSrc: "/assets/images/carousel1.png"
+    }
+  ];
+
+  // Default slide to use as fallback
+  const defaultSlide: CarouselSlide = {
+    id: 0,
+    title: t('hero.title'),
+    titleColored: t('hero.title_colored'),
+    titleEnd: t('hero.title_end'),
+    description: t('hero.description'),
+    buttonText: t('hero.build_box_button'),
+    buttonLink: "/build-box",
+    imageSrc: "/assets/images/image1.png"
+  };
+
+  // Create mobile slide components - each image needs to be in a container div
+  const mobileImageSlides = carouselData.map((slide, index) => (
+    <div key={slide.id} className="relative w-full h-full">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
+      
+      {/* Image container - right side with padding */}
+      <div className="absolute right-0 top-0 h-full w-1/2">
+        <div className="relative h-full py-8">
+          <Image
+            src={slide.imageSrc}
+            alt={slide.title}
+            fill
+            sizes="50vw"
+            className="object-contain"
+            priority={index === 0}
+          />
+        </div>
+      </div>
+    </div>
+  ));
+
+  // Create desktop slide components
+  const desktopSlides = carouselData.map((slide, index) => (
+    <div key={slide.id} className="w-full h-full">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
+      
+      {/* Image container - positioned on the right with padding */}
+      <div className="absolute right-0 top-0 h-full w-[46.3%]">
+        <div className="relative h-full py-12">
+          <Image
+            src={slide.imageSrc}
+            alt={slide.title}
+            fill
+            sizes="46.3vw"
+            className="object-contain"
+            priority={index === 0}
+          />
+        </div>
+      </div>
+      
+      {/* Container for proper alignment */}
+      <div className={`relative h-full ${container} flex items-end`}>
+        {/* Text overlay */}
+        <div className="pb-32 max-w-2xl">
+          <Heading level={1} className="mb-4 text-black text-[40px] leading-[48px] md:text-[60px] md:leading-[76px] flex flex-col font-bold">
+            <span>{slide.title}</span>
+            <span className="text-primary">{slide.titleColored}</span>
+            <span>{slide.titleEnd}</span>
+          </Heading>
+          <Text size="lg" className="mb-6 text-black text-[18px] leading-[28px]">
+            {slide.description}
+          </Text>
+          <div className="flex gap-4">
+            <Button
+              href={slide.buttonLink}
+              variant="filled"
+              size="lg"
+            >
+              {slide.buttonText}
+            </Button>
+            <Button
+              href="/products"
+              variant="custom"
+              size="lg"
+            >
+              {t('hero.ready_made_button')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  ));
+
+  return (
+    <Section spacing="none" fullWidth={true}>
+      <div className="w-full">
+        {/* Mobile version */}
+        <div className="md:hidden">
+          {/* Image carousel */}
+          <div className="relative w-full h-[350px] bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]">
+            <Carousel 
+              slides={mobileImageSlides}
+              interval={10000}
+              indicatorsClassName="absolute bottom-4 left-0 right-0"
+              className="w-full h-full"
+            />
+          </div>
+          
+          {/* Text content below carousel on mobile */}
+          <div className="p-6 bg-white">
+            <Heading level={1} className="mb-3 text-[40px] leading-[48px] flex flex-col font-bold">
+              <span>{carouselData[0]?.title || defaultSlide.title}</span>
+              <span className="text-primary">{carouselData[0]?.titleColored || defaultSlide.titleColored}</span>
+              <span>{carouselData[0]?.titleEnd || defaultSlide.titleEnd}</span>
+            </Heading>
+            <Text className="mb-6 text-[18px] leading-[28px]">
+              {carouselData[0]?.description || defaultSlide.description}
+            </Text>
+            <Button
+              href={carouselData[0]?.buttonLink || defaultSlide.buttonLink}
+              variant="filled"
+              size="lg"
+              fullWidth
+            >
+              {carouselData[0]?.buttonText || defaultSlide.buttonText}
+            </Button>
+          </div>
+        </div>
+
+        {/* Desktop version */}
+        <div className="hidden md:block relative h-[600px]">
+          <Carousel 
+            slides={desktopSlides}
+            interval={10000}
+            indicatorsClassName="absolute bottom-6 left-0 right-0"
+            className="w-full h-full"
+          />
+        </div>
+      </div>
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/NewHomePage.tsx b/components/home/NewHomePage.tsx
new file mode 100644
index 0000000..aef7cac
--- /dev/null
+++ b/components/home/NewHomePage.tsx
@@ -0,0 +1,31 @@
+import { CardSection } from "./CardSection";
+import { CustomerReviews } from "./CustomerReviews";
+import { GiftBoxBuilder } from "./GiftBoxBuilder";
+import HeroCarousel from "./HeroCarousel";
+import { ProductSliderWrapper } from "./ProductSliderWrapper";
+import { WoltDelivery } from "./WoltDelivery";
+
+export default function NewHomePage() {
+  
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section with Carousel */}
+      <HeroCarousel />
+      
+      {/* Card Section */}
+      <CardSection />
+      
+      {/* Gift Box Builder Section */}
+      <GiftBoxBuilder />
+      
+      {/* Product Slider Section */}
+      <ProductSliderWrapper />
+      
+      {/* Customer Reviews Section */}
+      <CustomerReviews />
+      
+      {/* Wolt Delivery Section */}
+      <WoltDelivery />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/ProductSlider.tsx b/components/home/ProductSlider.tsx
new file mode 100644
index 0000000..97c543a
--- /dev/null
+++ b/components/home/ProductSlider.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { getProductColors } from "@/components/products/utils/colorUtils";
+import { Button } from "@/components/ui/Button";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { cn } from "@/lib/utils";
+import useEmblaCarousel from "embla-carousel-react";
+import { Product } from "lib/shopify/types";
+import { useCallback, useEffect, useState } from "react";
+import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
+
+interface ProductSliderProps {
+  products: Product[];
+}
+
+/**
+ * A product slider component that displays products in a horizontal scrollable slider.
+ * Uses the Embla Carousel library for the sliding functionality.
+ */
+export function ProductSlider({ products }: ProductSliderProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    align: "start",
+    containScroll: false,
+    loop: false,
+  });
+
+  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
+  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setPrevBtnEnabled(emblaApi.canScrollPrev());
+    setNextBtnEnabled(emblaApi.canScrollNext());
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+  }, [emblaApi, onSelect]);
+
+  return (
+    <div className="relative">
+      <div className="overflow-visible" ref={emblaRef}>
+        <div className="flex">
+          {products.map((product, index) => (
+            <div 
+              key={product.id} 
+              className={cn(
+                "w-[85%] min-[500px]:w-[90%] min-[700px]:w-[48.5%] min-[1100px]:w-[32%] min-w-0 flex-grow-0 flex-shrink-0 mr-[2%]",
+              )}
+            >
+              <ProductCard 
+                title={product.title}
+                variant={product.variants[0]?.title || ""}
+                price={parseFloat(product.priceRange.maxVariantPrice.amount)}
+                imageSrc={product.featuredImage?.url || "/assets/images/placeholder_image.svg"}
+                slug={product.handle}
+                product={product}
+                colors={getProductColors(product)}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Previous button */}
+      <Button 
+        onClick={scrollPrev} 
+        disabled={!prevBtnEnabled}
+        variant="default" 
+        size="sm" 
+        className={cn(
+          "absolute left-[-18px] top-1/2 transform -translate-y-1/2 z-10",
+          "w-9 h-9 text-sm bg-white shadow-md border border-gray-200 rounded-full",
+          !prevBtnEnabled && "opacity-50 cursor-not-allowed"
+        )}
+      >
+        <FiChevronLeft className="w-5 h-5" />
+      </Button>
+
+      {/* Next button */}
+      <Button 
+        onClick={scrollNext} 
+        disabled={!nextBtnEnabled}
+        variant="default" 
+        size="sm" 
+        className={cn(
+          "absolute right-[-18px] top-1/2 transform -translate-y-1/2 z-10",
+          "w-9 h-9 text-sm bg-white shadow-md border border-gray-200 rounded-full",
+          !nextBtnEnabled && "opacity-50 cursor-not-allowed"
+        )}
+      >
+        <FiChevronRight className="w-5 h-5" />
+      </Button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/ProductSliderSection.tsx b/components/home/ProductSliderSection.tsx
new file mode 100644
index 0000000..0d8161b
--- /dev/null
+++ b/components/home/ProductSliderSection.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import type { Product } from "lib/shopify/types";
+import { ProductSlider } from "./ProductSlider";
+
+interface ProductSliderSectionProps {
+  products: Product[];
+}
+
+/**
+ * Presentation component for the product slider section
+ * Handles the layout and presentation aspects, but not data fetching
+ */
+export function ProductSliderSection({ products }: ProductSliderSectionProps) {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="overflow-x-hidden w-full">
+      <Section spacing="medium">
+        <div className="mb-8">
+          {/* Container for header section with relative positioning */}
+          <div className="relative">
+            {/* Button positioned absolutely to the right */}
+            <div className="hidden sm:block absolute right-0 bottom-[0px]">
+              <Button 
+                href="/search" 
+                variant="custom" 
+                size="lg"
+                fullWidthMobile={false}
+              >
+                {t('productSlider.button')}
+              </Button>
+            </div>
+            
+            {/* Title and description */}
+            <div className="mb-4">
+              <Heading level={2}>{t('productSlider.title')}</Heading>
+            </div>
+            
+            <div>
+              <Text size="lg" className="mb-4 sm:mb-0">{t('productSlider.description')}</Text>
+            </div>
+          </div>
+          
+          {/* Mobile full-width button */}
+          <div className="sm:hidden mt-2">
+            <Button 
+              href="/search" 
+              variant="custom" 
+              size="lg"
+              fullWidthMobile
+            >
+              {t('productSlider.button')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Carousel container s overflow da se vidi 4. proizvod */}
+        <div className="relative w-full overflow-visible">
+          <ProductSlider products={products} />
+        </div>
+      </Section>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/home/ProductSliderWrapper.tsx b/components/home/ProductSliderWrapper.tsx
new file mode 100644
index 0000000..6b5ad85
--- /dev/null
+++ b/components/home/ProductSliderWrapper.tsx
@@ -0,0 +1,25 @@
+import { getCollectionProducts } from 'lib/shopify';
+import { ProductSliderSection } from './ProductSliderSection';
+
+/**
+ * Server component responsible for fetching product data
+ */
+export async function ProductSliderWrapper() {
+  // Fetch products from Shopify
+  // Try to fetch from a dedicated collection first, and if not available, fetch recent products
+  const products = await getCollectionProducts({
+    collection: 'hidden-homepage-carousel', 
+    sortKey: 'CREATED_AT',
+    reverse: true
+  }).catch(() => {
+    return [];
+  });
+
+  // If no products found, don't render anything
+  if (!products || products.length === 0) {
+    return null;
+  }
+  
+  // Render the slider section with fetched products
+  return <ProductSliderSection products={products} />;
+} 
\ No newline at end of file
diff --git a/components/home/WoltDelivery.tsx b/components/home/WoltDelivery.tsx
new file mode 100644
index 0000000..275a4ce
--- /dev/null
+++ b/components/home/WoltDelivery.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { container } from "@/lib/utils";
+import Image from "next/image";
+
+export function WoltDelivery() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative">
+      {/* Top wave */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame3.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+      
+      {/* Main content with background color */}
+      <div className="bg-wolt">
+        <div className={`${container} py-[80px] relative`}>
+          {/* Desktop Wolt logo - only visible on desktop */}
+          <div className="absolute top-0 right-0 z-10 hidden md:block">
+            <div className="w-[160px] h-[160px] bg-wolt-blue rounded-md flex items-center justify-center">
+              <Image
+                src="/assets/images/wolt.png"
+                alt="Wolt"
+                width={120}
+                height={120}
+                className="object-contain"
+              />
+            </div>
+          </div>
+          
+          {/* Text and image layout */}
+          <div className="flex flex-col md:flex-row md:items-center">
+            {/* Text container - comes first on both mobile and desktop */}
+            <div className="w-full md:w-1/2 md:pr-12 order-1 mb-8 md:mb-0">
+              <Heading level={2} className="mb-4">
+                {t('woltDelivery.title')}
+              </Heading>
+              <Text size="lg" className="mb-8">
+                {t('woltDelivery.description')}
+              </Text>
+              <Button 
+                href="https://wolt.com" 
+                external 
+                variant="filled" 
+                size="lg" 
+                fullWidthMobile
+              >
+                {t('woltDelivery.button')}
+              </Button>
+            </div>
+            
+            {/* Image container with mobile logo */}
+            <div className="w-full md:w-1/2 h-[310px] md:h-[400px] relative order-2 mb-12 md:mb-0">
+              <Image
+                src="/assets/images/wolt-image.png"
+                alt={t('woltDelivery.altText')}
+                fill
+                className="object-cover"
+                priority
+              />
+              
+              {/* Mobile Wolt logo - positioned at bottom-right of image */}
+              <div className="absolute bottom-[-40px] right-[-10px] z-10 md:hidden">
+                <div className="w-[120px] h-[120px] bg-wolt-blue rounded-md flex items-center justify-center">
+                  <Image
+                    src="/assets/images/wolt.png"
+                    alt="Wolt"
+                    width={90}
+                    height={90}
+                    className="object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/i18n/IntlProvider.tsx b/components/i18n/IntlProvider.tsx
new file mode 100644
index 0000000..4a39577
--- /dev/null
+++ b/components/i18n/IntlProvider.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { NextIntlClientProvider } from 'next-intl';
+import { ReactNode } from 'react';
+
+type IntlProviderProps = {
+  locale: string;
+  children: ReactNode;
+  messages: any;
+};
+
+export function IntlProvider({ locale, messages, children }: IntlProviderProps) {
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+} 
\ No newline at end of file
diff --git a/components/i18n/LanguageSwitcher.tsx b/components/i18n/LanguageSwitcher.tsx
new file mode 100644
index 0000000..a0d7d55
--- /dev/null
+++ b/components/i18n/LanguageSwitcher.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import Cookies from 'js-cookie';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export function LanguageSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [currentLocale, setCurrentLocale] = useState('hr');
+
+  // Detect current language from URL
+  useEffect(() => {
+    const locale = pathname.startsWith('/en') ? 'en' : 'hr';
+    setCurrentLocale(locale);
+  }, [pathname]);
+
+  const switchLanguage = (locale: string) => {
+    // Set cookie for future visits
+    Cookies.set('NEXT_LOCALE', locale, { expires: 365, path: '/' });
+    
+    // Construct proper path based on current path and target locale
+    let newPath;
+    
+    if (locale === 'en') {
+      // If switching to English
+      if (pathname.startsWith('/en')) {
+        // Already in English, no need to change path
+        newPath = pathname;
+      } else {
+        // Add /en prefix to current path
+        newPath = `/en${pathname}`;
+      }
+    } else {
+      // If switching to Croatian
+      if (pathname.startsWith('/en')) {
+        // Remove /en prefix
+        newPath = pathname.substring(3) || '/';
+      } else {
+        // Already in Croatian, no need to change path
+        newPath = pathname;
+      }
+    }
+    
+    // Navigate to the new path
+    router.push(newPath);
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      <button 
+        onClick={() => switchLanguage('hr')} 
+        className={`px-2 py-1 ${currentLocale === 'hr' ? 'font-bold' : ''}`}
+        aria-label="Prebaci na hrvatski"
+      >
+        HR
+      </button>
+      <span>|</span>
+      <button 
+        onClick={() => switchLanguage('en')} 
+        className={`px-2 py-1 ${currentLocale === 'en' ? 'font-bold' : ''}`}
+        aria-label="Switch to English"
+      >
+        EN
+      </button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/icons/logo.tsx b/components/icons/logo.tsx
new file mode 100644
index 0000000..46fa024
--- /dev/null
+++ b/components/icons/logo.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+
+export default function LogoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label={`${process.env.SITE_NAME} logo`}
+      viewBox="0 0 32 28"
+      {...props}
+      className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
+    >
+      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
+      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
+    </svg>
+  );
+}
diff --git a/components/layout/ProductGridItems.tsx b/components/layout/ProductGridItems.tsx
new file mode 100644
index 0000000..5dee983
--- /dev/null
+++ b/components/layout/ProductGridItems.tsx
@@ -0,0 +1,32 @@
+import Grid from 'components/grid';
+import { GridTileImage } from 'components/grid/tile';
+import { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+
+export default function ProductGridItems({ products }: { products: Product[] }) {
+  return (
+    <>
+      {products.map((product) => (
+        <Grid.Item key={product.handle} className="animate-fadeIn">
+          <Link
+            className="relative inline-block h-full w-full"
+            href={`/product/${product.handle}`}
+            prefetch={true}
+          >
+            <GridTileImage
+              alt={product.title}
+              label={{
+                title: product.title,
+                amount: product.priceRange.maxVariantPrice.amount,
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
+              }}
+              src={product.featuredImage?.url}
+              fill
+              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
+            />
+          </Link>
+        </Grid.Item>
+      ))}
+    </>
+  );
+}
diff --git a/components/layout/categories.tsx b/components/layout/categories.tsx
new file mode 100644
index 0000000..71a549b
--- /dev/null
+++ b/components/layout/categories.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+const categories = {
+  'Men': [
+    { name: 'T-Shirts', href: '/collections/mens-t-shirts' },
+    { name: 'Hoodies', href: '/collections/mens-hoodies' },
+    { name: 'Pants', href: '/collections/mens-pants' },
+    { name: 'Accessories', href: '/collections/mens-accessories' }
+  ],
+  'Women': [
+    { name: 'Dresses', href: '/collections/womens-dresses' },
+    { name: 'Tops', href: '/collections/womens-tops' },
+    { name: 'Bottoms', href: '/collections/womens-bottoms' },
+    { name: 'Accessories', href: '/collections/womens-accessories' }
+  ]
+};
+
+export default function Categories() {
+  const [activeSection, setActiveSection] = useState<string | null>(null);
+
+  return (
+    <div className="relative">
+      <div className="flex gap-6">
+        {Object.keys(categories).map((section) => (
+          <button
+            key={section}
+            className="relative py-4 text-sm font-medium text-gray-700 hover:text-gray-900"
+            onMouseEnter={() => setActiveSection(section)}
+            onMouseLeave={() => setActiveSection(null)}
+          >
+            {section}
+          </button>
+        ))}
+      </div>
+
+      {/* Dropdown menu */}
+      {activeSection && (
+        <div
+          className="absolute left-0 top-full z-10 w-48 rounded-md bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5"
+          onMouseEnter={() => setActiveSection(activeSection)}
+          onMouseLeave={() => setActiveSection(null)}
+        >
+          {categories[activeSection as keyof typeof categories].map((category) => (
+            <Link
+              key={category.name}
+              href={category.href}
+              className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+            >
+              {category.name}
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
new file mode 100644
index 0000000..c25d7eb
--- /dev/null
+++ b/components/layout/footer.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useCookieConsent } from "@/components/cookies";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { container } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+
+export function Footer() {
+  const { t } = useTranslation();
+  const { openModal } = useCookieConsent();
+  
+  // Definiraj linkove s prijevodima
+  const navLinks = [
+    { name: t('footer.build_box'), href: "/build-box" },
+    { name: t('footer.products'), href: "/products" },
+    { name: t('footer.about'), href: "/about" }
+  ];
+
+  const legalLinks = [
+    { name: t('footer.privacy_policy'), href: "/privacy-policy" },
+    { name: t('footer.terms_of_service'), href: "/terms-of-service" },
+    { name: t('footer.cookies_settings'), href: "#", isButton: true }
+  ];
+
+  const socialLinks = [
+    { name: t('footer.social.facebook'), href: "https://facebook.com/sentshop", icon: "/assets/images/Facebook.png" },
+    { name: t('footer.social.instagram'), href: "https://instagram.com/sentshop", icon: "/assets/images/Instagram.png" }
+  ];
+  
+  const handleCookiesSettings = () => {
+    openModal();
+  };
+
+  return (
+    <footer className="bg-gray-100">
+      <div className={container}>
+        {/* Main footer content */}
+        <div className="py-12">
+          <div className="flex flex-col md:flex-row md:justify-between md:items-center">
+            {/* Logo */}
+            <div className="flex justify-center md:justify-start mb-8 md:mb-0">
+              <Link href="/" aria-label="Logo">
+                <Image 
+                  src="/assets/images/logo.svg" 
+                  alt="SENT logo" 
+                  width={125} 
+                  height={35} 
+                  className="w-[125px] h-auto object-contain"
+                />
+              </Link>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex flex-col items-center md:flex-row md:space-x-8 mb-8 md:mb-0">
+              {navLinks.map((link, index) => (
+                <Link
+                  key={index}
+                  href={link.href}
+                  className="text-[16px] font-bold text-gray-700 hover:text-gray-900 mb-4 md:mb-0"
+                >
+                  {link.name}
+                </Link>
+              ))}
+            </nav>
+
+            {/* Social media icons */}
+            <div className="flex items-center justify-center md:justify-end space-x-6 mb-8 md:mb-0">
+              {socialLinks.map((social, index) => (
+                <Link 
+                  key={index}
+                  href={social.href} 
+                  aria-label={social.name} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="text-gray-500 hover:text-gray-700"
+                >
+                  <Image
+                    src={social.icon}
+                    alt={social.name}
+                    width={20}
+                    height={20}
+                  />
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Legal footer */}
+        <div className="border-t border-gray-200">
+          <div className="py-6">
+            <div className="flex flex-col md:flex-row justify-center items-center text-[14px] leading-[21px] text-gray-500 space-y-4 md:space-y-0 md:space-x-6">
+              <span>&copy; {new Date().getFullYear()} Sent. {t('footer.all_rights_reserved')}</span>
+              {legalLinks.map((link, index) => (
+                link.isButton ? (
+                  <button
+                    key={index}
+                    onClick={handleCookiesSettings}
+                    className="hover:text-gray-700 text-[14px] leading-[21px]"
+                  >
+                    {link.name}
+                  </button>
+                ) : (
+                  <Link
+                    key={index}
+                    href={link.href}
+                    className="hover:text-gray-700 text-[14px] leading-[21px]"
+                  >
+                    {link.name}
+                  </Link>
+                )
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
new file mode 100644
index 0000000..8001868
--- /dev/null
+++ b/components/layout/navbar/index.tsx
@@ -0,0 +1,252 @@
+'use client';
+
+import { LanguageSwitcher } from '@/components/i18n/LanguageSwitcher';
+import { Button } from '@/components/ui/Button';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { container } from '@/lib/utils';
+import { useCart } from 'components/cart/cart-context';
+import { Menu, X } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export default function Navbar() {
+  const { t, locale } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { cart } = useCart();
+  const pathname = usePathname();
+  
+  // Create links with translations and proper prefix
+  const getNavLinks = () => {
+    const links = [
+      { name: t('navbar.build_box'), path: '/build-box' },
+      { name: t('navbar.products'), path: '/products' },
+      { name: t('navbar.about'), path: '/about' }
+    ];
+    
+    // Add locale prefix for English paths
+    if (locale === 'en') {
+      return links.map(link => ({
+        ...link,
+        href: `/en${link.path}`
+      }));
+    }
+    
+    // Return paths as is for Croatian
+    return links.map(link => ({
+      ...link,
+      href: link.path
+    }));
+  };
+  
+  const navLinks = getNavLinks();
+  
+  // Close mobile menu on resize to desktop
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsMenuOpen(false);
+      }
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  
+  // Prevent scrolling when mobile menu is open
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isMenuOpen]);
+
+  // Create home link with proper prefix
+  const homeLink = locale === 'en' ? '/en' : '/';
+  
+  // Create cart link with proper prefix
+  const cartLink = locale === 'en' ? '/en/cart' : '/cart';
+
+  return (
+    <>
+      <header className="border-b border-gray-200 sticky top-0 z-40 bg-white">
+        <div className={`${container} flex h-16 items-center justify-between`}>
+          {/* Logo */}
+          <Link href={homeLink} className="flex items-center h-12">
+            <Image
+              src="/assets/images/logo.svg"
+              alt="Logo"
+              width={125}
+              height={35}
+              className="w-[125px] h-auto object-contain"
+              priority
+            />
+          </Link>
+          
+          {/* Desktop Nav and Cart */}
+          <div className="hidden md:flex items-center space-x-8">
+            {navLinks.map((link) => {
+              const isActive = pathname === link.href || 
+                (link.href !== homeLink && pathname.startsWith(link.href));
+              
+              return (
+                <Link 
+                  key={link.name} 
+                  href={link.href}
+                  className={`text-sm font-medium transition-colors ${
+                    isActive 
+                      ? 'text-primary hover:text-primary-dark' 
+                      : 'text-black hover:text-primary'
+                  }`}
+                >
+                  {link.name}
+                </Link>
+              );
+            })}
+            
+            <LanguageSwitcher />
+            
+            <Link 
+              href={cartLink}
+              className="inline-flex h-10 items-center justify-center rounded-button bg-primary px-6 py-2 text-sm font-medium text-white relative hover:bg-primary-dark"
+            >
+              <span>{t('navbar.cart')}</span>
+              <Image
+                src="/assets/images/cart-icon.png"
+                alt="Cart"
+                width={20}
+                height={20}
+                className="ml-2"
+              />
+              {cart?.totalQuantity ? (
+                <span className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white">
+                  {cart.totalQuantity}
+                </span>
+              ) : null}
+            </Link>
+          </div>
+          
+          {/* Mobile menu button and cart */}
+          <div className="md:hidden flex items-center space-x-4">
+            <Link 
+              href={cartLink}
+              className="relative text-black"
+              aria-label="View cart"
+            >
+              <Image
+                src="/assets/images/cart-icon-black.png"
+                alt="Cart"
+                width={24}
+                height={24}
+              />
+              {cart?.totalQuantity ? (
+                <span className="absolute -right-2 -top-3 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white">
+                  {cart.totalQuantity}
+                </span>
+              ) : null}
+            </Link>
+            
+            <button 
+              className="text-gray-500" 
+              onClick={() => setIsMenuOpen(true)}
+              aria-label="Open menu"
+            >
+              <Menu className="h-6 w-6" />
+            </button>
+          </div>
+          
+          {/* Mobile menu */}
+          {isMenuOpen && (
+            <div className="fixed inset-0 z-50 bg-white md:hidden">
+              {/* Mobile menu header - use same container and height as main navbar */}
+              <div className={`${container} flex h-16 items-center justify-between`}>
+                <Link 
+                  href={homeLink} 
+                  className="flex items-center h-12"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  <Image
+                    src="/assets/images/logo.svg"
+                    alt="Logo"
+                    width={125}
+                    height={35}
+                    className="w-[125px] h-auto object-contain"
+                    priority
+                  />
+                </Link>
+                <button 
+                  className="text-gray-500" 
+                  onClick={() => setIsMenuOpen(false)}
+                  aria-label="Close menu"
+                >
+                  <X className="h-6 w-6" />
+                </button>
+              </div>
+              
+              {/* Mobile menu links */}
+              <div className={`${container} flex-1 flex flex-col py-4`}>
+                <div className="space-y-4">
+                  {navLinks.map((link) => {
+                    const isActive = pathname === link.href || 
+                      (link.href !== homeLink && pathname.startsWith(link.href));
+                    
+                    return (
+                      <Link 
+                        key={link.name} 
+                        href={link.href}
+                        className={`block text-lg font-medium py-2 transition-colors ${
+                          isActive 
+                            ? 'text-primary' 
+                            : 'text-black hover:text-primary'
+                        }`}
+                        onClick={() => setIsMenuOpen(false)}
+                      >
+                        {link.name}
+                      </Link>
+                    );
+                  })}
+                  
+                  <div className="py-2">
+                    <LanguageSwitcher />
+                  </div>
+                  
+                  <Link 
+                    href={cartLink}
+                    className="mt-4 flex h-12 w-full items-center justify-center relative"
+                    onClick={() => setIsMenuOpen(false)}
+                  >
+                    <Button
+                      variant="primary"
+                      size="lg"
+                      className="w-full h-full flex items-center justify-center"
+                    >
+                      <span>{t('navbar.cart')}</span>
+                      <Image
+                        src="/assets/images/cart-icon.png"
+                        alt="Cart"
+                        width={20}
+                        height={20}
+                        className="ml-2"
+                      />
+                      {cart?.totalQuantity ? (
+                        <span className="absolute right-4 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs text-white">
+                          {cart.totalQuantity}
+                        </span>
+                      ) : null}
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </header>
+    </>
+  );
+}
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
new file mode 100644
index 0000000..879b135
--- /dev/null
+++ b/components/layout/navbar/search.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import Form from 'next/form';
+import { useSearchParams } from 'next/navigation';
+
+export default function Search() {
+  const searchParams = useSearchParams();
+
+  return (
+    <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        key={searchParams?.get('q')}
+        type="text"
+        name="q"
+        placeholder="Search for products..."
+        autoComplete="off"
+        defaultValue={searchParams?.get('q') || ''}
+        className="w-full px-4 py-2 border"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </Form>
+  );
+}
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
+        className="w-full"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </form>
+  );
+}
diff --git a/components/layout/search/collections.tsx b/components/layout/search/collections.tsx
new file mode 100644
index 0000000..c45833a
--- /dev/null
+++ b/components/layout/search/collections.tsx
@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import { Suspense } from 'react';
+
+import { getCollections } from 'lib/shopify';
+import FilterList from './filter';
+
+async function CollectionList() {
+  const collections = await getCollections();
+  return <FilterList list={collections} title="Collections" />;
+}
+
+const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
+const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
+const items = 'bg-neutral-400 dark:bg-neutral-700';
+
+export default function Collections() {
+  return (
+    <Suspense
+      fallback={
+        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
+          <div className={clsx(skeleton, activeAndTitles)} />
+          <div className={clsx(skeleton, activeAndTitles)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+          <div className={clsx(skeleton, items)} />
+        </div>
+      }
+    >
+      <CollectionList />
+    </Suspense>
+  );
+}
diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
new file mode 100644
index 0000000..31daa25
--- /dev/null
+++ b/components/layout/search/filter/dropdown.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import type { ListItem } from '.';
+import { FilterItem } from './item';
+
+export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const [active, setActive] = useState('');
+  const [openSelect, setOpenSelect] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpenSelect(false);
+      }
+    };
+
+    window.addEventListener('click', handleClickOutside);
+    return () => window.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    list.forEach((listItem: ListItem) => {
+      if (
+        ('path' in listItem && pathname === listItem.path) ||
+        ('slug' in listItem && searchParams.get('sort') === listItem.slug)
+      ) {
+        setActive(listItem.title);
+      }
+    });
+  }, [pathname, list, searchParams]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <div
+        onClick={() => {
+          setOpenSelect(!openSelect);
+        }}
+        className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
+      >
+        <div>{active}</div>
+        <ChevronDownIcon className="h-4" />
+      </div>
+      {openSelect && (
+        <div
+          onClick={() => {
+            setOpenSelect(false);
+          }}
+          className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
+        >
+          {list.map((item: ListItem, i) => (
+            <FilterItem key={i} item={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
new file mode 100644
index 0000000..11a7cd3
--- /dev/null
+++ b/components/layout/search/filter/index.tsx
@@ -0,0 +1,41 @@
+import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
+import FilterItemDropdown from './dropdown';
+import { FilterItem } from './item';
+
+export type ListItem = SortFilterItem | PathFilterItem;
+export type PathFilterItem = { title: string; path: string };
+
+function FilterItemList({ list }: { list: ListItem[] }) {
+  return (
+    <>
+      {list.map((item: ListItem, i) => (
+        <FilterItem key={i} item={item} />
+      ))}
+    </>
+  );
+}
+
+export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
+  return (
+    <>
+      <nav>
+        {title ? (
+          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
+            {title}
+          </h3>
+        ) : null}
+        <ul className="hidden md:block">
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>
+        </ul>
+        <ul className="md:hidden">
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>
+        </ul>
+      </nav>
+    </>
+  );
+}
diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
new file mode 100644
index 0000000..3fce8e8
--- /dev/null
+++ b/components/layout/search/filter/item.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import clsx from 'clsx';
+import type { SortFilterItem } from 'lib/constants';
+import { createUrl } from 'lib/utils';
+import Link from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+import type { ListItem, PathFilterItem } from '.';
+
+function PathFilterItem({ item }: { item: PathFilterItem }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const active = pathname === item.path;
+  const newParams = new URLSearchParams(searchParams.toString());
+  const DynamicTag = active ? 'p' : Link;
+
+  newParams.delete('q');
+
+  return (
+    <li className="mt-2 flex text-black dark:text-white" key={item.title}>
+      <DynamicTag
+        href={createUrl(item.path, newParams)}
+        className={clsx(
+          'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
+          {
+            'underline underline-offset-4': active
+          }
+        )}
+      >
+        {item.title}
+      </DynamicTag>
+    </li>
+  );
+}
+
+function SortFilterItem({ item }: { item: SortFilterItem }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const active = searchParams.get('sort') === item.slug;
+  const q = searchParams.get('q');
+  const href = createUrl(
+    pathname,
+    new URLSearchParams({
+      ...(q && { q }),
+      ...(item.slug && item.slug.length && { sort: item.slug })
+    })
+  );
+  const DynamicTag = active ? 'p' : Link;
+
+  return (
+    <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
+      <DynamicTag
+        prefetch={!active ? false : undefined}
+        href={href}
+        className={clsx('w-full hover:underline hover:underline-offset-4', {
+          'underline underline-offset-4': active
+        })}
+      >
+        {item.title}
+      </DynamicTag>
+    </li>
+  );
+}
+
+export function FilterItem({ item }: { item: ListItem }) {
+  return 'path' in item ? <PathFilterItem item={item} /> : <SortFilterItem item={item} />;
+}
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
new file mode 100644
index 0000000..eccf5cb
--- /dev/null
+++ b/components/logo-square.tsx
@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import LogoIcon from './icons/logo';
+
+export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
+  return (
+    <div
+      className={clsx(
+        'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
+        {
+          'h-[40px] w-[40px] rounded-xl': !size,
+          'h-[30px] w-[30px] rounded-lg': size === 'sm'
+        }
+      )}
+    >
+      <LogoIcon
+        className={clsx({
+          'h-[16px] w-[16px]': !size,
+          'h-[10px] w-[10px]': size === 'sm'
+        })}
+      />
+    </div>
+  );
+}
diff --git a/components/opengraph-image.tsx b/components/opengraph-image.tsx
new file mode 100644
index 0000000..f06bd00
--- /dev/null
+++ b/components/opengraph-image.tsx
@@ -0,0 +1,94 @@
+import { ImageResponse } from 'next/og';
+import { NextRequest } from 'next/server';
+
+export const runtime = 'edge';
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+
+    // ?title=<title>
+    const hasTitle = searchParams.has('title');
+    const title = hasTitle
+      ? searchParams.get('title')?.slice(0, 100)
+      : 'My default title';
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: '#fff',
+          }}
+        >
+          <div
+            style={{
+              fontSize: 60,
+              fontStyle: 'normal',
+              letterSpacing: '-0.025em',
+              color: 'black',
+              marginTop: 30,
+              padding: '0 120px',
+              lineHeight: 1.4,
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            {title}
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  } catch (error: unknown) {
+    console.log(`${error instanceof Error ? error.message : 'Unknown error'}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}
+
+// Default export za korištenje u app/search/[collection]/opengraph-image.tsx
+export default async function OpengraphImage({ title = 'My default title' }: { title?: string }) {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#fff',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 60,
+            fontStyle: 'normal',
+            letterSpacing: '-0.025em',
+            color: 'black',
+            marginTop: 30,
+            padding: '0 120px',
+            lineHeight: 1.4,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {title}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}
diff --git a/components/price.tsx b/components/price.tsx
new file mode 100644
index 0000000..e709014
--- /dev/null
+++ b/components/price.tsx
@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+const Price = ({
+  amount,
+  className,
+  currencyCode = 'USD',
+  currencyCodeClassName
+}: {
+  amount: string;
+  className?: string;
+  currencyCode: string;
+  currencyCodeClassName?: string;
+} & React.ComponentProps<'p'>) => (
+  <p suppressHydrationWarning={true} className={className}>
+    {`${new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: currencyCode,
+      currencyDisplay: 'narrowSymbol'
+    }).format(parseFloat(amount))}`}
+    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
+  </p>
+);
+
+export default Price;
diff --git a/components/product/BackButton.tsx b/components/product/BackButton.tsx
new file mode 100644
index 0000000..4fb3589
--- /dev/null
+++ b/components/product/BackButton.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useRouter } from "next/navigation";
+
+export function BackButton() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  
+  const handleGoBack = () => {
+    // Check if we can go back in history
+    if (window.history.length > 1) {
+      // Go back to previous page
+      router.back();
+    } else {
+      // Fallback to home page if there's no history
+      router.push('/');
+    }
+  };
+
+  return (
+    <button 
+      onClick={handleGoBack}
+      className="flex items-center text-sm text-gray-600 hover:text-black"
+      aria-label={t('product.back')}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+      </svg>
+      {t('product.back')}
+    </button>
+  );
+} 
\ No newline at end of file
diff --git a/components/product/CollapsibleSection.tsx b/components/product/CollapsibleSection.tsx
new file mode 100644
index 0000000..4da3536
--- /dev/null
+++ b/components/product/CollapsibleSection.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { Heading } from '@/components/ui/Typography';
+import { ReactNode } from 'react';
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: ReactNode;
+  isOpen?: boolean;
+  className?: string;
+}
+
+export function CollapsibleSection({ 
+  title, 
+  children, 
+  isOpen = false,
+  className = ''
+}: CollapsibleSectionProps) {
+  return (
+    <details className={`group mb-4 ${className}`} open={isOpen}>
+      <summary className="flex cursor-pointer items-center justify-between py-2">
+        <Heading level={3} className="font-medium">{title}</Heading>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 transition-transform duration-200 group-open:rotate-180"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </summary>
+      <div className="pt-2 pb-6">
+        {children}
+      </div>
+    </details>
+  );
+} 
\ No newline at end of file
diff --git a/components/product/ProductDescription.tsx b/components/product/ProductDescription.tsx
new file mode 100644
index 0000000..4ca88cb
--- /dev/null
+++ b/components/product/ProductDescription.tsx
@@ -0,0 +1,47 @@
+"use client"
+import { Heading, Label } from '@/components/ui/Typography';
+import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import { useState } from 'react';
+import { ProductQuantity } from './ProductQuantity';
+import { VariantSelector } from './VariantSelector';
+
+export function ProductDescription({ product }: { product: Product }) {
+  const [quantity, setQuantity] = useState(1);
+
+  return (
+    <div className="pt-5 overflow-hidden">
+      <div className="mb-6 flex flex-col pb-4 border-b">
+        <Heading level={1} className="mb-3">{product.title}</Heading>
+        <div className="mr-auto w-auto">
+          <Price
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            className="text-xl"
+          />
+        </div>
+      </div>
+      
+      {product.descriptionHtml ? (
+        <Prose
+          className="mb-6 text-gray-600"
+          html={product.descriptionHtml}
+        />
+      ) : null}
+      
+      <VariantSelector options={product.options} variants={product.variants} />
+      
+      <div className="mt-8 mb-6">
+        <Label className="mb-2">Quantity</Label>
+        <ProductQuantity 
+          onChange={setQuantity} 
+          initialQuantity={1}
+        />
+      </div>
+      
+      <AddToCart product={product} quantity={quantity} />
+    </div>
+  );
+}
diff --git a/components/product/ProductDetailsSection.tsx b/components/product/ProductDetailsSection.tsx
new file mode 100644
index 0000000..c18568c
--- /dev/null
+++ b/components/product/ProductDetailsSection.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { CollapsibleSection } from './CollapsibleSection';
+
+export function ProductDetailsSection() {
+  return (
+    <div className="mt-8 border-t pt-8">
+      <CollapsibleSection title="Details" isOpen={true}>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 
+          eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum 
+          nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id 
+          rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
+        </p>
+      </CollapsibleSection>
+      
+      <CollapsibleSection title="Shipping" className="border-t">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 
+          eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum 
+          nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id 
+          rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
+        </p>
+      </CollapsibleSection>
+      
+      <CollapsibleSection title="Returns" className="border-t">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in 
+          eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum 
+          nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id 
+          rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
+        </p>
+      </CollapsibleSection>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/product/ProductGallery.tsx b/components/product/ProductGallery.tsx
new file mode 100644
index 0000000..1cfca48
--- /dev/null
+++ b/components/product/ProductGallery.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Image as ImageType } from 'lib/shopify/types';
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface ProductGalleryProps {
+  images: ImageType[];
+}
+
+export function ProductGallery({ images = [] }: ProductGalleryProps) {
+  const [selectedImage, setSelectedImage] = useState(0);
+
+  if (!images.length) {
+    return (
+      <div className="aspect-square w-full bg-gray-100 flex items-center justify-center">
+        <p className="text-gray-500">No image available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row gap-3 md:items-start pt-5 w-full overflow-hidden">
+      {/* Thumbnails */}
+      <div className="order-2 md:order-1 flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[600px] md:w-16 flex-shrink-0">
+        {images.map((image, index) => (
+          <button
+            key={`${image.url}-${index}`}
+            className={`relative h-14 w-14 flex-shrink-0 overflow-hidden border ${
+              selectedImage === index ? 'border-black' : 'border-gray-200'
+            }`}
+            onClick={() => setSelectedImage(index)}
+            aria-label={`View image ${index + 1} of ${images.length}`}
+          >
+            <Image
+              src={image.url}
+              alt={image.altText || ''}
+              fill
+              className="object-cover"
+              sizes="56px"
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Main image */}
+      <div className="order-1 md:order-2 relative w-full h-[500px] md:h-[550px] flex-grow overflow-hidden">
+        <div className="w-full h-full relative">
+          {images[selectedImage] && (
+            <img
+              src={images[selectedImage].url}
+              alt={images[selectedImage].altText || ''}
+              className="w-full h-full object-cover object-top"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/product/ProductQuantity.tsx b/components/product/ProductQuantity.tsx
new file mode 100644
index 0000000..43d3f0a
--- /dev/null
+++ b/components/product/ProductQuantity.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState } from 'react';
+
+interface ProductQuantityProps {
+  onChange: (quantity: number) => void;
+  initialQuantity?: number;
+  min?: number;
+  max?: number;
+}
+
+export function ProductQuantity({ 
+  onChange, 
+  initialQuantity = 1,
+  min = 1,
+  max = 100
+}: ProductQuantityProps) {
+  const [quantity, setQuantity] = useState(initialQuantity);
+  
+  const handleIncrement = () => {
+    if (quantity < max) {
+      const newQuantity = quantity + 1;
+      setQuantity(newQuantity);
+      onChange(newQuantity);
+    }
+  };
+  
+  const handleDecrement = () => {
+    if (quantity > min) {
+      const newQuantity = quantity - 1;
+      setQuantity(newQuantity);
+      onChange(newQuantity);
+    }
+  };
+  
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= min && value <= max) {
+      setQuantity(value);
+      onChange(value);
+    }
+  };
+  
+  return (
+    <div className="flex items-center">
+      <button 
+        onClick={handleDecrement}
+        type="button"
+        className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
+        disabled={quantity <= min}
+      >
+        -
+      </button>
+      <input
+        type="text"
+        value={quantity}
+        onChange={handleInputChange}
+        className="w-16 h-10 border-t border-b border-gray-300 text-center focus:outline-none"
+        aria-label="Količina"
+      />
+      <button 
+        onClick={handleIncrement}
+        type="button"
+        className="w-10 h-10 border border-gray-300 flex items-center justify-center text-lg font-medium text-gray-600 hover:bg-gray-50"
+        disabled={quantity >= max}
+      >
+        +
+      </button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/product/VariantSelector.tsx b/components/product/VariantSelector.tsx
new file mode 100644
index 0000000..6c7c0ba
--- /dev/null
+++ b/components/product/VariantSelector.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import clsx from 'clsx';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
+import { ProductOption, ProductVariant } from 'lib/shopify/types';
+
+type Combination = {
+  id: string;
+  availableForSale: boolean;
+  [key: string]: string | boolean;
+};
+
+export function VariantSelector({
+  options,
+  variants
+}: {
+  options: ProductOption[];
+  variants: ProductVariant[];
+}) {
+  const { state, updateOption } = useProduct();
+  const updateURL = useUpdateURL();
+  const hasNoOptionsOrJustOneOption =
+    !options.length || (options.length === 1 && options[0]?.values.length === 1);
+
+  if (hasNoOptionsOrJustOneOption) {
+    return null;
+  }
+
+  const combinations: Combination[] = variants.map((variant) => ({
+    id: variant.id,
+    availableForSale: variant.availableForSale,
+    ...variant.selectedOptions.reduce(
+      (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
+      {}
+    )
+  }));
+
+  return options.map((option) => (
+    <form key={option.id}>
+      <dl className="mb-8">
+        <dt className="mb-4">{option.name}</dt>
+        <dd className="flex flex-wrap gap-3">
+          {option.values.map((value) => {
+            const optionNameLowerCase = option.name.toLowerCase();
+
+            // Base option params on current selectedOptions so we can preserve any other param state.
+            const optionParams = { ...state, [optionNameLowerCase]: value };
+
+            // Filter out invalid options and check if the option combination is available for sale.
+            const filtered = Object.entries(optionParams).filter(([key, value]) =>
+              options.find(
+                (option) => option.name.toLowerCase() === key && option.values.includes(value)
+              )
+            );
+            const isAvailableForSale = combinations.find((combination) =>
+              filtered.every(
+                ([key, value]) => combination[key] === value && combination.availableForSale
+              )
+            );
+
+            // The option is active if it's in the selected options.
+            const isActive = state[optionNameLowerCase] === value;
+
+            return (
+              <button
+                formAction={() => {
+                  const newState = updateOption(optionNameLowerCase, value);
+                  updateURL(newState);
+                }}
+                key={value}
+                aria-disabled={!isAvailableForSale}
+                disabled={!isAvailableForSale}
+                title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
+                className={clsx(
+                  'flex min-w-[48px] items-center justify-center px-2 py-1',
+                  {
+                    'cursor-default ring-2': isActive,
+                    'ring-1 ring-transparent':
+                      !isActive && isAvailableForSale,
+                    'relative z-10 cursor-not-allowed overflow-hidden':
+                      !isAvailableForSale
+                  }
+                )}
+              >
+                {value}
+              </button>
+            );
+          })}
+        </dd>
+      </dl>
+    </form>
+  ));
+}
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
new file mode 100644
index 0000000..4b5beda
--- /dev/null
+++ b/components/product/gallery.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import { GridTileImage } from 'components/grid/tile';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
+import Image from 'next/image';
+
+export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
+  const { state, updateImage } = useProduct();
+  const updateURL = useUpdateURL();
+  const imageIndex = state.image ? parseInt(state.image) : 0;
+
+  const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
+  const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
+
+  const buttonClassName =
+    'h-full px-6 flex items-center justify-center';
+
+  return (
+    <form>
+      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
+        {images[imageIndex] && (
+          <Image
+            className="h-full w-full object-contain"
+            fill
+            sizes="(min-width: 1024px) 66vw, 100vw"
+            alt={images[imageIndex]?.altText as string}
+            src={images[imageIndex]?.src as string}
+            priority={true}
+          />
+        )}
+
+        {images.length > 1 ? (
+          <div className="absolute bottom-[15%] flex w-full justify-center">
+            <div className="mx-auto flex h-11 items-center">
+              <button
+                formAction={() => {
+                  const newState = updateImage(previousImageIndex.toString());
+                  updateURL(newState);
+                }}
+                aria-label="Previous product image"
+                className={buttonClassName}
+              >
+                <ArrowLeftIcon className="h-5" />
+              </button>
+              <div className="mx-1 h-6 w-px "></div>
+              <button
+                formAction={() => {
+                  const newState = updateImage(nextImageIndex.toString());
+                  updateURL(newState);
+                }}
+                aria-label="Next product image"
+                className={buttonClassName}
+              >
+                <ArrowRightIcon className="h-5" />
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      {images.length > 1 ? (
+        <ul className="my-12 flex items-center flex-wrap justify-center gap-2 overflow-auto py-1 lg:mb-0">
+          {images.map((image, index) => {
+            const isActive = index === imageIndex;
+
+            return (
+              <li key={image.src} className="h-20 w-20">
+                <button
+                  formAction={() => {
+                    const newState = updateImage(index.toString());
+                    updateURL(newState);
+                  }}
+                  aria-label="Select product image"
+                  className="h-full w-full"
+                >
+                  <GridTileImage
+                    alt={image.altText}
+                    src={image.src}
+                    width={80}
+                    height={80}
+                    active={isActive}
+                  />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      ) : null}
+    </form>
+  );
+}
diff --git a/components/product/product-context.tsx b/components/product/product-context.tsx
new file mode 100644
index 0000000..cc964c5
--- /dev/null
+++ b/components/product/product-context.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { createContext, useContext, useMemo, useOptimistic } from 'react';
+
+type ProductState = {
+  [key: string]: string;
+} & {
+  image?: string;
+};
+
+type ProductContextType = {
+  state: ProductState;
+  updateOption: (name: string, value: string) => ProductState;
+  updateImage: (index: string) => ProductState;
+};
+
+const ProductContext = createContext<ProductContextType | undefined>(undefined);
+
+export function ProductProvider({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+
+  const getInitialState = () => {
+    const params: ProductState = {};
+    for (const [key, value] of searchParams.entries()) {
+      params[key] = value;
+    }
+    return params;
+  };
+
+  const [state, setOptimisticState] = useOptimistic(
+    getInitialState(),
+    (prevState: ProductState, update: ProductState) => ({
+      ...prevState,
+      ...update
+    })
+  );
+
+  const updateOption = (name: string, value: string) => {
+    const newState = { [name]: value };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const updateImage = (index: string) => {
+    const newState = { image: index };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const value = useMemo(
+    () => ({
+      state,
+      updateOption,
+      updateImage
+    }),
+    [state]
+  );
+
+  return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
+}
+
+export function useProduct() {
+  const context = useContext(ProductContext);
+  if (context === undefined) {
+    throw new Error('useProduct must be used within a ProductProvider');
+  }
+  return context;
+}
+
+export function useUpdateURL() {
+  const router = useRouter();
+
+  return (state: ProductState) => {
+    const newParams = new URLSearchParams(window.location.search);
+    Object.entries(state).forEach(([key, value]) => {
+      newParams.set(key, value);
+    });
+    router.push(`?${newParams.toString()}`, { scroll: false });
+  };
+}
diff --git a/components/products/AddToBoxButton.tsx b/components/products/AddToBoxButton.tsx
new file mode 100644
index 0000000..722389a
--- /dev/null
+++ b/components/products/AddToBoxButton.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { Button } from "@/components/ui/Button";
+import { useAppDispatch } from "@/lib/redux/hooks";
+import { addToBox } from "@/lib/redux/slices/boxSlice";
+import { useState } from "react";
+
+interface AddToBoxButtonProps {
+  productId: string;
+  name: string;
+  price: number;
+  image: string;
+  variantId?: string;
+  color?: string;
+  className?: string;
+}
+
+export function AddToBoxButton({
+  productId,
+  name,
+  price,
+  image,
+  variantId,
+  color,
+  className = ""
+}: AddToBoxButtonProps) {
+  const dispatch = useAppDispatch();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleAddToBox = () => {
+    if (isLoading) return;
+    
+    setIsLoading(true);
+    
+    dispatch(addToBox({
+      id: productId,
+      name,
+      price,
+      image,
+      quantity: 1,
+      variantId,
+      color
+    }));
+    
+    // Add a small delay to simulate adding to cart for better UX
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+  };
+
+  return (
+    <Button
+      onClick={handleAddToBox}
+      disabled={isLoading}
+      variant="primary"
+      size="lg"
+      className={`w-full ${className}`}
+    >
+      {isLoading ? "Dodaje se..." : "Dodaj u box"}
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/FilterSidebar.tsx b/components/products/FilterSidebar.tsx
new file mode 100644
index 0000000..1d96a32
--- /dev/null
+++ b/components/products/FilterSidebar.tsx
@@ -0,0 +1,477 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { RadioButton } from '@/components/ui/RadioButton';
+import { Heading } from '@/components/ui/Typography';
+import { useEffect, useRef, useState } from 'react';
+import { SortDropdown } from './client/SortDropdown';
+
+interface FilterSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplyFilters: (filters: string[]) => void;
+  activeFilters: string[];
+}
+
+interface FilterCategory {
+  name: string;
+  type?: 'checkbox' | 'radio' | 'dropdown';
+  options: string[];
+}
+
+const FILTER_CATEGORIES: FilterCategory[] = [
+  {
+    name: 'Filter One',
+    type: 'checkbox',
+    options: ['Test One', 'Test Two', 'Test Three', 'Test Four', 'Test Five']
+  },
+  {
+    name: 'Filter Two',
+    type: 'radio',
+    options: ['All', 'Option One', 'Option Two', 'Option Three', 'Option Four', 'Option Five']
+  },
+  {
+    name: 'Filter Six',
+    type: 'dropdown',
+    options: ['Select 1', 'Select 2', 'Select 3']
+  }
+];
+
+// Helper function to create a unique filter key
+const getFilterKey = (category: string, option: string) => {
+  return `${category}:${option}`;
+};
+
+// Helper function to extract the option from a filter key
+const getOptionFromKey = (filterKey: string) => {
+  const parts = filterKey.split(':');
+  return parts.length > 1 ? parts[1] : filterKey;
+};
+
+// Helper function to extract the category from a filter key
+const getCategoryFromKey = (filterKey: string) => {
+  const parts = filterKey.split(':');
+  return parts.length > 1 ? parts[0] : '';
+};
+
+export function FilterSidebar({ isOpen, onClose, onApplyFilters, activeFilters }: FilterSidebarProps) {
+  const [minPrice, setMinPrice] = useState(5);
+  const [maxPrice, setMaxPrice] = useState(100);
+  const [localFilters, setLocalFilters] = useState<string[]>([]);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const rangeRef = useRef<HTMLDivElement>(null);
+  
+  // Update the range slider fill with primary color
+  const updateRangeStyle = () => {
+    if (rangeRef.current) {
+      const percentage1 = Math.min((minPrice / 100) * 100, 100);
+      const percentage2 = Math.min((maxPrice / 100) * 100, 100);
+      rangeRef.current.style.background = `linear-gradient(to right, #e5e7eb ${percentage1}%, var(--primary-color, #D94D72) ${percentage1}%, var(--primary-color, #D94D72) ${percentage2}%, #e5e7eb ${percentage2}%)`;
+    }
+  };
+
+  // Update range fill on mount and when prices change
+  useEffect(() => {
+    updateRangeStyle();
+  }, [minPrice, maxPrice]);
+  
+  // Sync activeFilters with localFilters when sidebar opens
+  useEffect(() => {
+    if (isOpen) {
+      setLocalFilters([...activeFilters]);
+      
+      // Check for price filter in active filters
+      const priceFilter = activeFilters.find(filter => filter.startsWith('Cijena:'));
+      if (priceFilter) {
+        const priceMatch = priceFilter.match(/Cijena: (\d+)€ - (\d+)€/);
+        if (priceMatch && priceMatch[1] && priceMatch[2]) {
+          setMinPrice(parseInt(priceMatch[1]));
+          setMaxPrice(parseInt(priceMatch[2]));
+        }
+      } else {
+        // Reset to default values if no price filter
+        setMinPrice(5);
+        setMaxPrice(100);
+      }
+      
+      // Reset scroll position when sidebar opens
+      if (sidebarRef.current) {
+        sidebarRef.current.scrollTop = 0;
+      }
+    }
+  }, [isOpen, activeFilters]);
+
+  // Lock body scroll when sidebar is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen]);
+
+  const toggleFilter = (category: string, option: string) => {
+    const filterKey = getFilterKey(category, option);
+    if (localFilters.includes(filterKey)) {
+      setLocalFilters(localFilters.filter(f => f !== filterKey));
+    } else {
+      setLocalFilters([...localFilters, filterKey]);
+    }
+  };
+
+  const clearFilters = () => {
+    setLocalFilters([]);
+    setMinPrice(5);
+    setMaxPrice(100);
+  };
+
+  const clearFilterCategory = (category: string) => {
+    setLocalFilters(localFilters.filter(f => !f.startsWith(`${category}:`)));
+  };
+
+  const clearPriceRange = () => {
+    // Reset price values
+    setMinPrice(5);
+    setMaxPrice(100);
+    
+    // Remove any price filter tags
+    setLocalFilters(localFilters.filter(f => !f.startsWith('Cijena:')));
+  };
+
+  const applyFilters = () => {
+    // Create a copy of localFilters, removing any existing price filters
+    let filtersToApply = localFilters.filter(f => !f.startsWith('Cijena:'));
+    
+    // Ensure min price doesn't exceed max price
+    let finalMinPrice = minPrice;
+    let finalMaxPrice = maxPrice;
+    
+    if (finalMinPrice > finalMaxPrice) {
+      finalMinPrice = finalMaxPrice;
+    }
+    
+    // Add price range as a filter tag
+    if (finalMinPrice > 5 || finalMaxPrice !== 100) {
+      filtersToApply.push(`Cijena: ${finalMinPrice}€ - ${finalMaxPrice}€`);
+    }
+    
+    onApplyFilters(filtersToApply);
+    onClose();
+  };
+
+  // Handle price range min input change
+  const handleMinPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setMinPrice(value);
+      // If min exceeds max, adjust max as well
+      if (value > maxPrice) {
+        setMaxPrice(value);
+      }
+    }
+  };
+
+  // Handle price range max input change
+  const handleMaxPriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value);
+    if (!isNaN(value) && value >= 0) {
+      setMaxPrice(value);
+    }
+  };
+
+  // Extract filter option handlers for cleaner code
+  const handleRadioChange = (category: string, option: string, categoryOptions: string[]) => {
+    // Get all filter keys for this category
+    const categoryFilterPrefix = `${category}:`;
+    
+    // Remove previous selections from this category
+    const filtersWithoutCategory = localFilters.filter(f => !f.startsWith(categoryFilterPrefix));
+    
+    if (option === 'All') {
+      // If 'All' is selected, don't add any new filter for this category
+      setLocalFilters(filtersWithoutCategory);
+    } else {
+      // Add the new selected option with category prefix
+      setLocalFilters([...filtersWithoutCategory, getFilterKey(category, option)]);
+    }
+  };
+
+  const handleDropdownChange = (category: string, value: string) => {
+    if (value) {
+      // Get all filter keys for this category
+      const categoryFilterPrefix = `${category}:`;
+      
+      // Remove previous selections from this category
+      const filtersWithoutCategory = localFilters.filter(f => !f.startsWith(categoryFilterPrefix));
+      
+      // Add the new selected option with category prefix
+      setLocalFilters([...filtersWithoutCategory, getFilterKey(category, value)]);
+    }
+  };
+
+  return (
+    <>
+      {/* Overlay - adjusted to only cover the product grid area */}
+      {isOpen && (
+        <div 
+          className="fixed inset-x-0 bottom-0 bg-black bg-opacity-50 z-30"
+          onClick={onClose}
+          style={{ 
+            top: '0', // Same as sidebar top position
+            bottom: '0',  // Allow footer to be visible
+          }}
+        />
+      )}
+      
+      {/* Sidebar - positioned exactly below navbar */}
+      <div 
+        ref={sidebarRef}
+        className={`fixed left-0 h-[calc(100vh-64px)] w-[350px] bg-white z-40 transform transition-transform duration-300 ease-in-out ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        } overflow-y-auto shadow-lg`}
+        style={{ top: '64px', margin: 0, padding: 0 }} // Exactly at navbar bottom with no space
+      >
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex justify-between items-center mb-4">
+            <Heading level={4} className="font-semibold">Filteri</Heading>
+            <button onClick={onClose} className="text-black">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-6 h-6">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <hr className="border-gray-200 mb-4" />
+          
+          {/* Filter sections */}
+          <div className="space-y-4">
+            {/* Checkbox Filter */}
+            <div>
+              <div className="flex justify-between items-center mb-3">
+                <Heading level={4} className="font-medium">{FILTER_CATEGORIES[0]?.name}</Heading>
+                <button 
+                  onClick={() => clearFilterCategory(FILTER_CATEGORIES[0]?.name || '')}
+                  className="text-sm text-gray-500 hover:text-black"
+                >
+                  Clear
+                </button>
+              </div>
+              
+              <div className="space-y-3">
+                {FILTER_CATEGORIES[0]?.options.map((option) => (
+                  <div key={option}>
+                    <Checkbox
+                      id={option}
+                      checked={localFilters.includes(getFilterKey(FILTER_CATEGORIES[0]?.name || '', option))}
+                      onChange={() => toggleFilter(FILTER_CATEGORIES[0]?.name || '', option)}
+                      label={option}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <hr className="border-gray-200" />
+            
+            {/* Radio Filter */}
+            <div>
+              <div className="flex justify-between items-center mb-3">
+                <Heading level={4} className="font-medium">{FILTER_CATEGORIES[1]?.name}</Heading>
+                <button 
+                  onClick={() => clearFilterCategory(FILTER_CATEGORIES[1]?.name || '')}
+                  className="text-sm text-gray-500 hover:text-black"
+                >
+                  Clear
+                </button>
+              </div>
+              
+              <div className="space-y-3">
+                {FILTER_CATEGORIES[1]?.options.map((option) => (
+                  <div key={option}>
+                    <RadioButton
+                      id={`radio-${option}`}
+                      name="filter-two"
+                      value={option}
+                      checked={
+                        option === 'All' 
+                          ? !localFilters.some(f => f.startsWith(`${FILTER_CATEGORIES[1]?.name}:`) && !f.endsWith(':All')) 
+                          : localFilters.includes(getFilterKey(FILTER_CATEGORIES[1]?.name || '', option))
+                      }
+                      onChange={() => handleRadioChange(FILTER_CATEGORIES[1]?.name || '', option, FILTER_CATEGORIES[1]?.options || [])}
+                      label={option}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            
+            <hr className="border-gray-200" />
+            
+            {/* Dropdown Filter */}
+            <div>
+              <div className="flex justify-between items-center mb-3">
+                <Heading level={4} className="font-medium">{FILTER_CATEGORIES[2]?.name}</Heading>
+                <button 
+                  onClick={() => clearFilterCategory(FILTER_CATEGORIES[2]?.name || '')}
+                  className="text-sm text-gray-500 hover:text-black"
+                >
+                  Clear
+                </button>
+              </div>
+              
+              <SortDropdown 
+                value={localFilters.find(f => f.startsWith(`${FILTER_CATEGORIES[2]?.name}:`))?.split(':')[1] || ''}
+                onChange={(value) => handleDropdownChange(FILTER_CATEGORIES[2]?.name || '', value)}
+                label=""
+              />
+            </div>
+            
+            <hr className="border-gray-200" />
+            
+            {/* Price Range */}
+            <div>
+              <div className="flex justify-between items-center mb-3">
+                <Heading level={4} className="font-medium">Cijena</Heading>
+                <button 
+                  onClick={clearPriceRange}
+                  className="text-sm text-gray-500 hover:text-black"
+                >
+                  Clear
+                </button>
+              </div>
+              
+              {/* Min-Max Range Inputs */}
+              <div className="flex space-x-4 mb-4">
+                <div className="w-1/2">
+                  <label htmlFor="min-price" className="text-sm block mb-1">Od</label>
+                  <input
+                    type="number"
+                    id="min-price"
+                    min="0"
+                    value={minPrice}
+                    onChange={handleMinPriceChange}
+                    className="w-full border border-gray-300 rounded-md p-2"
+                  />
+                </div>
+                <div className="w-1/2">
+                  <label htmlFor="max-price" className="text-sm block mb-1">Do</label>
+                  <input
+                    type="number"
+                    id="max-price"
+                    min="0"
+                    value={maxPrice}
+                    onChange={handleMaxPriceChange}
+                    className="w-full border border-gray-300 rounded-md p-2"
+                  />
+                </div>
+              </div>
+              
+              {/* Dual Range Slider */}
+              <div className="relative pt-5 pb-8">
+                <div 
+                  ref={rangeRef} 
+                  className="w-full h-1 bg-gray-200 rounded absolute top-6"
+                ></div>
+                
+                {/* Min range slider */}
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={Math.min(minPrice, 100)}
+                  onChange={(e) => {
+                    const value = parseInt(e.target.value);
+                    if (value < maxPrice) {
+                      setMinPrice(value);
+                    }
+                  }}
+                  className="absolute top-4 w-full pointer-events-none appearance-none bg-transparent z-30"
+                  style={{
+                    WebkitAppearance: 'none',
+                    appearance: 'none'
+                  }}
+                />
+                
+                {/* Max range slider */}
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={Math.min(maxPrice, 100)}
+                  onChange={(e) => {
+                    const value = parseInt(e.target.value);
+                    if (value > minPrice) {
+                      setMaxPrice(value);
+                    }
+                  }}
+                  className="absolute top-4 w-full pointer-events-none appearance-none bg-transparent z-30"
+                  style={{
+                    WebkitAppearance: 'none',
+                    appearance: 'none'
+                  }}
+                />
+                
+                <style jsx>{`
+                  :root {
+                    --primary-color: #D94D72;
+                  }
+                  input[type='range']::-webkit-slider-thumb {
+                    -webkit-appearance: none;
+                    pointer-events: all;
+                    width: 16px;
+                    height: 16px;
+                    background-color: white;
+                    border: 1px solid var(--primary-color, #D94D72);
+                    border-radius: 50%;
+                    cursor: pointer;
+                  }
+                  
+                  input[type='range']::-moz-range-thumb {
+                    pointer-events: all;
+                    width: 16px;
+                    height: 16px;
+                    background-color: white;
+                    border: 1px solid var(--primary-color, #D94D72);
+                    border-radius: 50%;
+                    cursor: pointer;
+                  }
+                `}</style>
+              </div>
+              
+              <div className="flex justify-between mt-1">
+                <span className="text-sm">{minPrice}€</span>
+                <span className="text-sm">{maxPrice}€</span>
+              </div>
+            </div>
+          </div>
+          
+          {/* Bottom Controls */}
+          <div className="mt-8">
+            <hr className="border-gray-200 mb-4" />
+            <div className="flex justify-between items-center">
+              <Button 
+                onClick={clearFilters} 
+                variant="outline"
+                size="sm"
+              >
+                Obriši sve
+              </Button>
+              <Button 
+                onClick={applyFilters}
+                variant="primary"
+                size="sm"
+              >
+                Filtriraj
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductComponents/FilterButton.tsx b/components/products/ProductComponents/FilterButton.tsx
new file mode 100644
index 0000000..baff7b3
--- /dev/null
+++ b/components/products/ProductComponents/FilterButton.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+interface FilterButtonProps {
+  onClick: () => void;
+  filterText?: string;
+}
+
+export function FilterButton({ onClick, filterText = "Filteri" }: FilterButtonProps) {
+  return (
+    <button 
+      onClick={onClick} 
+      className="border border-gray-300 px-4 py-2 rounded-md flex items-center"
+    >
+      <svg 
+        className="w-4 h-4 mr-2" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4h18M3 12h18M3 20h18" />
+      </svg>
+      <span>{filterText}</span>
+    </button>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductComponents/FilterTagList.tsx b/components/products/ProductComponents/FilterTagList.tsx
new file mode 100644
index 0000000..d72d43f
--- /dev/null
+++ b/components/products/ProductComponents/FilterTagList.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+interface FilterTagListProps {
+  filters: string[];
+  formatTag: (filter: string) => string;
+  onRemove: (filter: string) => void;
+  onClearAll: () => void;
+  clearAllText?: string;
+}
+
+export function FilterTagList({ 
+  filters, 
+  formatTag, 
+  onRemove, 
+  onClearAll,
+  clearAllText = "Očisti sve"
+}: FilterTagListProps) {
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {filters.map((filter) => (
+        <div 
+          key={filter} 
+          className="bg-gray-100 text-sm py-1 px-3 rounded-full flex items-center"
+        >
+          <span>{formatTag(filter)}</span>
+          <button 
+            onClick={() => onRemove(filter)}
+            className="ml-2 text-gray-500 hover:text-gray-700"
+          >
+            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+              <path 
+                fillRule="evenodd" 
+                d="M10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l3.293 3.293a1 1 0 01-1.414 1.414L10 11.414l-3.293 3.293a1 1 0 01-1.414-1.414L8.586 10 5.293 6.707a1 1 0 011.414-1.414L10 8.586z" 
+                clipRule="evenodd" 
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+      <button
+        onClick={onClearAll}
+        className="text-primary text-sm font-medium hover:underline"
+      >
+        {clearAllText}
+      </button>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductComponents/ProductCounter.tsx b/components/products/ProductComponents/ProductCounter.tsx
new file mode 100644
index 0000000..f54309e
--- /dev/null
+++ b/components/products/ProductComponents/ProductCounter.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+interface ProductCounterProps {
+  count: number;
+}
+
+export function ProductCounter({ count }: ProductCounterProps) {
+  return (
+    <p className="text-sm text-gray-500">
+      Prikazuje se {count} proizvoda
+    </p>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductComponents/ProductsList.tsx b/components/products/ProductComponents/ProductsList.tsx
new file mode 100644
index 0000000..501a8d8
--- /dev/null
+++ b/components/products/ProductComponents/ProductsList.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { getProductColors } from "@/components/products/utils/colorUtils";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { Product } from "lib/shopify/types";
+
+interface ProductsListProps {
+  products: Product[];
+}
+
+export function ProductsList({ products }: ProductsListProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
+      {products.map((product) => (
+        <div key={product.id} className="h-full">
+          <ProductCard 
+            title={product.title}
+            variant={product.variants[0]?.title || ""}
+            price={parseFloat(product.priceRange.maxVariantPrice.amount)}
+            imageSrc={product.featuredImage?.url || "/assets/images/placeholder_image.svg"}
+            slug={product.handle}
+            product={product}
+            colors={getProductColors(product)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductComponents/SortDropdown.tsx b/components/products/ProductComponents/SortDropdown.tsx
new file mode 100644
index 0000000..65c68a6
--- /dev/null
+++ b/components/products/ProductComponents/SortDropdown.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+interface SortDropdownProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SortDropdown({ value, onChange }: SortDropdownProps) {
+  return (
+    <div>
+      <select 
+        className="border border-gray-300 px-4 py-2 rounded-md"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        <option value="default">Poredaj po</option>
+        <option value="newest">Najnovije</option>
+        <option value="price-asc">Cijena: Od niže prema višoj</option>
+        <option value="price-desc">Cijena: Od više prema nižoj</option>
+        <option value="name-asc">Naziv: A-Z</option>
+        <option value="name-desc">Naziv: Z-A</option>
+      </select>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductGrid.tsx b/components/products/ProductGrid.tsx
new file mode 100644
index 0000000..e41343d
--- /dev/null
+++ b/components/products/ProductGrid.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { Product } from "lib/shopify/types";
+import { useState } from "react";
+import { Heading } from "../ui/Typography";
+import { FilterSidebar } from "./FilterSidebar";
+import { FilterButton } from "./ProductComponents/FilterButton";
+import { FilterTagList } from "./ProductComponents/FilterTagList";
+import { ProductCounter } from "./ProductComponents/ProductCounter";
+import { ProductsList } from "./ProductComponents/ProductsList";
+import { SortDropdown } from "./client/SortDropdown";
+import { useProductFilters } from "./hooks/useProductFilters";
+
+interface ProductGridProps {
+  products: Product[];
+  title?: string;
+  showControls?: boolean;
+}
+
+export function ProductGrid({ products, title = "Gotovi proizvodi", showControls = true }: ProductGridProps) {
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const { 
+    activeFilters, 
+    sortOption, 
+    sortedProducts, 
+    handleApplyFilters, 
+    handleSortChange, 
+    removeFilter, 
+    clearAllFilters, 
+    formatFilterTag 
+  } = useProductFilters(products);
+
+  return (
+    <div className="w-full">
+      <div>
+        {title && <Heading level={2} className="mb-8">{title}</Heading>}
+        
+        {/* Filter and Sort Controls */}
+        {showControls && (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <FilterButton onClick={() => setSidebarOpen(true)} />
+              <SortDropdown 
+                value={sortOption} 
+                onChange={handleSortChange} 
+              />
+            </div>
+            
+            {/* Filter tags and product count */}
+            <div className="flex justify-between items-center mb-8">
+              <FilterTagList 
+                filters={activeFilters} 
+                formatTag={formatFilterTag} 
+                onRemove={removeFilter} 
+                onClearAll={clearAllFilters} 
+              />
+              <ProductCounter count={sortedProducts.length} />
+            </div>
+          </>
+        )}
+        
+        {/* Products grid */}
+        <ProductsList products={showControls ? sortedProducts : products} />
+      </div>
+
+      {/* Filter Sidebar */}
+      {showControls && (
+        <FilterSidebar
+          isOpen={isSidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          onApplyFilters={handleApplyFilters}
+          activeFilters={activeFilters}
+        />
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/ProductsPage.tsx b/components/products/ProductsPage.tsx
new file mode 100644
index 0000000..369913a
--- /dev/null
+++ b/components/products/ProductsPage.tsx
@@ -0,0 +1,11 @@
+import { getRegularProducts } from "lib/shopify";
+import { ProductsPageContent } from "./client/ProductsPageContent";
+
+export async function ProductsPage() {
+  const products = await getRegularProducts({
+    sortKey: 'CREATED_AT',
+    reverse: true
+  });
+  
+  return <ProductsPageContent products={products} />;
+} 
\ No newline at end of file
diff --git a/components/products/client/ProductCounter.tsx b/components/products/client/ProductCounter.tsx
new file mode 100644
index 0000000..aa67253
--- /dev/null
+++ b/components/products/client/ProductCounter.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+
+interface ProductCounterProps {
+  count: number;
+}
+
+export function ProductCounter({ count }: ProductCounterProps) {
+  const { t } = useTranslation();
+  
+  return (
+    <p className="text-sm text-gray-500">
+      {t('products.counter.showing').replace('{count}', count.toString())}
+    </p>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/client/ProductGridWithTranslation.tsx b/components/products/client/ProductGridWithTranslation.tsx
new file mode 100644
index 0000000..5150dac
--- /dev/null
+++ b/components/products/client/ProductGridWithTranslation.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { Product } from "lib/shopify/types";
+import { useState } from "react";
+import { Heading } from "../../ui/Typography";
+import { FilterSidebar } from "../FilterSidebar";
+import { FilterButton } from "../ProductComponents/FilterButton";
+import { FilterTagList } from "../ProductComponents/FilterTagList";
+import { ProductsList } from "../ProductComponents/ProductsList";
+import { ProductCounter } from "../client/ProductCounter";
+import { SortDropdown } from "../client/SortDropdown";
+import { useProductFilters } from "../hooks/useProductFilters";
+
+interface ProductGridWithTranslationProps {
+  products: Product[];
+}
+
+export function ProductGridWithTranslation({ products }: ProductGridWithTranslationProps) {
+  const { t } = useTranslation();
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const { 
+    activeFilters, 
+    sortOption, 
+    sortedProducts, 
+    handleApplyFilters, 
+    handleSortChange, 
+    removeFilter, 
+    clearAllFilters, 
+    formatFilterTag 
+  } = useProductFilters(products);
+
+  return (
+    <div className="w-full">
+      <div>
+        <Heading level={2} className="mb-8">{t('products.title')}</Heading>
+        
+        {/* Filter and Sort Controls */}
+        <div className="flex justify-between items-center mb-4">
+          <FilterButton 
+            onClick={() => setSidebarOpen(true)} 
+            filterText={t('products.filters.button')} 
+          />
+          <SortDropdown 
+            value={sortOption} 
+            onChange={handleSortChange} 
+          />
+        </div>
+        
+        {/* Filter tags and product count */}
+        <div className="flex justify-between items-center mb-8">
+          <FilterTagList 
+            filters={activeFilters} 
+            formatTag={formatFilterTag} 
+            onRemove={removeFilter} 
+            onClearAll={clearAllFilters}
+            clearAllText={t('products.filters.clearAll')}
+          />
+          <ProductCounter count={sortedProducts.length} />
+        </div>
+        
+        {/* Products grid */}
+        <ProductsList products={sortedProducts} />
+      </div>
+
+      {/* Filter Sidebar */}
+      <FilterSidebar
+        isOpen={isSidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        onApplyFilters={handleApplyFilters}
+        activeFilters={activeFilters}
+      />
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/client/ProductsPageContent.tsx b/components/products/client/ProductsPageContent.tsx
new file mode 100644
index 0000000..614f2b8
--- /dev/null
+++ b/components/products/client/ProductsPageContent.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { Product } from "lib/shopify/types";
+import { ProductGridWithTranslation } from "./ProductGridWithTranslation";
+
+interface ProductsPageContentProps {
+  products: Product[];
+}
+
+export function ProductsPageContent({ products }: ProductsPageContentProps) {
+  const { t } = useTranslation();
+
+  // If no products, display a message
+  if (!products || products.length === 0) {
+    return (
+      <Section>
+        <Heading level={1} align="center" className="mb-4">{t('products.title')}</Heading>
+        <Text className="text-center">{t('products.emptyMessage')}</Text>
+      </Section>
+    );
+  }
+
+  return (
+    <Section spacing="xs">
+      <ProductGridWithTranslation products={products} />
+    </Section>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/client/SortDropdown.tsx b/components/products/client/SortDropdown.tsx
new file mode 100644
index 0000000..673652a
--- /dev/null
+++ b/components/products/client/SortDropdown.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { useEffect, useRef, useState } from "react";
+
+interface SortDropdownProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+export function SortDropdown({ value, onChange, label = "Label" }: SortDropdownProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  
+  // Get the currently selected option's display text
+  const getSelectedOptionText = () => {
+    switch(value) {
+      case 'newest': return t('products.sort.newest');
+      case 'price-asc': return t('products.sort.priceAsc');
+      case 'price-desc': return t('products.sort.priceDesc');
+      case 'name-asc': return t('products.sort.nameAsc');
+      case 'name-desc': return t('products.sort.nameDesc');
+      default: return t('products.sort.title');
+    }
+  };
+
+  // Handle option selection
+  const handleSelect = (value: string) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+  
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Label */}
+      <div className="text-sm text-gray-500 mb-1">{label}</div>
+      
+      {/* Dropdown button */}
+      <div 
+        className="flex items-center justify-between border border-gray-300 rounded px-4 py-2 bg-white cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span className="text-gray-800">{getSelectedOptionText()}</span>
+        <svg 
+          className={`w-4 h-4 ml-2 transform ${isOpen ? 'rotate-180' : ''}`} 
+          xmlns="http://www.w3.org/2000/svg" 
+          viewBox="0 0 20 20" 
+          fill="currentColor"
+        >
+          <path 
+            fillRule="evenodd" 
+            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" 
+            clipRule="evenodd" 
+          />
+        </svg>
+      </div>
+      
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg">
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'default' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('default')}
+          >
+            {t('products.sort.title')}
+          </div>
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'newest' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('newest')}
+          >
+            {t('products.sort.newest')}
+          </div>
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'price-asc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('price-asc')}
+          >
+            {t('products.sort.priceAsc')}
+          </div>
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'price-desc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('price-desc')}
+          >
+            {t('products.sort.priceDesc')}
+          </div>
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'name-asc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('name-asc')}
+          >
+            {t('products.sort.nameAsc')}
+          </div>
+          <div 
+            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'name-desc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
+            onClick={() => handleSelect('name-desc')}
+          >
+            {t('products.sort.nameDesc')}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/products/hooks/useProductFilters.ts b/components/products/hooks/useProductFilters.ts
new file mode 100644
index 0000000..c16a7a7
--- /dev/null
+++ b/components/products/hooks/useProductFilters.ts
@@ -0,0 +1,69 @@
+import { Product } from "lib/shopify/types";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { filterAndSortProducts, filterUtils } from "../utils/productHelpers";
+
+/**
+ * Custom hook for managing product filtering and sorting state
+ */
+export function useProductFilters(products: Product[]) {
+  const [activeFilters, setActiveFilters] = useState<string[]>([]);
+  const [sortOption, setSortOption] = useState('default');
+  const searchParams = useSearchParams();
+  
+  // Load filters from URL on initial render
+  useEffect(() => {
+    const newActiveFilters = filterUtils.getFiltersFromUrl(searchParams as URLSearchParams);
+    const sort = searchParams.get('sort');
+    
+    // Set active filters if there are any
+    if (newActiveFilters.length > 0) {
+      setActiveFilters(newActiveFilters);
+    }
+    
+    if (sort) {
+      setSortOption(sort);
+    }
+  }, [searchParams]);
+  
+  const handleApplyFilters = (filters: string[]) => {
+    setActiveFilters(filters);
+    filterUtils.updateUrlParams(filters, sortOption);
+  };
+
+  const handleSortChange = (newSortOption: string) => {
+    setSortOption(newSortOption);
+    filterUtils.updateUrlParams(activeFilters, newSortOption);
+  };
+  
+  const removeFilter = (filter: string) => {
+    let newFilters: string[];
+    
+    if (filter.startsWith('Cijena:')) {
+      newFilters = activeFilters.filter(f => !f.startsWith('Cijena:'));
+    } else {
+      newFilters = activeFilters.filter(f => f !== filter);
+    }
+    
+    setActiveFilters(newFilters);
+    filterUtils.updateUrlParams(newFilters, sortOption);
+  };
+  
+  const clearAllFilters = () => {
+    setActiveFilters([]);
+    filterUtils.updateUrlParams([], sortOption);
+  };
+  
+  const sortedProducts = filterAndSortProducts(products, activeFilters, sortOption);
+  
+  return {
+    activeFilters,
+    sortOption,
+    sortedProducts,
+    handleApplyFilters,
+    handleSortChange,
+    removeFilter,
+    clearAllFilters,
+    formatFilterTag: filterUtils.formatFilterTag
+  };
+} 
\ No newline at end of file
diff --git a/components/products/utils/colorUtils.ts b/components/products/utils/colorUtils.ts
new file mode 100644
index 0000000..2ce9396
--- /dev/null
+++ b/components/products/utils/colorUtils.ts
@@ -0,0 +1,81 @@
+import { Product } from "lib/shopify/types";
+
+/**
+ * Color mapping from color names to hex codes
+ */
+export const colorHexMap: Record<string, string> = {
+  'red': '#FF0000',
+  'blue': '#0000FF',
+  'green': '#00FF00',
+  'black': '#000000',
+  'white': '#FFFFFF',
+  'yellow': '#FFFF00',
+  'purple': '#800080',
+  'pink': '#FFC0CB',
+  'orange': '#FFA500',
+  'gray': '#808080',
+  'crvena': '#FF0000',
+  'plava': '#0000FF',
+  'zelena': '#00FF00',
+  'crna': '#000000',
+  'bijela': '#FFFFFF',
+  'žuta': '#FFFF00',
+  'ljubičasta': '#800080',
+  'roza': '#FFC0CB',
+  'narančasta': '#FFA500',
+  'siva': '#808080'
+};
+
+export type ColorVariant = {
+  color: string; // Hex code
+  variantId: string;
+  price: number;
+  colorName: string;
+}
+
+/**
+ * Extract color options from a product if they exist
+ * Returns an array of hex color codes, or undefined if no colors
+ */
+export function getProductColors(product: Product) {
+  // Get colors directly from variants
+  const colorVariants = getProductColorVariants(product);
+  if (!colorVariants) return undefined;
+  
+  // Return just the color codes
+  return colorVariants.map(variant => variant.color);
+}
+
+/**
+ * Get detailed color variants including price and variant ID
+ * Extracts directly from the variants array
+ */
+export function getProductColorVariants(product: Product): ColorVariant[] | undefined {
+  if (!product?.variants || product.variants.length === 0) return undefined;
+  
+  const result: ColorVariant[] = [];
+  
+  // Iterate through all variants looking for color options
+  product.variants.forEach(variant => {
+    // Find any color option in the selectedOptions
+    const colorSelectedOption = variant.selectedOptions?.find(
+      option => option.name.toLowerCase() === 'color' || 
+               option.name.toLowerCase() === 'colour' || 
+               option.name.toLowerCase() === 'boja'
+    );
+    
+    if (colorSelectedOption) {
+      const colorName = colorSelectedOption.value;
+      const colorHex = colorHexMap[colorName.toLowerCase()] || colorName;
+      
+      result.push({
+        color: colorHex,
+        variantId: variant.id,
+        price: parseFloat(variant.price.amount),
+        colorName: colorName
+      });
+    }
+  });
+  
+  return result.length > 0 ? result : undefined;
+} 
\ No newline at end of file
diff --git a/components/products/utils/productHelpers.ts b/components/products/utils/productHelpers.ts
new file mode 100644
index 0000000..7a91780
--- /dev/null
+++ b/components/products/utils/productHelpers.ts
@@ -0,0 +1,177 @@
+import { Product } from "lib/shopify/types";
+
+/**
+ * Sorts products based on the selected option
+ */
+export function sortProducts(products: Product[], sortOption: string) {
+  const productsCopy = [...products];
+  
+  switch (sortOption) {
+    case 'price-asc':
+      return productsCopy.sort((a, b) => 
+        parseFloat(a.priceRange.maxVariantPrice.amount) - parseFloat(b.priceRange.maxVariantPrice.amount)
+      );
+    case 'price-desc':
+      return productsCopy.sort((a, b) => 
+        parseFloat(b.priceRange.maxVariantPrice.amount) - parseFloat(a.priceRange.maxVariantPrice.amount)
+      );
+    case 'newest':
+      return productsCopy.sort((a, b) => a.handle.localeCompare(b.handle));
+    case 'name-asc':
+      return productsCopy.sort((a, b) => a.title.localeCompare(b.title));
+    case 'name-desc':
+      return productsCopy.sort((a, b) => b.title.localeCompare(a.title));
+    default:
+      return productsCopy;
+  }
+}
+
+/**
+ * Filters products based on active filters and sorts them
+ */
+export function filterAndSortProducts(products: Product[], activeFilters: string[], sortOption: string) {
+  // Filter products based on active filters
+  const filteredProducts = products.filter(product => {
+    if (activeFilters.length === 0) return true;
+    
+    // Check for price filter
+    const priceFilter = activeFilters.find(filter => filter.startsWith('Cijena:'));
+    if (priceFilter) {
+      // Extract min and max prices from filter string (format: "Cijena: 5€ - 100€")
+      const priceMatch = priceFilter.match(/Cijena: (\d+)€ - (\d+)€/);
+      if (priceMatch && priceMatch[1] && priceMatch[2]) {
+        const minPrice = parseInt(priceMatch[1]);
+        const maxPrice = parseInt(priceMatch[2]);
+        const productPrice = parseFloat(product.priceRange.maxVariantPrice.amount);
+        
+        // If product price is outside the filter range, exclude it
+        if (productPrice < minPrice || productPrice > maxPrice) {
+          return false;
+        }
+      }
+    }
+    
+    // For now, we're only implementing price filtering
+    return true;
+  });
+  
+  // Sort filtered products
+  return sortProducts(filteredProducts, sortOption);
+}
+
+// URL parameter constants
+const PARAM_FILTERS = 'filters';
+const PARAM_MIN_PRICE = 'min_price';
+const PARAM_MAX_PRICE = 'max_price';
+const PARAM_SORT = 'sort';
+const PRICE_PREFIX = 'Cijena:';
+
+/**
+ * Functions for handling filter tags
+ */
+export const filterUtils = {
+  // Format filter tag for display
+  formatFilterTag: (filter: string) => {
+    // If it's a price filter, show as is
+    if (filter.startsWith(PRICE_PREFIX)) {
+      return filter;
+    }
+    
+    // For other filters, split by colon and show in format "Category: Option"
+    const parts = filter.split(':');
+    if (parts.length > 1) {
+      return `${parts[0]}: ${parts[1]}`;
+    }
+    
+    // Fallback for any non-formatted filters
+    return filter;
+  },
+  
+  extractPriceFilter: (priceFilter: string) => {
+    const priceMatch = priceFilter?.match(/Cijena: (\d+)€ - (\d+)€/);
+    if (priceMatch && priceMatch[1] && priceMatch[2]) {
+      return { 
+        minPrice: priceMatch[1], 
+        maxPrice: priceMatch[2] 
+      };
+    }
+    return null;
+  },
+  
+  // Create a price filter string from min and max value
+  createPriceFilter: (minPrice: string, maxPrice: string) => {
+    return `${PRICE_PREFIX} ${minPrice}€ - ${maxPrice}€`;
+  },
+  
+  // Separate price and non-price filters
+  separateFilters: (filters: string[]) => {
+    const priceFilter = filters.find(f => f.startsWith(PRICE_PREFIX));
+    const nonPriceFilters = filters.filter(f => !f.startsWith(PRICE_PREFIX));
+    return { priceFilter, nonPriceFilters };
+  },
+  
+  encodeNonPriceFilters: (nonPriceFilters: string[]) => {
+    return nonPriceFilters.length > 0 
+      ? encodeURIComponent(JSON.stringify(nonPriceFilters)) 
+      : '';
+  },
+  
+  decodeNonPriceFilters: (encodedFilters: string | null) => {
+    if (!encodedFilters) return [];
+    
+    try {
+      const decodedFilters = JSON.parse(decodeURIComponent(encodedFilters));
+      return Array.isArray(decodedFilters) ? decodedFilters : [];
+    } catch (e) {
+      console.error('Error parsing filters from URL', e);
+      return [];
+    }
+  },
+  
+  updateUrlParams: (filters: string[], sort: string) => {
+    const params = new URLSearchParams();
+    const { priceFilter, nonPriceFilters } = filterUtils.separateFilters(filters);
+    
+    // Add non-price filters
+    const encodedFilters = filterUtils.encodeNonPriceFilters(nonPriceFilters);
+    if (encodedFilters) {
+      params.set(PARAM_FILTERS, encodedFilters);
+    }
+    
+    // Add price filter
+    if (priceFilter) {
+      const priceValues = filterUtils.extractPriceFilter(priceFilter);
+      if (priceValues) {
+        params.set(PARAM_MIN_PRICE, priceValues.minPrice);
+        params.set(PARAM_MAX_PRICE, priceValues.maxPrice);
+      }
+    }
+    
+    if (sort !== 'default') {
+      params.set(PARAM_SORT, sort);
+    }
+    
+    const newUrl = params.toString() 
+      ? `${window.location.pathname}?${params.toString()}`
+      : window.location.pathname;
+    
+    window.history.pushState({}, '', newUrl);
+  },
+  
+  getFiltersFromUrl: (searchParams: URLSearchParams) => {
+    const encodedFilters = searchParams.get(PARAM_FILTERS);
+    const minPrice = searchParams.get(PARAM_MIN_PRICE);
+    const maxPrice = searchParams.get(PARAM_MAX_PRICE);
+    
+    // Start with decoded non-price filters
+    const nonPriceFilters = filterUtils.decodeNonPriceFilters(encodedFilters);
+    
+    // Add price filter if present
+    if (minPrice && maxPrice) {
+      const priceFilter = filterUtils.createPriceFilter(minPrice, maxPrice);
+      return [...nonPriceFilters, priceFilter];
+    }
+    
+    return nonPriceFilters;
+  }
+} 
\ No newline at end of file
diff --git a/components/prose.tsx b/components/prose.tsx
new file mode 100644
index 0000000..0cf460f
--- /dev/null
+++ b/components/prose.tsx
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+const Prose = ({ html, className }: { html: string; className?: string }) => {
+  return (
+    <div
+      className={clsx(
+        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+        className
+      )}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+};
+
+export default Prose;
diff --git a/components/ui/AddToCartButton.tsx b/components/ui/AddToCartButton.tsx
new file mode 100644
index 0000000..988b320
--- /dev/null
+++ b/components/ui/AddToCartButton.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { addItem } from "components/cart/actions";
+import { useCart } from "components/cart/cart-context";
+import { Product, ProductVariant } from "lib/shopify/types";
+import { useState } from "react";
+import { Button } from "./Button";
+
+interface AddToCartButtonProps {
+  product: Product;
+  className?: string;
+  variantId?: string;
+}
+
+export function AddToCartButton({ product, className = "", variantId }: AddToCartButtonProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { addCartItem } = useCart();
+  const { t } = useTranslation();
+
+  const handleAddToCart = async () => {
+    if (isLoading) return;
+    
+    setIsLoading(true);
+    
+    // Get the selected variant or default to the first variant
+    let selectedVariant: ProductVariant | undefined;
+    
+    if (variantId) {
+      selectedVariant = product.variants.find(v => v.id === variantId);
+    }
+    
+    // If no specified variant or variant not found, use the first one
+    if (!selectedVariant) {
+      selectedVariant = product.variants[0];
+    }
+    
+    if (!selectedVariant || !selectedVariant.id) {
+      setIsLoading(false);
+      return;
+    }
+    
+    try {
+      // Add to backend cart
+      await addItem(null, selectedVariant.id, 1);
+      
+      // Update local cart state
+      addCartItem(selectedVariant, product, 1);
+      
+      // Set success message or notification here if needed
+    } catch (error) {
+      console.error("Failed to add item to cart:", error);
+      // Handle error (could show error message)
+    } finally {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleAddToCart}
+      disabled={isLoading || !product.availableForSale}
+      variant="primary"
+      size="lg"
+      className={`w-full ${className}`}
+    >
+      {isLoading 
+        ? t('product.adding')
+        : !product.availableForSale 
+          ? t('product.outOfStock') 
+          : t('product.addToCart')
+      }
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 0000000..35d8408
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,74 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'outline' | 'primary' | 'secondary' | 'filled' | 'custom';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  href?: string;
+  external?: boolean;
+  fullWidthMobile?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'default', size = 'md', children, href, external, fullWidthMobile, fullWidth, ...props }, ref) => {
+    const variantClasses = {
+      default: 'bg-white text-black border border-gray-200 hover:bg-gray-100',
+      outline: 'bg-transparent border border-gray-300 hover:bg-gray-100',
+      primary: 'bg-primary text-white hover:bg-primary-dark',
+      secondary: 'bg-blue-600 text-white hover:bg-blue-700',
+      filled: 'bg-primary text-white hover:bg-primary-dark',
+      custom: 'bg-[#f8dbe3] text-primary hover:bg-primary hover:text-white border-0',
+    };
+
+    const sizeClasses = {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2',
+      lg: 'px-[24px] py-[12px] text-lg',
+    };
+
+    const widthClass = fullWidth 
+      ? 'w-full' 
+      : fullWidthMobile 
+        ? 'w-full md:w-auto' 
+        : '';
+
+    const buttonClasses = `
+      ${variantClasses[variant]}
+      ${sizeClasses[size]}
+      ${widthClass}
+      ${className}
+      rounded-button font-bold transition-colors focus:outline-none inline-flex justify-center items-center
+    `;
+
+    if (href) {
+      const linkProps = external ? { 
+        target: "_blank", 
+        rel: "noopener noreferrer" 
+      } : {};
+
+      return (
+        <Link 
+          href={href} 
+          {...linkProps} 
+          className={buttonClasses}
+        >
+          {children}
+        </Link>
+      );
+    }
+
+    return (
+      <button 
+        ref={ref}
+        className={buttonClasses}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button'; 
\ No newline at end of file
diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/components/ui/Card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/Carousel.tsx b/components/ui/Carousel.tsx
new file mode 100644
index 0000000..e99d620
--- /dev/null
+++ b/components/ui/Carousel.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { ReactNode, useEffect, useState } from 'react';
+
+export interface CarouselIndicatorsProps {
+  totalSlides: number;
+  activeIndex: number;
+  onSelect: (index: number) => void;
+  className?: string;
+}
+
+export function CarouselIndicators({ totalSlides, activeIndex, onSelect, className = '' }: CarouselIndicatorsProps) {
+  return (
+    <div className={`flex justify-center gap-2 z-20 ${className}`}>
+      {Array.from({ length: totalSlides }).map((_, index) => (
+        <button
+          key={index}
+          className={`w-2 h-2 rounded-full transition-colors ${
+            index === activeIndex ? "bg-black" : "bg-white"
+          }`}
+          onClick={() => onSelect(index)}
+          aria-label={`Go to slide ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+}
+
+export interface CarouselProps {
+  slides: ReactNode[];
+  autoPlay?: boolean;
+  interval?: number;
+  showIndicators?: boolean;
+  indicatorsClassName?: string;
+  className?: string;
+}
+
+export function Carousel({ 
+  slides, 
+  autoPlay = true, 
+  interval = 5000,
+  showIndicators = true,
+  indicatorsClassName = '',
+  className = ''
+}: CarouselProps) {
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  // Auto-advance carousel if autoPlay is enabled
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    const timer = setInterval(() => {
+      setActiveSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1));
+    }, interval);
+    
+    return () => clearInterval(timer);
+  }, [autoPlay, interval, slides.length]);
+
+  return (
+    <div className={`relative w-full h-full ${className}`}>
+      {/* All slides need to be absolutely positioned */}
+      {slides.map((slide, index) => (
+        <div
+          key={index}
+          className={`absolute inset-0 w-full h-full transition-opacity duration-500 ${
+            index === activeSlide ? "opacity-100 z-10" : "opacity-0 z-0"
+          }`}
+        >
+          {slide}
+        </div>
+      ))}
+      
+      {showIndicators && slides.length > 1 && (
+        <CarouselIndicators 
+          totalSlides={slides.length}
+          activeIndex={activeSlide}
+          onSelect={setActiveSlide}
+          className={indicatorsClassName}
+        />
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/Checkbox.tsx b/components/ui/Checkbox.tsx
new file mode 100644
index 0000000..a14d17d
--- /dev/null
+++ b/components/ui/Checkbox.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import React, { forwardRef, useState } from 'react';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  className?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, className = '', onChange, ...props }, ref) => {
+    // Keep track of focus state for styling
+    const [isFocused, setIsFocused] = useState(false);
+    
+    // Handle click on the custom checkbox
+    const handleClick = () => {
+      if (props.disabled) return;
+      
+      // Create a synthetic event to pass to the onChange handler
+      const syntheticEvent = {
+        target: {
+          name: props.name,
+          checked: !props.checked,
+          type: 'checkbox'
+        }
+      } as React.ChangeEvent<HTMLInputElement>;
+      
+      // Call the onChange handler with the synthetic event
+      if (onChange) {
+        onChange(syntheticEvent);
+      }
+    };
+    
+    return (
+      <div className={`flex items-center ${className}`}>
+        <div 
+          className="relative flex items-center cursor-pointer"
+          onClick={handleClick}
+        >
+          <input
+            type="checkbox"
+            ref={ref}
+            className="sr-only"
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChange={onChange}
+            {...props}
+          />
+          
+          <div 
+            className={`
+              h-5 w-5 rounded-sm flex items-center justify-center 
+              ${props.checked 
+                ? 'bg-primary border-primary' 
+                : 'bg-white border-gray-300'
+              }
+              ${isFocused ? 'ring-2 ring-primary/30' : ''}
+              ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              border transition-colors
+            `}
+          >
+            {props.checked && (
+              <svg 
+                xmlns="http://www.w3.org/2000/svg" 
+                viewBox="0 0 24 24" 
+                fill="none" 
+                stroke="currentColor" 
+                strokeWidth="3" 
+                strokeLinecap="round" 
+                strokeLinejoin="round" 
+                className="w-3 h-3 text-white"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            )}
+          </div>
+        </div>
+        
+        {label && (
+          <label 
+            htmlFor={props.id} 
+            className={`ml-2 text-sm ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+            onClick={!props.disabled ? handleClick : undefined}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox'; 
\ No newline at end of file
diff --git a/components/ui/ColorSelector.tsx b/components/ui/ColorSelector.tsx
new file mode 100644
index 0000000..ec2aa3f
--- /dev/null
+++ b/components/ui/ColorSelector.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { ColorVariant } from '@/components/products/utils/colorUtils';
+
+interface ColorSelectorProps {
+  colors: string[] | ColorVariant[];
+  selectedColor: string | null;
+  onColorSelect?: (color: string) => void;
+  readonly?: boolean;
+}
+
+export function ColorSelector({ 
+  colors, 
+  selectedColor, 
+  onColorSelect,
+  readonly = false 
+}: ColorSelectorProps) {
+  // Check if we're dealing with ColorVariant[] or string[]
+  const isVariantArray = colors.length > 0 && typeof colors[0] !== 'string';
+  
+  // Helper to get color from either a string or ColorVariant
+  const getColor = (item: string | ColorVariant): string => {
+    if (typeof item === 'string') return item;
+    return item.color;
+  };
+  
+  // Helper to get color name or just use the hex code
+  const getColorName = (item: string | ColorVariant): string => {
+    if (typeof item === 'string') return item;
+    return item.colorName || item.color;
+  };
+
+  return (
+    <div className="flex items-center mt-2 mb-3">
+      {colors.map((colorItem, index) => {
+        const color = getColor(colorItem);
+        const colorName = getColorName(colorItem);
+        const isSelected = selectedColor === color;
+        const zIndex = isSelected ? 30 : 20 - index;
+        const marginLeft = index === 0 ? '0' : '-10px';
+        
+        return (
+          <div
+            key={index}
+            className={`rounded-full transition-all duration-200 relative ${readonly ? '' : 'cursor-pointer'}`}
+            style={{ 
+              backgroundColor: color,
+              width: isSelected ? '42px' : '32px',
+              height: isSelected ? '42px' : '32px',
+              zIndex,
+              marginLeft,
+              borderWidth: isSelected ? '0px' : '0px'
+            }}
+            onClick={() => !readonly && onColorSelect && onColorSelect(color)}
+            aria-label={readonly ? `Color: ${colorName}` : `Select color ${colorName}`}
+            role={readonly ? 'presentation' : 'button'}
+          />
+        );
+      })}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/ContactForm.tsx b/components/ui/ContactForm.tsx
new file mode 100644
index 0000000..50ee41e
--- /dev/null
+++ b/components/ui/ContactForm.tsx
@@ -0,0 +1,202 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { Heading, Label, Text } from '@/components/ui/Typography';
+import { useState } from 'react';
+
+interface ContactFormProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export function ContactForm({ title = 'Kontaktiraj nas', subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }: ContactFormProps) {
+  // Form state
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+    acceptTerms: false
+  });
+  
+  // Validation errors
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  
+  // Form submission status
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  
+  // Handle input changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value, type } = e.target;
+    
+    // Handle checkbox
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked;
+      setFormData(prev => ({ ...prev, [name]: checked }));
+    } else {
+      setFormData(prev => ({ ...prev, [name]: value }));
+    }
+    
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+  };
+  
+  // Handle checkbox change specifically
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    setFormData(prev => ({ ...prev, [name]: checked }));
+    
+    // Clear error when user changes checkbox
+    if (errors[name]) {
+      setErrors(prev => {
+        const newErrors = { ...prev };
+        delete newErrors[name];
+        return newErrors;
+      });
+    }
+  };
+  
+  // Validate form
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    
+    // Name validation
+    if (!formData.name.trim()) {
+      newErrors.name = 'Molimo unesite vaše ime i prezime';
+    }
+    
+    // Email validation
+    if (!formData.email.trim()) {
+      newErrors.email = 'Molimo unesite vašu email adresu';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Molimo unesite ispravnu email adresu';
+    }
+    
+    // Message validation
+    if (!formData.message.trim()) {
+      newErrors.message = 'Molimo unesite vašu poruku';
+    } else if (formData.message.trim().length < 10) {
+      newErrors.message = 'Vaša poruka mora sadržavati barem 10 znakova';
+    }
+    
+    // Terms validation
+    if (!formData.acceptTerms) {
+      newErrors.acceptTerms = 'Molimo prihvatite uvjete korištenja';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (validateForm()) {
+      setIsSubmitting(true);
+      
+      // Simulate API call
+      setTimeout(() => {
+        setIsSubmitting(false);
+        setIsSubmitted(true);
+        
+        // Reset form after submission
+        setFormData({
+          name: '',
+          email: '',
+          message: '',
+          acceptTerms: false
+        });
+        
+        // Hide success message after 5 seconds
+        setTimeout(() => {
+          setIsSubmitted(false);
+        }, 5000);
+      }, 1000);
+    }
+  };
+  
+  return (
+    <div>
+      <Heading level={2} className="mb-4">{title}</Heading>
+      <Text size="lg" className="mb-8">{subtitle}</Text>
+      
+      {isSubmitted ? (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-md mb-6">
+          <Text className="text-green-700 font-medium">Vaša poruka je uspješno poslana!</Text>
+          <Text className="text-green-600">Hvala vam na vašem upitu. Odgovorit ćemo vam u najkraćem mogućem roku.</Text>
+        </div>
+      ) : null}
+      
+      <form className="space-y-6" onSubmit={handleSubmit}>
+        <div>
+          <Label htmlFor="name" className="block mb-2 text-[16px] leading-[24px]">Ime i Prezime</Label>
+          <input 
+            type="text" 
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            className={`w-full p-3 border ${errors.name ? 'border-red-500' : 'border-gray-300'} rounded`}
+          />
+          {errors.name && <Text size="sm" className="mt-1 text-red-500">{errors.name}</Text>}
+        </div>
+        
+        <div>
+          <Label htmlFor="email" className="block mb-2 text-[16px] leading-[24px]">Email</Label>
+          <input 
+            type="email" 
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            className={`w-full p-3 border ${errors.email ? 'border-red-500' : 'border-gray-300'} rounded`}
+          />
+          {errors.email && <Text size="sm" className="mt-1 text-red-500">{errors.email}</Text>}
+        </div>
+        
+        <div>
+          <Label htmlFor="message" className="block mb-2 text-[16px] leading-[24px]">Poruka</Label>
+          <textarea 
+            id="message"
+            name="message"
+            value={formData.message}
+            onChange={handleChange}
+            rows={5} 
+            className={`w-full p-3 border ${errors.message ? 'border-red-500' : 'border-gray-300'} rounded`}
+            placeholder="Upišite vašu poruku..."
+          />
+          {errors.message && <Text size="sm" className="mt-1 text-red-500">{errors.message}</Text>}
+        </div>
+        
+        <div>
+          <Checkbox 
+            id="acceptTerms"
+            name="acceptTerms"
+            checked={formData.acceptTerms}
+            onChange={handleCheckboxChange}
+            label="Prihvaćam uvjete korištenja"
+            className={errors.acceptTerms ? "ring-2 ring-red-500 rounded-sm" : ""}
+          />
+          {errors.acceptTerms && <Text size="sm" className="mt-1 text-red-500">{errors.acceptTerms}</Text>}
+        </div>
+        
+        <Button 
+          type="submit" 
+          variant="primary" 
+          className="px-8 py-3 bg-black text-white"
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? 'Slanje...' : 'Pošalji'}
+        </Button>
+      </form>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/CustomCard.tsx b/components/ui/CustomCard.tsx
new file mode 100644
index 0000000..e80124e
--- /dev/null
+++ b/components/ui/CustomCard.tsx
@@ -0,0 +1,39 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/Card";
+import Image from "next/image";
+
+interface CustomCardProps {
+  title: string;
+  description: string;
+  imageSrc: string;
+  imageAlt: string;
+}
+
+export function CustomCard({ title, description, imageSrc, imageAlt }: CustomCardProps) {
+  return (
+    <Card className="flex flex-col h-[492px] rounded-none shadow-none border-none bg-[#FAFAFA] overflow-hidden group">
+      <div className="w-full h-[269px] relative bg-white overflow-hidden">
+        <Image 
+          src={imageSrc}
+          alt={imageAlt}
+          fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 405px"
+          className="object-cover transition-transform duration-300 group-hover:scale-105"
+          priority
+        />
+      </div>
+      <div className="flex flex-col flex-grow p-6">
+        <CardHeader className="p-0 mb-4">
+          <CardTitle className="text-[28px] leading-[36px] font-allenoire transition-colors duration-300 group-hover:text-primary">{title}</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <p className="text-[16px] leading-[26px] line-clamp-4 font-poppins">{description}</p>
+        </CardContent>
+      </div>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/Newsletter.tsx b/components/ui/Newsletter.tsx
new file mode 100644
index 0000000..a2e8ee7
--- /dev/null
+++ b/components/ui/Newsletter.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Heading, Text } from '@/components/ui/Typography';
+import { useState } from 'react';
+
+interface NewsletterProps {
+  title?: string;
+  subtitle?: string;
+  buttonText?: string;
+  disclaimer?: string;
+}
+
+export function Newsletter({ 
+  title = 'Join our newsletter', 
+  subtitle = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  buttonText = 'Sign Up',
+  disclaimer = 'By clicking Sign Up you\'re confirming that you agree with our Terms and Conditions.'
+}: NewsletterProps) {
+  // Form state
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  
+  // Handle input change
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (error) setError('');
+  };
+  
+  // Validate email
+  const validateEmail = () => {
+    if (!email.trim()) {
+      setError('Molimo unesite vašu email adresu');
+      return false;
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setError('Molimo unesite ispravnu email adresu');
+      return false;
+    }
+    return true;
+  };
+  
+  // Handle form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (validateEmail()) {
+      setIsSubmitting(true);
+      
+      // Simulate API call
+      setTimeout(() => {
+        setIsSubmitting(false);
+        setIsSubmitted(true);
+        setEmail('');
+        
+        // Reset success message after 5 seconds
+        setTimeout(() => {
+          setIsSubmitted(false);
+        }, 5000);
+      }, 1000);
+    }
+  };
+  
+  return (
+    <div className="w-full">
+      <div className="flex flex-col md:flex-row items-start justify-between gap-8">
+        <div className="md:w-1/2">
+          <Heading level={3} className="mb-4">{title}</Heading>
+          <Text size="lg">{subtitle}</Text>
+        </div>
+        
+        <div className="md:w-1/2 w-full">
+          {isSubmitted ? (
+            <div className="p-4 bg-green-50 border border-green-200 rounded-md animate-fade-in">
+              <div className="flex items-center mb-2">
+                <div className="mr-3 bg-green-500 rounded-full p-1">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                  </svg>
+                </div>
+                <Text className="text-green-700 font-medium">Uspješno ste se pretplatili!</Text>
+              </div>
+              <Text className="text-green-600">Hvala na prijavi. Uskoro ćete primiti našu prvu newsletter poruku.</Text>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="w-full">
+              <div className="flex flex-col sm:flex-row gap-4">
+                <div className="flex-1">
+                  <div className="relative">
+                    <input 
+                      type="email" 
+                      placeholder="Enter your email" 
+                      value={email}
+                      onChange={handleChange}
+                      className={`w-full p-3 border ${error ? 'border-red-500' : 'border-gray-300'} rounded`}
+                    />
+                  </div>
+                  {error && (
+                    <Text size="sm" className="mt-1 text-red-500">{error}</Text>
+                  )}
+                </div>
+                <Button 
+                  type="submit" 
+                  variant="primary" 
+                  className="bg-black text-white px-6 w-[120px] h-[48px]"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? 'Sending...' : buttonText}
+                </Button>
+              </div>
+              
+              {!isSubmitted && (
+                <Text className="mt-4 text-gray-500 text-[12px] leading-[14.4px]">
+                  {disclaimer}
+                </Text>
+              )}
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/ProductCard.tsx b/components/ui/ProductCard.tsx
new file mode 100644
index 0000000..b1d0b19
--- /dev/null
+++ b/components/ui/ProductCard.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import { AddToBoxButton } from '@/components/products/AddToBoxButton';
+import { ColorVariant, getProductColorVariants } from '@/components/products/utils/colorUtils';
+import { Product } from 'lib/shopify/types';
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { AddToCartButton } from './AddToCartButton';
+import { ColorSelector } from './ColorSelector';
+
+interface ProductCardProps {
+  title: string;
+  variant: string;
+  price: number;
+  imageSrc: string;
+  slug: string;
+  product?: Product;
+  colors?: string[]; // Array of color hex codes
+}
+
+export function ProductCard({ title, variant, price: defaultPrice, imageSrc, slug, product, colors }: ProductCardProps) {
+  const pathname = usePathname();
+  const isBuildBoxPage = pathname.includes('/build-box');
+  
+  const [colorVariants, setColorVariants] = useState<ColorVariant[] | undefined>(undefined);
+  const [selectedColorHex, setSelectedColorHex] = useState<string | null>(null);
+  const [selectedVariant, setSelectedVariant] = useState<ColorVariant | undefined>(undefined);
+  const [currentPrice, setCurrentPrice] = useState<number>(defaultPrice);
+  const [isHovered, setIsHovered] = useState(false);
+  
+  // Initialize color variants and selected color
+  useEffect(() => {
+    if (product) {
+      const variants = getProductColorVariants(product);
+      setColorVariants(variants);
+      
+      if (variants && variants.length > 0) {
+        // Only set these values if we have valid variants
+        if (variants[0]?.color) {
+          setSelectedColorHex(variants[0].color);
+        }
+        setSelectedVariant(variants[0]);
+        if (typeof variants[0]?.price === 'number') {
+          setCurrentPrice(variants[0].price);
+        }
+      }
+    } else if (colors && colors.length > 0) {
+      // If we only have color hex codes without variants
+      const firstColor = colors[0];
+      if (firstColor) {
+        setSelectedColorHex(firstColor);
+      }
+    }
+  }, [product, colors]);
+  
+  // Handle color selection
+  const handleColorSelect = (color: string) => {
+    setSelectedColorHex(color);
+    
+    if (colorVariants) {
+      const variant = colorVariants.find(v => v.color === color);
+      if (variant) {
+        setSelectedVariant(variant);
+        setCurrentPrice(variant.price);
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Image container with fixed height and hover effect */}
+      <div 
+        className="relative w-full h-[480px] bg-gray-100 mb-5 overflow-hidden"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Link href={`/product/${slug}`}>
+          <Image 
+            src={imageSrc}
+            alt={title}
+            fill
+            className="object-cover transition-opacity duration-300"
+            sizes="(max-width: 768px) 280px, 405px"
+          />
+        </Link>
+        
+        {/* Button - always visible on mobile, hover effect on desktop */}
+        {product && (
+          <>
+            {/* Mobile button - always visible */}
+            <div className="absolute bottom-6 left-5 right-5 md:hidden">
+              {isBuildBoxPage ? (
+                <AddToBoxButton
+                  productId={product.id}
+                  name={product.title}
+                  price={currentPrice}
+                  image={imageSrc}
+                  variantId={selectedVariant?.variantId}
+                  color={selectedColorHex || undefined}
+                />
+              ) : (
+                <AddToCartButton
+                  product={product}
+                  variantId={selectedVariant?.variantId}
+                />
+              )}
+            </div>
+            
+            {/* Desktop button - visible on hover */}
+            <div className={`absolute bottom-6 left-5 right-5 hidden md:block transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
+              {isBuildBoxPage ? (
+                <AddToBoxButton
+                  productId={product.id}
+                  name={product.title}
+                  price={currentPrice}
+                  image={imageSrc}
+                  variantId={selectedVariant?.variantId}
+                  color={selectedColorHex || undefined}
+                />
+              ) : (
+                <AddToCartButton
+                  product={product}
+                  variantId={selectedVariant?.variantId}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+      
+      <div className="flex justify-between items-start">
+        <h3 className="font-bold text-[18px] leading-[28px]">{title}</h3>
+        <span className="font-bold text-[20px] leading-[28px] ml-2">{currentPrice} €</span>
+      </div>
+      
+      {variant && (
+        <p className="text-[16px] leading-[26px] text-gray-600 mb-auto">{variant}</p>
+      )}
+      
+      {colorVariants && colorVariants.length > 0 ? (
+        <ColorSelector 
+          colors={colorVariants}
+          selectedColor={selectedColorHex}
+          onColorSelect={handleColorSelect}
+        />
+      ) : colors && colors.length > 0 ? (
+        <ColorSelector 
+          colors={colors}
+          selectedColor={selectedColorHex}
+          onColorSelect={setSelectedColorHex}
+        />
+      ) : null}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/RadioButton.tsx b/components/ui/RadioButton.tsx
new file mode 100644
index 0000000..1a936e7
--- /dev/null
+++ b/components/ui/RadioButton.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import React, { forwardRef, useState } from 'react';
+
+export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  className?: string;
+}
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  ({ label, className = '', onChange, ...props }, ref) => {
+    // Keep track of focus state for styling
+    const [isFocused, setIsFocused] = useState(false);
+    
+    // Handle click on the custom radio button
+    const handleClick = () => {
+      if (props.disabled) return;
+      
+      // Only trigger onChange if the radio button is not already checked
+      if (!props.checked) {
+        // Create a synthetic event to pass to the onChange handler
+        const syntheticEvent = {
+          target: {
+            name: props.name,
+            checked: true,
+            type: 'radio',
+            value: props.value
+          }
+        } as React.ChangeEvent<HTMLInputElement>;
+        
+        // Call the onChange handler with the synthetic event
+        if (onChange) {
+          onChange(syntheticEvent);
+        }
+      }
+    };
+    
+    return (
+      <div className={`flex items-center ${className}`}>
+        <div 
+          className="relative flex items-center cursor-pointer"
+          onClick={handleClick}
+        >
+          <input
+            type="radio"
+            ref={ref}
+            className="sr-only"
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChange={onChange}
+            {...props}
+          />
+          
+          <div 
+            className={`
+              h-5 w-5 rounded-full flex items-center justify-center
+              ${props.checked 
+                ? 'border-primary' 
+                : 'border-gray-300'
+              }
+              ${isFocused ? 'ring-2 ring-primary/30' : ''}
+              ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              border-2 bg-white transition-colors
+            `}
+          >
+            {props.checked && (
+              <div className="w-3 h-3 rounded-full bg-primary"></div>
+            )}
+          </div>
+        </div>
+        
+        {label && (
+          <label 
+            htmlFor={props.id} 
+            className={`ml-2 text-sm ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+            onClick={!props.disabled ? handleClick : undefined}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+RadioButton.displayName = 'RadioButton'; 
\ No newline at end of file
diff --git a/components/ui/Section.tsx b/components/ui/Section.tsx
new file mode 100644
index 0000000..a745507
--- /dev/null
+++ b/components/ui/Section.tsx
@@ -0,0 +1,45 @@
+import { container } from '@/lib/utils';
+import React from 'react';
+
+export interface SectionProps {
+  children: React.ReactNode;
+  background?: 'white' | 'light' | 'dark' | 'pattern' | 'gradient';
+  spacing?: 'xs' | 'small' | 'medium' | 'large' | 'none';
+  fullWidth?: boolean;
+  className?: string;
+}
+
+export function Section({
+  children,
+  background = 'white',
+  spacing = 'medium',
+  fullWidth = false,
+  className = '',
+}: SectionProps) {
+  // Background styles
+  const backgroundClasses = {
+    white: 'bg-white',
+    light: 'bg-gray-50',
+    dark: 'bg-gray-900 text-white',
+    pattern: 'bg-white bg-[url("/assets/patterns/dots.svg")] bg-repeat',
+    gradient: 'bg-gradient-to-b from-white to-gray-100',
+  };
+
+  const spacingClasses = {
+    none: 'py-0',
+    xs: 'py-[64px] md:py-[80px]',
+    small: 'py-6 md:py-8',
+    medium: 'py-[80px] md:py-[112px]',
+    large: 'py-[80px] md:py-[112px]',
+  };
+
+  return (
+    <section 
+      className={`w-full ${backgroundClasses[background]} ${spacingClasses[spacing]} ${className}`}
+    >
+      <div className={fullWidth ? 'w-full' : container}>
+        {children}
+      </div>
+    </section>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/SectionHeader.tsx b/components/ui/SectionHeader.tsx
new file mode 100644
index 0000000..ff8d167
--- /dev/null
+++ b/components/ui/SectionHeader.tsx
@@ -0,0 +1,26 @@
+import { Heading, Text } from "./Typography";
+
+interface SectionHeaderProps {
+  title: string;
+  description: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  className?: string;
+}
+
+export function SectionHeader({ 
+  title, 
+  description, 
+  titleClassName = "", 
+  descriptionClassName = "",
+  className = ""
+}: SectionHeaderProps) {
+  return (
+    <div className={`max-w-[800px] ${className}`}>
+      <Heading level={2} className={`mb-4 ${titleClassName}`}>{title}</Heading>
+      <Text size="lg" className={descriptionClassName}>
+        {description}
+      </Text>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/components/ui/StarRating.tsx b/components/ui/StarRating.tsx
new file mode 100644
index 0000000..02e9111
--- /dev/null
+++ b/components/ui/StarRating.tsx
@@ -0,0 +1,40 @@
+import { FaRegStar, FaStar, FaStarHalfAlt } from "react-icons/fa";
+
+interface StarRatingProps {
+  rating: number;
+  maxRating?: number;
+  color?: string;
+  size?: number;
+}
+
+export function StarRating({
+  rating,
+  maxRating = 5,
+  color = "#FFD700", // Gold color for stars
+  size = 20
+}: StarRatingProps) {
+  // Create an array of star elements
+  const stars = [];
+  
+  // Fill in full and half stars
+  for (let i = 1; i <= maxRating; i++) {
+    if (i <= rating) {
+      // Full star
+      stars.push(
+        <FaStar key={i} color={color} size={size} className="inline" />
+      );
+    } else if (i - 0.5 <= rating) {
+      // Half star
+      stars.push(
+        <FaStarHalfAlt key={i} color={color} size={size} className="inline" />
+      );
+    } else {
+      // Empty star
+      stars.push(
+        <FaRegStar key={i} color={color} size={size} className="inline" />
+      );
+    }
+  }
+  
+  return <div className="flex">{stars}</div>;
+} 
\ No newline at end of file
diff --git a/components/ui/Typography.tsx b/components/ui/Typography.tsx
new file mode 100644
index 0000000..aab52b1
--- /dev/null
+++ b/components/ui/Typography.tsx
@@ -0,0 +1,182 @@
+import clsx from 'clsx';
+import React from 'react';
+
+// Typography scale common props
+interface TypographyProps {
+  children: React.ReactNode;
+  className?: string;
+  as?: React.ElementType;
+}
+
+// Heading component props
+interface HeadingProps extends TypographyProps {
+  level?: 1 | 2 | 3 | 4;
+  align?: 'left' | 'center' | 'right';
+}
+
+export function Heading({
+  children,
+  className = '',
+  level = 2,
+  align = 'left',
+  as,
+}: HeadingProps) {
+  const Component = as || `h${level}` as React.ElementType;
+  
+  // Responsive sizes based on provided specs
+  const sizeClasses = {
+    // H1
+    // Desktop: 60px/76px, Mobile: 44px/52px
+    1: 'text-[44px] leading-[52px] lg:text-[60px] lg:leading-[76px] font-allenoire', 
+    
+    // H2
+    // Desktop: 48px/56px, Mobile: 36px/44px
+    2: 'text-[36px] leading-[44px] lg:text-[48px] lg:leading-[56px] font-allenoire', 
+    
+    // H3
+    // Desktop: 28px/36px, Mobile: 24px/32px
+    3: 'text-[24px] leading-[32px] lg:text-[28px] lg:leading-[36px] font-allenoire', 
+    
+    // H4
+    // Desktop: 20px/28px
+    4: 'text-[20px] leading-[28px] font-allenoire', 
+  };
+  
+  const alignClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  };
+  
+  return (
+    <Component
+      className={clsx(
+        sizeClasses[level],
+        alignClasses[align],
+        'tracking-[0px]',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+// Text component props
+interface TextProps extends TypographyProps {
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+  weight?: 'regular' | 'semibold';
+  color?: 'default' | 'muted' | 'accent';
+}
+
+export function Text({
+  children,
+  className = '',
+  size = 'base',
+  weight = 'regular',
+  color = 'default',
+  as = 'p',
+}: TextProps) {
+  const Component = as;
+  
+  // Base size classes without font family
+  const sizeClasses = {
+    xs: 'text-[12px] leading-[20px]',
+    sm: 'text-[14px] leading-[22px]',
+    base: 'text-[16px] leading-[24px]',
+    lg: 'text-[16px] leading-[28px]',
+    xl: 'text-[20px] leading-[28px]',
+  };
+  
+  // Use Poppins for all text, either regular or semibold
+  const fontClass = weight === 'regular' ? 'font-poppins' : 'font-poppins-semibold';
+  
+  const colorClasses = {
+    default: 'text-black',
+    muted: 'text-gray-600',
+    accent: 'text-blue-600',
+  };
+  
+  return (
+    <Component
+      className={clsx(
+        sizeClasses[size],
+        fontClass,
+        colorClasses[color],
+        'tracking-[0px]',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+// Caption component props
+interface CaptionProps extends TypographyProps {
+  size?: 'sm' | 'base';
+}
+
+export function Caption({
+  children,
+  className = '',
+  size = 'sm',
+  as = 'span',
+}: CaptionProps) {
+  const Component = as;
+  
+  const sizeClasses = {
+    sm: 'text-[12px] leading-[20px]',
+    base: 'text-[14px] leading-[22px]',
+  };
+  
+  return (
+    <Component
+      className={clsx(
+        sizeClasses[size],
+        'text-gray-500',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+}
+
+// Label component props
+interface LabelProps extends TypographyProps {
+  size?: 'sm' | 'base' | 'lg';
+  required?: boolean;
+  htmlFor?: string;
+}
+
+export function Label({
+  children,
+  className = '',
+  size = 'base',
+  required = false,
+  htmlFor,
+  as = 'label',
+}: LabelProps) {
+  const Component = as;
+  
+  const sizeClasses = {
+    sm: 'text-[14px] leading-[22px]',
+    base: 'text-[16px] leading-[24px]',
+    lg: 'text-[18px] leading-[28px]',
+  };
+  
+  return (
+    <Component
+      htmlFor={htmlFor}
+      className={clsx(
+        sizeClasses[size],
+        'font-allenoire tracking-[0px]',
+        className
+      )}
+    >
+      {children}
+      {required && <span className="ml-1 text-red-500">*</span>}
+    </Component>
+  );
+} 
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..5bd106b
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,21 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      args:
+        # Add other build-time variables here
+        COMPANY_NAME: "Fraqtal"
+        TWITTER_CREATOR: ""
+        TWITTER_SITE: ""
+        SITE_NAME: "Fraqtal Store Test"
+        SHOPIFY_REVALIDATION_SECRET: ${SHOPIFY_REVALIDATION_SECRET}
+        SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${SHOPIFY_STOREFRONT_ACCESS_TOKEN}
+        SHOPIFY_STORE_DOMAIN: "knq00i-j1.myshopify.com"
+    image: sent-shop-app:${APP_VERSION:-latest}
+    environment:
+      - NODE_ENV=production
+      # Runtime environment variables
+    ports:
+      - 3005:3005
diff --git a/lib/constants.ts b/lib/constants.ts
new file mode 100644
index 0000000..2891cc6
--- /dev/null
+++ b/lib/constants.ts
@@ -0,0 +1,31 @@
+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',
+  cart: 'cart'
+};
+
+export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
+export const DEFAULT_OPTION = 'Default Title';
+export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2025-01/graphql.json';
diff --git a/lib/hooks/useTranslation.ts b/lib/hooks/useTranslation.ts
new file mode 100644
index 0000000..018a696
--- /dev/null
+++ b/lib/hooks/useTranslation.ts
@@ -0,0 +1,65 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import enTranslations from '../../messages/en.json';
+import hrTranslations from '../../messages/hr.json';
+
+type NestedMessages = {
+  [key: string]: string | NestedMessages;
+};
+
+// Dobavi vrijednost po path-u (npr. 'common.button.submit')
+function getNestedTranslation(obj: NestedMessages, path: string): string {
+  const keys = path.split('.');
+  let current: any = obj;
+
+  for (const key of keys) {
+    if (current[key] === undefined) {
+      console.warn(`Translation key not found: ${path}`);
+      return path;
+    }
+    current = current[key];
+  }
+
+  if (typeof current !== 'string') {
+    console.warn(`Translation value for ${path} is not a string`);
+    return path;
+  }
+
+  return current;
+}
+
+export function useTranslation() {
+  const pathname = usePathname();
+  
+  // Koristimo useState za praćenje locale-a kako bi izbjegli hydration error
+  const [locale, setLocale] = useState('hr'); // Default na 'hr' za prvo renderiranje
+  
+  // Detekcija trenutnog jezika iz URL-a - ovo će biti u useEffect da bi radilo samo na klijentu
+  useEffect(() => {
+    const detectedLocale = pathname.startsWith('/en') ? 'en' : 'hr';
+    setLocale(detectedLocale);
+  }, [pathname]);
+
+  // Odabir odgovarajućeg prijevoda
+  const translations = useMemo(() => {
+    return locale === 'en' ? enTranslations : hrTranslations;
+  }, [locale]);
+
+  // Funkcija za dohvaćanje prevedenog stringa
+  const t = (key: string, variables?: Record<string, string | number>) => {
+    let text = getNestedTranslation(translations as unknown as NestedMessages, key);
+    
+    // Replace variables if they exist
+    if (variables) {
+      Object.entries(variables).forEach(([varName, value]) => {
+        text = text.replace(new RegExp(`{${varName}}`, 'g'), String(value));
+      });
+    }
+    
+    return text;
+  };
+
+  return { t, locale };
+} 
\ No newline at end of file
diff --git a/lib/i18n/pathnames.ts b/lib/i18n/pathnames.ts
new file mode 100644
index 0000000..4242e3f
--- /dev/null
+++ b/lib/i18n/pathnames.ts
@@ -0,0 +1,53 @@
+// Ova datoteka definira putanje za različite lokalizacije
+// Format: { path: { locale: localized_path } }
+
+export const pathnames = {
+  // Za root putanju (početnu stranicu)
+  '/': {
+    en: '/en',
+    hr: '/',
+  },
+  // Za build-box stranicu i njene podstranice
+  '/build-box': {
+    en: '/en/build-box',
+    hr: '/build-box',
+  },
+  '/build-box/customize': {
+    en: '/en/build-box/customize',
+    hr: '/build-box/customize',
+  },
+  // Za proizvode
+  '/products': {
+    en: '/en/products',
+    hr: '/products',
+  },
+  // Za search
+  '/search': {
+    en: '/en/search',
+    hr: '/search',
+  },
+  '/search/:collection': {
+    en: '/en/search/:collection',
+    hr: '/search/:collection',
+  },
+  // Za about stranicu
+  '/about': {
+    en: '/en/about',
+    hr: '/about',
+  },
+  // Za cart
+  '/cart': {
+    en: '/en/cart',
+    hr: '/cart',
+  },
+  // Za proizvod
+  '/product/:product': {
+    en: '/en/product/:product',
+    hr: '/product/:product',
+  },
+  // Za dinamičke stranice
+  '/:page': {
+    en: '/en/:page',
+    hr: '/:page',
+  },
+}; 
\ No newline at end of file
diff --git a/lib/redux/hooks.ts b/lib/redux/hooks.ts
new file mode 100644
index 0000000..cf8a21f
--- /dev/null
+++ b/lib/redux/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector; 
\ No newline at end of file
diff --git a/lib/redux/provider.tsx b/lib/redux/provider.tsx
new file mode 100644
index 0000000..8962fa2
--- /dev/null
+++ b/lib/redux/provider.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { useEffect } from 'react';
+import { Provider } from 'react-redux';
+import { initializeState } from './slices/boxSlice';
+import { store } from './store';
+
+export function ReduxProvider({ children }: { children: React.ReactNode }) {
+  // Inicijaliziraj stanje iz localStorage nakon što se komponenta montira
+  useEffect(() => {
+    store.dispatch(initializeState());
+  }, []);
+
+  return <Provider store={store}>{children}</Provider>;
+} 
\ No newline at end of file
diff --git a/lib/redux/slices/boxSlice.ts b/lib/redux/slices/boxSlice.ts
new file mode 100644
index 0000000..e31b70e
--- /dev/null
+++ b/lib/redux/slices/boxSlice.ts
@@ -0,0 +1,234 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { RootState } from '../store';
+
+// Define the type for a box item
+export interface BoxItem {
+  id: string;
+  name: string;
+  price: number;
+  image: string;
+  quantity: number;
+  variantId?: string;
+  color?: string;
+  compositeKey?: string;
+}
+
+// Define the type for the box state
+interface BoxState {
+  items: BoxItem[];
+  total: number;
+  editingBoxGroupId?: string;
+  isInitialized: boolean;
+}
+
+// Helper function to load state from localStorage
+const loadState = (): BoxState | undefined => {
+  try {
+    // Check if we're in a browser environment
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    
+    const serializedState = localStorage.getItem('boxState');
+    if (serializedState === null) {
+      return undefined;
+    }
+    return JSON.parse(serializedState);
+  } catch (err) {
+    console.error('Error loading box state from localStorage', err);
+    return undefined;
+  }
+};
+
+// Helper function to save state to localStorage
+const saveState = (state: BoxState) => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem('boxState', serializedState);
+  } catch (err) {
+    console.error('Error saving box state to localStorage', err);
+  }
+};
+
+// Initial state without loading from localStorage to avoid hydration mismatch
+const initialState: BoxState = {
+  items: [],
+  total: 0,
+  editingBoxGroupId: undefined,
+  isInitialized: false
+};
+
+// Helper to generate a unique key for an item based on ID and color
+const generateItemKey = (item: { id: string; color?: string }): string => {
+  return `${item.id}-${item.color || 'no-color'}`;
+};
+
+export const boxSlice = createSlice({
+  name: 'box',
+  initialState,
+  reducers: {
+    // Initialize state from localStorage (to be called in useEffect)
+    initializeState: (state) => {
+      // Skip if already initialized
+      if (state.isInitialized) return;
+      
+      try {
+        const savedState = loadState();
+        if (savedState) {
+          state.items = savedState.items || [];
+          state.total = savedState.total || 0;
+          state.editingBoxGroupId = savedState.editingBoxGroupId;
+        }
+      } catch (error) {
+        console.error('Error initializing state from localStorage', error);
+      }
+      
+      state.isInitialized = true;
+    },
+    
+    // Add an item to the box
+    addToBox: (state, action: PayloadAction<BoxItem>) => {
+      const newItem = { ...action.payload };
+      
+      // Check if the variantId should be used as a color
+      if (newItem.variantId && !newItem.color) {
+        newItem.color = newItem.variantId;
+      }
+      
+      // Generate composite key
+      const compositeKey = generateItemKey(newItem);
+      newItem.compositeKey = compositeKey;
+      
+      const existingItemIndex = state.items.findIndex(
+        item => generateItemKey(item) === compositeKey
+      );
+
+      if (existingItemIndex >= 0 && state.items[existingItemIndex]) {
+        // If item with the same key exists, increment quantity
+        const quantity = newItem.quantity || 1;
+        state.items[existingItemIndex].quantity += quantity;
+      } else {
+        // Otherwise add the new item (or item with a different color)
+        state.items.push({ 
+          ...newItem, 
+          quantity: newItem.quantity || 1,
+          compositeKey
+        });
+      }
+
+      // Recalculate total
+      state.total = state.items.reduce(
+        (sum, item) => sum + item.price * item.quantity, 0
+      );
+      
+      // Save to localStorage
+      saveState(state);
+    },
+    
+    // Update item quantity
+    updateQuantity: (state, action: PayloadAction<{ id: string; color?: string; quantity: number }>) => {
+      const { id, color, quantity } = action.payload;
+      const itemKey = generateItemKey({ id, color });
+      const item = state.items.find(item => generateItemKey(item) === itemKey);
+      
+      if (item) {
+        item.quantity = quantity;
+        
+        // Recalculate total
+        state.total = state.items.reduce(
+          (sum, item) => sum + item.price * item.quantity, 0
+        );
+      }
+      
+      // Save to localStorage
+      saveState(state);
+    },
+    
+    // Remove an item from the box
+    removeFromBox: (state, action: PayloadAction<{ id: string; color?: string }>) => {
+      const { id, color } = action.payload;
+      const itemKeyToRemove = generateItemKey({ id, color });
+      state.items = state.items.filter(item => generateItemKey(item) !== itemKeyToRemove);
+      
+      // Recalculate total
+      state.total = state.items.reduce(
+        (sum, item) => sum + item.price * item.quantity, 0
+      );
+      
+      // Save to localStorage
+      saveState(state);
+    },
+    
+    // Clear the entire box
+    clearBox: (state) => {
+      state.items = [];
+      state.total = 0;
+      state.editingBoxGroupId = undefined;
+      
+      // Save to localStorage
+      saveState(state);
+    },
+    
+    // Load a box for editing
+    loadBoxForEditing: (state) => {
+      try {
+        if (typeof window === 'undefined') {
+          return;
+        }
+        
+        const boxStateString = localStorage.getItem('lastBoxState');
+        if (!boxStateString) {
+          return;
+        }
+        
+        const boxState = JSON.parse(boxStateString);
+        
+        // Spremi originalni boxGroupId ako postoji
+        if (boxState && boxState.originalBoxGroupId) {
+          state.editingBoxGroupId = boxState.originalBoxGroupId;
+        }
+        
+        if (boxState && boxState.boxItems && boxState.productItems) {
+          // Reset current state
+          state.items = [];
+          
+          // Add box items
+          boxState.boxItems.forEach((item: BoxItem) => {
+            state.items.push(item);
+          });
+          
+          // Add product items
+          boxState.productItems.forEach((item: BoxItem) => {
+            state.items.push(item);
+          });
+          
+          // Recalculate total
+          state.total = state.items.reduce(
+            (sum, item) => sum + item.price * item.quantity, 0
+          );
+          
+          // Save to localStorage
+          saveState(state);
+        }
+      } catch (error) {
+        console.error('Error loading box for editing', error);
+      }
+    },
+  },
+});
+
+// Export actions
+export const { initializeState, addToBox, updateQuantity, removeFromBox, clearBox, loadBoxForEditing } = boxSlice.actions;
+
+// Selectors
+export const selectBoxItems = (state: RootState) => state.box.items;
+export const selectBoxTotal = (state: RootState) => state.box.total;
+export const selectBoxItemsCount = (state: RootState) => 
+  state.box.items.reduce((total, item) => total + item.quantity, 0);
+export const selectEditingBoxGroupId = (state: RootState) => state.box.editingBoxGroupId;
+
+export default boxSlice.reducer; 
\ No newline at end of file
diff --git a/lib/redux/store.ts b/lib/redux/store.ts
new file mode 100644
index 0000000..882ed3c
--- /dev/null
+++ b/lib/redux/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import boxReducer from './slices/boxSlice';
+
+export const store = configureStore({
+  reducer: {
+    box: boxReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch; 
\ No newline at end of file
diff --git a/lib/shopify/fragments/cart.ts b/lib/shopify/fragments/cart.ts
new file mode 100644
index 0000000..6e5bac5
--- /dev/null
+++ b/lib/shopify/fragments/cart.ts
@@ -0,0 +1,57 @@
+import productFragment from './product';
+
+const cartFragment = /* GraphQL */ `
+  fragment cart on Cart {
+    id
+    checkoutUrl
+    cost {
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      totalTaxAmount {
+        amount
+        currencyCode
+      }
+    }
+    lines(first: 100) {
+      edges {
+        node {
+          id
+          quantity
+          attributes {
+            key
+            value
+          }
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+          }
+          merchandise {
+            ... on ProductVariant {
+              id
+              title
+              selectedOptions {
+                name
+                value
+              }
+              product {
+                ...product
+              }
+            }
+          }
+        }
+      }
+    }
+    totalQuantity
+  }
+  ${productFragment}
+`;
+
+export default cartFragment;
diff --git a/lib/shopify/fragments/image.ts b/lib/shopify/fragments/image.ts
new file mode 100644
index 0000000..5d002f1
--- /dev/null
+++ b/lib/shopify/fragments/image.ts
@@ -0,0 +1,10 @@
+const imageFragment = /* GraphQL */ `
+  fragment image on Image {
+    url
+    altText
+    width
+    height
+  }
+`;
+
+export default imageFragment;
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
new file mode 100644
index 0000000..834648f
--- /dev/null
+++ b/lib/shopify/fragments/product.ts
@@ -0,0 +1,69 @@
+import imageFragment from './image';
+import seoFragment from './seo';
+
+const productFragment = /* GraphQL */ `
+  fragment product on Product {
+    id
+    handle
+    availableForSale
+    title
+    description
+    descriptionHtml
+    options {
+      id
+      name
+      values
+    }
+    priceRange {
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    variants(first: 250) {
+      edges {
+        node {
+          id
+          title
+          availableForSale
+          selectedOptions {
+            name
+            value
+          }
+          price {
+            amount
+            currencyCode
+          }
+        }
+      }
+    }
+    featuredImage {
+      ...image
+    }
+    images(first: 20) {
+      edges {
+        node {
+          ...image
+        }
+      }
+    }
+    seo {
+      ...seo
+    }
+    tags
+    updatedAt
+    metafields(identifiers: [{ namespace: "custom", key: "is_box_product" }]) {
+      id
+      key
+      value
+    }
+  }
+  ${imageFragment}
+  ${seoFragment}
+`;
+
+export default productFragment;
diff --git a/lib/shopify/fragments/seo.ts b/lib/shopify/fragments/seo.ts
new file mode 100644
index 0000000..2d4786c
--- /dev/null
+++ b/lib/shopify/fragments/seo.ts
@@ -0,0 +1,8 @@
+const seoFragment = /* GraphQL */ `
+  fragment seo on SEO {
+    description
+    title
+  }
+`;
+
+export default seoFragment;
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
new file mode 100644
index 0000000..5ca3b54
--- /dev/null
+++ b/lib/shopify/index.ts
@@ -0,0 +1,495 @@
+import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
+import { isShopifyError } from 'lib/type-guards';
+import { ensureStartsWith } from 'lib/utils';
+import { revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  addToCartMutation,
+  createCartMutation,
+  editCartItemsMutation,
+  removeFromCartMutation
+} from './mutations/cart';
+import { getCartQuery } from './queries/cart';
+import {
+  getCollectionProductsQuery,
+  getCollectionQuery,
+  getCollectionsQuery
+} from './queries/collection';
+import { getMenuQuery } from './queries/menu';
+import { getPageQuery, getPagesQuery } from './queries/page';
+import {
+  getProductQuery,
+  getProductRecommendationsQuery,
+  getProductsQuery
+} from './queries/product';
+import {
+  Cart,
+  Collection,
+  Connection,
+  Image,
+  Menu,
+  Page,
+  Product,
+  ShopifyAddToCartOperation,
+  ShopifyCart,
+  ShopifyCartOperation,
+  ShopifyCollection,
+  ShopifyCollectionOperation,
+  ShopifyCollectionProductsOperation,
+  ShopifyCollectionsOperation,
+  ShopifyCreateCartOperation,
+  ShopifyMenuOperation,
+  ShopifyPageOperation,
+  ShopifyPagesOperation,
+  ShopifyProduct,
+  ShopifyProductOperation,
+  ShopifyProductRecommendationsOperation,
+  ShopifyProductsOperation,
+  ShopifyRemoveFromCartOperation,
+  ShopifyUpdateCartOperation
+} from './types';
+
+const domain = process.env.SHOPIFY_STORE_DOMAIN
+  ? ensureStartsWith(process.env.SHOPIFY_STORE_DOMAIN, 'https://')
+  : '';
+const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
+const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;
+
+type ExtractVariables<T> = T extends { variables: object } ? T['variables'] : never;
+
+export async function shopifyFetch<T>({
+  cache = 'force-cache',
+  headers,
+  query,
+  tags,
+  variables
+}: {
+  cache?: RequestCache;
+  headers?: HeadersInit;
+  query: string;
+  tags?: string[];
+  variables?: ExtractVariables<T>;
+}): Promise<{ status: number; body: T } | never> {
+  try {
+    const result = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Shopify-Storefront-Access-Token': key,
+        ...headers
+      },
+      body: JSON.stringify({
+        ...(query && { query }),
+        ...(variables && { variables })
+      }),
+      cache,
+      ...(tags && { next: { tags } })
+    });
+
+    const body = await result.json();
+
+    if (body.errors) {
+      throw body.errors[0];
+    }
+
+    return {
+      status: result.status,
+      body
+    };
+  } catch (e) {
+    if (isShopifyError(e)) {
+      throw {
+        cause: e.cause?.toString() || 'unknown',
+        status: e.status || 500,
+        message: e.message,
+        query
+      };
+    }
+
+    throw {
+      error: e,
+      query
+    };
+  }
+}
+
+const removeEdgesAndNodes = <T>(array: Connection<T>): T[] => {
+  return array.edges.map((edge) => edge?.node);
+};
+
+const reshapeCart = (cart: ShopifyCart): Cart => {
+  if (!cart.cost?.totalTaxAmount) {
+    cart.cost.totalTaxAmount = {
+      amount: '0.0',
+      currencyCode: cart.cost.totalAmount.currencyCode
+    };
+  }
+
+  return {
+    ...cart,
+    lines: removeEdgesAndNodes(cart.lines)
+  };
+};
+
+const reshapeCollection = (collection: ShopifyCollection): Collection | undefined => {
+  if (!collection) {
+    return undefined;
+  }
+
+  return {
+    ...collection,
+    path: `/search/${collection.handle}`
+  };
+};
+
+const reshapeCollections = (collections: ShopifyCollection[]) => {
+  const reshapedCollections = [];
+
+  for (const collection of collections) {
+    if (collection) {
+      const reshapedCollection = reshapeCollection(collection);
+
+      if (reshapedCollection) {
+        reshapedCollections.push(reshapedCollection);
+      }
+    }
+  }
+
+  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;
+  }
+
+  const { images, variants, ...rest } = product;
+
+  return {
+    ...rest,
+    images: reshapeImages(images, product.title),
+    variants: removeEdgesAndNodes(variants)
+  };
+};
+
+const reshapeProducts = (products: ShopifyProduct[]) => {
+  const reshapedProducts = [];
+
+  for (const product of products) {
+    if (product) {
+      const reshapedProduct = reshapeProduct(product);
+
+      if (reshapedProduct) {
+        reshapedProducts.push(reshapedProduct);
+      }
+    }
+  }
+
+  return reshapedProducts;
+};
+
+export async function createCart(): Promise<Cart> {
+  const res = await shopifyFetch<ShopifyCreateCartOperation>({
+    query: createCartMutation,
+    cache: 'no-store'
+  });
+
+  return reshapeCart(res.body.data.cartCreate.cart);
+}
+
+export async function addToCart(
+  cartId: string,
+  lines: { merchandiseId: string; quantity: number; attributes?: { key: string; value: string }[] }[]
+): Promise<Cart> {
+  const res = await shopifyFetch<ShopifyAddToCartOperation>({
+    query: addToCartMutation,
+    variables: {
+      cartId,
+      lines
+    },
+    cache: 'no-store'
+  });
+  return reshapeCart(res.body.data.cartLinesAdd.cart);
+}
+
+export async function removeFromCart(cartId: string, lineIds: string[]): Promise<Cart> {
+  const res = await shopifyFetch<ShopifyRemoveFromCartOperation>({
+    query: removeFromCartMutation,
+    variables: {
+      cartId,
+      lineIds
+    },
+    cache: 'no-store'
+  });
+
+  return reshapeCart(res.body.data.cartLinesRemove.cart);
+}
+
+export async function updateCart(
+  cartId: string,
+  lines: { id: string; merchandiseId: string; quantity: number }[]
+): Promise<Cart> {
+  const res = await shopifyFetch<ShopifyUpdateCartOperation>({
+    query: editCartItemsMutation,
+    variables: {
+      cartId,
+      lines
+    },
+    cache: 'no-store'
+  });
+
+  return reshapeCart(res.body.data.cartLinesUpdate.cart);
+}
+
+export async function getCart(cartId: string | undefined): Promise<Cart | undefined> {
+  if (!cartId) {
+    return undefined;
+  }
+
+  const res = await shopifyFetch<ShopifyCartOperation>({
+    query: getCartQuery,
+    variables: { cartId },
+    tags: [TAGS.cart]
+  });
+
+  // Old carts becomes `null` when you checkout.
+  if (!res.body.data.cart) {
+    return undefined;
+  }
+
+  return reshapeCart(res.body.data.cart);
+}
+
+export async function getCollection(handle: string): Promise<Collection | undefined> {
+  const res = await shopifyFetch<ShopifyCollectionOperation>({
+    query: getCollectionQuery,
+    tags: [TAGS.collections],
+    variables: {
+      handle
+    }
+  });
+
+  return reshapeCollection(res.body.data.collection);
+}
+
+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: collection,
+      reverse,
+      sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey
+    }
+  });
+
+  if (!res.body.data.collection) {
+    return [];
+  }
+
+  return reshapeProducts(removeEdgesAndNodes(res.body.data.collection.products));
+}
+
+export async function getCollections(): Promise<Collection[]> {
+  const res = await shopifyFetch<ShopifyCollectionsOperation>({
+    query: getCollectionsQuery,
+    tags: [TAGS.collections]
+  });
+  const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
+  const collections = [
+    {
+      handle: '',
+      title: 'All',
+      description: 'All products',
+      seo: {
+        title: 'All',
+        description: 'All products'
+      },
+      path: '/search',
+      updatedAt: new Date().toISOString()
+    },
+    // Filter out the `hidden` collections.
+    // Collections that start with `hidden-*` need to be hidden on the search page.
+    ...reshapeCollections(shopifyCollections).filter(
+      (collection) => !collection.handle.startsWith('hidden')
+    )
+  ];
+
+  return collections;
+}
+
+export async function getMenu(handle: string): Promise<Menu[]> {
+  const res = await shopifyFetch<ShopifyMenuOperation>({
+    query: getMenuQuery,
+    tags: [TAGS.collections],
+    variables: {
+      handle
+    }
+  });
+
+  return (
+    res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
+      title: item.title,
+      path: item.url.replace(domain, '').replace('/collections', '/search').replace('/pages', '')
+    })) || []
+  );
+}
+
+export async function getPage(handle: string): Promise<Page> {
+  const res = await shopifyFetch<ShopifyPageOperation>({
+    query: getPageQuery,
+    cache: 'no-store',
+    variables: { handle }
+  });
+
+  return res.body.data.pageByHandle;
+}
+
+export async function getPages(): Promise<Page[]> {
+  const res = await shopifyFetch<ShopifyPagesOperation>({
+    query: getPagesQuery,
+    cache: 'no-store'
+  });
+
+  return removeEdgesAndNodes(res.body.data.pages);
+}
+
+export async function getProduct(handle: string): Promise<Product | undefined> {
+  const res = await shopifyFetch<ShopifyProductOperation>({
+    query: getProductQuery,
+    tags: [TAGS.products],
+    variables: {
+      handle
+    }
+  });
+
+  return reshapeProduct(res.body.data.product, false);
+}
+
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
+  const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
+    query: getProductRecommendationsQuery,
+    tags: [TAGS.products],
+    variables: {
+      productId
+    }
+  });
+
+  return reshapeProducts(res.body.data.productRecommendations);
+}
+
+export async function getProducts({
+  query,
+  reverse,
+  sortKey
+}: {
+  query?: string;
+  reverse?: boolean;
+  sortKey?: string;
+}): Promise<Product[]> {
+  const res = await shopifyFetch<ShopifyProductsOperation>({
+    query: getProductsQuery,
+    tags: [TAGS.products],
+    variables: {
+      query,
+      reverse,
+      sortKey
+    }
+  });
+
+  return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
+}
+
+export async function getRegularProducts({
+  query,
+  reverse,
+  sortKey
+}: {
+  query?: string;
+  reverse?: boolean;
+  sortKey?: string;
+}): Promise<Product[]> {
+  const allProducts = await getProducts({
+    query,
+    reverse,
+    sortKey
+  });
+  
+  return allProducts.filter(product => {
+    const hasBoxTag = product.tags.some(tag => tag.toLowerCase() === 'box');
+    const hasBoxInTitle = product.title.toLowerCase().includes('box');
+    return !hasBoxTag && !hasBoxInTitle;
+  });
+}
+
+export async function getBoxProducts({
+  query,
+  reverse,
+  sortKey
+}: {
+  query?: string;
+  reverse?: boolean;
+  sortKey?: string;
+}): Promise<Product[]> {
+  const allProducts = await getProducts({ query, reverse, sortKey });
+  
+  // Keep only box products based on tags or title
+  return allProducts.filter(product => {
+    const hasBoxTag = product.tags.some(tag => tag.toLowerCase() === 'box');
+    const hasBoxInTitle = product.title.toLowerCase().includes('box');
+    return hasBoxTag || hasBoxInTitle;
+  });
+}
+
+// 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 = (await 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: 401 });
+  }
+
+  if (!isCollectionUpdate && !isProductUpdate) {
+    // We don't need to revalidate anything for any other topics.
+    return NextResponse.json({ status: 200 });
+  }
+
+  if (isCollectionUpdate) {
+    revalidateTag(TAGS.collections);
+  }
+
+  if (isProductUpdate) {
+    revalidateTag(TAGS.products);
+  }
+
+  return NextResponse.json({ status: 200, revalidated: true, now: Date.now() });
+}
diff --git a/lib/shopify/mutations/cart.ts b/lib/shopify/mutations/cart.ts
new file mode 100644
index 0000000..4cc1b5a
--- /dev/null
+++ b/lib/shopify/mutations/cart.ts
@@ -0,0 +1,45 @@
+import cartFragment from '../fragments/cart';
+
+export const addToCartMutation = /* GraphQL */ `
+  mutation addToCart($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) {
+      cart {
+        ...cart
+      }
+    }
+  }
+  ${cartFragment}
+`;
+
+export const createCartMutation = /* GraphQL */ `
+  mutation createCart($lineItems: [CartLineInput!]) {
+    cartCreate(input: { lines: $lineItems }) {
+      cart {
+        ...cart
+      }
+    }
+  }
+  ${cartFragment}
+`;
+
+export const editCartItemsMutation = /* GraphQL */ `
+  mutation editCartItems($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) {
+      cart {
+        ...cart
+      }
+    }
+  }
+  ${cartFragment}
+`;
+
+export const removeFromCartMutation = /* GraphQL */ `
+  mutation removeFromCart($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+      cart {
+        ...cart
+      }
+    }
+  }
+  ${cartFragment}
+`;
diff --git a/lib/shopify/queries/cart.ts b/lib/shopify/queries/cart.ts
new file mode 100644
index 0000000..044e47f
--- /dev/null
+++ b/lib/shopify/queries/cart.ts
@@ -0,0 +1,10 @@
+import cartFragment from '../fragments/cart';
+
+export const getCartQuery = /* GraphQL */ `
+  query getCart($cartId: ID!) {
+    cart(id: $cartId) {
+      ...cart
+    }
+  }
+  ${cartFragment}
+`;
diff --git a/lib/shopify/queries/collection.ts b/lib/shopify/queries/collection.ts
new file mode 100644
index 0000000..6396ff8
--- /dev/null
+++ b/lib/shopify/queries/collection.ts
@@ -0,0 +1,56 @@
+import productFragment from '../fragments/product';
+import seoFragment from '../fragments/seo';
+
+const collectionFragment = /* GraphQL */ `
+  fragment collection on Collection {
+    handle
+    title
+    description
+    seo {
+      ...seo
+    }
+    updatedAt
+  }
+  ${seoFragment}
+`;
+
+export const getCollectionQuery = /* GraphQL */ `
+  query getCollection($handle: String!) {
+    collection(handle: $handle) {
+      ...collection
+    }
+  }
+  ${collectionFragment}
+`;
+
+export const getCollectionsQuery = /* GraphQL */ `
+  query getCollections {
+    collections(first: 100, sortKey: TITLE) {
+      edges {
+        node {
+          ...collection
+        }
+      }
+    }
+  }
+  ${collectionFragment}
+`;
+
+export const getCollectionProductsQuery = /* GraphQL */ `
+  query getCollectionProducts(
+    $handle: String!
+    $sortKey: ProductCollectionSortKeys
+    $reverse: Boolean
+  ) {
+    collection(handle: $handle) {
+      products(sortKey: $sortKey, reverse: $reverse, first: 100) {
+        edges {
+          node {
+            ...product
+          }
+        }
+      }
+    }
+  }
+  ${productFragment}
+`;
diff --git a/lib/shopify/queries/menu.ts b/lib/shopify/queries/menu.ts
new file mode 100644
index 0000000..d05b099
--- /dev/null
+++ b/lib/shopify/queries/menu.ts
@@ -0,0 +1,10 @@
+export const getMenuQuery = /* GraphQL */ `
+  query getMenu($handle: String!) {
+    menu(handle: $handle) {
+      items {
+        title
+        url
+      }
+    }
+  }
+`;
diff --git a/lib/shopify/queries/page.ts b/lib/shopify/queries/page.ts
new file mode 100644
index 0000000..ac6f6f9
--- /dev/null
+++ b/lib/shopify/queries/page.ts
@@ -0,0 +1,41 @@
+import seoFragment from '../fragments/seo';
+
+const pageFragment = /* GraphQL */ `
+  fragment page on Page {
+    ... on Page {
+      id
+      title
+      handle
+      body
+      bodySummary
+      seo {
+        ...seo
+      }
+      createdAt
+      updatedAt
+    }
+  }
+  ${seoFragment}
+`;
+
+export const getPageQuery = /* GraphQL */ `
+  query getPage($handle: String!) {
+    pageByHandle(handle: $handle) {
+      ...page
+    }
+  }
+  ${pageFragment}
+`;
+
+export const getPagesQuery = /* GraphQL */ `
+  query getPages {
+    pages(first: 100) {
+      edges {
+        node {
+          ...page
+        }
+      }
+    }
+  }
+  ${pageFragment}
+`;
diff --git a/lib/shopify/queries/product.ts b/lib/shopify/queries/product.ts
new file mode 100644
index 0000000..d3f12bd
--- /dev/null
+++ b/lib/shopify/queries/product.ts
@@ -0,0 +1,32 @@
+import productFragment from '../fragments/product';
+
+export const getProductQuery = /* GraphQL */ `
+  query getProduct($handle: String!) {
+    product(handle: $handle) {
+      ...product
+    }
+  }
+  ${productFragment}
+`;
+
+export const getProductsQuery = /* GraphQL */ `
+  query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String) {
+    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) {
+      edges {
+        node {
+          ...product
+        }
+      }
+    }
+  }
+  ${productFragment}
+`;
+
+export const getProductRecommendationsQuery = /* GraphQL */ `
+  query getProductRecommendations($productId: ID!) {
+    productRecommendations(productId: $productId) {
+      ...product
+    }
+  }
+  ${productFragment}
+`;
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
new file mode 100644
index 0000000..e516130
--- /dev/null
+++ b/lib/shopify/types.ts
@@ -0,0 +1,287 @@
+export type Maybe<T> = T | null;
+
+export type Connection<T> = {
+  edges: Array<Edge<T>>;
+};
+
+export type Edge<T> = {
+  node: T;
+};
+
+export type Cart = Omit<ShopifyCart, 'lines'> & {
+  lines: CartItem[];
+};
+
+export type CartProduct = {
+  id: string;
+  handle: string;
+  title: string;
+  featuredImage: Image;
+};
+
+export type CartItem = {
+  id: string | undefined;
+  quantity: number;
+  attributes?: {
+    key: string;
+    value: string;
+  }[];
+  cost: {
+    totalAmount: Money;
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: {
+      name: string;
+      value: string;
+    }[];
+    product: CartProduct;
+  };
+};
+
+export type Collection = ShopifyCollection & {
+  path: string;
+};
+
+export type Image = {
+  url: string;
+  altText: string;
+  width: number;
+  height: number;
+};
+
+export type Menu = {
+  title: string;
+  path: string;
+};
+
+export type Money = {
+  amount: string;
+  currencyCode: string;
+};
+
+export type Page = {
+  id: string;
+  title: string;
+  handle: string;
+  body: string;
+  bodySummary: string;
+  seo?: SEO;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type Metafield = {
+  id: string;
+  key: string;
+  value: string;
+};
+
+export type Product = Omit<ShopifyProduct, 'variants' | 'images'> & {
+  variants: ProductVariant[];
+  images: Image[];
+};
+
+export type ProductOption = {
+  id: string;
+  name: string;
+  values: string[];
+};
+
+export type ProductVariant = {
+  id: string;
+  title: string;
+  availableForSale: boolean;
+  selectedOptions: {
+    name: string;
+    value: string;
+  }[];
+  price: Money;
+};
+
+export type SEO = {
+  title: string;
+  description: string;
+};
+
+export type ShopifyCart = {
+  id: string | undefined;
+  checkoutUrl: string;
+  cost: {
+    subtotalAmount: Money;
+    totalAmount: Money;
+    totalTaxAmount: Money;
+  };
+  lines: Connection<CartItem>;
+  totalQuantity: number;
+};
+
+export type ShopifyCollection = {
+  handle: string;
+  title: string;
+  description: string;
+  seo: SEO;
+  updatedAt: string;
+};
+
+export type ShopifyProduct = {
+  id: string;
+  handle: string;
+  availableForSale: boolean;
+  title: string;
+  description: string;
+  descriptionHtml: string;
+  options: ProductOption[];
+  priceRange: {
+    maxVariantPrice: Money;
+    minVariantPrice: Money;
+  };
+  variants: Connection<ProductVariant>;
+  featuredImage: Image;
+  images: Connection<Image>;
+  seo: SEO;
+  tags: string[];
+  updatedAt: string;
+  metafields: Metafield[];
+};
+
+export type ShopifyCartOperation = {
+  data: {
+    cart: ShopifyCart;
+  };
+  variables: {
+    cartId: string;
+  };
+};
+
+export type ShopifyCreateCartOperation = {
+  data: { cartCreate: { cart: ShopifyCart } };
+};
+
+export type ShopifyAddToCartOperation = {
+  data: {
+    cartLinesAdd: {
+      cart: ShopifyCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lines: {
+      merchandiseId: string;
+      quantity: number;
+      attributes?: {
+        key: string;
+        value: string;
+      }[];
+    }[];
+  };
+};
+
+export type ShopifyRemoveFromCartOperation = {
+  data: {
+    cartLinesRemove: {
+      cart: ShopifyCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lineIds: string[];
+  };
+};
+
+export type ShopifyUpdateCartOperation = {
+  data: {
+    cartLinesUpdate: {
+      cart: ShopifyCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lines: {
+      id: string;
+      merchandiseId: string;
+      quantity: number;
+    }[];
+  };
+};
+
+export type ShopifyCollectionOperation = {
+  data: {
+    collection: ShopifyCollection;
+  };
+  variables: {
+    handle: string;
+  };
+};
+
+export type ShopifyCollectionProductsOperation = {
+  data: {
+    collection: {
+      products: Connection<ShopifyProduct>;
+    };
+  };
+  variables: {
+    handle: string;
+    reverse?: boolean;
+    sortKey?: string;
+  };
+};
+
+export type ShopifyCollectionsOperation = {
+  data: {
+    collections: Connection<ShopifyCollection>;
+  };
+};
+
+export type ShopifyMenuOperation = {
+  data: {
+    menu?: {
+      items: {
+        title: string;
+        url: string;
+      }[];
+    };
+  };
+  variables: {
+    handle: string;
+  };
+};
+
+export type ShopifyPageOperation = {
+  data: { pageByHandle: Page };
+  variables: { handle: string };
+};
+
+export type ShopifyPagesOperation = {
+  data: {
+    pages: Connection<Page>;
+  };
+};
+
+export type ShopifyProductOperation = {
+  data: { product: ShopifyProduct };
+  variables: {
+    handle: string;
+  };
+};
+
+export type ShopifyProductRecommendationsOperation = {
+  data: {
+    productRecommendations: ShopifyProduct[];
+  };
+  variables: {
+    productId: string;
+  };
+};
+
+export type ShopifyProductsOperation = {
+  data: {
+    products: Connection<ShopifyProduct>;
+  };
+  variables: {
+    query?: string;
+    reverse?: boolean;
+    sortKey?: string;
+  };
+};
diff --git a/lib/type-guards.ts b/lib/type-guards.ts
new file mode 100644
index 0000000..6f920d1
--- /dev/null
+++ b/lib/type-guards.ts
@@ -0,0 +1,27 @@
+export interface ShopifyErrorLike {
+  status: number;
+  message: Error;
+  cause?: Error;
+}
+
+export const isObject = (object: unknown): object is Record<string, unknown> => {
+  return typeof object === 'object' && object !== null && !Array.isArray(object);
+};
+
+export const isShopifyError = (error: unknown): error is ShopifyErrorLike => {
+  if (!isObject(error)) return false;
+
+  if (error instanceof Error) return true;
+
+  return findError(error);
+};
+
+function findError<T extends object>(error: T): boolean {
+  if (Object.prototype.toString.call(error) === '[object Error]') {
+    return true;
+  }
+
+  const prototype = Object.getPrototypeOf(error) as T | null;
+
+  return prototype === null ? false : findError(prototype);
+}
diff --git a/lib/types/carousel.ts b/lib/types/carousel.ts
new file mode 100644
index 0000000..71ad97a
--- /dev/null
+++ b/lib/types/carousel.ts
@@ -0,0 +1,10 @@
+export interface CarouselSlide {
+  id: number;
+  title: string;
+  titleColored: string;
+  titleEnd: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+  imageSrc: string;
+} 
\ No newline at end of file
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..ce183d7
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,60 @@
+import { type ClassValue, clsx } from "clsx";
+import { ReadonlyURLSearchParams } from 'next/navigation';
+import { twMerge } from "tailwind-merge";
+
+export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
+  const paramsString = params.toString();
+  const queryString = `${paramsString.length ? '?' : ''}${paramsString}`;
+
+  return `${pathname}${queryString}`;
+};
+
+export const ensureStartsWith = (stringToCheck: string, startsWith: string) => {
+  if (typeof stringToCheck !== 'string') {
+    return stringToCheck;
+  }
+
+  if (startsWith.length === 0) {
+    return stringToCheck;
+  }
+
+  if (stringToCheck.startsWith(startsWith)) {
+    return stringToCheck;
+  }
+
+  return `${startsWith}${stringToCheck}`;
+};
+
+export const validateEnvironmentVariables = () => {
+  const requiredEnvironmentVariables = ['SHOPIFY_STORE_DOMAIN', 'SHOPIFY_STOREFRONT_ACCESS_TOKEN'];
+  const missingEnvironmentVariables = [] as string[];
+
+  requiredEnvironmentVariables.forEach((envVar) => {
+    if (!process.env[envVar]) {
+      missingEnvironmentVariables.push(envVar);
+    }
+  });
+
+  if (missingEnvironmentVariables.length) {
+    throw new Error(
+      `The following environment variables are missing. Your site will not work without them. Read more: https://vercel.com/docs/integrations/shopify#configure-environment-variables\n\n${missingEnvironmentVariables.join(
+        '\n'
+      )}\n`
+    );
+  }
+
+  if (
+    process.env.SHOPIFY_STORE_DOMAIN?.includes('[') ||
+    process.env.SHOPIFY_STORE_DOMAIN?.includes(']')
+  ) {
+    throw new Error(
+      'Your `SHOPIFY_STORE_DOMAIN` environment variable includes brackets (ie. `[` and / or `]`). Your site will not work with them there. Please remove them.'
+    );
+  }
+};
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export const container = 'container mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-4';
diff --git a/license.md b/license.md
new file mode 100644
index 0000000..ec9dcd9
--- /dev/null
+++ b/license.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/messages/en.json b/messages/en.json
new file mode 100644
index 0000000..e054b58
--- /dev/null
+++ b/messages/en.json
@@ -0,0 +1,209 @@
+{
+  "common": {
+    "home": "Home",
+    "products": "Products",
+    "about": "About",
+    "contact": "Contact",
+    "cart": "Cart"
+  },
+  "home": {
+    "title": "Personalized gift boxes for every occasion",
+    "description": "Discover the joy of gifting with our \"Build a Box\" option. Choose from carefully selected products and create a gift that will wow at first sight."
+  },
+  "buttons": {
+    "add_to_cart": "Add to Cart",
+    "buy_now": "Buy Now",
+    "learn_more": "Learn More"
+  },
+  "forms": {
+    "name": "Name",
+    "email": "Email",
+    "message": "Message",
+    "submit": "Submit"
+  },
+  "navbar": {
+    "build_box": "Build Box",
+    "products": "Ready-Made",
+    "about": "About",
+    "cart": "Cart"
+  },
+  "footer": {
+    "build_box": "Build Box",
+    "products": "Ready-Made",
+    "about": "About",
+    "privacy_policy": "Privacy Policy",
+    "terms_of_service": "Terms of Service",
+    "cookies_settings": "Cookies Settings",
+    "all_rights_reserved": "All Rights Reserved",
+    "social": {
+      "facebook": "Facebook",
+      "instagram": "Instagram"
+    }
+  },
+  "hero": {
+    "title": "Personalized",
+    "title_colored": "gift boxes",
+    "title_end": "for every occasion",
+    "description": "Discover the joy of gifting with our \"Build a Box\" option. Choose from carefully selected products and create a gift that will wow at first sight.",
+    "build_box_button": "Build a Box",
+    "ready_made_button": "Shop Ready-Made Gifts"
+  },
+  "customerReviews": {
+    "title": "Customer Reviews",
+    "reviews": [
+      {
+        "author": "Emily Johnson",
+        "comment": "\"The 'Build a Box' feature made gift-giving so easy and special!\""
+      },
+      {
+        "author": "Michael Smith",
+        "comment": "\"Sent's service exceeded my expectations every time!\""
+      },
+      {
+        "author": "Sarah Lee",
+        "comment": "\"The quality of the products was outstanding!\""
+      }
+    ]
+  },
+  "giftBoxBuilder": {
+    "title": "Build your gift box – from the first to the last detail",
+    "description": "At Sent, we believe in the power of personalized gifting. Our 'Build a Box' option allows you to create a unique gift tailored to your loved ones.",
+    "button": "Get Started",
+    "altText": "Build your gift box"
+  },
+  "woltDelivery": {
+    "title": "Find us on Wolt!",
+    "description": "Discover our personalized gift boxes available for delivery through Wolt. Perfect for any occasion!",
+    "button": "Open Wolt",
+    "altText": "Find us on Wolt"
+  },
+  "cardSection": {
+    "title": "Gift Your Way",
+    "description": "Whether you want to build a personalized box, choose something from our ready-made collection, or give a gift card – Sent has the perfect option for every occasion.",
+    "cards": [
+      {
+        "title": "Build Your Custom Box",
+        "description": "Create a gift that perfectly matches the person it's intended for. Choose from our carefully selected products and create a box that tells your story. You choose, we package with love.",
+        "imageAlt": "Build Your Custom Box"
+      },
+      {
+        "title": "Ready-Made Boxes",
+        "description": "Don't want to overthink it? We've got you! Our pre-designed boxes are full of carefully chosen products, perfect for birthdays, anniversaries, \"just because\" moments, and everything in between.",
+        "imageAlt": "Ready-Made Boxes"
+      },
+      {
+        "title": "Gift Cards",
+        "description": "When you're not sure what to choose – a gift card solves everything! Give the freedom of choice and allow your loved one to build their dream box, just the way they want it.",
+        "imageAlt": "Gift Cards"
+      }
+    ]
+  },
+  "productSlider": {
+    "title": "Products",
+    "description": "Carefully curated gift boxes for every occasion.",
+    "button": "View All"
+  },
+  "about": {
+    "title": "About Us",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+    "contactForm": {
+      "title": "Contact Us",
+      "subtitle": "Have a question? Contact us and we'll respond as soon as possible."
+    },
+    "newsletter": {
+      "title": "Join our newsletter",
+      "subtitle": "Subscribe to our newsletter and be the first to know about new products and special offers.",
+      "buttonText": "Sign Up",
+      "disclaimer": "By clicking Sign Up you're confirming that you agree with our Terms and Conditions."
+    }
+  },
+  "products": {
+    "title": "Ready-Made Products",
+    "emptyMessage": "No products available at this time.",
+    "filters": {
+      "title": "Filters",
+      "button": "Filters",
+      "clearAll": "Clear All",
+      "apply": "Apply Filters"
+    },
+    "sort": {
+      "title": "Sort by",
+      "newest": "Newest",
+      "priceAsc": "Price: Low to High",
+      "priceDesc": "Price: High to Low",
+      "nameAsc": "Name: A-Z",
+      "nameDesc": "Name: Z-A"
+    },
+    "counter": {
+      "showing": "Showing {count} products"
+    }
+  },
+  "buildBox": {
+    "title": "Build a box",
+    "emptyMessage": "No products available at this time.",
+    "progress": "Step {current} of {total}",
+    "step": "step",
+    "sidebar": {
+      "title": "Your box",
+      "empty": "Your box is empty",
+      "emptySubtext": "Add products to create your box",
+      "boxDesign": "Box Design",
+      "boxPrice": "Box price",
+      "nextStep": "Next step",
+      "addProductWarning": "Add at least one product to proceed",
+      "selectBoxWarning": "Select a box design to continue"
+    },
+    "customize": {
+      "title": "Create a box",
+      "emptyMessage": "No box designs available at this time.",
+      "progress": "Step {current}/{total}",
+      "back": "Back",
+      "options": {
+        "select": "Select this box"
+      },
+      "addToCart": "Add to Cart"
+    }
+  },
+  "cart": {
+    "title": "Shopping Cart",
+    "itemCount": "{count} items",
+    "item": "item",
+    "items": "items",
+    "emptyCart": "Your cart is empty",
+    "startShopping": "Start Shopping",
+    "continueToCheckout": "Continue to Checkout",
+    "orderSummary": "Order Summary",
+    "subtotal": "Subtotal",
+    "shipping": "Shipping",
+    "calculated": "Calculated at checkout",
+    "discount": "Discount",
+    "total": "Total",
+    "notes": "Order Notes",
+    "notesPlaceholder": "Add a note about your order",
+    "updateQuantity": "Update quantity",
+    "remove": "Remove",
+    "discountCode": "Discount Code",
+    "discountCodePlaceholder": "Enter discount code",
+    "apply": "Apply",
+    "productDetails": "Product Details",
+    "quantity": "Quantity",
+    "price": "Price",
+    "customBox": "Custom Box",
+    "customBoxContents": "Box Contents",
+    "loading": "Loading your cart...",
+    "products": "Products",
+    "boxes": "Boxes",
+    "color": "Color",
+    "editBox": "Edit box",
+    "collapseBox": "Collapse box",
+    "expandBox": "Expand box"
+  },
+  "product": {
+    "back": "Back",
+    "addToCart": "Add to Cart",
+    "outOfStock": "Out of Stock",
+    "adding": "Adding...",
+    "description": "Description",
+    "details": "Details"
+  }
+} 
\ No newline at end of file
diff --git a/messages/hr.json b/messages/hr.json
new file mode 100644
index 0000000..825afa3
--- /dev/null
+++ b/messages/hr.json
@@ -0,0 +1,209 @@
+{
+  "common": {
+    "home": "Početna",
+    "products": "Proizvodi",
+    "about": "O nama",
+    "contact": "Kontakt",
+    "cart": "Košarica"
+  },
+  "home": {
+    "title": "Personalizirani poklon paketi za svaku priliku",
+    "description": "Otkrij čar darivanja uz našu opciju \"Složi kutiju\". Biraj između pažljivo odabranih proizvoda i složi poklon koji će osvojiti na prvu."
+  },
+  "buttons": {
+    "add_to_cart": "Dodaj u košaricu",
+    "buy_now": "Kupi odmah",
+    "learn_more": "Saznaj više"
+  },
+  "forms": {
+    "name": "Ime",
+    "email": "Email",
+    "message": "Poruka",
+    "submit": "Pošalji"
+  },
+  "navbar": {
+    "build_box": "Složi kutiju",
+    "products": "Gotovi proizvodi",
+    "about": "O nama",
+    "cart": "Košarica"
+  },
+  "footer": {
+    "build_box": "Složi kutiju",
+    "products": "Gotovi proizvodi",
+    "about": "O nama",
+    "privacy_policy": "Politika privatnosti",
+    "terms_of_service": "Uvjeti korištenja",
+    "cookies_settings": "Postavke kolačića",
+    "all_rights_reserved": "Sva prava pridržana",
+    "social": {
+      "facebook": "Facebook",
+      "instagram": "Instagram"
+    }
+  },
+  "hero": {
+    "title": "Personalizirani",
+    "title_colored": "poklon paketi",
+    "title_end": "za svaku priliku",
+    "description": "Otkrij čar darivanja uz našu opciju \"Složi kutiju\". Biraj između pažljivo odabranih proizvoda i složi poklon koji će osvojiti na prvu.",
+    "build_box_button": "Složi kutiju",
+    "ready_made_button": "Kupi gotove poklon pakete"
+  },
+  "customerReviews": {
+    "title": "Iskustva Naših Kupaca",
+    "reviews": [
+      {
+        "author": "Ana Kovačić",
+        "comment": "\"Opcija 'Složi kutiju' učinila je darivanje tako jednostavnim i posebnim!\""
+      },
+      {
+        "author": "Marko Horvat",
+        "comment": "\"Usluga Sent-a nadmašila je moja očekivanja svaki put!\""
+      },
+      {
+        "author": "Ivana Novak",
+        "comment": "\"Kvaliteta proizvoda bila je izvanredna!\""
+      }
+    ]
+  },
+  "giftBoxBuilder": {
+    "title": "Složi svoju poklon kutiju – od prvog do zadnjeg detalja",
+    "description": "U Sentu vjerujemo u snagu personaliziranog darivanja. Naša opcija \"Složi kutiju\" omogućuje vam kreiranje jedinstvenog dara prilagođenog vašim najmilijijma.",
+    "button": "Započni",
+    "altText": "Složi svoju poklon kutiju"
+  },
+  "woltDelivery": {
+    "title": "Pronađite nas i na Woltu!",
+    "description": "Otkrijte naše personalizirane poklon kutije dostupne za dostavu putem Wolt-a. Idealno za svaku priliku!",
+    "button": "Otvori Wolt",
+    "altText": "Pronađite nas na Woltu"
+  },
+  "cardSection": {
+    "title": "Daruj na svoj način",
+    "description": "Bilo da želiš složiti personaliziranu kutiju, odabrati nešto iz naše gotove ponude ili darovati poklon bon – Sent ima savršenu opciju za svaku priliku.",
+    "cards": [
+      {
+        "title": "Složi kutiju po svojoj mjeri",
+        "description": "Složite poklon koji savršeno odgovara osobi kojoj je namijenjen. Birajte među našim pomno odabranim proizvodima i kreirajte kutiju koja priča vašu priču. Vi birate, mi pakiramo s ljubavlju.",
+        "imageAlt": "Složi kutiju po svojoj mjeri"
+      },
+      {
+        "title": "Unaprijed složene kutije",
+        "description": "Ne želite previše razmišljati? Imamo vas! Naše unaprijed složene kutije pune su pažljivo biranih proizvoda, savršenih za rođendane, godišnjice, \"samo zato\" trenutke i sve između.",
+        "imageAlt": "Unaprijed složene kutije"
+      },
+      {
+        "title": "Poklon bonovi",
+        "description": "Kad ne znate što izabrati – poklon bon rješava stvar! Darujte slobodu izbora i omogućite dragoj osobi da složi svoju kutiju snova, baš onako kako želi.",
+        "imageAlt": "Poklon bonovi"
+      }
+    ]
+  },
+  "productSlider": {
+    "title": "Gotovi Proizvodi",
+    "description": "Pomno složene poklon kutije za svaku priliku.",
+    "button": "Vidi sve"
+  },
+  "about": {
+    "title": "O nama",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+    "contactForm": {
+      "title": "Kontaktiraj nas",
+      "subtitle": "Imate pitanje? Javite nam se i odgovorit ćemo u najkraćem mogućem roku."
+    },
+    "newsletter": {
+      "title": "Pretplatite se na newsletter",
+      "subtitle": "Pretplatite se na naš newsletter i budite prvi koji će saznati o novim proizvodima i posebnim ponudama.",
+      "buttonText": "Pretplati se",
+      "disclaimer": "Klikom na Pretplati se potvrđujete da se slažete s našim Uvjetima korištenja."
+    }
+  },
+  "products": {
+    "title": "Gotovi proizvodi",
+    "emptyMessage": "Trenutno nema dostupnih proizvoda.",
+    "filters": {
+      "title": "Filteri",
+      "button": "Filteri",
+      "clearAll": "Očisti sve",
+      "apply": "Primijeni filtere"
+    },
+    "sort": {
+      "title": "Poredaj po",
+      "newest": "Najnovije",
+      "priceAsc": "Cijena: Od niže prema višoj",
+      "priceDesc": "Cijena: Od više prema nižoj",
+      "nameAsc": "Naziv: A-Z",
+      "nameDesc": "Naziv: Z-A"
+    },
+    "counter": {
+      "showing": "Prikazuje se {count} proizvoda"
+    }
+  },
+  "buildBox": {
+    "title": "Kreiraj kutiju",
+    "emptyMessage": "Trenutno nema dostupnih proizvoda.",
+    "progress": "Korak {current} od {total}",
+    "step": "korak",
+    "sidebar": {
+      "title": "Tvoja kutija",
+      "empty": "Tvoja kutija je prazna",
+      "emptySubtext": "Dodaj proizvode kako bi kreirao kutiju",
+      "boxDesign": "Dizajn kutije",
+      "boxPrice": "Cijena kutije",
+      "nextStep": "Idući korak",
+      "addProductWarning": "Dodaj barem jedan proizvod za nastavak",
+      "selectBoxWarning": "Odaberi dizajn kutije za nastavak"
+    },
+    "customize": {
+      "title": "Kreiraj kutiju",
+      "emptyMessage": "Trenutno nema dostupnih dizajna kutija.",
+      "progress": "Korak {current}/{total}",
+      "back": "Nazad",
+      "options": {
+        "select": "Odaberi ovu kutiju"
+      },
+      "addToCart": "Dodaj u košaricu"
+    }
+  },
+  "cart": {
+    "title": "Košarica",
+    "itemCount": "{count} proizvoda",
+    "item": "proizvod",
+    "items": "proizvoda",
+    "emptyCart": "Vaša košarica je prazna",
+    "startShopping": "Započni kupovinu",
+    "continueToCheckout": "Nastavi na plaćanje",
+    "orderSummary": "Pregled narudžbe",
+    "subtotal": "Međuzbroj",
+    "shipping": "Dostava",
+    "calculated": "Izračunato pri plaćanju",
+    "discount": "Popust",
+    "total": "Ukupno",
+    "notes": "Napomene uz narudžbu",
+    "notesPlaceholder": "Dodajte napomenu o vašoj narudžbi",
+    "updateQuantity": "Ažuriraj količinu",
+    "remove": "Ukloni",
+    "discountCode": "Kod za popust",
+    "discountCodePlaceholder": "Unesite kod za popust",
+    "apply": "Primijeni",
+    "productDetails": "Detalji proizvoda",
+    "quantity": "Količina",
+    "price": "Cijena",
+    "customBox": "Prilagođena kutija",
+    "customBoxContents": "Sadržaj kutije",
+    "loading": "Učitavanje vaše košarice...",
+    "products": "Proizvodi",
+    "boxes": "Kutije",
+    "color": "Boja",
+    "editBox": "Uredi kutiju",
+    "collapseBox": "Smanji kutiju",
+    "expandBox": "Proširi kutiju"
+  },
+  "product": {
+    "back": "Natrag",
+    "addToCart": "Dodaj u košaricu",
+    "outOfStock": "Nedostupno",
+    "adding": "Dodaje se...",
+    "description": "Opis",
+    "details": "Detalji"
+  }
+} 
\ No newline at end of file
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..564813e
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,40 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+// Middleware samo prosljeđuje zahtjeve
+export function middleware(request: NextRequest) {
+  // Get the pathname
+  const { pathname } = request.nextUrl;
+  
+  // Get the locale from cookie or default to 'hr'
+  const locale = request.cookies.get('NEXT_LOCALE')?.value || 'hr';
+  
+  // Create a new URL based on the request
+  const newUrl = new URL(request.nextUrl);
+  
+  // Check if we're on an English page
+  const isEnglishPage = pathname.startsWith('/en');
+  // Check if we're requesting the English version
+  const wantsEnglish = locale === 'en';
+  
+  // If user wants English but we're not on an English page, redirect to English version
+  if (wantsEnglish && !isEnglishPage) {
+    newUrl.pathname = `/en${pathname}`;
+    return NextResponse.redirect(newUrl);
+  }
+  
+  // If user wants Croatian but we're on an English page, redirect to Croatian version
+  if (!wantsEnglish && isEnglishPage) {
+    newUrl.pathname = pathname.replace(/^\/en/, '') || '/';
+    return NextResponse.redirect(newUrl);
+  }
+  
+  return NextResponse.next();
+}
+
+// Za svaki slučaj, definiraj matcher
+export const config = {
+  matcher: [
+    '/((?!api|_next/static|_next/image|favicon.ico|assets).*)',
+  ],
+}; 
\ No newline at end of file
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..83d3365
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,32 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.shopify.com',
+        pathname: '/s/files/**'
+      }
+    ]
+  },
+  // Ručno implementiramo rewrite-ove za i18n
+  async rewrites() {
+    return {
+      beforeFiles: [
+        // Handle /en/* routes
+        {
+          source: '/en',
+          destination: '/'
+        },
+        {
+          source: '/en/:path*',
+          destination: '/:path*'
+        }
+      ]
+    };
+  }
+};
+
+export default nextConfig;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8ab702a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3927 @@
+{
+  "name": "new-web-shop-main",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@headlessui/react": "^2.2.0",
+        "@heroicons/react": "^2.2.0",
+        "@radix-ui/react-slot": "^1.2.0",
+        "@reduxjs/toolkit": "^2.7.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
+        "geist": "^1.3.1",
+        "js-cookie": "^3.0.5",
+        "lucide-react": "^0.488.0",
+        "next": "15.0.4",
+        "next-intl": "^4.1.0",
+        "react": "19.0.0",
+        "react-cookie-consent": "^9.0.0",
+        "react-dom": "19.0.0",
+        "react-icons": "^5.5.0",
+        "react-redux": "^9.2.0",
+        "sonner": "^1.7.0",
+        "tailwind-merge": "^3.2.0",
+        "tailwindcss-animate": "^1.0.7"
+      },
+      "devDependencies": {
+        "@shadcn/ui": "^0.0.4",
+        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/typography": "^0.5.15",
+        "@types/js-cookie": "^3.0.6",
+        "@types/node": "22.10.1",
+        "@types/react": "19.0.0",
+        "@types/react-dom": "19.0.1",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
+        "prettier": "3.4.2",
+        "prettier-plugin-tailwindcss": "^0.6.9",
+        "tailwindcss": "^3.4.16",
+        "typescript": "5.7.2"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
+      "integrity": "sha512-FRdBLykrPPA6P76GGGqlex/e7fbe0F1ykgxHYNXQsH/iTEtjMj/f9bpY5oQqbjt5VgZvgz/uKXbGuROijh3VLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.0.tgz",
+      "integrity": "sha512-lGTor4VlXcesUMh1cupTUTDoCxMb0V6bm3CnxHzQcw8Eaf1jQbgQX4i02fYgT0vJ82tb5MZ4CZk1LRGkktJCzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz",
+      "integrity": "sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/intl-localematcher": "0.6.1",
+        "decimal.js": "^10.4.3",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.1.tgz",
+      "integrity": "sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+      "integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.2.tgz",
+      "integrity": "sha512-AfiMi5NOSo2TQImsYAg8UYddsNJ/vUEv/HaNqiFjnI3ZFfWihUtD5QtuX6kHl8+H+d3qvnE/3HZrfzgdWpsLNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.4",
+        "@formatjs/icu-skeleton-parser": "1.8.14",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.14",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.14.tgz",
+      "integrity": "sha512-i4q4V4qslThK4Ig8SxyD76cp3+QJ3sAqr7f6q9VVfeGtxG9OhiAk3y9XF6Q41OymsKzsGQ6OQQoJNY4/lI8TcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.4",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.2.tgz",
+      "integrity": "sha512-zbniWOYBQ8GHSUIOPY7BbdIn6PzUOq0z41RFrF30HbjsxG6Rrfk+6QulR8Kgf2Vwj2a/rE6i62q5vo+2gI5dJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.13.6",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.0.4.tgz",
+      "integrity": "sha512-WNRvtgnRVDD4oM8gbUcRc27IAhaL4eXQ/2ovGbgLnPGUvdyDr8UdXP4Q/IBDdAdojnD2eScryIDirv0YUCjUVw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.0.4.tgz",
+      "integrity": "sha512-QecQXPD0yRHxSXWL5Ff80nD+A56sUXZG9koUsjWJwA2Z0ZgVQfuy7gd0/otjxoOovPVHR2eVEvPMHbtZP+pf9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.4.tgz",
+      "integrity": "sha512-pb7Bye3y1Og3PlCtnz2oO4z+/b3pH2/HSYkLbL0hbVuTGil7fPen8/3pyyLjdiTLcFJ+ymeU3bck5hd4IPFFCA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.4.tgz",
+      "integrity": "sha512-12oSaBFjGpB227VHzoXF3gJoK2SlVGmFJMaBJSu5rbpaoT5OjP5OuCLuR9/jnyBF1BAWMs/boa6mLMoJPRriMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.4.tgz",
+      "integrity": "sha512-QARO88fR/a+wg+OFC3dGytJVVviiYFEyjc/Zzkjn/HevUuJ7qGUUAUYy5PGVWY1YgTzeRYz78akQrVQ8r+sMjw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.4.tgz",
+      "integrity": "sha512-Z50b0gvYiUU1vLzfAMiChV8Y+6u/T2mdfpXPHraqpypP7yIT2UV9YBBhcwYkxujmCvGEcRTVWOj3EP7XW/wUnw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.4.tgz",
+      "integrity": "sha512-7H9C4FAsrTAbA/ENzvFWsVytqRYhaJYKa2B3fyQcv96TkOGVMcvyS6s+sj4jZlacxxTcn7ygaMXUPkEk7b78zw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.4.tgz",
+      "integrity": "sha512-Z/v3WV5xRaeWlgJzN9r4PydWD8sXV35ywc28W63i37G2jnUgScA4OOgS8hQdiXLxE3gqfSuHTicUhr7931OXPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.4.tgz",
+      "integrity": "sha512-NGLchGruagh8lQpDr98bHLyWJXOBSmkEAfK980OiNBa7vNm6PsNoPvzTfstT78WyOeMRQphEQ455rggd7Eo+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.2.tgz",
+      "integrity": "sha512-Q3rouk/rzoF/3TuH6FzoAIKrl+kzZi9LHmr8S5EqLAOyP9TXIKG34x2j42dZsAhrw7TbF9gA8tBKwnCNH4ZV+Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.25.0",
+        "@react-aria/utils": "^3.28.2",
+        "@react-types/shared": "^3.29.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.0.tgz",
+      "integrity": "sha512-GgIsDLlO8rDU/nFn6DfsbP9rfnzhm8QFjZkB9K9+r+MTSCn7bMntiWQgMM+5O6BiA8d7C7x4zuN4bZtc0RBdXQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.8",
+        "@react-aria/utils": "^3.28.2",
+        "@react-stately/flags": "^3.1.1",
+        "@react-types/shared": "^3.29.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.8",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.8.tgz",
+      "integrity": "sha512-lQDE/c9uTfBSDOjaZUJS8xP2jCKVk4zjQeIlCH90xaLhHDgbpCdns3xvFpJJujfj3nI4Ll9K7A+ONUBDCASOuw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.28.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.28.2.tgz",
+      "integrity": "sha512-J8CcLbvnQgiBn54eeEvQQbIOfBF3A1QizxMw9P4cl9MkeR03ug7RnjTIdJY/n2p7t59kLeAB3tqiczhcj+Oi5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.8",
+        "@react-stately/flags": "^3.1.1",
+        "@react-stately/utils": "^3.10.6",
+        "@react-types/shared": "^3.29.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.1.tgz",
+      "integrity": "sha512-XPR5gi5LfrPdhxZzdIlJDz/B5cBf63l4q6/AzNqVWFKgd0QqY5LvWJftXkklaIUpKSJkIKQb8dphuZXDtkWNqg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.6",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.6.tgz",
+      "integrity": "sha512-O76ip4InfTTzAJrg8OaZxKU4vvjMDOpfA/PGNOytiXwBbkct2ZeZwaimJ8Bt9W1bj5VsZ81/o/tW4BacbdDOMA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.29.0.tgz",
+      "integrity": "sha512-IDQYu/AHgZimObzCFdNl1LpZvQW/xcfLt3v20sorl5qRucDVj4S9os98sVTZ4IRIBjmS+MkjqpR5E70xan7ooA==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.7.0.tgz",
+      "integrity": "sha512-XVwolG6eTqwV0N8z/oDlN93ITCIGIop6leXlGJI/4EKy+0POYkR+ABHRSdGXY+0MQvJBP8yAzh+EYFxTuvmBiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@schummar/icu-type-parser": {
+      "version": "1.21.5",
+      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
+      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
+      "license": "MIT"
+    },
+    "node_modules/@shadcn/ui": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@shadcn/ui/-/ui-0.0.4.tgz",
+      "integrity": "sha512-0dtu/5ApsOZ24qgaZwtif8jVwqol7a4m1x5AxPuM1k5wxhqU7t/qEfBGtaSki1R8VlbTQfCj5PAlO45NKCa7Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "5.2.0",
+        "commander": "^10.0.0",
+        "execa": "^7.0.0",
+        "fs-extra": "^11.1.0",
+        "node-fetch": "^3.3.0",
+        "ora": "^6.1.2",
+        "prompts": "^2.4.2",
+        "zod": "^3.20.2"
+      },
+      "bin": {
+        "ui": "dist/index.js"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.6.tgz",
+      "integrity": "sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.6.tgz",
+      "integrity": "sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.1.tgz",
+      "integrity": "sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-MY3oPudxvMYyesqs/kW1Bh8y9VqSmf+tzqw3ae8a9DZW68pUe3zAdHeI1jc6iAysuRdACnVknHP8AhwD4/dxtg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.1.tgz",
+      "integrity": "sha512-hljHij7MpWPKF6u5vojuyfV0YA4YURsQG7KT6SzV0Zs2BXAtgdTxG6A229Ub/xiWV4w/7JL8fi6aAyjshH4meA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bl": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
+      "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001716",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001716.tgz",
+      "integrity": "sha512-49/c1+x3Kwz7ZIWt+4DvK3aMJy9oYXXG6/97JKsnjdCk/6n9vVyWL8NAwVt95Lwt9eigI10Hl782kDfZUUlRXw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz",
+      "integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==",
+      "license": "MIT"
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.149",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.149.tgz",
+      "integrity": "sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/execa": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
+      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.1",
+        "human-signals": "^4.3.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^3.0.7",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+      "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/geist": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.4.1.tgz",
+      "integrity": "sha512-uyVD2rGwXoGNqr+SfXzz3eL2h6zDG72d6vPbfm6u2BEfk8WT23BC1lxSwAV/FIFezPkTutAw00MQ0at5W+5olA==",
+      "license": "SIL OPEN FONT LICENSE",
+      "peerDependencies": {
+        "next": ">=13.2.0"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
+      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/intl-messageformat": {
+      "version": "10.7.16",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.16.tgz",
+      "integrity": "sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.3.4",
+        "@formatjs/fast-memoize": "2.2.7",
+        "@formatjs/icu-messageformat-parser": "2.11.2",
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+      "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+      "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
+      "integrity": "sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.0.0",
+        "is-unicode-supported": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.488.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.488.0.tgz",
+      "integrity": "sha512-ronlL0MyKut4CEzBY/ai2ZpKPxyWO4jUqdAkm2GNK5Zn3Rj+swDz+3lvyAUXN0PNqPKIX6XM9Xadwz/skLs/pQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.0.4.tgz",
+      "integrity": "sha512-nuy8FH6M1FG0lktGotamQDCXhh5hZ19Vo0ht1AOIQWrYJLP598TIUagKtvJrfJ5AGwB/WmDqkKaKhMpVifvGPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.0.4",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.13",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.0.4",
+        "@next/swc-darwin-x64": "15.0.4",
+        "@next/swc-linux-arm64-gnu": "15.0.4",
+        "@next/swc-linux-arm64-musl": "15.0.4",
+        "@next/swc-linux-x64-gnu": "15.0.4",
+        "@next/swc-linux-x64-musl": "15.0.4",
+        "@next/swc-win32-arm64-msvc": "15.0.4",
+        "@next/swc-win32-x64-msvc": "15.0.4",
+        "sharp": "^0.33.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-intl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.1.0.tgz",
+      "integrity": "sha512-JNJRjc7sdnfUxhZmGcvzDszZ60tQKrygV/VLsgzXhnJDxQPn1cN2rVpc53adA1SvBJwPK2O6Sc6b4gYSILjCzw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/amannn"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.5.4",
+        "negotiator": "^1.0.0",
+        "use-intl": "^4.1.0"
+      },
+      "peerDependencies": {
+        "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0",
+        "typescript": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.1.tgz",
+      "integrity": "sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.0.0",
+        "cli-cursor": "^4.0.0",
+        "cli-spinners": "^2.6.1",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^1.1.0",
+        "log-symbols": "^5.1.0",
+        "stdin-discarder": "^0.1.0",
+        "strip-ansi": "^7.0.1",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-cookie-consent": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-cookie-consent/-/react-cookie-consent-9.0.0.tgz",
+      "integrity": "sha512-Blyj+m+Zz7SFHYqT18p16EANgnSg2sIyU6Yp3vk83AnOnSW7qnehPkUe4+8+qxztJrNmCH5GP+VHsWzAKVOoZA==",
+      "license": "MIT",
+      "dependencies": {
+        "js-cookie": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/react-cookie-consent/node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-dom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sonner": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
+      "integrity": "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stdin-discarder": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz",
+      "integrity": "sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.2.0.tgz",
+      "integrity": "sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-intl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.1.0.tgz",
+      "integrity": "sha512-mQvDYFvoGn+bm/PWvlQOtluKCknsQ5a9F1Cj0hMfBjMBVTwnOqLPd6srhjvVdEQEQFVyHM1PfyifKqKYb11M9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^2.2.0",
+        "@schummar/icu-type-parser": "1.21.5",
+        "intl-messageformat": "^10.5.14"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
+      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.24.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz",
+      "integrity": "sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cdf53b1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,49 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "prettier": "prettier --write --ignore-unknown .",
+    "prettier:check": "prettier --check --ignore-unknown .",
+    "test": "pnpm prettier:check",
+    "ui": "shadcn-ui"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@reduxjs/toolkit": "^2.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "geist": "^1.3.1",
+    "js-cookie": "^3.0.5",
+    "lucide-react": "^0.488.0",
+    "next": "15.0.4",
+    "next-intl": "^4.1.0",
+    "react": "19.0.0",
+    "react-cookie-consent": "^9.0.0",
+    "react-dom": "19.0.0",
+    "react-icons": "^5.5.0",
+    "react-redux": "^9.2.0",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^3.2.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@shadcn/ui": "^0.0.4",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "22.10.1",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.16",
+    "typescript": "5.7.2"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..467fff9
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,1786 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@19.0.0)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      geist:
+        specifier: ^1.3.1
+        version: 1.3.1(next@15.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
+      next:
+        specifier: 15.0.4
+        version: 15.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react:
+        specifier: 19.0.0
+        version: 19.0.0
+      react-dom:
+        specifier: 19.0.0
+        version: 19.0.0(react@19.0.0)
+      sonner:
+        specifier: ^1.7.0
+        version: 1.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+    devDependencies:
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@3.4.16)
+      '@tailwindcss/typography':
+        specifier: ^0.5.15
+        version: 0.5.15(tailwindcss@3.4.16)
+      '@types/node':
+        specifier: 22.10.1
+        version: 22.10.1
+      '@types/react':
+        specifier: 19.0.0
+        version: 19.0.0
+      '@types/react-dom':
+        specifier: 19.0.1
+        version: 19.0.1
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.20(postcss@8.4.49)
+      postcss:
+        specifier: ^8.4.49
+        version: 8.4.49
+      prettier:
+        specifier: 3.4.2
+        version: 3.4.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.9
+        version: 0.6.9(prettier@3.4.2)
+      tailwindcss:
+        specifier: ^3.4.16
+        version: 3.4.16
+      typescript:
+        specifier: 5.7.2
+        version: 5.7.2
+
+packages:
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@emnapi/runtime@1.3.1':
+    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
+
+  '@floating-ui/core@1.6.8':
+    resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==}
+
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
+  '@floating-ui/react-dom@2.1.2':
+    resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@headlessui/react@2.2.0':
+    resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@next/env@15.0.4':
+    resolution: {integrity: sha512-WNRvtgnRVDD4oM8gbUcRc27IAhaL4eXQ/2ovGbgLnPGUvdyDr8UdXP4Q/IBDdAdojnD2eScryIDirv0YUCjUVw==}
+
+  '@next/swc-darwin-arm64@15.0.4':
+    resolution: {integrity: sha512-QecQXPD0yRHxSXWL5Ff80nD+A56sUXZG9koUsjWJwA2Z0ZgVQfuy7gd0/otjxoOovPVHR2eVEvPMHbtZP+pf9w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@15.0.4':
+    resolution: {integrity: sha512-pb7Bye3y1Og3PlCtnz2oO4z+/b3pH2/HSYkLbL0hbVuTGil7fPen8/3pyyLjdiTLcFJ+ymeU3bck5hd4IPFFCA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@15.0.4':
+    resolution: {integrity: sha512-12oSaBFjGpB227VHzoXF3gJoK2SlVGmFJMaBJSu5rbpaoT5OjP5OuCLuR9/jnyBF1BAWMs/boa6mLMoJPRriMA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@15.0.4':
+    resolution: {integrity: sha512-QARO88fR/a+wg+OFC3dGytJVVviiYFEyjc/Zzkjn/HevUuJ7qGUUAUYy5PGVWY1YgTzeRYz78akQrVQ8r+sMjw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@15.0.4':
+    resolution: {integrity: sha512-Z50b0gvYiUU1vLzfAMiChV8Y+6u/T2mdfpXPHraqpypP7yIT2UV9YBBhcwYkxujmCvGEcRTVWOj3EP7XW/wUnw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@15.0.4':
+    resolution: {integrity: sha512-7H9C4FAsrTAbA/ENzvFWsVytqRYhaJYKa2B3fyQcv96TkOGVMcvyS6s+sj4jZlacxxTcn7ygaMXUPkEk7b78zw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@15.0.4':
+    resolution: {integrity: sha512-Z/v3WV5xRaeWlgJzN9r4PydWD8sXV35ywc28W63i37G2jnUgScA4OOgS8hQdiXLxE3gqfSuHTicUhr7931OXPQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@15.0.4':
+    resolution: {integrity: sha512-NGLchGruagh8lQpDr98bHLyWJXOBSmkEAfK980OiNBa7vNm6PsNoPvzTfstT78WyOeMRQphEQ455rggd7Eo+Dw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@react-aria/focus@3.19.0':
+    resolution: {integrity: sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/interactions@3.22.5':
+    resolution: {integrity: sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/ssr@3.9.7':
+    resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-aria/utils@3.26.0':
+    resolution: {integrity: sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-stately/utils@3.10.5':
+    resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@react-types/shared@3.26.0':
+    resolution: {integrity: sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.13':
+    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tailwindcss/container-queries@0.1.1':
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+
+  '@tailwindcss/typography@0.5.15':
+    resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
+
+  '@tanstack/react-virtual@3.11.0':
+    resolution: {integrity: sha512-liRl34SrQm54NZdf22d/H4a7GucPNCxBSJdWWZlUrF1E1oXcZ3/GfRRHFDUJXwEuTfjtyp0X6NnUK7bhIuDzoQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+
+  '@types/node@22.10.1':
+    resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}
+
+  '@types/react-dom@19.0.1':
+    resolution: {integrity: sha512-hljHij7MpWPKF6u5vojuyfV0YA4YURsQG7KT6SzV0Zs2BXAtgdTxG6A229Ub/xiWV4w/7JL8fi6aAyjshH4meA==}
+
+  '@types/react@19.0.0':
+    resolution: {integrity: sha512-MY3oPudxvMYyesqs/kW1Bh8y9VqSmf+tzqw3ae8a9DZW68pUe3zAdHeI1jc6iAysuRdACnVknHP8AhwD4/dxtg==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001687:
+    resolution: {integrity: sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  electron-to-chromium@1.5.71:
+    resolution: {integrity: sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+
+  fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
+    engines: {node: '>=14'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  geist@1.3.1:
+    resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
+    peerDependencies:
+      next: '>=13.2.0'
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.15.1:
+    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  next@15.0.4:
+    resolution: {integrity: sha512-nuy8FH6M1FG0lktGotamQDCXhh5hZ19Vo0ht1AOIQWrYJLP598TIUagKtvJrfJ5AGwB/WmDqkKaKhMpVifvGPA==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-66855b96-20241106 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.18:
+    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier-plugin-tailwindcss@0.6.9:
+    resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.4.2:
+    resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-dom@19.0.0:
+    resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==}
+    peerDependencies:
+      react: ^19.0.0
+
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+
+  reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  scheduler@0.25.0:
+    resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==}
+
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  sonner@1.7.0:
+    resolution: {integrity: sha512-W6dH7m5MujEPyug3lpI2l3TC3Pp1+LTgK0Efg+IHDrBbtEjyCmCHHo6yfNBOsf1tFZ6zf+jceWwB38baC8yO9g==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  styled-jsx@5.1.6:
+    resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
+  tailwindcss@3.4.16:
+    resolution: {integrity: sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  typescript@5.7.2:
+    resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  yaml@2.6.1:
+    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+snapshots:
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@emnapi/runtime@1.3.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@floating-ui/core@1.6.8':
+    dependencies:
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
+  '@floating-ui/react-dom@2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@floating-ui/utils': 0.2.8
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.8': {}
+
+  '@headlessui/react@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@react-aria/focus': 3.19.0(react@19.0.0)
+      '@react-aria/interactions': 3.22.5(react@19.0.0)
+      '@tanstack/react-virtual': 3.11.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@heroicons/react@2.2.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-arm@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    optional: true
+
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    optional: true
+
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-wasm32@0.33.5':
+    dependencies:
+      '@emnapi/runtime': 1.3.1
+    optional: true
+
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
+
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@next/env@15.0.4': {}
+
+  '@next/swc-darwin-arm64@15.0.4':
+    optional: true
+
+  '@next/swc-darwin-x64@15.0.4':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@15.0.4':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@15.0.4':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.0.4':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.0.4':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.0.4':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@15.0.4':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@react-aria/focus@3.19.0(react@19.0.0)':
+    dependencies:
+      '@react-aria/interactions': 3.22.5(react@19.0.0)
+      '@react-aria/utils': 3.26.0(react@19.0.0)
+      '@react-types/shared': 3.26.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 19.0.0
+
+  '@react-aria/interactions@3.22.5(react@19.0.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.7(react@19.0.0)
+      '@react-aria/utils': 3.26.0(react@19.0.0)
+      '@react-types/shared': 3.26.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+
+  '@react-aria/ssr@3.9.7(react@19.0.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+
+  '@react-aria/utils@3.26.0(react@19.0.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.7(react@19.0.0)
+      '@react-stately/utils': 3.10.5(react@19.0.0)
+      '@react-types/shared': 3.26.0(react@19.0.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 19.0.0
+
+  '@react-stately/utils@3.10.5(react@19.0.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 19.0.0
+
+  '@react-types/shared@3.26.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.13':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.16)':
+    dependencies:
+      tailwindcss: 3.4.16
+
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.16)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.16
+
+  '@tanstack/react-virtual@3.11.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.9
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  '@tanstack/virtual-core@3.10.9': {}
+
+  '@types/node@22.10.1':
+    dependencies:
+      undici-types: 6.20.0
+
+  '@types/react-dom@19.0.1':
+    dependencies:
+      '@types/react': 19.0.0
+
+  '@types/react@19.0.0':
+    dependencies:
+      csstype: 3.1.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.1.0: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
+  autoprefixer@10.4.20(postcss@8.4.49):
+    dependencies:
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001687
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-value-parser: 4.2.0
+
+  balanced-match@1.0.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@2.0.1:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.24.2:
+    dependencies:
+      caniuse-lite: 1.0.30001687
+      electron-to-chromium: 1.5.71
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001687: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    optional: true
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    optional: true
+
+  commander@4.1.1: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  detect-libc@2.0.3:
+    optional: true
+
+  didyoumean@1.2.2: {}
+
+  dlv@1.1.3: {}
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.71: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  escalade@3.2.0: {}
+
+  fast-glob@3.3.2:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fastq@1.17.1:
+    dependencies:
+      reusify: 1.0.4
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  foreground-child@3.3.0:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fraction.js@4.3.7: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  geist@1.3.1(next@15.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)):
+    dependencies:
+      next: 15.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  is-arrayish@0.3.2:
+    optional: true
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.15.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  isexe@2.0.0: {}
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.6: {}
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash.castarray@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.merge@4.6.2: {}
+
+  lru-cache@10.4.3: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.1
+
+  minipass@7.1.2: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.8: {}
+
+  next@15.0.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      '@next/env': 15.0.4
+      '@swc/counter': 0.1.3
+      '@swc/helpers': 0.5.13
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001687
+      postcss: 8.4.31
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      styled-jsx: 5.1.6(react@19.0.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.0.4
+      '@next/swc-darwin-x64': 15.0.4
+      '@next/swc-linux-arm64-gnu': 15.0.4
+      '@next/swc-linux-arm64-musl': 15.0.4
+      '@next/swc-linux-x64-gnu': 15.0.4
+      '@next/swc-linux-x64-musl': 15.0.4
+      '@next/swc-win32-arm64-msvc': 15.0.4
+      '@next/swc-win32-x64-msvc': 15.0.4
+      sharp: 0.33.5
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.18: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.6: {}
+
+  postcss-import@15.1.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-js@4.0.1(postcss@8.4.49):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.49
+
+  postcss-load-config@4.0.2(postcss@8.4.49):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.6.1
+    optionalDependencies:
+      postcss: 8.4.49
+
+  postcss-nested@6.2.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.4.49:
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prettier-plugin-tailwindcss@0.6.9(prettier@3.4.2):
+    dependencies:
+      prettier: 3.4.2
+
+  prettier@3.4.2: {}
+
+  queue-microtask@1.2.3: {}
+
+  react-dom@19.0.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      scheduler: 0.25.0
+
+  react@19.0.0: {}
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  resolve@1.22.8:
+    dependencies:
+      is-core-module: 2.15.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.0.4: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  scheduler@0.25.0: {}
+
+  semver@7.6.3:
+    optional: true
+
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.3
+      semver: 7.6.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    optional: true
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+    optional: true
+
+  sonner@1.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
+  source-map-js@1.2.1: {}
+
+  streamsearch@1.1.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  styled-jsx@5.1.6(react@19.0.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 19.0.0
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  tabbable@6.2.0: {}
+
+  tailwindcss@3.4.16:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.6
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-interface-checker@0.1.13: {}
+
+  tslib@2.8.1: {}
+
+  typescript@5.7.2: {}
+
+  undici-types@6.20.0: {}
+
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
+    dependencies:
+      browserslist: 4.24.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  util-deprecate@1.0.2: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  yaml@2.6.1: {}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..fac67dd
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,7 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..b08903d
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,9 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  singleQuote: true,
+  arrowParens: 'always',
+  trailingComma: 'none',
+  printWidth: 100,
+  tabWidth: 2,
+  plugins: ['prettier-plugin-tailwindcss']
+};
diff --git a/public/assets/images/Facebook.png b/public/assets/images/Facebook.png
new file mode 100644
index 0000000..a05a604
Binary files /dev/null and b/public/assets/images/Facebook.png differ
diff --git a/public/assets/images/Frame3.png b/public/assets/images/Frame3.png
new file mode 100644
index 0000000..1a35214
Binary files /dev/null and b/public/assets/images/Frame3.png differ
diff --git a/public/assets/images/Frame4.png b/public/assets/images/Frame4.png
new file mode 100644
index 0000000..c2c6f31
Binary files /dev/null and b/public/assets/images/Frame4.png differ
diff --git a/public/assets/images/Frame5.png b/public/assets/images/Frame5.png
new file mode 100644
index 0000000..b79928d
Binary files /dev/null and b/public/assets/images/Frame5.png differ
diff --git a/public/assets/images/Frame6.png b/public/assets/images/Frame6.png
new file mode 100644
index 0000000..1a35214
Binary files /dev/null and b/public/assets/images/Frame6.png differ
diff --git a/public/assets/images/Instagram.png b/public/assets/images/Instagram.png
new file mode 100644
index 0000000..8bdf8bd
Binary files /dev/null and b/public/assets/images/Instagram.png differ
diff --git a/public/assets/images/build-box.png b/public/assets/images/build-box.png
new file mode 100644
index 0000000..a6ab455
Binary files /dev/null and b/public/assets/images/build-box.png differ
diff --git a/public/assets/images/builder.png b/public/assets/images/builder.png
new file mode 100644
index 0000000..1a2d09d
Binary files /dev/null and b/public/assets/images/builder.png differ
diff --git a/public/assets/images/builder1.png b/public/assets/images/builder1.png
new file mode 100644
index 0000000..502335e
Binary files /dev/null and b/public/assets/images/builder1.png differ
diff --git a/public/assets/images/card1.png b/public/assets/images/card1.png
new file mode 100644
index 0000000..8598539
Binary files /dev/null and b/public/assets/images/card1.png differ
diff --git a/public/assets/images/card2.png b/public/assets/images/card2.png
new file mode 100644
index 0000000..f142f34
Binary files /dev/null and b/public/assets/images/card2.png differ
diff --git a/public/assets/images/card3.png b/public/assets/images/card3.png
new file mode 100644
index 0000000..c1c20d0
Binary files /dev/null and b/public/assets/images/card3.png differ
diff --git a/public/assets/images/carousel1.png b/public/assets/images/carousel1.png
new file mode 100644
index 0000000..22508cb
Binary files /dev/null and b/public/assets/images/carousel1.png differ
diff --git a/public/assets/images/carousel2.png b/public/assets/images/carousel2.png
new file mode 100644
index 0000000..b8d965e
Binary files /dev/null and b/public/assets/images/carousel2.png differ
diff --git a/public/assets/images/cart-icon-black.png b/public/assets/images/cart-icon-black.png
new file mode 100644
index 0000000..126c1f0
Binary files /dev/null and b/public/assets/images/cart-icon-black.png differ
diff --git a/public/assets/images/cart-icon.png b/public/assets/images/cart-icon.png
new file mode 100644
index 0000000..6114d36
Binary files /dev/null and b/public/assets/images/cart-icon.png differ
diff --git a/public/assets/images/image1.png b/public/assets/images/image1.png
new file mode 100644
index 0000000..309453e
Binary files /dev/null and b/public/assets/images/image1.png differ
diff --git a/public/assets/images/image11.png b/public/assets/images/image11.png
new file mode 100644
index 0000000..0cc1b52
Binary files /dev/null and b/public/assets/images/image11.png differ
diff --git a/public/assets/images/image2.webp b/public/assets/images/image2.webp
new file mode 100644
index 0000000..0678621
Binary files /dev/null and b/public/assets/images/image2.webp differ
diff --git a/public/assets/images/image22.png b/public/assets/images/image22.png
new file mode 100644
index 0000000..4e3c3f2
Binary files /dev/null and b/public/assets/images/image22.png differ
diff --git a/public/assets/images/image3.webp b/public/assets/images/image3.webp
new file mode 100644
index 0000000..a1fd95f
Binary files /dev/null and b/public/assets/images/image3.webp differ
diff --git a/public/assets/images/logo.svg b/public/assets/images/logo.svg
new file mode 100644
index 0000000..f082dc8
--- /dev/null
+++ b/public/assets/images/logo.svg
@@ -0,0 +1,7 @@
+<svg width="1646" height="465" viewBox="0 0 1646 465" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52.5198 323.55C70.2698 323.55 88.0198 333.11 96.8898 354.26C113.27 394.53 152.18 442.99 190.4 442.99C214.97 442.99 227.26 425.93 227.26 406.81C227.26 324.22 14.9898 305.11 14.9898 194.54C14.9898 131.06 75.0498 96.9299 184.95 96.9299C234.77 96.9299 303.72 116.73 322.14 159.73C338.52 196.59 310.54 228.67 277.77 228.67C260.71 228.67 242.28 219.79 228.63 198.64C195.18 145.4 180.85 118.1 158.33 118.1C135.81 118.1 131.03 140.63 131.03 154.28C131.03 258.03 342.63 273.05 342.63 361.78C342.63 432.77 260.04 464.84 173.35 464.84C118.75 464.84 14.9998 446.41 1.33978 383.62C-6.17022 348.12 23.1798 323.56 52.5298 323.56L52.5198 323.55Z" fill="#D94D72"/>
+<path d="M373.29 281.91C373.29 172.02 457.93 96.9299 548.03 96.9299C663.38 96.9299 705.02 192.49 717.99 238.9C723.45 251.87 714.58 263.47 698.19 263.47H473.62C494.1 332.41 537.78 408.86 603.99 408.86C657.23 408.86 687.26 372.01 696.82 357.67C700.92 351.52 705.7 348.79 710.47 348.79C717.98 348.79 722.76 356.3 717.29 368.59C698.86 407.5 639.48 464.83 558.25 464.83C464.06 464.83 373.28 389.75 373.28 281.91H373.29ZM625.84 243C611.51 204.09 575.33 124.23 518.68 124.23C483.18 124.23 460.66 148.8 460.66 186.34C460.66 201.36 463.39 221.15 468.16 242.99H625.83L625.84 243Z" fill="#D94D72"/>
+<path d="M1127.49 266.21C1127.49 324.23 1124.08 411.6 1156.16 430.71C1165.03 436.17 1166.4 451.19 1156.16 451.19H982.79C972.55 451.19 973.91 436.17 982.79 430.71C1010.77 413.65 1011.46 324.23 1011.46 288.06C1011.46 245.74 1026.48 116.74 956.85 116.74C898.83 116.74 890.64 176.12 890.64 197.28V299.66C890.64 324.23 887.23 411.6 919.31 430.71C928.18 436.17 929.54 451.19 919.31 451.19H745.94C735.7 451.19 737.07 436.17 745.94 430.71C773.93 413.65 774.61 352.9 774.61 318.09V225.26C774.61 189.77 772.56 145.4 745.94 129.7C737.07 124.24 735.7 109.91 745.94 109.23L870.85 98.3099C882.45 96.9499 890.64 105.14 890.64 116.74V133.8C904.29 114 927.5 96.9399 966.41 96.9399C1039.44 96.9399 1127.5 131.75 1127.5 266.21H1127.49Z" fill="#D94D72"/>
+<path d="M1186.84 109.9C1235.99 109.9 1282.4 77.8199 1282.4 10.2499C1282.4 4.09994 1287.86 0.689941 1292.64 0.689941C1298.1 0.689941 1302.88 4.09994 1302.88 10.2499V109.9H1361.58C1367.72 109.9 1371.82 113.99 1371.82 120.13C1371.82 126.96 1367.72 130.37 1361.58 130.37H1302.88V279.85C1302.88 337.87 1298.79 443.66 1352.03 443.66C1390.94 443.66 1412.09 419.09 1387.52 307.83C1376.6 259.37 1407.32 229.33 1440.08 229.33C1470.11 229.33 1501.51 255.27 1502.88 315.33C1504.93 395.19 1423.7 464.81 1345.89 464.81C1221.66 464.81 1186.86 374.71 1186.86 298.27V130.36H1171.16C1165.02 130.36 1160.93 126.27 1160.93 120.12C1160.93 113.97 1165.02 109.89 1171.16 109.89H1186.86L1186.84 109.9Z" fill="#D94D72"/>
+<path d="M1597.71 369.27C1624.33 369.27 1645.49 390.43 1645.49 417.05C1645.49 443.67 1624.33 464.83 1597.71 464.83C1571.09 464.83 1549.93 443.67 1549.93 417.05C1549.93 390.43 1571.09 369.27 1597.71 369.27Z" fill="#D94D72"/>
+</svg>
diff --git a/public/assets/images/placeholder_image.svg b/public/assets/images/placeholder_image.svg
new file mode 100644
index 0000000..16d4cf0
--- /dev/null
+++ b/public/assets/images/placeholder_image.svg
@@ -0,0 +1,9 @@
+<svg width="406" height="240" viewBox="0 0 406 240" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M0.666748 0H406V240H0.666748V0Z" fill="url(#pattern0_3025_76)"/>
+<defs>
+<pattern id="pattern0_3025_76" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_3025_76" transform="matrix(0.00246711 0 0 0.00416667 -0.000822356 0)"/>
+</pattern>
+<image id="image0_3025_76" width="406" height="240" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZYAAADwCAYAAAAjIkJlAAAAAXNSR0IArs4c6QAADphJREFUeF7t3WtrFMsWgOFWVLZiLmokhJD/dv63H4OIqPES0SDiPlQOOTvbS/oyq1e6Zz0D58vZPVVTTxW+JJ2ZufPixYu/Ow8CBAgQIBAgcOfOnf/cEZYASUMQIECAwKWAsDgIBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM0CAAAECoQLCEsppMAIECBAQFmeAAAECBEIFhCWU02AECBAgICzOAAECBAiECghLKKfBCBAgQEBYnAECBAgQCBUQllBOgxEgQICAsDgDBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM0CAAAECoQLCEsppMAIECBAQFmeAAAECBEIFhCWU02AECBAgICzOAAECBAiECghLKKfBCBAgQEBYnAECBAgQCBUQllBOgxEgQICAsDgDBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM0CAAAECoQLCEsppMAIECBAQFmeAAAECBEIFhCWU02AECBAgICzOAAECBAiECghLKKfBCBAgQEBYnAECBAgQCBUQllBOgxEgQICAsDgDBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM0CAAAECoQLCEsppMAIECBAQFmeAAAECBEIFhCWU02AECBAgICzOAAECBAiECghLKKfBCBAgQEBYnAECBAgQCBUQllBOgxEgQICAsDgDBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM0CAAAECoQLCEsppMAIECBAQFmeAAAECBEIFhCWU02AECBAgICzOAAECBAiECghLKKfBCBAgQEBYnAECBAgQCBUQllBOgxEgQICAsDgDBAgQIBAqICyhnAYjQIAAAWFxBggQIEAgVEBYQjkNRoAAAQLC4gwQIECAQKiAsIRyGowAAQIEhMUZIECAAIFQAWEJ5TQYAQIECAiLM7BKge/fv6/ydU990ffu3Zv6VM8jkC4gLOnkJpwqcH5+3n3+/Lm7uLiYOsSqn/fXX391Ozs73ePHj1e9Di9++wWEZfv3ePUrbD+dvHnzpmxQft7A9tPL0dFR56eY1R/trV2AsGzt1m7HwlpUXr161VX71Vff7rWoHB8fd3fv3u271H8nkC4gLOnkJhwj0H5Sab/+8vhVoP1K7Pnz52gILE5AWBa3JV7QlUD7KeX09BTIDQInJyd+JeaELE5AWBa3JV7QlcDHjx+7s7MzIDcIPH36tNvb22NEYFECwrKo7fBirgv4NVj/efDrsH4jV+QLCEu+uRkHCghLP5Sw9Bu5Il9AWPLNzThQQFj6oYSl38gV+QLCkm9uxoECwtIPJSz9Rq7IFxCWfHMzDhTIDEt7P8iPHz8GvrLlXCYsy9kLr+QfAWFxGhYrMHdYWkzaX1Tt7u7+/42G375969pfo63lvTPCstjjW/qFCUvp7V/24ucMS9/HorSwtPmX/hCWpe9QzdcnLDX3fRWrnjMsQ95Y+P79++7Dhw+LthKWRW9P2RcnLGW3fvkLnyssjx496g4PD3sB2j2X9s7/Jd97EZbebXTBLQgIyy2gm3KYwFxhGfNu9ZcvX3btvstSH8Ky1J2p/bqEpfb+L3r1c4Xl4ODg8ntNhjxev37dffnyZcilt3KNsNwKu0l7BITFEVmswFxhGfMTS/vI/iV/sZiwLPb4ln5hwlJ6+5e9+LnC0r6JsX1RVt9jDZ+uLCx9u+i/34aAsNyGujkHCcwVljZ5C0sLzE2POecfBDDgImEZgOSSdAFhSSc34VCBOf9hb2+ObHF58ODBb1/OGv7UuL1wYRl6mlyXKSAsmdrmGiUwZ1iuXkj7h7n97/79+5f/19evXy/fdT/1vkr2R8MIy6gj5eIkAWFJgjbNeIGMsIx/Vb9/xvV38rc3VbafeDIewpKhbI6xAsIyVsz1aQJrCUv7KeX4+PhfXxH87t277tOnT7NbCcvsxCaYICAsE9A8JUdgLWF5/vz55a/Trj/au/XbmyvbX5bN+RCWOXWNPVVAWKbKed7sAmsIy5MnT7r9/f3fWrSotLjM+ZEwwjL7MTTBBAFhmYDmKTkCSw9L+4uy9iuwmx7tI/jPzs5mAxOW2WgNvIGAsGyA56nzCiw5LH0fu39dZs77LcIy7xk0+jQBYZnm5lkJAksOS/tJ5U/vgfmZZs77LcKScBBNMVpAWEaTeUKWwFxhaUFo90bapxZP+bPgm+6r/MlmrvstwpJ1Gs0zRkBYxmi5NlVgjrC0X2G1nzbanwi3x9j3nGzyD/kc91s2eT2pm2myUgLCUmq717XY6LD87v0mTWToPD9HaYpm9P0WYZmyC54zt4CwzC1s/MkCQ//BHzrB795v0p7b7oG0j8e/6Qu9/hSloXNfXRd9v0VYxu6A6zMEhCVD2RyTBCLD0ndfpN0DaXH50xsanz171u3u7k5ax89PirzfIiwhW2KQYAFhCQY1XJxAVFiGfv9K+4mlxeXnNzTu7e117cvBIh9R91uEJXJXjBUlICxRksYJF4gIy5j3m7QFtE82bvNePdrzT05OwtfWBoy43yIss2yNQTcUEJYNAT19PoGIsLQotDiMeVz9pVj7Safdlxn7/KFzRdxvEZah2q7LFBCWTG1zjRLYNCyR90VGvfARF296v0VYRmC7NE1AWNKoTTRWYJOwzHFfZOzrH3r9JvdbhGWosusyBYQlU9tcowSmhmXO+yKjFjDi4qn3W4RlBLJL0wSEJY3aRGMFpoRl7M36sa9pruun3m8Rlrl2xLibCAjLJnqeO6vAlLAcHR117ab7Gh9T7rcIyxp3evtfs7Bs/x6vdoVjw9L3Jsg1QIy93yIsa9jVeq9RWOrt+WpWPCYs2/QPbNV1r+ZgeqG9AsLSS+SC2xIY8w/swcFBt7Ozc1svNXTe8/Pz7u3bt4PG3KagDlqwi1YhICyr2KaaL1JY+vddWPqNXJEvICz55mYcKDAmLPv7+5df3rUNjzF/eiws27Dj27cGYdm+Pd2aFY0JS1t0+0d2rX8RdrVp7S/D2kfKDH0Iy1Ap12UKCEumtrlGCYwNy6jBt+RiYdmSjdyyZQjLlm3oNi1HWPp3U1j6jVyRLyAs+eZmHCggLP1QwtJv5Ip8AWHJNzfjQAFh6YcSln4jV+QLCEu+uRkHCoz566iBQ27dZe3rktvXA3gQWJKAsCxpN7yWfwl8+fKle/36NZUbBA4PD7tHjx4xIrAoAWFZ1HZ4MdcF2if+np6e/vId9JT+J7DGrwewdzUEhKXGPq92lX5q+fPWta9NbvdYPAgsTUBYlrYjXs8vAlffQY/mH4Ft+CRn+7m9AsKyvXu7VStrH8zYAtPemV750X791W7Wu69S+RQsf+3Csvw98gqvCVxcXHRfv34tF5gWlIcPH67+I2sc5hoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADQFhqbHPVkmAAIE0AWFJozYRAQIEaggIS419tkoCBAikCQhLGrWJCBAgUENAWGrss1USIEAgTUBY0qhNRIAAgRoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADQFhqbHPVkmAAIE0AWFJozYRAQIEaggIS419tkoCBAikCQhLGrWJCBAgUENAWGrss1USIEAgTUBY0qhNRIAAgRoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADQFhqbHPVkmAAIE0AWFJozYRAQIEaggIS419tkoCBAikCQhLGrWJCBAgUENAWGrss1USIEAgTUBY0qhNRIAAgRoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADQFhqbHPVkmAAIE0AWFJozYRAQIEaggIS419tkoCBAikCQhLGrWJCBAgUENAWGrss1USIEAgTUBY0qhNRIAAgRoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADQFhqbHPVkmAAIE0AWFJozYRAQIEaggIS419tkoCBAikCQhLGrWJCBAgUENAWGrss1USIEAgTUBY0qhNRIAAgRoCwlJjn62SAAECaQLCkkZtIgIECNQQEJYa+2yVBAgQSBMQljRqExEgQKCGgLDU2GerJECAQJqAsKRRm4gAAQI1BISlxj5bJQECBNIEhCWN2kQECBCoISAsNfbZKgkQIJAmICxp1CYiQIBADYEWlv8CFPhwGys3UgcAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/assets/images/wolt-image.png b/public/assets/images/wolt-image.png
new file mode 100644
index 0000000..ae405a7
Binary files /dev/null and b/public/assets/images/wolt-image.png differ
diff --git a/public/assets/images/wolt.jpeg b/public/assets/images/wolt.jpeg
new file mode 100644
index 0000000..3e03316
Binary files /dev/null and b/public/assets/images/wolt.jpeg differ
diff --git a/public/assets/images/wolt.png b/public/assets/images/wolt.png
new file mode 100644
index 0000000..19d4640
Binary files /dev/null and b/public/assets/images/wolt.png differ
diff --git a/public/fonts/Poppins-Regular.ttf b/public/fonts/Poppins-Regular.ttf
new file mode 100644
index 0000000..9f0c71b
Binary files /dev/null and b/public/fonts/Poppins-Regular.ttf differ
diff --git a/public/fonts/Poppins-SemiBold.ttf b/public/fonts/Poppins-SemiBold.ttf
new file mode 100644
index 0000000..74c726e
Binary files /dev/null and b/public/fonts/Poppins-SemiBold.ttf differ
diff --git a/public/fonts/allenoire-allenoire-regular-400.ttf b/public/fonts/allenoire-allenoire-regular-400.ttf
new file mode 100644
index 0000000..ec1a827
Binary files /dev/null and b/public/fonts/allenoire-allenoire-regular-400.ttf differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..fe8c8f7
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,172 @@
+import type { Config } from 'tailwindcss';
+import plugin from 'tailwindcss/plugin';
+
+const config: Config = {
+    darkMode: ['class'],
+    content: [
+        './pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './components/**/*.{js,ts,jsx,tsx,mdx}',
+        './app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+  theme: {
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		screens: {
+  			'xs': '480px',
+  		},
+  		fontFamily: {
+  			allenoire: ['AlleNoire', 'sans-serif'],
+  			poppins: ['Poppins Regular', 'sans-serif'],
+  			'poppins-semibold': ['Poppins SemiBold', 'sans-serif'],
+  			jakarta: ['AlleNoire', 'sans-serif'],
+  		},
+  		fontWeight: {
+  			extrabold: '800',
+  			bold: '700',
+  			semibold: '600',
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)',
+  			button: '100px',
+  		},
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: '#D94D72',
+  				dark: '#ff6670',
+  				light: '#E67E99',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: '#fff4e4',
+  				gold: {
+					DEFAULT: '#D89B1C',
+					light: '#F0BB47',
+					dark: '#B37E0E'
+				},
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			wolt: {
+  				DEFAULT: '#FFC877',
+          blue: '#00C2E8'
+  			},
+  			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))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			},
+  			'wolt-blue': '#00C2E8',
+  		},
+  		keyframes: {
+  			fadeIn: {
+  				from: {
+  					opacity: '0'
+  				},
+  				to: {
+  					opacity: '1'
+  				}
+  			},
+  			marquee: {
+  				'0%': {
+  					transform: 'translateX(0%)'
+  				},
+  				'100%': {
+  					transform: 'translateX(-100%)'
+  				}
+  			},
+  			blink: {
+  				'0%': {
+  					opacity: '0.2'
+  				},
+  				'20%': {
+  					opacity: '1'
+  				},
+  				'100%': {
+  					opacity: '0.2'
+  				}
+  			},
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			fadeIn: 'fadeIn .3s ease-in-out',
+  			carousel: 'marquee 60s linear infinite',
+  			blink: 'blink 1.4s both infinite',
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  future: {
+    hoverOnlyWhenSupported: true
+  },
+  plugins: [
+    require('@tailwindcss/container-queries'),
+    require('@tailwindcss/typography'),
+    plugin(({ matchUtilities, theme }: { matchUtilities: any; theme: any }) => {
+      matchUtilities(
+        {
+          'animation-delay': (value: string) => {
+            return {
+              'animation-delay': value
+            };
+          }
+        },
+        {
+          values: theme('transitionDelay')
+        }
+      );
+    }),
+      require("tailwindcss-animate")
+]
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0004bd7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "downlevelIteration": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "noUncheckedIndexedAccess": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}