Ported more functionality

app/[locale]/[[...slug]]/category-page.tsx

@@ -0,0 +1,15 @@
+
+interface CategoryPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: CategoryPageProps) {
+  console.log(data);
+
+  return (
+    <>Category page</>
+  )
+}

app/[locale]/[[...slug]]/home-page.tsx

@@ -1,9 +1,13 @@
-import DynamicContentManager from 'components/ui/dynamic-content-manager'
+import DynamicContentManager from 'components/layout/dynamic-content-manager'
+
+interface HomePageProps {
+  data: object | any
+}
 
 // This is a Client Component. It receives data as props and
 // has access to state and effects just like Page components
 // in the `pages` directory.
-export default function HomePage({ data }: { data: object | any }) {
+export default function HomePage({ data }: HomePageProps) {
   return (
     <DynamicContentManager content={data?.content} />
   )

app/[locale]/[[...slug]]/page.tsx

@@ -4,7 +4,9 @@ import getQueryFromSlug from 'helpers/getQueryFromSlug';
 import { docQuery } from 'lib/sanity/queries';
 import { client } from 'lib/sanity/sanity.client';
 import { groq } from 'next-sanity';
+import CategoryPage from './category-page';
 import HomePage from './home-page';
+import ProductPage from './product-page';
 import SinglePage from './single-page';
 
 export async function generateStaticParams() {
@@ -57,11 +59,11 @@ export default async function Page({
   const data = filterDataToSingleItem(pageData, false)
   
   return (
-    <div>
-      <>
+    <>
       {docType === 'home' && <HomePage data={data} />}
+      {docType === 'product' && <ProductPage data={data} />}
+      {docType === 'category' && <CategoryPage data={data} />}
       {docType === 'page' && <SinglePage data={data} />}
     </>
-    </div>
   )
 }

app/[locale]/[[...slug]]/product-page.tsx

@@ -0,0 +1,16 @@
+import ProductView from "components/product/product-view";
+
+interface ProductPageProps {
+  data: object | any
+}
+
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function ProductPage({data }: ProductPageProps) {
+  const { product } = data;
+
+  return (
+    <ProductView product={product} relatedProducts={[]} />
+  )
+}

app/[locale]/[[...slug]]/single-page.tsx

@@ -3,7 +3,7 @@
 import dynamic from 'next/dynamic'
 
 const DynamicContentManager = dynamic(
-  () => import('components/ui/dynamic-content-manager')
+  () => import('components/layout/dynamic-content-manager')
 )
 
 interface SinglePageProps {

app/[locale]/globals.css

@@ -39,15 +39,6 @@ body {
 }
 
 /* COMPONENTS */
-.glider {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.glider::-webkit-scrollbar {
-  display: none;
-}
-
 .glider-dots {
   @apply flex !space-x-[2px] !mt-8;
 }
@@ -56,10 +47,6 @@ body {
   @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
 }
 
-.glider-slide {
-  @apply max-w-full;
-}
-
 .glider-dot.active {
   @apply after:!bg-high-contrast;
 }