@@ -918,8 +918,8 @@ function SettingRow({
useEffect(() => { setEditVal(setting.value); }, [setting.value]);
return (
-
diff --git a/src/app/bu-sunaidah/page.tsx b/src/app/bu-sunaidah/page.tsx
index 2421a1e..281ddd5 100644
--- a/src/app/bu-sunaidah/page.tsx
+++ b/src/app/bu-sunaidah/page.tsx
@@ -63,7 +63,7 @@ const PILLARS = [
},
];
-const ACCENT = '#3a55c4';
+const ACCENT = '#7f7f7f';
function formatDate(iso: string): string {
try {
@@ -382,12 +382,12 @@ export default async function BuSunaidahPage() {
.bs-crumbs ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
- font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8891C7;
+ font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #a8a8a8;
}
- .bs-crumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+ .bs-crumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
.bs-crumbs a:hover { color: #FFFFFF; }
.bs-crumbs li[aria-current="page"] { color: #FFFFFF; }
- .bs-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+ .bs-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
/* BLOCKS */
.bs-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
@@ -412,29 +412,29 @@ export default async function BuSunaidahPage() {
display: flex; flex-direction: column; gap: 0.6rem;
padding: 1.2rem 1.2rem 1.25rem;
border-radius: 18px;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
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));
+ linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.bs-pillar:hover {
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);
+ border-color: rgba(145, 145, 145, 0.42);
+ box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(127, 127, 127, 0.18);
}
.bs-pillar-icon {
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));
+ background: color-mix(in srgb, var(--acc) 12%, rgba(16, 16, 16, 0.6));
}
.bs-pillar h3 {
margin: 0; font-size: 1.02rem; font-weight: 600;
color: #FFFFFF; letter-spacing: -0.005em;
}
- .bs-pillar p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
+ .bs-pillar p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
/* REEL */
.bs-reel {
@@ -444,18 +444,18 @@ export default async function BuSunaidahPage() {
border-radius: 22px;
overflow: hidden;
isolation: isolate;
- border: 1px solid rgba(74, 102, 216, 0.28);
+ border: 1px solid rgba(145, 145, 145, 0.28);
background:
- radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.22), transparent 55%),
- radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.16), transparent 60%),
- linear-gradient(180deg, #0a0a0e 0%, #050508 100%);
+ radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.22), transparent 55%),
+ radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
+ linear-gradient(180deg, #0c0c0c 0%, #070707 100%);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bs-reel-glow {
position: absolute;
inset: -20% -10% auto auto;
width: 60%; height: 80%;
- background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(58, 85, 196, 0.5), transparent 70%);
+ background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(127, 127, 127, 0.5), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
@@ -466,23 +466,23 @@ export default async function BuSunaidahPage() {
z-index: 3;
pointer-events: none;
}
- .bs-corner-tl { top: 8px; left: 8px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
- .bs-corner-tr { top: 8px; right: 8px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
- .bs-corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
- .bs-corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+ .bs-corner-tl { top: 8px; left: 8px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
+ .bs-corner-tr { top: 8px; right: 8px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
+ .bs-corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
+ .bs-corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
.bs-reel-media {
position: absolute;
inset: 0;
width: 100%; height: 100%;
border: 0;
- background: #050508;
+ background: #070707;
z-index: 1;
}
.bs-reel-placeholder { position: absolute; inset: 0; z-index: 1; }
.bs-reel-overlay {
position: absolute;
inset: 0;
- background: linear-gradient(180deg, rgba(8, 8, 12, 0.0) 35%, rgba(8, 8, 12, 0.85) 100%);
+ background: linear-gradient(180deg, rgba(10, 10, 10, 0.0) 35%, rgba(10, 10, 10, 0.85) 100%);
pointer-events: none;
z-index: 2;
}
@@ -502,10 +502,10 @@ export default async function BuSunaidahPage() {
border-radius: 999px;
background:
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.32), transparent 60%),
- linear-gradient(135deg, #5a76e8, #273F94);
+ linear-gradient(135deg, #a1a1a1, #5e5e5e);
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.22);
- box-shadow: 0 18px 32px rgba(58, 85, 196, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+ box-shadow: 0 18px 32px rgba(127, 127, 127, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
flex: none;
}
.bs-reel-eyebrow {
@@ -514,7 +514,7 @@ export default async function BuSunaidahPage() {
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 800;
- color: #DEE0F0;
+ color: #e7e7e7;
margin-bottom: 0.2rem;
}
.bs-reel-caption {
@@ -540,11 +540,11 @@ export default async function BuSunaidahPage() {
min-height: 76px;
padding: 0.9rem 1rem;
border-radius: 14px;
- border: 1px solid rgba(222, 224, 240, 0.10);
- background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
+ border: 1px solid rgba(231, 231, 231, 0.10);
+ background: linear-gradient(135deg, rgba(23, 23, 23, 0.78), rgba(12, 12, 12, 0.94));
transition: border-color 0.3s, transform 0.3s;
}
- .bs-press-cell:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateY(-2px); }
+ .bs-press-cell:hover { border-color: rgba(145, 145, 145, 0.35); transform: translateY(-2px); }
.bs-press-cell a {
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
@@ -561,7 +561,7 @@ export default async function BuSunaidahPage() {
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
- color: #C9CCDE;
+ color: #d4d4d4;
}
.bs-press-quotes {
@@ -575,39 +575,39 @@ export default async function BuSunaidahPage() {
display: flex; flex-direction: column; gap: 0.65rem;
padding: 1.15rem 1.2rem 1.15rem;
border-radius: 18px;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
radial-gradient(ellipse 75% 50% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
- linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+ linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
}
.bs-press-quote-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 999px;
color: color-mix(in srgb, var(--acc) 82%, white);
- background: color-mix(in srgb, var(--acc) 14%, rgba(14, 13, 18, 0.6));
+ background: color-mix(in srgb, var(--acc) 14%, rgba(16, 16, 16, 0.6));
border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
}
- .bs-press-quote p { margin: 0; color: #ECEEF6; font-size: 0.97rem; line-height: 1.65; }
+ .bs-press-quote p { margin: 0; color: #f1f1f1; font-size: 0.97rem; line-height: 1.65; }
.bs-press-quote footer {
- color: #8891C7;
+ color: #a8a8a8;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
}
- .bs-press-quote footer a { color: #8891C7; text-decoration: none; }
+ .bs-press-quote footer a { color: #a8a8a8; text-decoration: none; }
.bs-press-quote footer a:hover { color: #FFFFFF; }
- .bs-press-date { color: #5a627e; }
+ .bs-press-date { color: #6c6c6c; }
/* INSTAGRAM LINK */
.bs-ig-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.55rem 0.85rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.22);
- background: rgba(14, 13, 18, 0.55);
- color: #DEE0F0;
+ border: 1px solid rgba(231, 231, 231, 0.22);
+ background: rgba(16, 16, 16, 0.55);
+ color: #e7e7e7;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
@@ -617,9 +617,9 @@ export default async function BuSunaidahPage() {
transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.bs-ig-link:hover {
- border-color: rgba(222, 224, 240, 0.55);
+ border-color: rgba(231, 231, 231, 0.55);
color: #FFFFFF;
- background: rgba(58, 85, 196, 0.18);
+ background: rgba(127, 127, 127, 0.18);
}
/* INSTAGRAM EMBED GRID */
@@ -633,8 +633,8 @@ export default async function BuSunaidahPage() {
position: relative;
border-radius: 18px;
overflow: hidden;
- border: 1px solid rgba(222, 224, 240, 0.12);
- background: rgba(14, 13, 18, 0.6);
+ border: 1px solid rgba(231, 231, 231, 0.12);
+ background: rgba(16, 16, 16, 0.6);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
height: 720px;
width: 100%;
@@ -652,7 +652,7 @@ export default async function BuSunaidahPage() {
height: calc(100% + 54px);
display: block;
border: 0;
- background: #0a0a0e;
+ background: #0c0c0c;
}
/* INSTAGRAM FALLBACK CARD */
@@ -661,11 +661,11 @@ export default async function BuSunaidahPage() {
display: block;
overflow: hidden;
border-radius: 22px;
- border: 1px solid rgba(74, 102, 216, 0.28);
+ border: 1px solid rgba(145, 145, 145, 0.28);
background:
- radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.22), 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));
+ radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.22), transparent 55%),
+ radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
+ linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
text-decoration: none;
color: inherit;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -673,22 +673,22 @@ export default async function BuSunaidahPage() {
}
.bs-ig-fallback:hover {
transform: translateY(-3px);
- border-color: rgba(74, 102, 216, 0.55);
- box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 32px rgba(58, 85, 196, 0.28);
+ border-color: rgba(145, 145, 145, 0.55);
+ box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 32px rgba(127, 127, 127, 0.28);
}
.bs-ig-fallback-glow {
position: absolute;
width: 440px; height: 440px; border-radius: 999px;
top: -180px; left: -160px;
- background: radial-gradient(circle, rgba(74, 102, 216, 0.4), transparent 70%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 0.4), transparent 70%);
filter: blur(100px);
pointer-events: none;
}
.bs-ig-fallback-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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 0.05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 25%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 80% at 70% 50%, #000 25%, transparent 80%);
@@ -706,11 +706,11 @@ export default async function BuSunaidahPage() {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 16px;
color: #FFFFFF;
- border: 1px solid rgba(222, 224, 240, 0.25);
+ border: 1px solid rgba(231, 231, 231, 0.25);
background:
radial-gradient(ellipse 60% 60% at 30% 30%, rgba(255, 84, 165, 0.55), transparent 60%),
radial-gradient(ellipse 60% 60% at 70% 70%, rgba(255, 165, 84, 0.45), transparent 60%),
- linear-gradient(135deg, rgba(58, 85, 196, 0.6), rgba(20, 20, 28, 0.85));
+ linear-gradient(135deg, rgba(127, 127, 127, 0.6), rgba(24, 24, 24, 0.85));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.bs-ig-fallback-handle {
@@ -718,7 +718,7 @@ export default async function BuSunaidahPage() {
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
- color: #8891C7;
+ color: #a8a8a8;
font-weight: 700;
margin-bottom: 0.2rem;
}
@@ -732,23 +732,23 @@ export default async function BuSunaidahPage() {
.bs-cta {
position: relative; overflow: hidden;
border-radius: 26px;
- border: 1px solid rgba(74, 102, 216, 0.26);
+ border: 1px solid rgba(145, 145, 145, 0.26);
background:
- 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));
+ radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
+ linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.bs-cta-glow {
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%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
filter: blur(100px); opacity: 0.55; pointer-events: none;
}
.bs-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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 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%);
@@ -770,7 +770,7 @@ export default async function BuSunaidahPage() {
font-size: clamp(1.65rem, 3vw, 2.25rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
}
- .bs-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+ .bs-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
.bs-cta-actions {
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
}
diff --git a/src/app/configure/page.tsx b/src/app/configure/page.tsx
index b850f88..154106d 100644
--- a/src/app/configure/page.tsx
+++ b/src/app/configure/page.tsx
@@ -285,29 +285,29 @@ export default function ConfigurePage() {
.cfg-hero {
position: relative;
overflow: hidden;
- border-bottom: 1px solid rgba(74, 102, 216, 0.16);
+ border-bottom: 1px solid rgba(145, 145, 145, 0.16);
background:
- radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.18), transparent 55%),
- radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 60%),
- linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
+ radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.18), transparent 55%),
+ radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.14), transparent 60%),
+ linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
}
.cfg-hero-glow {
position: absolute; width: 580px; height: 580px; border-radius: 999px;
top: -220px; right: -180px;
- background: radial-gradient(circle, rgba(120, 140, 255, 0.34), transparent 70%);
+ background: radial-gradient(circle, rgba(188, 188, 188, 0.34), transparent 70%);
filter: blur(120px); opacity: 0.55; pointer-events: none;
}
.cfg-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%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 0.32), transparent 70%);
filter: blur(110px); opacity: 0.45; pointer-events: none;
}
.cfg-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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 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%);
@@ -328,8 +328,8 @@ export default function ConfigurePage() {
width: fit-content;
}
.cfg-dot {
- width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
- box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+ width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
+ box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
}
.cfg-hero-title {
margin: 0;
@@ -342,7 +342,7 @@ export default function ConfigurePage() {
.cfg-hero-title :global(.text-gradient) { font-weight: 500; }
.cfg-hero-sub {
margin: 0;
- color: #DEE0F0;
+ color: #e7e7e7;
font-size: clamp(0.95rem, 1.8vw, 1.1rem);
line-height: 1.65;
max-width: 560px;
@@ -353,9 +353,9 @@ export default function ConfigurePage() {
}
.cfg-hero-checks li {
display: inline-flex; align-items: center; gap: 0.55rem;
- color: #DEE0F0; font-size: 0.92rem; line-height: 1.5;
+ color: #e7e7e7; font-size: 0.92rem; line-height: 1.5;
}
- .cfg-hero-checks li :global(svg) { color: #7FD6D0; flex: none; }
+ .cfg-hero-checks li :global(svg) { color: #ababab; flex: none; }
.cfg-hero-actions {
display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.65rem;
}
@@ -371,9 +371,9 @@ export default function ConfigurePage() {
display: flex; flex-direction: column; gap: 0.3rem;
padding: 0.95rem 1rem;
border-radius: 16px;
- border: 1px solid rgba(120, 140, 255, 0.22);
+ border: 1px solid rgba(188, 188, 188, 0.22);
background:
- linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+ linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
overflow: hidden;
min-height: 86px;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
@@ -381,22 +381,22 @@ export default function ConfigurePage() {
.cfg-stat::before {
content: ''; position: absolute;
top: 0; right: 14px; width: 24px; height: 1px;
- background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+ background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
}
.cfg-stat:hover {
- border-color: rgba(120, 140, 255, 0.45);
+ border-color: rgba(188, 188, 188, 0.45);
transform: translateY(-1px);
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
}
.cfg-stat-value {
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: 500; letter-spacing: -0.025em; line-height: 1;
- background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+ background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cfg-stat-label {
font-size: 0.64rem; letter-spacing: 0.22em;
- text-transform: uppercase; font-weight: 700; color: #A6B2D8;
+ text-transform: uppercase; font-weight: 700; color: #bfbfbf;
}
@media (min-width: 920px) {
@@ -417,31 +417,31 @@ export default function ConfigurePage() {
display: flex; flex-direction: column; gap: 0.6rem;
padding: 1.2rem 1.2rem 1.3rem;
border-radius: 18px;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
- radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.14), transparent 60%),
- linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+ radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.14), transparent 60%),
+ linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.cfg-step:hover {
- border-color: rgba(74, 102, 216, 0.42);
+ border-color: rgba(145, 145, 145, 0.42);
transform: translateY(-3px);
- box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 22px rgba(58, 85, 196, 0.18);
+ box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 22px rgba(127, 127, 127, 0.18);
}
.cfg-step-num {
position: absolute; top: 0.85rem; right: 1rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
- font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800; color: #8891C7;
+ font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800; color: #a8a8a8;
}
.cfg-step-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
- color: #DEE0F0;
- background: rgba(74, 102, 216, 0.16);
- border: 1px solid rgba(74, 102, 216, 0.38);
+ color: #e7e7e7;
+ background: rgba(145, 145, 145, 0.16);
+ border: 1px solid rgba(145, 145, 145, 0.38);
}
.cfg-step h3 { margin: 0; font-size: 1.02rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.005em; }
- .cfg-step p { margin: 0; color: #C9CCDE; font-size: 0.9rem; line-height: 1.6; }
+ .cfg-step p { margin: 0; color: #d4d4d4; font-size: 0.9rem; line-height: 1.6; }
/* CONFIGURATOR FRAME */
.cfg-frame { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); scroll-margin-top: clamp(80px, 12vh, 120px); }
@@ -457,40 +457,40 @@ export default function ConfigurePage() {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
- color: #DEE0F0;
+ color: #e7e7e7;
text-decoration: none;
padding: 0.6rem 0.95rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.18);
- background: rgba(20, 19, 26, 0.7);
+ border: 1px solid rgba(231, 231, 231, 0.18);
+ background: rgba(23, 23, 23, 0.7);
transition: color 0.3s, border-color 0.3s, gap 0.3s;
}
- .cfg-frame-spec:hover { color: #FFFFFF; border-color: rgba(74, 102, 216, 0.5); gap: 0.65rem; }
+ .cfg-frame-spec:hover { color: #FFFFFF; border-color: rgba(145, 145, 145, 0.5); gap: 0.65rem; }
.cfg-frame-shell {
border-radius: 24px;
overflow: hidden;
- border: 1px solid rgba(74, 102, 216, 0.22);
+ border: 1px solid rgba(145, 145, 145, 0.22);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
- 0 0 28px rgba(58, 85, 196, 0.18);
- background: linear-gradient(180deg, rgba(10, 10, 14, 0.95), rgba(6, 6, 10, 0.98));
+ 0 0 28px rgba(127, 127, 127, 0.18);
+ background: linear-gradient(180deg, rgba(12, 12, 12, 0.95), rgba(8, 8, 8, 0.98));
}
.cfg-frame-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 0.7rem 1rem;
- border-bottom: 1px solid rgba(74, 102, 216, 0.18);
- background: linear-gradient(180deg, rgba(14, 13, 22, 0.95), rgba(8, 8, 12, 0.97));
+ border-bottom: 1px solid rgba(145, 145, 145, 0.18);
+ background: linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(10, 10, 10, 0.97));
}
.cfg-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
- font-size: 0.62rem; letter-spacing: 0.28em; font-weight: 800; color: #DEE0F0;
+ font-size: 0.62rem; letter-spacing: 0.28em; font-weight: 800; color: #e7e7e7;
display: inline-flex; align-items: center; gap: 0.45rem;
}
- .cfg-mono-mute { color: #8891C7; }
+ .cfg-mono-mute { color: #a8a8a8; }
.cfg-live-dot {
- width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
- box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+ width: 7px; height: 7px; border-radius: 999px; background: #ababab;
+ box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
}
/* POST CONFIG */
@@ -503,26 +503,26 @@ export default function ConfigurePage() {
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.2rem 1.2rem 1.25rem;
border-radius: 18px;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
- radial-gradient(ellipse 80% 60% at 100% 0%, rgba(127, 214, 208, 0.10), transparent 60%),
- linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
+ radial-gradient(ellipse 80% 60% at 100% 0%, rgba(171, 171, 171, 0.10), transparent 60%),
+ linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(12, 12, 12, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.cfg-post-card:hover {
- border-color: rgba(127, 214, 208, 0.38);
+ border-color: rgba(171, 171, 171, 0.38);
transform: translateY(-3px);
- box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(127, 214, 208, 0.14);
+ box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5), 0 0 24px rgba(171, 171, 171, 0.14);
}
.cfg-post-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 10px;
- color: #7FD6D0;
- background: rgba(127, 214, 208, 0.16);
- border: 1px solid rgba(127, 214, 208, 0.38);
+ color: #ababab;
+ background: rgba(171, 171, 171, 0.16);
+ border: 1px solid rgba(171, 171, 171, 0.38);
}
.cfg-post-card h3 { margin: 0; font-size: 1rem; font-weight: 600; color: #FFFFFF; letter-spacing: -0.005em; }
- .cfg-post-card p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
+ .cfg-post-card p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
/* PILLARS */
.cfg-pillars-grid {
@@ -536,21 +536,21 @@ export default function ConfigurePage() {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem;
padding: 0.95rem 1.05rem;
border-radius: 16px;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
- radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.12), transparent 60%),
- linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+ radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.12), transparent 60%),
+ linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.cfg-pillars-grid li:hover {
- border-color: rgba(74, 102, 216, 0.42);
+ border-color: rgba(145, 145, 145, 0.42);
transform: translateY(-2px);
- box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(58, 85, 196, 0.16);
+ box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(127, 127, 127, 0.16);
}
.cfg-pillars-grid li :global(svg) {
- color: #DEE0F0;
- background: rgba(74, 102, 216, 0.16);
- border: 1px solid rgba(74, 102, 216, 0.38);
+ color: #e7e7e7;
+ background: rgba(145, 145, 145, 0.16);
+ border: 1px solid rgba(145, 145, 145, 0.38);
border-radius: 10px;
padding: 8px;
width: 32px; height: 32px;
@@ -558,7 +558,7 @@ export default function ConfigurePage() {
}
.cfg-pillars-grid li div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cfg-pillars-grid li span { color: #FFFFFF; font-size: 0.82rem; font-weight: 600; letter-spacing: -0.005em; }
- .cfg-pillars-grid li small { color: #8891C7; font-size: 0.7rem; }
+ .cfg-pillars-grid li small { color: #a8a8a8; font-size: 0.7rem; }
/* FAQ */
.cfg-faq { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
@@ -570,11 +570,11 @@ export default function ConfigurePage() {
position: relative;
padding: 1rem 1.15rem;
border-radius: 14px;
- border: 1px solid rgba(222, 224, 240, 0.10);
- background: linear-gradient(135deg, rgba(20, 19, 26, 0.85), rgba(10, 10, 14, 0.94));
+ border: 1px solid rgba(231, 231, 231, 0.10);
+ background: linear-gradient(135deg, rgba(23, 23, 23, 0.85), rgba(12, 12, 12, 0.94));
transition: border-color 0.3s;
}
- .cfg-faq-item[open] { border-color: rgba(74, 102, 216, 0.42); }
+ .cfg-faq-item[open] { border-color: rgba(145, 145, 145, 0.42); }
.cfg-faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
cursor: pointer; list-style: none;
@@ -586,16 +586,16 @@ export default function ConfigurePage() {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.18);
- color: #DEE0F0;
+ border: 1px solid rgba(231, 231, 231, 0.18);
+ color: #e7e7e7;
font-size: 0.95rem;
transition: transform 0.3s, background 0.3s;
flex: none;
}
- .cfg-faq-item[open] .cfg-faq-icon { transform: rotate(45deg); background: rgba(74, 102, 216, 0.2); }
+ .cfg-faq-item[open] .cfg-faq-icon { transform: rotate(45deg); background: rgba(145, 145, 145, 0.2); }
.cfg-faq-item p {
margin: 0.75rem 0 0;
- color: #C9CCDE;
+ color: #d4d4d4;
font-size: 0.9rem;
line-height: 1.65;
}
@@ -605,23 +605,23 @@ export default function ConfigurePage() {
position: relative;
overflow: hidden;
border-radius: 26px;
- border: 1px solid rgba(74, 102, 216, 0.26);
+ border: 1px solid rgba(145, 145, 145, 0.26);
background:
- 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));
+ radial-gradient(ellipse 60% 100% at 100% 0%, rgba(127, 127, 127, 0.22), transparent 60%),
+ linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cfg-cta-glow {
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%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
filter: blur(100px); opacity: 0.55; pointer-events: none;
}
.cfg-cta-grid-bg {
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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 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%);
@@ -645,7 +645,7 @@ export default function ConfigurePage() {
font-size: clamp(1.65rem, 3vw, 2.25rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
}
- .cfg-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
+ .cfg-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
.cfg-cta-actions {
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 14f33d7..7e77681 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -21,7 +21,7 @@ export default function ContactPage() {
Talk to our Dubai robotics team.
-
+
Tell us about your venue, timeline, and use case. We will recommend a robot, share availability, and book a live demo at our Dubai showroom.
@@ -60,13 +60,13 @@ function ContactRow({ label, value, href, external = false }: { label: string; v
alignItems: 'center',
gap: '1rem',
padding: '0.75rem 0',
- borderBottom: '1px solid rgba(39, 63, 148,0.1)',
+ borderBottom: '1px solid rgba(94, 94, 94, 0.1)',
textDecoration: 'none',
- color: '#FBFBFD',
+ color: '#fcfcfc',
}}
>
-
{label}
-
{value}
+
{label}
+
{value}
);
}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index b834f83..ff9f3fd 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 8da15c6..5009e4a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,48 +1,48 @@
@import "tailwindcss";
@theme {
- /* === Luxury robotics Graphite + Royal Blue + Silver === */
- --color-bg: #0a0a0c;
- --color-bg-2: #16151a;
- --color-bg-3: #1c1b21;
+ /* === Luxury robotics — monochrome Black + Graphite + Silver === */
+ --color-bg: #0b0b0b;
+ --color-bg-2: #181818;
+ --color-bg-3: #1e1e1e;
--color-bg-4: #221f20;
--color-surface: rgba(34, 31, 32, 0.7);
- --color-primary: #0a0a0c;
- --color-secondary: #16151a;
+ --color-primary: #0b0b0b;
+ --color-secondary: #181818;
- /* Logo palette */
- --color-blue: #273F94;
- --color-blue-deep: #1a2e6e;
- --color-blue-bright: #3a55c4;
- --color-silver: #DEE0F0;
- --color-silver-soft: #D7DBEA;
- --color-steel: #8891C7;
+ /* Logo palette (grayscale — legacy names retained) */
+ --color-blue: #5e5e5e;
+ --color-blue-deep: #444444;
+ --color-blue-bright: #7f7f7f;
+ --color-silver: #e7e7e7;
+ --color-silver-soft: #e1e1e1;
+ --color-steel: #a8a8a8;
--color-graphite: #221F20;
- --color-white: #FBFBFD;
+ --color-white: #fcfcfc;
/* Accent aliases (kept for legacy class names) */
- --color-gold: #DEE0F0;
- --color-accent: #273F94;
- --color-accent-2: #D7DBEA;
- --color-accent-3: #8891C7;
- --color-accent-hover: #3a55c4;
+ --color-gold: #e7e7e7;
+ --color-accent: #5e5e5e;
+ --color-accent-2: #e1e1e1;
+ --color-accent-3: #a8a8a8;
+ --color-accent-hover: #7f7f7f;
/* Text */
- --color-text-primary: #FBFBFD;
- --color-text-secondary: #DEE0F0;
- --color-text-muted: #8891C7;
- --color-text-dim: #6a73a5;
+ --color-text-primary: #fcfcfc;
+ --color-text-secondary: #e7e7e7;
+ --color-text-muted: #a8a8a8;
+ --color-text-dim: #888888;
/* Borders */
- --color-border: rgba(199, 207, 230, 0.18);
- --color-border-strong: rgba(199, 207, 230, 0.36);
- --color-border-light: rgba(199, 207, 230, 0.08);
+ --color-border: rgba(215, 215, 215, 0.18);
+ --color-border-strong: rgba(215, 215, 215, 0.36);
+ --color-border-light: rgba(215, 215, 215, 0.08);
--color-border-neutral: rgba(255, 255, 255, 0.08);
/* Glass */
- --color-glass-bg: rgba(28, 27, 33, 0.6);
- --color-glass-border: rgba(199, 207, 230, 0.22);
- --color-glass-highlight: rgba(222, 224, 240, 0.06);
+ --color-glass-bg: rgba(30, 30, 30, 0.6);
+ --color-glass-border: rgba(215, 215, 215, 0.22);
+ --color-glass-highlight: rgba(231, 231, 231, 0.06);
/* Spacing */
--spacing-xs: 0.25rem;
@@ -60,8 +60,8 @@
--radius-2xl: 1.5rem;
/* Shadows */
- --shadow-glow: 0 0 30px rgba(39, 63, 148, 0.32);
- --shadow-glow-lg: 0 0 60px rgba(39, 63, 148, 0.4);
+ --shadow-glow: 0 0 30px rgba(94, 94, 94, 0.32);
+ --shadow-glow-lg: 0 0 60px rgba(94, 94, 94, 0.4);
--shadow-card: 0 14px 50px rgba(0, 0, 0, 0.6);
/* Transitions */
@@ -101,10 +101,10 @@ body > footer { flex: 0 0 auto; }
body {
background:
- radial-gradient(1200px 700px at 80% -10%, rgba(39, 63, 148, 0.18), transparent 60%),
- radial-gradient(900px 500px at -10% 30%, rgba(58, 85, 196, 0.10), transparent 60%),
- radial-gradient(800px 500px at 50% 110%, rgba(136, 145, 199, 0.10), transparent 60%),
- linear-gradient(180deg, #050507 0%, #0a0a0c 50%, #050507 100%);
+ radial-gradient(1200px 700px at 80% -10%, rgba(94, 94, 94, 0.18), transparent 60%),
+ radial-gradient(900px 500px at -10% 30%, rgba(127, 127, 127, 0.10), transparent 60%),
+ radial-gradient(800px 500px at 50% 110%, rgba(168, 168, 168, 0.10), transparent 60%),
+ linear-gradient(180deg, #060606 0%, #0b0b0b 50%, #060606 100%);
background-attachment: fixed;
}
@@ -118,7 +118,7 @@ html {
}
::selection {
- background-color: rgba(39, 63, 148, 0.55);
+ background-color: rgba(94, 94, 94, 0.55);
color: #ffffff;
}
@@ -145,7 +145,7 @@ html {
/* === Typography gradients (metallic silver-blue) === */
.text-gradient {
- background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
+ background: linear-gradient(135deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@@ -153,7 +153,7 @@ html {
}
.text-gradient-accent {
- background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
+ background: linear-gradient(135deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@@ -173,7 +173,7 @@ html {
inset: 0;
border-radius: inherit;
padding: 1px;
- background: linear-gradient(135deg, rgba(222, 224, 240, 0.55), rgba(136, 145, 199, 0.3) 45%, rgba(39, 63, 148, 0.0) 100%);
+ background: linear-gradient(135deg, rgba(231, 231, 231, 0.55), rgba(168, 168, 168, 0.3) 45%, rgba(94, 94, 94, 0.0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -185,10 +185,10 @@ html {
position: absolute;
inset: 0;
background:
- radial-gradient(ellipse 70% 60% at 60% 40%, rgba(39, 63, 148, 0.32) 0%, transparent 60%),
- radial-gradient(ellipse 60% 50% at 20% 70%, rgba(58, 85, 196, 0.22) 0%, transparent 55%),
- radial-gradient(ellipse 80% 70% at 80% 100%, rgba(136, 145, 199, 0.18) 0%, transparent 60%),
- linear-gradient(180deg, #07080c 0%, #0a0a10 50%, #050507 100%);
+ radial-gradient(ellipse 70% 60% at 60% 40%, rgba(94, 94, 94, 0.32) 0%, transparent 60%),
+ radial-gradient(ellipse 60% 50% at 20% 70%, rgba(127, 127, 127, 0.22) 0%, transparent 55%),
+ radial-gradient(ellipse 80% 70% at 80% 100%, rgba(168, 168, 168, 0.18) 0%, transparent 60%),
+ linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 50%, #060606 100%);
animation: heroShift 16s ease-in-out infinite alternate;
}
@@ -202,8 +202,8 @@ html {
position: absolute;
inset: 0;
background-image:
- linear-gradient(rgba(199, 207, 230, 0.05) 1px, transparent 1px),
- linear-gradient(90deg, rgba(199, 207, 230, 0.05) 1px, transparent 1px);
+ linear-gradient(rgba(215, 215, 215, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(215, 215, 215, 0.05) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000 30%, transparent 80%);
@@ -218,7 +218,7 @@ html {
}
.shimmer {
- background: linear-gradient(110deg, transparent 35%, rgba(222, 224, 240, 0.14) 50%, transparent 65%);
+ background: linear-gradient(110deg, transparent 35%, rgba(231, 231, 231, 0.14) 50%, transparent 65%);
background-size: 200% 100%;
animation: shimmer 3.5s linear infinite;
}
@@ -229,7 +229,7 @@ html {
position: absolute;
inset: 0;
pointer-events: none;
- background: linear-gradient(110deg, transparent 30%, rgba(199, 207, 230, 0.07) 50%, transparent 70%);
+ background: linear-gradient(110deg, transparent 30%, rgba(215, 215, 215, 0.07) 50%, transparent 70%);
background-size: 250% 100%;
animation: lightSweep 9s ease-in-out infinite;
mix-blend-mode: screen;
@@ -250,8 +250,8 @@ html {
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseGlow {
- 0%, 100% { box-shadow: 0 0 0 0 rgba(39, 63, 148, 0.55), 0 0 40px rgba(39, 63, 148, 0.32); }
- 50% { box-shadow: 0 0 0 12px rgba(39, 63, 148, 0), 0 0 60px rgba(39, 63, 148, 0.55); }
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 94, 94, 0.55), 0 0 40px rgba(94, 94, 94, 0.32); }
+ 50% { box-shadow: 0 0 0 12px rgba(94, 94, 94, 0), 0 0 60px rgba(94, 94, 94, 0.55); }
}
/* Scroll indicator */
@@ -279,8 +279,8 @@ html {
/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-2); }
-::-webkit-scrollbar-thumb { background: rgba(136, 145, 199, 0.28); border-radius: var(--radius-sm); }
-::-webkit-scrollbar-thumb:hover { background: rgba(39, 63, 148, 0.7); }
+::-webkit-scrollbar-thumb { background: rgba(168, 168, 168, 0.28); border-radius: var(--radius-sm); }
+::-webkit-scrollbar-thumb:hover { background: rgba(94, 94, 94, 0.7); }
/* === CTA Button System === */
/* Reusable across all sections — primary | secondary | ghost | link, sizes sm | md | lg.
@@ -306,7 +306,7 @@ html {
user-select: none;
}
.cta-btn:focus-visible {
- outline: 2px solid #DEE0F0;
+ outline: 2px solid #e7e7e7;
outline-offset: 3px;
}
.cta-btn:disabled,
@@ -327,8 +327,8 @@ html {
align-items: center;
justify-content: center;
border-radius: 999px;
- background: rgba(222, 224, 240, 0.12);
- border: 1px solid rgba(222, 224, 240, 0.22);
+ background: rgba(231, 231, 231, 0.12);
+ border: 1px solid rgba(231, 231, 231, 0.22);
color: currentColor;
transition: transform 0.35s, background 0.35s, border-color 0.35s;
flex-shrink: 0;
@@ -337,22 +337,22 @@ html {
.cta-md .cta-arrow { width: 24px; height: 24px; }
.cta-lg .cta-arrow { width: 26px; height: 26px; }
-/* PRIMARY — filled gradient, strongest emphasis */
+/* PRIMARY — bright silver-white pill, strongest emphasis on the near-black stage */
.cta-primary {
- background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
- color: #FFFFFF;
+ background: linear-gradient(135deg, #ffffff 0%, #ededed 45%, #cfcfcf 100%);
+ color: #0b0b0b;
box-shadow:
- 0 24px 56px rgba(39, 63, 148, 0.55),
- 0 0 0 1px rgba(222, 224, 240, 0.22),
- 0 0 32px rgba(74, 102, 216, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.24);
+ 0 24px 56px rgba(0, 0, 0, 0.55),
+ 0 0 0 1px rgba(255, 255, 255, 0.5),
+ 0 0 32px rgba(231, 231, 231, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.cta-primary::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
- background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
+ background: linear-gradient(120deg, transparent 30%, rgba(0, 0, 0, 0.08) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.7s ease;
pointer-events: none;
@@ -360,78 +360,78 @@ html {
.cta-primary:hover {
transform: translateY(-2px);
box-shadow:
- 0 30px 66px rgba(39, 63, 148, 0.7),
- 0 0 0 1px rgba(222, 224, 240, 0.32),
- 0 0 44px rgba(74, 102, 216, 0.55),
- inset 0 1px 0 rgba(255, 255, 255, 0.3);
+ 0 30px 66px rgba(0, 0, 0, 0.7),
+ 0 0 0 1px rgba(255, 255, 255, 0.7),
+ 0 0 44px rgba(231, 231, 231, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.cta-primary:hover::before { transform: translateX(100%); }
.cta-primary .cta-arrow {
- background: rgba(255, 255, 255, 0.18);
- border-color: rgba(255, 255, 255, 0.24);
+ background: rgba(11, 11, 11, 0.1);
+ border-color: rgba(11, 11, 11, 0.2);
}
.cta-primary:hover .cta-arrow {
- background: rgba(255, 255, 255, 0.32);
- border-color: rgba(255, 255, 255, 0.4);
+ background: rgba(11, 11, 11, 0.18);
+ border-color: rgba(11, 11, 11, 0.32);
}
/* SECONDARY — glassmorphism, supporting actions */
.cta-secondary {
- border-color: rgba(222, 224, 240, 0.55);
+ border-color: rgba(231, 231, 231, 0.55);
background:
- linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 60%),
- rgba(14, 13, 18, 0.55);
+ linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 60%),
+ rgba(16, 16, 16, 0.55);
color: #FFFFFF;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.55),
- inset 0 1px 0 rgba(222, 224, 240, 0.22),
- 0 0 0 1px rgba(58, 85, 196, 0.18);
+ inset 0 1px 0 rgba(231, 231, 231, 0.22),
+ 0 0 0 1px rgba(127, 127, 127, 0.18);
}
.cta-secondary::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
- background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.16) 50%, transparent 70%);
+ background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.16) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.7s ease;
pointer-events: none;
}
.cta-secondary:hover {
- border-color: rgba(222, 224, 240, 0.82);
+ border-color: rgba(231, 231, 231, 0.82);
background:
- linear-gradient(135deg, rgba(74, 102, 216, 0.3), rgba(20, 22, 38, 0.62) 60%),
- rgba(20, 22, 38, 0.62);
+ linear-gradient(135deg, rgba(145, 145, 145, 0.3), rgba(29, 29, 29, 0.62) 60%),
+ rgba(29, 29, 29, 0.62);
transform: translateY(-2px);
box-shadow:
0 22px 46px rgba(0, 0, 0, 0.62),
- inset 0 1px 0 rgba(222, 224, 240, 0.3),
- 0 0 0 1px rgba(58, 85, 196, 0.5),
- 0 0 32px rgba(58, 85, 196, 0.4);
+ inset 0 1px 0 rgba(231, 231, 231, 0.3),
+ 0 0 0 1px rgba(127, 127, 127, 0.5),
+ 0 0 32px rgba(127, 127, 127, 0.4);
}
.cta-secondary:hover::before { transform: translateX(100%); }
/* GHOST — outline, low-emphasis action */
.cta-ghost {
- border-color: rgba(222, 224, 240, 0.28);
+ border-color: rgba(231, 231, 231, 0.28);
background: transparent;
- color: #ECEEF6;
+ color: #f1f1f1;
}
.cta-ghost:hover {
- border-color: rgba(222, 224, 240, 0.6);
- background: rgba(58, 85, 196, 0.14);
+ border-color: rgba(231, 231, 231, 0.6);
+ background: rgba(127, 127, 127, 0.14);
color: #FFFFFF;
transform: translateY(-2px);
}
.cta-ghost .cta-arrow {
- background: rgba(222, 224, 240, 0.08);
- border-color: rgba(222, 224, 240, 0.2);
+ background: rgba(231, 231, 231, 0.08);
+ border-color: rgba(231, 231, 231, 0.2);
}
.cta-ghost:hover .cta-arrow {
- background: rgba(58, 85, 196, 0.22);
- border-color: rgba(222, 224, 240, 0.4);
+ background: rgba(127, 127, 127, 0.22);
+ border-color: rgba(231, 231, 231, 0.4);
}
/* LINK — text-only for minor inline links */
@@ -439,7 +439,7 @@ html {
padding: 0.45rem 0;
border: none;
background: transparent;
- color: #DEE0F0;
+ color: #e7e7e7;
font-size: 0.72rem;
letter-spacing: 0.2em;
border-bottom: 1px solid transparent;
@@ -449,7 +449,7 @@ html {
}
.cta-link:hover {
color: #FFFFFF;
- border-bottom-color: rgba(222, 224, 240, 0.55);
+ border-bottom-color: rgba(231, 231, 231, 0.55);
transform: translateX(2px);
}
.cta-link .cta-arrow {
@@ -492,53 +492,53 @@ html {
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
- background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
- color: #FFFFFF;
+ background: linear-gradient(135deg, #ffffff 0%, #ededed 45%, #cfcfcf 100%);
+ color: #0b0b0b;
box-shadow:
- 0 24px 56px rgba(39, 63, 148, 0.55),
- 0 0 0 1px rgba(222, 224, 240, 0.22),
- 0 0 32px rgba(74, 102, 216, 0.4),
- inset 0 1px 0 rgba(255, 255, 255, 0.24);
+ 0 24px 56px rgba(0, 0, 0, 0.55),
+ 0 0 0 1px rgba(255, 255, 255, 0.5),
+ 0 0 32px rgba(231, 231, 231, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-primary:hover {
box-shadow:
- 0 30px 66px rgba(39, 63, 148, 0.7),
- 0 0 0 1px rgba(222, 224, 240, 0.32),
- 0 0 44px rgba(74, 102, 216, 0.55),
- inset 0 1px 0 rgba(255, 255, 255, 0.3);
+ 0 30px 66px rgba(0, 0, 0, 0.7),
+ 0 0 0 1px rgba(255, 255, 255, 0.7),
+ 0 0 44px rgba(231, 231, 231, 0.4),
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-ghost {
background:
- linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 60%),
- rgba(14, 13, 18, 0.55);
+ linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 60%),
+ rgba(16, 16, 16, 0.55);
color: #FFFFFF;
- border-color: rgba(222, 224, 240, 0.55);
+ border-color: rgba(231, 231, 231, 0.55);
backdrop-filter: blur(14px);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.55),
- inset 0 1px 0 rgba(222, 224, 240, 0.22),
- 0 0 0 1px rgba(58, 85, 196, 0.18);
+ inset 0 1px 0 rgba(231, 231, 231, 0.22),
+ 0 0 0 1px rgba(127, 127, 127, 0.18);
}
.btn-ghost:hover {
- border-color: rgba(222, 224, 240, 0.82);
+ border-color: rgba(231, 231, 231, 0.82);
background:
- linear-gradient(135deg, rgba(74, 102, 216, 0.3), rgba(20, 22, 38, 0.62) 60%),
- rgba(20, 22, 38, 0.62);
+ linear-gradient(135deg, rgba(145, 145, 145, 0.3), rgba(29, 29, 29, 0.62) 60%),
+ rgba(29, 29, 29, 0.62);
color: #FFFFFF;
box-shadow:
0 22px 46px rgba(0, 0, 0, 0.62),
- inset 0 1px 0 rgba(222, 224, 240, 0.3),
- 0 0 0 1px rgba(58, 85, 196, 0.5),
- 0 0 32px rgba(58, 85, 196, 0.4);
+ inset 0 1px 0 rgba(231, 231, 231, 0.3),
+ 0 0 0 1px rgba(127, 127, 127, 0.5),
+ 0 0 32px rgba(127, 127, 127, 0.4);
}
.btn-outline {
background: transparent;
- color: #ECEEF6;
- border-color: rgba(222, 224, 240, 0.28);
+ color: #f1f1f1;
+ border-color: rgba(231, 231, 231, 0.28);
}
.btn-outline:hover {
- background: rgba(58, 85, 196, 0.14);
- border-color: rgba(222, 224, 240, 0.6);
+ background: rgba(127, 127, 127, 0.14);
+ border-color: rgba(231, 231, 231, 0.6);
color: #FFFFFF;
}
@@ -580,7 +580,7 @@ html {
/* === Cards === */
.card {
position: relative;
- background: rgba(22, 21, 26, 0.72);
+ background: rgba(24, 24, 24, 0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-border);
@@ -590,8 +590,8 @@ html {
}
.card:hover {
transform: translateY(-6px);
- border-color: rgba(136, 145, 199, 0.55);
- box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(39, 63, 148, 0.22);
+ border-color: rgba(168, 168, 168, 0.55);
+ box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(94, 94, 94, 0.22);
}
/* === Configurator (preserve previous theme rules) === */
diff --git a/src/app/industries/[slug]/page.tsx b/src/app/industries/[slug]/page.tsx
index 15a1ab3..db2192b 100644
--- a/src/app/industries/[slug]/page.tsx
+++ b/src/app/industries/[slug]/page.tsx
@@ -461,23 +461,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise
@@ -161,11 +161,11 @@ export default function IndustriesPage() {
position: relative;
overflow: hidden;
border-radius: 26px;
- border: 1px solid rgba(74, 102, 216, 0.20);
+ border: 1px solid rgba(145, 145, 145, 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));
+ radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
+ radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
+ linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 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 {
@@ -177,14 +177,14 @@ export default function IndustriesPage() {
.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%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 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%);
@@ -203,8 +203,8 @@ export default function IndustriesPage() {
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);
+ width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
+ box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
animation: ind-pulse 2.2s ease-in-out infinite;
}
@keyframes ind-pulse {
@@ -218,7 +218,7 @@ export default function IndustriesPage() {
}
.ind-hero-title .text-gradient { font-weight: 500; }
.ind-hero-sub {
- margin: 0; color: #DEE0F0;
+ margin: 0; color: #e7e7e7;
font-size: clamp(0.95rem, 1.8vw, 1.1rem); line-height: 1.65; max-width: 560px;
}
@@ -230,8 +230,8 @@ export default function IndustriesPage() {
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;
+ border: 1px solid color-mix(in srgb, var(--acc) 35%, rgba(145, 145, 145, 0.20));
+ background: #0c0c0c;
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
@@ -243,12 +243,12 @@ export default function IndustriesPage() {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
- background: rgba(74, 102, 216, 0.25);
+ background: rgba(145, 145, 145, 0.25);
}
.ind-collage-tile {
position: relative;
overflow: hidden;
- background: #0a0a0e;
+ background: #0c0c0c;
}
.ind-collage-tile :global(img) {
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
@@ -261,7 +261,7 @@ export default function IndustriesPage() {
.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%),
+ linear-gradient(180deg, rgba(12, 12, 12, 0.10) 0%, rgba(12, 12, 12, 0.55) 100%),
radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%);
pointer-events: none;
}
@@ -283,19 +283,19 @@ export default function IndustriesPage() {
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));
+ border-top: 1px solid rgba(231, 231, 231, 0.10);
+ background: linear-gradient(180deg, rgba(12, 12, 12, 0.0), rgba(12, 12, 12, 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;
+ font-size: 0.6rem; letter-spacing: 0.3em; font-weight: 800; color: #e7e7e7;
}
- .ind-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
+ .ind-live { color: #ababab; 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);
+ width: 7px; height: 7px; border-radius: 999px; background: #ababab;
+ box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
}
@media (min-width: 920px) {
@@ -321,16 +321,16 @@ export default function IndustriesPage() {
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));
+ border: 1px solid rgba(188, 188, 188, 0.22);
+ background: linear-gradient(135deg, rgba(168, 168, 168, 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);
+ color: #e7e7e7;
+ background: rgba(145, 145, 145, 0.18);
+ border: 1px solid rgba(145, 145, 145, 0.45);
}
.ind-trust-label {
display: block;
@@ -338,7 +338,7 @@ export default function IndustriesPage() {
letter-spacing: -0.005em;
}
.ind-trust-sub {
- display: block; font-size: 0.7rem; color: #8891C7; margin-top: 0.1rem;
+ display: block; font-size: 0.7rem; color: #a8a8a8; margin-top: 0.1rem;
}
@media (min-width: 820px) {
.ind-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@@ -356,23 +356,23 @@ export default function IndustriesPage() {
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));
+ border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(188, 188, 188, 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));
+ linear-gradient(135deg, rgba(168, 168, 168, 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));
+ border-color: color-mix(in srgb, var(--acc) 55%, rgba(188, 188, 188, 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));
+ background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #c8c8c8));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -382,7 +382,7 @@ export default function IndustriesPage() {
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
- color: #A6B2D8;
+ color: #bfbfbf;
}
@media (min-width: 720px) {
.ind-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5fb6d8b..856bdd2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
- themeColor: '#0a0a0c',
+ themeColor: '#0b0b0b',
};
export default function RootLayout({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b5d97ae..309b9b0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -160,7 +160,7 @@ function SectionHeading({ eyebrow, title, description }: { eyebrow: string; titl
{title}
{description && (
-
+
{description}
)}
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index ccbd3cd..291b9d9 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -6,35 +6,35 @@ export default function PrivacyPolicyPage() {
return (
<>
-
+
Privacy Policy
- Effective Date: {new Date().toLocaleDateString('en-AE')}
+ Effective Date: {new Date().toLocaleDateString('en-AE')}
1. Information We Collect
-
+
At YS Lootah Robotics, we collect information you provide directly to us when you request information, use the G1 Customizer, or contact us. This includes your name, email address, phone number, and any other information you choose to provide in your message.
2. How We Use Your Information
-
+
We use the information we collect to respond to your inquiries, deliver our robotics enterprise solutions, maintain our dashboard, and communicate with you about your custom humanoid configurations.
3. Data Security
-
+
We implement robust security measures designed to protect your personal information. Your contact data is stored securely in our private databases strictly for administrative and operational purposes.
4. Contact Us
-
+
If you have questions or concerns about this Privacy Policy, please reach out to us at:
YS Lootah Robotics
-
+
{filtered.length} robot{filtered.length === 1 ? '' : 's'} found
{(filter.brand !== 'all' || filter.category !== 'all') && (
@@ -81,7 +81,7 @@ function CatalogInner() {
style={{
background: 'transparent',
border: 'none',
- color: '#DEE0F0',
+ color: '#e7e7e7',
fontSize: '0.78rem',
letterSpacing: '0.14em',
textTransform: 'uppercase',
@@ -95,9 +95,9 @@ function CatalogInner() {
{filtered.length === 0 ? (
-
+
No robots match these filters yet. Try a different brand or category, or{' '}
-
contact us for tailored options.
+
contact us for tailored options.
) : (
Loading catalog…
}>
+
Loading catalog… }>
);
diff --git a/src/app/robots/[slug]/page.tsx b/src/app/robots/[slug]/page.tsx
index ba91f40..7ea61e8 100644
--- a/src/app/robots/[slug]/page.tsx
+++ b/src/app/robots/[slug]/page.tsx
@@ -43,12 +43,12 @@ export default async function RobotDetailPage({ params }: { params: Promise
-
-
+ /
- /
- {robot.name}
+ {robot.name}
- {robot.tagline}
- {robot.longDescription}
+ {robot.tagline}
+ {robot.longDescription}
Request quotation
@@ -123,14 +123,14 @@ export default async function RobotDetailPage({ params }: { params: Promise
{robot.features.map((f) => (
- {f}
+ {f}
))}
{robot.useCases.map((u) => (
- {u}
+ {u}
))}
@@ -156,7 +156,7 @@ export default async function RobotDetailPage({ params }: { params: Promise
-
+
Tell us about your venue, timeline, and use case. We will respond with availability, configuration options, and pricing for the UAE.
@@ -166,7 +166,7 @@ export default async function RobotDetailPage({ params }: { params: Promise
Talk to an advisor
Prefer a quick conversation?
-
+
Call our Dubai team or message us on WhatsApp we will share availability and demo slots for {robot.name}.
Call +971 55 948 2728
diff --git a/src/app/robots/page.tsx b/src/app/robots/page.tsx
index c10d15c..bdc1388 100644
--- a/src/app/robots/page.tsx
+++ b/src/app/robots/page.tsx
@@ -146,41 +146,41 @@ export default function RobotsPage() {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
- color: #8891C7;
+ color: #a8a8a8;
}
- .rb-crumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
+ .rb-crumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
.rb-crumbs a:hover { color: #FFFFFF; }
.rb-crumbs li[aria-current="page"] { color: #FFFFFF; }
- .rb-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
+ .rb-crumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
/* HERO */
.rb-hero {
position: relative; overflow: hidden;
border-radius: 26px;
- border: 1px solid rgba(74, 102, 216, 0.20);
+ border: 1px solid rgba(145, 145, 145, 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));
+ radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
+ radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.16), transparent 60%),
+ linear-gradient(135deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.97));
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.rb-hero-glow {
position: absolute; width: 580px; height: 580px; border-radius: 999px;
top: -220px; right: -180px;
- background: radial-gradient(circle, rgba(120, 140, 255, 0.34), transparent 70%);
+ background: radial-gradient(circle, rgba(188, 188, 188, 0.34), transparent 70%);
filter: blur(120px); opacity: 0.55; pointer-events: none;
}
.rb-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.30), transparent 70%);
+ background: radial-gradient(circle, rgba(145, 145, 145, 0.30), transparent 70%);
filter: blur(110px); opacity: 0.45; pointer-events: none;
}
.rb-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);
+ linear-gradient(rgba(145, 145, 145, 0.05) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 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%);
@@ -199,8 +199,8 @@ export default function RobotsPage() {
width: fit-content;
}
.rb-dot {
- width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
- box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+ width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
+ box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
}
.rb-hero-title {
margin: 0;
@@ -210,7 +210,7 @@ export default function RobotsPage() {
}
.rb-hero-title :global(.text-gradient) { font-weight: 500; }
.rb-hero-sub {
- margin: 0; color: #DEE0F0;
+ margin: 0; color: #e7e7e7;
font-size: clamp(0.95rem, 1.8vw, 1.08rem);
line-height: 1.65;
max-width: 600px;
@@ -226,9 +226,9 @@ export default function RobotsPage() {
display: inline-flex; align-items: center;
padding: 0.45rem 0.85rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.14);
- background: rgba(20, 19, 26, 0.6);
- color: #DEE0F0;
+ border: 1px solid rgba(231, 231, 231, 0.14);
+ background: rgba(23, 23, 23, 0.6);
+ color: #e7e7e7;
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
text-decoration: none;
@@ -236,8 +236,8 @@ export default function RobotsPage() {
}
.rb-jump li a:hover {
color: #FFFFFF;
- border-color: rgba(74, 102, 216, 0.5);
- background: rgba(28, 27, 38, 0.7);
+ border-color: rgba(145, 145, 145, 0.5);
+ background: rgba(33, 33, 33, 0.7);
}
/* HERO STATS */
@@ -251,9 +251,9 @@ export default function RobotsPage() {
display: flex; flex-direction: column; gap: 0.3rem;
padding: 0.95rem 1rem;
border-radius: 16px;
- border: 1px solid rgba(120, 140, 255, 0.22);
+ border: 1px solid rgba(188, 188, 188, 0.22);
background:
- linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+ linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
overflow: hidden;
min-height: 86px;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
@@ -261,22 +261,22 @@ export default function RobotsPage() {
.rb-stat::before {
content: ''; position: absolute;
top: 0; right: 14px; width: 24px; height: 1px;
- background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+ background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
}
.rb-stat:hover {
- border-color: rgba(120, 140, 255, 0.45);
+ border-color: rgba(188, 188, 188, 0.45);
transform: translateY(-1px);
- box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
}
.rb-stat-value {
font-size: clamp(1.55rem, 2.6vw, 2rem);
font-weight: 500; letter-spacing: -0.025em; line-height: 1;
- background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+ background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.rb-stat-label {
font-size: 0.64rem; letter-spacing: 0.22em;
- text-transform: uppercase; font-weight: 700; color: #A6B2D8;
+ text-transform: uppercase; font-weight: 700; color: #bfbfbf;
}
@media (min-width: 920px) {
@@ -301,7 +301,7 @@ export default function RobotsPage() {
}
.rb-section-head h2 :global(.text-gradient) { font-weight: 500; }
.rb-section-head p {
- margin: 0; color: #DEE0F0;
+ margin: 0; color: #e7e7e7;
font-size: clamp(0.92rem, 2vw, 1.02rem);
line-height: 1.65;
}
diff --git a/src/app/terms-of-service/page.tsx b/src/app/terms-of-service/page.tsx
index 7aaf3b0..25f5b3a 100644
--- a/src/app/terms-of-service/page.tsx
+++ b/src/app/terms-of-service/page.tsx
@@ -6,35 +6,35 @@ export default function TermsOfServicePage() {
return (
<>
+
Terms of Service
- Effective Date: {new Date().toLocaleDateString('en-AE')}
+ Effective Date: {new Date().toLocaleDateString('en-AE')}
1. Acceptance of Terms
-
+
By accessing and utilizing the YS Lootah Robotics web platform and the G1 Configurator, you accept and agree to be bound by the terms and provisions of this agreement.
2. Use of the Site & Configurator
-
+
The 3D G1 Configurator is provided for informational and demonstrative purposes to showcase the capabilities of YS Lootah technologies. You agree to use this site strictly for lawful purposes resulting in enterprise robotics inquiries and configurations.
3. Intellectual Property Rights
-
+
All original content on this website, including but not limited to text, graphics, 3D models (GLB files), logos, and software, is the property of YS Lootah Robotics and is protected by United Arab Emirates and international copyright laws.
4. Disclaimer of Warranties
-
+
The materials on our platform are provided "as is". We make no warranties, expressed or implied, and hereby disclaim to the fullest extent permitted by law all warranties regarding the immediate enterprise availability of the rendered concepts displayed in the Configurator.
diff --git a/src/components/CheckoutOverlay.tsx b/src/components/CheckoutOverlay.tsx
index c354616..e2ffbdb 100644
--- a/src/components/CheckoutOverlay.tsx
+++ b/src/components/CheckoutOverlay.tsx
@@ -88,13 +88,13 @@ export function CheckoutOverlay() {
overflowY: 'auto',
margin: '1rem',
background: 'rgba(255, 255, 255, 0.95)',
- border: '1px solid rgba(59, 130, 246, 0.08)',
+ border: '1px solid rgba(153, 153, 153, 0.08)',
borderRadius: '1rem',
- boxShadow: '0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.1)',
+ boxShadow: '0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(153, 153, 153, 0.1)',
}}>
{/* Header with progress */}
{step !== 'confirmed' && (
-
+
Back
-
+
Checkout
@@ -179,7 +179,7 @@ export function CheckoutOverlay() {
appearance: {
theme: 'stripe',
variables: {
- colorPrimary: '#2563eb',
+ colorPrimary: '#888888',
borderRadius: '0.375rem',
fontFamily: 'inherit',
},
@@ -204,9 +204,9 @@ export function CheckoutOverlay() {
style={{
padding: '0.5rem 1rem',
borderRadius: '0.375rem',
- border: '1px solid rgba(59, 130, 246, 0.5)',
- background: 'rgba(59, 130, 246, 0.08)',
- color: '#2563eb',
+ border: '1px solid rgba(153, 153, 153, 0.5)',
+ background: 'rgba(153, 153, 153, 0.08)',
+ color: '#888888',
cursor: 'pointer',
fontSize: '0.8rem',
fontWeight: 600,
@@ -216,7 +216,7 @@ export function CheckoutOverlay() {
) : (
-
Initializing secure payment...
+
Initializing secure payment...
)}
) : null}
diff --git a/src/components/ConfigPanel.tsx b/src/components/ConfigPanel.tsx
index f918b26..e8c00a0 100644
--- a/src/components/ConfigPanel.tsx
+++ b/src/components/ConfigPanel.tsx
@@ -87,17 +87,17 @@ export function ConfigPanel() {
padding: '0.65rem 0.75rem',
borderRadius: '12px',
border: isActive
- ? '1px solid rgba(120, 140, 255, 0.55)'
- : '1px solid rgba(222, 224, 240, 0.10)',
+ ? '1px solid rgba(188, 188, 188, 0.55)'
+ : '1px solid rgba(231, 231, 231, 0.10)',
background: isActive
- ? 'linear-gradient(135deg, rgba(80, 110, 255, 0.16), rgba(28, 27, 38, 0.85))'
- : 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+ ? 'linear-gradient(135deg, rgba(168, 168, 168, 0.16), rgba(33, 33, 33, 0.85))'
+ : 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
cursor: 'pointer',
transition: 'all 0.25s ease',
textAlign: 'left',
width: '100%',
boxShadow: isActive
- ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.22)'
+ ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.22)'
: '0 4px 10px rgba(0, 0, 0, 0.3)',
}}
>
@@ -123,7 +123,7 @@ export function ConfigPanel() {
@@ -131,7 +131,7 @@ export function ConfigPanel() {
{persona.description}
@@ -141,22 +141,22 @@ export function ConfigPanel() {
{isActive && loadingPersona === persona.id ? (
) : isActive ? (
@@ -183,23 +183,23 @@ export function ConfigPanel() {
padding: '0.7rem 0.8rem',
borderRadius: '12px',
border: isActive
- ? '1px solid rgba(120, 140, 255, 0.55)'
- : '1px solid rgba(222, 224, 240, 0.10)',
+ ? '1px solid rgba(188, 188, 188, 0.55)'
+ : '1px solid rgba(231, 231, 231, 0.10)',
background: isActive
- ? 'linear-gradient(135deg, rgba(80, 110, 255, 0.16), rgba(28, 27, 38, 0.85))'
- : 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+ ? 'linear-gradient(135deg, rgba(168, 168, 168, 0.16), rgba(33, 33, 33, 0.85))'
+ : 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
cursor: 'pointer',
transition: 'all 0.25s ease',
textAlign: 'left',
boxShadow: isActive
- ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.22)'
+ ? '0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.22)'
: '0 4px 10px rgba(0, 0, 0, 0.28)',
}}
>
@@ -207,7 +207,7 @@ export function ConfigPanel() {
{opt.description}
@@ -260,8 +260,8 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
gap: '0.75rem',
padding: '0.6rem 0.7rem',
borderRadius: '12px',
- border: '1px solid rgba(222, 224, 240, 0.10)',
- background: 'linear-gradient(135deg, rgba(22, 21, 30, 0.78), rgba(14, 13, 20, 0.92))',
+ border: '1px solid rgba(231, 231, 231, 0.10)',
+ background: 'linear-gradient(135deg, rgba(26, 26, 26, 0.78), rgba(17, 17, 17, 0.92))',
}}
>
{label}
-
{value.toUpperCase()}
+
{value.toUpperCase()}
);
@@ -315,18 +315,18 @@ function ColorInput({ label, value, onChange }: { label: string; value: string;
const sectionWrap: React.CSSProperties = {
borderRadius: '14px',
padding: '0.9rem 0.95rem 1rem',
- border: '1px solid rgba(222, 224, 240, 0.08)',
- background: 'linear-gradient(180deg, rgba(20, 19, 26, 0.55), rgba(10, 10, 14, 0.75))',
+ border: '1px solid rgba(231, 231, 231, 0.08)',
+ background: 'linear-gradient(180deg, rgba(23, 23, 23, 0.55), rgba(12, 12, 12, 0.75))',
};
const sectionTitleStyle: React.CSSProperties = {
fontSize: '0.65rem',
fontWeight: 800,
- color: '#8891C7',
+ color: '#a8a8a8',
textTransform: 'uppercase',
letterSpacing: '0.24em',
margin: 0,
paddingBottom: '0.6rem',
- borderBottom: '1px solid rgba(74, 102, 216, 0.18)',
+ borderBottom: '1px solid rgba(145, 145, 145, 0.18)',
marginBottom: '0.85rem',
};
diff --git a/src/components/ConfiguratorSection.tsx b/src/components/ConfiguratorSection.tsx
index e2ff69d..2e6df5e 100644
--- a/src/components/ConfiguratorSection.tsx
+++ b/src/components/ConfiguratorSection.tsx
@@ -22,7 +22,7 @@ export function ConfiguratorSection() {
width: '100%',
height: '100vh',
background:
- 'radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.10), transparent 55%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(136, 145, 199, 0.08), transparent 60%), linear-gradient(135deg, rgba(14, 13, 22, 0.98), rgba(6, 6, 10, 0.99))',
+ 'radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.10), transparent 55%), radial-gradient(ellipse 60% 80% at 100% 100%, rgba(168, 168, 168, 0.08), transparent 60%), linear-gradient(135deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.99))',
}}
aria-label={t('app.title')}
>
@@ -41,10 +41,10 @@ export function ConfiguratorSection() {
width: '420px',
height: '100%',
background:
- 'linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96))',
+ 'linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96))',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
- borderRight: '1px solid rgba(74, 102, 216, 0.18)',
+ borderRight: '1px solid rgba(145, 145, 145, 0.18)',
boxShadow: '4px 0 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
display: 'flex',
flexDirection: 'column',
@@ -76,7 +76,7 @@ export function ConfiguratorSection() {
style={{
width: '40px',
height: '4px',
- backgroundColor: 'rgba(222, 224, 240, 0.18)',
+ backgroundColor: 'rgba(231, 231, 231, 0.18)',
borderRadius: '2px',
transition: 'width 0.2s, background-color 0.2s',
}}
@@ -87,7 +87,7 @@ export function ConfiguratorSection() {
Live build · Unitree G1
@@ -156,7 +156,7 @@ export function ConfiguratorSection() {
width: '100%',
height: '100%',
background:
- 'radial-gradient(ellipse 100% 70% at 50% 45%, rgba(80, 110, 200, 0.22), transparent 70%), radial-gradient(ellipse 60% 24% at 50% 92%, rgba(220, 228, 245, 0.20), transparent 70%), linear-gradient(180deg, rgba(24, 26, 40, 0.98), rgba(12, 13, 22, 1))',
+ 'radial-gradient(ellipse 100% 70% at 50% 45%, rgba(140, 140, 140, 0.22), transparent 70%), radial-gradient(ellipse 60% 24% at 50% 92%, rgba(233, 233, 233, 0.20), transparent 70%), linear-gradient(180deg, rgba(32, 32, 32, 0.98), rgba(17, 17, 17, 1))',
}}
role="main"
aria-label={t('app.title')}
@@ -167,7 +167,7 @@ export function ConfiguratorSection() {
position: 'absolute',
inset: 0,
backgroundImage:
- 'linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px)',
+ 'linear-gradient(rgba(145, 145, 145, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(145, 145, 145, 0.06) 1px, transparent 1px)',
backgroundSize: '56px 56px',
maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
@@ -185,7 +185,7 @@ export function ConfiguratorSection() {
alignItems: 'center',
justifyContent: 'center',
background:
- 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%), rgba(8, 8, 14, 0.95)',
+ 'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(127, 127, 127, 0.18), transparent 70%), rgba(11, 11, 11, 0.95)',
zIndex: 10,
}}
role="status"
@@ -195,8 +195,8 @@ export function ConfiguratorSection() {
style={{
width: '52px',
height: '52px',
- border: '3px solid rgba(74, 102, 216, 0.18)',
- borderTopColor: '#7FD6D0',
+ border: '3px solid rgba(145, 145, 145, 0.18)',
+ borderTopColor: '#ababab',
borderRadius: '50%',
animation: 'spin 0.9s linear infinite',
}}
@@ -205,7 +205,7 @@ export function ConfiguratorSection() {
style={{
marginTop: '1.1rem',
fontSize: '0.7rem',
- color: '#8891C7',
+ color: '#a8a8a8',
letterSpacing: '0.22em',
textTransform: 'uppercase',
fontWeight: 700,
@@ -231,8 +231,8 @@ export function ConfiguratorSection() {
diff --git a/src/components/InteractiveHotspot.tsx b/src/components/InteractiveHotspot.tsx
index 1d5596d..94844ff 100644
--- a/src/components/InteractiveHotspot.tsx
+++ b/src/components/InteractiveHotspot.tsx
@@ -75,8 +75,8 @@ export function InteractiveHotspot({
>
@@ -83,19 +83,15 @@ export function Navbar() {
position: 'relative',
width: 40,
height: 40,
- borderRadius: '50%',
- overflow: 'hidden',
flex: 'none',
- boxShadow: '0 0 18px rgba(39, 63, 148, 0.35)',
- border: '1px solid rgba(39, 63, 148,0.4)',
}}
>
@@ -103,7 +99,7 @@ export function Navbar() {
YS Lootah
-
+
Robotics
@@ -116,7 +112,7 @@ export function Navbar() {
href={l.href}
style={{
position: 'relative',
- color: isActive(l.href) ? '#DEE0F0' : '#DEE0F0',
+ color: isActive(l.href) ? '#e7e7e7' : '#e7e7e7',
fontSize: '0.78rem',
fontWeight: 600,
textDecoration: 'none',
@@ -124,7 +120,7 @@ export function Navbar() {
textTransform: 'uppercase',
transition: 'color 0.2s',
paddingBottom: 4,
- borderBottom: isActive(l.href) ? '1px solid #DEE0F0' : '1px solid transparent',
+ borderBottom: isActive(l.href) ? '1px solid #e7e7e7' : '1px solid transparent',
}}
>
{l.label}
@@ -150,9 +146,9 @@ export function Navbar() {
width: 42,
height: 42,
borderRadius: 12,
- border: '1px solid rgba(39, 63, 148,0.2)',
+ border: '1px solid rgba(94, 94, 94, 0.2)',
background: 'rgba(15, 12, 8,0.6)',
- color: '#FBFBFD',
+ color: '#fcfcfc',
cursor: 'pointer',
display: 'none',
alignItems: 'center',
@@ -198,11 +194,11 @@ export function Navbar() {
style={{
fontSize: '1.5rem',
fontWeight: 500,
- color: isActive(l.href) ? '#DEE0F0' : '#FBFBFD',
+ color: isActive(l.href) ? '#e7e7e7' : '#fcfcfc',
textDecoration: 'none',
letterSpacing: '-0.01em',
padding: '0.75rem 0',
- borderBottom: '1px solid rgba(39, 63, 148,0.12)',
+ borderBottom: '1px solid rgba(94, 94, 94, 0.12)',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
diff --git a/src/components/PayloadMesh.tsx b/src/components/PayloadMesh.tsx
index 3c1b433..975b895 100644
--- a/src/components/PayloadMesh.tsx
+++ b/src/components/PayloadMesh.tsx
@@ -30,24 +30,24 @@ const getModelPath = (type: string): string | null => {
// Placeholder materials by payload type - visually distinct and bright
const PLACEHOLDER_MATERIALS: Record = {
camera: new THREE.MeshStandardMaterial({
- color: '#3b82f6',
+ color: '#999999',
metalness: 0.6,
roughness: 0.4,
- emissive: '#3b82f6',
+ emissive: '#999999',
emissiveIntensity: 0.5,
}),
ptzcamera: new THREE.MeshStandardMaterial({
- color: '#3b82f6',
+ color: '#999999',
metalness: 0.6,
roughness: 0.4,
- emissive: '#3b82f6',
+ emissive: '#999999',
emissiveIntensity: 0.5,
}),
ptz: new THREE.MeshStandardMaterial({
- color: '#3b82f6',
+ color: '#999999',
metalness: 0.6,
roughness: 0.4,
- emissive: '#3b82f6',
+ emissive: '#999999',
emissiveIntensity: 0.5,
}),
light: new THREE.MeshStandardMaterial({
@@ -65,17 +65,17 @@ const PLACEHOLDER_MATERIALS: Record = {
emissiveIntensity: 0.6,
}),
speaker: new THREE.MeshStandardMaterial({
- color: '#a855f7',
+ color: '#a6a6a6',
metalness: 0.5,
roughness: 0.5,
- emissive: '#a855f7',
+ emissive: '#a6a6a6',
emissiveIntensity: 0.5,
}),
default: new THREE.MeshStandardMaterial({
- color: '#3b82f6',
+ color: '#999999',
metalness: 0.6,
roughness: 0.4,
- emissive: '#3b82f6',
+ emissive: '#999999',
emissiveIntensity: 0.5,
}),
};
@@ -94,7 +94,7 @@ function PayloadLoader({ modelPath }: { modelPath: string }) {
if (child instanceof THREE.Mesh) {
if (child.material) {
child.material = new THREE.MeshStandardMaterial({
- color: '#6a73a5',
+ color: '#888888',
metalness: 0.6,
roughness: 0.4,
});
diff --git a/src/components/PricingEngine.tsx b/src/components/PricingEngine.tsx
index 90c3aee..6ef182f 100644
--- a/src/components/PricingEngine.tsx
+++ b/src/components/PricingEngine.tsx
@@ -6,7 +6,7 @@ import { usePricingStore, pricingStore } from '@/store/usePricingStore';
import { orderStore } from '@/store/useOrderStore';
import { snapshotStore } from '@/store/useSnapshotStore';
-const DEFAULT_COLOR = '#96a2b6';
+const DEFAULT_COLOR = '#a6a6a6';
function formatAED(price: number): string {
return new Intl.NumberFormat('en-AE').format(price);
@@ -65,19 +65,19 @@ export function PricingEngine() {
padding: '1rem 1rem 1.05rem',
borderRadius: '14px',
background:
- 'radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 38, 0.92), rgba(12, 12, 18, 0.96))',
- border: '1px solid rgba(74, 102, 216, 0.28)',
+ 'radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.18), transparent 60%), linear-gradient(180deg, rgba(33, 33, 33, 0.92), rgba(15, 15, 15, 0.96))',
+ border: '1px solid rgba(145, 145, 145, 0.28)',
boxShadow: '0 14px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
}}>
Price Breakdown
@@ -96,16 +96,16 @@ export function PricingEngine() {
justifyContent: 'space-between',
alignItems: 'baseline',
paddingTop: '0.65rem',
- borderTop: '1px solid rgba(74, 102, 216, 0.22)',
+ borderTop: '1px solid rgba(145, 145, 145, 0.22)',
marginTop: '0.2rem',
}}
>
- Total
+ Total
{
e.currentTarget.style.transform = 'translateY(-1px)';
- e.currentTarget.style.boxShadow = '0 14px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(74, 102, 216, 0.45)';
+ e.currentTarget.style.boxShadow = '0 14px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(145, 145, 145, 0.45)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
- e.currentTarget.style.boxShadow = '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(74, 102, 216, 0.32)';
+ e.currentTarget.style.boxShadow = '0 10px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(145, 145, 145, 0.32)';
}}
>
Proceed to Order
@@ -158,8 +158,8 @@ function PriceLine({ label, price }: { label: string; price: number }) {
justifyContent: 'space-between',
alignItems: 'center',
}}>
- {label}
-
+ {label}
+
AED {formatAED(price)}
diff --git a/src/components/RobotCanvas.tsx b/src/components/RobotCanvas.tsx
index c12eb18..3fe5296 100644
--- a/src/components/RobotCanvas.tsx
+++ b/src/components/RobotCanvas.tsx
@@ -24,12 +24,12 @@ function Loader() {
-
+
{progress.toFixed(0)}% loaded
@@ -51,13 +51,13 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
-
+
{/* Key — front-right, strong white */}
{/* Fill — front-left, cool tint */}
-
+
{/* Rim — behind */}
-
+
{/* Top spotlight */}
{/* Front fill — direct face/torso */}
@@ -65,13 +65,13 @@ function SceneContent({ onCapture }: { onCapture: (gl: WebGLRenderer, scene: Sce
{/* Face spotlight — soft direct head light */}
{/* Bottom fill — lift the legs */}
-
+
{/* Side accents */}
-
+
{/* Back side accents — define silhouette */}
-
-
+
+
-
-
+
+
YS Lootah Robotics
-
+
+
Pioneering Humanoid Robotics in the UAE
{/* 2. Hero */}
-
+
The Future
-
- of Robotics
+
+ of Robotics
-
+
Meet the G1 Humanoid Robot. Fully customizable, enterprise-ready, designed for the world of tomorrow.
@@ -199,24 +199,24 @@ export function ScrollOverlays() {
{/* 3. Head Reveal */}
-
-
+
+
Intelligent by Design
-
+
Vision That
-
+
Advanced computer vision and neural processing. The G1 sees, interprets, and responds to the world in real-time.
-
360°
-
Field of View
+
360°
+
Field of View
-
{'<'}50ms
-
Response Time
+
{'<'}50ms
+
Response Time
@@ -224,14 +224,14 @@ export function ScrollOverlays() {
{/* 4. Customization */}
-
-
+
+
Your Identity
-
+
Dress for Any
-
+
From traditional Emarati Kandura to industrial safety gear and professional business attire. Configure every detail to match your brand.
@@ -252,9 +252,9 @@ export function ScrollOverlays() {
padding: '0.6rem 1.25rem',
borderRadius: '2rem',
background: 'rgba(255, 255, 255, 0.5)',
- border: '1px solid rgba(39, 63, 148, 0.3)',
+ border: '1px solid rgba(94, 94, 94, 0.3)',
fontSize: '0.75rem',
- color: '#0a0a0c',
+ color: '#0b0b0b',
letterSpacing: '0.1em',
fontWeight: 600,
cursor: 'pointer',
@@ -268,11 +268,11 @@ export function ScrollOverlays() {
e.currentTarget.style.background = 'var(--color-gold)';
e.currentTarget.style.color = '#ffffff';
e.currentTarget.style.transform = 'translateY(-2px)';
- e.currentTarget.style.boxShadow = '0 6px 16px rgba(39, 63, 148, 0.3)';
+ e.currentTarget.style.boxShadow = '0 6px 16px rgba(94, 94, 94, 0.3)';
}}
onMouseOut={(e) => {
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.5)';
- e.currentTarget.style.color = '#0a0a0c';
+ e.currentTarget.style.color = '#0b0b0b';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
}}
@@ -286,24 +286,24 @@ export function ScrollOverlays() {
{/* 5. Mobility */}
-
-
+
+
Advanced Mobility
-
+
23 Degrees of
-
+
State-of-the-art locomotion enabling natural human-like movement, balance, and agility across any terrain.
-
2m/s
-
Max Speed
+
2m/s
+
Max Speed
-
127kg
-
Payload
+
127kg
+
Payload
@@ -325,7 +325,7 @@ export function ScrollOverlays() {
opacity: useTransform(scrollYProgress, [0, 0.05], [1, 0]),
}}
>
-
+
Scroll to Explore
diff --git a/src/components/ScrollScene.tsx b/src/components/ScrollScene.tsx
index bda18e2..caf7cfa 100644
--- a/src/components/ScrollScene.tsx
+++ b/src/components/ScrollScene.tsx
@@ -158,18 +158,18 @@ function LightOrbs() {
<>
{/* Orbiting blue point light (no visible mesh) */}
-
{/* Orbiting gold point light (no visible mesh) */}
-
{/* Halo ring above head - visible during close-up */}
);
@@ -219,10 +219,10 @@ function ScrollLighting() {
return (
<>
-
-
+
{progress.toFixed(0)}%
diff --git a/src/components/SnapshotButton.tsx b/src/components/SnapshotButton.tsx
index 0b66b80..ead0b17 100644
--- a/src/components/SnapshotButton.tsx
+++ b/src/components/SnapshotButton.tsx
@@ -44,10 +44,10 @@ function SnapshotButtonInner({ gl, scene, camera, filename = 'g1-robot', onSnaps
disabled={isCapturing}
style={{
padding: '0.5rem 1rem',
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
- border: '1px solid rgba(59, 130, 246, 0.3)',
+ backgroundColor: 'rgba(153, 153, 153, 0.1)',
+ border: '1px solid rgba(153, 153, 153, 0.3)',
borderRadius: '0.5rem',
- color: '#FBFBFD',
+ color: '#fcfcfc',
cursor: isCapturing ? 'wait' : 'pointer',
fontSize: '0.875rem',
fontWeight: 500,
@@ -58,11 +58,11 @@ function SnapshotButtonInner({ gl, scene, camera, filename = 'g1-robot', onSnaps
}}
onMouseEnter={(e) => {
if (!isCapturing) {
- e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.2)';
+ e.currentTarget.style.backgroundColor = 'rgba(153, 153, 153, 0.2)';
}
}}
onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor = 'rgba(59, 130, 246, 0.1)';
+ e.currentTarget.style.backgroundColor = 'rgba(153, 153, 153, 0.1)';
}}
aria-label="Capture 3D scene snapshot"
>
diff --git a/src/components/checkout/ConfirmationStep.tsx b/src/components/checkout/ConfirmationStep.tsx
index a6028cf..4e07e9c 100644
--- a/src/components/checkout/ConfirmationStep.tsx
+++ b/src/components/checkout/ConfirmationStep.tsx
@@ -39,10 +39,10 @@ export function ConfirmationStep() {
-
+
Order Confirmed!
-
+
Thank you for your order. Your G1 Robot is being prepared.
-
+
Order ID
-
@@ -72,16 +72,16 @@ export function ConfirmationStep() {
textAlign: 'left',
}}>
- Configuration
- {personaSummary}
+ Configuration
+ {personaSummary}
- Ship to
- {shipping.name}, {shipping.city}
+ Ship to
+ {shipping.name}, {shipping.city}
- Total Paid
- AED {formatAED(orderTotal)}
+ Total Paid
+ AED {formatAED(orderTotal)}
@@ -92,9 +92,9 @@ export function ConfirmationStep() {
marginTop: '0.5rem',
padding: '0.75rem 1.5rem',
borderRadius: '0.375rem',
- border: '1px solid rgba(59, 130, 246, 0.5)',
- background: 'rgba(59, 130, 246, 0.08)',
- color: '#2563eb',
+ border: '1px solid rgba(153, 153, 153, 0.5)',
+ background: 'rgba(153, 153, 153, 0.08)',
+ color: '#888888',
cursor: 'pointer',
fontSize: '0.85rem',
fontWeight: 600,
diff --git a/src/components/checkout/PaymentStep.tsx b/src/components/checkout/PaymentStep.tsx
index 39b574a..48ad59c 100644
--- a/src/components/checkout/PaymentStep.tsx
+++ b/src/components/checkout/PaymentStep.tsx
@@ -32,7 +32,7 @@ export function PaymentStep() {
return (
-
+
Payment Details
@@ -69,9 +69,9 @@ export function PaymentStep() {
marginTop: '0.5rem',
padding: '0.75rem',
borderRadius: '0.375rem',
- border: '1px solid rgba(59, 130, 246, 0.5)',
- background: isLoading ? 'rgba(59, 130, 246, 0.15)' : 'rgba(59, 130, 246, 0.08)',
- color: '#2563eb',
+ border: '1px solid rgba(153, 153, 153, 0.5)',
+ background: isLoading ? 'rgba(153, 153, 153, 0.15)' : 'rgba(153, 153, 153, 0.08)',
+ color: '#888888',
cursor: isLoading ? 'wait' : 'pointer',
fontSize: '0.85rem',
fontWeight: 600,
diff --git a/src/components/checkout/ReviewStep.tsx b/src/components/checkout/ReviewStep.tsx
index bdb1720..373f2f0 100644
--- a/src/components/checkout/ReviewStep.tsx
+++ b/src/components/checkout/ReviewStep.tsx
@@ -97,7 +97,7 @@ export function ReviewStep() {
return (
-
+
Review Your Order
@@ -120,12 +120,12 @@ export function ReviewStep() {
{/* Shipping Summary */}
-
+
{shipping.name}
{shipping.address}
{shipping.city}, {shipping.country} {shipping.postalCode}
-
{shipping.email}
-
{shipping.phone}
+
{shipping.email}
+
{shipping.phone}
@@ -136,8 +136,8 @@ export function ReviewStep() {
justifyContent: 'space-between',
alignItems: 'center',
}}>
-
Total
-
+ Total
+
AED {formatAED(orderTotal)}
- {label}
- {value}
+ {label}
+ {value}
);
}
diff --git a/src/components/checkout/ShippingStep.tsx b/src/components/checkout/ShippingStep.tsx
index bdf723f..1f7bdd7 100644
--- a/src/components/checkout/ShippingStep.tsx
+++ b/src/components/checkout/ShippingStep.tsx
@@ -9,7 +9,7 @@ const inputStyle: React.CSSProperties = {
borderRadius: '0.375rem',
border: '1px solid rgba(0, 0, 0, 0.08)',
background: 'rgba(255, 255, 255, 0.8)',
- color: '#0a0a0c',
+ color: '#0b0b0b',
fontSize: '0.8rem',
outline: 'none',
transition: 'border-color 0.2s ease',
@@ -18,7 +18,7 @@ const inputStyle: React.CSSProperties = {
const labelStyle: React.CSSProperties = {
fontSize: '0.7rem',
fontWeight: 500,
- color: '#8891C7',
+ color: '#a8a8a8',
marginBottom: '0.3rem',
display: 'block',
};
@@ -80,7 +80,7 @@ export function ShippingStep() {
return (
-
+
Shipping Information
@@ -106,9 +106,9 @@ export function ShippingStep() {
marginTop: '0.5rem',
padding: '0.75rem',
borderRadius: '0.375rem',
- border: '1px solid rgba(59, 130, 246, 0.5)',
- background: 'rgba(59, 130, 246, 0.08)',
- color: '#2563eb',
+ border: '1px solid rgba(153, 153, 153, 0.5)',
+ background: 'rgba(153, 153, 153, 0.08)',
+ color: '#888888',
cursor: 'pointer',
fontSize: '0.85rem',
fontWeight: 600,
@@ -141,7 +141,7 @@ function Field({ label, value, error, onChange, placeholder, type = 'text' }: {
...inputStyle,
borderColor: error ? 'rgba(239, 68, 68, 0.4)' : 'rgba(0, 0, 0, 0.08)',
}}
- onFocus={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.7)' : 'rgba(59, 130, 246, 0.5)'; }}
+ onFocus={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.7)' : 'rgba(153, 153, 153, 0.5)'; }}
onBlur={(e) => { e.currentTarget.style.borderColor = error ? 'rgba(239, 68, 68, 0.4)' : 'rgba(0, 0, 0, 0.08)'; }}
/>
{error && {error}
}
diff --git a/src/components/robotics/AccessoriesShowcase.tsx b/src/components/robotics/AccessoriesShowcase.tsx
index 289da5c..faf4a44 100644
--- a/src/components/robotics/AccessoriesShowcase.tsx
+++ b/src/components/robotics/AccessoriesShowcase.tsx
@@ -65,9 +65,9 @@ function FilterChip({
style={{
padding: '0.5rem 0.85rem',
borderRadius: 999,
- border: active ? '1px solid rgba(74,102,216,0.55)' : '1px solid rgba(222,224,240,0.12)',
- background: active ? 'rgba(58,85,196,0.18)' : 'rgba(20,19,26,0.7)',
- color: active ? '#FFFFFF' : '#DEE0F0',
+ border: active ? '1px solid rgba(145, 145, 145, 0.55)' : '1px solid rgba(231, 231, 231, 0.12)',
+ background: active ? 'rgba(127, 127, 127, 0.18)' : 'rgba(23, 23, 23, 0.7)',
+ color: active ? '#FFFFFF' : '#e7e7e7',
fontSize: '0.72rem',
fontWeight: 600,
letterSpacing: '0.12em',
@@ -92,7 +92,7 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
display: 'flex',
flexDirection: 'column',
height: '100%',
- color: '#FBFBFD',
+ color: '#fcfcfc',
}}
>
-
-
+
{accessory.tagline}
@@ -191,10 +191,10 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
key={c}
style={{
fontSize: '0.7rem',
- color: '#8891C7',
+ color: '#a8a8a8',
padding: '0.2rem 0.5rem',
borderRadius: 999,
- border: '1px solid rgba(39, 63, 148,0.18)',
+ border: '1px solid rgba(94, 94, 94, 0.18)',
background: 'rgba(15, 12, 8,0.5)',
letterSpacing: '0.04em',
}}
@@ -209,7 +209,7 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
style={{
marginTop: 'auto',
paddingTop: '0.75rem',
- borderTop: '1px solid rgba(39, 63, 148,0.1)',
+ borderTop: '1px solid rgba(94, 94, 94, 0.1)',
display: 'flex',
flexWrap: 'wrap',
gap: '0.4rem',
@@ -227,15 +227,15 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
gap: '0.4rem',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'linear-gradient(135deg, rgba(80, 110, 255, 0.32), rgba(40, 55, 145, 0.85))',
- border: '1px solid rgba(120, 140, 255, 0.55)',
+ background: 'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
+ border: '1px solid rgba(188, 188, 188, 0.55)',
color: '#FFFFFF',
fontSize: '0.72rem',
fontWeight: 700,
letterSpacing: '0.12em',
textTransform: 'uppercase',
textDecoration: 'none',
- boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(74, 102, 216, 0.22)',
+ boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(145, 145, 145, 0.22)',
}}
>
View details
@@ -250,9 +250,9 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
justifyContent: 'center',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'rgba(20, 19, 26, 0.6)',
- border: '1px solid rgba(222, 224, 240, 0.14)',
- color: '#DEE0F0',
+ background: 'rgba(23, 23, 23, 0.6)',
+ border: '1px solid rgba(231, 231, 231, 0.14)',
+ color: '#e7e7e7',
fontSize: '0.72rem',
fontWeight: 600,
letterSpacing: '0.1em',
@@ -272,9 +272,9 @@ function AccessoryCard({ accessory }: { accessory: Accessory }) {
justifyContent: 'center',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'rgba(20, 19, 26, 0.6)',
- border: '1px solid rgba(222, 224, 240, 0.14)',
- color: '#DEE0F0',
+ background: 'rgba(23, 23, 23, 0.6)',
+ border: '1px solid rgba(231, 231, 231, 0.14)',
+ color: '#e7e7e7',
fontSize: '0.72rem',
fontWeight: 600,
letterSpacing: '0.1em',
diff --git a/src/components/robotics/BentoGrid.tsx b/src/components/robotics/BentoGrid.tsx
index a3072d0..b06a975 100644
--- a/src/components/robotics/BentoGrid.tsx
+++ b/src/components/robotics/BentoGrid.tsx
@@ -21,14 +21,14 @@ export function BentoGrid() {
gridAutoRows: 'minmax(180px, auto)',
}}
>
-
+
Flagship · Dubai
Unitree G1 humanoid live in our Dubai showroom.
-
+
Configure persona, attire, and accessories. Then book a live demo.
@@ -48,41 +48,41 @@ export function BentoGrid() {
-
+
Sales & demos
Fast quotes for UAE businesses.
-
+
Tell us your use case we respond within one business day with availability and pricing.
-
+
End-to-end
Procurement, deployment, support.
-
+
Local team handles import, setup, training, and ongoing service across the UAE.
-
+
UAE access · Unitree & Pudu
Unitree · Pudu one Dubai team.
-
+
10+ industries
Hospitality, security, healthcare, retail.
-
+
Configurator
3D persona builder for the G1.
@@ -94,7 +94,7 @@ export function BentoGrid() {
display: 'inline-flex',
alignItems: 'center',
gap: '0.4rem',
- color: '#8891C7',
+ color: '#a8a8a8',
fontSize: '0.78rem',
letterSpacing: '0.18em',
textTransform: 'uppercase',
diff --git a/src/components/robotics/BrandShowcase.tsx b/src/components/robotics/BrandShowcase.tsx
index 8f1d1d5..3993c47 100644
--- a/src/components/robotics/BrandShowcase.tsx
+++ b/src/components/robotics/BrandShowcase.tsx
@@ -79,12 +79,12 @@ function BrandCard({
minHeight: 280,
borderRadius: 22,
background:
- `radial-gradient(ellipse 60% 80% at 100% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.86), rgba(8,8,10,0.96))`,
+ `radial-gradient(ellipse 60% 80% at 100% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.86), rgba(9, 9, 9, 0.96))`,
border: `1px solid ${accent}33`,
- color: '#FBFBFD',
+ color: '#fcfcfc',
textDecoration: 'none',
overflow: 'hidden',
- boxShadow: '0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(222,224,240,0.06)',
+ boxShadow: '0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease',
}}
>
@@ -110,7 +110,7 @@ function BrandCard({
position: 'absolute',
inset: 0,
backgroundImage:
- 'linear-gradient(rgba(199, 207, 230,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.04) 1px, transparent 1px)',
+ 'linear-gradient(rgba(215, 215, 215, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.04) 1px, transparent 1px)',
backgroundSize: '32px 32px',
maskImage: 'radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 80%)',
@@ -148,7 +148,7 @@ function BrandCard({
fontSize: '0.62rem',
letterSpacing: '0.26em',
textTransform: 'uppercase',
- color: '#8891C7',
+ color: '#a8a8a8',
fontWeight: 700,
}}
>
@@ -164,7 +164,7 @@ function BrandCard({
padding: '0.2rem 0.5rem',
borderRadius: 999,
border: `1px solid ${accent}55`,
- background: 'rgba(14,13,18,0.6)',
+ background: 'rgba(16, 16, 16, 0.6)',
}}
>
{count} {count === 1 ? 'model' : 'models'}
@@ -200,7 +200,7 @@ function BrandCard({
{/* inner grid */}
@@ -276,7 +276,7 @@ function BrandCard({
position: 'absolute',
inset: 0,
backgroundImage:
- 'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
+ 'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
backgroundSize: '24px 24px',
maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -332,7 +332,7 @@ function BrandCard({
width: '70%',
height: '92%',
filter:
- 'drop-shadow(0 18px 28px rgba(0,0,0,0.78)) drop-shadow(0 0 22px rgba(58,85,196,0.45))',
+ 'drop-shadow(0 18px 28px rgba(0,0,0,0.78)) drop-shadow(0 0 22px rgba(127, 127, 127, 0.45))',
transition: 'transform 0.5s cubic-bezier(0.16,1,0.3,1)',
}}
>
@@ -379,7 +379,7 @@ function BrandCard({
right: '5%',
bottom: '24%',
height: 1,
- background: 'linear-gradient(90deg, transparent, rgba(222,224,240,0.55), transparent)',
+ background: 'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.55), transparent)',
pointerEvents: 'none',
}}
/>
@@ -392,7 +392,7 @@ function BrandCard({
padding: '0.25rem 0.55rem',
borderRadius: 999,
border: `1px solid ${accent}55`,
- background: 'rgba(14,13,18,0.75)',
+ background: 'rgba(16, 16, 16, 0.75)',
color: accent,
fontSize: '0.58rem',
fontWeight: 800,
diff --git a/src/components/robotics/BuSunaidahSection.tsx b/src/components/robotics/BuSunaidahSection.tsx
index 64da757..70992d6 100644
--- a/src/components/robotics/BuSunaidahSection.tsx
+++ b/src/components/robotics/BuSunaidahSection.tsx
@@ -14,9 +14,9 @@ export function BuSunaidahSection() {
padding: 'clamp(2rem, 5vw, 3.5rem)',
overflow: 'hidden',
background:
- 'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(39, 63, 148,0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(222, 224, 240,0.12), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
- border: '1px solid rgba(39, 63, 148,0.32)',
- boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222, 224, 240,0.05)',
+ 'radial-gradient(ellipse 60% 80% at 0% 100%, rgba(94, 94, 94, 0.18), transparent 65%), radial-gradient(ellipse 70% 60% at 100% 0%, rgba(231, 231, 231, 0.12), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(5,5,5,0.98))',
+ border: '1px solid rgba(94, 94, 94, 0.32)',
+ boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.05)',
}}
>
-
+
Brand · Culture · Storytelling
@@ -43,7 +43,7 @@ export function BuSunaidahSection() {
Meet Bu Sunaidah.
-
+
An Emirati culture-inspired robotics character Bu Sunaidah is YS Lootah Robotics' community and storytelling ambassador. Designed to celebrate UAE heritage at media events, exhibitions, and innovation programs, Bu Sunaidah shows what intelligent automation looks like when it speaks the language of the region.
@@ -53,8 +53,8 @@ export function BuSunaidahSection() {
'Community engagement and innovation storytelling',
'A modern face for advanced robotics in our region',
].map((b) => (
-
-
+
+
{b}
@@ -95,7 +95,7 @@ export function BuSunaidahSection() {
position: 'absolute',
inset: '-2rem',
background:
- 'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(222, 224, 240,0.32), transparent 65%)',
+ 'radial-gradient(ellipse 60% 60% at 50% 60%, rgba(231, 231, 231, 0.32), transparent 65%)',
filter: 'blur(28px)',
pointerEvents: 'none',
}}
@@ -108,9 +108,9 @@ export function BuSunaidahSection() {
height: '100%',
borderRadius: '1.75rem',
overflow: 'hidden' as const,
- border: '1px solid rgba(39, 63, 148,0.35)',
+ border: '1px solid rgba(94, 94, 94, 0.35)',
background:
- 'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(222, 224, 240,0.18), transparent 60%), linear-gradient(180deg, rgba(28, 27, 33,0.85), rgba(5,5,5,0.95))',
+ 'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(231, 231, 231, 0.18), transparent 60%), linear-gradient(180deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.95))',
boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
textDecoration: 'none' as const,
color: 'inherit' as const,
@@ -134,9 +134,9 @@ export function BuSunaidahSection() {
style={{
padding: '0.4rem 0.75rem',
borderRadius: 999,
- background: 'rgba(14, 13, 18,0.7)',
- border: '1px solid rgba(39, 63, 148,0.35)',
- color: '#DEE0F0',
+ background: 'rgba(16, 16, 16, 0.7)',
+ border: '1px solid rgba(94, 94, 94, 0.35)',
+ color: '#e7e7e7',
fontSize: '0.66rem',
letterSpacing: '0.22em',
textTransform: 'uppercase',
@@ -150,9 +150,9 @@ export function BuSunaidahSection() {
style={{
padding: '0.35rem 0.65rem',
borderRadius: 999,
- background: 'rgba(222, 224, 240,0.18)',
- border: '1px solid rgba(222, 224, 240,0.4)',
- color: '#FBFBFD',
+ background: 'rgba(231, 231, 231, 0.18)',
+ border: '1px solid rgba(231, 231, 231, 0.4)',
+ color: '#fcfcfc',
fontSize: '0.7rem',
letterSpacing: '0.16em',
textTransform: 'uppercase',
@@ -199,7 +199,7 @@ export function BuSunaidahSection() {
textAlign: 'center',
padding: 'clamp(1.25rem, 4vw, 2rem)',
background:
- 'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(58, 85, 196, 0.25), transparent 65%)',
+ 'radial-gradient(ellipse 60% 60% at 50% 35%, rgba(127, 127, 127, 0.25), transparent 65%)',
}}
>
@@ -226,7 +226,7 @@ export function BuSunaidahSection() {
letterSpacing: '0.28em',
textTransform: 'uppercase',
fontWeight: 700,
- color: '#8891C7',
+ color: '#a8a8a8',
}}
>
Portrait coming soon
@@ -238,7 +238,7 @@ export function BuSunaidahSection() {
letterSpacing: '-0.005em',
lineHeight: 1.4,
maxWidth: 280,
- color: '#FBFBFD',
+ color: '#fcfcfc',
}}
>
View Bu Sunaidah's latest moments on Instagram
diff --git a/src/components/robotics/CategoryShowcaseScroll.tsx b/src/components/robotics/CategoryShowcaseScroll.tsx
index 85e1da1..69dae39 100644
--- a/src/components/robotics/CategoryShowcaseScroll.tsx
+++ b/src/components/robotics/CategoryShowcaseScroll.tsx
@@ -171,15 +171,15 @@ export function CategoryShowcaseScroll() {
width: 100%;
padding: 1.1rem 1.15rem 1rem;
border-radius: 16px;
- border: 1px solid rgba(222, 224, 240, 0.16);
+ border: 1px solid rgba(231, 231, 231, 0.16);
background:
- radial-gradient(ellipse 80% 60% at 100% 0%, rgba(74, 102, 216, 0.12), transparent 60%),
- linear-gradient(180deg, rgba(28, 27, 38, 0.85), rgba(12, 12, 18, 0.96));
+ radial-gradient(ellipse 80% 60% at 100% 0%, rgba(145, 145, 145, 0.12), transparent 60%),
+ linear-gradient(180deg, rgba(33, 33, 33, 0.85), rgba(15, 15, 15, 0.96));
color: #FFFFFF;
text-decoration: none;
overflow: hidden;
box-shadow:
- 0 1px 0 rgba(222, 224, 240, 0.05) inset,
+ 0 1px 0 rgba(231, 231, 231, 0.05) inset,
0 14px 30px rgba(0, 0, 0, 0.4);
transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s;
}
@@ -190,18 +190,18 @@ export function CategoryShowcaseScroll() {
left: 14px;
right: 14px;
height: 1px;
- background: linear-gradient(90deg, transparent, rgba(74, 102, 216, 0.45), transparent);
+ background: linear-gradient(90deg, transparent, rgba(145, 145, 145, 0.45), transparent);
pointer-events: none;
z-index: 1;
}
.cat:hover {
- border-color: rgba(74, 102, 216, 0.55);
+ border-color: rgba(145, 145, 145, 0.55);
transform: translateY(-3px);
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.6),
- 0 0 0 1px rgba(74, 102, 216, 0.32),
- 0 0 32px rgba(58, 85, 196, 0.26),
- 0 1px 0 rgba(222, 224, 240, 0.08) inset;
+ 0 0 0 1px rgba(145, 145, 145, 0.32),
+ 0 0 32px rgba(127, 127, 127, 0.26),
+ 0 1px 0 rgba(231, 231, 231, 0.08) inset;
}
.cat-hover-glow {
@@ -210,7 +210,7 @@ export function CategoryShowcaseScroll() {
right: -30%;
width: 80%;
height: 100%;
- background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(74, 102, 216, 0.18), transparent 70%);
+ background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(145, 145, 145, 0.18), transparent 70%);
filter: blur(40px);
opacity: 0;
transition: opacity 0.4s;
@@ -229,7 +229,7 @@ export function CategoryShowcaseScroll() {
font-size: 0.62rem;
letter-spacing: 0.3em;
font-weight: 800;
- color: #6f78a2;
+ color: #898989;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cat-icon {
@@ -239,16 +239,16 @@ export function CategoryShowcaseScroll() {
width: 36px;
height: 36px;
border-radius: 10px;
- border: 1px solid rgba(74, 102, 216, 0.35);
- background: rgba(58, 85, 196, 0.14);
- color: #DEE0F0;
+ border: 1px solid rgba(145, 145, 145, 0.35);
+ background: rgba(127, 127, 127, 0.14);
+ color: #e7e7e7;
transition: transform 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.cat:hover .cat-icon {
transform: scale(1.06);
- background: rgba(74, 102, 216, 0.28);
- border-color: rgba(74, 102, 216, 0.6);
- box-shadow: 0 0 18px rgba(74, 102, 216, 0.45);
+ background: rgba(145, 145, 145, 0.28);
+ border-color: rgba(145, 145, 145, 0.6);
+ box-shadow: 0 0 18px rgba(145, 145, 145, 0.45);
color: #FFFFFF;
}
@@ -268,7 +268,7 @@ export function CategoryShowcaseScroll() {
}
.cat-desc {
margin: 0;
- color: #B5BDDB;
+ color: #c8c8c8;
font-size: 0.82rem;
line-height: 1.5;
}
@@ -280,7 +280,7 @@ export function CategoryShowcaseScroll() {
gap: 0.7rem;
margin-top: 0.15rem;
padding-top: 0.7rem;
- border-top: 1px solid rgba(222, 224, 240, 0.07);
+ border-top: 1px solid rgba(231, 231, 231, 0.07);
}
.cat-chips {
list-style: none;
@@ -295,9 +295,9 @@ export function CategoryShowcaseScroll() {
letter-spacing: 0.08em;
padding: 0.28rem 0.6rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.14);
- background: rgba(14, 13, 18, 0.55);
- color: #B5BDDB;
+ border: 1px solid rgba(231, 231, 231, 0.14);
+ background: rgba(16, 16, 16, 0.55);
+ color: #c8c8c8;
font-weight: 600;
white-space: nowrap;
}
@@ -309,7 +309,7 @@ export function CategoryShowcaseScroll() {
letter-spacing: 0.26em;
text-transform: uppercase;
font-weight: 800;
- color: #DEE0F0;
+ color: #e7e7e7;
}
.cat-cta-arrow {
display: inline-flex;
@@ -318,15 +318,15 @@ export function CategoryShowcaseScroll() {
width: 22px;
height: 22px;
border-radius: 999px;
- border: 1px solid rgba(74, 102, 216, 0.35);
- background: rgba(58, 85, 196, 0.14);
- color: #DEE0F0;
+ border: 1px solid rgba(145, 145, 145, 0.35);
+ background: rgba(127, 127, 127, 0.14);
+ color: #e7e7e7;
transition: transform 0.35s, background 0.35s, border-color 0.35s;
}
.cat:hover .cat-cta-arrow {
transform: translate(2px, -2px);
- background: rgba(74, 102, 216, 0.32);
- border-color: rgba(74, 102, 216, 0.7);
+ background: rgba(145, 145, 145, 0.32);
+ border-color: rgba(145, 145, 145, 0.7);
color: #FFFFFF;
}
.cat:hover .cat-cta { color: #FFFFFF; }
diff --git a/src/components/robotics/CompanyStory.tsx b/src/components/robotics/CompanyStory.tsx
index 1593176..4e1a883 100644
--- a/src/components/robotics/CompanyStory.tsx
+++ b/src/components/robotics/CompanyStory.tsx
@@ -22,28 +22,28 @@ const PILLARS: Pillar[] = [
title: 'Artificial Intelligence',
body: 'AI applications tailored for UAE government and private sector.',
Icon: Brain,
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
},
{
num: '02',
title: 'Robotics Deployment',
body: 'Humanoid, quadruped, service, and delivery robots across the UAE.',
Icon: Bot,
- accent: '#3a55c4',
+ accent: '#7f7f7f',
},
{
num: '03',
title: 'Digital Transformation',
body: 'Automation systems and smart projects that modernize operations.',
Icon: Workflow,
- accent: '#D7DBEA',
+ accent: '#e1e1e1',
},
{
num: '04',
title: 'Training & Enablement',
body: 'Coding and robotics programs preparing the next generation of UAE talent.',
Icon: GraduationCap,
- accent: '#8891C7',
+ accent: '#a8a8a8',
},
];
@@ -56,9 +56,9 @@ export function CompanyStory() {
padding: 'clamp(1.75rem, 4vw, 3rem)',
overflow: 'hidden',
background:
- 'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58,85,196,0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(222,224,240,0.10), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.94), rgba(5,5,5,0.98))',
- border: '1px solid rgba(222,224,240,0.12)',
- boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
+ 'radial-gradient(ellipse 60% 80% at 100% 0%, rgba(127, 127, 127, 0.18), transparent 60%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(231, 231, 231, 0.10), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.94), rgba(5,5,5,0.98))',
+ border: '1px solid rgba(231, 231, 231, 0.12)',
+ boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
}}
>
{/* blueprint grid background */}
@@ -68,7 +68,7 @@ export function CompanyStory() {
position: 'absolute',
inset: 0,
backgroundImage:
- 'linear-gradient(rgba(199, 207, 230,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 207, 230,0.06) 1px, transparent 1px)',
+ 'linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px)',
backgroundSize: '36px 36px',
maskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 40%, #000 25%, transparent 80%)',
@@ -86,7 +86,7 @@ export function CompanyStory() {
fontSize: 'clamp(8rem, 18vw, 14rem)',
fontWeight: 800,
color: 'transparent',
- WebkitTextStroke: '1px rgba(222,224,240,0.06)',
+ WebkitTextStroke: '1px rgba(231, 231, 231, 0.06)',
letterSpacing: '-0.06em',
lineHeight: 1,
pointerEvents: 'none',
@@ -123,9 +123,9 @@ export function CompanyStory() {
-
+
YS Lootah Robotics is part of the{' '}
- Yousuf Saeed Lootah Investment Group .
+ Yousuf Saeed Lootah Investment Group .
We deliver AI, robotics, digital transformation, smart projects, and training programs to government and private sector clients across the UAE.
@@ -142,8 +142,8 @@ export function CompanyStory() {
padding: '1.25rem 1.25rem 1.25rem 1.5rem',
borderRadius: 18,
background:
- 'linear-gradient(135deg, rgba(39,63,148,0.18) 0%, rgba(28,27,33,0.7) 60%)',
- border: '1px solid rgba(222,224,240,0.16)',
+ 'linear-gradient(135deg, rgba(94, 94, 94, 0.18) 0%, rgba(30, 30, 30, 0.7) 60%)',
+ border: '1px solid rgba(231, 231, 231, 0.16)',
position: 'relative',
overflow: 'hidden',
}}
@@ -156,8 +156,8 @@ export function CompanyStory() {
top: 0,
bottom: 0,
width: 3,
- background: 'linear-gradient(180deg, #DEE0F0, #3a55c4)',
- boxShadow: '0 0 16px rgba(58,85,196,0.7)',
+ background: 'linear-gradient(180deg, #e7e7e7, #7f7f7f)',
+ boxShadow: '0 0 16px rgba(127, 127, 127, 0.7)',
}}
/>
@@ -182,7 +182,7 @@ export function CompanyStory() {
fontSize: '0.65rem',
letterSpacing: '0.28em',
textTransform: 'uppercase',
- color: '#8891C7',
+ color: '#a8a8a8',
fontWeight: 700,
}}
>
@@ -211,7 +211,7 @@ export function CompanyStory() {
right: '8%',
height: 1,
background:
- 'linear-gradient(90deg, transparent, rgba(58,85,196,0.45), rgba(222,224,240,0.45), transparent)',
+ 'linear-gradient(90deg, transparent, rgba(127, 127, 127, 0.45), rgba(231, 231, 231, 0.45), transparent)',
filter: 'blur(0.3px)',
pointerEvents: 'none',
}}
@@ -225,7 +225,7 @@ export function CompanyStory() {
bottom: '8%',
width: 1,
background:
- 'linear-gradient(180deg, transparent, rgba(222,224,240,0.4), rgba(58,85,196,0.5), transparent)',
+ 'linear-gradient(180deg, transparent, rgba(231, 231, 231, 0.4), rgba(127, 127, 127, 0.5), transparent)',
filter: 'blur(0.3px)',
pointerEvents: 'none',
}}
@@ -272,12 +272,12 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
padding: '1.25rem',
borderRadius: 18,
background:
- 'linear-gradient(135deg, rgba(28,27,33,0.78), rgba(8,8,10,0.94))',
- border: '1px solid rgba(222,224,240,0.10)',
- color: '#FBFBFD',
+ 'linear-gradient(135deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.94))',
+ border: '1px solid rgba(231, 231, 231, 0.10)',
+ color: '#fcfcfc',
overflow: 'hidden',
minHeight: 200,
- boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+ boxShadow: '0 14px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease',
transform: offset === 'down' ? 'translateY(8px)' : 'translateY(0)',
}}
@@ -332,11 +332,11 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
fontSize: '0.7rem',
fontWeight: 800,
letterSpacing: '0.18em',
- color: '#8891C7',
+ color: '#a8a8a8',
padding: '0.25rem 0.55rem',
borderRadius: 999,
- border: '1px solid rgba(136,145,199,0.3)',
- background: 'rgba(14,13,18,0.6)',
+ border: '1px solid rgba(168, 168, 168, 0.3)',
+ background: 'rgba(16, 16, 16, 0.6)',
}}
>
{num}
@@ -361,7 +361,7 @@ function CapabilityTile({ pillar, offset }: { pillar: Pillar; offset: 'up' | 'do
margin: 0,
fontSize: '0.88rem',
lineHeight: 1.55,
- color: '#D7DBEA',
+ color: '#e1e1e1',
position: 'relative',
}}
>
@@ -391,16 +391,16 @@ function CredibilityBadge({ Icon, text }: { Icon: LucideIcon; text: string }) {
gap: '0.5rem',
padding: '0.45rem 0.8rem',
borderRadius: 999,
- background: 'rgba(14,13,18,0.7)',
- border: '1px solid rgba(222,224,240,0.18)',
- color: '#DEE0F0',
+ background: 'rgba(16, 16, 16, 0.7)',
+ border: '1px solid rgba(231, 231, 231, 0.18)',
+ color: '#e7e7e7',
fontSize: '0.7rem',
fontWeight: 700,
letterSpacing: '0.16em',
textTransform: 'uppercase',
}}
>
-
-
-
+
-
+
-
+
@@ -178,11 +178,11 @@ export function DemoCTA({
isolation: isolate;
overflow: hidden;
border-radius: 24px;
- border: 1px solid rgba(74, 102, 216, 0.18);
+ border: 1px solid rgba(145, 145, 145, 0.18);
background:
- radial-gradient(ellipse 60% 100% at 0% 0%, rgba(58, 85, 196, 0.16), transparent 55%),
- radial-gradient(ellipse 60% 100% at 100% 100%, rgba(136, 145, 199, 0.14), transparent 55%),
- linear-gradient(135deg, rgba(14, 13, 22, 0.92), rgba(6, 6, 10, 0.97));
+ radial-gradient(ellipse 60% 100% at 0% 0%, rgba(127, 127, 127, 0.16), transparent 55%),
+ radial-gradient(ellipse 60% 100% at 100% 100%, rgba(168, 168, 168, 0.14), transparent 55%),
+ linear-gradient(135deg, rgba(18, 18, 18, 0.92), rgba(8, 8, 8, 0.97));
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
@@ -198,7 +198,7 @@ export function DemoCTA({
height: 520px;
top: -180px;
left: -160px;
- background: rgba(58, 85, 196, 0.42);
+ background: rgba(127, 127, 127, 0.42);
opacity: 0.55;
animation: dcta-drift 16s ease-in-out infinite alternate;
}
@@ -207,7 +207,7 @@ export function DemoCTA({
height: 480px;
bottom: -200px;
right: -160px;
- background: rgba(136, 145, 199, 0.32);
+ background: rgba(168, 168, 168, 0.32);
opacity: 0.45;
animation: dcta-drift 22s ease-in-out infinite alternate-reverse;
}
@@ -219,8 +219,8 @@ export function DemoCTA({
position: absolute;
inset: 0;
background:
- linear-gradient(rgba(74, 102, 216, 0.06) 1px, transparent 1px),
- linear-gradient(90deg, rgba(74, 102, 216, 0.06) 1px, transparent 1px);
+ linear-gradient(rgba(145, 145, 145, 0.06) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(145, 145, 145, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
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%);
@@ -233,8 +233,8 @@ export function DemoCTA({
180deg,
transparent 0,
transparent 3px,
- rgba(222, 224, 240, 0.018) 3px,
- rgba(222, 224, 240, 0.018) 4px
+ rgba(231, 231, 231, 0.018) 3px,
+ rgba(231, 231, 231, 0.018) 4px
);
mix-blend-mode: overlay;
opacity: 0.6;
@@ -265,15 +265,15 @@ export function DemoCTA({
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 800;
- color: #8891C7;
+ color: #a8a8a8;
width: fit-content;
}
.dcta-eyebrow-dot {
width: 8px;
height: 8px;
border-radius: 999px;
- background: #DEE0F0;
- box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
+ background: #e7e7e7;
+ box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
animation: dcta-pulse 2.2s ease-in-out infinite;
}
@keyframes dcta-pulse {
@@ -293,7 +293,7 @@ export function DemoCTA({
.dcta-desc {
margin: 0;
- color: #DEE0F0;
+ color: #e7e7e7;
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
line-height: 1.65;
max-width: 540px;
@@ -313,17 +313,17 @@ export function DemoCTA({
gap: 0.45rem;
padding: 0.4rem 0.7rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.12);
- background: rgba(20, 19, 26, 0.55);
- color: #DEE0F0;
+ border: 1px solid rgba(231, 231, 231, 0.12);
+ background: rgba(23, 23, 23, 0.55);
+ color: #e7e7e7;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.01em;
transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.dcta-chip:hover {
- border-color: rgba(74, 102, 216, 0.45);
- background: rgba(58, 85, 196, 0.14);
+ border-color: rgba(145, 145, 145, 0.45);
+ background: rgba(127, 127, 127, 0.14);
color: #FFFFFF;
}
.dcta-chip-icon {
@@ -333,9 +333,9 @@ export function DemoCTA({
width: 18px;
height: 18px;
border-radius: 999px;
- color: #DEE0F0;
- background: rgba(74, 102, 216, 0.22);
- border: 1px solid rgba(74, 102, 216, 0.45);
+ color: #e7e7e7;
+ background: rgba(145, 145, 145, 0.22);
+ border: 1px solid rgba(145, 145, 145, 0.45);
}
.dcta-actions {
@@ -350,7 +350,7 @@ export function DemoCTA({
align-items: center;
gap: 0.55rem;
margin-top: 0.4rem;
- color: #8891C7;
+ color: #a8a8a8;
font-size: 0.78rem;
letter-spacing: 0.01em;
}
@@ -358,8 +358,8 @@ export function DemoCTA({
width: 7px;
height: 7px;
border-radius: 999px;
- background: #7FD6D0;
- box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
+ background: #ababab;
+ box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
animation: dcta-pulse 2.4s ease-in-out infinite;
}
@@ -368,10 +368,10 @@ export function DemoCTA({
display: none;
position: relative;
border-radius: 18px;
- border: 1px solid rgba(74, 102, 216, 0.22);
+ border: 1px solid rgba(145, 145, 145, 0.22);
background:
- radial-gradient(ellipse 80% 80% at 50% 30%, rgba(58, 85, 196, 0.18), transparent 65%),
- linear-gradient(180deg, rgba(14, 13, 22, 0.75), rgba(6, 6, 10, 0.92));
+ radial-gradient(ellipse 80% 80% at 50% 30%, rgba(127, 127, 127, 0.18), transparent 65%),
+ linear-gradient(180deg, rgba(18, 18, 18, 0.75), rgba(8, 8, 8, 0.92));
padding: 1rem 1.1rem 1.1rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
overflow: hidden;
@@ -387,7 +387,7 @@ export function DemoCTA({
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem;
letter-spacing: 0.32em;
- color: #DEE0F0;
+ color: #e7e7e7;
font-weight: 800;
}
.dcta-panel-live {
@@ -397,15 +397,15 @@ export function DemoCTA({
font-size: 0.62rem;
letter-spacing: 0.22em;
font-weight: 700;
- color: #7FD6D0;
+ color: #ababab;
text-transform: uppercase;
}
.dcta-panel-live-dot {
width: 7px;
height: 7px;
border-radius: 999px;
- background: #7FD6D0;
- box-shadow: 0 0 10px rgba(127, 214, 208, 0.75);
+ background: #ababab;
+ box-shadow: 0 0 10px rgba(171, 171, 171, 0.75);
animation: dcta-pulse 1.8s ease-in-out infinite;
}
@@ -413,10 +413,10 @@ export function DemoCTA({
position: relative;
aspect-ratio: 1 / 1;
border-radius: 14px;
- border: 1px solid rgba(222, 224, 240, 0.06);
+ border: 1px solid rgba(231, 231, 231, 0.06);
background:
- radial-gradient(ellipse 80% 80% at 50% 50%, rgba(58, 85, 196, 0.18), transparent 70%),
- linear-gradient(180deg, rgba(10, 10, 14, 0.6), rgba(6, 6, 10, 0.9));
+ radial-gradient(ellipse 80% 80% at 50% 50%, rgba(127, 127, 127, 0.18), transparent 70%),
+ linear-gradient(180deg, rgba(12, 12, 12, 0.6), rgba(8, 8, 8, 0.9));
overflow: hidden;
}
.dcta-orbit-svg {
@@ -432,7 +432,7 @@ export function DemoCTA({
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
- color: #8891C7;
+ color: #a8a8a8;
}
.dcta-panel-rows {
@@ -448,14 +448,14 @@ export function DemoCTA({
gap: 0.5rem;
padding: 0.55rem 0.7rem;
border-radius: 10px;
- border: 1px solid rgba(222, 224, 240, 0.06);
- background: rgba(10, 10, 14, 0.55);
+ border: 1px solid rgba(231, 231, 231, 0.06);
+ background: rgba(12, 12, 12, 0.55);
}
.dcta-row-k {
font-size: 0.6rem;
letter-spacing: 0.26em;
font-weight: 800;
- color: #8891C7;
+ color: #a8a8a8;
text-transform: uppercase;
}
.dcta-row-v {
diff --git a/src/components/robotics/ExclusiveAccessSection.tsx b/src/components/robotics/ExclusiveAccessSection.tsx
index 59646a1..bd34015 100644
--- a/src/components/robotics/ExclusiveAccessSection.tsx
+++ b/src/components/robotics/ExclusiveAccessSection.tsx
@@ -13,9 +13,9 @@ export function ExclusiveAccessSection() {
padding: 'clamp(1.75rem, 4vw, 3rem)',
overflow: 'hidden',
background:
- 'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(222,224,240,0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(136,145,199,0.22), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.92), rgba(5,5,5,0.97))',
- border: '1px solid rgba(39,63,148,0.32)',
- boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(222,224,240,0.06)',
+ 'radial-gradient(ellipse 60% 80% at 0% 0%, rgba(231, 231, 231, 0.18), transparent 60%), radial-gradient(ellipse 70% 80% at 100% 100%, rgba(168, 168, 168, 0.22), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(5,5,5,0.97))',
+ border: '1px solid rgba(94, 94, 94, 0.32)',
+ boxShadow: '0 30px 100px rgba(0,0,0,0.7), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
}}
>
-
+
UAE Robotics Access
@@ -65,7 +65,7 @@ export function ExclusiveAccessSection() {
-
+
Selected solutions delivered to UAE businesses, venues, and innovators from inquiry to live deployment, fully supported in Dubai.
@@ -76,8 +76,8 @@ export function ExclusiveAccessSection() {
'Humanoid, quadruped, service, delivery, cleaning robots.',
'End-to-end procurement, training, and ongoing support.',
].map((b) => (
-
-
+
+
{b}
@@ -104,7 +104,7 @@ export function ExclusiveAccessSection() {
href="/brands/#unitree"
brand="Unitree"
tag="Quadruped · Humanoid"
- accent="#DEE0F0"
+ accent="#e7e7e7"
primary={{ src: '/images/robots/unitree-g1.webp', alt: 'Unitree G1 humanoid robot' }}
secondary={{ src: '/images/robots/unitree-go2.webp', alt: 'Unitree Go2 quadruped robot' }}
/>
@@ -112,7 +112,7 @@ export function ExclusiveAccessSection() {
href="/brands/#pudu"
brand="Pudu Robotics"
tag="Service · Delivery · Cleaning"
- accent="#8891C7"
+ accent="#a8a8a8"
primary={{ src: '/images/robots/pudu-bellabot.webp', alt: 'Pudu BellaBot multi-tray delivery robot' }}
secondary={{ src: '/images/robots/pudu-kettybot.webp', alt: 'Pudu KettyBot Pro service robot with built-in advertising display' }}
/>
@@ -169,13 +169,13 @@ function BrandShowcaseTile({
padding: '1rem',
borderRadius: 18,
background:
- `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))`,
+ `radial-gradient(ellipse 80% 60% at 30% 0%, ${accent}1F, transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))`,
border: `1px solid ${accent}44`,
- color: '#FBFBFD',
+ color: '#fcfcfc',
textDecoration: 'none',
overflow: 'hidden',
minHeight: 220,
- boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+ boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
}}
>
{/* product visual area */}
@@ -186,9 +186,9 @@ function BrandShowcaseTile({
minHeight: 130,
borderRadius: 12,
background:
- `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(28,27,33,0.7), rgba(10,10,12,0.95))`,
+ `radial-gradient(ellipse 60% 50% at 50% 60%, ${accent}1A 0%, transparent 65%), linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95))`,
overflow: 'hidden',
- border: '1px solid rgba(222,224,240,0.08)',
+ border: '1px solid rgba(231, 231, 231, 0.08)',
}}
>
-
+
{tag}
@@ -312,12 +312,12 @@ function TerritoryTile() {
padding: '1rem',
borderRadius: 18,
background:
- 'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(58,85,196,0.30), transparent 60%), linear-gradient(135deg, rgba(28,27,33,0.85), rgba(5,5,5,0.96))',
- border: '1px solid rgba(58,85,196,0.45)',
- color: '#FBFBFD',
+ 'radial-gradient(ellipse 80% 80% at 100% 0%, rgba(127, 127, 127, 0.30), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(5,5,5,0.96))',
+ border: '1px solid rgba(127, 127, 127, 0.45)',
+ color: '#fcfcfc',
overflow: 'hidden',
minHeight: 170,
- boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(222,224,240,0.06)',
+ boxShadow: '0 12px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(231, 231, 231, 0.06)',
}}
>
{/* abstract UAE "territory" graphic ring map style */}
@@ -334,25 +334,25 @@ function TerritoryTile() {
>
-
DXB
+ DXB
-
+
Sales Territory
UAE
-
+
UAE sales rights · Unitree & Pudu solutions.
-
{/* perspective floor */}
@@ -397,7 +397,7 @@ function ShowroomTile() {
x2={200 + i * 5}
y1={70 + i * 14}
y2={70 + i * 14}
- stroke="#DEE0F0"
+ stroke="#e7e7e7"
strokeOpacity={0.35 - i * 0.06}
/>
))}
@@ -408,23 +408,23 @@ function ShowroomTile() {
y1={70}
x2={30 + i * 36 - 30}
y2={140}
- stroke="#DEE0F0"
+ stroke="#e7e7e7"
strokeOpacity={0.2}
/>
))}
-
+
Showroom & Demo
Dubai
-
+
Live demos · City Bay Business Center.
diff --git a/src/components/robotics/FeaturedRobotsShowcase.tsx b/src/components/robotics/FeaturedRobotsShowcase.tsx
index a63eb9d..7fed954 100644
--- a/src/components/robotics/FeaturedRobotsShowcase.tsx
+++ b/src/components/robotics/FeaturedRobotsShowcase.tsx
@@ -344,21 +344,21 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
isolation: isolate;
overflow: hidden;
border-radius: 28px;
- border: 1px solid rgba(222, 224, 240, 0.12);
- background: linear-gradient(180deg, #0a0a0d 0%, #050507 100%);
+ border: 1px solid rgba(231, 231, 231, 0.12);
+ background: linear-gradient(180deg, #0c0c0c 0%, #060606 100%);
padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.25rem);
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
box-shadow:
0 50px 140px rgba(0, 0, 0, 0.6),
- inset 0 1px 0 rgba(222, 224, 240, 0.06);
+ inset 0 1px 0 rgba(231, 231, 231, 0.06);
}
.frs-hero-bg {
position: absolute;
inset: 0;
background:
- radial-gradient(circle at 78% 22%, rgba(58, 85, 196, 0.32), transparent 50%),
- radial-gradient(circle at 14% 80%, rgba(136, 145, 199, 0.16), transparent 50%);
+ radial-gradient(circle at 78% 22%, rgba(127, 127, 127, 0.32), transparent 50%),
+ radial-gradient(circle at 14% 80%, rgba(168, 168, 168, 0.16), transparent 50%);
z-index: 0;
pointer-events: none;
}
@@ -368,7 +368,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
right: -10%;
width: 65%;
height: 80%;
- background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(58, 85, 196, 0.55), transparent 70%);
+ background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(127, 127, 127, 0.55), transparent 70%);
filter: blur(36px);
z-index: 0;
pointer-events: none;
@@ -377,8 +377,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
position: absolute;
inset: 0;
background-image:
- linear-gradient(rgba(199, 207, 230, 0.06) 1px, transparent 1px),
- linear-gradient(90deg, rgba(199, 207, 230, 0.06) 1px, transparent 1px);
+ linear-gradient(rgba(215, 215, 215, 0.06) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(215, 215, 215, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
@@ -391,7 +391,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
left: 0;
width: 36%;
height: 100%;
- background: linear-gradient(90deg, transparent, rgba(222, 224, 240, 0.05) 50%, transparent);
+ background: linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.05) 50%, transparent);
z-index: 0;
pointer-events: none;
}
@@ -420,9 +420,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.55rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
- background: rgba(14, 13, 18, 0.7);
- border: 1px solid rgba(222, 224, 240, 0.2);
- color: #ECEEF6;
+ background: rgba(16, 16, 16, 0.7);
+ border: 1px solid rgba(231, 231, 231, 0.2);
+ color: #f1f1f1;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.26em;
@@ -434,8 +434,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 6px;
height: 6px;
border-radius: 999px;
- background: #DEE0F0;
- box-shadow: 0 0 12px rgba(222, 224, 240, 0.85);
+ background: #e7e7e7;
+ box-shadow: 0 0 12px rgba(231, 231, 231, 0.85);
animation: frs-pulse 2.2s ease-in-out infinite;
}
@keyframes frs-pulse {
@@ -448,7 +448,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.55rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
- background: rgba(14, 13, 18, 0.7);
+ background: rgba(16, 16, 16, 0.7);
border: 1px solid;
font-size: 0.6rem;
font-weight: 800;
@@ -487,7 +487,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
height: 86%;
transform: translateX(-50%);
background:
- radial-gradient(ellipse 60% 60% at 50% 45%, rgba(74, 102, 216, 0.95), transparent 70%),
+ radial-gradient(ellipse 60% 60% at 50% 45%, rgba(145, 145, 145, 0.95), transparent 70%),
radial-gradient(ellipse 38% 48% at 50% 30%, rgba(255, 255, 255, 0.28), transparent 60%);
filter: blur(26px);
z-index: 0;
@@ -501,8 +501,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
height: 72%;
transform: translateX(-50%);
background:
- radial-gradient(ellipse 52% 60% at 50% 50%, rgba(74, 102, 216, 0.72), transparent 70%),
- radial-gradient(ellipse 32% 50% at 50% 50%, rgba(190, 210, 255, 0.45), transparent 75%);
+ radial-gradient(ellipse 52% 60% at 50% 50%, rgba(145, 145, 145, 0.72), transparent 70%),
+ radial-gradient(ellipse 32% 50% at 50% 50%, rgba(223, 223, 223, 0.45), transparent 75%);
filter: blur(38px);
z-index: 0;
pointer-events: none;
@@ -514,7 +514,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 66%;
height: 62%;
transform: translateX(-50%);
- background: radial-gradient(ellipse 52% 70% at 50% 30%, rgba(222, 224, 240, 0.42), transparent 60%);
+ background: radial-gradient(ellipse 52% 70% at 50% 30%, rgba(231, 231, 231, 0.42), transparent 60%);
filter: blur(10px);
z-index: 0;
pointer-events: none;
@@ -527,7 +527,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
height: 28%;
transform: translateX(-50%);
background:
- radial-gradient(ellipse 50% 50% at 50% 50%, rgba(140, 178, 255, 0.7), transparent 65%),
+ radial-gradient(ellipse 50% 50% at 50% 50%, rgba(198, 198, 198, 0.7), transparent 65%),
radial-gradient(ellipse 25% 30% at 50% 40%, rgba(255, 255, 255, 0.78), transparent 70%);
filter: blur(20px);
mix-blend-mode: screen;
@@ -542,7 +542,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
font-size: clamp(3rem, 11vw, 8.5rem);
font-weight: 800;
color: transparent;
- -webkit-text-stroke: 1px rgba(222, 224, 240, 0.18);
+ -webkit-text-stroke: 1px rgba(231, 231, 231, 0.18);
line-height: 0.85;
white-space: nowrap;
letter-spacing: -0.06em;
@@ -559,8 +559,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
background: transparent;
filter:
drop-shadow(0 38px 70px rgba(0, 0, 0, 0.95))
- drop-shadow(0 0 38px rgba(74, 102, 216, 0.7))
- drop-shadow(0 0 70px rgba(58, 85, 196, 0.4))
+ drop-shadow(0 0 38px rgba(145, 145, 145, 0.7))
+ drop-shadow(0 0 70px rgba(127, 127, 127, 0.4))
saturate(1.12)
contrast(1.08);
}
@@ -576,9 +576,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
right: 10%;
bottom: 12%;
height: 1px;
- background: linear-gradient(90deg, transparent, rgba(222, 224, 240, 0.7), transparent);
+ background: linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.7), transparent);
z-index: 1;
- box-shadow: 0 0 18px rgba(222, 224, 240, 0.4);
+ box-shadow: 0 0 18px rgba(231, 231, 231, 0.4);
pointer-events: none;
}
.frs-hero-reflect {
@@ -602,10 +602,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
z-index: 3;
pointer-events: none;
}
- .frs-corner-tl { top: 6px; left: 6px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
- .frs-corner-tr { top: 6px; right: 6px; border-top: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
- .frs-corner-bl { bottom: 6px; left: 6px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-left: 1px solid rgba(222, 224, 240, 0.32); }
- .frs-corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid rgba(222, 224, 240, 0.32); border-right: 1px solid rgba(222, 224, 240, 0.32); }
+ .frs-corner-tl { top: 6px; left: 6px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
+ .frs-corner-tr { top: 6px; right: 6px; border-top: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
+ .frs-corner-bl { bottom: 6px; left: 6px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-left: 1px solid rgba(231, 231, 231, 0.32); }
+ .frs-corner-br { bottom: 6px; right: 6px; border-bottom: 1px solid rgba(231, 231, 231, 0.32); border-right: 1px solid rgba(231, 231, 231, 0.32); }
/* hero copy */
.frs-hero-copy {
@@ -619,7 +619,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
content: '';
position: absolute;
inset: -1rem -1.5rem;
- background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(5, 5, 8, 0.55), transparent 75%);
+ background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(7, 7, 7, 0.55), transparent 75%);
z-index: -1;
pointer-events: none;
border-radius: 22px;
@@ -644,7 +644,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
font-weight: 800;
letter-spacing: 0.3em;
text-transform: uppercase;
- color: #DEE0F0;
+ color: #e7e7e7;
white-space: nowrap;
}
.frs-name {
@@ -659,7 +659,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
.frs-name :global(.text-gradient) { font-weight: 600; }
.frs-tagline {
margin: 0;
- color: #F2F4FA;
+ color: #f6f6f6;
font-size: clamp(1rem, 1.7vw, 1.12rem);
line-height: 1.9;
max-width: 620px;
@@ -685,13 +685,13 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
height: 30px;
padding: 0 0.85rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.22);
- background: rgba(14, 13, 18, 0.55);
+ border: 1px solid rgba(231, 231, 231, 0.22);
+ background: rgba(16, 16, 16, 0.55);
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
- color: #DEE0F0;
+ color: #e7e7e7;
white-space: nowrap;
backdrop-filter: blur(10px);
}
@@ -706,8 +706,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 6px;
height: 6px;
border-radius: 999px;
- background: var(--frs-acc, #DEE0F0);
- box-shadow: 0 0 8px color-mix(in srgb, var(--frs-acc, #DEE0F0) 70%, transparent);
+ background: var(--frs-acc, #e7e7e7);
+ box-shadow: 0 0 8px color-mix(in srgb, var(--frs-acc, #e7e7e7) 70%, transparent);
}
.frs-chip-on {
border-color: rgba(34, 197, 94, 0.45);
@@ -719,7 +719,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
align-items: center;
gap: 0.4rem;
padding: 0.85rem 0.95rem;
- color: #DEE0F0;
+ color: #e7e7e7;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
@@ -730,7 +730,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
}
.frs-cta-link:hover {
color: #FFFFFF;
- border-bottom-color: rgba(222, 224, 240, 0.55);
+ border-bottom-color: rgba(231, 231, 231, 0.55);
transform: translateX(2px);
}
.frs-features {
@@ -746,7 +746,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
grid-template-columns: 14px 1fr;
align-items: start;
gap: 0.85rem;
- color: #F0F2F8;
+ color: #f4f4f4;
font-size: 0.97rem;
line-height: 1.85;
}
@@ -755,8 +755,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 6px;
height: 6px;
border-radius: 999px;
- background: linear-gradient(135deg, #DEE0F0, #3a55c4);
- box-shadow: 0 0 12px rgba(58, 85, 196, 0.55);
+ background: linear-gradient(135deg, #e7e7e7, #7f7f7f);
+ box-shadow: 0 0 12px rgba(127, 127, 127, 0.55);
}
.frs-cta-block {
display: flex;
@@ -779,7 +779,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.75rem;
padding: 1.05rem 1.7rem;
border-radius: 999px;
- background: linear-gradient(135deg, #5a76e8 0%, #4a66d8 35%, #2f4cb4 70%, #273F94 100%);
+ background: linear-gradient(135deg, #a1a1a1 0%, #919191 35%, #727272 70%, #5e5e5e 100%);
color: #FFFFFF;
font-size: 0.8rem;
font-weight: 800;
@@ -787,9 +787,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
text-transform: uppercase;
text-decoration: none;
box-shadow:
- 0 28px 62px rgba(39, 63, 148, 0.62),
- 0 0 0 1px rgba(222, 224, 240, 0.28),
- 0 0 38px rgba(74, 102, 216, 0.45),
+ 0 28px 62px rgba(94, 94, 94, 0.62),
+ 0 0 0 1px rgba(231, 231, 231, 0.28),
+ 0 0 38px rgba(145, 145, 145, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
@@ -803,7 +803,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
transform: translateX(-100%);
transition: transform 0.6s ease;
}
- .frs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 62px rgba(39, 63, 148, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
+ .frs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 28px 62px rgba(94, 94, 94, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.frs-cta-primary:hover::before { transform: translateX(100%); }
.frs-cta-primary-arrow {
display: inline-flex;
@@ -823,10 +823,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.65rem;
padding: 1rem 1.45rem 1rem 1.5rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.55);
+ border: 1px solid rgba(231, 231, 231, 0.55);
background:
- linear-gradient(135deg, rgba(58, 85, 196, 0.16), rgba(14, 13, 18, 0.55) 55%),
- rgba(14, 13, 18, 0.55);
+ linear-gradient(135deg, rgba(127, 127, 127, 0.16), rgba(16, 16, 16, 0.55) 55%),
+ rgba(16, 16, 16, 0.55);
color: #FFFFFF;
font-size: 0.76rem;
font-weight: 800;
@@ -837,9 +837,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
-webkit-backdrop-filter: blur(16px);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.6),
- inset 0 1px 0 rgba(222, 224, 240, 0.22),
- 0 0 0 1px rgba(58, 85, 196, 0.2),
- 0 0 24px rgba(58, 85, 196, 0.18);
+ inset 0 1px 0 rgba(231, 231, 231, 0.22),
+ 0 0 0 1px rgba(127, 127, 127, 0.2),
+ 0 0 24px rgba(127, 127, 127, 0.18);
overflow: hidden;
transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
@@ -848,22 +848,22 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
position: absolute;
inset: 0;
border-radius: 999px;
- background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.18) 50%, transparent 70%);
+ background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.18) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
pointer-events: none;
}
.frs-cta-ghost:hover {
- border-color: rgba(222, 224, 240, 0.85);
+ border-color: rgba(231, 231, 231, 0.85);
background:
- linear-gradient(135deg, rgba(74, 102, 216, 0.32), rgba(20, 22, 38, 0.6) 60%),
- rgba(20, 22, 38, 0.6);
+ linear-gradient(135deg, rgba(145, 145, 145, 0.32), rgba(29, 29, 29, 0.6) 60%),
+ rgba(29, 29, 29, 0.6);
transform: translateY(-2px);
box-shadow:
0 22px 48px rgba(0, 0, 0, 0.65),
- inset 0 1px 0 rgba(222, 224, 240, 0.3),
- 0 0 0 1px rgba(58, 85, 196, 0.5),
- 0 0 36px rgba(58, 85, 196, 0.45);
+ inset 0 1px 0 rgba(231, 231, 231, 0.3),
+ 0 0 0 1px rgba(127, 127, 127, 0.5),
+ 0 0 36px rgba(127, 127, 127, 0.45);
}
.frs-cta-ghost:hover::before { transform: translateX(100%); }
.frs-cta-ghost-arrow {
@@ -873,14 +873,14 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 26px;
height: 26px;
border-radius: 999px;
- background: rgba(222, 224, 240, 0.12);
- border: 1px solid rgba(222, 224, 240, 0.25);
+ background: rgba(231, 231, 231, 0.12);
+ border: 1px solid rgba(231, 231, 231, 0.25);
color: #FFFFFF;
transition: transform 0.35s, background 0.35s, border-color 0.35s;
}
.frs-cta-ghost:hover .frs-cta-ghost-arrow {
- background: rgba(74, 102, 216, 0.35);
- border-color: rgba(222, 224, 240, 0.5);
+ background: rgba(145, 145, 145, 0.35);
+ border-color: rgba(231, 231, 231, 0.5);
transform: translateX(3px);
}
@@ -899,10 +899,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
padding: 0.85rem 1rem 0.85rem 0.85rem;
min-height: 132px;
border-radius: 20px;
- border: 1px solid rgba(222, 224, 240, 0.14);
+ border: 1px solid rgba(231, 231, 231, 0.14);
background:
radial-gradient(ellipse 60% 80% at 100% 0%, color-mix(in srgb, var(--frs-acc) 26%, transparent), transparent 60%),
- linear-gradient(135deg, rgba(28, 27, 33, 0.85), rgba(8, 8, 10, 0.95));
+ linear-gradient(135deg, rgba(30, 30, 30, 0.85), rgba(9, 9, 9, 0.95));
color: #FFFFFF;
text-align: left;
cursor: pointer;
@@ -911,7 +911,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.frs-tile:hover {
- border-color: rgba(222, 224, 240, 0.45);
+ border-color: rgba(231, 231, 231, 0.45);
transform: translateY(-3px);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}
@@ -932,7 +932,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
bottom: 14px;
width: 3px;
border-radius: 0 4px 4px 0;
- background: linear-gradient(180deg, var(--frs-acc), #3a55c4);
+ background: linear-gradient(180deg, var(--frs-acc), #7f7f7f);
box-shadow: 0 0 16px var(--frs-acc);
z-index: 1;
}
@@ -945,8 +945,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
background:
radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--frs-acc) 28%, transparent) 0%, transparent 65%),
radial-gradient(ellipse 60% 40% at 50% 25%, rgba(255, 255, 255, 0.06), transparent 70%),
- linear-gradient(180deg, rgba(28, 27, 33, 0.7), rgba(10, 10, 12, 0.95));
- border: 1px solid rgba(222, 224, 240, 0.12);
+ linear-gradient(180deg, rgba(30, 30, 30, 0.7), rgba(11, 11, 11, 0.95));
+ border: 1px solid rgba(231, 231, 231, 0.12);
flex-shrink: 0;
}
.frs-tile-img-wrap :global(img) {
@@ -1003,7 +1003,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
- color: #B5BDDB;
+ color: #c8c8c8;
white-space: nowrap;
}
.frs-tile-avail-dot {
@@ -1014,7 +1014,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
animation: frs-pulse 1.8s ease-in-out infinite;
}
- .frs-tile-on .frs-tile-avail { color: #ECEEF6; }
+ .frs-tile-on .frs-tile-avail { color: #f1f1f1; }
.frs-tile-arrow {
position: absolute;
top: 12px;
@@ -1025,9 +1025,9 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
align-items: center;
justify-content: center;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.18);
- background: rgba(14, 13, 18, 0.6);
- color: #DEE0F0;
+ border: 1px solid rgba(231, 231, 231, 0.18);
+ background: rgba(16, 16, 16, 0.6);
+ color: #e7e7e7;
opacity: 0;
transform: translate(4px, -2px);
transition: opacity 0.25s, transform 0.25s, background 0.25s;
@@ -1036,7 +1036,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
.frs-tile-on .frs-tile-arrow {
opacity: 1;
transform: translate(0, 0);
- background: rgba(58, 85, 196, 0.32);
+ background: rgba(127, 127, 127, 0.32);
}
/* UTILITY band */
@@ -1046,10 +1046,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.85rem;
padding: 1rem 1.25rem;
border-radius: 18px;
- border: 1px solid rgba(222, 224, 240, 0.12);
+ border: 1px solid rgba(231, 231, 231, 0.12);
background:
- radial-gradient(ellipse 60% 80% at 0% 100%, rgba(58, 85, 196, 0.18), transparent 65%),
- linear-gradient(180deg, rgba(28, 27, 33, 0.55), rgba(8, 8, 10, 0.85));
+ radial-gradient(ellipse 60% 80% at 0% 100%, rgba(127, 127, 127, 0.18), transparent 65%),
+ linear-gradient(180deg, rgba(30, 30, 30, 0.55), rgba(9, 9, 9, 0.85));
backdrop-filter: blur(12px);
}
.frs-utility-block {
@@ -1057,12 +1057,12 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
grid-template-columns: 32px minmax(0, 1fr);
gap: 0.75rem;
align-items: center;
- color: #ECEEF6;
+ color: #f1f1f1;
}
.frs-utility-block :global(svg) {
width: 16px;
height: 16px;
- color: #DEE0F0;
+ color: #e7e7e7;
margin: 0;
justify-self: center;
}
@@ -1076,7 +1076,7 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
font-size: 0.58rem;
letter-spacing: 0.24em;
text-transform: uppercase;
- color: #8891C7;
+ color: #a8a8a8;
font-weight: 700;
white-space: nowrap;
}
@@ -1095,10 +1095,10 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
gap: 0.6rem;
padding: 0.85rem 1.05rem 0.85rem 1.25rem;
border-radius: 999px;
- border: 1px solid rgba(222, 224, 240, 0.45);
+ border: 1px solid rgba(231, 231, 231, 0.45);
background:
- linear-gradient(135deg, rgba(58, 85, 196, 0.18), rgba(14, 13, 18, 0.55) 60%),
- rgba(14, 13, 18, 0.55);
+ linear-gradient(135deg, rgba(127, 127, 127, 0.18), rgba(16, 16, 16, 0.55) 60%),
+ rgba(16, 16, 16, 0.55);
color: #FFFFFF;
font-size: 0.7rem;
font-weight: 800;
@@ -1110,8 +1110,8 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.55),
- inset 0 1px 0 rgba(222, 224, 240, 0.2),
- 0 0 0 1px rgba(58, 85, 196, 0.2);
+ inset 0 1px 0 rgba(231, 231, 231, 0.2),
+ 0 0 0 1px rgba(127, 127, 127, 0.2);
overflow: hidden;
transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
@@ -1120,22 +1120,22 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
position: absolute;
inset: 0;
border-radius: 999px;
- background: linear-gradient(120deg, transparent 30%, rgba(222, 224, 240, 0.18) 50%, transparent 70%);
+ background: linear-gradient(120deg, transparent 30%, rgba(231, 231, 231, 0.18) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
pointer-events: none;
}
.frs-utility-link:hover {
- border-color: rgba(222, 224, 240, 0.82);
+ border-color: rgba(231, 231, 231, 0.82);
background:
- linear-gradient(135deg, rgba(74, 102, 216, 0.32), rgba(20, 22, 38, 0.65) 60%),
- rgba(20, 22, 38, 0.65);
+ linear-gradient(135deg, rgba(145, 145, 145, 0.32), rgba(29, 29, 29, 0.65) 60%),
+ rgba(29, 29, 29, 0.65);
transform: translateY(-2px);
box-shadow:
0 20px 44px rgba(0, 0, 0, 0.6),
- inset 0 1px 0 rgba(222, 224, 240, 0.28),
- 0 0 0 1px rgba(58, 85, 196, 0.5),
- 0 0 32px rgba(58, 85, 196, 0.4);
+ inset 0 1px 0 rgba(231, 231, 231, 0.28),
+ 0 0 0 1px rgba(127, 127, 127, 0.5),
+ 0 0 32px rgba(127, 127, 127, 0.4);
}
.frs-utility-link:hover::before { transform: translateX(100%); }
.frs-utility-link-arrow {
@@ -1145,14 +1145,14 @@ export function FeaturedRobotsShowcase({ robots }: Props) {
width: 24px;
height: 24px;
border-radius: 999px;
- background: rgba(222, 224, 240, 0.12);
- border: 1px solid rgba(222, 224, 240, 0.25);
+ background: rgba(231, 231, 231, 0.12);
+ border: 1px solid rgba(231, 231, 231, 0.25);
color: #FFFFFF;
transition: transform 0.35s, background 0.35s, border-color 0.35s;
}
.frs-utility-link:hover .frs-utility-link-arrow {
- background: rgba(74, 102, 216, 0.4);
- border-color: rgba(222, 224, 240, 0.55);
+ background: rgba(145, 145, 145, 0.4);
+ border-color: rgba(231, 231, 231, 0.55);
transform: rotate(45deg);
}
diff --git a/src/components/robotics/FloatingTechPanel.tsx b/src/components/robotics/FloatingTechPanel.tsx
index b8b7247..97258f7 100644
--- a/src/components/robotics/FloatingTechPanel.tsx
+++ b/src/components/robotics/FloatingTechPanel.tsx
@@ -40,15 +40,15 @@ export function FloatingTechPanel() {
width: 60,
height: 60,
borderRadius: '50%',
- background: `radial-gradient(circle, ${['#DEE0F0', '#273F94', '#8891C7', '#DEE0F0'][i % 4]}33, transparent 70%)`,
+ background: `radial-gradient(circle, ${['#e7e7e7', '#5e5e5e', '#a8a8a8', '#e7e7e7'][i % 4]}33, transparent 70%)`,
pointerEvents: 'none',
}}
/>
- {s.label}
+ {s.label}
{s.value}
- {s.sub && {s.sub} }
+ {s.sub && {s.sub} }
diff --git a/src/components/robotics/FounderSection.tsx b/src/components/robotics/FounderSection.tsx
index da8dd03..09499a2 100644
--- a/src/components/robotics/FounderSection.tsx
+++ b/src/components/robotics/FounderSection.tsx
@@ -9,8 +9,8 @@ export function FounderSection() {
padding: 'clamp(2rem, 5vw, 3.5rem)',
overflow: 'hidden',
background:
- 'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(222, 224, 240,0.15), transparent 60%), linear-gradient(135deg, rgba(28, 27, 33,0.95), rgba(5,5,5,0.98))',
- border: '1px solid rgba(39, 63, 148,0.28)',
+ 'radial-gradient(ellipse 50% 70% at 100% 0%, rgba(231, 231, 231, 0.15), transparent 60%), linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(5,5,5,0.98))',
+ border: '1px solid rgba(94, 94, 94, 0.28)',
boxShadow: '0 30px 100px rgba(0,0,0,0.7)',
}}
>
@@ -20,7 +20,7 @@ export function FounderSection() {
position: 'absolute',
inset: 0,
background:
- 'linear-gradient(rgba(39, 63, 148,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.04) 1px, transparent 1px)',
+ 'linear-gradient(rgba(94, 94, 94, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.04) 1px, transparent 1px)',
backgroundSize: '48px 48px',
maskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%)',
@@ -36,13 +36,13 @@ export function FounderSection() {
Mr. Yousif Bin Saeed Al Lootah
-
+
Founder · Yousuf Saeed Lootah Investment Group
-
+
Under the leadership of Mr. Yousif Bin Saeed Al Lootah, the group has championed innovation, trust, and long-term value creation across the UAE from technology and robotics to investment and enterprise. YS Lootah Robotics carries that vision into the future of intelligent automation.
-
+
“Innovating today for a smarter tomorrow.”
@@ -81,8 +81,8 @@ function Pillar({ value, label }: { value: string; label: string }) {
style={{
padding: '1.25rem',
borderRadius: 14,
- background: 'linear-gradient(135deg, rgba(28, 27, 33,0.7), rgba(5,5,5,0.92))',
- border: '1px solid rgba(39, 63, 148,0.22)',
+ background: 'linear-gradient(135deg, rgba(30, 30, 30, 0.7), rgba(5,5,5,0.92))',
+ border: '1px solid rgba(94, 94, 94, 0.22)',
display: 'flex',
flexDirection: 'column',
gap: '0.4rem',
@@ -93,7 +93,7 @@ function Pillar({ value, label }: { value: string; label: string }) {
{value}
- {label}
+ {label}
);
}
diff --git a/src/components/robotics/Hero3DRobotics.tsx b/src/components/robotics/Hero3DRobotics.tsx
index 6a4a8a5..a0058eb 100644
--- a/src/components/robotics/Hero3DRobotics.tsx
+++ b/src/components/robotics/Hero3DRobotics.tsx
@@ -92,7 +92,7 @@ export function Hero3DRobotics() {
-
+
{/* Royal-blue beams */}
-
+
UAE Access · Dubai
@@ -135,29 +135,29 @@ export function Hero3DRobotics() {
fontWeight: 300,
}}
>
-
Advanced robotics.
+
Advanced robotics.
UAE access.
-
+
YS Lootah Robotics is the UAE sales destination for selected Unitree and Pudu Robotics solutions helping businesses explore, configure, book demos, and deploy advanced robots across Dubai and the UAE.
-
+
In Tech We Innovate · In Trust We Lead
@@ -176,7 +176,7 @@ export function Hero3DRobotics() {
paddingBottom: '0.5rem',
marginTop: '0.75rem',
marginBottom: 'clamp(0.5rem, 2vw, 1.5rem)',
- borderTop: '1px solid rgba(136,145,199,0.22)',
+ borderTop: '1px solid rgba(168, 168, 168, 0.22)',
}}
>
{HERO_STATS.map((s) => (
@@ -192,7 +192,7 @@ export function Hero3DRobotics() {
>
{s.value}
-
+
{s.label}
@@ -232,7 +232,7 @@ export function Hero3DRobotics() {
right: '8%',
height: '8%',
background:
- 'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(58,85,196,0.5), transparent 75%)',
+ 'radial-gradient(ellipse 50% 100% at 50% 100%, rgba(127, 127, 127, 0.5), transparent 75%)',
filter: 'blur(18px)',
pointerEvents: 'none',
}}
@@ -247,11 +247,11 @@ export function Hero3DRobotics() {
minHeight: 'clamp(440px, 58vw, 660px)',
borderRadius: '1.75rem',
background:
- 'linear-gradient(180deg, rgba(28,27,33,0.78) 0%, rgba(10,10,12,0.95) 100%)',
- border: '1px solid rgba(136,145,199,0.32)',
+ 'linear-gradient(180deg, rgba(30, 30, 30, 0.78) 0%, rgba(11, 11, 11, 0.95) 100%)',
+ border: '1px solid rgba(168, 168, 168, 0.32)',
backdropFilter: 'blur(20px)',
boxShadow:
- '0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(222,224,240,0.1), 0 0 70px rgba(39,63,148,0.22)',
+ '0 30px 100px rgba(0,0,0,0.8), inset 0 1px 0 rgba(231, 231, 231, 0.1), 0 0 70px rgba(94, 94, 94, 0.22)',
transform: `rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
transition: 'transform 0.3s cubic-bezier(0.16,1,0.3,1)',
overflow: 'hidden',
@@ -265,7 +265,7 @@ export function Hero3DRobotics() {
position: 'absolute',
inset: 0,
background:
- 'linear-gradient(rgba(136,145,199,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(136,145,199,0.07) 1px, transparent 1px)',
+ 'linear-gradient(rgba(168, 168, 168, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 168, 168, 0.07) 1px, transparent 1px)',
backgroundSize: '40px 40px',
maskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%)',
@@ -284,7 +284,7 @@ export function Hero3DRobotics() {
width: '70%',
height: '70%',
background:
- 'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(58,85,196,0.45) 0%, rgba(39,63,148,0.25) 35%, transparent 70%)',
+ 'radial-gradient(ellipse 60% 70% at 50% 35%, rgba(127, 127, 127, 0.45) 0%, rgba(94, 94, 94, 0.25) 35%, transparent 70%)',
filter: 'blur(14px)',
pointerEvents: 'none',
}}
@@ -301,7 +301,7 @@ export function Hero3DRobotics() {
width: '60%',
height: '60%',
background:
- 'linear-gradient(180deg, rgba(222,224,240,0.18) 0%, rgba(58,85,196,0.12) 35%, transparent 75%)',
+ 'linear-gradient(180deg, rgba(231, 231, 231, 0.18) 0%, rgba(127, 127, 127, 0.12) 35%, transparent 75%)',
clipPath: 'polygon(35% 0, 65% 0, 90% 100%, 10% 100%)',
filter: 'blur(8px)',
mixBlendMode: 'screen',
@@ -332,7 +332,7 @@ export function Hero3DRobotics() {
transition: 'opacity 1s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1)',
filter:
idx === activeIdx
- ? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(58,85,196,0.45))'
+ ? 'drop-shadow(0 26px 42px rgba(0,0,0,0.78)) drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(127, 127, 127, 0.45))'
: 'none',
willChange: 'transform',
}}
@@ -410,7 +410,7 @@ export function Hero3DRobotics() {
bottom: '28%',
height: 1,
background:
- 'linear-gradient(90deg, transparent, rgba(222,224,240,0.6), transparent)',
+ 'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.6), transparent)',
pointerEvents: 'none',
filter: 'blur(0.3px)',
}}
@@ -424,7 +424,7 @@ export function Hero3DRobotics() {
inset: 0,
borderRadius: '1.75rem',
background:
- 'linear-gradient(135deg, rgba(222,224,240,0.18) 0%, transparent 18%, transparent 80%, rgba(58,85,196,0.22) 100%)',
+ 'linear-gradient(135deg, rgba(231, 231, 231, 0.18) 0%, transparent 18%, transparent 80%, rgba(127, 127, 127, 0.22) 100%)',
mixBlendMode: 'screen',
pointerEvents: 'none',
}}
@@ -438,7 +438,7 @@ export function Hero3DRobotics() {
right: '10%',
height: '2px',
background:
- 'linear-gradient(90deg, transparent, rgba(222,224,240,0.5), transparent)',
+ 'linear-gradient(90deg, transparent, rgba(231, 231, 231, 0.5), transparent)',
pointerEvents: 'none',
filter: 'blur(0.4px)',
}}
@@ -462,9 +462,9 @@ export function Hero3DRobotics() {
right: l.right,
padding: '0.45rem 0.8rem',
borderRadius: 999,
- background: 'rgba(14,13,18,0.78)',
- border: '1px solid rgba(136,145,199,0.45)',
- color: '#DEE0F0',
+ background: 'rgba(16, 16, 16, 0.78)',
+ border: '1px solid rgba(168, 168, 168, 0.45)',
+ color: '#e7e7e7',
fontSize: '0.66rem',
letterSpacing: '0.22em',
textTransform: 'uppercase',
@@ -473,7 +473,7 @@ export function Hero3DRobotics() {
animation: `floatY 6s ease-in-out ${l.delay}s infinite, fadeInUp 0.9s cubic-bezier(0.16,1,0.3,1) ${l.delay}s both`,
whiteSpace: 'nowrap',
boxShadow:
- '0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(58,85,196,0.18), inset 0 1px 0 rgba(222,224,240,0.08)',
+ '0 10px 28px rgba(0,0,0,0.55), 0 0 18px rgba(127, 127, 127, 0.18), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
transform: `translate3d(${dx}px, ${dy}px, 0)`,
transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1)',
willChange: 'transform',
@@ -508,21 +508,21 @@ export function Hero3DRobotics() {
gap: '0.75rem',
padding: '0.7rem 1.1rem',
borderRadius: 14,
- background: 'rgba(14,13,18,0.72)',
- border: '1px solid rgba(136,145,199,0.45)',
+ background: 'rgba(16, 16, 16, 0.72)',
+ border: '1px solid rgba(168, 168, 168, 0.45)',
backdropFilter: 'blur(12px)',
- color: '#FBFBFD',
+ color: '#fcfcfc',
textDecoration: 'none',
boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
}}
>
-
+
Featured · {robot.brandLabel}
{robot.name}
-
+
@@ -540,8 +540,8 @@ export function Hero3DRobotics() {
borderRadius: 999,
border: 'none',
background: idx === activeIdx
- ? 'linear-gradient(90deg, #DEE0F0, #3a55c4)'
- : 'rgba(136,145,199,0.4)',
+ ? 'linear-gradient(90deg, #e7e7e7, #7f7f7f)'
+ : 'rgba(168, 168, 168, 0.4)',
cursor: 'pointer',
transition: 'all 0.4s ease',
}}
diff --git a/src/components/robotics/IndustryUseCases.tsx b/src/components/robotics/IndustryUseCases.tsx
index a273bb4..abc4f99 100644
--- a/src/components/robotics/IndustryUseCases.tsx
+++ b/src/components/robotics/IndustryUseCases.tsx
@@ -109,9 +109,9 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
min-width: 0;
padding: 0.85rem 1rem;
border-radius: 14px;
- border: 1px solid rgba(120, 140, 255, 0.22);
+ border: 1px solid rgba(188, 188, 188, 0.22);
background:
- linear-gradient(135deg, rgba(80, 110, 255, 0.12), rgba(255, 255, 255, 0.03));
+ linear-gradient(135deg, rgba(168, 168, 168, 0.12), rgba(255, 255, 255, 0.03));
overflow: hidden;
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s, background 0.3s;
}
@@ -122,21 +122,21 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
right: 10px;
width: 20px;
height: 1px;
- background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
+ background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
}
.iu-stat::after {
content: '';
position: absolute;
inset: 0;
- background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(74, 102, 216, 0.10), transparent 60%);
+ background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(145, 145, 145, 0.10), transparent 60%);
pointer-events: none;
opacity: 0;
transition: opacity 0.35s;
}
.iu-stat:hover {
- border-color: rgba(120, 140, 255, 0.45);
+ border-color: rgba(188, 188, 188, 0.45);
transform: translateY(-1px);
- box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(74, 102, 216, 0.18);
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38), 0 0 18px rgba(145, 145, 145, 0.18);
}
.iu-stat:hover::after { opacity: 1; }
.iu-stat-value {
@@ -147,7 +147,7 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
+ background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@@ -159,7 +159,7 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
letter-spacing: clamp(0.06em, 0.4vw, 0.22em);
text-transform: uppercase;
font-weight: 700;
- color: #A6B2D8;
+ color: #bfbfbf;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -250,12 +250,12 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
overflow: hidden;
text-decoration: none;
color: #FFFFFF;
- border: 1px solid rgba(222, 224, 240, 0.10);
+ border: 1px solid rgba(231, 231, 231, 0.10);
background:
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
- linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
+ linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96));
box-shadow:
- 0 1px 0 rgba(222, 224, 240, 0.04) inset,
+ 0 1px 0 rgba(231, 231, 231, 0.04) inset,
0 14px 28px rgba(0, 0, 0, 0.36);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s, border-color 0.4s;
@@ -263,15 +263,15 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
.ic:hover,
.ic:focus-visible {
transform: translateY(-3px);
- border-color: rgba(74, 102, 216, 0.42);
+ border-color: rgba(145, 145, 145, 0.42);
box-shadow:
- 0 1px 0 rgba(222, 224, 240, 0.08) inset,
+ 0 1px 0 rgba(231, 231, 231, 0.08) inset,
0 24px 52px rgba(0, 0, 0, 0.55),
- 0 0 0 1px rgba(74, 102, 216, 0.22),
- 0 0 28px rgba(58, 85, 196, 0.22);
+ 0 0 0 1px rgba(145, 145, 145, 0.22),
+ 0 0 28px rgba(127, 127, 127, 0.22);
}
.ic:focus-visible {
- outline: 2px solid rgba(74, 102, 216, 0.75);
+ outline: 2px solid rgba(145, 145, 145, 0.75);
outline-offset: 3px;
}
@@ -280,8 +280,8 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
- background: #0a0a0e;
- border-bottom: 1px solid rgba(222, 224, 240, 0.06);
+ background: #0c0c0c;
+ border-bottom: 1px solid rgba(231, 231, 231, 0.06);
}
.ic-media :global(.ic-media-img) {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
@@ -296,7 +296,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
position: absolute;
inset: 0;
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%),
+ linear-gradient(180deg, rgba(12, 12, 12, 0.10) 0%, rgba(12, 12, 12, 0.05) 40%, rgba(12, 12, 12, 0.85) 100%),
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
pointer-events: none;
}
@@ -312,7 +312,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
height: 36px;
border-radius: 10px;
color: color-mix(in srgb, var(--accent) 78%, white);
- background: rgba(10, 10, 14, 0.7);
+ background: rgba(12, 12, 12, 0.7);
border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
@@ -342,7 +342,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
}
.ic-desc {
margin: 0;
- color: #C9CCDE;
+ color: #d4d4d4;
font-size: 0.88rem;
line-height: 1.55;
flex: 1;
@@ -359,7 +359,7 @@ function IndustryCard({ industry, delay }: { industry: Industry; delay: number }
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
- color: #DEE0F0;
+ color: #e7e7e7;
transition: color 0.3s;
}
.ic:hover .ic-cta,
diff --git a/src/components/robotics/InquiryForm.tsx b/src/components/robotics/InquiryForm.tsx
index 92f7d22..ae88cbc 100644
--- a/src/components/robotics/InquiryForm.tsx
+++ b/src/components/robotics/InquiryForm.tsx
@@ -63,9 +63,9 @@ export function InquiryForm({ defaultRobot = '', defaultCategory = '', intent =
width: '100%',
padding: '0.875rem 1rem',
borderRadius: '0.75rem',
- border: '1px solid rgba(39, 63, 148,0.18)',
+ border: '1px solid rgba(94, 94, 94, 0.18)',
background: 'rgba(15, 12, 8,0.55)',
- color: '#FBFBFD',
+ color: '#fcfcfc',
fontSize: '0.95rem',
outline: 'none',
boxSizing: 'border-box',
@@ -77,7 +77,7 @@ export function InquiryForm({ defaultRobot = '', defaultCategory = '', intent =
fontSize: '0.72rem',
letterSpacing: '0.18em',
textTransform: 'uppercase',
- color: '#8891C7',
+ color: '#a8a8a8',
fontWeight: 600,
};
diff --git a/src/components/robotics/MarqueeStrip.tsx b/src/components/robotics/MarqueeStrip.tsx
index 288aa0e..1aac41f 100644
--- a/src/components/robotics/MarqueeStrip.tsx
+++ b/src/components/robotics/MarqueeStrip.tsx
@@ -9,12 +9,12 @@ type Item = {
};
const DEFAULT_ITEMS: Item[] = [
- { label: 'UAE Access', sub: 'YS Lootah Robotics', accent: '#DEE0F0' },
- { label: 'Unitree', sub: 'Quadruped · Humanoid', accent: '#273F94' },
- { label: 'Pudu Robotics', sub: 'Service · Delivery · Cleaning', accent: '#8891C7' },
- { label: 'Dubai · UAE', sub: 'Sales · Demo · Configure', accent: '#DEE0F0' },
- { label: 'Showroom', sub: 'City Bay Business Center', accent: '#273F94' },
- { label: '10+ Industries', sub: 'Hospitality · Security · Healthcare', accent: '#8891C7' },
+ { label: 'UAE Access', sub: 'YS Lootah Robotics', accent: '#e7e7e7' },
+ { label: 'Unitree', sub: 'Quadruped · Humanoid', accent: '#5e5e5e' },
+ { label: 'Pudu Robotics', sub: 'Service · Delivery · Cleaning', accent: '#a8a8a8' },
+ { label: 'Dubai · UAE', sub: 'Sales · Demo · Configure', accent: '#e7e7e7' },
+ { label: 'Showroom', sub: 'City Bay Business Center', accent: '#5e5e5e' },
+ { label: '10+ Industries', sub: 'Hospitality · Security · Healthcare', accent: '#a8a8a8' },
];
export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: Item[]; speed?: number }) {
@@ -28,8 +28,8 @@ export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: It
maskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',
padding: '1.25rem 0',
- borderTop: '1px solid rgba(39, 63, 148,0.12)',
- borderBottom: '1px solid rgba(39, 63, 148,0.12)',
+ borderTop: '1px solid rgba(94, 94, 94, 0.12)',
+ borderBottom: '1px solid rgba(94, 94, 94, 0.12)',
background:
'linear-gradient(180deg, rgba(15, 12, 8,0.4), rgba(5, 5, 5,0.6))',
}}
@@ -59,8 +59,8 @@ export function MarqueeStrip({ items = DEFAULT_ITEMS, speed = 38 }: { items?: It
width: 8,
height: 8,
borderRadius: 999,
- background: it.accent ?? '#DEE0F0',
- boxShadow: `0 0 12px ${it.accent ?? '#DEE0F0'}88`,
+ background: it.accent ?? '#e7e7e7',
+ boxShadow: `0 0 12px ${it.accent ?? '#e7e7e7'}88`,
}}
/>
{it.sub}
diff --git a/src/components/robotics/ProductFilterTabs.tsx b/src/components/robotics/ProductFilterTabs.tsx
index 79f09a0..c2ffc96 100644
--- a/src/components/robotics/ProductFilterTabs.tsx
+++ b/src/components/robotics/ProductFilterTabs.tsx
@@ -15,7 +15,7 @@ export function ProductFilterTabs({ tabs, activeId, onChange, title }: Props) {
return (
{title && (
-
+
{title}
)}
@@ -39,9 +39,9 @@ export function ProductFilterTabs({ tabs, activeId, onChange, title }: Props) {
border: '1px solid',
cursor: 'pointer',
transition: 'all 0.2s',
- background: active ? (t.accent ? `${t.accent}1F` : 'rgba(39, 63, 148,0.18)') : 'rgba(15, 12, 8,0.55)',
- borderColor: active ? (t.accent ?? '#DEE0F0') : 'rgba(39, 63, 148,0.2)',
- color: active ? (t.accent ?? '#DEE0F0') : '#DEE0F0',
+ background: active ? (t.accent ? `${t.accent}1F` : 'rgba(94, 94, 94, 0.18)') : 'rgba(15, 12, 8,0.55)',
+ borderColor: active ? (t.accent ?? '#e7e7e7') : 'rgba(94, 94, 94, 0.2)',
+ color: active ? (t.accent ?? '#e7e7e7') : '#e7e7e7',
}}
>
{t.label}
diff --git a/src/components/robotics/ProductGallery.tsx b/src/components/robotics/ProductGallery.tsx
index faae35d..cac0a13 100644
--- a/src/components/robotics/ProductGallery.tsx
+++ b/src/components/robotics/ProductGallery.tsx
@@ -22,7 +22,7 @@ export function ProductGallery({ images, accent }: Props) {
overflow: 'hidden',
background:
`radial-gradient(ellipse 70% 60% at 50% 50%, ${accent}33, transparent 60%), linear-gradient(180deg, rgba(15, 12, 8,0.7), rgba(5, 5, 5,0.95))`,
- border: '1px solid rgba(39, 63, 148,0.18)',
+ border: '1px solid rgba(94, 94, 94, 0.18)',
boxShadow: '0 30px 100px rgba(0, 0, 0,0.6)',
}}
>
@@ -32,7 +32,7 @@ export function ProductGallery({ images, accent }: Props) {
position: 'absolute',
inset: 0,
background:
- 'linear-gradient(rgba(39, 63, 148,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 63, 148,0.05) 1px, transparent 1px)',
+ 'linear-gradient(rgba(94, 94, 94, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 94, 94, 0.05) 1px, transparent 1px)',
backgroundSize: '40px 40px',
maskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
WebkitMaskImage: 'radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)',
@@ -64,7 +64,7 @@ export function ProductGallery({ images, accent }: Props) {
overflow: 'hidden',
cursor: 'pointer',
background: 'rgba(15, 12, 8,0.6)',
- border: `1px solid ${idx === active ? accent : 'rgba(39, 63, 148,0.2)'}`,
+ border: `1px solid ${idx === active ? accent : 'rgba(94, 94, 94, 0.2)'}`,
padding: 4,
transition: 'all 0.2s',
}}
diff --git a/src/components/robotics/ProductSpecTable.tsx b/src/components/robotics/ProductSpecTable.tsx
index d51e59b..fe2f118 100644
--- a/src/components/robotics/ProductSpecTable.tsx
+++ b/src/components/robotics/ProductSpecTable.tsx
@@ -4,24 +4,24 @@ import type { RobotSpec } from '@/data/robots';
export function ProductSpecTable({ specs }: { specs: RobotSpec[] }) {
return (
-
+
{specs.map((s) => (
-
+
{s.label}
- {s.value}
+ {s.value}
))}
diff --git a/src/components/robotics/RobotCategoryGrid.tsx b/src/components/robotics/RobotCategoryGrid.tsx
index c0619bc..b208fb5 100644
--- a/src/components/robotics/RobotCategoryGrid.tsx
+++ b/src/components/robotics/RobotCategoryGrid.tsx
@@ -7,49 +7,49 @@ const CATEGORY_META: { id: RobotCategory; description: string; accent: string; i
{
id: 'humanoid',
description: 'Bipedal robots for events, education, hospitality, and research.',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
iconPath: 'M12 2a4 4 0 0 1 4 4v2h-8V6a4 4 0 0 1 4-4Zm-6 8h12v4l-2 2v6h-3v-5h-2v5H8v-6l-2-2v-4Z',
},
{
id: 'quadruped',
description: 'Four-legged robots for inspection, security, and field operations.',
- accent: '#273F94',
+ accent: '#5e5e5e',
iconPath: 'M3 11l3-3h4l2-2 2 2h4l3 3v3l-2 1v3h-3v-3h-3l-1 2-1-2H8v3H5v-3l-2-1v-3Z',
},
{
id: 'service',
description: 'Customer-facing robots that greet, guide, and assist.',
- accent: '#8891C7',
+ accent: '#a8a8a8',
iconPath: 'M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5Zm-7 17a7 7 0 0 1 14 0v3H5v-3Z',
},
{
id: 'delivery',
description: 'Autonomous delivery for restaurants, hotels, and back-of-house.',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
iconPath: 'M3 6h11v9H3V6Zm14 3h3l2 3v3h-2a2 2 0 1 1-4 0h-1V9h2ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm12 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z',
},
{
id: 'hospitality',
description: 'Premium hospitality robotics for hotels, resorts, and venues.',
- accent: '#8891C7',
+ accent: '#a8a8a8',
iconPath: 'M4 7h16v3H4V7Zm0 5h16v8h-3v-3H7v3H4v-8Z',
},
{
id: 'cleaning',
description: 'Commercial cleaning robots for malls, airports, and offices.',
- accent: '#273F94',
+ accent: '#5e5e5e',
iconPath: 'M5 4h6v8H5V4Zm0 10h6v2H5v-2Zm-2 4h10v3H3v-3Zm12-14h3l3 9v9h-3v-7h-3V4Z',
},
{
id: 'commercial',
description: 'Commercial automation for warehouses, sites, and facilities.',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
iconPath: 'M3 21V8l9-5 9 5v13h-6v-6h-6v6H3Z',
},
{
id: 'inspection',
description: 'Inspection robots for energy, utilities, and industrial sites.',
- accent: '#273F94',
+ accent: '#5e5e5e',
iconPath: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z',
},
];
@@ -73,7 +73,7 @@ export function RobotCategoryGrid() {
style={{
padding: '1.5rem',
textDecoration: 'none',
- color: '#FBFBFD',
+ color: '#fcfcfc',
display: 'flex',
flexDirection: 'column',
gap: '0.875rem',
@@ -102,7 +102,7 @@ export function RobotCategoryGrid() {
{count} models
-
+
{cat.description}
diff --git a/src/components/robotics/RobotProductCard.tsx b/src/components/robotics/RobotProductCard.tsx
index 0ab7fd5..056a33a 100644
--- a/src/components/robotics/RobotProductCard.tsx
+++ b/src/components/robotics/RobotProductCard.tsx
@@ -19,7 +19,7 @@ export function RobotProductCard({ robot, priority = false }: Props) {
display: 'flex',
flexDirection: 'column',
height: '100%',
- color: '#FBFBFD',
+ color: '#fcfcfc',
}}
>
-
-
+
{robot.shortDescription}
@@ -118,10 +118,10 @@ export function RobotProductCard({ robot, priority = false }: Props) {
key={u}
style={{
fontSize: '0.7rem',
- color: '#8891C7',
+ color: '#a8a8a8',
padding: '0.2rem 0.5rem',
borderRadius: 999,
- border: '1px solid rgba(39, 63, 148,0.18)',
+ border: '1px solid rgba(94, 94, 94, 0.18)',
background: 'rgba(15, 12, 8,0.5)',
letterSpacing: '0.04em',
}}
@@ -135,7 +135,7 @@ export function RobotProductCard({ robot, priority = false }: Props) {
style={{
marginTop: 'auto',
paddingTop: '0.75rem',
- borderTop: '1px solid rgba(39, 63, 148,0.1)',
+ borderTop: '1px solid rgba(94, 94, 94, 0.1)',
display: 'flex',
flexWrap: 'wrap',
gap: '0.4rem',
@@ -153,15 +153,15 @@ export function RobotProductCard({ robot, priority = false }: Props) {
gap: '0.4rem',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'linear-gradient(135deg, rgba(80, 110, 255, 0.32), rgba(40, 55, 145, 0.85))',
- border: '1px solid rgba(120, 140, 255, 0.55)',
+ background: 'linear-gradient(135deg, rgba(168, 168, 168, 0.32), rgba(93, 93, 93, 0.85))',
+ border: '1px solid rgba(188, 188, 188, 0.55)',
color: '#FFFFFF',
fontSize: '0.72rem',
fontWeight: 700,
letterSpacing: '0.12em',
textTransform: 'uppercase',
textDecoration: 'none',
- boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(74, 102, 216, 0.22)',
+ boxShadow: '0 6px 14px rgba(0, 0, 0, 0.35), 0 0 14px rgba(145, 145, 145, 0.22)',
}}
>
View details
@@ -176,9 +176,9 @@ export function RobotProductCard({ robot, priority = false }: Props) {
justifyContent: 'center',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'rgba(20, 19, 26, 0.6)',
- border: '1px solid rgba(222, 224, 240, 0.14)',
- color: '#DEE0F0',
+ background: 'rgba(23, 23, 23, 0.6)',
+ border: '1px solid rgba(231, 231, 231, 0.14)',
+ color: '#e7e7e7',
fontSize: '0.72rem',
fontWeight: 600,
letterSpacing: '0.1em',
@@ -198,9 +198,9 @@ export function RobotProductCard({ robot, priority = false }: Props) {
justifyContent: 'center',
padding: '0.55rem 0.75rem',
borderRadius: 10,
- background: 'rgba(20, 19, 26, 0.6)',
- border: '1px solid rgba(222, 224, 240, 0.14)',
- color: '#DEE0F0',
+ background: 'rgba(23, 23, 23, 0.6)',
+ border: '1px solid rgba(231, 231, 231, 0.14)',
+ color: '#e7e7e7',
fontSize: '0.72rem',
fontWeight: 600,
letterSpacing: '0.1em',
diff --git a/src/components/robotics/WhyUs.tsx b/src/components/robotics/WhyUs.tsx
index 5cda0d9..b42bc87 100644
--- a/src/components/robotics/WhyUs.tsx
+++ b/src/components/robotics/WhyUs.tsx
@@ -4,25 +4,25 @@ const REASONS = [
{
title: 'UAE robotics portfolio',
body: 'Selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics for hospitality, security, education, and industry.',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'M3 3h7v7H3V3Zm0 11h7v7H3v-7Zm11-11h7v7h-7V3Zm0 11h7v7h-7v-7Z',
},
{
title: 'Dubai sales and support',
body: 'A local Dubai team manages your inquiry, demo, deployment, and on-the-ground support not just a website with a contact form.',
- accent: '#273F94',
+ accent: '#5e5e5e',
icon: 'M12 2 2 7v6c0 5 4 9 10 11 6-2 10-6 10-11V7l-10-5Z',
},
{
title: 'Custom configuration',
body: 'Configure persona, attire, and accessories for humanoid robots visualize your deployment before you order with our 3D configurator.',
- accent: '#8891C7',
+ accent: '#a8a8a8',
icon: 'M12 4a4 4 0 0 1 4 4v1h5v6h-5v1a4 4 0 0 1-8 0v-1H3V9h5V8a4 4 0 0 1 4-4Z',
},
{
title: 'End-to-end deployment',
body: 'From procurement and configuration to delivery, installation, training, and ongoing support we handle the full lifecycle.',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'M3 12h4l3-7 4 14 3-7h4',
},
];
@@ -55,7 +55,7 @@ export function WhyUs() {
{r.title}
- {r.body}
+ {r.body}
))}
diff --git a/src/components/sections/robotics-scroll-showcase.tsx b/src/components/sections/robotics-scroll-showcase.tsx
index 01b027b..78de26d 100644
--- a/src/components/sections/robotics-scroll-showcase.tsx
+++ b/src/components/sections/robotics-scroll-showcase.tsx
@@ -17,21 +17,21 @@ const SHOWROOM_ROBOTS = [
slug: 'unitree-g1',
image: '/images/robots/unitree-g1.webp',
category: 'Humanoid',
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
},
{
name: 'Unitree Go2',
slug: 'unitree-go2',
image: '/images/robots/unitree-go2.webp',
category: 'Quadruped',
- accent: '#D7DBEA',
+ accent: '#e1e1e1',
},
{
name: 'Pudu BellaBot',
slug: 'pudu-bellabot',
image: '/images/robots/pudu-bellabot.webp',
category: 'Delivery',
- accent: '#8891C7',
+ accent: '#a8a8a8',
},
];
@@ -50,28 +50,28 @@ export function RoboticsScrollShowcase() {
position: 'relative',
overflow: 'hidden',
background:
- 'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(39,63,148,0.18), transparent 60%)',
+ 'radial-gradient(ellipse 60% 50% at 50% 0%, rgba(94, 94, 94, 0.18), transparent 60%)',
}}
>
-
Advanced robotics.
-
+
UAE access.
-
+
Built for Dubai's next generation of automation.
-
+
Explore selected Unitree and Pudu Robotics solutions through an immersive showroom experience built for UAE businesses, venues, and innovators.
@@ -87,8 +87,8 @@ function ConsoleInterior() {
return (
{/* left sidebar category rail */}
-
-
+
+
Categories
{TABS.map((t) => (
@@ -97,16 +97,16 @@ function ConsoleInterior() {
type="button"
className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 text-left text-xs font-semibold uppercase tracking-[0.12em] transition ${
t.active
- ? 'border-[#DEE0F0]/40 bg-[#273F94]/30 text-[#DEE0F0]'
- : 'border-transparent text-[#D7DBEA]/80 hover:bg-white/[0.04]'
+ ? 'border-[#e7e7e7]/40 bg-[#5e5e5e]/30 text-[#e7e7e7]'
+ : 'border-transparent text-[#e1e1e1]/80 hover:bg-white/[0.04]'
}`}
>
-
YS Lootah Robotics
+
+ YS Lootah Robotics
In Tech We Innovate
@@ -114,7 +114,7 @@ function ConsoleInterior() {
{/* main display */}
{/* top breadcrumb */}
-
+
Robots · UAE Portfolio
11 Models · 2 Brands · Dubai
@@ -124,12 +124,12 @@ function ConsoleInterior() {
{SHOWROOM_ROBOTS.map((r) => (
{r.category}
-
+
Available in UAE
{r.name}
@@ -157,30 +157,30 @@ function ConsoleInterior() {
{/* CTA strip */}
-
+
Book demo
Configure solution
Request UAE quotation
-
diff --git a/src/components/sections/robotics-spline-showcase.tsx b/src/components/sections/robotics-spline-showcase.tsx
index 24c28e4..5786f86 100644
--- a/src/components/sections/robotics-spline-showcase.tsx
+++ b/src/components/sections/robotics-spline-showcase.tsx
@@ -18,7 +18,7 @@ export function RoboticsSplineShowcase() {
position: 'relative',
overflow: 'hidden',
background: '#221F20',
- color: '#FBFBFD',
+ color: '#fcfcfc',
padding: 'clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem)',
}}
>
@@ -28,7 +28,7 @@ export function RoboticsSplineShowcase() {
position: 'absolute',
inset: 0,
background:
- 'radial-gradient(circle at 70% 30%, rgba(39,63,148,0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(222,224,240,0.10), transparent 36%)',
+ 'radial-gradient(circle at 70% 30%, rgba(94, 94, 94, 0.42), transparent 42%), radial-gradient(circle at 20% 80%, rgba(231, 231, 231, 0.10), transparent 36%)',
pointerEvents: 'none',
}}
/>
@@ -46,7 +46,7 @@ export function RoboticsSplineShowcase() {
/>
-
+
@@ -71,16 +71,16 @@ export function RoboticsSplineShowcase() {
marginBottom: '1.5rem',
padding: '0.5rem 1rem',
borderRadius: 999,
- border: '1px solid rgba(222,224,240,0.25)',
- background: 'rgba(39,63,148,0.20)',
+ border: '1px solid rgba(231, 231, 231, 0.25)',
+ background: 'rgba(94, 94, 94, 0.20)',
fontSize: '0.65rem',
fontWeight: 700,
letterSpacing: '0.3em',
textTransform: 'uppercase',
- color: '#DEE0F0',
+ color: '#e7e7e7',
}}
>
-
+
Robotics Catalog · UAE
@@ -91,7 +91,7 @@ export function RoboticsSplineShowcase() {
fontWeight: 600,
lineHeight: 1.05,
letterSpacing: '-0.035em',
- color: '#FBFBFD',
+ color: '#fcfcfc',
overflowWrap: 'break-word',
wordBreak: 'normal',
hyphens: 'manual',
@@ -102,12 +102,12 @@ export function RoboticsSplineShowcase() {
style={{
display: 'inline-block',
background:
- 'linear-gradient(110deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%)',
+ 'linear-gradient(110deg, #FFFFFF 0%, #e7e7e7 50%, #a8a8a8 100%)',
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent',
color: 'transparent',
- filter: 'drop-shadow(0 4px 18px rgba(58,85,196,0.32))',
+ filter: 'drop-shadow(0 4px 18px rgba(127, 127, 127, 0.32))',
}}
>
Robotics Solutions.
@@ -121,7 +121,7 @@ export function RoboticsSplineShowcase() {
maxWidth: 560,
fontSize: 'clamp(0.95rem, 1.6vw, 1.1rem)',
lineHeight: 1.7,
- color: 'rgba(222,224,240,0.82)',
+ color: 'rgba(231, 231, 231, 0.82)',
}}
>
Browse selected Unitree and Pudu Robotics solutions available in the UAE through YS Lootah Robotics — humanoid, quadruped, service, delivery, and cleaning robots ready for Dubai businesses.
@@ -144,14 +144,14 @@ export function RoboticsSplineShowcase() {
gap: '0.4rem',
padding: '0.85rem 1.5rem',
borderRadius: 999,
- background: 'linear-gradient(135deg, #3a55c4 0%, #273F94 55%, #1a2e6e 100%)',
- color: '#FBFBFD',
+ background: 'linear-gradient(135deg, #7f7f7f 0%, #5e5e5e 55%, #444444 100%)',
+ color: '#fcfcfc',
fontSize: '0.78rem',
fontWeight: 700,
letterSpacing: '0.14em',
textTransform: 'uppercase',
textDecoration: 'none',
- boxShadow: '0 14px 40px rgba(39,63,148,0.5)',
+ boxShadow: '0 14px 40px rgba(94, 94, 94, 0.5)',
whiteSpace: 'nowrap',
}}
>
@@ -167,9 +167,9 @@ export function RoboticsSplineShowcase() {
gap: '0.4rem',
padding: '0.85rem 1.5rem',
borderRadius: 999,
- border: '1px solid rgba(222,224,240,0.3)',
+ border: '1px solid rgba(231, 231, 231, 0.3)',
background: 'rgba(255,255,255,0.04)',
- color: '#DEE0F0',
+ color: '#e7e7e7',
fontSize: '0.78rem',
fontWeight: 700,
letterSpacing: '0.14em',
@@ -191,9 +191,9 @@ export function RoboticsSplineShowcase() {
gap: '0.4rem',
padding: '0.85rem 1.5rem',
borderRadius: 999,
- border: '1px solid rgba(136,145,199,0.5)',
+ border: '1px solid rgba(168, 168, 168, 0.5)',
background: 'transparent',
- color: '#D7DBEA',
+ color: '#e1e1e1',
fontSize: '0.78rem',
fontWeight: 700,
letterSpacing: '0.14em',
@@ -226,15 +226,15 @@ export function RoboticsSplineShowcase() {
style={{
padding: '0.875rem 1rem',
borderRadius: 16,
- border: '1px solid rgba(222,224,240,0.12)',
+ border: '1px solid rgba(231, 231, 231, 0.12)',
background: 'rgba(255,255,255,0.045)',
backdropFilter: 'blur(12px)',
minWidth: 0,
}}
>
-
-
{item.label}
-
+
+
{item.label}
+
{item.value}
@@ -249,7 +249,7 @@ export function RoboticsSplineShowcase() {
fontWeight: 600,
letterSpacing: '0.32em',
textTransform: 'uppercase',
- color: '#D7DBEA',
+ color: '#e1e1e1',
}}
>
In Tech We Innovate · In Trust We Lead
@@ -271,9 +271,9 @@ export function RoboticsSplineShowcase() {
position: 'absolute',
inset: '1.25rem',
borderRadius: '2rem',
- border: '1px solid rgba(222,224,240,0.15)',
- background: 'rgba(39,63,148,0.10)',
- boxShadow: 'inset 0 0 80px rgba(222,224,240,0.05)',
+ border: '1px solid rgba(231, 231, 231, 0.15)',
+ background: 'rgba(94, 94, 94, 0.10)',
+ boxShadow: 'inset 0 0 80px rgba(231, 231, 231, 0.05)',
backdropFilter: 'blur(14px)',
pointerEvents: 'none',
}}
@@ -286,9 +286,9 @@ export function RoboticsSplineShowcase() {
zIndex: 10,
padding: '0.5rem 0.9rem',
borderRadius: 999,
- border: '1px solid rgba(222,224,240,0.22)',
+ border: '1px solid rgba(231, 231, 231, 0.22)',
background: 'rgba(34,31,32,0.72)',
- color: '#DEE0F0',
+ color: '#e7e7e7',
fontSize: '0.6rem',
fontWeight: 700,
letterSpacing: '0.26em',
@@ -306,15 +306,15 @@ export function RoboticsSplineShowcase() {
zIndex: 10,
padding: '0.85rem 1.1rem',
borderRadius: 16,
- border: '1px solid rgba(222,224,240,0.15)',
+ border: '1px solid rgba(231, 231, 231, 0.15)',
background: 'rgba(34,31,32,0.78)',
backdropFilter: 'blur(12px)',
}}
>
-
+
YS Lootah Robotics
-
diff --git a/src/components/ui/CursorSpotlight.tsx b/src/components/ui/CursorSpotlight.tsx
index 5f58470..d76cfd2 100644
--- a/src/components/ui/CursorSpotlight.tsx
+++ b/src/components/ui/CursorSpotlight.tsx
@@ -8,7 +8,7 @@ type Props = {
className?: string;
};
-export function CursorSpotlight({ color = 'rgba(39, 63, 148, 0.18)', size = 520, className = '' }: Props) {
+export function CursorSpotlight({ color = 'rgba(94, 94, 94, 0.18)', size = 520, className = '' }: Props) {
const ref = useRef
(null);
const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
const [enabled, setEnabled] = useState(false);
diff --git a/src/components/ui/GlassPanel.tsx b/src/components/ui/GlassPanel.tsx
index 64a9240..7e95cc8 100644
--- a/src/components/ui/GlassPanel.tsx
+++ b/src/components/ui/GlassPanel.tsx
@@ -16,7 +16,7 @@ export function GlassPanel({ className = '', children, glow = false, style }: Pr
style={{
borderRadius: '1.25rem',
padding: '1.5rem',
- boxShadow: glow ? '0 12px 60px rgba(0, 0, 0,0.5), 0 0 60px rgba(39, 63, 148,0.18)' : undefined,
+ boxShadow: glow ? '0 12px 60px rgba(0, 0, 0,0.5), 0 0 60px rgba(94, 94, 94, 0.18)' : undefined,
...style,
}}
>
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index ef7351e..c8b2621 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
>(({ className, ...props }, ref) => (
-
+
));
CardDescription.displayName = 'CardDescription';
diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx
index 5d0c0b3..67ecfd2 100644
--- a/src/components/ui/container-scroll-animation.tsx
+++ b/src/components/ui/container-scroll-animation.tsx
@@ -92,40 +92,40 @@ function DisplayFrame({
scale,
y: translate,
boxShadow:
- '0 0 0 1px rgba(222,224,240,0.08), 0 40px 120px rgba(0,0,0,0.65), 0 0 80px rgba(39,63,148,0.28), inset 0 1px 0 rgba(222,224,240,0.08)',
+ '0 0 0 1px rgba(231, 231, 231, 0.08), 0 40px 120px rgba(0,0,0,0.65), 0 0 80px rgba(94, 94, 94, 0.28), inset 0 1px 0 rgba(231, 231, 231, 0.08)',
}}
className={cn(
- 'relative mx-auto w-full max-w-6xl rounded-[30px] border border-[#DEE0F0]/15 p-2 md:p-4',
- 'bg-[linear-gradient(180deg,rgba(28,27,33,0.92)_0%,rgba(20,18,22,0.96)_55%,rgba(8,8,10,0.98)_100%)]',
+ 'relative mx-auto w-full max-w-6xl rounded-[30px] border border-[#e7e7e7]/15 p-2 md:p-4',
+ 'bg-[linear-gradient(180deg,rgba(30, 30, 30, 0.92)_0%,rgba(20, 20, 20, 0.96)_55%,rgba(9, 9, 9, 0.98)_100%)]',
'backdrop-blur-2xl'
)}
>
{/* outer frame chrome */}
-
+
{/* corner taps */}
{/* inner content stage */}
-
+
{/* grid floor + blue glow */}
{/* status bar */}
-
+
-
-
+
YS Lootah Robotics · Showroom Console
-
+
Live · UAE
@@ -148,7 +148,7 @@ function CornerTaps() {
key={pos}
aria-hidden
className={cn(
- 'pointer-events-none absolute h-3 w-3 rounded-[3px] border border-[#DEE0F0]/35 bg-[#0a0a0c]/60',
+ 'pointer-events-none absolute h-3 w-3 rounded-[3px] border border-[#e7e7e7]/35 bg-[#0b0b0b]/60',
pos
)}
/>
diff --git a/src/components/ui/spline-scene.tsx b/src/components/ui/spline-scene.tsx
index 408d7eb..edbb79f 100644
--- a/src/components/ui/spline-scene.tsx
+++ b/src/components/ui/spline-scene.tsx
@@ -16,9 +16,9 @@ export function SplineScene({ scene, className }: SplineSceneProps) {
fallback={
}
diff --git a/src/components/ui/spotlight.tsx b/src/components/ui/spotlight.tsx
index e17df3b..014498c 100644
--- a/src/components/ui/spotlight.tsx
+++ b/src/components/ui/spotlight.tsx
@@ -68,7 +68,7 @@ export function Spotlight({
ref={containerRef}
className={cn(
'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_75%)] blur-2xl transition-opacity duration-300',
- 'from-[#DEE0F0]/45 via-[#273F94]/35 to-transparent',
+ 'from-[#e7e7e7]/45 via-[#5e5e5e]/35 to-transparent',
isHovered ? 'opacity-100' : 'opacity-0',
className
)}
diff --git a/src/data/accessories.ts b/src/data/accessories.ts
index 5dd6871..eb06196 100644
--- a/src/data/accessories.ts
+++ b/src/data/accessories.ts
@@ -69,9 +69,9 @@ export const GROUP_LABELS: Record
= {
'iot-integration': 'IoT & Building Integration',
};
-const GOLD_CHAMPAGNE = '#DEE0F0';
-const GOLD_BRAND = '#273F94';
-const GOLD_BRONZE = '#8891C7';
+const GOLD_CHAMPAGNE = '#e7e7e7';
+const GOLD_BRAND = '#5e5e5e';
+const GOLD_BRONZE = '#a8a8a8';
export const ACCESSORIES: Accessory[] = [
// ============ UNITREE DEXTEROUS HANDS ============
diff --git a/src/data/industries.ts b/src/data/industries.ts
index 008c37b..1988ea2 100644
--- a/src/data/industries.ts
+++ b/src/data/industries.ts
@@ -23,7 +23,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Service and delivery robots that greet, deliver, and assist around the clock.',
benefit: 'Consistent guest experience, lower turnover impact, premium brand positioning.',
matchCategories: ['hospitality', 'service', 'delivery'],
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'hotel',
image: '/industries/cards/hospitality.webp',
imageAlt: 'Service robot delivering in a UAE hospitality venue',
@@ -36,7 +36,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Delivery robots like BellaBot and KettyBot move food fast and reliably.',
benefit: 'Faster table turns, happier staff, instagrammable brand moment.',
matchCategories: ['delivery', 'service', 'hospitality'],
- accent: '#8891C7',
+ accent: '#a8a8a8',
icon: 'utensils',
image: '/industries/cards/restaurants-cafes.webp',
imageAlt: 'Tray-runner delivery robot serving a UAE restaurant floor',
@@ -49,7 +49,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Multi-floor delivery robots and humanoid concierge experiences.',
benefit: 'Faster service, lower overhead, signature guest moments.',
matchCategories: ['delivery', 'hospitality', 'service'],
- accent: '#273F94',
+ accent: '#5e5e5e',
icon: 'hotel',
image: '/industries/cards/hotels-resorts.webp',
imageAlt: 'Multi-floor delivery robot serving hotel guests in the UAE',
@@ -62,7 +62,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Cleaning robots, service robots, and humanoid activations for retail floors.',
benefit: 'Cleaner venues, memorable customer experiences, modern positioning.',
matchCategories: ['cleaning', 'service', 'humanoid'],
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'shopping-bag',
image: '/industries/cards/shopping-malls.webp',
imageAlt: 'Service robot operating in a high-traffic UAE retail environment',
@@ -75,7 +75,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Autonomous delivery robots for medications, meals, and supplies.',
benefit: 'More clinician time at the bedside, lower contamination risk, predictable logistics.',
matchCategories: ['delivery', 'service'],
- accent: '#273F94',
+ accent: '#5e5e5e',
icon: 'heart-pulse',
image: '/industries/cards/healthcare.webp',
imageAlt: 'Autonomous delivery robot for UAE healthcare and care facilities',
@@ -88,7 +88,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Unitree humanoids and quadrupeds for STEM labs and innovation programs.',
benefit: 'Future-ready students, signature programs, and stronger STEM outcomes.',
matchCategories: ['humanoid', 'service'],
- accent: '#8891C7',
+ accent: '#a8a8a8',
icon: 'graduation-cap',
image: '/images/robots/unitree-h1.webp',
imageAlt: 'Humanoid research robot in a UAE STEM lab',
@@ -101,7 +101,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Quadruped robots like Unitree Go2 and B2 patrol autonomously.',
benefit: 'Continuous coverage, audit trails, and consistent perimeter monitoring.',
matchCategories: ['quadruped', 'commercial'],
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'shield',
image: '/industries/cards/security-surveillance.webp',
imageAlt: 'Quadruped robot on autonomous security patrol at a UAE facility',
@@ -114,7 +114,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Quadruped inspection robots and autonomous delivery platforms.',
benefit: 'Higher throughput, fewer errors, and accurate facility monitoring.',
matchCategories: ['quadruped', 'delivery', 'commercial'],
- accent: '#273F94',
+ accent: '#5e5e5e',
icon: 'warehouse',
image: '/industries/cards/warehouses-logistics.webp',
imageAlt: 'Industrial robot for UAE warehouses and logistics operations',
@@ -127,7 +127,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'Humanoid and quadruped robot showcases configured for your brand.',
benefit: 'Press coverage, viral content, and unmistakable premium positioning.',
matchCategories: ['humanoid', 'quadruped'],
- accent: '#8891C7',
+ accent: '#a8a8a8',
icon: 'sparkles',
image: '/industries/cards/events.webp',
imageAlt: 'Robotics activation for UAE live events and brand experiences',
@@ -140,7 +140,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'A multi-robot fleet across cleaning, delivery, and patrol functions.',
benefit: 'Single operational system, predictable costs, future-ready facility.',
matchCategories: ['cleaning', 'commercial', 'delivery'],
- accent: '#DEE0F0',
+ accent: '#e7e7e7',
icon: 'building',
image: '/industries/cards/smart-buildings.webp',
imageAlt: 'Cleaning robot in a modern UAE smart office building',
@@ -153,7 +153,7 @@ export const INDUSTRIES: Industry[] = [
solution: 'A curated multi-brand robotics portfolio with full local support.',
benefit: 'Visible innovation leadership and a UAE-supported deployment model.',
matchCategories: ['humanoid', 'quadruped', 'service'],
- accent: '#273F94',
+ accent: '#5e5e5e',
icon: 'landmark',
image: '/industries/unitree/utility-room.webp',
imageAlt: 'Quadruped robots deployed for UAE civic and emergency services',
diff --git a/src/data/robots.ts b/src/data/robots.ts
index 008a13b..ff7354e 100644
--- a/src/data/robots.ts
+++ b/src/data/robots.ts
@@ -36,9 +36,9 @@ export interface Robot {
configureSlug?: string;
}
-const GOLD_CHAMPAGNE = '#DEE0F0';
-const GOLD_BRAND = '#273F94';
-const GOLD_BRONZE = '#8891C7';
+const GOLD_CHAMPAGNE = '#e7e7e7';
+const GOLD_BRAND = '#5e5e5e';
+const GOLD_BRONZE = '#a8a8a8';
export const BRANDS: Record = {
unitree: {
@@ -1032,6 +1032,204 @@ export const ROBOTS: Robot[] = [
accent: GOLD_BRAND,
officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
},
+ {
+ id: 'pudu-cc1-pro',
+ slug: 'pudu-cc1-pro',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU CC1 Pro',
+ tagline: 'Upgraded 4-in-1 commercial cleaning robot for demanding, high-traffic venues.',
+ category: 'cleaning',
+ categories: ['cleaning', 'commercial'],
+ shortDescription:
+ 'An enhanced sweep, scrub, vacuum and mop cleaning robot with stronger suction and longer autonomy, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'CC1 Pro builds on the CC1 platform with higher suction, extended runtime and refined navigation for malls, airports, hotels and offices. Visual and laser SLAM, breakpoint resume, auto water and detergent docking, plus digital reporting.',
+ features: [
+ '4-in-1: sweep, scrub, vacuum, mop',
+ 'High-power suction',
+ 'Visual and Laser SLAM',
+ 'Breakpoint resume cleaning',
+ 'Auto water, detergent and charging dock',
+ 'Digital reports and real-time alerts',
+ ],
+ useCases: ['Shopping malls', 'Airports and transport hubs', 'Hotels and resorts', 'Corporate offices'],
+ specs: [
+ { label: 'Modes', value: 'Sweep, scrub, mop, vacuum' },
+ { label: 'Class', value: 'Pro commercial cleaner' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-cc1-pro.webp',
+ imageType: 'photo',
+ accent: GOLD_BRONZE,
+ officialUrl: 'https://www.pudurobotics.com/en/products/puduCC1',
+ },
+ {
+ id: 'pudu-mt1-max',
+ slug: 'pudu-mt1-max',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU MT1 Max',
+ tagline: 'Large-area AI robotic sweeper for industrial floors and outdoor walkways.',
+ category: 'cleaning',
+ categories: ['cleaning', 'industrial', 'commercial'],
+ shortDescription:
+ 'A high-capacity AI sweeper for very large facilities with wide cleaning width and AI trash recognition, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'MT1 Max extends the MT1 sweeper with a larger hopper, wider cleaning path and extended runtime for industrial floors, campuses and transport hubs. VSLAM, Marker and Lidar SLAM with elevator and e-gate IoT.',
+ features: [
+ 'AI trash recognition cameras',
+ 'Wide-path dual-disc brush',
+ 'Large-capacity hopper',
+ 'Extended runtime and fast charge',
+ 'VSLAM, Marker and Lidar SLAM',
+ 'Elevator and e-gate IoT',
+ ],
+ useCases: ['Industrial floors', 'Large campuses', 'Outdoor walkways', 'Public transport hubs'],
+ specs: [
+ { label: 'Type', value: 'AI sweeper robot' },
+ { label: 'Coverage', value: 'Large-area' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-mt1-max.webp',
+ imageType: 'photo',
+ accent: GOLD_BRAND,
+ officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
+ },
+ {
+ id: 'pudu-mt1-vac',
+ slug: 'pudu-mt1-vac',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU MT1 Vac',
+ tagline: 'AI vacuum sweeper for fine dust and debris across large commercial spaces.',
+ category: 'cleaning',
+ categories: ['cleaning', 'commercial'],
+ shortDescription:
+ 'A vacuum-focused variant of the MT1 sweeper for fine dust and debris pickup, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'MT1 Vac pairs AI navigation with strong vacuum pickup for offices, malls and transport hubs, keeping large floors dust-free with autonomous, self-docking operation.',
+ features: [
+ 'Strong vacuum pickup',
+ 'AI trash recognition',
+ 'Autonomous, self-docking',
+ 'VSLAM, Marker and Lidar SLAM',
+ 'Extended runtime and fast charge',
+ 'Elevator and e-gate IoT',
+ ],
+ useCases: ['Malls and retail', 'Corporate offices', 'Transport hubs', 'Large facilities'],
+ specs: [
+ { label: 'Type', value: 'AI vacuum sweeper' },
+ { label: 'Focus', value: 'Fine dust and debris' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-mt1-vac.webp',
+ imageType: 'photo',
+ accent: GOLD_BRONZE,
+ officialUrl: 'https://www.pudurobotics.com/en/products/mt1',
+ },
+ {
+ id: 'pudu-t600',
+ slug: 'pudu-t600',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU T600',
+ tagline: 'Industrial AMR for flexible material transport across factories and warehouses.',
+ category: 'industrial',
+ categories: ['industrial', 'delivery', 'commercial'],
+ shortDescription:
+ 'A robust industrial autonomous mobile robot for material handling with modular attachments, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'PUDU T600 moves materials autonomously across manufacturing and warehouse floors with dual SLAM navigation, autonomous and follow modes, and modular load attachments for a wide range of payloads.',
+ features: [
+ 'Dual VSLAM and Lidar SLAM',
+ 'Autonomous and follow modes',
+ 'Modular load attachments',
+ 'Long runtime and fast charge',
+ 'Threshold and slope handling',
+ 'IoT with gates and elevators',
+ ],
+ useCases: ['Warehouses and factories', 'Manufacturing lines', 'Industrial logistics', 'Back-of-house operations'],
+ specs: [
+ { label: 'Type', value: 'Industrial AMR' },
+ { label: 'Transport', value: 'Modular payloads' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-t600.webp',
+ imageType: 'photo',
+ accent: GOLD_BRAND,
+ officialUrl: 'https://www.pudurobotics.com/en/products',
+ },
+ {
+ id: 'pudu-t600-underride',
+ slug: 'pudu-t600-underride',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU T600 Underride',
+ tagline: 'Underride AMR that slides beneath carts and racks for latent material transport.',
+ category: 'industrial',
+ categories: ['industrial', 'delivery', 'commercial'],
+ shortDescription:
+ 'An underride (latent) variant of the T600 that docks beneath carts and shelves to move them autonomously, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'The T600 Underride slides under wheeled carts and racks, lifts and tows them across facilities, and returns for the next task, streamlining repetitive intralogistics with dual SLAM navigation.',
+ features: [
+ 'Low-profile underride chassis',
+ 'Autonomous cart and rack towing',
+ 'Dual VSLAM and Lidar SLAM',
+ 'High payload handling',
+ 'Long runtime and fast charge',
+ 'IoT with gates and elevators',
+ ],
+ useCases: ['Warehouses and factories', 'Intralogistics', 'Cart and rack movement', 'Back-of-house operations'],
+ specs: [
+ { label: 'Type', value: 'Underride AMR' },
+ { label: 'Mode', value: 'Latent cart towing' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-t600-underride.webp',
+ imageType: 'photo',
+ accent: GOLD_BRAND,
+ officialUrl: 'https://www.pudurobotics.com/en/products',
+ },
+ {
+ id: 'pudu-bg1-pro',
+ slug: 'pudu-bg1-pro',
+ brand: 'pudu',
+ brandLabel: 'Pudu',
+ name: 'PUDU BG1 Pro',
+ tagline: 'Ride-on grade commercial scrubber-sweeper for very large industrial floors.',
+ category: 'cleaning',
+ categories: ['cleaning', 'industrial', 'commercial'],
+ shortDescription:
+ 'A large-format autonomous scrubber and sweeper for warehouses, factories and big-box retail, available in the UAE through YS Lootah Robotics.',
+ longDescription:
+ 'BG1 Pro combines sweeping and scrubbing in a high-throughput autonomous platform for the largest floors, with wide cleaning width, big tanks and long unattended runtime.',
+ features: [
+ 'Combined sweep and scrub',
+ 'Wide cleaning path',
+ 'Large water and recovery tanks',
+ 'Long unattended runtime',
+ 'Autonomous, self-docking',
+ 'Dual SLAM navigation',
+ ],
+ useCases: ['Warehouses and factories', 'Big-box retail', 'Airports and hubs', 'Industrial facilities'],
+ specs: [
+ { label: 'Type', value: 'Scrubber-sweeper' },
+ { label: 'Scale', value: 'Very large floors' },
+ SPEC_CONSULT,
+ SPEC_PLACEHOLDER,
+ ],
+ image: '/images/robots/pudu-bg1-pro.webp',
+ imageType: 'photo',
+ accent: GOLD_BRONZE,
+ officialUrl: 'https://www.pudurobotics.com/en/products',
+ },
];
export function getRobotBySlug(slug: string): Robot | undefined {
diff --git a/src/hooks/useUrlSync.test.ts b/src/hooks/useUrlSync.test.ts
index 66726d5..8b624ba 100644
--- a/src/hooks/useUrlSync.test.ts
+++ b/src/hooks/useUrlSync.test.ts
@@ -25,7 +25,7 @@ describe('URL Serialization', () => {
describe('serializeConfig', () => {
it('should serialize colors, persona, and payloads to base64', () => {
const encoded = serializeConfig({
- activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+ activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
activePersonaAttire: 'Emarati Kandura',
activeBody: 'basic',
activePayloads: [{ id: 'cam1', type: 'camera', position: 'head' }],
@@ -44,7 +44,7 @@ describe('URL Serialization', () => {
describe('deserializeConfig', () => {
it('should decode base64 and return valid state', () => {
const original = {
- activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+ activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
activePersonaAttire: 'Industrial Vest',
activeBody: 'edu' as const,
activePayloads: [
@@ -96,7 +96,7 @@ describe('Store integration with URL', () => {
});
it('should preserve state through serialize/deserialize cycle', () => {
- configStore.getState().setColors({ primary: '#abc123', secondary: '#def456', accent: '#789abc' });
+ configStore.getState().setColors({ primary: '#abc123', secondary: '#def456', accent: '#9a9a9a' });
configStore.getState().setPersonaAttire('Emarati Kandura');
configStore.getState().addPayload({ id: 'cam1', type: 'PTZ Camera', position: 'head' });
configStore.getState().addPayload({ id: 'light1', type: 'LED Panel', position: 'chest' });
diff --git a/src/store/useConfigStore.test.ts b/src/store/useConfigStore.test.ts
index deeae2c..3efde0b 100644
--- a/src/store/useConfigStore.test.ts
+++ b/src/store/useConfigStore.test.ts
@@ -11,8 +11,8 @@ describe('useConfigStore (vanilla)', () => {
const state = configStore.getState();
expect(state.activeColors).toEqual({
- primary: '#96a2b6',
- secondary: '#1e293b',
+ primary: '#a6a6a6',
+ secondary: '#2d2d2d',
accent: '#f59e0b',
});
expect(state.activePersonaAttire).toBe('none');
@@ -41,7 +41,7 @@ describe('useConfigStore (vanilla)', () => {
const state = configStore.getState();
expect(state.activeColors.primary).toBe('#ff0000');
- expect(state.activeColors.secondary).toBe('#1e293b');
+ expect(state.activeColors.secondary).toBe('#2d2d2d');
expect(state.activeColors.accent).toBe('#f59e0b');
});
@@ -49,13 +49,13 @@ describe('useConfigStore (vanilla)', () => {
configStore.getState().setColors({
primary: '#ff0000',
secondary: '#00ff00',
- accent: '#0000ff',
+ accent: '#808080',
});
expect(configStore.getState().activeColors).toEqual({
primary: '#ff0000',
secondary: '#00ff00',
- accent: '#0000ff',
+ accent: '#808080',
});
});
});
@@ -133,7 +133,7 @@ describe('useConfigStore (vanilla)', () => {
configStore.getState().reset();
const state = configStore.getState();
- expect(state.activeColors.primary).toBe('#96a2b6');
+ expect(state.activeColors.primary).toBe('#a6a6a6');
expect(state.activePersonaAttire).toBe('none');
expect(state.activeBody).toBe('basic');
expect(state.activePayloads).toEqual([]);
@@ -144,7 +144,7 @@ describe('useConfigStore (vanilla)', () => {
describe('hydrate', () => {
it('should hydrate state from partial config', () => {
configStore.getState().hydrate({
- activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+ activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
activePersonaAttire: 'Emarati Kandura',
});
@@ -163,7 +163,7 @@ describe('serializeConfig & deserializeConfig', () => {
it('should serialize state to base64', () => {
const state: ConfigState = {
- activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+ activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
activePersonaAttire: 'Test Attire',
activeBody: 'basic',
activePayloads: [{ id: 'p1', type: 'camera', position: 'head' }],
@@ -177,7 +177,7 @@ describe('serializeConfig & deserializeConfig', () => {
it('should deserialize base64 to state', () => {
const state: ConfigState = {
- activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#0000ff' },
+ activeColors: { primary: '#ff0000', secondary: '#00ff00', accent: '#808080' },
activePersonaAttire: 'Test Attire',
activeBody: 'basic',
activePayloads: [{ id: 'p1', type: 'camera', position: 'head' }],
@@ -206,7 +206,7 @@ describe('serializeConfig & deserializeConfig', () => {
it('should round-trip complex state correctly', () => {
const original: ConfigState = {
- activeColors: { primary: '#aabbcc', secondary: '#ddeeff', accent: '#112233' },
+ activeColors: { primary: '#bbbbbb', secondary: '#eeeeee', accent: '#222222' },
activePersonaAttire: 'Emarati Kandura',
activeBody: 'edu',
activePayloads: [
diff --git a/src/store/useConfigStore.ts b/src/store/useConfigStore.ts
index 03e9007..4660dc4 100644
--- a/src/store/useConfigStore.ts
+++ b/src/store/useConfigStore.ts
@@ -40,8 +40,8 @@ export type ConfigStore = ConfigState & ConfigActions;
// Default state values
const defaultColors: ColorConfig = {
- primary: '#96a2b6',
- secondary: '#1e293b',
+ primary: '#a6a6a6',
+ secondary: '#2d2d2d',
accent: '#f59e0b',
};
diff --git a/src/store/usePersonaStore.ts b/src/store/usePersonaStore.ts
index 9496ecd..eb257b5 100644
--- a/src/store/usePersonaStore.ts
+++ b/src/store/usePersonaStore.ts
@@ -29,25 +29,25 @@ export const DEFAULT_PERSONAS: PersonaOption[] = [
id: 'none',
label: 'Default',
description: 'Original robot appearance',
- colors: { torso: '#3b82f6', legs: '#3b82f6' },
+ colors: { torso: '#999999', legs: '#999999' },
},
{
id: 'emarati-kandura',
label: 'Emarati Kandura',
description: 'Traditional white robe attire',
- colors: { torso: '#FBFBFD', legs: '#FBFBFD' },
+ colors: { torso: '#fcfcfc', legs: '#fcfcfc' },
},
{
id: 'industrial-vest',
label: 'Industrial Vest',
description: 'High-visibility safety vest',
- colors: { torso: '#f59e0b', legs: '#3b82f6' },
+ colors: { torso: '#f59e0b', legs: '#999999' },
},
{
id: 'business-suit',
label: 'Business Suit',
description: 'Professional navy suit',
- colors: { torso: '#1e293b', legs: '#1e293b' },
+ colors: { torso: '#2d2d2d', legs: '#2d2d2d' },
},
];
@@ -175,7 +175,7 @@ export const personaStore = createStore((set, get) => ({
id,
label,
description: label,
- colors: { torso: '#3b82f6', legs: '#3b82f6' },
+ colors: { torso: '#999999', legs: '#999999' },
...(modelPath ? { modelPath } : {}),
});
}