mobile

app/api/route.ts

@@ -37,10 +37,10 @@ export async function POST(
     body: blob,
   })
   const isNSFW = await response_isnsfw.clone().json().catch(() => ({}));
-  // if (isNSFW?.error) return Response.json({ status: response.status, ok: false, message: isNSFW.error });
+
   if (isNSFW?.length) {
     const scoreNotSafe = isNSFW?.find((n: { label: string }) => n.label === "no_safe");
-    if (scoreNotSafe?.score > 0.7) {
+    if (scoreNotSafe?.score > 0.8) {
       return Response.json({ status: 401, ok: false, message: "Image is not safe for work." });
     }
   }

components/header.tsx

@@ -14,7 +14,7 @@ export const Header = () => {
       className={classNames(
         "bg-black z-[1] transition-all duration-1000 overflow-hidden",
         {
-          "!max-h-[0px]": hasMadeFirstGeneration,
+          "!max-h-[0px] mb-6": hasMadeFirstGeneration,
           "max-h-[450px]": !hasMadeFirstGeneration,
         }
       )}
@@ -36,7 +36,10 @@ export const Header = () => {
             alt="Demo generated images"
             className="absolute h-full top-0 object-contain hidden lg:block right-0 xl:right-44 object-left"
           />
-          <div className="absolute w-full lg:w-1/3 right-0 xl:right-44 -bottom-32 lg:-bottom-32 bg-gradient-to-br from-blue-500 to-pink-500 blur-3xl lg:blur-[130px] h-full z-[-1]"></div>
+          <div
+            className="absolute w-full lg:w-1/3 right-0 xl:right-44 -bottom-32 lg:-bottom-32 bg-gradient-to-br from-blue-500 to-pink-500 blur-xl lg:blur-[130px] h-full z-[-1]"
+            style={{ willChange: "transform" }}
+          ></div>
         </div>
         <div className="absolute bottom-0 w-full h-full left-0 bg-gradient-to-b from-transparent to-black z-[1]" />
       </div>

components/main/collections/index.tsx

@@ -21,7 +21,7 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
 
   return (
     <>
-      <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
+      <div className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
         {collections?.map((collection: CollectionType, i: number) =>
           collection?.loading ? (
             <CollectionLoading
@@ -37,7 +37,7 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
                     : breakpoint === "S"
                     ? i % 3 === 1
                     : breakpoint === "XS"
-                    ? i % 2 === 1
+                    ? false
                     : false,
               })}
             />
@@ -55,7 +55,7 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
                     : breakpoint === "S"
                     ? i % 3 === 1
                     : breakpoint === "XS"
-                    ? i % 2 === 1
+                    ? false
                     : false,
               })}
               onOpen={setOpen}

components/main/index.tsx

@@ -31,7 +31,7 @@ export const Main = () => {
 
   return (
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
-      <div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
+      <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
           <InputGeneration
             prompt={prompt}