diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index c5a150c0c..489250f7c 100644
--- a/components/layout/footer.tsx
+++ b/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>
- <Link className="flex items-center gap-2 md:pt-1" href="/">
- <LogoSquare size="sm" />
- <span className="uppercase">{SITE_NAME}</span>
- </Link>
+ <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>
- <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>
+ <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 pb-12 md:flex-row">
<p>
© {copyrightDate} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
diff --git a/components/layout/newsletter-footer.tsx b/components/layout/newsletter-footer.tsx
new file mode 100644
index 000000000..c2ff42c2f
--- /dev/null
+++ b/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}&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>
+ );
+}
diff --git a/components/layout/newsletter-signup.tsx b/components/layout/newsletter-signup.tsx
index f8312502d..a8e6aa092 100644
--- a/components/layout/newsletter-signup.tsx
+++ b/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'
diff --git a/components/layout/shoplist.tsx b/components/layout/shoplist.tsx
index 2158cc834..f04b24b9f 100644
--- a/components/layout/shoplist.tsx
+++ b/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">
diff --git a/messages/en.json b/messages/en.json
index 9781b93d3..0a471d529 100644
--- a/messages/en.json
+++ b/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."
+ }
}
}
}
diff --git a/messages/ja.json b/messages/ja.json
index 5ac6088ca..d1f23d494 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -26,6 +26,11 @@
"kinki": "近畿",
"chugoku": "中国・四国",
"kyushu": "九州"
+ },
+ "footer": {
+ "newsletter": {
+ "promo": "Get 10% off on your first order. Get discount."
+ }
}
}
}