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-lg">{t('about.irie.title')}</p>
-          <p className="text-xl leading-relaxed">{t('about.irie.body')}</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">
+        <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')}</h2>
+          <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.subtitle')}</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-[15px] leading-relaxed">{t('bar.access.para001')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para002')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para002')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para003')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para003')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para004')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para004')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para005')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.access.para005')}</p>
-            <p className="text-base leading-relaxed">{t('bar.access.para006')}</p>
+            <p className="text-[15px] 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.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="pb-6 text-[15px] leading-relaxed">{t('bar.hours.para001')}</p>
-            <p className="text-base leading-relaxed">{t('bar.hours.para002')}</p>
+            <p className="text-[15px] leading-relaxed">{t('bar.hours.para002')}</p>
-            <p className="text-base leading-relaxed">{t('bar.hours.para003')}</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">
+            <p className="pb-6 text-[15px] leading-relaxed">
-              <Link href="/menu" className="transition-opacity duration-150 hover:opacity-90">
+              <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-[15px]">{t('bar.clerk.title')}</p>
-            <p className="text-xl leading-relaxed">{t('bar.clerk.body')}</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-base leading-relaxed">{t('concept.para005')}</p>
-            <p className="pb-4 text-lg leading-relaxed">
+            <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="pb-4 text-base leading-relaxed">{t('concept.para009')}</p>
-            <p className="text-lg leading-relaxed">{t('concept.para010')}</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">

components/layout/sagyobar-preview.tsx

@@ -8,8 +8,9 @@ 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="max-w-sm text-5xl">{t('home.previews.bar.title')}</div>
+        <div className="max-w-sm text-5xl">{t('home.previews.bar.title.line001')}</div>
-        <div className="max-w-sm text-5xl">{t('home.previews.bar.subtitle')}</div>
+        <div className="max-w-sm text-5xl">{t('home.previews.bar.title.line002')}</div>
+        <div className="max-w-sm text-5xl">{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>{t('home.previews.bar.body')}</div>

components/prose.tsx

@@ -11,7 +11,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
     <div
       className={clsx(
         'prose text-lg leading-7',
-        'font-multilingual font-extralight text-white',
+        'font-multilingual text-[15px] font-extralight text-white',
         'prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-white',
         'prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg',
         'prose-a:text-white/80 prose-a:underline hover:prose-a:text-white',
@@ -20,6 +20,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
         'prose-tr:border-subtle',
         'prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6',
         'dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+        '!tracking-normal',
         className
       )}
       dangerouslySetInnerHTML={{ __html: html as string }}

messages/en.json

@@ -41,8 +41,11 @@
           "button": "about narai"
         },
         "bar": {
-          "title": "sagyobar : a brewery-operated bar & workspace",
+          "title": {
-          "subtitle": "",
+            "line001": "sagyobar : a brewery-operated bar & workspace",
+            "line002": "",
+            "line003": ""
+          },
           "body": "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. It is a renovated warehouse located a one-minute walk from the brewery, just across the railway tracks.",
           "button": "about sagyobar"
         },
@@ -127,6 +130,7 @@
       },
       "materials": {
         "title": "materials",
+        "subtitle": "",
         "water": {
           "title": "water - the foundation",
           "body": "While most breweries use well water with stable properties, narai uses natural mountain water flowing from an altitude of over 1,000 meters. This mountain water, which springs near the divide between the Shinano and Kiso Rivers, is one of the clearest in Japan with a hardness of less than 25 and a round, smooth texture."
@@ -147,8 +151,11 @@
     },
     "bar": {
       "001": {
-        "title": "sagyobar : a brewery-operated bar & workspace",
+        "title": {
-        "subtitle": "",
+          "line001": "sagyobar : a brewery-operated bar & workspace",
+          "line002": "",
+          "line003": ""
+        },
         "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 the old Suginomori Shuzo, the precursor to suginomori brewery that was established in 1793. 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."
       },

messages/ja.json

@@ -5,13 +5,13 @@
     },
     "menu": {
       "title": "menu",
-      "products": "商品",
+      "products": "products",
-      "shops": "取り扱い店",
+      "shops": "shop list",
-      "about": "naraiについて",
+      "about": "about narai",
       "bar": "sagyobar",
-      "concept": "コンセプト",
+      "concept": "concept",
-      "stories": "ストーリー",
+      "stories": "stories",
-      "company": "会社概要",
+      "company": "company",
       "contact": "contact"
     },
     "shopping-guide": {
@@ -41,8 +41,11 @@
           "button": "naraiについて"
         },
         "bar": {
-          "title": "酒蔵直営の角打ち&作業場",
+          "title": {
-          "subtitle": "sagyobar",
+            "line001": "酒蔵直営の",
+            "line002": "角打ち&作業場",
+            "line003": "sagyobar"
+          },
           "body": "ここは、ボトルの箱詰めや出荷などの酒蔵作業 (sagyo) と、日本酒移動販売車「suginomori wagon」から提供されるSAKEを楽しむこともできる場(bar)が融合した、弊蔵の直営店です。酒蔵から徒歩１分。線路を挟み向かいの倉庫をリノベーションしました。",
           "button": "sagyobarについて"
         },
@@ -126,7 +129,8 @@
         "subtitle": "受賞歴"
       },
       "materials": {
-        "title": "自然を紡ぐ – naraiの素材",
+        "title": "自然を紡ぐ",
+        "subtitle": " – naraiの素材",
         "water": {
           "title": "水 – 土台",
           "body": "多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。"
@@ -136,7 +140,7 @@
           "body": "長野県安曇野エリアで、日本アルプスの恵みで農家を営む「ファームいちまる」によって、丁寧に育てられた米を使用しています。地産米にこだわり、杜氏自ら農家に通い、田植えなどを行いながら相談し、米を厳選しています。"
         },
         "koji": {
-          "title": "酵母と麹 (発酵) – 構成要素",
+          "title": "酵母と麹 - 構成要素（発酵）",
           "body": "酵母は発酵力が強く、香りを上品にまとめることができることが特徴だと考えている長野由来の協会第7号を使用しています。米を糖に変える麹菌は、酵素力価の良いバランスの取れたものを採用しています。"
         }
       },
@@ -147,8 +151,11 @@
     },
     "bar": {
       "001": {
-        "title": "酒蔵直営の角打ち&作業場",
+        "title": {
-        "subtitle": "sagyobar",
+          "line001": "酒蔵直営の",
+          "line002": "角打ち&作業場",
+          "line003": "sagyobar"
+        },
         "para001": "ここは、ボトルの箱詰めや出荷などの酒蔵作業 (sagyo) と、日本酒移動販売車「suginomori wagon」から提供されるsakeを楽しむこともできる場(bar)が融合した、弊蔵の直営店です。",
         "para002": "リノベーションした倉庫は、元々は先代の頃の杉の森酒蔵の機材や業務備品の保管用の場所として利用されていました。倉庫の建築はそのままに、入り口部分のゲートを刷新し、照明や空調等の設備を新設。什器は酒蔵の作業でも使用する酒瓶を運ぶための外装容器「P箱」を活用しています。このP箱を自在にレイアウトすることで、角打ちのようなスペースとしても活用できます。"
       },
@@ -214,7 +221,7 @@
       },
       "address": {
         "label": "所在地",
-        "value": "〒399-6303長野県塩尻市奈良井551-1"
+        "value": "〒399-6303　長野県塩尻市奈良井551-1"
       },
       "telephone": {
         "label": "電話番号",

tailwind.config.js

@@ -17,10 +17,18 @@ module.exports = {
         title: ['var(--font-cinzel)', 'serif'],
         japan: ['var(--font-noto)', 'serif']
       },
+      fontSize: {
+        '6xl': '65px',
+        '5xl': '45px',
+        '3xs': '.5rem'
+      },
       aspectRatio: {
         tall: '596 / 845',
         video: '1792 / 750'
       },
+      maxWidth: {
+        title: '281px'
+      },
       keyframes: {
         fadeIn: {
           from: { opacity: 0 },