wip: Add Sagyobar pags

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

@@ -35,8 +35,8 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         )}
       >
         <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>
+        <p className="text-base leading-loose">{t('about.002.para001')}</p>
+        <p className="text-base leading-loose">{t('about.002.para002')}</p>
       </div>
 
       <div className="max-w-screen-2x relative mx-auto">
@@ -54,7 +54,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         )}
       >
         <h2 className="text-5xl">{t('about.003.title')}</h2>
-        <p className="text-base">{t('about.003.para001')}</p>
+        <p className="text-base leading-loose">{t('about.003.para001')}</p>
         <div>
           <div className="relative flex flex-row justify-end pb-6">
             <Image
@@ -163,7 +163,7 @@ export default function AboutNaraiDetail({ awards }: { awards: string }) {
         <Image
           src={AboutImage006}
           priority={true}
-          alt="A picture of the interior of the brewery."
+          alt="A picture of Irie-san."
           className={clsx('h-full w-full object-cover')}
         />
       </div>

app/[locale]/bar/layout.tsx

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

app/[locale]/bar/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 SagyobarDetail from './sagyobar-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">
+        <SagyobarDetail />
+      </div>
+
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+'use client';
+import clsx from 'clsx';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import Link from 'next/link';
+import BarImage001 from './images/bar-image-001.jpg';
+import BarImage002 from './images/bar-image-002.jpg';
+import BarImage003 from './images/bar-image-003.jpg';
+import BarImage004 from './images/bar-image-004.jpg';
+import BarImage005 from './images/bar-image-005.jpg';
+import BarImage006 from './images/bar-image-006.jpg';
+
+export default function SagyobarDetail() {
+  const t = useTranslations('Index');
+
+  return (
+    <div className="w-full px-6">
+      <div className="max-w-screen-2x relative mx-auto">
+        <Image
+          src={BarImage001}
+          priority={true}
+          alt="A picture of the exterior of the bar building."
+          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 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>
+        <div className="flex flex-col space-y-12 md:w-1/2">
+          <p className="text-base leading-loose">{t('bar.001.para001')}</p>
+          <p className="text-base leading-loose">{t('bar.001.para002')}</p>
+        </div>
+      </div>
+
+      <div className="max-w-screen-2x relative mx-auto flex flex-col space-y-24">
+        <Image
+          src={BarImage002}
+          priority={true}
+          alt="A picture of the bar building."
+          className={clsx('h-full w-full object-cover')}
+        />
+        <Image
+          src={BarImage003}
+          priority={true}
+          alt="A picture of the exterior of the bar building."
+          className={clsx('h-full w-full object-cover')}
+        />
+        <Image
+          src={BarImage004}
+          priority={true}
+          alt="A picture of the interior of the bar."
+          className={clsx('h-full w-full object-cover')}
+        />
+
+        <div className="flex-row justify-end md:flex">
+          <div className="md:md:w-1/2">
+            <p className="text-base leading-loose">{t('bar.002')}</p>
+          </div>
+        </div>
+
+        <div className="flex flex-col space-y-12 md:space-y-24">
+          <Image
+            src={BarImage005}
+            priority={true}
+            alt="A picture of the interior of the bar."
+            className={clsx('h-full w-full object-cover')}
+          />
+
+          <div
+            className={clsx(
+              'font-multilingual mx-auto flex w-full flex-col space-y-6 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24'
+            )}
+          >
+            <div className="md:w-1/2">
+              <h2 className="text-5xl">{t('bar.003.title')}</h2>
+            </div>
+            <div className="flex flex-col space-y-12 md:w-1/2">
+              <p className="text-base leading-loose">{t('bar.003.body')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mx-auto flex max-w-screen-2xl flex-col space-y-6">
+        <div className="border-t border-white/20">
+          <div className="font-multilingual py-12 font-extralight">
+            <div className="flex flex-row items-baseline space-x-2 pb-12">
+              <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>
+          </div>
+        </div>
+
+        <div className="border-t border-white/20">
+          <div className="font-multilingual py-12 font-extralight">
+            <div className="flex flex-row items-baseline space-x-2 pb-12">
+              <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>
+          </div>
+        </div>
+
+        <div className="border-t border-white/20">
+          <div className="font-multilingual py-12 font-extralight">
+            <div className="flex flex-row items-baseline space-x-2 pb-12">
+              <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">
+                {t('bar.menu.para001')}
+              </Link>
+            </p>
+          </div>
+        </div>
+
+        <div className="mx-auto flex max-w-screen-2xl flex-col space-y-24">
+          <div className="md:pb-12">
+            <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>
+          </div>
+
+          <Image
+            src={BarImage006}
+            priority={true}
+            alt="A picture of the interior of the bar."
+            className={clsx('h-full w-full object-cover')}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/error.tsx

@@ -2,14 +2,13 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg p-8 font-serif text-xl text-white md:px-12 md:py-24">
       <h2 className="text-xl font-bold">Oh no!</h2>
       <p className="my-2">
-        There was an issue with our storefront. This could be a temporary issue, please try your
-        action again.
+        There was an issue with our store. This could be a temporary issue, please try again.
       </p>
       <button
-        className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        className="mx-auto mt-4 flex w-full items-center justify-center bg-white/10 p-4 tracking-wide text-white transition-opacity duration-150 hover:opacity-90"
         onClick={() => reset()}
       >
         Try Again

components/product/age-gate-form.tsx

@@ -84,7 +84,7 @@ const AgeGateForm: FC<AgeGateFormProps> = ({ checkoutUrl, didCancel }) => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0 bg-dark bg-opacity-80 backdrop-blur-sm transition-opacity" />
+              <Dialog.Overlay className="fixed inset-0 bg-dark/80 backdrop-blur-sm transition-opacity" />
             </Transition.Child>
 
             {/* This element is to trick the browser into centering the modal contents. */}

messages/en.json

@@ -141,6 +141,43 @@
         "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."
       }
+    },
+    "bar": {
+      "001": {
+        "title": "sagyobar : a brewery-operated bar & workspace",
+        "subtitle": "",
+        "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."
+      },
+      "002": "sagyobar is a place where visitors to Narai-juku can enjoy narai, freshly brewed at our brewery just a short walk away. We also plan to host music events, workshops, and other various activities, and turn sagyobar into a new tourist hub in Narai-juku.",
+      "003": {
+        "title": "suginomori wagon",
+        "body": "sagyobar is also the home of “suginomori wagon” – our very own vehicle equipped with a sake server, offering the narai tasting set, local specialty menus, and original merchandise of suginomori brewery. suginomori wagon also serves as a mobile sales vehicle, allowing us to bring narai to various events within Nagano and all over the country."
+      },
+      "access": {
+        "title": "access",
+        "para001": "755-1 Narai, Shiojiri, Nagano 399-6303",
+        "para002": "By train",
+        "para003": "4 min walk from Narai Station (JR Chuo Main Line)",
+        "para004": "By car",
+        "para005": "35 min from Shiojiri IC / 40 min from Ina IC",
+        "para006": "*Please use the parking lots at “Michi no eki Narai Kiso-no-ohashi” or “Mizubeno Furusato Fureai Koen”",
+        "para007": "*Please kindly avoid parking on vacant property or the street"
+      },
+      "hours": {
+        "title": "operating hours",
+        "para001": "We generally operate on an irregular schedule, but are OPEN every Friday and Saturday from 1PM to 5PM.",
+        "para002": "*For other dates, please feel free to approach our staff if you see them.",
+        "para003": "*We do not sell alcoholic beverages to drivers or individuals under the legal drinking age."
+      },
+      "menu": {
+        "title": "menu",
+        "para001": "Please see the menu from here."
+      },
+      "clerk": {
+        "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."
+      }
     }
   }
 }

messages/ja.json

@@ -141,6 +141,43 @@
         "title": "杜氏：入江将之",
         "body": "福岡出身。元々抱いていた料理と日本酒のマッチングに興味を惹かれ、佐賀県の富久千代酒造に就職。その後、酒母造りに関心をもち、石川県の鹿野酒造に、原料にこだわりを持つ兵庫県の本田商店にて経験を積む。30歳の頃、日本酒にはブランディングが重要だと感じ、京都府の松本酒造にて当時、杜氏であった松本日出彦氏に５年間従事。これらの経験を経て、独自の視点でユニークなsakeを創るべく、杉の森酒造の杜氏に就任。"
       }
+    },
+    "bar": {
+      "001": {
+        "title": "酒蔵直営の角打ち&作業場",
+        "subtitle": "sagyobar",
+        "para001": "ここは、ボトルの箱詰めや出荷などの酒蔵作業 (sagyo) と、日本酒移動販売車「suginomori wagon」から提供されるsakeを楽しむこともできる場(bar)が融合した、弊蔵の直営店です。",
+        "para002": "リノベーションした倉庫は、元々は先代の頃の杉の森酒蔵の機材や業務備品の保管用の場所として利用されていました。倉庫の建築はそのままに、入り口部分のゲートを刷新し、照明や空調等の設備を新設。什器は酒蔵の作業でも使用する酒瓶を運ぶための外装容器「P箱」を活用しています。このP箱を自在にレイアウトすることで、角打ちのようなスペースとしても活用できます。"
+      },
+      "002": "奈良井宿へ観光で来られたお客様が、隣接する酒蔵で醸造したてのnaraiをお楽しみいただけるだけではなく、音楽イベントや、ワークショップなども企画中。さまざまな利用シーンを演出することで、奈良井宿の新たな観光スポットの１つになることを目指していきます。",
+      "003": {
+        "title": "suginomori wagon",
+        "body": "sagyobarでは、日本酒サーバーが搭載された移動販売車「suginomori wagon」を収容しており、naraiの飲み比べセットや、地域限定メニュー、オリジナルグッズなどの販売をしています。sagyobarでの活用はもちろんのこと、移動可能な販売空間として、長野県内や、全国のさまざまなイベントに出店しnaraiをお届けします。"
+      },
+      "access": {
+        "title": "アクセス",
+        "para001": "住所",
+        "para002": "〒399-6303 長野県奈良井755-1",
+        "para003": "電車でお越しの方",
+        "para004": "JR中央本線 奈良井駅より徒歩4分",
+        "para005": "お車でお越しの方",
+        "para006": "塩尻I.Cより35分 / 伊那I.Cより40分",
+        "para007": ""
+      },
+      "hours": {
+        "title": "営業時間",
+        "para001": "基本的には不定期営業ですが、毎週金曜と土曜 午後1時〜午後5時まではOPEN",
+        "para002": "※その他日にちについては、スタッフを見かけたらお声がけください。",
+        "para003": "※ドライバーの方、未成年の方にはアルコール飲料の販売は行なっておりません。"
+      },
+      "menu": {
+        "title": "メニュー",
+        "para001": "メニューはこちら（※PDFリンク）からご覧ください。"
+      },
+      "clerk": {
+        "title": "番頭：西川正貴",
+        "body": "製造管理、販売管理、酒税管理、総務、営業事務に携わる。「何かあれば西川に」が合言葉の頼れる存在。2006年に京都府の松本酒造に入社し、長年番頭を務めたのち、2021年より杉の森酒造に着任。製造者が最も集中できる環境づくりを心掛け、日々業務に取り組んでいる。"
+      }
     }
   }
 }