Skip to content

Improve category page layout #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
damianlegawiec merged 3 commits into from
Apr 3, 2026
Merged

Improve category page layout #105

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77352f3
Improve category page layout
damianlegawiec Apr 3, 2026
dbb2c26
Update page.tsx
damianlegawiec Apr 3, 2026
7356244
fixes
damianlegawiec Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/[country]/[locale]/(storefront)/account/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function AccountShell({
isLoading,
}: AccountShellProps) {
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex flex-col lg:flex-row gap-8">
{/* Sidebar Navigation */}
<aside className="lg:w-64 flex-shrink-0">
Expand Down
4 changes: 2 additions & 2 deletions src/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ export default function CategoryLoading() {
return (
<div>
{/* Banner skeleton */}
<div className="w-full h-48 md:h-64 lg:h-80 bg-gray-200 animate-pulse" />
<div className="w-full h-48 md:h-64 lg:h-80 bg-gray-50 animate-pulse" />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Breadcrumb skeleton */}
<div className="flex items-center gap-2 mb-8">
<div className="h-4 bg-gray-200 rounded w-12 animate-pulse" />
Expand Down
62 changes: 32 additions & 30 deletions src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/navigation/Breadcrumbs";
import { CategoryBanner } from "@/components/navigation/CategoryBanner";
import { JsonLd } from "@/components/seo/JsonLd";
import { getCategory } from "@/lib/data/categories";
import { generateCategoryMetadata } from "@/lib/metadata/category";
Expand Down Expand Up @@ -51,41 +50,44 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
<JsonLd data={buildBreadcrumbJsonLd(category, basePath, storeUrl)} />
)}

{/* Banner Image — returns null when image missing or fails to load */}
<CategoryBanner imageUrl={category.image_url} name={category.name} />
<div
className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
style={{ backgroundImage: `url(${category.image_url})` }}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
<Breadcrumbs category={category} basePath={basePath} />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Breadcrumbs category={category} basePath={basePath} />
<div className="mb-4">
<h1 className="text-4xl font-bold text-gray-900">
{category.name}
</h1>
</div>

<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">{category.name}</h1>
{/* Description */}
{category.description && (
<p className="mb-4 text-gray-600">{category.description}</p>
)}
</div>
</div>
Comment on lines +53 to +71

@coderabbitai coderabbitai Bot Apr 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add a contrast overlay for banner text readability.

Line 54–55 place dark text over arbitrary category images. On bright images, heading/description can become unreadable (accessibility blocker).

Suggested fix 
-      <div
-        className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
-        style={{ backgroundImage: `url(${category.image_url})` }}
-      >
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
+      <div
+        className="relative flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
+        style={
+          category.image_url
+            ? { backgroundImage: `url(${category.image_url})` }
+            : undefined
+        }
+      >
+        {category.image_url && (
+          <div className="absolute inset-0 bg-black/35" aria-hidden="true" />
+        )}
+        <div className="relative container mx-auto px-4 sm:px-6 lg:px-8">
           <Breadcrumbs category={category} basePath={basePath} />
 
           <div className="mb-4">
-            <h1 className="text-4xl font-bold text-gray-900">
+            <h1 className="text-4xl font-bold text-white">
               {category.name}
             </h1>
           </div>
 
           {/* Description */}
           {category.description && (
-            <p className="mb-4 text-gray-600">{category.description}</p>
+            <p className="mb-4 text-white/90">{category.description}</p>
           )}
         </div>
       </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div
className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
style={{ backgroundImage: `url(${category.image_url})` }}
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
<Breadcrumbs category={category} basePath={basePath} />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Breadcrumbs category={category} basePath={basePath} />
<div className="mb-4">
<h1 className="text-4xl font-bold text-gray-900">
{category.name}
</h1>
</div>
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">{category.name}</h1>
{/* Description */}
{category.description && (
<p className="mb-4 text-gray-600">{category.description}</p>
)}
</div>
</div>
<div
className="relative flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
style={
category.image_url
? { backgroundImage: `url(${category.image_url})` }
: undefined
}
>
{category.image_url && (
<div className="absolute inset-0 bg-black/35" aria-hidden="true" />
)}
<div className="relative container mx-auto px-4 sm:px-6 lg:px-8">
<Breadcrumbs category={category} basePath={basePath} />
<div className="mb-4">
<h1 className="text-4xl font-bold text-white">
{category.name}
</h1>
</div>
{/* Description */}
{category.description && (
<p className="mb-4 text-white/90">{category.description}</p>
)}
</div>
</div>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/`[country]/[locale]/(storefront)/c/[...permalink]/page.tsx around
lines 53 - 71, The banner currently uses category.image_url as a background and
renders dark text (the h1 in the div and the description paragraph) directly on
top, which can be unreadable; update the banner container (the div that uses
style={{ backgroundImage: `url(${category.image_url})` }}) to be position:
relative and add a full-size absolutely positioned overlay element between the
background and content that applies a semi-opaque dark gradient (e.g.,
rgba(0,0,0,0.4) or a left-to-right gradient) to increase contrast, and update
the heading and description text styles (the h1 and the conditional p rendering
category.description) to use a light color (e.g., text-white or similar) so the
text remains readable over bright images.


{/* Description */}
{category.description && (
<p className="mb-8 text-gray-600">{category.description}</p>
)}

{/* Subcategories */}
{category.children && category.children.length > 0 && (
<div className="mb-8">
<h2 className="text-lg font-semibold text-gray-900 mb-4">
Subcategories
</h2>
<div className="flex flex-wrap gap-2">
{category.children.map((child) => (
<Link
key={child.id}
href={`${basePath}/c/${child.permalink}`}
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm text-gray-700 transition-colors"
>
{child.name}
</Link>
))}
</div>
{/* Subcategories */}
{category.children && category.children.length > 0 && (
<div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div className="flex flex-wrap gap-2 items-center border-b border-gray-100 pb-4">
{category.children.map((child) => (
<Link
key={child.id}
href={`${basePath}/c/${child.permalink}`}
className="px-1.5 py-1 hover:bg-gray-100 rounded-lg text-gray-700 transition-colors"
>
{child.name}
</Link>
))}
</div>
)}
</div>
)}

<div className="container mx-auto px-4 sm:px-6 lg:px-8 pt-4">
{/* Products */}
<CategoryProductsContent
categoryId={category.id}
Expand Down
6 changes: 3 additions & 3 deletions src/app/[country]/[locale]/(storefront)/cart/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function CartPage() {

if (loading) {
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
<div className="space-y-4">
Expand All @@ -55,7 +55,7 @@ export default function CartPage() {

if (!cart || !cart.items || cart.items.length === 0) {
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="text-center">
<ShoppingBag
className="w-24 h-24 text-gray-300 mx-auto"
Expand All @@ -78,7 +78,7 @@ export default function CartPage() {
}

return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 className="text-3xl font-bold text-gray-900 mb-8">Shopping Cart</h1>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
Expand Down
4 changes: 2 additions & 2 deletions src/app/[country]/[locale]/(storefront)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default async function HomePage({ params }: HomePageProps) {
<div>
{/* Hero Section */}
<section className="border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
<div className="text-center">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-gray-900">
Welcome to {getStoreName()}
Expand All @@ -48,7 +48,7 @@ export default async function HomePage({ params }: HomePageProps) {
</section>

{/* Featured Products */}
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<section className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div className="flex items-center justify-between mb-8">
<h2 className="text-2xl font-bold text-gray-900">
Featured Products
Expand Down
2 changes: 1 addition & 1 deletion src/app/[country]/[locale]/(storefront)/products/ProductsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function ProductsContent({ basePath }: ProductsContentProps) {
]);

return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
{query ? (
Expand Down
2 changes: 1 addition & 1 deletion src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export function ProductDetails({ product, basePath }: ProductDetailsProps) {
};

return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Media Gallery */}
<div>
Expand Down
51 changes: 0 additions & 51 deletions src/components/navigation/CategoryBanner.tsx
View file
Open in desktop

This file was deleted.

7 changes: 6 additions & 1 deletion src/components/products/filters/FilterDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,12 @@ export function FilterDropdown({
}}
>
<DropdownMenuTrigger asChild>
<Button variant="outline" aria-expanded={isOpen} aria-haspopup="menu">
<Button
variant="outline"
aria-expanded={isOpen}
aria-haspopup="menu"
size="sm"
>
<span>{label}</span>
{hasActive && (
<span className="flex items-center justify-center w-5 h-5 text-xs bg-primary text-white rounded-lg">
Expand Down
9 changes: 4 additions & 5 deletions src/components/products/filters/ProductFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,10 @@ export const FilterBar = memo(function FilterBar({
if (filtersLoading) {
return (
<div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-200">
<div className="h-10 w-20 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-10 w-24 bg-gray-200 rounded-lg animate-pulse" />
<div className="ml-auto h-10 w-18 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-9 w-20 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-9 w-18 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-9 w-24 bg-gray-200 rounded-lg animate-pulse" />
<div className="ml-auto h-9 w-18 bg-gray-200 rounded-lg animate-pulse" />
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Resolved
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/search/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export function SearchBar({ basePath, autoFocus, onNavigate }: SearchBarProps) {
className="fixed left-0 right-0 mt-1 bg-white border-b border-gray-200 z-50"
onMouseDown={handleSuggestionsMouseDown}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Resolved
{loading ? (
<div className="p-4 text-center text-gray-500 text-sm">
Searching...
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function DropdownMenuContent({
sideOffset={sideOffset}
align={align}
className={cn(
"z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
"z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 shadow-lg",
className,
)}
{...props}
Expand Down
Loading