Add Shop By Category Section and Update Layout

components/LayoutWrapper.js

@@ -12,7 +12,7 @@ const LayoutWrapper = ({ children }) => {
   return (
     <SectionContainer>
       <div className="flex h-screen flex-col justify-between">
-        <header className="flex items-center justify-between py-10">
+        <header className="mx-auto flex items-center justify-between py-10">
           <div>
             <Link href="/" aria-label={siteMetadata.headerTitle}>
               <div className="flex items-center justify-between">
@@ -63,7 +63,7 @@ const LayoutWrapper = ({ children }) => {
             <MobileNav />
           </div>
         </header>
-        <main className="mb-auto">{children}</main>
+        <main className="mx-auto mb-auto flex flex-col">{children}</main>
         <Footer />
       </div>
     </SectionContainer>

components/SectionContainer.js

@@ -1,3 +1,3 @@
 export default function SectionContainer({ children }) {
-  return <div className="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">{children}</div>
+  return <div className="mx-auto flex flex-col px-4 sm:px-6 xl:px-0">{children}</div>
 }

components/ShopByCategory.js

@@ -0,0 +1,61 @@
+import Link from './Link'
+import Image from './Image'
+
+export default function ShopByCategory() {
+  const categories = [
+    {
+      name: 'Women',
+      image:
+        'https://cdn.builder.io/api/v1/image/assets/77864f6bd1864e1f80adffa8c03ae9d0/a38c5259adc22ec1ed5e60e564e554708e5bbc8f',
+    },
+    {
+      name: 'Men',
+      image:
+        'https://cdn.builder.io/api/v1/image/assets/77864f6bd1864e1f80adffa8c03ae9d0/a38c5259adc22ec1ed5e60e564e554708e5bbc8f',
+    },
+    {
+      name: 'Accessories',
+      image:
+        'https://cdn.builder.io/api/v1/image/assets/77864f6bd1864e1f80adffa8c03ae9d0/a38c5259adc22ec1ed5e60e564e554708e5bbc8f',
+    },
+    {
+      name: 'Sale',
+      image:
+        'https://cdn.builder.io/api/v1/image/assets/77864f6bd1864e1f80adffa8c03ae9d0/a38c5259adc22ec1ed5e60e564e554708e5bbc8f',
+    },
+  ]
+
+  return (
+    <div className="mx-auto mt-20 flex max-w-7xl flex-col items-center justify-center text-sm font-semibold text-black">
+      <div className="text-center text-2xl tracking-widest">SHOP BY CATEGORY</div>
+
+      <div className="mt-16 flex flex-wrap items-start justify-start gap-8">
+        {categories.map((category, index) => (
+          <div key={index} className="flex w-[278px] min-w-[240px] flex-col items-center">
+            <img
+              src={category.image}
+              alt={category.name}
+              loading="lazy"
+              className="aspect-square w-[278px] rounded-md object-contain"
+              srcSet={`${category.image}?placeholderIfAbsent=true&width=100 100w, 
+                       ${category.image}?placeholderIfAbsent=true&width=200 200w, 
+                       ${category.image}?placeholderIfAbsent=true&width=400 400w, 
+                       ${category.image}?placeholderIfAbsent=true&width=800 800w, 
+                       ${category.image}?placeholderIfAbsent=true&width=1200 1200w, 
+                       ${category.image}?placeholderIfAbsent=true&width=1600 1600w, 
+                       ${category.image}?placeholderIfAbsent=true&width=2000 2000w, 
+                       ${category.image}?placeholderIfAbsent=true`}
+            />
+            <div className="mt-8">{category.name}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-16">
+        <Link href="/shop">
+          <button className="bg-black px-5 py-2.5 tracking-widest text-white">SHOP ALL</button>
+        </Link>
+      </div>
+    </div>
+  )
+}

pages/index.js

@@ -6,6 +6,7 @@ import { getAllFilesFrontMatter } from '@/lib/mdx'
 import formatDate from '@/lib/utils/formatDate'
 
 import NewsletterForm from '@/components/NewsletterForm'
+import ShopByCategory from '@/components/ShopByCategory'
 
 const MAX_DISPLAY = 5
 
@@ -96,6 +97,7 @@ export default function Home({ posts }) {
           <NewsletterForm />
         </div>
       )}
+      <ShopByCategory />
     </>
   )
 }