edit product card layout

app/product/[handle]/page.tsx

@@ -5,7 +5,7 @@ import { Suspense } from 'react';
 import { GridTileImage } from 'components/grid/tile';
 import Footer from 'components/layout/footer';
 import { Gallery } from 'components/product/gallery';
-import { ProductDescription } from 'components/product/product-description';
+import { ProductDescriptionCard } from 'components/product/productDescriptionCard';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
@@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8 lg:p-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Gallery
               images={product.images.map((image: Image) => ({
@@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
           </div>
 
           <div className="basis-full lg:basis-2/6">
-            <ProductDescription product={product} />
+            <ProductDescriptionCard product={product} />
           </div>
         </div>
         <Suspense>

components/product/productDescriptionCard.tsx

@@ -0,0 +1,35 @@
+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 { VariantSelector } from './variant-selector';
+
+export function ProductDescriptionCard({ product }: { product: Product }) {
+  return (
+    <div className="relative">
+      <div className="relative border-black bg-white p-2 lg:absolute lg:-left-6 lg:-top-6 lg:border-2">
+        <h1 className="text-3xl font-medium md:text-5xl">{product.title}</h1>
+      </div>
+      <div className="border-black lg:border-2 lg:p-14">
+        <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
+          <div className="mx-auto w-auto bg-black p-2 text-lg text-white">
+            <Price
+              amount={product.priceRange.maxVariantPrice.amount}
+              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            />
+          </div>
+        </div>
+        <VariantSelector options={product.options} variants={product.variants} />
+
+        {product.descriptionHtml ? (
+          <Prose
+            className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
+            html={product.descriptionHtml}
+          />
+        ) : null}
+
+        <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+      </div>
+    </div>
+  );
+}

tailwind.config.js

@@ -28,9 +28,13 @@ module.exports = {
         fadeIn: 'fadeIn .3s ease-in-out',
         carousel: 'marquee 60s linear infinite',
         blink: 'blink 1.4s both infinite'
-      }
+      },
     }
   },
+  corePlugins: {
+    // Disable the dark mode variant for all utilities
+    darkMode: false,
+  },
   future: {
     hoverOnlyWhenSupported: true
   },