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

Refactor code structure for improved readability and maintainability
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 14:54:20 +04:00
parent b5876aead5
commit 7c3b42e651
21 changed files with 692 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/industries/[slug]/page.tsx
+414 -265
View File
@@ -15,6 +15,10 @@ import Bell from 'lucide-react/dist/esm/icons/bell';
import UtensilsCrossed from 'lucide-react/dist/esm/icons/utensils-crossed';
import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right';
import ArrowRight from 'lucide-react/dist/esm/icons/arrow-right';
import Check from 'lucide-react/dist/esm/icons/check';
import MapPin from 'lucide-react/dist/esm/icons/map-pin';
import Headphones from 'lucide-react/dist/esm/icons/headphones';
import PlayCircle from 'lucide-react/dist/esm/icons/play-circle';
import { Navbar } from '@/components/Navbar';
import { FooterAndContact } from '@/components/FooterAndContact';
import { MotionSection } from '@/components/ui/MotionSection';
@@ -54,20 +58,18 @@ export async function generateMetadata({ params }: { params: Promise<Params> }):
title: content.seoTitle,
description: content.seoDescription,
alternates: { canonical: url },
openGraph: {
title: content.seoTitle,
description: content.seoDescription,
url,
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: content.seoTitle,
description: content.seoDescription,
},
openGraph: { title: content.seoTitle, description: content.seoDescription, url, type: 'website' },
twitter: { card: 'summary_large_image', title: content.seoTitle, description: content.seoDescription },
};
}
const TRUST_DEFAULT = [
{ icon: MapPin, label: 'UAE-ready', sub: 'Deployment across the UAE' },
{ icon: Headphones, label: 'Dubai support', sub: 'Local robotics team' },
{ icon: Bot, label: 'Robot families', sub: 'Pudu + Unitree' },
{ icon: PlayCircle, label: 'Demo available', sub: 'Showroom or on-site' },
];
export default async function IndustryDetailPage({ params }: { params: Promise<Params> }) {
const { slug } = await params;
const industry = getIndustryBySlug(slug);
@@ -76,13 +78,18 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
if (!content) notFound();
const accent = industry.accent;
const ctaTitle = content.ctaTitle ?? 'Find the right robot for your venue.';
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 (
<>
<Navbar />
<main style={{ paddingTop: 'clamp(5rem, 9vw, 7rem)', paddingBottom: 'clamp(2rem, 5vw, 4rem)' }}>
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(2.5rem, 5vw, 4rem)' }}>
<main className="ip-main">
<div className="container-wide ip-stack">
{/* BREADCRUMBS */}
<nav aria-label="Breadcrumb" className="ip-breadcrumbs">
<ol>
@@ -98,14 +105,28 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<MotionSection>
<section className="ip-hero" style={{ ['--acc' as string]: accent }}>
<div className="ip-hero-glow" aria-hidden />
<div className="ip-hero-glow-b" aria-hidden />
<div className="ip-hero-grid" aria-hidden />
<div className="ip-hero-inner">
<div className="ip-hero-copy">
<span className="eyebrow">{industry.name}</span>
<span className="eyebrow ip-hero-eyebrow">
<span className="ip-dot" />
Industry Solution · {industry.name}
</span>
<h1 className="ip-hero-title">
<span className="text-gradient">{content.heroTitle}</span>
</h1>
<p className="ip-hero-sub">{content.heroSubtitle}</p>
{content.heroTags && content.heroTags.length > 0 && (
<ul className="ip-hero-tags" role="list">
{content.heroTags.map((t) => (
<li key={t} className="ip-hero-tag">{t}</li>
))}
</ul>
)}
<div className="ip-hero-actions">
<CTAButton href="/book-demo/" variant="primary" size="lg" arrow="up-right">
Book a Demo
@@ -115,20 +136,55 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
</CTAButton>
</div>
</div>
<aside className="ip-hero-card" aria-hidden>
<div className="ip-hero-card-tag">YSL · UAE</div>
<div className="ip-hero-card-icon">
<Bot size={40} strokeWidth={1.4} />
{/* 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>
<span className="ip-mono ip-live">
<span className="ip-live-dot" />Available
</span>
</div>
<div className="ip-hero-card-meta">
<span>Industry</span>
<strong>{industry.name}</strong>
<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>
</aside>
</div>
</section>
</MotionSection>
{/* TRUST ROW */}
<MotionSection>
<ul className="ip-trust" role="list">
{TRUST_DEFAULT.map((t) => {
const Icon = t.icon;
return (
<li key={t.label} className="ip-trust-card">
<span className="ip-trust-icon"><Icon size={14} strokeWidth={1.7} /></span>
<div>
<span className="ip-trust-label">{t.label}</span>
<span className="ip-trust-sub">{t.sub}</span>
</div>
</li>
);
})}
</ul>
</MotionSection>
{/* PROBLEM */}
<MotionSection>
<section className="ip-block">
@@ -164,6 +220,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
</span>
<h3>{s.title}</h3>
<p>{s.body}</p>
{s.suitableFor && s.suitableFor.length > 0 && (
<div className="ip-solution-tags">
<span className="ip-tag-label">Suitable for</span>
<ul role="list">
{s.suitableFor.map((t) => (
<li key={t}>{t}</li>
))}
</ul>
</div>
)}
</article>
);
})}
@@ -181,7 +247,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<ul className="ip-usecases" role="list">
{content.useCases.map((u, i) => (
<li key={i} className="ip-usecase">
<span className="ip-usecase-bullet" aria-hidden />
<span className="ip-usecase-num">{String(i + 1).padStart(2, '0')}</span>
<span>{u}</span>
</li>
))}
@@ -199,6 +265,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<div className="ip-benefits">
{content.benefits.map((b, i) => (
<div key={i} className="ip-benefit">
<span className="ip-benefit-check"><Check size={12} strokeWidth={2.4} /></span>
<h3>{b.title}</h3>
<p>{b.body}</p>
</div>
@@ -217,9 +284,19 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<div className="ip-robots">
{content.suggestedRobots.map((r, i) => (
<article key={i} className="ip-robot">
<span className="ip-robot-brand">{r.brand}</span>
<div className="ip-robot-head">
<span className="ip-robot-brand">{r.brand}</span>
<span className="ip-robot-arrow"><ArrowRight size={14} strokeWidth={1.8} /></span>
</div>
<h3>{r.family}</h3>
<p>{r.body}</p>
{r.chips && r.chips.length > 0 && (
<ul className="ip-robot-chips" role="list">
{r.chips.map((c) => (
<li key={c}>{c}</li>
))}
</ul>
)}
<Link href="/robots/" className="ip-robot-link">
Browse robots <ArrowRight size={13} strokeWidth={2} />
</Link>
@@ -233,13 +310,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<MotionSection>
<section className="ip-cta">
<div className="ip-cta-glow" aria-hidden />
<div className="ip-cta-grid" aria-hidden />
<div className="ip-cta-inner">
<div className="ip-cta-text">
<span className="eyebrow">Next step</span>
<h2 className="ip-cta-title">Find the right robot for your venue.</h2>
<p>
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.
</p>
<h2 className="ip-cta-title">{ctaTitle}</h2>
<p>{ctaBody}</p>
</div>
<div className="ip-cta-actions">
<CTAButton href="/book-demo/" variant="primary" size="lg" arrow="up-right">
@@ -268,6 +344,18 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
<FooterAndContact />
<style>{`
.ip-main {
padding-top: clamp(5rem, 9vw, 7rem);
padding-bottom: clamp(2rem, 5vw, 4rem);
}
.ip-stack {
display: flex;
flex-direction: column;
gap: clamp(2.5rem, 5vw, 4.25rem);
scroll-margin-top: clamp(80px, 12vh, 120px);
}
/* BREADCRUMBS */
.ip-breadcrumbs ol {
list-style: none;
margin: 0;
@@ -276,16 +364,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8891C7;
}
.ip-breadcrumbs a {
color: #8891C7;
text-decoration: none;
transition: color 0.25s;
}
.ip-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
.ip-breadcrumbs a:hover { color: #FFFFFF; }
.ip-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
.ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
@@ -294,28 +378,28 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-hero {
position: relative;
overflow: hidden;
border-radius: 24px;
border: 1px solid rgba(74, 102, 216, 0.18);
border-radius: 26px;
border: 1px solid rgba(74, 102, 216, 0.20);
background:
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.18), transparent 55%),
linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ip-hero-glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 999px;
top: -180px;
right: -160px;
background: radial-gradient(circle, color-mix(in srgb, var(--acc) 35%, transparent), transparent 70%);
filter: blur(110px);
opacity: 0.6;
pointer-events: none;
position: absolute; width: 540px; height: 540px; border-radius: 999px;
top: -200px; right: -160px;
background: radial-gradient(circle, color-mix(in srgb, var(--acc) 38%, transparent), transparent 70%);
filter: blur(110px); opacity: 0.6; pointer-events: none;
}
.ip-hero-glow-b {
position: absolute; width: 460px; height: 460px; border-radius: 999px;
bottom: -200px; left: -150px;
background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
filter: blur(110px); opacity: 0.5; pointer-events: none;
}
.ip-hero-grid {
position: absolute;
inset: 0;
position: absolute; inset: 0;
background:
linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
@@ -325,283 +409,353 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
pointer-events: none;
}
.ip-hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
padding: clamp(1.8rem, 4vw, 3.2rem);
align-items: center;
}
.ip-hero-copy { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.ip-hero-copy { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; min-width: 0; }
.ip-hero-eyebrow {
display: inline-flex; align-items: center; gap: 0.55rem;
width: fit-content;
}
.ip-dot {
width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
}
.ip-hero-title {
margin: 0;
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1.05;
font-weight: 300;
letter-spacing: -0.03em;
color: #FFFFFF;
line-height: 1.05; font-weight: 300; letter-spacing: -0.03em; color: #FFFFFF;
}
.ip-hero-title .text-gradient { font-weight: 500; }
.ip-hero-sub {
margin: 0;
color: #DEE0F0;
font-size: clamp(0.95rem, 1.8vw, 1.1rem);
line-height: 1.65;
margin: 0; color: #DEE0F0;
font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
}
.ip-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; }
.ip-hero-tags {
list-style: none; margin: 0.25rem 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ip-hero-tag {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.35rem 0.65rem;
border-radius: 999px;
border: 1px solid rgba(120, 140, 255, 0.28);
background: rgba(58, 85, 196, 0.12);
color: #DEE0F0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.ip-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.ip-hero-card {
/* HERO RIGHT VISUAL */
.ip-hero-visual {
display: none;
position: relative;
padding: 1.1rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(74, 102, 216, 0.22);
padding: 1.1rem 1.15rem 1.1rem;
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) 18%, transparent), transparent 60%),
linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(8, 8, 12, 0.95));
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);
}
.ip-hero-card-tag {
.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-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem;
letter-spacing: 0.32em;
font-weight: 800;
color: #DEE0F0;
font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #DEE0F0;
}
.ip-hero-card-icon {
display: flex;
.ip-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
.ip-live-dot {
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;
justify-content: center;
padding: 1.2rem 0;
color: color-mix(in srgb, var(--acc) 75%, white);
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-card-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding-top: 0.6rem;
.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;
}
.ip-hero-card-meta span {
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #8891C7;
font-weight: 700;
}
.ip-hero-card-meta strong { color: #FFFFFF; font-size: 0.95rem; font-weight: 600; }
@media (min-width: 920px) {
.ip-hero-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.ip-hero-card { display: block; }
.ip-hero-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ip-hero-visual { display: block; }
}
/* TRUST ROW */
.ip-trust {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.ip-trust-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.75rem;
padding: 0.85rem 1rem;
border-radius: 14px;
border: 1px solid rgba(120, 140, 255, 0.22);
background: linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
align-items: center;
}
.ip-trust-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 10px;
color: #DEE0F0;
background: rgba(74, 102, 216, 0.18);
border: 1px solid rgba(74, 102, 216, 0.45);
}
.ip-trust-label {
display: block;
font-size: 0.78rem; font-weight: 600; color: #FFFFFF;
letter-spacing: -0.005em;
}
.ip-trust-sub {
display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
}
@media (min-width: 820px) {
.ip-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
}
/* BLOCKS */
.ip-block { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.5rem); }
.ip-block-head { display: flex; flex-direction: column; gap: 0.5rem; max-width: 720px; }
.ip-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
.ip-block-head { display: flex; flex-direction: column; gap: 0.55rem; max-width: 760px; }
.ip-block-title {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-weight: 400;
letter-spacing: -0.02em;
color: #FFFFFF;
line-height: 1.15;
font-size: clamp(1.55rem, 3vw, 2.1rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.15;
}
/* PROBLEMS */
/* PROBLEM */
.ip-problems {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem;
}
@media (min-width: 720px) {
.ip-problems { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
.ip-problem {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
padding: 1rem 1.1rem;
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem;
padding: 1.05rem 1.15rem;
border-radius: 16px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(20, 19, 26, 0.72), rgba(10, 10, 14, 0.92));
background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
transition: border-color 0.3s, transform 0.3s;
}
.ip-problem:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
.ip-problem-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.22em;
font-weight: 800;
color: #8891C7;
padding-top: 0.15rem;
}
.ip-problem p {
margin: 0;
color: #DEE0F0;
font-size: 0.92rem;
line-height: 1.55;
font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800;
color: #8891C7; padding-top: 0.15rem;
}
.ip-problem p { margin: 0; color: #DEE0F0; font-size: 0.92rem; line-height: 1.55; }
/* SOLUTIONS */
.ip-solutions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
}
@media (min-width: 640px) { .ip-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ip-solutions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ip-solution {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1.1rem 1.15rem 1.15rem;
border-radius: 16px;
display: flex; flex-direction: column; gap: 0.65rem;
padding: 1.2rem 1.2rem 1.25rem;
border-radius: 18px;
border: 1px solid rgba(222, 224, 240, 0.10);
background:
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.88), rgba(10, 10, 14, 0.95));
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-solution:hover {
transform: translateY(-2px);
border-color: rgba(74, 102, 216, 0.4);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 22px rgba(58, 85, 196, 0.18);
transform: translateY(-3px);
border-color: rgba(74, 102, 216, 0.42);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(58, 85, 196, 0.18);
}
.ip-solution-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
color: color-mix(in srgb, var(--acc) 80%, white);
border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.55));
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
color: color-mix(in srgb, var(--acc) 82%, white);
border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
background: color-mix(in srgb, var(--acc) 12%, rgba(14, 13, 18, 0.6));
}
.ip-solution h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.005em;
margin: 0; font-size: 1.02rem; font-weight: 600;
color: #FFFFFF; letter-spacing: -0.005em;
}
.ip-solution p {
margin: 0;
color: #C9CCDE;
font-size: 0.85rem;
line-height: 1.55;
.ip-solution p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.55; flex: 1; }
.ip-solution-tags {
display: flex; flex-direction: column; gap: 0.4rem;
padding-top: 0.7rem; border-top: 1px solid rgba(222, 224, 240, 0.07);
}
.ip-tag-label {
font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
font-weight: 800; color: #8891C7;
}
.ip-solution-tags ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.ip-solution-tags li {
font-size: 0.7rem; font-weight: 600; color: #DEE0F0;
padding: 0.2rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(222, 224, 240, 0.10);
background: rgba(20, 19, 26, 0.65);
}
/* USE CASES */
.ip-usecases {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.6rem;
}
@media (min-width: 720px) {
.ip-usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem;
}
@media (min-width: 640px) { .ip-usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } }
@media (min-width: 1000px) { .ip-usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-usecase {
display: grid;
grid-template-columns: 10px minmax(0, 1fr);
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem;
align-items: center;
gap: 0.8rem;
padding: 0.85rem 1rem;
padding: 0.95rem 1.05rem;
border-radius: 14px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(18, 18, 26, 0.7), rgba(8, 8, 12, 0.88));
color: #DEE0F0;
font-size: 0.92rem;
background: linear-gradient(135deg, rgba(18, 18, 26, 0.78), rgba(8, 8, 12, 0.92));
color: #DEE0F0; font-size: 0.92rem; line-height: 1.45;
transition: border-color 0.3s, transform 0.3s;
}
.ip-usecase-bullet {
width: 8px;
height: 8px;
border-radius: 999px;
background: #4a66d8;
box-shadow: 0 0 12px rgba(74, 102, 216, 0.7);
.ip-usecase:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateX(2px); }
.ip-usecase-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #8891C7;
}
/* BENEFITS */
.ip-benefits {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem;
}
@media (min-width: 640px) { .ip-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-benefit {
padding: 1.1rem 1.15rem;
position: relative;
padding: 1.15rem 1.2rem 1.1rem;
border-radius: 16px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.92));
background: linear-gradient(135deg, rgba(20, 19, 26, 0.82), rgba(10, 10, 14, 0.94));
transition: border-color 0.3s, transform 0.3s;
}
.ip-benefit:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
.ip-benefit-check {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px;
background: rgba(127, 214, 208, 0.18);
border: 1px solid rgba(127, 214, 208, 0.4);
color: #7FD6D0;
margin-bottom: 0.55rem;
}
.ip-benefit h3 {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 600;
color: #FFFFFF;
}
.ip-benefit p {
margin: 0;
color: #C9CCDE;
font-size: 0.85rem;
line-height: 1.5;
margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 600; color: #FFFFFF;
}
.ip-benefit p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.5; }
/* SUGGESTED ROBOTS */
.ip-robots {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.95rem;
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
}
@media (min-width: 720px) { .ip-robots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-robots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-robot {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.15rem 1.2rem 1.1rem;
border-radius: 16px;
border: 1px solid rgba(74, 102, 216, 0.22);
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.2rem 1.25rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(74, 102, 216, 0.24);
background:
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.95));
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-robot:hover {
transform: translateY(-3px);
border-color: rgba(74, 102, 216, 0.5);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(58, 85, 196, 0.22);
}
.ip-robot-head {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.ip-robot-brand {
font-size: 0.6rem;
letter-spacing: 0.3em;
font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
font-weight: 800; color: color-mix(in srgb, var(--acc) 72%, white);
}
.ip-robot-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 999px;
color: #DEE0F0;
border: 1px solid rgba(222, 224, 240, 0.14);
background: rgba(14, 13, 18, 0.6);
}
.ip-robot h3 { margin: 0; font-size: 1.08rem; font-weight: 600; color: #FFFFFF; }
.ip-robot p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; flex: 1; }
.ip-robot-chips {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.3rem;
padding-top: 0.4rem;
}
.ip-robot-chips li {
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 800;
color: color-mix(in srgb, var(--acc) 70%, white);
}
.ip-robot h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: #FFFFFF;
}
.ip-robot p {
margin: 0;
color: #C9CCDE;
font-size: 0.88rem;
line-height: 1.55;
flex: 1;
font-weight: 700;
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
color: #DEE0F0;
}
.ip-robot-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
color: #DEE0F0;
display: inline-flex; align-items: center; gap: 0.45rem;
margin-top: 0.55rem; padding-top: 0.7rem;
border-top: 1px solid rgba(222, 224, 240, 0.07);
font-size: 0.8rem; font-weight: 600; color: #DEE0F0;
text-decoration: none;
transition: color 0.25s, gap 0.25s;
}
@@ -609,54 +763,49 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
/* CTA */
.ip-cta {
position: relative;
overflow: hidden;
border-radius: 24px;
border: 1px solid rgba(74, 102, 216, 0.22);
position: relative; overflow: hidden;
border-radius: 26px;
border: 1px solid rgba(74, 102, 216, 0.26);
background:
radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.18), transparent 60%),
linear-gradient(135deg, rgba(18, 16, 28, 0.92), rgba(8, 8, 12, 0.96));
radial-gradient(ellipse 60% 100% at 100% 0%, rgba(58, 85, 196, 0.22), transparent 60%),
linear-gradient(135deg, rgba(18, 16, 28, 0.95), rgba(8, 8, 12, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ip-cta-glow {
position: absolute;
width: 480px;
height: 480px;
border-radius: 999px;
top: -160px;
left: -160px;
background: radial-gradient(circle, rgba(74, 102, 216, 0.4), transparent 70%);
filter: blur(100px);
opacity: 0.55;
position: absolute; width: 480px; height: 480px; border-radius: 999px;
top: -160px; left: -160px;
background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
filter: blur(100px); opacity: 0.55; pointer-events: none;
}
.ip-cta-grid {
position: absolute; inset: 0;
background:
linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 90% at 70% 50%, #000 25%, transparent 80%);
pointer-events: none;
}
.ip-cta-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.2rem, 3vw, 2rem);
padding: clamp(1.6rem, 3.5vw, 2.6rem);
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, 1fr);
gap: clamp(1.3rem, 3vw, 2rem);
padding: clamp(1.7rem, 3.6vw, 2.7rem);
align-items: center;
}
@media (min-width: 900px) {
.ip-cta-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.ip-cta-text { display: flex; flex-direction: column; gap: 0.6rem; max-width: 560px; }
.ip-cta-text { display: flex; flex-direction: column; gap: 0.65rem; max-width: 560px; }
.ip-cta-title {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
letter-spacing: -0.02em;
color: #FFFFFF;
line-height: 1.1;
font-size: clamp(1.65rem, 3vw, 2.25rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
}
.ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.6; }
.ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
.ip-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: flex-start;
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
}
@media (min-width: 900px) {
.ip-cta-actions { justify-content: flex-end; }
src/components/robotics/BrandShowcase.tsx
+24 -22
View File
@@ -6,6 +6,7 @@ import ArrowRight from 'lucide-react/dist/esm/icons/arrow-right';
import { BRANDS, ROBOTS, type RobotBrand } from '@/data/robots';
type BrandVisual = {
logo: { src: string; alt: string; width: number; height: number };
description: string;
chips: string[];
primary: { src: string; alt: string };
@@ -14,6 +15,7 @@ type BrandVisual = {
const BRAND_VISUALS: Record<RobotBrand, BrandVisual> = {
unitree: {
logo: { src: '/brands/unitree-logo.svg', alt: 'Unitree Robotics logo', width: 170, height: 38 },
description:
'Quadruped and humanoid robotics platforms available in the UAE through YS Lootah Robotics.',
chips: ['Quadruped', 'Humanoid', 'Inspection', 'Research'],
@@ -21,6 +23,7 @@ const BRAND_VISUALS: Record<RobotBrand, BrandVisual> = {
secondary: { src: '/images/robots/unitree-go2.png', alt: 'Unitree Go2 quadruped robot' },
},
pudu: {
logo: { src: '/brands/pudu-logo.svg', alt: 'Pudu Robotics logo', width: 121, height: 32 },
description:
'Service, delivery, cleaning, and hospitality robotics available in the UAE through YS Lootah Robotics.',
chips: ['Service', 'Delivery', 'Cleaning', 'Hospitality'],
@@ -168,31 +171,30 @@ function BrandCard({
</span>
</div>
<h3
<div
style={{
margin: 0,
fontSize: 'clamp(1.4rem, 2.6vw, 1.85rem)',
fontWeight: 700,
letterSpacing: '-0.01em',
lineHeight: 1.1,
color: '#FBFBFD',
display: 'inline-flex',
alignItems: 'center',
padding: '0.55rem 0.85rem',
borderRadius: 14,
background: 'rgba(255,255,255,0.05)',
border: '1px solid rgba(255,255,255,0.10)',
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
width: 'fit-content',
}}
>
{brandWord}
{brandRest && (
<span
style={{
marginLeft: 8,
background: `linear-gradient(110deg, #FBFBFD, ${accent})`,
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent',
color: 'transparent',
}}
>
{brandRest}
</span>
)}
<Image
src={visual.logo.src}
alt={visual.logo.alt}
width={visual.logo.width}
height={visual.logo.height}
style={{ display: 'block', maxWidth: '100%', height: 'auto' }}
priority
/>
</div>
<h3 style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)', whiteSpace: 'nowrap', margin: 0 }}>
{brand.name}
</h3>
<p
src/components/robotics/IndustryUseCases.tsx
+2 -1
View File
@@ -60,13 +60,14 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
<motion.ul
className="iu-stats"
role="list"
style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '0.45rem', listStyle: 'none', margin: 0, padding: 0 }}
initial={{ opacity: 0, y: 12 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-10%' }}
transition={{ duration: 0.6, ease }}
>
{STATS.map((s) => (
<li key={s.label} className="iu-stat">
<li key={s.label} className="iu-stat" style={{ flex: '1 1 0', minWidth: 0 }}>
<span className="iu-stat-value">{s.value}</span>
<span className="iu-stat-label">{s.label}</span>
</li>
src/data/industries.ts
+24
View File
@@ -10,6 +10,8 @@ export interface Industry {
matchCategories: RobotCategory[];
accent: string;
icon: 'building' | 'utensils' | 'hotel' | 'shopping-bag' | 'heart-pulse' | 'graduation-cap' | 'shield' | 'warehouse' | 'sparkles' | 'landmark';
image: string;
imageAlt: string;
}
export const INDUSTRIES: Industry[] = [
@@ -23,6 +25,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['hospitality', 'service', 'delivery'],
accent: '#DEE0F0',
icon: 'hotel',
image: '/industries/hospitality.webp',
imageAlt: 'Pudu service robot in a hospitality venue',
},
{
id: 'restaurants',
@@ -34,6 +38,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['delivery', 'service', 'hospitality'],
accent: '#8891C7',
icon: 'utensils',
image: '/industries/restaurants-cafes.webp',
imageAlt: 'Pudu food delivery robot in a restaurant environment',
},
{
id: 'hotels',
@@ -45,6 +51,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['delivery', 'hospitality', 'service'],
accent: '#273F94',
icon: 'hotel',
image: '/industries/hotels-resorts.webp',
imageAlt: 'Pudu delivery robot serving hotel guests',
},
{
id: 'malls',
@@ -56,6 +64,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['cleaning', 'service', 'humanoid'],
accent: '#DEE0F0',
icon: 'shopping-bag',
image: '/industries/shopping-malls.webp',
imageAlt: 'Pudu service robot in a high-traffic retail environment',
},
{
id: 'healthcare',
@@ -67,6 +77,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['delivery', 'service'],
accent: '#273F94',
icon: 'heart-pulse',
image: '/industries/healthcare.webp',
imageAlt: 'Pudu delivery robot for healthcare and care facilities',
},
{
id: 'education',
@@ -78,6 +90,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['humanoid', 'service'],
accent: '#8891C7',
icon: 'graduation-cap',
image: '/industries/education.jpg',
imageAlt: 'Unitree humanoid robot for education and STEM research',
},
{
id: 'security',
@@ -89,6 +103,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['quadruped', 'commercial'],
accent: '#DEE0F0',
icon: 'shield',
image: '/industries/security-surveillance.jpg',
imageAlt: 'Unitree quadruped robot on autonomous security patrol',
},
{
id: 'warehouses',
@@ -100,6 +116,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['quadruped', 'delivery', 'commercial'],
accent: '#273F94',
icon: 'warehouse',
image: '/industries/warehouses-logistics.webp',
imageAlt: 'Pudu industrial delivery robot for warehouses and logistics',
},
{
id: 'events',
@@ -111,6 +129,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['humanoid', 'quadruped'],
accent: '#8891C7',
icon: 'sparkles',
image: '/industries/events.webp',
imageAlt: 'Robotics activation for live events and brand experiences',
},
{
id: 'smart-buildings',
@@ -122,6 +142,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['cleaning', 'commercial', 'delivery'],
accent: '#DEE0F0',
icon: 'building',
image: '/industries/smart-buildings.webp',
imageAlt: 'Pudu cleaning robot in a modern smart office building',
},
{
id: 'government',
@@ -133,6 +155,8 @@ export const INDUSTRIES: Industry[] = [
matchCategories: ['humanoid', 'quadruped', 'service'],
accent: '#273F94',
icon: 'landmark',
image: '/industries/government.jpg',
imageAlt: 'Unitree quadruped robots deployed for civic and emergency services',
},
];
src/data/industry-pages.ts
+67 -19
View File
@@ -14,22 +14,27 @@ export type IndustrySolution = {
| 'queue'
| 'host'
| 'tray';
suitableFor?: string[];
};
export type SuggestedRobot = {
brand: 'Pudu' | 'Unitree';
family: string;
body: string;
chips?: string[];
};
export type IndustryPageContent = {
heroTitle: string;
heroSubtitle: string;
heroTags?: string[];
problemPoints: string[];
solutions: IndustrySolution[];
useCases: string[];
benefits: { title: string; body: string }[];
suggestedRobots: SuggestedRobot[];
ctaTitle?: string;
ctaBody?: string;
seoTitle: string;
seoDescription: string;
};
@@ -230,35 +235,78 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
heroTitle: 'Hands-on robotics for STEM and innovation.',
heroSubtitle:
'Humanoid and quadruped robots that bring AI, programming, and modern robotics into UAE schools, universities, and innovation labs.',
heroTags: ['STEM labs', 'Robotics clubs', 'Innovation programs', 'Research'],
problemPoints: [
'STEM curricula need tangible robotics platforms for AI and motion learning.',
'Schools want flagship innovation moments and visible identity.',
'Teachers need approachable platforms for hands-on labs.',
'Recruiting top STEM students depends on signature equipment.',
'Schools need hands-on robotics and AI learning tools.',
'Students need practical exposure to emerging technologies.',
'Institutions want modern STEM labs and innovation programs.',
'Recruiting top STEM talent depends on signature equipment.',
],
solutions: [
{ title: 'Humanoid robots', body: 'General-purpose platforms for AI, motion, and human-robot interaction labs.', iconKey: 'humanoid' },
{ title: 'Quadruped robots', body: 'Programmable platforms for autonomy, locomotion, and research projects.', iconKey: 'quadruped' },
{ title: 'STEM-ready kits', body: 'Course-aligned robotics hardware for school labs and clubs.', iconKey: 'platform' },
{ title: 'Open SDK platforms', body: 'Hands-on coding access for advanced students and researchers.', iconKey: 'sensor' },
{
title: 'Humanoid robots',
body: 'General-purpose platforms for AI, motion, and human-robot interaction labs.',
iconKey: 'humanoid',
suitableFor: ['Universities', 'AI labs', 'Research'],
},
{
title: 'Quadruped robots',
body: 'Programmable platforms for autonomy, locomotion, and research projects.',
iconKey: 'quadruped',
suitableFor: ['Engineering schools', 'Robotics clubs', 'Research'],
},
{
title: 'STEM robotics kits',
body: 'Course-aligned hardware platforms for school labs and after-school programs.',
iconKey: 'platform',
suitableFor: ['K–12 schools', 'STEM programs', 'Clubs'],
},
{
title: 'Open SDK platforms',
body: 'Hands-on coding access for advanced students and faculty research.',
iconKey: 'sensor',
suitableFor: ['Universities', 'AI / CS labs', 'Dissertations'],
},
],
useCases: [
'AI and motion programming labs',
'Robotics clubs and competitions',
'Open days, expos, and school showcases',
'Faculty research and dissertation projects',
'STEM labs and innovation centers',
'AI and robotics workshops',
'Student innovation programs',
'University research demos',
'Coding and robotics clubs',
'Government innovation programs',
],
benefits: [
{ title: 'Future-ready skills', body: 'Students learn real-world robotics on real platforms.' },
{ title: 'Signature programs', body: 'Flagship robotics labs attract talent and partnerships.' },
{ title: 'Research uplift', body: 'Quadruped and humanoid platforms support advanced research.' },
{ title: 'Visible innovation', body: 'Robotics labs position the institution as forward-looking.' },
{ title: 'Hands-on learning', body: 'Students work with real humanoid and quadruped platforms.' },
{ title: 'Stronger engagement', body: 'Robotics labs raise student interest and retention.' },
{ title: 'Future-ready STEM', body: 'Curricula stay aligned with current AI and robotics tools.' },
{ title: 'Innovation positioning', body: 'Signature labs help institutions attract talent and partnerships.' },
{ title: 'Demo-ready setups', body: 'Pre-configured units ready for open days and showcases.' },
{ title: 'Local support', body: 'A UAE-based robotics team handles setup, training, and service.' },
],
suggestedRobots: [
{ brand: 'Unitree', family: 'G1 humanoid', body: 'Research-friendly humanoid platform for education labs.' },
{ brand: 'Unitree', family: 'Go2 / Go2 EDU', body: 'Programmable quadruped for autonomy and STEM coursework.' },
{ brand: 'Unitree', family: 'B2 quadruped', body: 'Higher-capability platform for advanced research and projects.' },
{
brand: 'Unitree',
family: 'G1 humanoid',
body: 'Research-friendly humanoid platform for education and AI labs.',
chips: ['Humanoid', 'AI', 'Research'],
},
{
brand: 'Unitree',
family: 'Go2 / Go2 EDU',
body: 'Programmable quadruped for autonomy and STEM coursework.',
chips: ['Quadruped', 'STEM', 'SDK'],
},
{
brand: 'Unitree',
family: 'B2 quadruped',
body: 'Higher-capability platform for advanced research projects.',
chips: ['Quadruped', 'Research', 'Outdoor'],
},
],
ctaTitle: 'Build a future-ready robotics program.',
ctaBody:
'Tell us about your school, university, or innovation lab. Our Dubai team will recommend the right robotics setup and arrange a demo or quotation.',
seoTitle: 'Education & STEM Robots in UAE | YS Lootah Robotics',
seoDescription:
'Humanoid and quadruped robots for UAE schools, universities, and innovation labs. Hands-on AI and robotics education with local Dubai support.',