From 5f52d40bdc189bd5d93228b3cd852540b41c1be4 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Sat, 19 Aug 2023 16:16:22 +0900
Subject: [PATCH] wip: Footer cleanup

---
 app/[locale]/page.tsx                     |  6 +--
 components/layout/about-narai-preview.tsx |  2 +-
 components/layout/footer.tsx              | 48 +++++++++++++++++++----
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 1a21445bd..9e381b16f 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,4 +1,3 @@
-import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
@@ -78,10 +77,7 @@ export default async function HomePage({
         <AboutNaraiPreview />
       </div>
       <Suspense>
-        <Carousel />
-        <Suspense>
-          <Footer cart={cart} />
-        </Suspense>
+        <Footer cart={cart} />
       </Suspense>
     </div>
   );
diff --git a/components/layout/about-narai-preview.tsx b/components/layout/about-narai-preview.tsx
index 6d8223a88..e60bf88bf 100644
--- a/components/layout/about-narai-preview.tsx
+++ b/components/layout/about-narai-preview.tsx
@@ -5,7 +5,7 @@ export default function AboutNaraiPreview() {
   const t = useTranslations('Index');
 
   return (
-    <div className="flex flex-row space-x-2 p-24">
+    <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-2 md:space-y-0 md:p-24">
       <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
         <div className="text-5xl">{t('home.previews.about-narai.title')}</div>
         <div className="text-5xl">{t('home.previews.about-narai.subtitle')}</div>
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index e8d6c7aea..0819292ea 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -25,11 +25,11 @@ export default async function Footer({ cart }: { cart?: Cart }) {
           'text-sm md:flex-row md:gap-12'
         )}
       >
-        <div className="w-full md:w-1/2">
+        <div className="w-full md:w-[60%]">
           <div className="flex flex-col space-y-24">
             <NewsletterFooter />
-            <div className="flex flex-row items-end space-x-12">
-              <KanjiLogo className="w-20" />
+            <div className="hidden flex-row items-end space-x-12 pt-24 md:flex">
+              <KanjiLogo className="h-64" />
               <div className="flex flex-row items-end space-x-6">
                 <div className="flex flex-col items-start space-y-2">
                   <p className="font-japan text-3xl font-extralight">杉の森酒造</p>
@@ -43,10 +43,43 @@ export default async function Footer({ cart }: { cart?: Cart }) {
             </div>
           </div>
         </div>
-        <div className="hidden md:block md:w-1/3">
-          <div className="flex h-full flex-col items-end justify-between space-y-2">
-            <FooterMenu />
-            <div className="flex flex-col space-y-2">
+        <div className="w-full md:w-[40%]">
+          <div className="flex w-full flex-row items-end space-x-12 pt-24 md:hidden">
+            <KanjiLogo className="h-64" />
+            <div className="flex grow flex-col items-end space-y-6">
+              <div className="flex flex-col items-start space-y-2">
+                <p className="font-japan text-3xl font-extralight">杉の森酒造</p>
+                <p className="font-serif text-lg">suginomori brewery</p>
+              </div>
+              <div className="flex flex-col items-start space-y-2">
+                <p className="font-japan text-xl font-extralight">長野県塩尻市奈良井551-1</p>
+                <p className="font-serif text-lg">551-1 Narai, Shiojiri, Nagano</p>
+              </div>
+              <div className="flex flex-row justify-between space-x-4">
+                <div className="flex flex-row items-center space-x-6">
+                  <Link href="https://www.instagram.com/suginomoribrewery/" className="group">
+                    <InstagramIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
+                  </Link>
+                  <Link href="https://www.facebook.com/suginomoribrewery" className="group">
+                    <FacebookIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
+                  </Link>
+                </div>
+              </div>
+              <div className="text-right font-serif">
+                <div>
+                  &copy; {copyrightDate} {copyrightName}
+                  {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="hidden h-full flex-col items-end justify-between space-y-2 md:flex">
+            <div className="">
+              <FooterMenu />
+            </div>
+
+            <div className="flex flex-col space-y-2 pt-24">
               <div className="flex flex-row justify-between space-x-4">
                 <CartModal cart={cart} />
                 <div className="flex flex-row items-center space-x-6">
@@ -63,7 +96,6 @@ export default async function Footer({ cart }: { cart?: Cart }) {
                   &copy; {copyrightDate} {copyrightName}
                   {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''}
                 </div>
-                <div>All rights reserved.</div>
               </div>
             </div>
           </div>