wip: Saving work

app/[locale]/about/about-narai-detail.tsx

@@ -112,6 +112,9 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
               <h2 className="max-w-title text-3xl leading-normal">
                 {t('about.materials.water.title')}
               </h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.water.subtitle')}
+              </h2>
             </div>
             <div className="md:w-1/2">
               <p className="text-base leading-relaxed">{t('about.materials.water.body')}</p>
@@ -132,6 +135,9 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
               <h2 className="max-w-title text-3xl leading-normal">
                 {t('about.materials.rice.title')}
               </h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.rice.subtitle')}
+              </h2>
             </div>
             <div className="md:w-1/2">
               <p className="text-base leading-relaxed">{t('about.materials.rice.body')}</p>
@@ -152,6 +158,9 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
               <h2 className="max-w-title text-3xl leading-normal">
                 {t('about.materials.koji.title')}
               </h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.koji.subtitle')}
+              </h2>
             </div>
             <div className="md:w-1/2">
               <p className="text-base leading-relaxed">{t('about.materials.koji.body')}</p>
@@ -165,7 +174,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
           <div className="border-t border-white/20"></div>
         </div>
         <div className="font-multilingual max-w-xl font-extralight">
-          <p className="text-lg">{t('about.irie.title')}</p>
+          <p className="pb-4 text-xl">{t('about.irie.title')}</p>
           <p className="text-lg leading-relaxed">{t('about.irie.body')}</p>
         </div>
 

app/[locale]/bar/sagyobar-detail.tsx

@@ -129,7 +129,9 @@ export default function SagyobarDetail() {
             <p className="pb-6 text-[15px] leading-relaxed">
               <Link
                 href="https://cdn.shopify.com/s/files/1/0578/5570/5261/files/sagyobar_menu.pdf?v=1692861259"
-                className="transition-opacity duration-150 hover:opacity-60"
+                className="underline transition-opacity duration-150 hover:opacity-60"
+                rel="noopener noreferrer"
+                target="_blank"
               >
                 {t('bar.menu.para001')}
               </Link>
@@ -142,7 +144,7 @@ export default function SagyobarDetail() {
             <div className="border-t border-white/20"></div>
           </div>
           <div className="font-multilingual max-w-xl font-extralight">
-            <p className="text-[15px]">{t('bar.clerk.title')}</p>
+            <p className="pb-4 text-xl">{t('bar.clerk.title')}</p>
             <p className="text-[15px] leading-relaxed">{t('bar.clerk.001')}</p>
             <p className="text-[15px] leading-relaxed">{t('bar.clerk.002')}</p>
           </div>

app/[locale]/company/company-detail.tsx

@@ -31,7 +31,9 @@ export default function CompanyDetail() {
           'mx-auto max-w-4xl'
         )}
       >
-        <h2 className="mx-auto max-w-sm text-center text-4xl md:text-4xl">{t('company.title')}</h2>
+        <h2 className="font-multilingual mx-auto max-w-sm text-center text-4xl md:text-4xl">
+          {t('company.title')}
+        </h2>
 
         <div>
           <h3 className="text-2xl">{t('company.subtitle001')}</h3>
@@ -81,12 +83,12 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.irie.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">{t('company.irie.japanese')}</div>
               <div className="pb-4">{t('company.irie.english')}</div>
               <div className="text-sm">{t('company.irie.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={NishikawaImage}
@@ -95,12 +97,14 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.nishikawa.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">
+                {t('company.nishikawa.japanese')}
+              </div>
               <div className="pb-4">{t('company.nishikawa.english')}</div>
               <div className="text-sm">{t('company.nishikawa.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={SundbergImage}
@@ -109,12 +113,14 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.sundberg.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">
+                {t('company.sundberg.japanese')}
+              </div>
               <div className="pb-4">{t('company.sundberg.english')}</div>
               <div className="text-sm">{t('company.sundberg.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={MasaImage}
@@ -123,12 +129,12 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.masa.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">{t('company.masa.japanese')}</div>
               <div className="pb-4">{t('company.masa.english')}</div>
               <div className="text-sm">{t('company.masa.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={TakaImage}
@@ -137,12 +143,12 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.yamano.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">{t('company.yamano.japanese')}</div>
               <div className="pb-4">{t('company.yamano.english')}</div>
               <div className="text-sm">{t('company.yamano.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={AlisaImage}
@@ -151,12 +157,12 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.yoshida.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">{t('company.yoshida.japanese')}</div>
               <div className="pb-4">{t('company.yoshida.english')}</div>
               <div className="text-sm">{t('company.yoshida.role')}</div>
             </div>
 
-            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+            <div className="font-multilingual col-span-1 py-4 text-base font-extralight">
               <div className="relative aspect-square">
                 <Image
                   src={ShinyaImage}
@@ -165,7 +171,7 @@ export default function CompanyDetail() {
                   className={clsx('h-full w-full object-cover')}
                 />
               </div>
-              <div className="pt-2">{t('company.ikegaya.japanese')}</div>
+              <div className="pt-2 font-japan font-extralight">{t('company.ikegaya.japanese')}</div>
               <div className="pb-4">{t('company.ikegaya.english')}</div>
               <div className="text-sm">{t('company.ikegaya.role')}</div>
             </div>

app/[locale]/concept/concept-detail.tsx

@@ -31,16 +31,16 @@ export default function ConceptDetail() {
           <div className="flex flex-col space-y-6">
             <h2 className="max-w-sm pb-12 text-4xl md:text-5xl">{t('concept.title')}</h2>
             <p className="font-multilingual text-base font-extralight">
-              <span>{t('concept.para001')}</span>
-              <span>{t('concept.para002')}</span>
+              <span>{t('concept.para001')}</span> <span>{t('concept.para002')}</span>{' '}
               <span>{t('concept.para003')}</span>
             </p>
-            <div className="font-multilingual pt-24 font-extralight">
+            <div className="font-multilingual pt-6 font-extralight">
               <p className="pb-6 text-xl font-normal">{t('concept.subtitle001')}</p>
-              <p className="pb-24 text-base leading-relaxed">{t('concept.para004')}</p>
+              <p className="pb-12 text-base leading-relaxed">{t('concept.para004')}</p>
               <p className="pb-4 text-base leading-relaxed">{t('concept.para005')}</p>
+              <p className="pb-4 text-base leading-relaxed">{t('concept.para006')}</p>
               <p className="pb-4 text-base leading-relaxed">
-                {t('concept.para006')} {t('concept.para007')} {t('concept.para008')}
+                {t('concept.para007')} {t('concept.para008')}
               </p>
               <p className="pb-4 text-base leading-relaxed">{t('concept.para009')}</p>
               <p className="text-base leading-relaxed">{t('concept.para010')}</p>

app/[locale]/page.tsx

@@ -20,7 +20,8 @@ import SagyobarPreview from 'components/layout/sagyobar-preview';
 import Shoplist from 'components/layout/shoplist';
 import StoriesPreview from 'components/layout/stories-preview';
 import { BLOG_HANDLE } from 'lib/constants';
-import { getCart } from 'lib/shopify';
+import { getCart, getProduct } from 'lib/shopify';
+import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
 import { Suspense } from 'react';
@@ -48,9 +49,14 @@ export default async function HomePage({
     cart = await getCart({ cartId, language: locale?.toUpperCase() });
   }
 
+  const promotedItem: Product | undefined = await getProduct({
+    handle: 'gift-bag-and-postcard-set',
+    language: locale?.toUpperCase()
+  });
+
   return (
     <div>
-      <Navbar cart={cart} locale={locale} />
+      <Navbar cart={cart} locale={locale} promotedItem={promotedItem} />
       <div className="pt-12 md:pt-48">
         <HomepageProducts lang={locale} />
       </div>

app/[locale]/privacy/privacy-policy.tsx

@@ -6,8 +6,8 @@ export default function PrivacyPolicy() {
   const t = useTranslations('Index');
   return (
     <>
-      <div className="mx-auto max-w-3xl text-white">
-        <div className="text-center font-serif text-3xl font-bold leading-tight text-white md:mb-16 md:text-4xl">
+      <div className="mx-auto max-w-3xl font-serif text-white">
+        <div className="text-center text-3xl font-bold leading-tight text-white md:mb-16 md:text-4xl">
           {t('privacy.title')}
         </div>
         <div className="mb-24 text-lg leading-normal">
@@ -16,7 +16,7 @@ export default function PrivacyPolicy() {
             <p>{t('privacy.pleaseRead')}</p>
             <p className="mt-4">{t('privacy.usedFor')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.definitions.title')}
           </div>
           <div>
@@ -37,13 +37,13 @@ export default function PrivacyPolicy() {
             <p className="mt-4">{t('privacy.definitions.usageData')}</p>
             <p className="mt-4">{t('privacy.definitions.you')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.collectingAndUsing.title')}
           </div>
           <div>
             <p>{t('privacy.collectingAndUsing.inScope')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.usageData.title')}
           </div>
           <div>
@@ -52,7 +52,7 @@ export default function PrivacyPolicy() {
             <p className="mt-4">{t('privacy.usageData.deviceInfo')}</p>
           </div>
 
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.cookies.title')}
           </div>
           <div>
@@ -60,7 +60,7 @@ export default function PrivacyPolicy() {
             <p className="mt-4">{t('privacy.cookies.doNotAccept')}</p>
           </div>
 
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.title')}
           </div>
           <div>
@@ -80,20 +80,20 @@ export default function PrivacyPolicy() {
               <li className="mt-4">{t('privacy.personal.sharing.socialMedia')}</li>
             </ul>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.retention.title')}
           </div>
           <div>
             <p>{t('privacy.personal.retention.asNecessary')}</p>
             <p className="mt-4">{t('privacy.personal.retention.internalAnalysis')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.transfer.title')}
           </div>
           <div>
             <p>{t('privacy.personal.transfer.transborder')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.disclosure.title')}
           </div>
           <div>
@@ -102,7 +102,7 @@ export default function PrivacyPolicy() {
             <p className="mt-4">{t('privacy.personal.disclosure.goodFaith')}</p>
             <p className="mt-4">{t('privacy.personal.disclosure.noGuarantee')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.processing.title')}
           </div>
           <div>
@@ -119,34 +119,34 @@ export default function PrivacyPolicy() {
             <p className="mt-4">{t('privacy.personal.processing.creditCards')}</p>
             <p className="mt-4">{t('privacy.personal.processing.cookies')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.mobile.title')}
           </div>
           <div>
             <p>{t('privacy.personal.mobile.optOut')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.doNotTrack.title')}
           </div>
           <div>
             <p>{t('privacy.personal.doNotTrack.noResponse')}</p>
             <p className="mt-4">{t('privacy.personal.doNotTrack.browser')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.personal.links.title')}
           </div>
           <div>
             <p>{t('privacy.personal.links.external')}</p>
             <p className="mt-4">{t('privacy.personal.links.disclaimer')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.changes.title')}
           </div>
           <div>
             <p>{t('privacy.changes.updates')}</p>
             <p className="mt-4">{t('privacy.changes.review')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-12 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-12 md:text-2xl">
             {t('privacy.contactUs.title')}
           </div>
           <div>

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

@@ -120,12 +120,12 @@ export default async function ProductPage({
 
           <div className="flex flex-col space-y-6 px-6 md:flex-row md:space-x-6 md:space-y-0">
             <div className="md:w-1/2">
-              <h1 className="font-multilingual mb-2 text-5xl">{product.title}</h1>
+              <h1 className="mb-2 font-serif text-[50px] font-bold">{product.title}</h1>
             </div>
             <div className="md:w-1/2">
               <div className="flex flex-col space-y-6">
                 <div className="mb-6 flex flex-col border-t border-white/20 pt-6">
-                  <div className="font-multilingual mr-auto flex w-auto flex-row items-end space-x-4 text-4xl text-white">
+                  <div className="font-multilingual mr-auto flex w-auto flex-row items-end space-x-4 text-2xl text-white md:text-4xl">
                     <Price
                       amount={product.priceRange.maxVariantPrice.amount}
                       currencyCode={product.priceRange.maxVariantPrice.currencyCode}
@@ -197,8 +197,8 @@ async function RelatedProducts({ id }: { id: string }) {
 
   return (
     <div className="border-t border-white/20 px-6 py-12 md:py-24">
-      <h2 className="font-multilingual pb-8 text-2xl">other products</h2>
-      <ul className="flex w-full gap-4 overflow-x-auto pt-1">
+      <h2 className="pb-8 font-japan text-[20px]">other products</h2>
+      <ul className="flex w-full gap-12 overflow-x-auto pt-1">
         {relatedProducts.map((product) => (
           <li
             key={product.handle}
@@ -221,7 +221,7 @@ async function RelatedProducts({ id }: { id: string }) {
                   sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
                 />
               </div>
-              <div>
+              <div className="pt-3">
                 <Label
                   title={product.title as string}
                   amount={product.priceRange.maxVariantPrice.amount}

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

@@ -11,11 +11,11 @@ export default function ShopsNav() {
         <Link href="/#shops" className="transition-opacity duration-150 hover:opacity-60">
           <span className="flex flex-row items-center space-x-4">
             <span>←</span>
-            <span>{t('shops.title')}</span>
+            <span>{t('shops.top')}</span>
           </span>
         </Link>
         <div>|</div>
-        <div className="font-multilingual font-medium">{t('company.name.value')}</div>
+        <div className="font-multilingual font-medium">{t('shops.title')}</div>
       </div>
     </div>
   );

app/[locale]/terms/terms-of-use.tsx

@@ -12,7 +12,7 @@ export default function TermsOfUse() {
         </div>
         <div className="mb-24 text-lg leading-normal">
           <div className="mt-4 text-center">{t('terms.pleaseRead')}</div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.definitions.title')}
           </div>
           <div>
@@ -29,7 +29,7 @@ export default function TermsOfUse() {
             <p className="mt-4">{t('terms.definitions.socialMedia')}</p>
             <p className="mt-4">{t('terms.definitions.you')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.acknowledgment.title')}
           </div>
           <div>
@@ -39,7 +39,7 @@ export default function TermsOfUse() {
             <p className="mt-4">{t('terms.acknowledgment.age')}</p>
             <p className="mt-4">{t('terms.acknowledgment.privacy')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.orders.title')}
           </div>
           <div>
@@ -59,27 +59,27 @@ export default function TermsOfUse() {
               <li className="mt-4">{t('terms.orders.returns.exceptions.digital')}</li>
             </ul>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.inaccuracies.title')}
           </div>
           <div>
             <p>{t('terms.inaccuracies.errorsPossible')}</p>
             <p className="mt-4">{t('terms.inaccuracies.noGuarantees')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.prices.title')}
           </div>
           <div>
             <p>{t('terms.prices.changes')}</p>
             <p className="mt-4">{t('terms.prices.payments')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.promotions.title')}
           </div>
           <div>
             <p>{t('terms.promotions.conflicts')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.ip.title')}
           </div>
           <div>
@@ -88,13 +88,13 @@ export default function TermsOfUse() {
             <p className="mt-4">{t('terms.ip.trademarks')}</p>
             <p className="mt-4">{t('terms.ip.assignment')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.thirdPartyLinks.title')}
           </div>
           <div>
             <p>{t('terms.thirdPartyLinks.noControl')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.liability.title')}
           </div>
           <div>
@@ -102,14 +102,14 @@ export default function TermsOfUse() {
             <p className="mt-4">{t('terms.liability.noSpecialDamages')}</p>
             <p className="mt-4">{t('terms.liability.noSpecialDamages')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.disclaimer.title')}
           </div>
           <div>
             <p>{t('terms.disclaimer.asIs')}</p>
             <p className="mt-4">{t('terms.disclaimer.conflicts')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.misc.title')}
           </div>
           <div>
@@ -119,7 +119,7 @@ export default function TermsOfUse() {
             <p className="mt-4">{t('terms.misc.translation')}</p>
             <p className="mt-4">{t('terms.misc.changes')}</p>
           </div>
-          <div className="my-8 text-center font-serif text-xl font-bold text-white md:my-16 md:text-2xl">
+          <div className="my-8 text-center text-xl font-bold text-white md:my-16 md:text-2xl">
             {t('terms.contactUs.title')}
           </div>
           <div className="mb-12">

components/cart/add-many-to-cart.tsx

@@ -2,7 +2,6 @@
 
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import { SupportedLocale } from 'components/layout/navbar/language-control';
 import LoadingDots from 'components/loading-dots';
 import { ProductVariant } from 'lib/shopify/types';
 import { useLocale, useTranslations } from 'next-intl';
@@ -86,7 +85,7 @@ export function AddManyToCart({
             const error = await addItems({
               variantId: selectedVariantId,
               quantity: currentQuantity,
-              locale: locale as SupportedLocale
+              country: locale.toUpperCase()
             });
 
             if (error) {

components/cart/modal.tsx

@@ -4,7 +4,7 @@ import { Dialog, Transition } from '@headlessui/react';
 import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
-import type { Cart } from 'lib/shopify/types';
+import type { Cart, Product } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
@@ -14,13 +14,20 @@ 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 = {
   [key: string]: string;
 };
 
-export default function CartModal({ cart }: { cart: Cart | undefined }) {
+export default function CartModal({
+  cart,
+  promotedItem
+}: {
+  cart: Cart | undefined;
+  promotedItem?: Product;
+}) {
   const t = useTranslations('Index');
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart?.totalQuantity);
@@ -150,15 +157,21 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       );
                     })}
                   </ul>
+                  {!!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">
+                    {/* <div className="mb-3 flex items-center justify-between border-b border-white/20 pb-1">
                       <p>Taxes</p>
                       <Price
                         className="text-right text-base text-white"
                         amount={cart.cost.totalTaxAmount.amount}
                         currencyCode={cart.cost.totalTaxAmount.currencyCode}
                       />
-                    </div>
+                    </div> */}
                     <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>

components/cart/promoted-cart-item.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { addItem } from 'components/cart/actions';
+import LoadingDots from 'components/loading-dots';
+import { ProductVariant } from 'lib/shopify/types';
+import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useTransition } from 'react';
+
+export function PromotedCartItem({
+  variants,
+  availableForSale
+}: {
+  variants: ProductVariant[];
+  availableForSale: boolean;
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations('Index');
+
+  const firstVariant = variants?.[0];
+
+  const [isPending, startTransition] = useTransition();
+  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
+  const variant = variants.find((variant: ProductVariant) =>
+    variant.selectedOptions.every(
+      (option) => option.value === searchParams.get(option.name.toLowerCase())
+    )
+  );
+  const selectedVariantId = variant?.id || defaultVariantId;
+  const title = !availableForSale
+    ? 'Out of stock'
+    : !selectedVariantId
+    ? 'Please select options'
+    : undefined;
+
+  return firstVariant ? (
+    <button
+      aria-label="Add item to cart"
+      disabled={isPending || !availableForSale || !selectedVariantId}
+      title={title}
+      onClick={() => {
+        // Safeguard in case someone messes with `disabled` in devtools.
+        if (!availableForSale || !selectedVariantId) return;
+
+        startTransition(async () => {
+          const error = await addItem(selectedVariantId);
+
+          if (error) {
+            // Trigger the error boundary in the root error.js
+            throw new Error(error.toString());
+          }
+
+          router.refresh();
+        });
+      }}
+    >
+      <>
+        {console.debug({ firstVariant })}
+        {/* <div key={firstVariant.slug}>
+        <div className="flex flex-col space-y-2 border border-dark/10 bg-white/20 p-2">
+          <div className="flex flex-row space-x-4">
+            <div className="relative z-0 h-16 w-16 cursor-pointer overflow-hidden bg-white">
+              <Link href={`/product/${firstVariant.path}`} passHref>
+                <Image
+                  onClick={() => closeSidebarIfPresent()}
+                  width={150}
+                  height={150}
+                  src={firstVariant?.image?.url}
+                  alt={firstVariant?.image?.alt}
+                  unoptimized
+                />
+              </Link>
+            </div>
+            <div className="flex flex-1 flex-col text-sm text-white">
+              <div className="flex flex-col justify-between space-y-2 text-sm">
+                <span>{firstVariant.price}</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              className="border border-white/30 bg-white/20 px-4 py-1 text-xs uppercase tracking-wider text-white transition-colors duration-300 hover:bg-white/40 hover:text-white"
+              loading={loading}
+              onClick={addToCart}
+            >
+              <> {t('cart.addFeaturedProduct')} </>
+            </button>
+          </div>
+        </div>
+      </div> */}
+        {!isPending ? (
+          <span>{availableForSale ? t('cart.add') : t('cart.out-of-stock')}</span>
+        ) : (
+          <LoadingDots className="bg-white" />
+        )}
+      </>
+    </button>
+  ) : null;
+}

components/label.tsx

@@ -15,7 +15,7 @@ const Label = ({
   return (
     <div className={clsx('@container/label')}>
       <div className="flex flex-col space-y-2">
-        <h3 className="mr-4 line-clamp-2 grow font-serif text-3xl tracking-wider md:text-4xl">
+        <h3 className="mr-4 line-clamp-2 grow font-serif text-[28px] leading-tight tracking-wider md:text-[28px]">
           {title}
         </h3>
         <div className="font-multilingual flex flex-row items-center space-x-2 text-[14px] font-normal">

components/layout/footer.tsx

@@ -38,7 +38,9 @@ export default async function Footer({ cart }: { cart?: Cart }) {
                   <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-japan text-lg font-extralight md:text-xl">
+                    長野県塩尻市奈良井551-1
+                  </p>
                   <p className="font-serif text-xs font-semibold">551-1 Narai, Shiojiri, Nagano</p>
                 </div>
               </div>
@@ -50,14 +52,16 @@ export default async function Footer({ cart }: { cart?: Cart }) {
             <Link href="/" className="transition-opacity duration-150 hover:opacity-90">
               <KanjiLogo className="h-64" />
             </Link>
-            <div className="flex grow flex-col items-end space-y-6">
+            <div className="flex grow flex-col space-y-6 md:items-end">
               <div className="flex flex-col items-start space-y-2">
                 <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-[17px] font-extralight">長野県塩尻市奈良井551-1</p>
-                <p className="font-serif text-lg">551-1 Narai, Shiojiri, Nagano</p>
+                <p className="font-japan text-sm font-extralight md:text-[17px]">
+                  長野県塩尻市奈良井551-1
+                </p>
+                <p className="font-serif text-sm md:text-lg">551-1 Narai, Shiojiri, Nagano</p>
               </div>
               <div className="flex flex-row justify-between space-x-4">
                 <div className="flex flex-row items-center space-x-6">
@@ -69,7 +73,7 @@ export default async function Footer({ cart }: { cart?: Cart }) {
                   </Link>
                 </div>
               </div>
-              <div className="text-right font-serif">
+              <div className="font-serif md:text-right">
                 <div>
                   &copy; {copyrightDate} {copyrightName}
                   {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''}
@@ -87,10 +91,20 @@ export default async function Footer({ cart }: { cart?: Cart }) {
               <div className="flex flex-row justify-between space-x-4">
                 <CartModal cart={cart} />
                 <div className="flex flex-row items-center space-x-6">
-                  <Link href="https://www.instagram.com/suginomoribrewery/" className="group">
+                  <Link
+                    href="https://www.instagram.com/suginomoribrewery/"
+                    className="group"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
                     <InstagramIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
                   </Link>
-                  <Link href="https://www.facebook.com/suginomoribrewery" className="group">
+                  <Link
+                    href="https://www.facebook.com/suginomoribrewery"
+                    className="group"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
                     <FacebookIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
                   </Link>
                 </div>

components/layout/navbar/index.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import CartModal from 'components/cart/modal';
 import OpenCart from 'components/cart/open-cart';
 import LogoNamemark from 'components/icons/namemark';
-import { Cart } from 'lib/shopify/types';
+import { Cart, Product } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -17,12 +17,14 @@ export default function Navbar({
   cart,
   locale,
   compact,
-  showTop = false
+  showTop = false,
+  promotedItem
 }: {
   cart?: Cart;
   locale?: SupportedLocale;
   compact?: boolean;
   showTop?: boolean;
+  promotedItem?: Product;
 }) {
   const { ref, inView } = useInView({
     threshold: 0,
@@ -63,7 +65,7 @@ export default function Navbar({
             <nav className="flex flex-row items-center space-x-4 px-6">
               <Suspense fallback={<OpenCart />}>
                 <div className="flex flex-col-reverse items-center justify-center space-y-2 px-2 md:flex-row md:space-x-6">
-                  <CartModal cart={cart} />
+                  <CartModal cart={cart} promotedItem={promotedItem} />
                   <MenuModal scrolled={!inView} />
                 </div>
               </Suspense>
@@ -91,7 +93,7 @@ export default function Navbar({
           </div>
           <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6 md:space-y-0">
             <Suspense fallback={<OpenCart />}>
-              <CartModal cart={cart} />
+              <CartModal cart={cart} promotedItem={promotedItem} />
             </Suspense>
             <MenuModal scrolled={!inView} />
           </div>

components/product/product-description.tsx

@@ -6,7 +6,7 @@ export function ProductDescription({ product }: { product: Product }) {
     <>
       {product.descriptionHtml ? (
         <Prose
-          className="mb-6 text-lg leading-tight dark:text-white/[60%]"
+          className="mb-6 text-base leading-tight dark:text-white/[60%]"
           html={product.descriptionHtml}
         />
       ) : null}

messages/en.json

@@ -16,16 +16,16 @@
     },
     "shopping-guide": {
       "title": "shopping guide",
-      "terms": "terms of use",
-      "legal": "legal notice",
+      "terms": "terms and conditions",
+      "legal": "disclosures",
       "privacy": "privacy policy",
       "contact": "contact"
     },
     "newsletter": {
       "title": "newsletter",
-      "description": "Subscribe to our newsletter to get access to exclusive information regarding events and pairing dinners.",
-      "placeholder": "Email",
-      "button": "Notify me"
+      "description": "Subscribe to get access to exclusive information regarding events and pairing dinners.",
+      "placeholder": "email",
+      "button": "subscribe"
     },
     "home": {
       "previews": {
@@ -52,25 +52,26 @@
         "concept": {
           "title": "beyond brewing",
           "subtitle": "",
-          "body": "We are driven by our mission to preserve Japanese sake culture for future generations. To achieve this, we reexamine conventional practices of the sake industry and experiment with new endeavors. We are dedicated to exploring sake with a free and creative approach, going beyond brewing and spreading its charm to the world.",
+          "body": "Driven by our mission to preserve Japanese sake culture for future generations, we reexamine conventional practices of the sake industry and experiment with new endeavors. We are dedicated to exploring sake with a free and creative approach, going beyond brewing and spreading its charm to the world.",
           "button": "concept"
         }
       }
     },
     "shops": {
+      "top": "top",
       "title": "shop list",
       "subtitle": "",
       "all": "All shops",
-      "hokkaido": "Hokkaido / North",
-      "kanto": "Kanto",
-      "chubu": "Chubu",
-      "kinki": "Kinki",
-      "chugoku": "Chugoku",
-      "kyushu": "Kyushu"
+      "hokkaido": "Hokkaido / Tohoku region",
+      "kanto": "Kanto region",
+      "chubu": "Chubu region",
+      "kinki": "Kinki region",
+      "chugoku": "Chugoku region",
+      "kyushu": "Kyushu region"
     },
     "footer": {
       "newsletter": {
-        "promo": "Get access to exclusive information regarding events and pairing dinners."
+        "promo": "Get access to exclusive information on events & pairing dinners."
       },
       "menu": {
         "title": "menu",
@@ -145,15 +146,18 @@
         "title": "the ingredients of narai",
         "subtitle": "",
         "water": {
-          "title": "water - the foundation",
+          "title": "water -",
+          "subtitle": "the foundation",
           "body": "While many breweries use a stable water source such as well water, narai uses the fresh mountain water of Kiso Valley, flowing from an altitude of over 1,000m. The water originates from a spring near the watershed of the Shinano River and Kiso River, and is characterized by its clarity and smooth, rounded texture brought about by a rare water hardness of less than 25."
         },
         "rice": {
-          "title": "rice - the core",
+          "title": "rice -",
+          "subtitle": "the core",
           "body": "We use rice that has been carefully cultivated by Farm Ichimaru, a rice farm in Azumino, Nagano. We have a strong commitment to using locally grown rice. Our master brewer personally visits the farm, participates in rice planting, and collaborates with the farmers to carefully select the best rice for brewing narai."
         },
         "koji": {
-          "title": "sake yeast & koji (fermentation) - the constituents",
+          "title": "sake yeast & koji - ",
+          "subtitle": "the constituents",
           "body": "We use Kyokai No.7 sake yeast from Nagano, which is known for its strong fermentability and ability to refine aromas elegantly. For the koji mold that converts rice into sugar, we select a strain that is well-balanced with high enzymatic activity."
         }
       },
@@ -165,12 +169,12 @@
     "bar": {
       "001": {
         "title": {
-          "line001": "sagyobar : a brewery-operated bar & workspace",
-          "line002": "",
-          "line003": ""
+          "line001": "sagyobar:",
+          "line002": "a brewery-operated",
+          "line003": "bar & workspace"
         },
         "para001": "Introducing sagyobar: a place where brewery operations (sagyo) and drinking (bar) come together. We have combined our brewery workspace, where we pack boxes and fulfill orders, with a place to enjoy sake served from our very own suginomori wagon.",
-        "para002": "The renovated warehouse was originally used for storing equipment and business supplies left from our predecessor, the old Suginomori Shuzo. While maintaining its original structure, we have revamped its entrance and installed new systems such as lighting and air conditioning. We utilize “P-boxes” – containers used to transport sake bottles – that can be flexibly arranged to transform the space into standing bar."
+        "para002": "The renovated warehouse was originally used for storing equipment and business supplies left from our predecessor, the old Suginomori Shuzo. While maintaining its original structure, we have revamped its entrance and installed new features such as lighting and air conditioning. We utilize “P-boxes” – containers used to transport sake bottles – that can be flexibly arranged to transform the space into a standing bar."
       },
       "002": "sagyobar is a place where visitors to Narai-juku can enjoy narai, freshly brewed at our brewery just a short walk away. We also plan to host music events, workshops, and other various activities, and turn sagyobar into a new tourist hub in Narai-juku.",
       "003": {
@@ -226,7 +230,7 @@
       },
       "director": {
         "label": "ceo",
-        "value": "Kou Sundberg William"
+        "value": "Kou William Sundberg"
       },
       "since": {
         "label": "Founded",
@@ -253,13 +257,13 @@
       },
       "sundberg": {
         "japanese": "サンドバーグ弘",
-        "english": "Kou Sundberg",
+        "english": "Kou William Sundberg",
         "role": "Chief Executive Officer"
       },
       "masa": {
         "japanese": "小松正則",
         "english": "Masanori Komatsu",
-        "role": "COO"
+        "role": "Business Development"
       },
       "yamano": {
         "japanese": "山野恭稔",

messages/ja.json

@@ -58,6 +58,7 @@
       }
     },
     "shops": {
+      "top": "トップ",
       "title": "取り扱い店",
       "subtitle": "取り扱い店",
       "all": "全店",
@@ -121,7 +122,7 @@
     },
     "about": {
       "001": {
-        "title": "山の水",
+        "title": "山の水、",
         "subtitle": "空に一番近い酒"
       },
       "002": {
@@ -143,15 +144,18 @@
         "title": "自然を紡ぐ",
         "subtitle": " – naraiの素材",
         "water": {
-          "title": "水 – 土台",
+          "title": "水 –",
+          "subtitle": "土台",
           "body": "多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。"
         },
         "rice": {
-          "title": "米 – 幹",
+          "title": "米 –",
+          "subtitle": "幹",
           "body": "長野県安曇野エリアで、日本アルプスの恵みで農家を営む「ファームいちまる」によって、丁寧に育てられた米を使用しています。地産米にこだわり、杜氏自ら農家に通い、田植えなどを行いながら相談し、米を厳選しています。"
         },
         "koji": {
-          "title": "酵母と麹 - 構成要素（発酵）",
+          "title": "酵母と麹 -",
+          "subtitle": "構成要素（発酵）",
           "body": "酵母は発酵力が強く、香りを上品にまとめることができることが特徴だと考えている長野由来の協会第7号を使用しています。米を糖に変える麹菌は、酵素力価の良いバランスの取れたものを採用しています。"
         }
       },
@@ -255,9 +259,9 @@
         "role": "蔵元"
       },
       "masa": {
-        "japanese": "小松正則",
+        "japanese": "小松正宜",
         "english": "Masanori Komatsu",
-        "role": "COO"
+        "role": "事業開発"
       },
       "yamano": {
         "japanese": "山野恭稔",