wip: Add about page

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

@@ -0,0 +1,172 @@
+'use client';
+import clsx from 'clsx';
+import Prose from 'components/prose';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import AboutImage001 from './images/about-image-001.webp';
+import AboutImage002 from './images/about-image-002.webp';
+import AboutImage003 from './images/about-image-003.webp';
+import AboutImage004 from './images/about-image-004.webp';
+import AboutImage005 from './images/about-image-005.webp';
+import AboutImage006 from './images/about-image-006.webp';
+import IrieSignature from './images/irie-signature.webp';
+
+export default function AboutNaraiDetail({ awards }: { awards: string }) {
+  const t = useTranslations('Index');
+
+  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">
+        <h1 className="text-6xl">{t('about.001.title')}</h1>
+        <h1 className="text-6xl">{t('about.001.subtitle')}</h1>
+      </div>
+
+      <div className="max-w-screen-2x relative mx-auto">
+        <Image
+          src={AboutImage001}
+          priority={true}
+          alt="A picture of the exterior of the brewery building."
+          className={clsx('h-full w-full object-cover')}
+        />
+      </div>
+      <div
+        className={clsx(
+          'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
+        )}
+      >
+        <h2 className="text-5xl">{t('about.002.title')}</h2>
+        <p className="text-base">{t('about.002.para001')}</p>
+        <p className="text-base">{t('about.002.para002')}</p>
+      </div>
+
+      <div className="max-w-screen-2x relative mx-auto">
+        <Image
+          src={AboutImage002}
+          priority={true}
+          alt="A picture of the interior of the brewery building."
+          className={clsx('h-full w-full object-cover')}
+        />
+      </div>
+
+      <div
+        className={clsx(
+          'font-multilingual mx-auto flex w-full max-w-3xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
+        )}
+      >
+        <h2 className="text-5xl">{t('about.003.title')}</h2>
+        <p className="text-base">{t('about.003.para001')}</p>
+        <div>
+          <div className="relative flex flex-row justify-end pb-6">
+            <Image
+              src={IrieSignature}
+              alt="Irie Signature"
+              width={600}
+              height={81}
+              className={clsx('w-[280px] object-contain')}
+            />
+          </div>
+          <div className="text-right text-base">{t('about.003.master001')}</div>
+          <div className="text-right text-base">{t('about.003.master002')}</div>
+        </div>
+      </div>
+
+      {!!awards && (
+        <div
+          className={clsx(
+            'font-multilingual mx-auto flex w-full max-w-screen-xl flex-col space-y-12 py-24 text-left font-extralight md:py-48'
+          )}
+        >
+          <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>
+          </div>
+
+          <div className="border-y border-white/20 py-12">
+            <Prose html={awards} />
+          </div>
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          'font-multilingual mx-auto flex w-full max-w-screen-xl flex-col space-y-24 pb-24 text-left font-extralight md:pb-48'
+        )}
+      >
+        <div className="flex flex-col space-y-24">
+          <div className="font-multilingual font-extralight">
+            <h2 className="text-5xl">{t('about.materials.title')}</h2>
+          </div>
+
+          <Image
+            src={AboutImage003}
+            priority={true}
+            alt="A picture of the exterior of the brewery building."
+            className={clsx('h-full w-full object-cover')}
+          />
+
+          <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>
+            </div>
+            <div className="md:w-1/2">
+              <p className="text-xl leading-relaxed">{t('about.materials.water.body')}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col space-y-24">
+          <Image
+            src={AboutImage004}
+            priority={true}
+            alt="A picture of the rice fields and mountains of Nagano."
+            className={clsx('h-full w-full object-cover')}
+          />
+
+          <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>
+            </div>
+            <div className="md:w-1/2">
+              <p className="text-xl leading-relaxed">{t('about.materials.rice.body')}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col space-y-24">
+          <Image
+            src={AboutImage005}
+            priority={true}
+            alt="A picture of the interior of the brewery."
+            className={clsx('h-full w-full object-cover')}
+          />
+
+          <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>
+            </div>
+            <div className="md:w-1/2">
+              <p className="text-xl leading-relaxed">{t('about.materials.koji.body')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mx-auto flex max-w-screen-2xl flex-col space-y-24">
+        <div className="md:pb-24">
+          <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>
+        </div>
+
+        <Image
+          src={AboutImage006}
+          priority={true}
+          alt="A picture of the interior of the brewery."
+          className={clsx('h-full w-full object-cover')}
+        />
+      </div>
+    </div>
+  );
+}

app/[locale]/about/layout.tsx

@@ -0,0 +1,5 @@
+import { Suspense } from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense>{children}</Suspense>;
+}

app/[locale]/about/page.tsx

@@ -0,0 +1,43 @@
+import Footer from 'components/layout/footer';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+
+import Navbar from 'components/layout/navbar';
+import { getCart, getPage } from 'lib/shopify';
+import { cookies } from 'next/headers';
+import { Suspense } from 'react';
+import AboutNaraiDetail from './about-narai-detail';
+
+export const runtime = 'edge';
+const { SITE_NAME } = process.env;
+
+export const metadata = {
+  title: SITE_NAME,
+  description: SITE_NAME,
+  openGraph: {
+    type: 'website'
+  }
+};
+
+export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  const cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
+  const awardsPage = await getPage({ handle: 'awards', language: params?.locale?.toUpperCase() });
+
+  return (
+    <div>
+      <Navbar cart={cart} locale={params?.locale} compact />
+      <div className="pt-24 md:pt-48">
+        <AboutNaraiDetail awards={awardsPage.body} />
+      </div>
+
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}

components/layout/navbar/index.tsx

@@ -28,7 +28,7 @@ export default function Navbar({
 
   return (
     <div ref={ref}>
-      <div className="fixed top-0 z-20 w-full bg-dark/70 backdrop-blur-sm">
+      <div className="fixed top-0 z-20 w-full bg-dark/90 backdrop-blur-sm">
         <Transition
           show={!!ref && !inView}
           enter="transition ease duration-150 transform"

messages/en.json

@@ -101,6 +101,46 @@
       "year": "Year",
       "month": "Month",
       "day": "Day"
+    },
+    "about": {
+      "001": {
+        "title": "water of the mountains,",
+        "subtitle": "sake of the skies"
+      },
+      "002": {
+        "title": "brewed in Narai-juku, Nagano.",
+        "para001": "We brew our sake in one of the highest breweries in Japan, standing at an altitude of 940m and surrounded by a mountainous forest of Japanese cedar trees. In Narai-juku, winter temperatures drop nearly 20°C below zero, causing the mountain water to freeze. After the cold winter, the town gets enveloped in fresh greenery as the air turns more clear and pleasant. In autumn, the mountains are adorned with vibrant foliage. Blessed with an abundance of nature, it is a place to truly experience the changing of seasons.",
+        "para002": "Could we express the beauty of the nature around us through our sake? Most sake breweries use large tanks (3,000L to 8,000L) suitable for mass production, often dividing tasks across a large team. At our brewery, we have scaled down to smaller tanks (900L to 1,800L) so that our single master brewer can meticulously and efficiently manage every step of the brewing process – enabling us to produce high-quality sake through small-lot production. While sake is typically produced in the winter, we have incorporated a year-round production method called “shiki-jozo,” or “four-seasons brewing,” so that we can reflect the changing seasons and beautiful nature of Nagano in our sake."
+      },
+      "003": {
+        "title": "Tasai na Kuro. A Colorful Black. Our Brewing Philosophy.",
+        "para001": "At first glance, the words “colorful” and “black” together may sound contradictory. Yet the concept of “A Colorful Black” is not about one single color, but rather a mixture of colors, meticulously layered together one paint at a time. For each batch of narai, I imagine myself harmonizing the various elements of the sake’s flavor – richness and fullness, dryness and sweetness, aroma – carefully adjusting each element according to the conditions of the mountain water and rice of that particular batch. A sake that is well-balanced, yet feels like a burst of colors as it spreads across your palate… this is the kind of sake I hope to create. We hope you enjoy narai – “water of the mountains, sake of the skies” – a sake that expresses the beautiful nature of Nagano.",
+        "master001": "Master Brewer",
+        "master002": "Masayuki Irie"
+      },
+      "awards": {
+        "title": "awards",
+        "subtitle": ""
+      },
+      "materials": {
+        "title": "materials",
+        "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."
+        },
+        "rice": {
+          "title": "rice - 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",
+          "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."
+        }
+      },
+      "irie": {
+        "title": "Master Brewer: Masayuki Irie",
+        "body": "From Fukuoka. Always interested in the pairing of food with Japanese sake, Irie began working at Fukuchiyo Sake Brewery in Saga Prefecture. As he grew more fascinated with the process of sake mash-making, he moved to Kano Sake Brewery in Ishikawa Prefecture, followed by Honda Shoten in Hyogo Prefecture, where he learned the importance of quality ingredients in sake brewing. At 30, also recognizing the importance of branding in the realm of sake, Irie moved to Matsumoto Sake Brewery in Kyoto where he worked under master brewer Hidehiko Matsumoto for 5 years. Building on these experiences, Irie came to suginomori brewery as master brewer, with a goal to create a unique sake from his own vision."
+      }
     }
   }
 }

messages/ja.json

@@ -101,6 +101,46 @@
       "year": "年",
       "month": "月",
       "day": "日"
+    },
+    "about": {
+      "001": {
+        "title": "山の水",
+        "subtitle": "空に一番近い酒"
+      },
+      "002": {
+        "title": "長野 奈良井宿で醸す",
+        "para001": "私たちは、標高約940mの日本でも有数の空に近い自然豊かな環境で醸造しています。冬は氷点下20度近くまで冷え込み、山の水は凍ります。寒い冬を越えると、新緑に囲まれ、空気が清らかで過ごしやすい季節が続きます。秋には紅葉で山が鮮やかに染まります。日本らしい四季の移ろいを感じられる自然豊かな立地です。",
+        "para002": "この自然豊かな魅力を贅沢に味で表現したい… 通常の酒蔵では大きなチームが分業制で大量生産ができるよう、大型タンク（3,000L〜8,000Lなど）を使用しますが、私たちの蔵では杜氏1人でも丁寧な手作業で、効率的に全工程に関わり、小ロット生産ながらも高品質なSAKE造りができるよう900Lと1,800Lの小型タンクを採用しています。さらに、その時々に感じる季節の移ろいや、自然の美しさを味に反映させるために、年中生産可能な四季醸造方式を取り入れました。"
+      },
+      "003": {
+        "title": "多彩な黒 – 醸造の理念",
+        "para001": "多彩」と「黒」は、一見相反するように聞こえますが、僕の目指す「多彩な黒」は１色ではなく、さまざまな絵の具で丁寧に色を重ね合わせて生まれる色をイメージしています。仕込みごとに山水や米の状態に合わせ、旨味やふくよかさ、辛味や甘味、香り等の要素を経験に基づく手作業で調和させることで、「全体ではまとまりを感じるが、口の中に広がった時に多彩な色を感じる」、そんな1 本を目指して醸造を探究しています。信州の自然を贅沢に表現した「山の水、空に一番近い酒」を是非お楽しみください。",
+        "master001": "Master Brewer",
+        "master002": "Masayuki Irie"
+      },
+      "awards": {
+        "title": "awards",
+        "subtitle": "受賞歴"
+      },
+      "materials": {
+        "title": "自然を紡ぐ – naraiの素材",
+        "water": {
+          "title": "水 – 土台",
+          "body": "多くの酒蔵が水の性質が安定している井戸水を使用しますが、naraiは標高1,000m以上から流れる天然の山水を使用。信濃川と木曽川の分水嶺付近の湧き水であるこの山水は、日本でも有数な「硬度25以下」の透明感と丸みのある滑らかな舌触りが特徴です。"
+        },
+        "rice": {
+          "title": "米 – 幹",
+          "body": "長野県安曇野エリアで、日本アルプスの恵みで農家を営む「ファームいちまる」によって、丁寧に育てられた米を使用しています。地産米にこだわり、杜氏自ら農家に通い、田植えなどを行いながら相談し、米を厳選しています。"
+        },
+        "koji": {
+          "title": "酵母と麹 (発酵) – 構成要素",
+          "body": "酵母は発酵力が強く、香りを上品にまとめることができることが特徴だと考えている長野由来の協会第7号を使用しています。米を糖に変える麹菌は、酵素力価の良いバランスの取れたものを採用しています。"
+        }
+      },
+      "irie": {
+        "title": "杜氏：入江将之",
+        "body": "福岡出身。元々抱いていた料理と日本酒のマッチングに興味を惹かれ、佐賀県の富久千代酒造に就職。その後、酒母造りに関心をもち、石川県の鹿野酒造に、原料にこだわりを持つ兵庫県の本田商店にて経験を積む。30歳の頃、日本酒にはブランディングが重要だと感じ、京都府の松本酒造にて当時、杜氏であった松本日出彦氏に５年間従事。これらの経験を経て、独自の視点でユニークなsakeを創るべく、杉の森酒造の杜氏に就任。"
+      }
     }
   }
 }