wip: Saving work

components/layout/footer.tsx

@@ -1,9 +1,5 @@
-import Link from 'next/link';
-
-import FooterMenu from 'components/layout/footer-menu';
-import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
-import { Suspense } from 'react';
+import NewsletterFooter from './newsletter-footer';
 
 const { COMPANY_NAME, SITE_NAME } = process.env;
 
@@ -16,30 +12,13 @@ export default async function Footer() {
 
   return (
     <footer className="text-sm">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-white/20 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 xl:px-0">
+      <div className="mx-auto flex w-full max-w-screen-2xl flex-col gap-6 border-t border-white/20 px-6 py-12 text-sm md:flex-row md:gap-12">
+        <div className="flex flex-row justify-between">
+          <NewsletterFooter />
+        </div>
+      </div>
       <div>
-          <Link className="flex items-center gap-2 md:pt-1" href="/">
-            <LogoSquare size="sm" />
-            <span className="uppercase">{SITE_NAME}</span>
-          </Link>
-        </div>
-        <Suspense
-          fallback={
-            <div className="flex h-[188px] w-[200px] flex-col gap-2">
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-              <div className={skeleton} />
-            </div>
-          }
-        >
-          <FooterMenu menu={menu} />
-        </Suspense>
-      </div>
-      <div className="border-t border-white/20 py-6 text-sm dark:border-neutral-700">
-        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 pb-12 md:flex-row">
           <p>
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.

components/layout/newsletter-footer.tsx

@@ -0,0 +1,63 @@
+'use client';
+import clsx from 'clsx';
+import { useTranslations } from 'next-intl';
+
+export default function NewsletterSignup() {
+  const t = useTranslations('Index');
+
+  return (
+    <div>
+      <div className="flex flex-row items-baseline justify-between space-x-6">
+        <h3 className="grow font-serif text-2xl tracking-wider">{t('newsletter.title')}</h3>
+        <div className="font-multilingual">{t('footer.newsletter.promo')}</div>
+      </div>
+      <form
+        className="max-w-xl space-x-px md:flex"
+        action={`${process?.env?.NEXT_PUBLIC_MAILCHIMP_HOST}/subscribe/post?u=${process?.env?.NEXT_PUBLIC_MAILCHIMP_USER_ID}&amp;id=${process?.env?.NEXT_PUBLIC_MAILCHIMP_LIST_ID}`}
+        method="post"
+        name="mc-embedded-subscribe-form"
+        target="_blank"
+      >
+        <label htmlFor="email-address" className="sr-only">
+          {t('newsletter.placeholder')}
+        </label>
+        <input
+          type="email"
+          name="email-address"
+          id="email-address"
+          autoComplete="email"
+          required
+          className={clsx(
+            'w-full min-w-0 appearance-none',
+            'bg-white outline-none',
+            'px-4 py-2 focus:outline-none',
+            'focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0',
+            'text-gray-900 placeholder-gray-400'
+          )}
+          placeholder={t('newsletter.placeholder')}
+        />
+        <div className="mt-3 rounded-md sm:ml-3 sm:mt-0 sm:flex-shrink-0">
+          <button
+            type="submit"
+            className={clsx(
+              'px-4 py-2',
+              'transition-colors duration-150',
+              'flex w-full items-center justify-center',
+              'border border-white/30 hover:border-white',
+              'focus:border-emerald-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0'
+            )}
+          >
+            {t('newsletter.button')}
+          </button>
+        </div>
+        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
+          <input
+            type="text"
+            name={`b_${process?.env?.NEXT_PUBLIC_MAILCHIMP_USER_ID}_${process?.env?.NEXT_PUBLIC_MAILCHIMP_LIST_ID}`}
+            defaultValue=""
+          />
+        </div>
+      </form>
+    </div>
+  );
+}

components/layout/newsletter-signup.tsx

@@ -27,7 +27,7 @@ export default function NewsletterSignup() {
           required
           className={clsx(
             'w-full min-w-0 appearance-none',
-            'outline-none',
+            'bg-white outline-none',
             'px-4 py-2 focus:outline-none',
             'focus:ring-2 focus:ring-inset focus:ring-emerald-300 focus:ring-offset-0',
             'text-gray-900 placeholder-gray-400'

components/layout/shoplist.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 export default function Shoplist() {
   const t = useTranslations('Index');
   return (
-    <div className="mx-auto max-w-screen-2xl space-y-4 px-2" id="shops">
+    <div className="mx-auto max-w-screen-2xl space-y-4 px-6" id="shops">
       <div className="flex w-full flex-row items-baseline space-x-12 pb-6">
         <h2 className="font-serif text-6xl tracking-wider">shop list</h2>
         <h3 className="font-multilingual font-serif text-2xl tracking-wider">

messages/en.json

@@ -26,6 +26,11 @@
       "kinki": "Kinki",
       "chugoku": "Chugoku",
       "kyushu": "Kyushu"
+    },
+    "footer": {
+      "newsletter": {
+        "promo": "Get 10% off on your first order. Get discount."
+      }
     }
   }
 }

messages/ja.json

@@ -26,6 +26,11 @@
       "kinki": "近畿",
       "chugoku": "中国・四国",
       "kyushu": "九州"
+    },
+    "footer": {
+      "newsletter": {
+        "promo": "Get 10% off on your first order. Get discount."
+      }
     }
   }
 }