From 5810b16567202932a73cfa53fb93e8ea4a636d40 Mon Sep 17 00:00:00 2001
From: ChiDaniel <web.daniell@yahoo.com>
Date: Tue, 25 Feb 2025 11:51:56 +0100
Subject: [PATCH] last v

---
 pages/Privacy.tsx  | 354 +--------------------------------------------
 pages/Shipping.tsx | 210 ++-------------------------
 pages/contact.tsx  |  10 ++
 pages/faq.tsx      |  12 +-
 pages/index.tsx    | 169 +---------------------
 5 files changed, 41 insertions(+), 714 deletions(-)

diff --git a/pages/Privacy.tsx b/pages/Privacy.tsx
index 30bd3a5..6bed4b8 100644
--- a/pages/Privacy.tsx
+++ b/pages/Privacy.tsx
@@ -1,178 +1,18 @@
-import React, {
-  useEffect,
-  useState,
-  useCallback,
-  ChangeEvent,
-  use,
-} from "react";
-import ProductFilters from "../app/components/product-filter";
-import ProductSort from "../app/components/product-sort";
-import ProductGrid from "../app/components/product-grid";
+import React, { useEffect, useState } from "react";
 import { client } from "@/sanity/lib/client";
 import { SanityProduct } from "../app/config/inventory";
 import { groq } from "next-sanity";
 import { siteConfig } from "@/app/config/site";
 
-import Link from "next/link";
-import { shimmer, toBase64 } from "../app/lib/image";
-import Image from "next/image";
-import { urlForImage } from "@/sanity/lib/image";
-import { formatCurrencyString } from "use-shopping-cart";
-import { cn } from "@/app/lib/utils";
-
 export default function Page() {
-  const [products, setProducts] = useState<SanityProduct[]>([]);
+  /*   const [products, setProducts] = useState<SanityProduct[]>([]);
   const [filteredProducts, setFilteredProducts] = useState<SanityProduct[]>([]);
   const [sortedProducts, setSortedProducts] = useState<SanityProduct[]>([]);
   const [sortType, setSortType] = useState<string>("newest");
   const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
-
-  /* useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const prods = await client.fetch<SanityProduct[]>(
-          groq`*[_type == "product"]{
-            _id,
-            "images": images[].asset->url,
-            name,
-            "slug": slug.current,
-            description,
-            "categories": categories[],
-            "sizes": sizes[]{
-              id,
-              size,
-              stripePriceId,
-              price
-            },
-            colors,
-            sku,
-            currency,
-            _createdAt
-          }`,
-        );
-        setProducts(prods);
-        setFilteredProducts(prods);
-        setSortedProducts(prods);
-      } catch (error) {
-        console.error("Error fetching products:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []); */
-
-  /* const sizeProducts = useCallback(
-    (sizes: string[]) => {
-      const sizedProducts = products.filter((product) => {
-        if (product.sizes) {
-          const filteredSizes = product.sizes.filter((s) =>
-            sizes.includes(s.size),
-          );
-          return filteredSizes.length > 0;
-        }
-        return false;
-      });
-      setFilteredProducts(sizedProducts);
-      console.log(sizedProducts);
-    },
-    [products],
-  );
-
-  const sortProducts = useCallback(
-    (productsToSort: SanityProduct[], type: string) => {
-      let sortedProducts = [...productsToSort];
+  const [loading, setLoading] = useState<boolean>(true); */
 
-      if (type === "sizeAsc") {
-        sortedProducts.sort((a, b) => {
-          const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
-          const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
-
-          const [widthA, heightA] = sizeA.split("x").map(Number);
-          const [widthB, heightB] = sizeB.split("x").map(Number);
-
-          return widthA * heightA - widthB * heightB;
-        });
-      } else if (type === "sizeDesc") {
-        sortedProducts.sort((a, b) => {
-          const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
-          const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
-
-          const [widthA, heightA] = sizeA.split("x").map(Number);
-          const [widthB, heightB] = sizeB.split("x").map(Number);
-
-          return widthB * heightB - widthA * heightA;
-        });
-      } else if (type === "priceDesc") {
-        sortedProducts.sort((a, b) => {
-          const priceA = a.sizes && a.sizes.length > 0 ? a.sizes[0].price : 0;
-          const priceB = b.sizes && b.sizes.length > 0 ? b.sizes[0].price : 0;
-          return priceB - priceA;
-        });
-      } else if (type === "newest") {
-        sortedProducts.sort(
-          (a, b) =>
-            new Date(b._createdAt).getTime() - new Date(a._createdAt).getTime(),
-        );
-      }
-
-      setSortedProducts(sortedProducts);
-    },
-    [],
-  );
-
-  useEffect(() => {
-    if (selectedSizes.length > 0) {
-      sizeProducts(selectedSizes);
-    } else {
-      setFilteredProducts(products);
-    }
-  }, [selectedSizes, sizeProducts, products]);
-
-  useEffect(() => {
-    sortProducts(filteredProducts, sortType);
-  }, [sortType, filteredProducts, sortProducts]);
-
-  const handleSortChange = (sortType: string) => {
-    setSortType(sortType);
-  };
-
-  const handleSizeChange = (size: string) => {
-    setSelectedSizes((prevSelectedSizes) =>
-      prevSelectedSizes.includes(size)
-        ? prevSelectedSizes.filter((s) => s !== size)
-        : [...prevSelectedSizes, size],
-    );
-  };
-
-  if (loading) {
-    return <div>Loading...</div>;
-  } */
-
-  /* const prodss = await client.fetch<SanityProduct[]>(
-    groq`*[_type == "product"]{
-    _id,
-    "images": images[].asset->url,
-    name,
-    "slug": slug.current,
-    description,
-    "categories": categories[],
-    "sizes": sizes[]{
-      id,
-      size,
-      stripePriceId,
-      price
-    },
-    colors,
-    sku,
-    currency,
-    _createdAt
-  }`,
-  ); */
-
-  useEffect(() => {
+  /*  useEffect(() => {
     const fetchData = async () => {
       try {
         const prods = await client.fetch<SanityProduct[]>(
@@ -195,7 +35,6 @@ export default function Page() {
             _createdAt
           }`,
         );
-        //must set after fecth the products to be displayed
         console.log("Fetched Products:", prods);
         setProducts(prods);
         setFilteredProducts(prods);
@@ -208,94 +47,7 @@ export default function Page() {
     };
 
     fetchData();
-  }, []);
-
-  /* const sizeProducts = useCallback(
-    (sizes: string[]) => {
-      console.log("Selected Sizes:", sizes);
-      const sizedProducts = products.filter((product) => {
-        if (product.sizes) {
-          const filteredSizes = product.sizes.filter((s) =>
-            sizes.includes(s.size),
-          );
-          console.log(
-            `Product: ${product.name}, Sizes: ${product.sizes.map((s) => s.size).join(", ")}, Filtered Sizes: ${filteredSizes.map((s) => s.size).join(", ")}`,
-          );
-          return filteredSizes.length > 0;
-        }
-        return false;
-      });
-      setFilteredProducts(sizedProducts);
-      console.log("Sized Products:", sizedProducts);
-    },
-    [products],
-  ); */
-
-  /*   const sortProducts = useCallback(
-    (productsToSort: SanityProduct[], type: string) => {
-      let sortedProducts = [...productsToSort];
-
-      if (type === "sizeAsc") {
-        sortedProducts.sort((a, b) => {
-          const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
-          const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
-
-          const [widthA, heightA] = sizeA.split("x").map(Number);
-          const [widthB, heightB] = sizeB.split("x").map(Number);
-
-          return widthA * heightA - widthB * heightB;
-        });
-      } else if (type === "sizeDesc") {
-        sortedProducts.sort((a, b) => {
-          const sizeA = a.sizes && a.sizes.length > 0 ? a.sizes[0].size : "";
-          const sizeB = b.sizes && b.sizes.length > 0 ? b.sizes[0].size : "";
-
-          const [widthA, heightA] = sizeA.split("x").map(Number);
-          const [widthB, heightB] = sizeB.split("x").map(Number);
-
-          return widthB * heightB - widthA * heightA;
-        });
-      } else if (type === "priceDesc") {
-        sortedProducts.sort((a, b) => {
-          const priceA = a.sizes && a.sizes.length > 0 ? a.sizes[0].price : 0;
-          const priceB = b.sizes && b.sizes.length > 0 ? b.sizes[0].price : 0;
-          return priceB - priceA;
-        });
-      } else if (type === "newest") {
-        sortedProducts.sort(
-          (a, b) =>
-            new Date(b._createdAt).getTime() - new Date(a._createdAt).getTime(),
-        );
-      }
-
-      setSortedProducts(sortedProducts);
-    },
-    [],
-  ); */
-
-  /*   useEffect(() => {
-    if (selectedSizes.length > 0) {
-      sizeProducts(selectedSizes);
-    } else {
-      setFilteredProducts(products);
-    }
-  }, [selectedSizes, sizeProducts, products]); */
-
-  /*   useEffect(() => {
-    sortProducts(filteredProducts, sortType);
-  }, [sortType, filteredProducts, sortProducts]);
-
-  const handleSortChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    setSortType(event.target.value);
-  };
-
-  const handleSizeChange = (size: string) => {
-    setSelectedSizes((prevSelectedSizes) =>
-      prevSelectedSizes.includes(size)
-        ? prevSelectedSizes.filter((s) => s !== size)
-        : [...prevSelectedSizes, size],
-    );
-  }; */
+  }, []); */
 
   return (
     <div>
@@ -310,102 +62,6 @@ export default function Page() {
           {siteConfig.description}
         </p>
       </div>
-
-      <div>
-        <main className="mx-auto max-w-6xl px-6">
-          <div className="flex items-center justify-between border-b border-gray-200 pb-4 pt-24 dark:border-gray-800">
-            <h1 className="text-xl font-bold tracking-tight sm:text-2xl">
-              {products.length} Product{products.length === 1 ? "" : "s"}
-            </h1>
-            {/* Product Sort */}
-            <ProductSort
-              products={sortedProducts}
-              sortedProducts={sortedProducts}
-
-              /*  sortType={sortType}
-              onSortChange={(sortType: string) =>
-                handleSortChange({
-                  target: { value: sortType },
-                } as ChangeEvent<HTMLSelectElement>)
-              } */
-            />
-          </div>
-
-          <section aria-labelledby="products-heading" className="pb-24 pt-6">
-            <h2 id="products-heading" className="sr-only">
-              Products
-            </h2>
-
-            <div
-              className={cn(
-                "grid grid-cols-1 gap-x-8 gap-y-10",
-                products.length > 0
-                  ? "lg:grid-cols-4"
-                  : "lg:grid-cols-[1fr_3-fr]",
-              )}
-            >
-              <div className="hidden lg:block">
-                {/* Product filters */}
-                <ProductFilters
-                  products={products}
-                  setFilteredProducts={setFilteredProducts}
-                />
-              </div>
-              {/* Product grid */}
-            </div>
-
-            <div className="grid grid-cols-3 gap-4">
-              {products.map((product) => (
-                <Link
-                  key={product._id}
-                  href={`/products/${product.slug.current}`}
-                  className="group text-sm"
-                >
-                  <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg border-1 border-gray-200 bg-gray-100 group-hover:opacity-75 dark:border-gray-800">
-                    {product.images && product.images[0] && (
-                      <Image
-                        placeholder="blur"
-                        blurDataURL={`data:image/svg+xml;base64,${toBase64(
-                          shimmer(225, 280),
-                        )}`}
-                        src={urlForImage(product.images[0])}
-                        alt={product.name}
-                        width={225}
-                        height={280}
-                        className="h-full w-full object-cover object-center"
-                      />
-                    )}
-                  </div>
-                  <h3 className="mt-4 font-bold">{product.name}</h3>
-                  <div>
-                    <p className="mt-2 font-medium">
-                      Price:{" "}
-                      {formatCurrencyString({
-                        currency: product.currency || "EUR",
-                        value:
-                          product.sizes && product.sizes.length > 0
-                            ? product.sizes[0].price
-                            : 0,
-                      })}
-                    </p>
-                  </div>
-                </Link>
-              ))}
-            </div>
-          </section>
-        </main>
-      </div>
     </div>
   );
-
-  /* return (
-    <div>
-      <ProductFilters
-        selectedSizes={selectedSizes}
-        onSizeChange={(size) => handleSizeChange(size)}
-      />
-      <ProductSort sortType={sortType} onSortChange={handleSortChange} />
-      <ProductGrid products={sortedProducts} />
-    </div>
-  ); */
 }
diff --git a/pages/Shipping.tsx b/pages/Shipping.tsx
index 75ba2e7..87e5b06 100644
--- a/pages/Shipping.tsx
+++ b/pages/Shipping.tsx
@@ -1,210 +1,18 @@
-import React, { useEffect, useState, useCallback, ChangeEvent } from "react";
+import React from "react";
 
-import { client } from "@/sanity/lib/client";
-import { SanityProduct } from "../app/config/inventory";
-import { groq } from "next-sanity";
-
-import ProductSort from "./../app/components/product-sort";
-import ProductFilters from "./../app/components/product-filter";
-import Link from "next/link";
-import Image from "next/image";
-import { urlForImage } from "@/sanity/lib/image";
-import { formatCurrencyString } from "use-shopping-cart";
-import { shimmer, toBase64 } from "@/app/lib/image";
-import ProductGrid from "@/app/components/product-grid";
+import { siteConfig } from "@/app/config/site";
 
 export default function Page() {
-  /*   const [products, setProducts] = useState<SanityProduct[]>([]);
-  const [filteredProducts, setFilteredProducts] = useState<SanityProduct[]>([]);
-  const [sortedProducts, setSortedProducts] = useState<SanityProduct[]>([]);
-  const [sortType, setSortType] = useState<string>("newest");
-  const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
-  const [loading, setLoading] = useState<boolean>(true);
- */
-  /*   const filters = [
-    {
-      id: "category",
-      name: "Category",
-      options: [
-        { value: "canvas", label: "Canvas" },
-        { value: "stickers", label: "Stickers" },
-      ],
-    },
-    {
-      id: "sizes",
-      name: "Sizes",
-      options: sizeOptions,
-    },
-
-    {
-      id: "color",
-      name: "Color",
-      options: [
-        { value: "black", label: "Black" },
-        { value: "blue", label: "Blue" },
-        { value: "brown", label: "Brown" },
-        { value: "green", label: "Green" },
-        { value: "yellow", label: "Yellow" },
-      ],
-    },
-  ]; */
-  /* 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const prods = await client.fetch<SanityProduct[]>(
-          groq`*[_type == "product"]{
-            _id,
-            "images": images[].asset->url,
-            name,
-            "slug": slug.current,
-            description,
-            "categories": categories[],
-            "sizes": sizes[]{
-              id,
-              size,
-              stripePriceId,
-              price
-            },
-            colors,
-            sku,
-            currency,
-            _createdAt
-          }`,
-        );
-        setProducts(prods);
-        setFilteredProducts(prods);
-        setSortedProducts(prods);
-      } catch (error) {
-        console.error("Error fetching products:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  const sizeProducts = useCallback(
-    (sizes: string[]) => {
-      const sizedProducts = products.filter((product) => {
-        if (product.sizes) {
-          const filteredSizes = product.sizes.filter((s) =>
-            sizes.includes(s.size),
-          );
-          return filteredSizes.length > 0;
-        }
-        return false;
-      });
-      setFilteredProducts(sizedProducts);
-    },
-    [products],
-  );
-
-  const sortProducts = useCallback(
-    (productsToSort: SanityProduct[], type: string) => {
-      let sortedProducts = [...productsToSort];
-
-      if (type === "priceDesc") {
-        sortedProducts.sort((a, b) => {
-          const priceA = a.sizes && a.sizes.length > 0 ? a.sizes[0].price : 0;
-          const priceB = b.sizes && b.sizes.length > 0 ? b.sizes[0].price : 0;
-          return priceB - priceA;
-        });
-      } else if (type === "newest") {
-        sortedProducts.sort(
-          (a, b) =>
-            new Date(b._createdAt).getTime() - new Date(a._createdAt).getTime(),
-        );
-      }
-
-      setSortedProducts(sortedProducts);
-    },
-    [],
-  );
-
-  useEffect(() => {
-    if (selectedSizes.length > 0) {
-      sizeProducts(selectedSizes);
-    } else {
-      setFilteredProducts(products);
-    }
-  }, [selectedSizes, sizeProducts, products]);
-
-  useEffect(() => {
-    sortProducts(filteredProducts, sortType);
-  }, [sortType, filteredProducts, sortProducts]);
-
-  const handleSortChange = (sortType: string) => {
-    setSortType(sortType);
-  };
-
-  const handleSizeChange = (size: string) => {
-    setSelectedSizes((prevSelectedSizes) =>
-      prevSelectedSizes.includes(size)
-        ? prevSelectedSizes.filter((s) => s !== size)
-        : [...prevSelectedSizes, size],
-    );
-  };
-
-  if (loading) {
-    return <div>Loading...</div>;
-  } */
-
   return (
     <div>
-      Shipping Page
-      {/* <ProductFilters
-        selectedSizes={selectedSizes}
-        onSizeChange={handleSizeChange}
-      />
-      <ProductSort sortType={sortType} onSortChange={handleSortChange} />
-      <ProductGrid products={sortedProducts} />
-
-      <div className="grid grid-cols-3 gap-4">
-        {sortedProducts.length > 0 ? (
-          sortedProducts.map((product) => (
-            <Link
-              key={product._id}
-              href={`/products/${product.slug.current}`}
-              className="group text-sm"
-            >
-              <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg border-1 border-gray-200 bg-gray-100 group-hover:opacity-75 dark:border-gray-800">
-                {product.images && product.images[0] && (
-                  <Image
-                    placeholder="blur"
-                    blurDataURL={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(225, 280),
-                    )}`}
-                    src={urlForImage(product.images[0])}
-                    alt={product.name}
-                    width={225}
-                    height={280}
-                    className="h-full w-full object-cover object-center"
-                  />
-                )}
-              </div>
-              <h3 className="mt-4 font-bold">{product.name}</h3>
-              <div>
-                <p className="mt-2 font-medium">
-                  Price:{" "}
-                  {formatCurrencyString({
-                    currency: product.currency || "EUR",
-                    value:
-                      product.sizes && product.sizes.length > 0
-                        ? product.sizes[0].price
-                        : 0,
-                  })}
-                </p>
-              </div>
-            </Link>
-          ))
-        ) : (
-          <p>No products available</p>
-        )}
+      <div className="px-4 pt-20 text-center">
+        <h1 className="text-4xl font-extrabold tracking-normal">
+          {siteConfig.name}
+        </h1>
+        <p className="mx-auto mt-4 max-w-3xl text-base">
+          {siteConfig.description}
+        </p>
       </div>
-    </div> */}
-      {/* aaa */}
     </div>
   );
 }
diff --git a/pages/contact.tsx b/pages/contact.tsx
index a6721e7..8f9a611 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -55,6 +55,16 @@ export default function Contact() {
         <title>{metadata.title}</title>
         <meta name="description" content={metadata.description} />
       </Head>
+      <div>
+        <div className="px-4 pt-20 text-center">
+          <h1 className="text-4xl font-extrabold tracking-normal">
+            {siteConfig.name}
+          </h1>
+          <p className="mx-auto mt-4 max-w-3xl text-base">
+            {siteConfig.description}
+          </p>
+        </div>
+      </div>
       <div className="mx-auto max-w-6xl px-6 pt-4">
         <div className="flex items-center justify-between mb-8">
           <div className="flex items-center gap-2 md:gap-8">
diff --git a/pages/faq.tsx b/pages/faq.tsx
index 6a64a5e..cc592d6 100644
--- a/pages/faq.tsx
+++ b/pages/faq.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { siteConfig } from "@/app/config/site";
 //import { siteConfig } from "@/config/site";
 import { Metadata } from "next";
 import Head from "next/head";
@@ -83,7 +84,16 @@ export default function Faq() {
                 <title>{metadata.title}</title>
                 <meta name="description" content={metadata.description} />
             </Head> */}
-
+      <div>
+        <div className="px-4 pt-20 text-center">
+          <h1 className="text-4xl font-extrabold tracking-normal">
+            {siteConfig.name}
+          </h1>
+          <p className="mx-auto mt-4 max-w-3xl text-base">
+            {siteConfig.description}
+          </p>
+        </div>
+      </div>
       <div className="mx-auto w-5/5 font-mono">
         <div className="mt-16">
           {faqs.map((faq, index) => (
diff --git a/pages/index.tsx b/pages/index.tsx
index 3cf142c..86149ec 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,20 +1,5 @@
-import Image from "next/image";
 import { Inter } from "next/font/google";
-import ProductData from "@/app/components/ProductData";
-import { use, useEffect, useState } from "react";
-import Link from "next/link";
-import MessageClient from "@/app/lib/MessageClient";
-import { MainNav } from "@/app/components/main-nav";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/app/components/ui/accordion";
-import { useFiltering } from "@/app/lib/useFiltering";
-import { Checkbox } from "@/app/components/ui/checkbox";
-import { ProductInfo } from "@/app/components/product-info";
-import { ProductGallery } from "@/app/components/product-gallery";
+import { useEffect, useState } from "react";
 import ProductFilters from "@/app/components/product-filter";
 import ProductSort from "@/app/components/product-sort";
 import { client } from "@/sanity/lib/client";
@@ -22,12 +7,8 @@ import { SanityProduct } from "../app/config/inventory";
 import { groq } from "next-sanity";
 import { siteConfig } from "@/app/config/site";
 
-import { shimmer, toBase64 } from "../app/lib/image";
-import { urlForImage } from "@/sanity/lib/image";
-import { formatCurrencyString } from "use-shopping-cart";
 import { cn } from "@/app/lib/utils";
 import ProductGrid from "@/app/components/product-grid";
-import { useSorting } from "@/app/lib/useSorting";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -48,16 +29,10 @@ interface Props {
     sizes?: Size[];
   };
 }
-//anulat/scos  ={}  din ({ searchParams = {} }: Props)  anuleaza eroarea de la props din Home
 export default function Home({ searchParams = {} }: Props) {
-  //console.log("Home Props:", props);
-
   const [products, setProducts] = useState<SanityProduct[]>([]);
   const [filteredProducts, setFilteredProducts] = useState<SanityProduct[]>([]);
   const [sortedProducts, setSortedProducts] = useState<SanityProduct[]>([]);
-  /* const [sortType, setSortType] = useState<string>("newest");
-  const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
-  const [loading, setLoading] = useState<boolean>(true); */
 
   const [count, setCount] = useState(0);
   function handleClick() {
@@ -97,7 +72,6 @@ export default function Home({ searchParams = {} }: Props) {
         setProducts(fetchedProducts);
         setFilteredProducts(fetchedProducts);
         setSortedProducts(fetchedProducts);
-        // setLoading(false);
       } catch (error) {
         console.error("Error fetching products:", error);
       }
@@ -105,151 +79,20 @@ export default function Home({ searchParams = {} }: Props) {
     prods();
   }, [order]);
 
-  // bun bun part
-  /*  useEffect(() => {
-    const prods = async () => {
-      try {
-        const fetchedProducts = await client.fetch<SanityProduct[]>(
-          groq`*[_type == "product"] | order(_createdAt asc){
-            _id,
-            "images": images[].asset->url,
-            name,
-            "slug": slug.current,
-            description,
-            "categories": categories[],
-            "sizes": sizes[]{
-              id,
-              size,
-              stripePriceId,
-              price
-            },
-            colors,
-            sku,
-            currency,
-            _createdAt,
-            slug
-          }`,
-        );
-        console.log("Fetched Products:", fetchedProducts);
-        setProducts(fetchedProducts);
-        setFilteredProducts(fetchedProducts);
-        setSortedProducts(fetchedProducts);
-        // setLoading(false);
-      } catch (error) {
-        console.error("Error fetching products:", error);
-      }
-    };
-    prods();
-  }, []); */
-
-  /* 
-  useEffect(() => {
-    const prods = async () => {
-      try {
-        const fetchedProducts = await client.fetch<SanityProduct[]>(
-          groq`*[_type == "product"]{
-            _id,
-            "images": images[].asset->url,
-            name,
-            "slug": slug.current,
-            description,
-            "categories": categories[],
-            "sizes": sizes[]{
-              id,
-              size,
-              stripePriceId,
-              price
-            },
-            colors,
-            sku,
-            currency,
-            _createdAt,
-            slug
-          }`,
-        );
-        console.log("Fetched Products:", fetchedProducts);
-        setProducts(fetchedProducts);
-        setFilteredProducts(fetchedProducts);
-        setSortedProducts(fetchedProducts);
-        // setLoading(false);
-      } catch (error) {
-        console.error("Error fetching products:", error);
-      }
-    };
-    setSortedProducts(products);
-  }, [sortedProducts, products]);
-  */
-
-  /*   const { products: filteredProducts, error, sizeOptions } = useFiltering([]); */
-
-  /* const filters = [
-    {
-      id: "category",
-      name: "Category",
-      options: [
-        { value: "canvas", label: "Canvas" },
-        { value: "stickers", label: "Stickers" },
-      ],
-    },
-    {
-      id: "sizes",
-      name: "Sizes",
-      options: sizeOptions,
-    },
-
-    {
-      id: "color",
-      name: "Color",
-      options: [
-        { value: "black", label: "Black" },
-        { value: "blue", label: "Blue" },
-        { value: "brown", label: "Brown" },
-        { value: "green", label: "Green" },
-        { value: "yellow", label: "Yellow" },
-      ],
-    },
-  ];
- */
-
   return (
     <main className="mx-auto max-w-6xl px-6 pt-4">
       {/* <MainNav /> */}
 
       <h1 className="font-mono text-2xl pb-4">
-        Jupiter Notebook for designers{" "}
+        Sticker App & canvas print for any taste{" "}
       </h1>
       {/* bite me part */}
-      <div className="flex items-center justify-between">
-        <div>
-          <button
-            className="hover:bg-black hover:text-yellow-400 delay-200 transition-colors duration-200 ease-in-out bg-yellow-500 text-black font-bold py-2 px-4 rounded"
-            onClick={handleClick}
-          >
-            Press me Button!
-          </button>
-        </div>
-
-        <div>
-          <p className="font-mono">
-            You clicked{" "}
-            <span
-              className=""
-              style={{
-                fontSize: count % 10 === 0 ? "2rem" : "1rem",
-                fontWeight: count % 10 === 0 ? "bold" : "normal",
-              }}
-            >
-              {count}
-            </span>{" "}
-            times
-          </p>
-        </div>
-      </div>
+      <div className="flex items-center justify-between"></div>
       <div>
         <p className="text-center">
-          Just a sticker app made with Next.Js, Stripe(for more details about
-          how i managed the price lists with more suitable categories just dm at
-          web.daniell@yahoo.com) and Sanity.io
+          Just a sticker app made with Next.Js, Stripe and Sanity.io(for more
+          details about how i managed the price lists with more suitable
+          categories just dm at web.daniell@yahoo.com).
         </p>
         <h3 className="text-center">Enjoy it!</h3>
       </div>