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">