Refactor code structure for improved readability and maintainability
This commit is contained in:
Najjar\NajjarV02
parent
d8502292bc
commit
1967ae5402
@ -68,6 +68,9 @@ Used by the Industries grid (`IndustryUseCases` component) and the home-page Ind
|
||||
| `cards/education.jpg` | YS Lootah library | internal |
|
||||
| `cards/security-surveillance.jpg` | YS Lootah library | internal |
|
||||
| `cards/warehouses-logistics.webp` | YS Lootah library | internal |
|
||||
| `cards/events.webp` | YS Lootah library | internal |
|
||||
| `cards/smart-buildings.webp` | YS Lootah library | internal |
|
||||
| `cards/government.jpg` | YS Lootah library | internal |
|
||||
|
||||
## Industry page heroes (`/industries/pages/`)
|
||||
|
||||
@ -86,6 +89,15 @@ Used by the `[slug]` detail page hero. May reuse internal library or brand refer
|
||||
|
||||
---
|
||||
|
||||
## Known production-hotlink issues (outside `/industries/`)
|
||||
|
||||
These files still hotlink directly to brand CDNs and should be migrated to local copies before public launch:
|
||||
|
||||
- `src/data/robots.ts` — multiple `unitree.com/images/...` and `oss-global-cdn.unitree.com/...` references
|
||||
- `src/data/accessories.ts` — multiple `unitree.com/images/...` references
|
||||
|
||||
Track separately from this folder's asset list.
|
||||
|
||||
## TODO before public launch
|
||||
|
||||
1. Replace every `needs-approval` asset with either:
|
||||
@ -93,4 +105,5 @@ Used by the `[slug]` detail page hero. May reuse internal library or brand refer
|
||||
- Original YS Lootah photography / commissioned renders.
|
||||
2. Convert remaining `.jpg` / `.png` heroes to `.webp` once final assets are locked.
|
||||
3. Audit alt text for accuracy after any image swap.
|
||||
4. Keep this file in sync with `src/data/industries.ts` and `src/data/industry-pages.ts`.
|
||||
4. Migrate the brand-CDN hotlinks listed above to local files.
|
||||
5. Keep this file in sync with `src/data/industries.ts` and `src/data/industry-pages.ts`.
|
||||
|
||||
BIN
public/industries/cards/events.webp
Normal file
BIN
public/industries/cards/events.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
BIN
public/industries/cards/government.jpg
Normal file
BIN
public/industries/cards/government.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
public/industries/cards/smart-buildings.webp
Normal file
BIN
public/industries/cards/smart-buildings.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
@ -363,6 +363,43 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
</section>
|
||||
</MotionSection>
|
||||
|
||||
{/* DEPLOYMENT PROCESS */}
|
||||
<MotionSection>
|
||||
<section className="ip-block" style={{ ['--acc' as string]: accent }}>
|
||||
<header className="ip-block-head">
|
||||
<span className="eyebrow">How we deploy</span>
|
||||
<h2 className="ip-block-title">From first conversation to live operation.</h2>
|
||||
</header>
|
||||
<ol className="ip-process" role="list">
|
||||
<li className="ip-step">
|
||||
<span className="ip-step-num">01</span>
|
||||
<h3>Consult</h3>
|
||||
<p>Understand the venue, workflow, and constraints — and match the use case to the right robot family.</p>
|
||||
</li>
|
||||
<li className="ip-step">
|
||||
<span className="ip-step-num">02</span>
|
||||
<h3>Configure</h3>
|
||||
<p>Spec payload, integrations, lift API, and any custom sensor build needed for the site.</p>
|
||||
</li>
|
||||
<li className="ip-step">
|
||||
<span className="ip-step-num">03</span>
|
||||
<h3>Demo</h3>
|
||||
<p>Live demonstration at our Dubai showroom or on-site at the venue, with the stakeholders in the room.</p>
|
||||
</li>
|
||||
<li className="ip-step">
|
||||
<span className="ip-step-num">04</span>
|
||||
<h3>Deploy</h3>
|
||||
<p>Install, map, train staff, and validate route plans — handover only after the venue runs smoothly.</p>
|
||||
</li>
|
||||
<li className="ip-step">
|
||||
<span className="ip-step-num">05</span>
|
||||
<h3>Support</h3>
|
||||
<p>UAE-based service, spare parts, and software updates so the fleet keeps running across cycles.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</MotionSection>
|
||||
|
||||
{/* CTA */}
|
||||
<MotionSection>
|
||||
<section className="ip-cta">
|
||||
@ -952,6 +989,58 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
|
||||
}
|
||||
.ip-robot-link:hover { color: #FFFFFF; gap: 0.7rem; }
|
||||
|
||||
/* PROCESS */
|
||||
.ip-process {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 0.85rem;
|
||||
counter-reset: ip-step;
|
||||
}
|
||||
@media (min-width: 640px) { .ip-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (min-width: 1100px) { .ip-process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7rem; } }
|
||||
.ip-step {
|
||||
position: relative;
|
||||
display: flex; flex-direction: column; gap: 0.45rem;
|
||||
padding: 1.15rem 1.15rem 1.2rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(222, 224, 240, 0.10);
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(8, 8, 12, 0.95));
|
||||
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.ip-step:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--acc) 38%, rgba(120, 140, 255, 0.32));
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--acc) 16%, transparent);
|
||||
}
|
||||
.ip-step-num {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.22em;
|
||||
font-weight: 800;
|
||||
color: color-mix(in srgb, var(--acc) 70%, #B5BDDB);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
|
||||
background: color-mix(in srgb, var(--acc) 8%, rgba(14, 13, 18, 0.55));
|
||||
align-self: flex-start;
|
||||
}
|
||||
.ip-step h3 {
|
||||
margin: 0;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.ip-step p {
|
||||
margin: 0;
|
||||
color: #C9CCDE;
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.ip-cta {
|
||||
position: relative; overflow: hidden;
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Image from 'next/image';
|
||||
import MapPin from 'lucide-react/dist/esm/icons/map-pin';
|
||||
import Headphones from 'lucide-react/dist/esm/icons/headphones';
|
||||
import Bot from 'lucide-react/dist/esm/icons/bot';
|
||||
import PlayCircle from 'lucide-react/dist/esm/icons/play-circle';
|
||||
import { Navbar } from '@/components/Navbar';
|
||||
import { FooterAndContact } from '@/components/FooterAndContact';
|
||||
import { IndustryUseCases } from '@/components/robotics/IndustryUseCases';
|
||||
@ -11,29 +16,126 @@ export const metadata: Metadata = {
|
||||
'Robotics solutions for hospitality, restaurants, hotels, healthcare, education, security, warehouses, smart buildings, and government across the UAE.',
|
||||
};
|
||||
|
||||
const HERO_COLLAGE: { src: string; alt: string }[] = [
|
||||
{ src: '/industries/cards/hospitality.webp', alt: 'Service robot in a luxury hospitality lobby' },
|
||||
{ src: '/industries/cards/security-surveillance.jpg', alt: 'Quadruped robot on security patrol' },
|
||||
{ src: '/industries/cards/education.jpg', alt: 'Humanoid robot engaging with students in a classroom' },
|
||||
{ src: '/industries/cards/healthcare.webp', alt: 'Delivery robot moving through a hospital corridor' },
|
||||
];
|
||||
|
||||
const TRUST = [
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
const PROOF = [
|
||||
{ value: '8 sectors', label: 'Industries served' },
|
||||
{ value: '2 brands', label: 'Pudu + Unitree' },
|
||||
{ value: 'Dubai-based', label: 'UAE-wide deployment' },
|
||||
{ value: 'Sales · Demo · Deploy', label: 'End-to-end service' },
|
||||
];
|
||||
|
||||
export default function IndustriesPage() {
|
||||
const accent = '#3a55c4';
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
|
||||
<main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
|
||||
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(3rem, 5vw, 5rem)' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 760 }}>
|
||||
<span className="eyebrow">Industries served · Dubai · UAE</span>
|
||||
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
|
||||
<span className="text-gradient" style={{ fontWeight: 500 }}>
|
||||
Robotics solutions for UAE businesses.
|
||||
</span>
|
||||
</h1>
|
||||
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
|
||||
We deploy humanoid, quadruped, and service robots across industries that are reshaping how the UAE operates every venue is matched to the right robot.
|
||||
</p>
|
||||
</div>
|
||||
<main className="ind-main">
|
||||
<div
|
||||
className="container-wide ind-stack"
|
||||
style={{ ['--acc' as string]: accent }}
|
||||
>
|
||||
{/* HERO */}
|
||||
<MotionSection>
|
||||
<section className="ind-hero">
|
||||
<div className="ind-hero-glow" aria-hidden />
|
||||
<div className="ind-hero-glow-b" aria-hidden />
|
||||
<div className="ind-hero-grid" aria-hidden />
|
||||
|
||||
<div className="ind-hero-inner">
|
||||
<div className="ind-hero-copy">
|
||||
<span className="eyebrow ind-hero-eyebrow">
|
||||
<span className="ind-dot" />
|
||||
Industries served · Dubai · UAE
|
||||
</span>
|
||||
<h1 className="ind-hero-title">
|
||||
<span className="text-gradient">Robotics solutions for UAE businesses.</span>
|
||||
</h1>
|
||||
<p className="ind-hero-sub">
|
||||
From Dubai showrooms to hospitals, schools, and warehouses across the Emirates we match each
|
||||
venue to the humanoid, quadruped, or service robot that fits.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Right visual: 4-tile industry montage */}
|
||||
<aside className="ind-hero-visual" aria-label="Industries we serve">
|
||||
<div className="ind-collage">
|
||||
{HERO_COLLAGE.map((img, i) => (
|
||||
<div key={img.src} className={`ind-collage-tile ind-collage-tile-${i}`}>
|
||||
<Image
|
||||
src={img.src}
|
||||
alt={img.alt}
|
||||
fill
|
||||
sizes="(max-width: 920px) 50vw, 240px"
|
||||
style={{ objectFit: 'cover', objectPosition: 'center' }}
|
||||
priority
|
||||
/>
|
||||
<span className="ind-collage-overlay" aria-hidden />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="ind-hero-visual-edge" aria-hidden />
|
||||
<div className="ind-hero-visual-meta">
|
||||
<span className="ind-mono ind-live">
|
||||
<span className="ind-live-dot" />Live · UAE
|
||||
</span>
|
||||
<span className="ind-mono">Pudu · Unitree · Dubai</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</MotionSection>
|
||||
|
||||
{/* TRUST ROW */}
|
||||
<MotionSection>
|
||||
<ul className="ind-trust" role="list">
|
||||
{TRUST.map((t) => {
|
||||
const Icon = t.icon;
|
||||
return (
|
||||
<li key={t.label} className="ind-trust-card">
|
||||
<span className="ind-trust-icon"><Icon size={14} strokeWidth={1.7} /></span>
|
||||
<div>
|
||||
<span className="ind-trust-label">{t.label}</span>
|
||||
<span className="ind-trust-sub">{t.sub}</span>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</MotionSection>
|
||||
|
||||
{/* PROOF POINTS */}
|
||||
<MotionSection>
|
||||
<ul className="ind-proof" role="list">
|
||||
{PROOF.map((p) => (
|
||||
<li key={p.label} className="ind-proof-card">
|
||||
<span className="ind-proof-value">{p.value}</span>
|
||||
<span className="ind-proof-label">{p.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</MotionSection>
|
||||
|
||||
{/* EXISTING GRID — UNCHANGED */}
|
||||
<MotionSection>
|
||||
<IndustryUseCases />
|
||||
</MotionSection>
|
||||
|
||||
{/* EXISTING CTA — UNCHANGED */}
|
||||
<DemoCTA
|
||||
title="Don't see your industry?"
|
||||
description="If your venue is unusual, complex, or one-of-a-kind that's exactly when we like to talk. Let's design the robotics fit."
|
||||
@ -42,6 +144,250 @@ export default function IndustriesPage() {
|
||||
</main>
|
||||
|
||||
<FooterAndContact />
|
||||
|
||||
<style>{`
|
||||
.ind-main {
|
||||
padding-top: clamp(5rem, 9vw, 7rem);
|
||||
padding-bottom: clamp(2rem, 5vw, 4rem);
|
||||
}
|
||||
.ind-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(2.5rem, 5vw, 4.25rem);
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.ind-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
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.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);
|
||||
}
|
||||
.ind-hero-glow {
|
||||
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;
|
||||
}
|
||||
.ind-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;
|
||||
}
|
||||
.ind-hero-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 70% 90% at 30% 40%, #000 25%, transparent 80%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 25%, transparent 80%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ind-hero-inner {
|
||||
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;
|
||||
}
|
||||
.ind-hero-copy { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; min-width: 0; }
|
||||
.ind-hero-eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 0.55rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.ind-dot {
|
||||
width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
|
||||
box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
|
||||
animation: ind-pulse 2.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes ind-pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.55; transform: scale(0.85); }
|
||||
}
|
||||
.ind-hero-title {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
line-height: 1.05; font-weight: 300; letter-spacing: -0.03em; color: #FFFFFF;
|
||||
}
|
||||
.ind-hero-title .text-gradient { font-weight: 500; }
|
||||
.ind-hero-sub {
|
||||
margin: 0; color: #DEE0F0;
|
||||
font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
|
||||
}
|
||||
|
||||
/* HERO RIGHT VISUAL — 4-tile collage */
|
||||
.ind-hero-visual {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 20px;
|
||||
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);
|
||||
}
|
||||
.ind-collage {
|
||||
position: absolute; inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 2px;
|
||||
background: rgba(74, 102, 216, 0.25);
|
||||
}
|
||||
.ind-collage-tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #0a0a0e;
|
||||
}
|
||||
.ind-collage-tile :global(img) {
|
||||
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
filter: saturate(0.92) brightness(0.85);
|
||||
}
|
||||
.ind-collage-tile:hover :global(img) {
|
||||
transform: scale(1.06);
|
||||
filter: saturate(1) brightness(0.95);
|
||||
}
|
||||
.ind-collage-overlay {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(10, 10, 14, 0.10) 0%, rgba(10, 10, 14, 0.55) 100%),
|
||||
radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ind-hero-visual-edge {
|
||||
position: absolute; inset: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
}
|
||||
.ind-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.65));
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
.ind-mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #DEE0F0;
|
||||
}
|
||||
.ind-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
|
||||
.ind-live-dot {
|
||||
width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
|
||||
box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
|
||||
}
|
||||
|
||||
@media (min-width: 920px) {
|
||||
.ind-hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
|
||||
.ind-hero-visual { aspect-ratio: 5 / 6; max-width: 460px; margin-left: auto; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ind-dot { animation: none; }
|
||||
.ind-collage-tile :global(img) { transition: none !important; }
|
||||
.ind-collage-tile:hover :global(img) { transform: none; filter: saturate(0.92) brightness(0.85); }
|
||||
}
|
||||
|
||||
/* TRUST ROW */
|
||||
.ind-trust {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.ind-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;
|
||||
}
|
||||
.ind-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);
|
||||
}
|
||||
.ind-trust-label {
|
||||
display: block;
|
||||
font-size: 0.78rem; font-weight: 600; color: #FFFFFF;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
.ind-trust-sub {
|
||||
display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.ind-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
|
||||
}
|
||||
|
||||
/* PROOF POINTS */
|
||||
.ind-proof {
|
||||
list-style: none; margin: 0; padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.ind-proof-card {
|
||||
position: relative;
|
||||
display: flex; flex-direction: column; gap: 0.25rem;
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 16px;
|
||||
border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(120, 140, 255, 0.18));
|
||||
background:
|
||||
radial-gradient(ellipse 70% 100% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%),
|
||||
linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.ind-proof-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--acc) 55%, rgba(120, 140, 255, 0.35));
|
||||
}
|
||||
.ind-proof-value {
|
||||
font-size: clamp(1.05rem, 2.6vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #B5BDDB));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.ind-proof-label {
|
||||
font-size: 0.6rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: #A6B2D8;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.ind-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@ export const ACCESSORIES: Accessory[] = [
|
||||
'Survived 100+ drop tests',
|
||||
'1000 Hz sensor / comm rate',
|
||||
],
|
||||
image: 'https://www.unitree.com/images/dex2-5.png',
|
||||
image: 'https://www.unitree.com/images/22a1424df5a54cdeaadc53724f13c1ee_3840x2160.jpg',
|
||||
accent: GOLD_CHAMPAGNE,
|
||||
officialUrl: 'https://www.unitree.com/Dex2-5',
|
||||
compatibility: ['Unitree G1', 'Unitree R1'],
|
||||
@ -152,7 +152,7 @@ export const ACCESSORIES: Accessory[] = [
|
||||
'Joint force control + collision detection',
|
||||
'Position + force control modes',
|
||||
],
|
||||
image: 'https://oss-global-cdn.unitree.com/static/z1.png',
|
||||
image: 'https://oss-global-cdn.unitree.com/static/2897c79a27ff4e0984f8cc3ea0448af6_1920x1097.png',
|
||||
accent: GOLD_BRAND,
|
||||
officialUrl: 'https://www.unitree.com/z1',
|
||||
compatibility: ['Unitree AlienGo', 'Unitree B1', 'Mobile platforms'],
|
||||
@ -175,7 +175,7 @@ export const ACCESSORIES: Accessory[] = [
|
||||
'Camera & mobile-chassis ready',
|
||||
'24 V (2.5 A standard / 5 A max)',
|
||||
],
|
||||
image: 'https://oss-global-cdn.unitree.com/static/d1t.png',
|
||||
image: 'https://oss-global-cdn.unitree.com/static/ef65f92be2674b4996dbad757c8d24d5_1904x1802.png',
|
||||
accent: GOLD_BRONZE,
|
||||
officialUrl: 'https://www.unitree.com/D1-T',
|
||||
compatibility: ['Embodied AI research', 'Data collection'],
|
||||
@ -200,7 +200,7 @@ export const ACCESSORIES: Accessory[] = [
|
||||
'230 g compact form',
|
||||
'Open POINT-LIO SLAM stack',
|
||||
],
|
||||
image: 'https://oss-global-cdn.unitree.com/static/l2.png',
|
||||
image: 'https://oss-global-cdn.unitree.com/static/c2f833925ff54f928f538a67b748d6db_990x557.png',
|
||||
accent: GOLD_CHAMPAGNE,
|
||||
officialUrl: 'https://www.unitree.com/L2',
|
||||
compatibility: ['Unitree Go2', 'Unitree quadrupeds', 'Third-party robots'],
|
||||
|
||||
@ -129,8 +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',
|
||||
image: '/industries/cards/events.webp',
|
||||
imageAlt: 'Robotics activation for UAE live events and brand experiences',
|
||||
},
|
||||
{
|
||||
id: 'smart-buildings',
|
||||
@ -142,8 +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',
|
||||
image: '/industries/cards/smart-buildings.webp',
|
||||
imageAlt: 'Cleaning robot in a modern UAE smart office building',
|
||||
},
|
||||
{
|
||||
id: 'government',
|
||||
@ -155,8 +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',
|
||||
image: '/industries/cards/government.jpg',
|
||||
imageAlt: 'Quadruped robots deployed for UAE civic and emergency services',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -194,8 +194,8 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
|
||||
caseHighlights: [
|
||||
{
|
||||
brand: 'Pudu',
|
||||
title: 'BellaBot at scale in F&B',
|
||||
body: 'Cat-themed multi-tray delivery deployed in chains, fine-dining, and casual venues across 60+ countries — runs nightly peaks without fatigue.',
|
||||
title: 'BellaBot across F&B venues',
|
||||
body: 'Signature multi-tray delivery platform deployed across hospitality and dining venues globally — built to support peak service rounds without fatigue.',
|
||||
},
|
||||
{
|
||||
brand: 'Pudu',
|
||||
@ -606,7 +606,7 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
|
||||
],
|
||||
gallery: [
|
||||
{ src: '/industries/unitree/terrain.jpg', alt: 'Quadruped robot on complex terrain', caption: 'Stairs, gullies, rubble, pipelines — 90% terrain coverage.', credit: 'Unitree' },
|
||||
{ src: '/industries/unitree/thermal.jpg', alt: 'Infrared thermography and detection sensors', caption: 'Infrared thermography + LiDAR + AI vision for 24/7 scanning.', credit: 'Unitree' },
|
||||
{ src: '/industries/unitree/thermal.jpg', alt: 'Thermal imaging and laser-radar detection', caption: 'Thermal, laser-radar, and AI imaging payloads for continuous monitoring.', credit: 'Unitree' },
|
||||
{ src: '/industries/unitree/substation.jpg', alt: 'Power substation inspection', caption: 'Substation inspection — switchgear and transformer scans.', credit: 'Unitree' },
|
||||
{ src: '/industries/unitree/pipeline.jpg', alt: 'Pipeline network inspection', caption: 'Pipeline and refinery corridor patrols.', credit: 'Unitree' },
|
||||
{ src: '/industries/unitree/mine.jpg', alt: 'Mine tunnel inspection', caption: 'Mine and tunnel inspection in hazardous environments.', credit: 'Unitree' },
|
||||
@ -653,8 +653,8 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
|
||||
'Fire and emergency-response reconnaissance',
|
||||
],
|
||||
benefits: [
|
||||
{ title: 'Continuous coverage', body: 'Routes run 24/7 across nights and shifts with zero downtime.' },
|
||||
{ title: 'Cuts human-risk exposure', body: 'Replaces personnel in hazardous zones — high voltage, gas, heat, confined spaces.' },
|
||||
{ title: 'Continuous coverage', body: 'Autonomous patrols hold the same schedule across nights and shifts — without fatigue or coverage gaps.' },
|
||||
{ title: 'Lower human-risk exposure', body: 'Routine rounds in high-voltage, confined, hot, or gas-risk zones move from guards to robots.' },
|
||||
{ title: 'Audit-ready logs', body: 'Run histories, thermal frames, and sensor data are easy to review.' },
|
||||
{ title: 'Lower long-term cost', body: 'One platform replaces multiple patrols and inspection rounds.' },
|
||||
{ title: 'Modern facility image', body: 'Visible signal that the operator runs a modern, instrumented site.' },
|
||||
@ -712,10 +712,10 @@ export const INDUSTRY_PAGES: Record<string, IndustryPageContent> = {
|
||||
alt: 'Industrial inspection robot in a UAE warehouse facility',
|
||||
},
|
||||
proofPoints: [
|
||||
{ value: '90%', label: 'Terrain coverage' },
|
||||
{ value: 'Multi-terrain', label: 'Stairs · rubble · pipes' },
|
||||
{ value: '40cm', label: 'Obstacle clearance' },
|
||||
{ value: '≤3 m/s', label: 'Patrol speed' },
|
||||
{ value: '24/7', label: 'Run cycles' },
|
||||
{ value: 'Scheduled', label: 'Auto run cycles' },
|
||||
],
|
||||
gallery: [
|
||||
{ src: '/industries/unitree/patrol-system.png', alt: 'Intelligent patrol system overview', caption: 'Intelligent patrol system overview.', credit: 'Unitree' },
|
||||
|
||||
@ -792,7 +792,7 @@ export const ROBOTS: Robot[] = [
|
||||
SPEC_CONSULT,
|
||||
SPEC_PLACEHOLDER,
|
||||
],
|
||||
image: 'https://cdn.pudutech.com/website/images/pc/swiftbot/banner_swiftbot.png',
|
||||
image: 'https://cdn.pudutech.com/_d8c688b5e6.webp',
|
||||
imageType: 'photo',
|
||||
accent: GOLD_CHAMPAGNE,
|
||||
officialUrl: 'https://www.pudurobotics.com/en/products/swiftbot',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user