refactor: update ProjectCarousel to use formatDates utility and enhance layout with section label

Author: ThomasEgMatthiesen

src/app/globals.css

@@ -24,4 +24,13 @@
         --swiper-navigation-size: 24px !important;
         --swiper-navigation-sides-offset: 16px !important;
     }
+}
+
+.swiper-button-next, 
+.swiper-button-prev {
+    display: none !important;
+}
+
+.swiper-button-disabled {
+    opacity: 1 !important;
 }

src/components/BackgroundImage.js

@@ -4,30 +4,24 @@ export default function BackgroundImage({ portrait, landscape, visible = true })
             <source media="(max-width: 768px)" srcSet={portrait} />
             <img src={landscape} className="size-full object-cover opacity-15" loading="lazy" alt="" />
 
-            {/* ── Grain overlay ── */}
+            {/* Grain overlay */}
             <div
-              className="pointer-events-none absolute inset-0 opacity-25"
+              className="pointer-events-none absolute inset-0 opacity-10"
               style={{
                 backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
                 backgroundRepeat: 'repeat',
                 backgroundSize: '128px',
               }}
             />
 
-            {/* ── Vignettes ── */}
+            {/* Vignettes */}
             <div
               className="pointer-events-none absolute inset-0"
-              style={{
-                background:
-                  'linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.2) 45%, transparent 70%)',
-              }}
+              style={{ background: 'linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.2) 45%, transparent 70%)', }}
             />
             <div
               className="pointer-events-none absolute inset-0"
-              style={{
-                background:
-                  'linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 30%)',
-              }}
+              style={{ background: 'linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 30%)', }}
             />
         </picture>
     );

src/components/ProjectCarousel/ProjectCarousel.js

@@ -3,22 +3,13 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination, Navigation, Mousewheel, EffectFade } from 'swiper/modules';
 import BackgroundImage from '../BackgroundImage';
-import ProjectStatus from '../ProjectGrid/ProjectStatus';
+import { formatDates } from '@/utilities/formatDates';
 
 import 'swiper/css';
 import 'swiper/css/pagination';
 import 'swiper/css/navigation';
 import 'swiper/css/effect-fade';
 
-// ─── Helper ───────────────────────────────────────────────────────────────────
-function formatDateRange(start, end) {
-  const opts = { day: 'numeric', month: 'short', year: 'numeric' };
-  const s = new Date(start).toLocaleDateString('da-DK', opts);
-  const e = new Date(end).toLocaleDateString('da-DK', opts);
-  return `${s} – ${e}`;
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
 export default function ProjectCarousel({ projects }) {
   const total = projects.length;
 
@@ -64,6 +55,11 @@ export default function ProjectCarousel({ projects }) {
                 </span>
               </div>
 
+              {/* Section label */}
+              <p className="text-paper/50 text-[10px] uppercase tracking-[0.25em] mb-2">
+                Kommende projekter
+              </p>
+
               {/* Big title */}
               <h2
                 className="text-paper font-black uppercase leading-none"
@@ -72,17 +68,10 @@ export default function ProjectCarousel({ projects }) {
                 {project.title}
               </h2>
 
-              {/* Status badge */}
-              {project.startDate && (
-                <div className="mt-3">
-                  <ProjectStatus startDate={project.startDate} endDate={project.endDate} />
-                </div>
-              )}
-
               {/* Date & location */}
               <div className="mt-2">
                 <p className="text-paper text-xs tracking-widest">
-                  {formatDateRange(project.startDate, project.endDate)}
+                  {formatDates(project.startDate, project.endDate)}
                 </p>
                 {project.location && (
                   <p className="text-paper/50 text-[11px] mt-1 tracking-wider">
@@ -121,35 +110,6 @@ export default function ProjectCarousel({ projects }) {
           Næste
         </span>
       </button>
-
-      {/* ── Styles ── */}
-      <style>{`
-        .swiper-pagination-progressbar {
-          display: none;
-        }
-        .swiper-pagination-custom .swiper-pagination-bullet {
-          width: 6px;
-          height: 6px;
-          border-radius: 9999px;
-          background: rgba(var(--color-paper-rgb, 255 255 255) / 0.5);
-          transition: all 0.3s ease;
-          display: inline-block;
-          cursor: pointer;
-        }
-        .swiper-pagination-custom .swiper-pagination-bullet-active {
-          width: 24px;
-          height: 2px;
-          border-radius: 2px;
-          background: var(--color-paper, #fff);
-        }
-        .swiper-button-next,
-        .swiper-button-prev {
-          display: none !important;
-        }
-        .swiper-button-disabled {
-          opacity: 1 !important;
-        }
-      `}</style>
     </section>
   );
 }