From 2c7a1c3807a3f5a571a1b26361e427643526355f Mon Sep 17 00:00:00 2001
From: Johnbin89 <john_biniaris@hotmail.com>
Date: Wed, 25 Mar 2026 20:33:10 +0200
Subject: [PATCH 1/2] Remove: HeroSection Trips/Centers | Add: BreadCumb / Icon
 to Title / Side border on Cards Lists

---
 frontend/src/components/DiveSiteCard.jsx      |   4 +-
 .../DivingCentersDesktopSearchBar.jsx         |   2 +-
 .../DivingCentersResponsiveFilterBar.jsx      | 118 +++++++++---------
 frontend/src/components/PageHeader.jsx        |  14 ++-
 .../src/components/ResponsiveFilterBar.jsx    |   2 +-
 frontend/src/pages/DiveRoutes.jsx             |   9 +-
 frontend/src/pages/DiveSites.jsx              |   1 +
 frontend/src/pages/DiveTrips.jsx              |  58 ++++-----
 frontend/src/pages/Dives.jsx                  |   7 +-
 frontend/src/pages/DivingCenters.jsx          |  62 ++++-----
 10 files changed, 132 insertions(+), 145 deletions(-)

diff --git a/frontend/src/components/DiveSiteCard.jsx b/frontend/src/components/DiveSiteCard.jsx
index c00fbe45..8f49d8e3 100644
--- a/frontend/src/components/DiveSiteCard.jsx
+++ b/frontend/src/components/DiveSiteCard.jsx
@@ -17,7 +17,7 @@ export const DiveSiteListCard = ({
 }) => {
   return (
     <div
-      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 relative ${compactLayout ? 'p-4' : 'p-6'}`}
+      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 relative ${compactLayout ? 'p-4' : 'p-6'}`}
     >
       <div className='flex gap-4 sm:gap-6'>
         {site.thumbnail && (
@@ -245,7 +245,7 @@ export const DiveSiteGridCard = ({
   handleFilterChange,
 }) => {
   return (
-    <div className='dive-item bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden'>
+    <div className='dive-item bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden'>
       {site.thumbnail && (
         <Link
           to={getMediaLink(site)}
diff --git a/frontend/src/components/DivingCentersDesktopSearchBar.jsx b/frontend/src/components/DivingCentersDesktopSearchBar.jsx
index d7d063e6..c6e884a8 100644
--- a/frontend/src/components/DivingCentersDesktopSearchBar.jsx
+++ b/frontend/src/components/DivingCentersDesktopSearchBar.jsx
@@ -15,7 +15,7 @@ const DivingCentersDesktopSearchBar = ({
   return (
     <div
       data-testid='diving-centers-desktop-search-bar'
-      className={`p-4 border-b border-gray-200 ${className}`}
+      className={`px-3 sm:px-4 mb-3 sm:mb-4 ${className}`}
     >
       <div className='max-w-2xl mx-auto'>
         <FuzzySearchInput
diff --git a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
index 614cb299..cd3aff74 100644
--- a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
+++ b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
@@ -166,77 +166,77 @@ const DivingCentersResponsiveFilterBar = ({
         className={`bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40 ${className}`}
       >
         <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 p-4'>
-          {/* Quick Filters */}
-          {showQuickFilters && (
-            <div className='flex items-center gap-2 overflow-x-auto'>
-              {reviewsEnabled && (
+            {/* Quick Filters */}
+            {showQuickFilters && (
+              <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end overflow-x-auto'>
+                {reviewsEnabled && (
+                  <button
+                    onClick={() => onQuickFilter('min_rating')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilter === 'min_rating'
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                  >
+                    <Star className='h-4 w-4' />
+                    <span>4+ Stars</span>
+                  </button>
+                )}
                 <button
-                  onClick={() => onQuickFilter('min_rating')}
-                  className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors ${
-                    quickFilter === 'min_rating'
-                      ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                      : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                  onClick={() => onQuickFilter('country')}
+                  className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                    quickFilter === 'country'
+                      ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                      : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
                   }`}
                 >
-                  <Star className='h-4 w-4 inline mr-1' />
-                  4+ Stars
+                  <MapPin className='h-4 w-4' />
+                  <span>Greece</span>
                 </button>
-              )}
+              </div>
+            )}
+
+            {/* Advanced Filters Toggle */}
+            {showAdvancedToggle && (
               <button
-                onClick={() => onQuickFilter('country')}
-                className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors ${
-                  quickFilter === 'country'
-                    ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                    : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                }`}
+                onClick={onToggleFilters}
+                className='flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors'
               >
-                <MapPin className='h-4 w-4 inline mr-1' />
-                Greece
+                <Filter className='h-4 w-4' />
+                {showFilters ? 'Hide Filters' : 'Show Filters'}
+                {activeFiltersCount > 0 && (
+                  <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1'>
+                    {activeFiltersCount}
+                  </span>
+                )}
               </button>
-            </div>
-          )}
-
-          {/* Advanced Filters Toggle */}
-          {showAdvancedToggle && (
-            <button
-              onClick={onToggleFilters}
-              className='flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors'
-            >
-              <Filter className='h-4 w-4' />
-              {showFilters ? 'Hide Filters' : 'Show Filters'}
-              {activeFiltersCount > 0 && (
-                <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1'>
-                  {activeFiltersCount}
-                </span>
-              )}
-            </button>
-          )}
-        </div>
+            )}
+          </div>
 
         {/* Active Filters Display */}
         {activeFilters.length > 0 && (
           <div className='border-t border-gray-200 py-2 px-3 bg-blue-50'>
-            <div className='flex items-center gap-2 mb-1.5'>
-              <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
-            </div>
-            <div className='flex flex-wrap gap-1 justify-start'>
-              {activeFilters.map(filter => (
-                <div
-                  key={filter.key}
-                  className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
-                >
-                  <span className='font-medium'>{filter.label}:</span>
-                  <span className='max-w-[100px] truncate'>{filter.value}</span>
-                  <button
-                    onClick={() => onFilterChange(filter.key, '')}
-                    className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
-                    title={`Remove ${filter.label} filter`}
+              <div className='flex items-center gap-2 mb-1.5'>
+                <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
+              </div>
+              <div className='flex flex-wrap gap-1 justify-start'>
+                {activeFilters.map(filter => (
+                  <div
+                    key={filter.key}
+                    className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
                   >
-                    <X className='h-2.5 w-2.5' />
-                  </button>
-                </div>
-              ))}
-            </div>
+                    <span className='font-medium'>{filter.label}:</span>
+                    <span className='max-w-[100px] truncate'>{filter.value}</span>
+                    <button
+                      onClick={() => onFilterChange(filter.key, '')}
+                      className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
+                      title={`Remove ${filter.label} filter`}
+                    >
+                      <X className='h-2.5 w-2.5' />
+                    </button>
+                  </div>
+                ))}
+              </div>
           </div>
         )}
 
diff --git a/frontend/src/components/PageHeader.jsx b/frontend/src/components/PageHeader.jsx
index 845e4c7d..b880dfff 100644
--- a/frontend/src/components/PageHeader.jsx
+++ b/frontend/src/components/PageHeader.jsx
@@ -9,16 +9,23 @@ import Breadcrumbs from './Breadcrumbs';
  * A functional header for internal utility pages (Dives, Dive Sites, etc.)
  * that replaces marketing-heavy heroes.
  */
-const PageHeader = ({ title, breadcrumbItems = [], actions = [], className = '' }) => {
+const PageHeader = ({ title, titleIcon: TitleIcon, breadcrumbItems = [], actions = [], className = '' }) => {
   return (
     <div className={`mb-8 ${className}`}>
       {/* Navigation Context */}
-      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} />}
+      {breadcrumbItems.length > 0 && (
+        <div className='mb-3 sm:mb-4'>
+          <Breadcrumbs items={breadcrumbItems} />
+        </div>
+      )}
 
       <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6'>
         {/* Title Group */}
         <div className='flex-1 min-w-0'>
-          <h1 className='text-3xl font-bold text-gray-900 tracking-tight'>{title}</h1>
+          <h1 className='text-3xl font-bold text-gray-900 tracking-tight flex items-center gap-3'>
+            {TitleIcon && <TitleIcon className='w-7 h-7 text-gray-700' aria-hidden='true' />}
+            <span>{title}</span>
+          </h1>
         </div>
 
         {/* Action Toolbar */}
@@ -71,6 +78,7 @@ const PageHeader = ({ title, breadcrumbItems = [], actions = [], className = ''
 
 PageHeader.propTypes = {
   title: PropTypes.string.isRequired,
+  titleIcon: PropTypes.elementType,
   breadcrumbItems: PropTypes.array,
   actions: PropTypes.arrayOf(
     PropTypes.shape({
diff --git a/frontend/src/components/ResponsiveFilterBar.jsx b/frontend/src/components/ResponsiveFilterBar.jsx
index 044c852f..58ba6a4a 100644
--- a/frontend/src/components/ResponsiveFilterBar.jsx
+++ b/frontend/src/components/ResponsiveFilterBar.jsx
@@ -427,7 +427,7 @@ const ResponsiveFilterBar = ({
                 className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                   showFilters
                     ? 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-sm'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300'
+                    : 'bg-blue-100 text-blue-700 hover:bg-blue-200 active:bg-blue-300'
                 }`}
               >
                 <Filter className='h-4 w-4' />
diff --git a/frontend/src/pages/DiveRoutes.jsx b/frontend/src/pages/DiveRoutes.jsx
index 2c2b44bf..e1a77729 100644
--- a/frontend/src/pages/DiveRoutes.jsx
+++ b/frontend/src/pages/DiveRoutes.jsx
@@ -17,7 +17,6 @@ import { useState, useEffect, useCallback } from 'react';
 import { useQuery } from 'react-query';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 
-import Breadcrumbs from '../components/Breadcrumbs';
 import DesktopSearchBar from '../components/DesktopSearchBar';
 import EmptyState from '../components/EmptyState';
 import ErrorPage from '../components/ErrorPage';
@@ -146,11 +145,7 @@ const DiveRoutes = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={[{ label: 'Dive Routes' }]} />
-
-        {/* Page Header */}
-        <PageHeader title='Dive Routes' actions={[]} />
+        <PageHeader title='Dive Routes' titleIcon={Route} breadcrumbItems={[{ label: 'Dive Routes' }]} />
 
         {/* Responsive Filter Bar */}
         <div className='mb-8'>
@@ -344,7 +339,7 @@ const DiveRoutes = () => {
               return (
                 <div
                   key={route.id}
-                  className={`bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col ${compactLayout ? 'p-4' : 'p-6'}`}
+                  className={`bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col ${compactLayout ? 'p-4' : 'p-6'}`}
                 >
                   {/* Header: Title & Type */}
                   <div className='mb-2'>
diff --git a/frontend/src/pages/DiveSites.jsx b/frontend/src/pages/DiveSites.jsx
index 112994da..19c77b7c 100644
--- a/frontend/src/pages/DiveSites.jsx
+++ b/frontend/src/pages/DiveSites.jsx
@@ -655,6 +655,7 @@ const DiveSites = () => {
       <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
         <PageHeader
           title='Dive Sites'
+          titleIcon={Map}
           breadcrumbItems={[{ label: 'Dive Sites' }]}
           actions={[
             {
diff --git a/frontend/src/pages/DiveTrips.jsx b/frontend/src/pages/DiveTrips.jsx
index 692ac341..1d8290db 100644
--- a/frontend/src/pages/DiveTrips.jsx
+++ b/frontend/src/pages/DiveTrips.jsx
@@ -30,7 +30,7 @@ import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-do
 
 import DesktopSearchBar from '../components/DesktopSearchBar';
 import FuzzySearchInput from '../components/FuzzySearchInput';
-import HeroSection from '../components/HeroSection';
+import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
 import { useAuth } from '../contexts/AuthContext';
@@ -673,37 +673,29 @@ const DiveTrips = () => {
     <div className='min-h-screen bg-gray-50'>
       {/* Mobile-First Responsive Container */}
       <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
-        {/* Hero Section */}
-        <HeroSection
+        <PageHeader
           title='Dive Trips'
-          subtitle='Discover upcoming dive trips from local diving centers'
-          background='ocean'
-          size='large'
-          showLogo={false}
-          logoBackground={true}
-          threeColumnLayout={true}
-        >
-          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
-            <button
-              onClick={() => {
-                navigate('/map?type=dive-trips');
-              }}
-              className='bg-blue-600 hover:bg-blue-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Compass className='w-5 h-5' />
-              Explore Map
-            </button>
-            {user && (
-              <button
-                onClick={() => navigate('/dive-trips/create')}
-                className='bg-green-600 hover:bg-green-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-              >
-                <Plus size={20} />
-                Create Trip
-              </button>
-            )}
-          </div>
-        </HeroSection>
+          titleIcon={Calendar}
+          breadcrumbItems={[{ label: 'Dive Trips' }]}
+          actions={[
+            {
+              label: 'Explore Map',
+              icon: Compass,
+              onClick: () => navigate('/map?type=dive-trips'),
+              variant: 'primary',
+            },
+            ...(user
+              ? [
+                  {
+                    label: 'Create Trip',
+                    icon: Plus,
+                    onClick: () => navigate('/dive-trips/create'),
+                    variant: 'secondary',
+                  },
+                ]
+              : []),
+          ]}
+        />
 
         {/* Desktop Search Bar - Only visible on desktop/tablet and for authenticated users */}
         {!isMobile && user && (
@@ -986,7 +978,7 @@ const DiveTrips = () => {
                 return (
                   <div
                     key={trip.id}
-                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 p-6 transition-shadow ${
+                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] p-6 transition-shadow ${
                       compactLayout ? 'p-4' : 'p-6'
                     } ${
                       isBlurred ? 'pointer-events-none relative overflow-hidden' : 'hover:shadow-md'
@@ -1357,7 +1349,7 @@ const DiveTrips = () => {
                 return (
                   <div
                     key={trip.id}
-                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-shadow ${
+                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] overflow-hidden transition-shadow ${
                       compactLayout ? 'p-4' : 'p-6'
                     } ${isBlurred ? 'pointer-events-none relative' : 'hover:shadow-md'}`}
                     style={
diff --git a/frontend/src/pages/Dives.jsx b/frontend/src/pages/Dives.jsx
index 44895e5c..f86fff3d 100644
--- a/frontend/src/pages/Dives.jsx
+++ b/frontend/src/pages/Dives.jsx
@@ -23,6 +23,7 @@ import {
   MessageCircle,
   Globe,
   MapPin,
+  Anchor,
 } from 'lucide-react';
 import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
@@ -30,7 +31,6 @@ import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 
 import api from '../api';
-import Breadcrumbs from '../components/Breadcrumbs';
 import DesktopSearchBar from '../components/DesktopSearchBar';
 import EmptyState from '../components/EmptyState';
 import ErrorPage from '../components/ErrorPage';
@@ -909,6 +909,7 @@ const Dives = () => {
     <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
       <PageHeader
         title='Dive Log'
+        titleIcon={Anchor}
         breadcrumbItems={[{ label: 'Dive Log' }]}
         actions={[
           {
@@ -1060,7 +1061,7 @@ const Dives = () => {
               {dives?.map(dive => (
                 <div
                   key={dive.id}
-                  className={`dive-item rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
+                  className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
                     dive.is_private ? 'bg-purple-50/30' : 'bg-white'
                   } ${compactLayout ? 'p-4' : 'p-6'}`}
                 >
@@ -1308,7 +1309,7 @@ const Dives = () => {
               {dives?.map(dive => (
                 <div
                   key={dive.id}
-                  className={`dive-item rounded-xl shadow-sm border border-gray-100 flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
+                  className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
                     dive.is_private ? 'bg-purple-50/30' : 'bg-white'
                   }`}
                 >
diff --git a/frontend/src/pages/DivingCenters.jsx b/frontend/src/pages/DivingCenters.jsx
index 482e60ef..a80c0dc1 100644
--- a/frontend/src/pages/DivingCenters.jsx
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -22,10 +22,10 @@ import api from '../api';
 import DivingCentersDesktopSearchBar from '../components/DivingCentersDesktopSearchBar';
 import DivingCentersResponsiveFilterBar from '../components/DivingCentersResponsiveFilterBar';
 import ErrorPage from '../components/ErrorPage';
-import HeroSection from '../components/HeroSection';
 import LoadingSkeleton from '../components/LoadingSkeleton';
 import MaskedEmail from '../components/MaskedEmail';
 import MatchTypeBadge from '../components/MatchTypeBadge';
+import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import Pagination from '../components/ui/Pagination';
 import { useAuth } from '../contexts/AuthContext';
@@ -504,41 +504,31 @@ const DivingCenters = () => {
     <div className='min-h-screen bg-gray-50'>
       {/* Mobile-First Responsive Container */}
       <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
-        {/* Hero Section */}
-        <HeroSection
+        <PageHeader
           title='Diving Centers'
-          subtitle='Discover and connect with professional diving centers worldwide'
-          background='ocean'
-          size='large'
-          showLogo={false}
-          logoBackground={true}
-          threeColumnLayout={true}
-        >
-          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
-            <button
-              onClick={() => {
-                navigate('/map?type=diving-centers');
-              }}
-              className='bg-blue-600 hover:bg-blue-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Compass className='w-5 h-5' />
-              Explore Map
-            </button>
-            <button
-              onClick={() => {
+          titleIcon={Building}
+          breadcrumbItems={[{ label: 'Diving Centers' }]}
+          actions={[
+            {
+              label: 'Explore Map',
+              icon: Compass,
+              onClick: () => navigate('/map?type=diving-centers'),
+              variant: 'primary',
+            },
+            {
+              label: 'Add Center',
+              icon: Plus,
+              onClick: () => {
                 if (!user) {
                   window.alert('You need an account for this action.\nPlease Login or Register.');
                   return;
                 }
                 navigate('/diving-centers/create');
-              }}
-              className='bg-green-600 hover:bg-green-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Plus size={20} />
-              Add Center
-            </button>
-          </div>
-        </HeroSection>
+              },
+              variant: 'secondary',
+            },
+          ]}
+        />
 
         {/* Desktop Search Bar - Only visible on desktop/tablet */}
         {!isMobile && (
@@ -626,7 +616,7 @@ const DivingCenters = () => {
         ) : (
           divingCenters &&
           divingCenters.length > 0 && (
-            <div className='mb-4 sm:mb-6 lg:mb-8 mx-3 sm:mx-4 lg:mx-6 xl:mx-8'>
+            <div className='mb-4 sm:mb-6 lg:mb-8'>
               <div className='bg-white rounded-lg shadow-md p-2 sm:p-4 lg:p-6'>
                 <div className='flex flex-col lg:flex-row justify-between items-center gap-2 sm:gap-4'>
                   {/* Pagination Controls */}
@@ -713,7 +703,7 @@ const DivingCenters = () => {
         )}
 
         {/* Content Container */}
-        <div className='px-3 sm:px-4 lg:px-6 xl:px-8'>
+        <div>
           {error ? (
             <ErrorPage error={error} onRetry={() => window.location.reload()} />
           ) : isLoading ? (
@@ -726,12 +716,12 @@ const DivingCenters = () => {
             <>
               {/* Diving Centers List */}
               {viewMode === 'list' && (
-                <div className={`space-y-2 ${compactLayout ? 'view-mode-compact' : ''}`}>
+                <div className={`space-y-4 ${compactLayout ? 'view-mode-compact' : ''}`}>
                   {divingCenters?.map(center => (
                     <div
                       key={center.id}
-                      className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-blue-300 ${
-                        compactLayout ? 'p-3' : 'p-4'
+                      className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] hover:shadow-md transition-all duration-200 hover:border-blue-300 ${
+                        compactLayout ? 'p-4' : 'p-6'
                       }`}
                     >
                       {/* Main content row */}
@@ -893,7 +883,7 @@ const DivingCenters = () => {
                   {divingCenters?.map(center => (
                     <div
                       key={center.id}
-                      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 hover:scale-[1.02] ${
+                      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] overflow-hidden hover:shadow-lg transition-all duration-300 hover:scale-[1.02] ${
                         compactLayout ? 'p-4' : 'p-6'
                       }`}
                     >

From 3eda45a963bfc6814160944ad3f5fd842ee378be Mon Sep 17 00:00:00 2001
From: Johnbin89 <john_biniaris@hotmail.com>
Date: Wed, 25 Mar 2026 20:42:50 +0200
Subject: [PATCH 2/2] fix: lint errors

---
 .../DivingCentersResponsiveFilterBar.jsx      | 112 +++++++++---------
 frontend/src/components/PageHeader.jsx        |   9 +-
 frontend/src/pages/DiveRoutes.jsx             |   6 +-
 3 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
index cd3aff74..2fedc9ce 100644
--- a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
+++ b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
@@ -166,77 +166,77 @@ const DivingCentersResponsiveFilterBar = ({
         className={`bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40 ${className}`}
       >
         <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 p-4'>
-            {/* Quick Filters */}
-            {showQuickFilters && (
-              <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end overflow-x-auto'>
-                {reviewsEnabled && (
-                  <button
-                    onClick={() => onQuickFilter('min_rating')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilter === 'min_rating'
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                  >
-                    <Star className='h-4 w-4' />
-                    <span>4+ Stars</span>
-                  </button>
-                )}
+          {/* Quick Filters */}
+          {showQuickFilters && (
+            <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end overflow-x-auto'>
+              {reviewsEnabled && (
                 <button
-                  onClick={() => onQuickFilter('country')}
+                  onClick={() => onQuickFilter('min_rating')}
                   className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                    quickFilter === 'country'
+                    quickFilter === 'min_rating'
                       ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
                       : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
                   }`}
                 >
-                  <MapPin className='h-4 w-4' />
-                  <span>Greece</span>
+                  <Star className='h-4 w-4' />
+                  <span>4+ Stars</span>
                 </button>
-              </div>
-            )}
-
-            {/* Advanced Filters Toggle */}
-            {showAdvancedToggle && (
+              )}
               <button
-                onClick={onToggleFilters}
-                className='flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors'
+                onClick={() => onQuickFilter('country')}
+                className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                  quickFilter === 'country'
+                    ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                    : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                }`}
               >
-                <Filter className='h-4 w-4' />
-                {showFilters ? 'Hide Filters' : 'Show Filters'}
-                {activeFiltersCount > 0 && (
-                  <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1'>
-                    {activeFiltersCount}
-                  </span>
-                )}
+                <MapPin className='h-4 w-4' />
+                <span>Greece</span>
               </button>
-            )}
-          </div>
+            </div>
+          )}
+
+          {/* Advanced Filters Toggle */}
+          {showAdvancedToggle && (
+            <button
+              onClick={onToggleFilters}
+              className='flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors'
+            >
+              <Filter className='h-4 w-4' />
+              {showFilters ? 'Hide Filters' : 'Show Filters'}
+              {activeFiltersCount > 0 && (
+                <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1'>
+                  {activeFiltersCount}
+                </span>
+              )}
+            </button>
+          )}
+        </div>
 
         {/* Active Filters Display */}
         {activeFilters.length > 0 && (
           <div className='border-t border-gray-200 py-2 px-3 bg-blue-50'>
-              <div className='flex items-center gap-2 mb-1.5'>
-                <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
-              </div>
-              <div className='flex flex-wrap gap-1 justify-start'>
-                {activeFilters.map(filter => (
-                  <div
-                    key={filter.key}
-                    className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
+            <div className='flex items-center gap-2 mb-1.5'>
+              <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
+            </div>
+            <div className='flex flex-wrap gap-1 justify-start'>
+              {activeFilters.map(filter => (
+                <div
+                  key={filter.key}
+                  className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
+                >
+                  <span className='font-medium'>{filter.label}:</span>
+                  <span className='max-w-[100px] truncate'>{filter.value}</span>
+                  <button
+                    onClick={() => onFilterChange(filter.key, '')}
+                    className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
+                    title={`Remove ${filter.label} filter`}
                   >
-                    <span className='font-medium'>{filter.label}:</span>
-                    <span className='max-w-[100px] truncate'>{filter.value}</span>
-                    <button
-                      onClick={() => onFilterChange(filter.key, '')}
-                      className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
-                      title={`Remove ${filter.label} filter`}
-                    >
-                      <X className='h-2.5 w-2.5' />
-                    </button>
-                  </div>
-                ))}
-              </div>
+                    <X className='h-2.5 w-2.5' />
+                  </button>
+                </div>
+              ))}
+            </div>
           </div>
         )}
 
diff --git a/frontend/src/components/PageHeader.jsx b/frontend/src/components/PageHeader.jsx
index b880dfff..fad1c7d6 100644
--- a/frontend/src/components/PageHeader.jsx
+++ b/frontend/src/components/PageHeader.jsx
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import Breadcrumbs from './Breadcrumbs';
 
@@ -9,7 +8,13 @@ import Breadcrumbs from './Breadcrumbs';
  * A functional header for internal utility pages (Dives, Dive Sites, etc.)
  * that replaces marketing-heavy heroes.
  */
-const PageHeader = ({ title, titleIcon: TitleIcon, breadcrumbItems = [], actions = [], className = '' }) => {
+const PageHeader = ({
+  title,
+  titleIcon: TitleIcon,
+  breadcrumbItems = [],
+  actions = [],
+  className = '',
+}) => {
   return (
     <div className={`mb-8 ${className}`}>
       {/* Navigation Context */}
diff --git a/frontend/src/pages/DiveRoutes.jsx b/frontend/src/pages/DiveRoutes.jsx
index e1a77729..2a4c2bde 100644
--- a/frontend/src/pages/DiveRoutes.jsx
+++ b/frontend/src/pages/DiveRoutes.jsx
@@ -145,7 +145,11 @@ const DiveRoutes = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
-        <PageHeader title='Dive Routes' titleIcon={Route} breadcrumbItems={[{ label: 'Dive Routes' }]} />
+        <PageHeader
+          title='Dive Routes'
+          titleIcon={Route}
+          breadcrumbItems={[{ label: 'Dive Routes' }]}
+        />
 
         {/* Responsive Filter Bar */}
         <div className='mb-8'>