From 4b2496dd58743295c0460aadea8fa8c309e7ae1b Mon Sep 17 00:00:00 2001
From: karl <karl@linconson.com>
Date: Fri, 28 Mar 2025 15:09:02 -0400
Subject: [PATCH] add footer

---
 app/layout.tsx               |   2 +
 components/layout/footer.tsx | 259 ++++++++++++++++++++++++++---------
 2 files changed, 199 insertions(+), 62 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 74fef2e3a..247f80521 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import { CartProvider } from 'components/cart/cart-context'
 import { Navbar } from 'components/layout/navbar'
 import NavbarV2 from 'components/layout/navbar/NavbarV2'
+import Footer from '@/components/layout/footer'
 import { WelcomeToast } from 'components/welcome-toast'
 import { GeistSans } from 'geist/font/sans'
 import { getCart } from 'lib/shopify'
@@ -45,6 +46,7 @@ export default async function RootLayout({
             <Toaster closeButton />
             <WelcomeToast />
           </main>
+          <Footer />
         </CartProvider>
       </body>
     </html>
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 57448a43c..51003ba2a 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -1,71 +1,206 @@
-import Link from 'next/link';
+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';
-
-const { COMPANY_NAME, SITE_NAME } = process.env;
-
-export default async function Footer() {
-  const currentYear = new Date().getFullYear();
-  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const skeleton = 'w-full h-6 animate-pulse rounded-sm bg-neutral-200 dark:bg-neutral-700';
-  const menu = await getMenu('next-js-frontend-footer-menu');
-  const copyrightName = COMPANY_NAME || SITE_NAME || '';
+/*
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+    ],
+  }
+  ```
+*/
+const navigation = {
+  collections: [
+    { name: 'Abrasives', href: '/collections/abrasives' },
+    { name: 'Adhesives', href: '/collections/adhesives' },
+    { name: 'Gloves', href: '/collections/gloves' },
+    {
+      name: 'Oscillating Accessories',
+      href: '/collections/oscillating-accessories',
+    },
+    { name: 'Industrial', href: '/collections/industrial' },
+  ],
+  company: [
+    { name: 'About', href: '/contact-us' },
+    { name: 'Jobs', href: '/contact-us' },
+    { name: 'Help', href: '/contact-us' },
+  ],
+  policies: [
+    { name: 'Refund Policy', href: '/policies/refund-policy' },
+    { name: 'Privacy Policy', href: '/policies/privacy-policy' },
+    { name: 'Terms of Service', href: '/policies/terms-of-service' },
+  ],
+  social: [
+    {
+      name: 'Facebook',
+      href: 'https://www.facebook.com/LinconsonTools/',
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: 'Instagram',
+      href: 'https://www.instagram.com/linconsontools/',
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
+}
 
+export default function Footer() {
   return (
-    <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
-        <div>
-          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
-            <LogoSquare size="sm" />
-            <span className="uppercase">{SITE_NAME}</span>
-          </Link>
+    <footer className="bg-white" aria-labelledby="footer-heading">
+      <h2 id="footer-heading" className="sr-only">
+        Footer
+      </h2>
+      <div className="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">
+        <div className="flex flex-wrap gap-0 lg:gap-16 xl:gap-32">
+          <div className="w-full md:w-1/3 lg:w-auto">
+            <h3 className="text-sm font-semibold leading-6 text-gray-900">
+              Product categories
+            </h3>
+
+            <ul role="list" className="mt-6 space-y-4">
+              {navigation.collections.map((item) => (
+                <li key={item.name}>
+                  <Link
+                    href={item.href}
+                    className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+                  >
+                    {item.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="w-1/2 md:w-1/3 lg:w-auto mt-10 md:mt-0">
+            <h3 className="text-sm font-semibold leading-6 text-gray-900">
+              Company
+            </h3>
+            <ul role="list" className="mt-6 space-y-4">
+              {navigation.company.map((item) => (
+                <li key={item.name}>
+                  <a
+                    href={item.href}
+                    className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+                  >
+                    {item.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="w-1/2 md:w-1/3 lg:w-auto mt-10 md:mt-0">
+            <h3 className="text-sm font-semibold leading-6 text-gray-900">
+              Policies
+            </h3>
+
+            <ul role="list" className="mt-6 space-y-4">
+              {navigation.policies.map((item) => (
+                <li key={item.name}>
+                  <Link
+                    href={item.href}
+                    className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+                  >
+                    {item.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="w-full lg:w-auto mt-10 lg:mt-0 flex-grow">
+            <h3 className="text-sm font-semibold leading-6 text-gray-900">
+              Subscribe to our newsletter
+            </h3>
+
+            <p
+              className="mt-2 text-sm leading-6 text-gray-600"
+              style={{ maxWidth: 330 }}
+            >
+              Stay up to date with new collections, catalogues and exclusive
+              offers.
+            </p>
+
+            <form
+              action="https://linconson.us4.list-manage.com/subscribe/post?u=a5052293bcbc74a97c6316c14&amp;id=8513e95fef"
+              method="post"
+              id="mc-embedded-subscribe-form"
+              name="mc-embedded-subscribe-form"
+              target="_blank"
+              noValidate
+              className="mt-6 flex w-full flex-col md:flex-row"
+            >
+              <input type="hidden" name="contact[tags]" value="newsletter" />
+
+              <label htmlFor="email-address" className="sr-only">
+                Email address
+              </label>
+
+              <input
+                type="email"
+                name="EMAIL"
+                id="email-address"
+                autoComplete="email"
+                required
+                className="w-full min-w-0 appearance-none rounded-md border-0 bg-white px-3 py-1.5 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 md:w-64 sm:text-sm sm:leading-6 xl:w-full flex-grow"
+                placeholder="Enter your email"
+                autoCorrect="off"
+                autoCapitalize="off"
+              />
+
+              <div className="mt-4 md:mt-0 md:ml-4 md:flex-shrink-0">
+                <button
+                  type="submit"
+                  className="flex w-full items-center justify-center rounded-md bg-black py-2 px-6 text-sm font-semibold text-white shadow-sm hover:bg-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                  Subscribe
+                </button>
+              </div>
+            </form>
+          </div>
         </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 className="md:ml-auto">
-          <a
-            className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
-            aria-label="Deploy on Vercel"
-            href="https://vercel.com/templates/next.js/nextjs-commerce"
-          >
-            <span className="px-3">▲</span>
-            <hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
-            <span className="px-3">Deploy</span>
-          </a>
-        </div>
-      </div>
-      <div className="border-t border-neutral-200 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 min-[1320px]:px-0">
-          <p>
-            &copy; {copyrightDate} {copyrightName}
-            {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
-          </p>
-          <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
-          <p>
-            <a href="https://github.com/vercel/commerce">View the source</a>
-          </p>
-          <p className="md:ml-auto">
-            <a href="https://vercel.com" className="text-black dark:text-white">
-              Created by ▲ Vercel
-            </a>
+
+        <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
+          <div className="flex space-x-6 md:order-2">
+            {navigation.social.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                target="_blank"
+                rel="noreferrer"
+                className="text-gray-400 hover:text-gray-500"
+              >
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true" />
+              </a>
+            ))}
+          </div>
+          <p className="mt-8 text-xs leading-5 text-gray-500 md:order-1 md:mt-0">
+            &copy; 2024 Linconson&#174; Industries - All rights reserved.
           </p>
         </div>
       </div>
     </footer>
-  );
+  )
 }