wip: Saving work

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

@@ -16,7 +16,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
 
   return (
     <div className="w-full px-6">
-      <div className="font-multilingual flex w-full flex-col items-center space-y-2 pb-24 text-center font-extralight md:pb-48">
+      <div className="font-multilingual flex w-full flex-col items-center space-y-px pb-24 text-center font-extralight md:pb-48">
         <h1 className="text-6xl">{t('about.001.title')}</h1>
         <h1 className="text-6xl">{t('about.001.subtitle')}</h1>
       </div>
@@ -78,7 +78,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         >
           <div className="font-multilingual flex flex-row items-baseline space-x-4">
             <h2 className="text-5xl">{t('about.awards.title')}</h2>
-            <h3 className="text-2xl font-extralight">{t('about.awards.subtitle')}</h3>
+            <h3 className="text-xl font-extralight">{t('about.awards.subtitle')}</h3>
           </div>
 
           <div className="border-y border-white/20 py-12">
@@ -94,7 +94,10 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
       >
         <div className="flex flex-col space-y-24">
           <div className="font-multilingual font-extralight">
-            <h2 className="text-5xl">{t('about.materials.title')}</h2>
+            <div className="flex flex-row items-baseline space-x-3">
+              <h2 className="text-5xl">{t('about.materials.title')}</h2>
+              <h2 className="text-4xl">{t('about.materials.subtitle')}</h2>
+            </div>
           </div>
 
           <Image
@@ -106,10 +109,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
             <div className="md:w-1/2">
-              <h2 className="max-w-sm text-5xl">{t('about.materials.water.title')}</h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.water.title')}
+              </h2>
             </div>
             <div className="md:w-1/2">
-              <p className="text-xl leading-relaxed">{t('about.materials.water.body')}</p>
+              <p className="text-base leading-relaxed">{t('about.materials.water.body')}</p>
             </div>
           </div>
         </div>
@@ -124,10 +129,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
             <div className="md:w-1/2">
-              <h2 className="max-w-sm text-5xl">{t('about.materials.rice.title')}</h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.rice.title')}
+              </h2>
             </div>
             <div className="md:w-1/2">
-              <p className="text-xl leading-relaxed">{t('about.materials.rice.body')}</p>
+              <p className="text-base leading-relaxed">{t('about.materials.rice.body')}</p>
             </div>
           </div>
         </div>
@@ -142,10 +149,12 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
 
           <div className="font-multilingual flex flex-col space-y-12 font-extralight md:flex-row md:space-x-6 md:space-y-0">
             <div className="md:w-1/2">
-              <h2 className="max-w-sm text-5xl">{t('about.materials.koji.title')}</h2>
+              <h2 className="max-w-title text-3xl leading-normal">
+                {t('about.materials.koji.title')}
+              </h2>
             </div>
             <div className="md:w-1/2">
-              <p className="text-xl leading-relaxed">{t('about.materials.koji.body')}</p>
+              <p className="text-base leading-relaxed">{t('about.materials.koji.body')}</p>
             </div>
           </div>
         </div>
@@ -156,8 +165,8 @@ 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-xl">{t('about.irie.title')}</p>
-          <p className="text-xl leading-relaxed">{t('about.irie.body')}</p>
+          <p className="text-lg">{t('about.irie.title')}</p>
+          <p className="text-lg leading-relaxed">{t('about.irie.body')}</p>
         </div>
 
         <Image

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

@@ -29,9 +29,10 @@ export default function SagyobarDetail() {
           'font-multilingual mx-auto flex w-full flex-col space-y-12 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24 md:pb-24'
         )}
       >
-        <div className="md:w-1/2">
-          <h2 className="max-w-sm text-4xl md:text-5xl">{t('bar.001.title')}</h2>
-          <h2 className="max-w-sm text-4xl md:text-5xl">{t('bar.001.subtitle')}</h2>
+        <div className="flex flex-col space-y-4 md:w-1/2">
+          <h2 className="max-w-sm text-4xl md:text-5xl">{t('bar.001.title.line001')}</h2>
+          <h2 className="max-w-sm text-4xl md:text-5xl">{t('bar.001.title.line002')}</h2>
+          <h2 className="max-w-sm text-4xl md:text-5xl">{t('bar.001.title.line003')}</h2>
         </div>
         <div className="flex flex-col space-y-12 md:w-1/2">
           <p className="text-base leading-loose">{t('bar.001.para001')}</p>
@@ -95,13 +96,13 @@ export default function SagyobarDetail() {
               <div className="h-4 w-4 rounded-full bg-white"></div>
               <p className="text-xl">{t('bar.access.title')}</p>
             </div>
-            <p className="text-base leading-relaxed">{t('bar.access.para001')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para002')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para003')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para004')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para005')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para006')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para007')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para001')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para002')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para003')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para004')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para005')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para006')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para007')}</p>
           </div>
         </div>
 
@@ -111,9 +112,9 @@ export default function SagyobarDetail() {
               <div className="h-4 w-4 rounded-full bg-white"></div>
               <p className="text-xl">{t('bar.hours.title')}</p>
             </div>
-            <p className="pb-6 text-base leading-relaxed">{t('bar.hours.para001')}</p>
-            <p className="text-base leading-relaxed">{t('bar.hours.para002')}</p>
-            <p className="text-base leading-relaxed">{t('bar.hours.para003')}</p>
+            <p className="pb-6 text-[15px] leading-relaxed">{t('bar.hours.para001')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.hours.para002')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.hours.para003')}</p>
           </div>
         </div>
 
@@ -123,8 +124,11 @@ export default function SagyobarDetail() {
               <div className="h-4 w-4 rounded-full bg-white"></div>
               <p className="text-xl">{t('bar.menu.title')}</p>
             </div>
-            <p className="pb-6 text-base leading-relaxed">
-              <Link href="/menu" className="transition-opacity duration-150 hover:opacity-90">
+            <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-90"
+              >
                 {t('bar.menu.para001')}
               </Link>
             </p>
@@ -136,8 +140,8 @@ 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-xl">{t('bar.clerk.title')}</p>
-            <p className="text-xl leading-relaxed">{t('bar.clerk.body')}</p>
+            <p className="text-[15px]">{t('bar.clerk.title')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.clerk.body')}</p>
           </div>
 
           <Image

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

@@ -30,7 +30,7 @@ export default function CompanyDetail() {
 
         <div>
           <h3 className="text-2xl">{t('company.subtitle001')}</h3>
-          <ul className="font-multilingual flex flex-col space-y-4 py-4 text-xl font-extralight">
+          <ul className="font-multilingual flex flex-col space-y-4 py-4 text-base font-extralight">
             <li className="border-t border-white/20 py-4">
               <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
                 <div className="w-1/3">{t('company.name.label')}</div>
@@ -67,7 +67,7 @@ export default function CompanyDetail() {
         <div>
           <h3 className="pb-4 text-2xl">{t('company.subtitle002')}</h3>
           <div className="grid grid-cols-1 gap-4 border-t border-white/20 md:grid-cols-3">
-            <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={CompanyImage001}
@@ -78,7 +78,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.irie.japanese')}</div>
               <div className="pb-4">{t('company.irie.english')}</div>
-              <div className="text-base">{t('company.irie.role')}</div>
+              <div className="text-sm">{t('company.irie.role')}</div>
             </div>
 
             <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
@@ -92,7 +92,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.nishikawa.japanese')}</div>
               <div className="pb-4">{t('company.nishikawa.english')}</div>
-              <div className="text-base">{t('company.nishikawa.role')}</div>
+              <div className="text-sm">{t('company.nishikawa.role')}</div>
             </div>
 
             <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
@@ -106,7 +106,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.sundberg.japanese')}</div>
               <div className="pb-4">{t('company.sundberg.english')}</div>
-              <div className="text-base">{t('company.sundberg.role')}</div>
+              <div className="text-sm">{t('company.sundberg.role')}</div>
             </div>
 
             <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
@@ -120,7 +120,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.yamano.japanese')}</div>
               <div className="pb-4">{t('company.yamano.english')}</div>
-              <div className="text-base">{t('company.yamano.role')}</div>
+              <div className="text-sm">{t('company.yamano.role')}</div>
             </div>
 
             <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
@@ -134,7 +134,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.yoshida.japanese')}</div>
               <div className="pb-4">{t('company.yoshida.english')}</div>
-              <div className="text-base">{t('company.yoshida.role')}</div>
+              <div className="text-sm">{t('company.yoshida.role')}</div>
             </div>
 
             <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
@@ -148,7 +148,7 @@ export default function CompanyDetail() {
               </div>
               <div className="pt-2">{t('company.ikegaya.japanese')}</div>
               <div className="pb-4">{t('company.ikegaya.english')}</div>
-              <div className="text-base">{t('company.ikegaya.role')}</div>
+              <div className="text-sm">{t('company.ikegaya.role')}</div>
             </div>
           </div>
         </div>

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

@@ -29,19 +29,19 @@ export default function ConceptDetail() {
       >
         <div className="md:w-1/2">
           <h2 className="max-w-sm pb-12 text-4xl md:text-5xl">{t('concept.title')}</h2>
-          <p className="font-multilingual text-lg font-extralight">
+          <p className="font-multilingual text-base font-extralight">
             {t('concept.para001')} {t('concept.para002')} {t('concept.para003')}
           </p>
           <div className="font-multilingual pt-24 font-extralight">
             <p className="pb-6 text-xl font-normal">{t('concept.subtitle001')}</p>
-            <p className="pb-24 text-lg leading-relaxed">{t('concept.para004')}</p>
+            <p className="pb-24 text-base leading-relaxed">{t('concept.para004')}</p>
             <p className="pb-6 text-xl font-normal">{t('concept.subtitle002')}</p>
-            <p className="pb-4 text-lg leading-relaxed">{t('concept.para005')}</p>
-            <p className="pb-4 text-lg leading-relaxed">
+            <p className="pb-4 text-base leading-relaxed">{t('concept.para005')}</p>
+            <p className="pb-4 text-base leading-relaxed">
               {t('concept.para006')} {t('concept.para007')} {t('concept.para008')}
             </p>
-            <p className="pb-4 text-lg leading-relaxed">{t('concept.para009')}</p>
-            <p className="text-lg leading-relaxed">{t('concept.para010')}</p>
+            <p className="pb-4 text-base leading-relaxed">{t('concept.para009')}</p>
+            <p className="text-base leading-relaxed">{t('concept.para010')}</p>
           </div>
         </div>
         <div className="flex flex-row items-start justify-end md:w-1/2">