wip: Add concept page

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

@@ -0,0 +1,63 @@
+'use client';
+import clsx from 'clsx';
+import Logo from 'components/icons/logo';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import ConceptImage001 from './images/concept-image-001.png';
+import ConceptImage002 from './images/concept-image-002.png';
+
+export default function ConceptDetail() {
+  const t = useTranslations('Index');
+
+  return (
+    <div className="w-full px-6">
+      <div className="max-w-screen-2x relative mx-auto">
+        <Image
+          src={ConceptImage001}
+          priority={true}
+          alt="A picture of the Narai Black bottle resting on a mossy forest floor."
+          className={clsx('h-full w-full object-cover')}
+        />
+      </div>
+
+      <div
+        className={clsx(
+          '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 pb-12 text-4xl md:text-5xl">{t('concept.title')}</h2>
+          <p className="font-multilingual text-lg font-extralight">
+            {t('concept.para001')} {t('concept.para002')} {t('concept.para003')}
+          </p>
+        </div>
+        <div className="flex flex-row items-start justify-end md:w-1/2">
+          <div className="pb-24">
+            <Logo className="h-30 w-48" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mx-auto flex max-w-screen-2xl flex-col space-y-24">
+        <div className="font-multilingual font-extralight md:w-1/2">
+          <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-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">
+            {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>
+        </div>
+
+        <Image
+          src={ConceptImage002}
+          priority={true}
+          alt="A picture of the forest tree tops."
+          className={clsx('h-full w-full object-cover')}
+        />
+      </div>
+    </div>
+  );
+}

app/[locale]/concept/layout.tsx

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

app/[locale]/concept/page.tsx

@@ -0,0 +1,41 @@
+import Footer from 'components/layout/footer';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+
+import Navbar from 'components/layout/navbar';
+import { getCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
+import { Suspense } from 'react';
+import ConceptDetail from './concept-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);
+  }
+
+  return (
+    <div>
+      <Navbar cart={cart} locale={params?.locale} compact />
+      <div className="pt-24 md:pt-48">
+        <ConceptDetail />
+      </div>
+
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}

messages/en.json

@@ -178,6 +178,21 @@
         "title": "Banto (Head Clerk): Masaki Nishikawa",
         "body": "Nishikawa is engaged in manufacturing management, sales management, liquor tax management, general affairs and sales administration. A trustworthy and dependable presence, it is often said that “if you need anything, just ask Nishikawa.” Nishikawa joined Matsumoto Sake Brewery in Kyoto in 2006. After serving as head clerk there for many years, Nishikawa joined suginomori brewery in 2021. He strives to create an environment in which the brewer can fully concentrate on their craft."
       }
+    },
+    "concept": {
+      "title": "beyond brewing",
+      "para001": "At suginomori brewery, our mission is to pass down Japanese sake culture to future generations.",
+      "para002": "To achieve this, we reexamine conventional practices of the sake industry and experiment with new endeavors.",
+      "para003": "We aim to go beyond brewing – exploring sake with a free and creative approach, to help spread the beauty of sake to the world.",
+      "subtitle001": "about suginomori brewery",
+      "para004": "In 2021, we restored Suginomori Shuzo, a sake brewery nestled in the historic town of Narai-juku, established in 1793 but closed down in 2012. After upgrading the facilities and optimizing the space to a third of its original size, it was reborn as suginomori brewery.",
+      "subtitle002": "our approach",
+      "para005": "In the process of revitalization, we found that the number of sake breweries, which used to be close to local life, has been decreasing year by year due to the decline in domestic demand for sake, and that abandoned farmland has been growing along with it. We wanted to take these issues seriously.",
+      "para006": "We listen to what farmers have to say and visit their rice fields.",
+      "para007": "We will realize a stable production environment by introducing a new four-season brewing method that allows year-round brewing.",
+      "para008": "These are small steps, but we believe that these efforts will lead to the future.",
+      "para009": "One of our challenges is to become an “open brewery”. Our brewery is adjacent to an old private house on the same site and the restaurant of BYAKU Narai, an accommodation facility that was partially renovated from a former sake brewery. The brewery is separated from the restaurant by a single large glass partition, and we believe that this will provide an opportunity for visitors to experience the sake brewing process up close, which is usually difficult to see, and to develop an interest in sake.",
+      "para010": "Finally, the brand name “narai” was chosen with the hope that our sake will be a catalyst for people around the world to learn about and visit the charming inn town of Naraijuku. We would be happy if you could stop by suginomori brewery when you come to Narai."
     }
   }
 }

messages/ja.json

@@ -178,6 +178,21 @@
         "title": "番頭：西川正貴",
         "body": "製造管理、販売管理、酒税管理、総務、営業事務に携わる。「何かあれば西川に」が合言葉の頼れる存在。2006年に京都府の松本酒造に入社し、長年番頭を務めたのち、2021年より杉の森酒造に着任。製造者が最も集中できる環境づくりを心掛け、日々業務に取り組んでいる。"
       }
+    },
+    "concept": {
+      "title": "醸造のその先へ",
+      "para001": "私たちには、日本酒文化を未来に継承したいという信念があります。",
+      "para002": "そのためには、これまでの常識をもう一度見つめ直すことや、新しい試みにも挑戦する。",
+      "para003": "醸造のその先へ、自由な発想でsakeを探究し、その魅力を伝えていきます。",
+      "subtitle001": "suginomori brewery (当蔵) について",
+      "para004": "⻑野県に位置する日本最長の宿場町「奈良井宿」の歴史的な街並みの中で、1793年に創業し、2012年頃より休眠状態だった老舗酒蔵「杉の森酒造」を、2021年に製造面積を約1/3のサイズに最適化し、設備を一新する形で「suginomori brewery」として再生しました。",
+      "subtitle002": "私たちが想うこと—",
+      "para005": "再生にあたって、近年では日本酒の国内需要低下に伴い、地域の暮らしに密接だった酒蔵が年々減少し、それに伴い耕作放棄地が増えている課題や、一般的な酒蔵では冬季のみ酒造りを行うため働き手の仕事が安定しないことがわかり、私たちの酒蔵ではこれらの課題を真摯に受け止めたいと考えました。",
+      "para006": "農家さんの言葉に耳を傾け、田んぼに足を運ぶ。",
+      "para007": "年中仕込みが可能な四季醸造方式を新たに導入することで安定した製造環境を実現する。",
+      "para008": "・・・小さなことの積み重ねですが、これらの取り組みが未来に繋がると信じています。",
+      "para009": "またこれらに関連し、私たちが挑戦したことの１つが、「開かれた酒蔵」としての在り方です。弊蔵は、同敷地内の古民家や、旧酒蔵の一部を改修した宿泊施設(BYAKU Narai)のレストランに隣接しています。大きなガラスの仕切り１枚で仕切られており、普段はなかなか見ることの出来ない酒造りを間近で感じられることは、日本酒に興味を持って頂くきっかけになると信じています。",
+      "para010": "最後に、ブランド名の【narai】は、「私たちのsakeをきっかけに、奈良井宿という魅力的な宿場町を世界の人に知ってもらい、足を運んで頂きたい」という想いを込めて名付けました。奈良井に来られる際には、suginomori breweryに立ち寄って頂けたら嬉しいです。"
     }
   }
 }