From 09fd171572401911f16a7167d1cc1a04c75f26e7 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 3 May 2025 02:02:02 +0000
Subject: [PATCH 1/5] ai: Add Shop By Category Section and Update Layout

---
 components/LayoutWrapper.js    |  4 +--
 components/SectionContainer.js |  2 +-
 components/ShopByCategory.js   | 61 ++++++++++++++++++++++++++++++++++
 pages/index.js                 |  2 ++
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 components/ShopByCategory.js

diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
index 60c5b83..1edd81f 100644
--- a/components/LayoutWrapper.js
+++ b/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>
diff --git a/components/SectionContainer.js b/components/SectionContainer.js
index 6758473..13d4903 100644
--- a/components/SectionContainer.js
+++ b/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>
 }
diff --git a/components/ShopByCategory.js b/components/ShopByCategory.js
new file mode 100644
index 0000000..da24bbd
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/pages/index.js b/pages/index.js
index 34a852a..bcf4531 100644
--- a/pages/index.js
+++ b/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 />
     </>
   )
 }

From 653d47612d889284c10f1442b9ec6d5319043643 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 3 May 2025 02:02:12 +0000
Subject: [PATCH 2/5] Builder.io: Update from Visual Editor


From 2ad94b41dd3ed675210df9a2dd3e312d8442949f Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 3 May 2025 02:06:01 +0000
Subject: [PATCH 3/5] Update from Builder.io Visual Editor

---
 components/ShopByCategory.js | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/components/ShopByCategory.js b/components/ShopByCategory.js
index da24bbd..74241cd 100644
--- a/components/ShopByCategory.js
+++ b/components/ShopByCategory.js
@@ -1,8 +1,8 @@
 import Link from './Link'
-import Image from './Image'
 
-export default function ShopByCategory() {
-  const categories = [
+export default function ShopByCategory({
+  title = 'SHOP BY CATEGORY',
+  categories = [
     {
       name: 'Women',
       image:
@@ -23,11 +23,16 @@ export default function ShopByCategory() {
       image:
         'https://cdn.builder.io/api/v1/image/assets/77864f6bd1864e1f80adffa8c03ae9d0/a38c5259adc22ec1ed5e60e564e554708e5bbc8f',
     },
-  ]
-
+  ],
+  buttonText = 'SHOP ALL',
+  buttonLink = '/shop',
+  className = '',
+}) {
   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={`mx-auto mt-20 flex max-w-7xl flex-col items-center justify-center text-sm font-semibold text-black ${className}`}
+    >
+      {title && <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) => (
@@ -51,11 +56,15 @@ export default function ShopByCategory() {
         ))}
       </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>
+      {buttonText && buttonLink && (
+        <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>
   )
 }

From 94d9c4acfdde6a851a3d68af25464c223da063a9 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 3 May 2025 02:06:19 +0000
Subject: [PATCH 4/5] Update from Builder.io Visual Editor

---
 components/ShopByCategory.js | 45 ++++++++++++++----------------------
 pages/index.js               | 28 +++++++++++++++++++++-
 2 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/components/ShopByCategory.js b/components/ShopByCategory.js
index 74241cd..65c3fca 100644
--- a/components/ShopByCategory.js
+++ b/components/ShopByCategory.js
@@ -1,38 +1,15 @@
 import Link from './Link'
+import PropTypes from 'prop-types'
 
 export default function 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',
-    },
-  ],
+  categories = [],
   buttonText = 'SHOP ALL',
   buttonLink = '/shop',
-  className = '',
 }) {
   return (
-    <div
-      className={`mx-auto mt-20 flex max-w-7xl flex-col items-center justify-center text-sm font-semibold text-black ${className}`}
-    >
-      {title && <div className="text-center text-2xl tracking-widest">{title}</div>}
+    <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) => (
@@ -56,7 +33,7 @@ export default function ShopByCategory({
         ))}
       </div>
 
-      {buttonText && buttonLink && (
+      {buttonText && (
         <div className="mt-16">
           <Link href={buttonLink}>
             <button className="bg-black px-5 py-2.5 tracking-widest text-white">
@@ -68,3 +45,15 @@ export default function ShopByCategory({
     </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,
+}
diff --git a/pages/index.js b/pages/index.js
index bcf4531..25430f3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -97,7 +97,33 @@ export default function Home({ posts }) {
           <NewsletterForm />
         </div>
       )}
-      <ShopByCategory />
+      <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"
+      />
     </>
   )
 }

From cf16a343c868a13985c4bcf9f056354a276b38d8 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 3 May 2025 02:06:19 +0000
Subject: [PATCH 5/5] Update from Builder.io Visual Editor

---
 .gitignore | 43 +++++++------------------------------------
 1 file changed, 7 insertions(+), 36 deletions(-)

diff --git a/.gitignore b/.gitignore
index 225ed9c..a1ca6fe 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
+/nbproject/
+/.idea/*
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+*.sublime-project