From d6d82b7b842bcd35991b44339dcf69abb549b8a9 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 20 Aug 2026 19:17:14 +0530
Subject: [PATCH] feat: force category grid and cards to take full width and
 expand fully across the page

---
 src/App.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3d5327c..6688ee6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -871,11 +871,11 @@ export default function App() {
               </section>
 
               {/* Discover Heritage Cards */}
-              <section className="max-w-7xl mx-auto px-4 sm:px-8 py-12 sm:py-16">
+              <section className="w-full max-w-7xl mx-auto px-4 sm:px-8 py-12 sm:py-16">
                 <h2 className="font-caslon text-2xl sm:text-3xl font-bold text-center text-primary mb-8 sm:mb-12">Discover Heritage</h2>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+                <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                   {/* Category 1 */}
-                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                  <div className="w-full group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
                     <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                     <div className="absolute bottom-0 left-0 p-4 w-full text-white">
@@ -884,7 +884,7 @@ export default function App() {
                     </div>
                   </div>
                   {/* Category 2 */}
-                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                  <div className="w-full group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
                     <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/kanchipuram_silk.jpg" />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                     <div className="absolute bottom-0 left-0 p-4 w-full text-white">
@@ -893,7 +893,7 @@ export default function App() {
                     </div>
                   </div>
                   {/* Category 3 */}
-                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                  <div className="w-full group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
                     <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/brass_figurine.jpg" />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                     <div className="absolute bottom-0 left-0 p-4 w-full text-white">
@@ -902,7 +902,7 @@ export default function App() {
                     </div>
                   </div>
                   {/* Category 4 */}
-                  <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
+                  <div className="w-full group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
                     <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/wooden_carving.jpg" />
                     <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                     <div className="absolute bottom-0 left-0 p-4 w-full text-white">