cleanup

app/[locale]/product/[handle]/page.tsx

@@ -72,6 +72,8 @@ export default async function ProductPage({
     language: params?.locale?.toUpperCase()
   });
 
+  console.debug({ product });
+
   let otherImages: MediaImage[] = [];
   if (!!product) {
     otherImages = product.images
@@ -111,7 +113,7 @@ export default async function ProductPage({
           <div className="relative h-full w-full">
             <Image
               src={product.featuredImage?.url}
-              alt={product.featuredImage?.altText}
+              alt={product.featuredImage?.altText || product.id}
               height={product.featuredImage.height}
               width={product.featuredImage.width}
               className="h-full w-full object-cover"
@@ -151,10 +153,16 @@ export default async function ProductPage({
             </div>
           </div>
 
-          <div>
+          <div className="bg-base p-12 text-dark">
             <ProductTastingNotes product={product} />
           </div>
 
+          {!!product?.galleryIntro?.value && (
+            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+              <div className="md:w-1/2">{product.galleryIntro.value}</div>
+            </div>
+          )}
+
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {!!otherImages &&
               otherImages?.length > 0 &&
@@ -181,6 +189,13 @@ export default async function ProductPage({
                 );
               })}
           </div>
+
+          {!!product?.lower?.value && (
+            <div className="font-multilingual flex w-full flex-row justify-end whitespace-pre-line">
+              <div className="md:w-1/2">{product.lower.value}</div>
+            </div>
+          )}
+
           <Suspense>
             <RelatedProducts id={product.id} />
           </Suspense>

components/cart/modal.tsx

@@ -14,7 +14,6 @@ import AgeConfirmBeforeCheckout from './age-gate-confirm-before-checkout';
 import CloseCart from './close-cart';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';
-import { InlineAddToCart } from './inline-add-to-cart';
 import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {
@@ -157,12 +156,12 @@ export default function CartModal({
                       );
                     })}
                   </ul>
-                  {!!promotedItem && (
+                  {/* {!!promotedItem && (
                     <InlineAddToCart
                       variants={promotedItem.variants}
                       availableForSale={promotedItem.availableForSale}
                     />
-                  )}
+                  )} */}
                   <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
                     {/* <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1">
                       <p>Taxes</p>
@@ -172,10 +171,10 @@ export default function CartModal({
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
                     </div> */}
-                    <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
+                    {/* <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
                       <p>Shipping</p>
                       <p className="text-right text-white/50">Calculated at checkout</p>
-                    </div>
+                    </div> */}
                     <div className="mb-3 flex items-center justify-between border-b border-white/20 py-1">
                       <p>Total</p>
                       <Price

components/product/tasting-notes.tsx

@@ -1,4 +1,3 @@
-import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
 import Image from 'next/image';
 
@@ -14,10 +13,11 @@ export function ProductTastingNotes({ product }: { product: Product }) {
   }
 
   return (
-    <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
+    <div className="flex flex-col justify-between space-y-6 px-6 md:flex-row md:items-end md:space-x-12 md:space-y-0">
       {!!notes ? (
-        <div>
+        <div className="flex w-1/2 flex-col space-y-4">
-          <Prose className="mb-6 text-lg leading-tight dark:text-white/[60%]" html={notes} />
+          <h2 className="font-multilingual text-[38px] leading-tight">tasting notes</h2>
+          <div className="flex w-full flex-row justify-end whitespace-pre-line">{notes}</div>
         </div>
       ) : null}
       {imageUrl && imageHeight && imageWidth && (

components/prose.tsx

@@ -11,15 +11,15 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
     <div
       className={clsx(
         'prose text-lg leading-7',
-        'font-multilingual text-[15px] font-extralight text-white',
+        'font-multilingual text-[15px] font-extralight text-current',
-        'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-white',
+        'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-current',
         '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-white/80 prose-a:underline hover:prose-a:text-white',
+        'prose-a:text-current/80 prose-a:underline hover:prose-a:text-current',
-        'prose-strong:text-white',
+        'prose-strong:text-current',
         'prose-td:border-opacity-20 prose-td:py-4 prose-td:font-normal',
         'prose-tr:border-subtle',
         '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',
+        'dark:text-current dark:prose-headings:text-current dark:prose-a:text-current dark:prose-strong:text-current',
         '!tracking-normal',
         className
       )}

lib/shopify/fragments/product.ts

@@ -14,6 +14,16 @@ const productFragment = /* GraphQL */ `
       value
       type
     }
+    galleryIntro: metafield(namespace: "custom", key: "product_gallery_intro") {
+      key
+      value
+      type
+    }
+    lower: metafield(namespace: "custom", key: "product_lower_text") {
+      key
+      value
+      type
+    }
     notes: metafield(namespace: "custom", key: "tasting_notes_text") {
       key
       value

lib/shopify/types.ts

@@ -149,6 +149,12 @@ export type ShopifyProduct = {
   summary: {
     value: string;
   };
+  galleryIntro: {
+    value: string;
+  };
+  lower: {
+    value: string;
+  };
   notes?: {
     value?: string;
   };

tailwind.config.js

@@ -1,5 +1,5 @@
 const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
+// const colors = require('tailwindcss/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 /** @type {import('tailwindcss').Config} */
@@ -9,7 +9,8 @@ module.exports = {
     extend: {
       colors: {
         subtle: '#606A5F',
-        dark: '#212720'
+        dark: '#212720',
+        base: '#F4F7F5'
       },
       fontFamily: {
         sans: ['var(--font-lato)', ...defaultTheme.fontFamily.sans],