From 574d43adb4e0f9039f96518a9472a68a04fd9b27 Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Thu, 21 May 2026 15:24:31 +0400
Subject: [PATCH] feat: enhance industry detail and showcase components with
 responsive images and improved styles

---
 src/app/industries/[slug]/page.tsx            | 143 ++++++++----------
 .../robotics/FeaturedRobotsShowcase.tsx       |   3 +-
 src/components/robotics/IndustryUseCases.tsx  |  87 ++++++-----
 3 files changed, 109 insertions(+), 124 deletions(-)

diff --git a/src/app/industries/[slug]/page.tsx b/src/app/industries/[slug]/page.tsx
index a6412a8..cb3bad3 100644
--- a/src/app/industries/[slug]/page.tsx
+++ b/src/app/industries/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import Bot from 'lucide-react/dist/esm/icons/bot';
@@ -82,7 +83,6 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
   const ctaBody =
     content.ctaBody ??
     'Tell us about your space, workflow, and goals. Our Dubai team will recommend the best-fit robotics solution and arrange a live demo or quotation.';
-  const heroVisualRobots = content.suggestedRobots.slice(0, 3);
 
   return (
     <>
@@ -137,30 +137,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
                   </div>
                 </div>
 
-                {/* Right visual: stacked robot/family cards */}
-                <aside className="ip-hero-visual" aria-hidden>
-                  <div className="ip-hero-visual-head">
-                    <span className="ip-mono">YSL · UAE</span>
+                {/* Right visual: industry hero image */}
+                <aside className="ip-hero-visual">
+                  <Image
+                    src={industry.image}
+                    alt={industry.imageAlt}
+                    fill
+                    sizes="(max-width: 920px) 100vw, 520px"
+                    className="ip-hero-visual-img"
+                    style={{ objectFit: 'cover', objectPosition: 'center' }}
+                    priority
+                  />
+                  <span className="ip-hero-visual-overlay" aria-hidden />
+                  <div className="ip-hero-visual-meta">
                     <span className="ip-mono ip-live">
-                      <span className="ip-live-dot" />Available
+                      <span className="ip-live-dot" />Available · UAE
                     </span>
-                  </div>
-                  <ul className="ip-hero-stack">
-                    {heroVisualRobots.map((r, i) => (
-                      <li key={i} className="ip-hero-stack-card">
-                        <span className="ip-hero-stack-icon">
-                          <Bot size={18} strokeWidth={1.5} />
-                        </span>
-                        <div className="ip-hero-stack-meta">
-                          <span className="ip-hero-stack-brand">{r.brand}</span>
-                          <span className="ip-hero-stack-family">{r.family}</span>
-                        </div>
-                        <ArrowRight size={14} strokeWidth={1.6} />
-                      </li>
-                    ))}
-                  </ul>
-                  <div className="ip-hero-visual-foot">
-                    <span>Dubai Showroom · Live demo</span>
+                    <span className="ip-mono">Dubai Showroom · Live Demo</span>
                   </div>
                 </aside>
               </div>
@@ -451,22 +444,52 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
         }
         .ip-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
 
-        /* HERO RIGHT VISUAL */
+        /* HERO RIGHT VISUAL — industry image */
         .ip-hero-visual {
-          display: none;
           position: relative;
-          padding: 1.1rem 1.15rem 1.1rem;
+          display: block;
+          width: 100%;
+          aspect-ratio: 4 / 3;
           border-radius: 20px;
-          border: 1px solid rgba(74, 102, 216, 0.24);
-          background:
-            radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
-            linear-gradient(180deg, rgba(20, 19, 26, 0.88), rgba(8, 8, 12, 0.96));
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+          overflow: hidden;
+          border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(74, 102, 216, 0.20));
+          background: #0a0a0e;
+          box-shadow:
+            0 22px 60px rgba(0, 0, 0, 0.55),
+            inset 0 1px 0 rgba(255, 255, 255, 0.05),
+            0 0 28px color-mix(in srgb, var(--acc) 12%, transparent);
         }
-        .ip-hero-visual-head {
-          display: flex; align-items: center; justify-content: space-between;
-          padding-bottom: 0.75rem; margin-bottom: 0.85rem;
-          border-bottom: 1px solid rgba(222, 224, 240, 0.08);
+        .ip-hero-visual :global(.ip-hero-visual-img) {
+          transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+          filter: saturate(0.95) brightness(0.88);
+        }
+        .ip-hero-visual:hover :global(.ip-hero-visual-img) {
+          transform: scale(1.04);
+        }
+        .ip-hero-visual-overlay {
+          position: absolute;
+          inset: 0;
+          background:
+            linear-gradient(180deg, rgba(10, 10, 14, 0.15) 0%, rgba(10, 10, 14, 0.05) 35%, rgba(10, 10, 14, 0.80) 100%),
+            radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%);
+          pointer-events: none;
+        }
+        .ip-hero-visual-meta {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 2;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.6rem;
+          padding: 0.9rem 1.05rem;
+          border-top: 1px solid rgba(222, 224, 240, 0.10);
+          background: linear-gradient(180deg, rgba(10, 10, 14, 0.0), rgba(10, 10, 14, 0.55));
+          backdrop-filter: blur(6px);
+          -webkit-backdrop-filter: blur(6px);
         }
         .ip-mono {
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -477,52 +500,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
           width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
           box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
         }
-        .ip-hero-stack {
-          list-style: none; margin: 0; padding: 0;
-          display: flex; flex-direction: column; gap: 0.55rem;
-        }
-        .ip-hero-stack-card {
-          display: grid;
-          grid-template-columns: 36px minmax(0, 1fr) auto;
-          align-items: center;
-          gap: 0.7rem;
-          padding: 0.7rem 0.85rem;
-          border-radius: 12px;
-          border: 1px solid rgba(222, 224, 240, 0.08);
-          background: linear-gradient(135deg, rgba(22, 21, 30, 0.85), rgba(10, 10, 14, 0.92));
-          color: #DEE0F0;
-          transition: border-color 0.3s, transform 0.3s;
-        }
-        .ip-hero-stack-card:hover {
-          border-color: color-mix(in srgb, var(--acc) 40%, transparent);
-          transform: translateX(2px);
-        }
-        .ip-hero-stack-icon {
-          display: inline-flex; align-items: center; justify-content: center;
-          width: 36px; height: 36px; border-radius: 10px;
-          background: color-mix(in srgb, var(--acc) 14%, rgba(14, 13, 18, 0.6));
-          border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
-          color: color-mix(in srgb, var(--acc) 78%, white);
-        }
-        .ip-hero-stack-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
-        .ip-hero-stack-brand {
-          font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
-          color: color-mix(in srgb, var(--acc) 65%, white); font-weight: 800;
-        }
-        .ip-hero-stack-family {
-          font-size: 0.92rem; font-weight: 600; color: #FFFFFF;
-          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-        }
-        .ip-hero-visual-foot {
-          margin-top: 0.85rem; padding-top: 0.7rem;
-          border-top: 1px solid rgba(222, 224, 240, 0.08);
-          font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
-          color: #8891C7; font-weight: 700;
-        }
 
         @media (min-width: 920px) {
-          .ip-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
-          .ip-hero-visual { display: block; }
+          .ip-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
+          .ip-hero-visual { aspect-ratio: 5 / 6; max-width: 460px; margin-left: auto; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .ip-hero-visual :global(.ip-hero-visual-img) { transition: none !important; }
+          .ip-hero-visual:hover :global(.ip-hero-visual-img) { transform: none; }
         }
 
         /* TRUST ROW */
diff --git a/src/components/robotics/FeaturedRobotsShowcase.tsx b/src/components/robotics/FeaturedRobotsShowcase.tsx
index 4823157..39fb30a 100644
--- a/src/components/robotics/FeaturedRobotsShowcase.tsx
+++ b/src/components/robotics/FeaturedRobotsShowcase.tsx
@@ -1189,6 +1189,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
           }
         }
         @media (max-width: 600px) {
+          .frs { gap: 0.75rem; }
           .frs-hero { border-radius: 22px; padding: 1.1rem 1rem; }
           .frs-name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
           .frs-rail {
@@ -1198,7 +1199,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
             scroll-snap-type: x mandatory;
             scrollbar-width: none;
             -webkit-overflow-scrolling: touch;
-            padding-bottom: 0.5rem;
+            padding-bottom: 0;
             margin: 0 calc(-1 * var(--page-pad, 1rem));
             padding-left: var(--page-pad, 1rem);
             padding-right: var(--page-pad, 1rem);
diff --git a/src/components/robotics/IndustryUseCases.tsx b/src/components/robotics/IndustryUseCases.tsx
index 14a8cbb..a4c11fb 100644
--- a/src/components/robotics/IndustryUseCases.tsx
+++ b/src/components/robotics/IndustryUseCases.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { motion } from 'framer-motion';
+import Image from 'next/image';
 import Link from 'next/link';
 import Building2 from 'lucide-react/dist/esm/icons/building-2';
 import Utensils from 'lucide-react/dist/esm/icons/utensils';
@@ -213,11 +214,18 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
         style={{ ['--accent' as string]: industry.accent }}
         aria-label={`Learn more about robotics for ${industry.name}`}
       >
-        <div className="ic-media" aria-hidden>
-          <span className="ic-media-glow" />
-          <span className="ic-media-grid" />
-          <span className="ic-media-icon">
-            <Icon size={36} strokeWidth={1.4} />
+        <div className="ic-media">
+          <Image
+            src={industry.image}
+            alt={industry.imageAlt}
+            fill
+            sizes="(max-width: 520px) 100vw, (max-width: 1000px) 50vw, (max-width: 1300px) 33vw, 25vw"
+            className="ic-media-img"
+            style={{ objectFit: 'cover', objectPosition: 'center' }}
+          />
+          <span className="ic-media-overlay" aria-hidden />
+          <span className="ic-media-icon" aria-hidden>
+            <Icon size={18} strokeWidth={1.6} />
           </span>
         </div>
 
@@ -272,60 +280,50 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
         .ic-media {
           position: relative;
           aspect-ratio: 16 / 10;
-          background:
-            radial-gradient(ellipse 70% 80% at 30% 30%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
-            linear-gradient(135deg, rgba(20, 22, 36, 0.95) 0%, rgba(10, 11, 18, 0.98) 100%);
           overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+          background: #0a0a0e;
           border-bottom: 1px solid rgba(222, 224, 240, 0.06);
         }
-        .ic-media-glow {
-          position: absolute;
-          width: 60%;
-          height: 80%;
-          left: 20%;
-          top: 10%;
-          border-radius: 999px;
-          background: radial-gradient(circle at 50% 50%, rgba(74, 102, 216, 0.22), transparent 65%);
-          filter: blur(22px);
-          pointer-events: none;
+        .ic-media :global(.ic-media-img) {
+          transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
+          filter: saturate(0.92) brightness(0.85);
         }
-        .ic-media-grid {
+        .ic:hover :global(.ic-media-img),
+        .ic:focus-visible :global(.ic-media-img) {
+          transform: scale(1.06);
+          filter: saturate(1) brightness(0.95);
+        }
+        .ic-media-overlay {
           position: absolute;
           inset: 0;
-          background-image:
-            linear-gradient(rgba(222, 224, 240, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(222, 224, 240, 0.05) 1px, transparent 1px);
-          background-size: 32px 32px;
-          mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
-          -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
+          background:
+            linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.05) 40%, rgba(10, 10, 14, 0.85) 100%),
+            radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
           pointer-events: none;
         }
         .ic-media-icon {
-          position: relative;
+          position: absolute;
+          top: 0.7rem;
+          left: 0.7rem;
           z-index: 2;
           display: inline-flex;
           align-items: center;
           justify-content: center;
-          width: 72px;
-          height: 72px;
-          border-radius: 18px;
-          color: color-mix(in srgb, var(--accent) 80%, white);
-          background:
-            radial-gradient(ellipse 60% 60% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
-            rgba(14, 13, 18, 0.65);
-          border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
-          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
-          transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
-            box-shadow 0.4s, border-color 0.4s;
+          width: 36px;
+          height: 36px;
+          border-radius: 10px;
+          color: color-mix(in srgb, var(--accent) 78%, white);
+          background: rgba(10, 10, 14, 0.7);
+          border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+          backdrop-filter: blur(8px);
+          -webkit-backdrop-filter: blur(8px);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
+          transition: border-color 0.4s, box-shadow 0.4s;
         }
         .ic:hover .ic-media-icon,
         .ic:focus-visible .ic-media-icon {
-          transform: scale(1.08);
-          border-color: color-mix(in srgb, var(--accent) 60%, transparent);
-          box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
+          border-color: color-mix(in srgb, var(--accent) 65%, transparent);
+          box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
         }
 
         /* BODY */
@@ -380,8 +378,9 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
 
         @media (prefers-reduced-motion: reduce) {
           .ic, .ic-media-icon, .ic-cta-arrow { transition: none !important; }
+          .ic :global(.ic-media-img) { transition: none !important; }
           .ic:hover, .ic:focus-visible { transform: none; }
-          .ic:hover .ic-media-icon, .ic:focus-visible .ic-media-icon { transform: none; }
+          .ic:hover :global(.ic-media-img), .ic:focus-visible :global(.ic-media-img) { transform: none; }
         }
       `}</style>
     </motion.div>