wip: Saving work

app/[locale]/disclosures/disclosures.tsx

@@ -12,8 +12,8 @@ export default function Disclosures() {
           {t('disclosurePage.title')}
         </h4>
         <div className="mx-auto max-w-4xl">
-          <div className="font-multilingual my-12 text-lg">
+          <div className="font-multilingual my-12">
-            <section className="font-multilingual mb-36 mt-12 flex flex-col space-y-6 text-lg md:space-y-3">
+            <section className="font-multilingual mb-36 mt-12 flex flex-col space-y-6 text-base md:space-y-3">
               <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
                 <div className="md:w-1/3">{t('disclosurePage.distributor.label')}</div>
                 <div className="md:w-2/3">

app/[locale]/shop-list/page.tsx

@@ -8,7 +8,7 @@ import { getCart, getPage } from 'lib/shopify';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
-import ShopsTitle from './ShopsTitle';
+import ShopsNav from './shops-nav';
 
 export const runtime = 'edge';
 
@@ -50,9 +50,9 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
     <div>
       <Navbar cart={cart} locale={params?.locale} compact />
       <div className="mx-auto max-w-xl px-6 pb-24 pt-12 md:pb-48 md:pt-24">
-        <ShopsTitle />
+        <ShopsNav />
-        <h2 className="mb-8 text-3xl font-medium">{page.title}</h2>
+        <h2 className="font-multilingual mb-8 text-3xl font-medium">{page.title}</h2>
-        <Prose className="" html={page.body as string} />
+        <Prose html={page.body as string} />
       </div>
 
       <Suspense>

app/[locale]/shop-list/shops-nav.tsx

@@ -3,11 +3,11 @@
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-export default function ShopsTitle() {
+export default function ShopsNav() {
   const t = useTranslations('Index');
   return (
     <div>
-      <div className="flex flex-row items-baseline space-x-6 pb-12">
+      <div className="font-multilingual flex flex-row items-baseline space-x-6 pb-12">
         <Link href="/#shops">
           <span className="flex flex-row items-center space-x-1.5">
             <span>←</span>
@@ -15,7 +15,7 @@ export default function ShopsTitle() {
           </span>
         </Link>
         <div>|</div>
-        <div className="font-medium">{t('shops.title')}</div>
+        <div className="font-multilingual font-medium">{t('shops.title')}</div>
       </div>
     </div>
   );

components/grid/homepage-products.tsx

@@ -1,3 +1,4 @@
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { InlineAddToCart } from 'components/cart/inline-add-to-cart';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
@@ -17,7 +18,7 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
         'col-span-1 row-span-1 flex flex-col justify-between space-y-6 md:col-span-2 md:row-span-1'
       )}
     >
-      <Link className="block w-full" href={`/product/${item.handle}`}>
+      <Link className="group block w-full" href={`/product/${item.handle}`}>
         <div className="relative block aspect-tall overflow-hidden ">
           <GridTileImage
             src={image?.url}
@@ -34,7 +35,15 @@ function HomepageProductsItem({ item, priority }: { item: Product; priority?: bo
             currencyCode={item.priceRange.maxVariantPrice.currencyCode}
             size={size?.value}
           />
-          <div className="line-clamp-4 pt-2 font-extralight">{item?.summary?.value}</div>
+          <div className="line-clamp-4 pt-2 font-extralight">
+            <span>{item?.summary?.value}</span>{' '}
+            <span className="ml-2 inline-flex flex-row items-center space-x-1 opacity-50 transition-opacity duration-150 group-hover:opacity-100">
+              <span>Read more.</span>
+              <span>
+                <ChevronRightIcon width={16} />
+              </span>
+            </span>
+          </div>
         </div>
       </Link>
       <InlineAddToCart variants={item.variants} availableForSale={item.availableForSale} />

components/label.tsx

@@ -18,7 +18,7 @@ const Label = ({
         <h3 className="mr-4 line-clamp-2 flex-grow font-serif text-3xl tracking-wider md:text-4xl">
           {title}
         </h3>
-        <div className="font-multilingual flex flex-row items-center space-x-2">
+        <div className="font-multilingual flex flex-row items-center space-x-2 text-[17px]">
           <Price
             className="flex-none"
             amount={amount}

components/layout/about-narai-preview.tsx

@@ -7,10 +7,10 @@ export default function AboutNaraiPreview() {
   return (
     <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-12 md:space-y-0 md:p-24">
       <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
-        <div className="max-w-sm text-5xl">{t('home.previews.about-narai.title')}</div>
+        <div className="max-w-title text-[40px]">{t('home.previews.about-narai.title')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.about-narai.subtitle')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.about-narai.subtitle')}</div>
       </div>
-      <div className="font-multilingual flex flex-col space-y-6 font-extralight md:w-1/2">
+      <div className="font-multilingual flex flex-col space-y-6 text-base font-extralight md:w-1/2">
         <div>{t('home.previews.about-narai.body')}</div>
       </div>
     </div>

components/layout/concept-preview.tsx

@@ -8,14 +8,14 @@ export default function ConceptPreview() {
   return (
     <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-12 md:space-y-0 md:p-24">
       <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
-        <div className="max-w-sm text-5xl">{t('home.previews.concept.title')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.concept.title')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.concept.subtitle')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.concept.subtitle')}</div>
       </div>
-      <div className="font-multilingual flex flex-col space-y-6 font-extralight md:w-1/2">
+      <div className="font-multilingual flex flex-col space-y-6 text-base font-extralight md:w-1/2">
         <div>{t('home.previews.concept.body')}</div>
         <Link
           href="/concept"
-          className="max-w-sm border border-white px-6 py-3 text-center text-lg transition-colors duration-150 hover:border-white/50"
+          className="max-w-sm border border-white px-6 py-3 text-center text-base transition-colors duration-150 hover:border-white/50"
         >
           {t('home.previews.concept.button')}
         </Link>

components/layout/footer-menu.tsx

@@ -10,7 +10,7 @@ export default function FooterMenu() {
     <div className="hidden md:grid md:w-full md:grid-cols-2">
       <div className="col-span-1">
         <div className="mb-4 font-serif text-base underline">{t('menu.title')}</div>
-        <nav className="font-multilingual flex flex-col space-y-2 text-left text-base font-extralight">
+        <nav className="font-multilingual flex flex-col space-y-2 text-left text-sm font-extralight">
           <div>
             <Link href="/products" className="transition-opacity duration-150 hover:opacity-50">
               {t('menu.products')}
@@ -59,7 +59,7 @@ export default function FooterMenu() {
         <div className="mb-4 text-right font-serif text-base underline">
           {t('shopping-guide.title')}
         </div>
-        <nav className="font-multilingual flex flex-col items-end space-y-2 text-left text-base font-extralight">
+        <nav className="font-multilingual flex flex-col items-end space-y-2 text-left text-sm font-extralight">
           <div>
             <Link href="/terms" className="transition-opacity duration-150 hover:opacity-50">
               {t('shopping-guide.terms')}

components/layout/footer.tsx

@@ -35,11 +35,11 @@ export default async function Footer({ cart }: { cart?: Cart }) {
               <div className="flex flex-row items-end space-x-6">
                 <div className="flex flex-col items-start space-y-2">
                   <p className="font-japan text-3xl font-extralight">杉の森酒造</p>
-                  <p className="font-serif text-lg">suginomori brewery</p>
+                  <p className="font-serif text-xs font-semibold">suginomori brewery</p>
                 </div>
                 <div className="flex flex-col items-start space-y-2">
                   <p className="font-japan text-xl font-extralight">長野県塩尻市奈良井551-1</p>
-                  <p className="font-serif text-lg">551-1 Narai, Shiojiri, Nagano</p>
+                  <p className="font-serif text-xs font-semibold">551-1 Narai, Shiojiri, Nagano</p>
                 </div>
               </div>
             </div>
@@ -52,11 +52,11 @@ export default async function Footer({ cart }: { cart?: Cart }) {
             </Link>
             <div className="flex grow flex-col items-end space-y-6">
               <div className="flex flex-col items-start space-y-2">
-                <p className="font-japan text-3xl font-extralight">杉の森酒造</p>
+                <p className="font-japan text-[22px] font-extralight">杉の森酒造</p>
                 <p className="font-serif text-lg">suginomori brewery</p>
               </div>
               <div className="flex flex-col items-start space-y-2">
-                <p className="font-japan text-xl font-extralight">長野県塩尻市奈良井551-1</p>
+                <p className="font-japan text-[17px] font-extralight">長野県塩尻市奈良井551-1</p>
                 <p className="font-serif text-lg">551-1 Narai, Shiojiri, Nagano</p>
               </div>
               <div className="flex flex-row justify-between space-x-4">

components/layout/location-preview.tsx

@@ -8,14 +8,14 @@ export default function LocationPreview() {
   return (
     <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-12 md:space-y-0 md:p-24">
       <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
-        <div className="max-w-sm text-5xl">{t('home.previews.location.title')}</div>
+        <div className="max-w-title text-[40px]">{t('home.previews.location.title')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.location.subtitle')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.location.subtitle')}</div>
       </div>
-      <div className="font-multilingual flex flex-col space-y-6 font-extralight md:w-1/2">
+      <div className="font-multilingual flex flex-col space-y-6 text-base font-extralight md:w-1/2">
         <div>{t('home.previews.location.body')}</div>
         <Link
           href="/about"
-          className="max-w-sm border border-white px-6 py-3 text-center text-lg transition-colors duration-150 hover:border-white/50"
+          className="max-w-sm border border-white px-6 py-3 text-center text-base transition-colors duration-150 hover:border-white/50"
         >
           {t('home.previews.location.button')}
         </Link>

components/layout/newsletter-signup.tsx

@@ -8,7 +8,7 @@ export default function NewsletterSignup() {
   return (
     <div className="mx-auto max-w-xl space-y-4">
       <h3 className="font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
-      <div className="font-multilingual font-extralight">{t('newsletter.description')}</div>
+      <div className="font-multilingual text-sm font-extralight">{t('newsletter.description')}</div>
       <form
         className="max-w-xl space-x-px md:flex"
         action={`${process?.env?.NEXT_PUBLIC_MAILCHIMP_HOST}/subscribe/post?u=${process?.env?.NEXT_PUBLIC_MAILCHIMP_USER_ID}&amp;id=${process?.env?.NEXT_PUBLIC_MAILCHIMP_LIST_ID}`}
@@ -26,7 +26,7 @@ export default function NewsletterSignup() {
           autoComplete="email"
           required
           className={clsx(
-            'w-full min-w-0 appearance-none',
+            'w-full min-w-0 appearance-none text-sm',
             'bg-white outline-none',
             'px-4 py-3 focus:outline-none',
             'focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0',
@@ -38,7 +38,7 @@ export default function NewsletterSignup() {
           <button
             type="submit"
             className={clsx(
-              'px-4 py-3',
+              'px-4 py-3 text-sm',
               'transition-colors duration-150',
               'font-multilingual flex w-full items-center justify-center font-extralight',
               'border border-white/30 hover:border-white',

components/layout/sagyobar-preview.tsx

@@ -7,16 +7,16 @@ export default function SagyobarPreview() {
 
   return (
     <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-12 md:space-y-0 md:p-24">
-      <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
+      <div className="font-multilingual flex flex-col font-extralight md:w-1/2">
-        <div className="max-w-sm text-5xl">{t('home.previews.bar.title.line001')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.bar.title.line001')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.bar.title.line002')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.bar.title.line002')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.bar.title.line003')}</div>
+        <div className="max-w-sm text-[40px]">{t('home.previews.bar.title.line003')}</div>
       </div>
-      <div className="font-multilingual flex flex-col space-y-6 font-extralight md:w-1/2">
+      <div className="font-multilingual flex flex-col space-y-6 text-base font-extralight md:w-1/2">
         <div>{t('home.previews.bar.body')}</div>
         <Link
           href="/sagyobar"
-          className="max-w-sm border border-white px-6 py-3 text-center text-lg transition-colors duration-150 hover:border-white/50"
+          className="max-w-sm border border-white px-6 py-3 text-center text-base transition-colors duration-150 hover:border-white/50"
         >
           {t('home.previews.bar.button')}
         </Link>

components/layout/stories-preview.tsx

@@ -60,7 +60,7 @@ export default async function StoriesPreview({
           <div className="flex w-full flex-row justify-center pt-12">
             <Link
               href="/stories"
-              className="mx-auto max-w-sm border border-dark px-24 py-3 text-center text-lg transition-colors duration-150 hover:border-dark/40"
+              className="mx-auto max-w-sm border border-dark px-24 py-3 text-center text-[15px] transition-colors duration-150 hover:border-dark/40"
             >
               more stories
             </Link>