feat: 🎸 add header card to template UI

components/Header.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image";
+
+const Header = () => {
+  return (
+    <main>
+      <div className="sm:relative">
+        <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+          <div className="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-36 lg:pb-56 xl:col-span-6">
+            <div className="mx-auto max-w-2xl lg:mx-0">
+              <h1 className="text-3xl sm:text-2xl font-bold tracking-tight text-gray-900 sm:mb-12">
+                Welcome to{" "}
+                <span className="sm:bg-gray-900 text-gray-900 sm:text-white text-3xl sm:text-6xl sm:px-4 rounded-md">
+                  {process.env.NEXT_PUBLIC_SITE_NAME ? process.env.NEXT_PUBLIC_SITE_NAME : "Cake Store"}
+                </span>
+              </h1>
+              <p className="mt-6 text-lg leading-8 text-gray-600">
+                <a
+                  href="//commercelayer.io?utm_source=commercelayer-sanity-template"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Commerce Layer
+                </a>{" "}
+                is a multi-market commerce API and order management system that lets you add global shopping
+                capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose
+                your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable,
+                anywhere, through a blazing-fast, enterprise-grade, and secure API.
+              </p>
+              <div className="mt-16 flex items-center gap-x-6">
+                <a
+                  href="#"
+                  className="rounded-md border-2 border-gray-900 hover:bg-gray-900 hover:text-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  Start Shopping
+                </a>
+                <a
+                  href="//commercelayer.io/why?utm_source=commercelayer-sanity-template"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-semibold leading-6 text-gray-900"
+                >
+                  Learn more <span aria-hidden="true">→</span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
+            <Image
+              className="aspect-[3/2] w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
+              src="https://images.unsplash.com/photo-1598971861713-54ad16a7e72e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2576&q=80"
+              alt="An image of a woman smiling and sitting in a shopping trollet"
+              width={1000}
+              height={500}
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Header;

next.config.mjs

@@ -2,7 +2,11 @@
 
 const nextConfig = {
   images: {
-    remotePatterns: [{ hostname: "cdn.sanity.io" }, { hostname: "data.commercelayer.app" }]
+    remotePatterns: [
+      { hostname: "cdn.sanity.io" },
+      { hostname: "images.unsplash.com" },
+      { hostname: "data.commercelayer.app" }
+    ]
   },
   env: {
     JSCOV: 0,

pages/[countryCode]/[lang]/index.tsx

@@ -7,6 +7,7 @@ import { CommerceLayer, OrderContainer, OrderStorage } from "@commercelayer/reac
 import { InstantSearch, Configure } from "react-instantsearch-dom";
 import queryString from "query-string";
 import Layout from "@components/Layout";
+import Header from "@components/Header";
 import CustomPagination from "@components/CustomPagination";
 import Taxonomies from "@components/Taxonomies";
 import CustomSearchBox from "@components/CustomSearchBox";
@@ -75,6 +76,7 @@ const FilterPage: NextPage<Props> = ({
       <OrderStorage persistKey={`order-${code}`}>
         <OrderContainer attributes={{ language_code: languageCode }}>
           <Layout cms={cms} lang={lang} buildLanguages={buildLanguages} countries={countries}>
+            <Header />
             {showSearch ? (
               <InstantSearch searchClient={searchClient} indexName={indexName}>
                 <Configure facetingAfterDistinct />