diff --git a/.env.example b/.env.example index 75213ad42..d6308787f 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,11 @@ -COMPANY_NAME="Vercel Inc." -TWITTER_CREATOR="@vercel" -TWITTER_SITE="https://nextjs.org/commerce" -SITE_NAME="Next.js Commerce" +COMPANY_NAME="Suginomori Brewery" +TWITTER_SITE="https://narai.jp" +SITE_NAME="suginomori brewery" SHOPIFY_REVALIDATION_SECRET= SHOPIFY_STOREFRONT_ACCESS_TOKEN= -SHOPIFY_STORE_DOMAIN= +SHOPIFY_STORE_DOMAIN=shop.narai.jp +NEXT_PUBLIC_GTM_ID= +NEXT_PUBLIC_MAILCHIMP_HOST= +NEXT_PUBLIC_MAILCHIMP_USER_ID= +NEXT_PUBLIC_MAILCHIMP_LIST_ID= + diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx index 20fbbfd69..f34a0c732 100644 --- a/app/[lang]/layout.tsx +++ b/app/[lang]/layout.tsx @@ -1,5 +1,6 @@ import Navbar from 'components/layout/navbar'; import { Locale, i18n } from 'i18n-config'; +import { Noto_Sans_JP } from 'next/font/google'; import localFont from 'next/font/local'; import { ReactNode, Suspense } from 'react'; @@ -55,6 +56,13 @@ const alpina = localFont({ variable: '--font-alpina' }); +const noto = Noto_Sans_JP({ + subsets: ['latin'], + display: 'swap', + weight: ['300', '600'], + variable: '--font-noto' +}); + const mincho = localFont({ src: '../fonts/A-OTF-A1MinchoStd-Bold.otf', display: 'swap', @@ -75,7 +83,7 @@ export default async function RootLayout({ const dictionary = await getDictionary(params?.lang); return ( - +
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx index 1db45240c..45bf0e38f 100644 --- a/app/[lang]/page.tsx +++ b/app/[lang]/page.tsx @@ -5,6 +5,7 @@ import { LanguageControl } from 'components/layout/navbar/language-control'; import type { Locale } from '../../i18n-config'; import LogoNamemark from 'components/icons/namemark'; +import NewsletterSignup from 'components/layout/newsletter-signup'; import { Suspense } from 'react'; export const runtime = 'edge'; @@ -28,6 +29,9 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
+
+ +
diff --git a/components/label.tsx b/components/label.tsx index 3d92faf1d..3fbcf3c33 100644 --- a/components/label.tsx +++ b/components/label.tsx @@ -14,9 +14,9 @@ const Label = ({ }) => { return (
-
-

{title}

-
+
+

{title}

+
{ lang === 'ja' ? 'opacity-100' : 'opacity-50 hover:opacity-70', 'transition-opacity duration-150' )} + scroll={false} > JP @@ -35,6 +36,7 @@ export const LanguageControl = ({ lang }: { lang?: Locale }) => { lang === 'en' ? 'opacity-100' : 'opacity-50 hover:opacity-70', 'transition-opacity duration-150' )} + scroll={false} > EN diff --git a/components/layout/newsletter-signup.tsx b/components/layout/newsletter-signup.tsx new file mode 100644 index 000000000..1592d097d --- /dev/null +++ b/components/layout/newsletter-signup.tsx @@ -0,0 +1,60 @@ +'use client'; +import { useLanguage } from 'app/context/language-context'; +import clsx from 'clsx'; + +export default function NewsletterSignup() { + const { currentDictionary } = useLanguage(); + return ( +
+

{currentDictionary?.newsletter?.title}

+
{currentDictionary?.newsletter?.description}
+
+ + +
+ +
+ +
+
+ ); +} diff --git a/dictionaries/en.json b/dictionaries/en.json index ddb07fdf7..c2f3b7eaf 100644 --- a/dictionaries/en.json +++ b/dictionaries/en.json @@ -8,5 +8,11 @@ "stories": "stories", "company": "company", "contact": "contact" + }, + "newsletter": { + "title": "newsletter", + "description": "Subscribe to our newsletter to receive free shipping on your first order, and access to exclusive information regarding events and pairing dinners.", + "placeholder": "Email", + "button": "Notify me" } } diff --git a/dictionaries/ja.json b/dictionaries/ja.json index d064af1de..3d1205372 100644 --- a/dictionaries/ja.json +++ b/dictionaries/ja.json @@ -8,5 +8,11 @@ "stories": "ストーリー", "company": "会社概要", "contact": "contact" + }, + "newsletter": { + "title": "newsletter", + "description": "ニュースレターにご登録いただくと、初回送料無料クーポン、購読者限定の情報やペアリングディナーなどのご案内をお送りさせていただきます。", + "placeholder": "メールアドレス", + "button": "登録する" } } diff --git a/tailwind.config.js b/tailwind.config.js index 7f686e8df..e4f88d5ae 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,9 +10,9 @@ module.exports = { dark: '#212720' }, fontFamily: { - sans: ['var(--font-alpina)', 'sans-serif'], - title: ['var(--font-cinzel)', 'sans-serif'], - japan: ['var(--font-mincho)', 'sans-serif'] + serif: ['var(--font-alpina)', 'serif'], + title: ['var(--font-cinzel)', 'serif'], + japan: ['var(--font-noto)', 'sans-serif'] }, aspectRatio: { tall: '596 / 845'