vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: force category grid and cards to take full width and expand fully across the page

Browse source
This commit is contained in:
vickytechkey 2026-08-20 19:17:14 +05:30
parent cd2066cbbf
commit d6d82b7b84
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/App.tsx
View file

@ -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">