hazem/yslootahrobotics
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance industry detail and showcase components with responsive images and improved styles
Some checks are pending
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Najjar\NajjarV02 2026-05-21 15:24:31 +04:00
parent 7c3b42e651
commit 574d43adb4
3 changed files with 109 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/app/industries/[slug]/page.tsx
View File

@ -1,4 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import Bot from 'lucide-react/dist/esm/icons/bot'; import Bot from 'lucide-react/dist/esm/icons/bot';
@ -82,7 +83,6 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
const ctaBody = const ctaBody =
content.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.'; '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 ( return (
<> <>
@ -137,30 +137,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
</div> </div>
</div> </div>
{/* Right visual: stacked robot/family cards */} {/* Right visual: industry hero image */}
<aside className="ip-hero-visual" aria-hidden> <aside className="ip-hero-visual">
<div className="ip-hero-visual-head"> <Image
<span className="ip-mono">YSL · UAE</span> 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-mono ip-live">
<span className="ip-live-dot" />Available <span className="ip-live-dot" />Available · UAE
</span> </span>
</div> <span className="ip-mono">Dubai Showroom · Live Demo</span>
<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>
</div> </div>
</aside> </aside>
</div> </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; } .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 { .ip-hero-visual {
display: none;
position: relative; position: relative;
padding: 1.1rem 1.15rem 1.1rem; display: block;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 20px; border-radius: 20px;
border: 1px solid rgba(74, 102, 216, 0.24); overflow: hidden;
background: border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(74, 102, 216, 0.20));
radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%), background: #0a0a0e;
linear-gradient(180deg, rgba(20, 19, 26, 0.88), rgba(8, 8, 12, 0.96)); box-shadow:
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); 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 { .ip-hero-visual :global(.ip-hero-visual-img) {
display: flex; align-items: center; justify-content: space-between; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
padding-bottom: 0.75rem; margin-bottom: 0.85rem; filter: saturate(0.95) brightness(0.88);
border-bottom: 1px solid rgba(222, 224, 240, 0.08); }
.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 { .ip-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 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; width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
box-shadow: 0 0 10px rgba(127, 214, 208, 0.7); 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) { @media (min-width: 920px) {
.ip-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .ip-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ip-hero-visual { display: block; } .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 */ /* TRUST ROW */

3
src/components/robotics/FeaturedRobotsShowcase.tsx
View File

@ -1189,6 +1189,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.frs { gap: 0.75rem; }
.frs-hero { border-radius: 22px; padding: 1.1rem 1rem; } .frs-hero { border-radius: 22px; padding: 1.1rem 1rem; }
.frs-name { font-size: clamp(1.7rem, 8vw, 2.4rem); } .frs-name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
.frs-rail { .frs-rail {
@ -1198,7 +1199,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scrollbar-width: none; scrollbar-width: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding-bottom: 0.5rem; padding-bottom: 0;
margin: 0 calc(-1 * var(--page-pad, 1rem)); margin: 0 calc(-1 * var(--page-pad, 1rem));
padding-left: var(--page-pad, 1rem); padding-left: var(--page-pad, 1rem);
padding-right: var(--page-pad, 1rem); padding-right: var(--page-pad, 1rem);

87
src/components/robotics/IndustryUseCases.tsx
View File

@ -1,6 +1,7 @@
'use client'; 'use client';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import Building2 from 'lucide-react/dist/esm/icons/building-2'; import Building2 from 'lucide-react/dist/esm/icons/building-2';
import Utensils from 'lucide-react/dist/esm/icons/utensils'; 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 }} style={{ ['--accent' as string]: industry.accent }}
aria-label={`Learn more about robotics for ${industry.name}`} aria-label={`Learn more about robotics for ${industry.name}`}
> >
<div className="ic-media" aria-hidden> <div className="ic-media">
<span className="ic-media-glow" /> <Image
<span className="ic-media-grid" /> src={industry.image}
<span className="ic-media-icon"> alt={industry.imageAlt}
<Icon size={36} strokeWidth={1.4} /> 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> </span>
</div> </div>
@ -272,60 +280,50 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
.ic-media { .ic-media {
position: relative; position: relative;
aspect-ratio: 16 / 10; 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; overflow: hidden;
display: flex; background: #0a0a0e;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(222, 224, 240, 0.06); border-bottom: 1px solid rgba(222, 224, 240, 0.06);
} }
.ic-media-glow { .ic-media :global(.ic-media-img) {
position: absolute; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
width: 60%; filter: saturate(0.92) brightness(0.85);
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-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; position: absolute;
inset: 0; inset: 0;
background-image: background:
linear-gradient(rgba(222, 224, 240, 0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.05) 40%, rgba(10, 10, 14, 0.85) 100%),
linear-gradient(90deg, rgba(222, 224, 240, 0.05) 1px, transparent 1px); radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
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%);
pointer-events: none; pointer-events: none;
} }
.ic-media-icon { .ic-media-icon {
position: relative; position: absolute;
top: 0.7rem;
left: 0.7rem;
z-index: 2; z-index: 2;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 72px; width: 36px;
height: 72px; height: 36px;
border-radius: 18px; border-radius: 10px;
color: color-mix(in srgb, var(--accent) 80%, white); color: color-mix(in srgb, var(--accent) 78%, white);
background: background: rgba(10, 10, 14, 0.7);
radial-gradient(ellipse 60% 60% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
rgba(14, 13, 18, 0.65); backdrop-filter: blur(8px);
border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), transition: border-color 0.4s, box-shadow 0.4s;
box-shadow 0.4s, border-color 0.4s;
} }
.ic:hover .ic-media-icon, .ic:hover .ic-media-icon,
.ic:focus-visible .ic-media-icon { .ic:focus-visible .ic-media-icon {
transform: scale(1.08); border-color: color-mix(in srgb, var(--accent) 65%, transparent);
border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
} }
/* BODY */ /* BODY */
@ -380,8 +378,9 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.ic, .ic-media-icon, .ic-cta-arrow { transition: none !important; } .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: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> `}</style>
</motion.div> </motion.div>