Add Shop By Category Section and Update Layout

.gitignore

@@ -1,36 +1,7 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-public/sitemap.xml
-.vercel
-
-# production
-/build
-*.xml
-# rss feed
-/public/feed.xml 
-
-# misc
-.DS_Store
-
-# debug
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+/nbproject/
+/.idea/*
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+*.sublime-project

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,59 @@
+import Link from './Link'
+import PropTypes from 'prop-types'
+
+export default function ShopByCategory({
+  title = 'SHOP BY CATEGORY',
+  categories = [],
+  buttonText = 'SHOP ALL',
+  buttonLink = '/shop',
+}) {
+  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">{title}</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>
+
+      {buttonText && (
+        <div className="mt-16">
+          <Link href={buttonLink}>
+            <button className="bg-black px-5 py-2.5 tracking-widest text-white">
+              {buttonText}
+            </button>
+          </Link>
+        </div>
+      )}
+    </div>
+  )
+}
+
+ShopByCategory.propTypes = {
+  title: PropTypes.string,
+  categories: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      image: PropTypes.string.isRequired,
+    })
+  ),
+  buttonText: PropTypes.string,
+  buttonLink: PropTypes.string,
+}

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,33 @@ export default function Home({ posts }) {
           <NewsletterForm />
         </div>
       )}
+      <ShopByCategory
+        title="SHOP BY CATEGORY"
+        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',
+          },
+        ]}
+        buttonText="SHOP ALL"
+        buttonLink="/shop"
+      />
     </>
   )
 }