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&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>
- © {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">
+ © 2024 Linconson® Industries - All rights reserved.
</p>
</div>
</div>
</footer>
- );
+ )
}