add favicon, baseline SEO meta & opengraph

app/[lang]/page.tsx

@@ -9,9 +9,11 @@ import Namemark from 'public/assets/images/namemark.png';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
+const { SITE_NAME } = process.env;
 
 export const metadata = {
-  description: 'narai by suginomori brewery.',
+  title: SITE_NAME,
+  description: SITE_NAME,
   openGraph: {
     type: 'website'
   }
@@ -26,11 +28,7 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
         <LanguageControl lang={lang} />
       </div>
       <div className="px-6 pb-12 pt-6 md:pb-48 md:pl-6 md:pt-12">
-        <Image
+        <Image src={Namemark} alt="suginomori brewery" className="max-w-[260px] md:max-w-[600px]" />
-          src={Namemark}
-          alt="narai by suginomori brewery"
-          className="max-w-[260px] md:max-w-[600px]"
-        />
       </div>
       <ThreeItemGrid lang={lang} />
       <Suspense>

components/grid/three-items.tsx

@@ -24,13 +24,13 @@ function ThreeItemGridItem({ item, priority }: { item: Product; priority?: boole
           alt={item.title}
         />
       </Link>
-      <div className="pt-4">
+      <div className="font-multingual max-w-sm pt-4">
         <Label
           title={item.title as string}
           amount={item.priceRange.maxVariantPrice.amount}
           currencyCode={item.priceRange.maxVariantPrice.currencyCode}
         />
-        <div className="line-clamp-4">{item?.description}</div>
+        <div className="line-clamp-4 pt-2">{item?.description}</div>
       </div>
     </div>
   );
@@ -52,8 +52,8 @@ export async function ThreeItemGrid({ lang }: { lang: Locale }) {
   return (
     <section
       className={clsx(
-        'mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6',
+        'mx-auto grid max-w-screen-2xl gap-6 px-4 pb-4 md:grid-cols-6',
-        'md:grid-rows-3'
+        'grid-rows-3 md:grid-rows-1'
       )}
     >
       <ThreeItemGridItem item={firstProduct} priority={true} />

components/layout/menu/modal.tsx

@@ -45,7 +45,7 @@ export function MenuModal() {
           </Transition.Child>
           <Transition.Child as={Fragment}>
             <div className="fixed right-5 top-6 z-40 px-2 py-1 md:top-11">
-              <div className="flex flex-row space-x-4">
+              <div className="flex flex-row space-x-6">
                 <LanguageControl lang={currentLanguage} />
 
                 <button ref={closeButtonRef} onClick={close} className="">

components/layout/navbar/language-control.tsx

@@ -20,8 +20,8 @@ export const LanguageControl = ({ lang }: { lang?: Locale }) => {
         <Link
           href={redirectedPathName('ja')}
           className={clsx(
-            lang === 'ja' ? 'opacity-100' : 'opacity-70',
+            lang === 'ja' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
-            'transition-opacity duration-150 hover:opacity-50'
+            'transition-opacity duration-150'
           )}
         >
           JP
@@ -32,8 +32,8 @@ export const LanguageControl = ({ lang }: { lang?: Locale }) => {
         <Link
           href={redirectedPathName('en')}
           className={clsx(
-            lang === 'en' ? 'opacity-100' : 'opacity-70',
+            lang === 'en' ? 'opacity-100' : 'opacity-50 hover:opacity-70',
-            'transition-opacity duration-150 hover:opacity-50'
+            'transition-opacity duration-150'
           )}
         >
           EN

tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
         japan: ['var(--font-mincho)', 'sans-serif']
       },
       aspectRatio: {
-        bottle: '0.91'
+        bottle: '1.11'
       },
       keyframes: {
         fadeIn: {