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

feat: monochrome black & white rebrand + new Pudu robots
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source 
- Convert site from royal-blue theme to black/white monochrome (desaturate
  all blue-hued colors; keep WhatsApp green and error red)
- Swap blue circular brand logo for mono YS mark; regenerate favicon/PWA icons
- Add 6 Pudu robots (CC1 Pro, MT1 Max, MT1 Vac, T600, T600 Underride, BG1 Pro)
- Fix favicon.ico to RGBA (Next 16 Turbopack decode) and Stripe apiVersion type

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Najjar
2026-07-06 13:20:26 +04:00
co-authored by Claude Opus 4.8
parent c2490947d2
commit 873026a4a9
96 changed files with 1654 additions and 1487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/about/page.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function AboutPage() {
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.4rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
<span className="text-gradient" style={{ fontWeight: 500 }}>In Tech We Innovate. In Trust We Lead.</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
YS Lootah Robotics is part of the Yousuf Saeed Lootah Investment Group a trusted UAE technology and robotics partner helping businesses innovate, automate, and deploy intelligent robotic solutions. The UAE&apos;s dedicated destination for selected Unitree and Pudu Robotics solutions.
</p>
</div>
src/app/accessories/[slug]/page.tsx
+69 -69
View File
@@ -376,22 +376,22 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
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;
}
.acc-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
.acc-breadcrumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
.acc-breadcrumbs a:hover { color: #FFFFFF; }
.acc-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
.acc-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
.acc-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
/* HERO */
.acc-hero {
position: relative; overflow: hidden;
border-radius: 26px;
border: 1px solid rgba(74, 102, 216, 0.22);
border: 1px solid rgba(145, 145, 145, 0.22);
background:
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(58, 85, 196, 0.20), transparent 55%),
radial-gradient(ellipse 70% 100% at 0% 0%, rgba(127, 127, 127, 0.20), transparent 55%),
radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
linear-gradient(135deg, rgba(14, 13, 22, 0.95), rgba(6, 6, 10, 0.97));
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);
}
.acc-hero-glow {
@@ -403,8 +403,8 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
.acc-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 70% 60%, #000 25%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 60%, #000 25%, transparent 80%);
@@ -422,24 +422,24 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
aspect-ratio: 5 / 4;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(222, 224, 240, 0.10);
border: 1px solid rgba(231, 231, 231, 0.10);
background:
radial-gradient(ellipse 38% 18% at 50% 80%, rgba(200, 210, 240, 0.16), transparent 70%),
radial-gradient(ellipse 38% 18% at 50% 80%, rgba(220, 220, 220, 0.16), transparent 70%),
radial-gradient(ellipse 55% 55% at 50% 50%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 65%),
linear-gradient(180deg, rgba(10, 10, 16, 0.95), rgba(4, 4, 8, 0.98));
linear-gradient(180deg, rgba(13, 13, 13, 0.95), rgba(6, 6, 6, 0.98));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.acc-hero-stage {
position: absolute; bottom: 0; left: 0; right: 0;
height: 35%;
background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(200, 210, 240, 0.10), transparent 70%);
background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(220, 220, 220, 0.10), transparent 70%);
pointer-events: none;
}
.acc-hero-grid-inner {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(222, 224, 240, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(222, 224, 240, 0.05) 1px, transparent 1px);
linear-gradient(rgba(231, 231, 231, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(231, 231, 231, 0.05) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 80%);
@@ -463,13 +463,13 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
}
.acc-hero-title :global(.text-gradient) { font-weight: 500; }
.acc-hero-tagline {
margin: 0; color: #DEE0F0;
margin: 0; color: #e7e7e7;
font-size: clamp(0.98rem, 1.8vw, 1.12rem);
line-height: 1.55;
font-weight: 500;
}
.acc-hero-desc {
margin: 0; color: #C9CCDE;
margin: 0; color: #d4d4d4;
font-size: clamp(0.9rem, 1.6vw, 1rem);
line-height: 1.65;
max-width: 560px;
@@ -488,10 +488,10 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
.acc-block {
padding: clamp(1.2rem, 2vw, 1.6rem);
border-radius: 20px;
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) 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));
display: flex; flex-direction: column; gap: 1rem;
}
.acc-block header { display: flex; flex-direction: column; gap: 0.45rem; }
@@ -505,31 +505,31 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
}
.acc-feature-list li {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem;
color: #DEE0F0; font-size: 0.92rem; line-height: 1.55;
color: #e7e7e7; font-size: 0.92rem; line-height: 1.55;
}
.acc-feature-check {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px;
background: rgba(127, 214, 208, 0.18);
border: 1px solid rgba(127, 214, 208, 0.4);
color: #7FD6D0;
background: rgba(171, 171, 171, 0.18);
border: 1px solid rgba(171, 171, 171, 0.4);
color: #ababab;
margin-top: 2px;
}
.acc-compat-list li {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.55rem;
color: #DEE0F0; font-size: 0.92rem;
color: #e7e7e7; font-size: 0.92rem;
padding: 0.55rem 0.7rem;
border-radius: 10px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(20, 19, 26, 0.6), rgba(10, 10, 14, 0.8));
border: 1px solid rgba(231, 231, 231, 0.08);
background: linear-gradient(135deg, rgba(23, 23, 23, 0.6), rgba(12, 12, 12, 0.8));
}
.acc-compat-icon { color: var(--acc); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.acc-block-empty { margin: 0; color: #C9CCDE; font-size: 0.92rem; line-height: 1.55; }
.acc-block-empty { margin: 0; color: #d4d4d4; font-size: 0.92rem; line-height: 1.55; }
.acc-meta-grid {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(74, 102, 216, 0.18);
border-top: 1px solid rgba(145, 145, 145, 0.18);
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.7rem;
}
@@ -538,7 +538,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
}
.acc-meta span {
font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase;
color: #8891C7; font-weight: 800;
color: #a8a8a8; font-weight: 800;
}
.acc-meta strong { color: #FFFFFF; font-weight: 600; font-size: 0.88rem; letter-spacing: -0.005em; }
@@ -546,17 +546,17 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
.acc-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);
scroll-margin-top: clamp(80px, 12vh, 120px);
}
.acc-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;
}
.acc-cta-inner {
@@ -575,7 +575,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
font-size: clamp(1.55rem, 3vw, 2rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
}
.acc-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
.acc-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
.acc-cta-actions {
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
}
@@ -600,35 +600,35 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
display: flex; flex-direction: column; gap: 0.35rem;
padding: 1.1rem 1.15rem;
border-radius: 18px;
border: 1px solid rgba(120, 140, 255, 0.22);
border: 1px solid rgba(188, 188, 188, 0.22);
background:
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
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, box-shadow 0.3s;
}
.acc-highlight::before {
content: ''; position: absolute;
top: 0; right: 16px; width: 28px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(180, 195, 255, 0.55));
background: linear-gradient(90deg, transparent, rgba(218, 218, 218, 0.55));
}
.acc-highlight:hover {
border-color: rgba(120, 140, 255, 0.55);
border-color: rgba(188, 188, 188, 0.55);
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--acc) 18%, transparent);
}
.acc-highlight-value {
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 500; letter-spacing: -0.03em; line-height: 1;
background: linear-gradient(180deg, #FFFFFF, #B5BDDB);
background: linear-gradient(180deg, #FFFFFF, #c8c8c8);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.acc-highlight-label {
font-size: 0.66rem; letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 800; color: #DEE0F0;
text-transform: uppercase; font-weight: 800; color: #e7e7e7;
}
.acc-highlight-sub {
font-size: 0.78rem; color: #8891C7; line-height: 1.3;
font-size: 0.78rem; color: #a8a8a8; line-height: 1.3;
}
/* FEATURE SECTIONS — full-bleed alternating */
@@ -643,10 +643,10 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
gap: clamp(1.25rem, 3vw, 2rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: 24px;
border: 1px solid rgba(74, 102, 216, 0.20);
border: 1px solid rgba(145, 145, 145, 0.20);
background:
radial-gradient(ellipse 70% 80% at 0% 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%),
linear-gradient(135deg, rgba(18, 17, 26, 0.95), rgba(8, 8, 12, 0.97));
linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(10, 10, 10, 0.97));
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
overflow: hidden;
align-items: center;
@@ -664,14 +664,14 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
aspect-ratio: 16 / 11;
border-radius: 18px;
overflow: hidden;
background: #0a0a0e;
border: 1px solid rgba(222, 224, 240, 0.08);
background: #0c0c0c;
border: 1px solid rgba(231, 231, 231, 0.08);
min-height: 200px;
}
.acc-feature-media-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10, 10, 14, 0.08) 0%, rgba(10, 10, 14, 0.02) 40%, rgba(10, 10, 14, 0.55) 100%),
linear-gradient(180deg, rgba(12, 12, 12, 0.08) 0%, rgba(12, 12, 12, 0.02) 40%, rgba(12, 12, 12, 0.55) 100%),
radial-gradient(ellipse 60% 70% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%);
pointer-events: none;
}
@@ -689,7 +689,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
line-height: 1.1;
}
.acc-feature-body p {
margin: 0; color: #DEE0F0;
margin: 0; color: #e7e7e7;
font-size: clamp(0.95rem, 1.8vw, 1.05rem);
line-height: 1.65;
}
@@ -699,7 +699,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
}
.acc-feature-bullets li {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem;
color: #DEE0F0; font-size: 0.92rem; line-height: 1.55;
color: #e7e7e7; font-size: 0.92rem; line-height: 1.55;
}
/* PARAMS DIAGRAM */
@@ -707,15 +707,15 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
margin: 0;
padding: clamp(1.2rem, 2.4vw, 1.8rem);
border-radius: 22px;
border: 1px solid rgba(74, 102, 216, 0.22);
border: 1px solid rgba(145, 145, 145, 0.22);
background:
radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%),
linear-gradient(180deg, rgba(14, 13, 22, 0.95), rgba(8, 8, 12, 0.97));
linear-gradient(180deg, rgba(18, 18, 18, 0.95), rgba(10, 10, 10, 0.97));
display: flex; flex-direction: column; gap: 1rem;
box-shadow: 0 22px 52px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.acc-params-figure figcaption {
color: #8891C7; font-size: 0.78rem;
color: #a8a8a8; font-size: 0.78rem;
letter-spacing: 0.04em; text-align: center;
}
@@ -731,15 +731,15 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
}
.acc-spec-group {
border-radius: 18px;
border: 1px solid rgba(222, 224, 240, 0.10);
background: linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(10, 10, 14, 0.94));
border: 1px solid rgba(231, 231, 231, 0.10);
background: linear-gradient(180deg, rgba(23, 23, 23, 0.85), rgba(12, 12, 12, 0.94));
overflow: hidden;
}
.acc-spec-head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.75rem; padding: 0.9rem 1.1rem;
border-bottom: 1px solid rgba(74, 102, 216, 0.18);
background: linear-gradient(180deg, rgba(74, 102, 216, 0.08), rgba(20, 19, 26, 0.6));
border-bottom: 1px solid rgba(145, 145, 145, 0.18);
background: linear-gradient(180deg, rgba(145, 145, 145, 0.08), rgba(23, 23, 23, 0.6));
}
.acc-spec-head h3 {
margin: 0; font-size: 0.95rem; font-weight: 600;
@@ -755,7 +755,7 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
padding: 0.22rem 0.55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 38%, transparent);
background: rgba(10, 10, 14, 0.6);
background: rgba(12, 12, 12, 0.6);
}
.acc-spec-table {
width: 100%;
@@ -767,17 +767,17 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
padding: 0.7rem 1.1rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid rgba(222, 224, 240, 0.06);
border-bottom: 1px solid rgba(231, 231, 231, 0.06);
}
.acc-spec-table tr:last-child th,
.acc-spec-table tr:last-child td { border-bottom: none; }
.acc-spec-table th {
color: #A6B2D8;
color: #bfbfbf;
font-weight: 600;
width: 38%;
}
.acc-spec-table td {
color: #DEE0F0;
color: #e7e7e7;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.82rem;
letter-spacing: 0.01em;
@@ -788,8 +788,8 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
padding: clamp(1.2rem, 2.4vw, 1.8rem);
border-radius: 18px;
border: 1px solid rgba(222, 224, 240, 0.10);
background: linear-gradient(180deg, rgba(18, 17, 24, 0.85), rgba(10, 10, 14, 0.94));
border: 1px solid rgba(231, 231, 231, 0.10);
background: linear-gradient(180deg, rgba(21, 21, 21, 0.85), rgba(12, 12, 12, 0.94));
}
@media (min-width: 820px) { .acc-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; } }
.acc-foot-block { display: flex; flex-direction: column; gap: 0.55rem; }
@@ -798,14 +798,14 @@ export default async function AccessoryDetailPage({ params }: { params: Promise<
display: flex; flex-direction: column; gap: 0.45rem;
}
.acc-foot-list li {
color: #C9CCDE; font-size: 0.82rem; line-height: 1.55;
color: #d4d4d4; font-size: 0.82rem; line-height: 1.55;
}
.acc-foot-list sup {
color: color-mix(in srgb, var(--acc) 70%, white);
font-weight: 800;
margin-right: 0.25rem;
}
.acc-foot-block p { margin: 0; color: #C9CCDE; font-size: 0.82rem; line-height: 1.55; }
.acc-foot-block p { margin: 0; color: #d4d4d4; font-size: 0.82rem; line-height: 1.55; }
/* RELATED */
.acc-related { display: flex; flex-direction: column; gap: 1.25rem; }
@@ -837,10 +837,10 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
overflow: 'hidden',
textDecoration: '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%, ${accent}1A, transparent 60%), linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96))`,
boxShadow: '0 1px 0 rgba(222, 224, 240, 0.04) inset, 0 14px 28px rgba(0, 0, 0, 0.36)',
`radial-gradient(ellipse 80% 60% at 100% 0%, ${accent}1A, transparent 60%), linear-gradient(180deg, rgba(26, 26, 26, 0.92), rgba(12, 12, 12, 0.96))`,
boxShadow: '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), border-color 0.4s, box-shadow 0.4s',
}}
>
@@ -848,9 +848,9 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
style={{
position: 'relative',
aspectRatio: '16 / 11',
background: '#0a0a0e',
background: '#0c0c0c',
overflow: 'hidden',
borderBottom: '1px solid rgba(222, 224, 240, 0.06)',
borderBottom: '1px solid rgba(231, 231, 231, 0.06)',
}}
>
<Image
@@ -875,8 +875,8 @@ function RelatedCard({ accessory }: { accessory: Accessory }) {
{accessory.brandLabel}
</span>
<h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 600, color: '#FFFFFF', letterSpacing: '-0.005em' }}>{accessory.name}</h3>
<p style={{ margin: 0, color: '#C9CCDE', fontSize: '0.84rem', lineHeight: 1.55, flex: 1 }}>{accessory.tagline}</p>
<span style={{ marginTop: '0.5rem', display: 'inline-flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#DEE0F0' }}>
<p style={{ margin: 0, color: '#d4d4d4', fontSize: '0.84rem', lineHeight: 1.55, flex: 1 }}>{accessory.tagline}</p>
<span style={{ marginTop: '0.5rem', display: 'inline-flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#e7e7e7' }}>
View accessory <ArrowRight size={13} strokeWidth={2} />
</span>
</div>
src/app/accessories/page.tsx
+6 -6
View File
@@ -27,11 +27,11 @@ export default function AccessoriesIndexPage() {
gap: 'clamp(2rem, 4vw, 3rem)',
}}
>
<nav aria-label="Breadcrumb" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center', fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8891C7' }}>
<Link href="/" style={{ color: '#8891C7', textDecoration: 'none' }}>Home</Link>
<span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#4a4f63' }}><ChevronRight size={12} /></span>
<Link href="/robots/" style={{ color: '#8891C7', textDecoration: 'none' }}>Robots</Link>
<span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#4a4f63' }}><ChevronRight size={12} /></span>
<nav aria-label="Breadcrumb" style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center', fontSize: '0.7rem', letterSpacing: '0.16em', textTransform: 'uppercase', color: '#a8a8a8' }}>
<Link href="/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Home</Link>
<span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
<Link href="/robots/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Robots</Link>
<span aria-hidden style={{ display: 'inline-flex', alignItems: 'center', color: '#575757' }}><ChevronRight size={12} /></span>
<span aria-current="page" style={{ color: '#FFFFFF' }}>Accessories</span>
</nav>
@@ -42,7 +42,7 @@ export default function AccessoriesIndexPage() {
{ACCESSORIES.length} accessories — dexterous hands, arms, sensors, IoT modules.
</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.65 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.65 }}>
Robot platforms get their full capability from accessories. Browse Unitree dexterous hands and arms, perception sensors, and Pudu dispatch, docking, modular attachments, and building IoT modules — all available in the UAE through YS Lootah Robotics.
</p>
</div>
src/app/admin/login/page.tsx
+11 -11
View File
@@ -42,8 +42,8 @@ export default function AdminLoginPage() {
width: '48px',
height: '48px',
borderRadius: '12px',
background: 'rgba(59, 130, 246, 0.08)',
border: '1px solid rgba(59, 130, 246, 0.2)',
background: 'rgba(153, 153, 153, 0.08)',
border: '1px solid rgba(153, 153, 153, 0.2)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -52,10 +52,10 @@ export default function AdminLoginPage() {
}}>
🔐
</div>
<h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c', margin: 0, marginBottom: '0.25rem' }}>
<h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b', margin: 0, marginBottom: '0.25rem' }}>
Admin Login
</h1>
<p style={{ fontSize: '0.8rem', color: '#8891C7', margin: 0 }}>
<p style={{ fontSize: '0.8rem', color: '#a8a8a8', margin: 0 }}>
Lootah Robotics G1 Configurator
</p>
</div>
@@ -71,7 +71,7 @@ export default function AdminLoginPage() {
value={username}
onChange={(e) => setUsername(e.target.value)}
style={inputStyle}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)')}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.1)')}
placeholder="admin"
/>
@@ -86,7 +86,7 @@ export default function AdminLoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
style={inputStyle}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59, 130, 246, 0.5)')}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0, 0, 0, 0.1)')}
placeholder="••••••••"
/>
@@ -111,9 +111,9 @@ export default function AdminLoginPage() {
style={{
padding: '0.7rem',
borderRadius: '0.5rem',
border: '1px solid rgba(59, 130, 246, 0.3)',
background: loading ? 'rgba(39, 63, 148, 0.1)' : 'rgba(59, 130, 246, 0.08)',
color: loading ? '#8891C7' : '#2563eb',
border: '1px solid rgba(153, 153, 153, 0.3)',
background: loading ? 'rgba(94, 94, 94, 0.1)' : 'rgba(153, 153, 153, 0.08)',
color: loading ? '#a8a8a8' : '#888888',
fontSize: '0.875rem',
fontWeight: 600,
cursor: loading ? 'not-allowed' : 'pointer',
@@ -153,7 +153,7 @@ const labelStyle: React.CSSProperties = {
display: 'block',
fontSize: '0.75rem',
fontWeight: 600,
color: '#374151',
color: '#444444',
marginBottom: '0.375rem',
letterSpacing: '0.02em',
};
@@ -164,7 +164,7 @@ const inputStyle: React.CSSProperties = {
borderRadius: '0.5rem',
border: '1px solid rgba(0, 0, 0, 0.1)',
background: '#ffffff',
color: '#0a0a0c',
color: '#0b0b0b',
fontSize: '0.875rem',
outline: 'none',
transition: 'border-color 0.2s ease',
src/app/admin/page.tsx
+78 -78
View File
@@ -85,7 +85,7 @@ export default function AdminPage() {
if (existingPersona) {
personaStore.getState().updatePersona(server.id, { modelPath: mergedModelPath });
} else {
personaStore.getState().addPersona({ id: server.id, label: server.label, description: server.label, colors: { torso: '#3b82f6', legs: '#3b82f6' }, modelPath: mergedModelPath });
personaStore.getState().addPersona({ id: server.id, label: server.label, description: server.label, colors: { torso: '#999999', legs: '#999999' }, modelPath: mergedModelPath });
}
}
}
@@ -199,7 +199,7 @@ export default function AdminPage() {
id: itemId,
label: item?.label ?? itemId,
description: item?.label ?? itemId,
colors: { torso: '#3b82f6', legs: '#3b82f6' },
colors: { torso: '#999999', legs: '#999999' },
modelPath,
});
}
@@ -241,7 +241,7 @@ export default function AdminPage() {
id,
label: item.label,
description: item.label,
colors: { torso: '#3b82f6', legs: '#3b82f6' },
colors: { torso: '#999999', legs: '#999999' },
modelPath,
});
count++;
@@ -306,7 +306,7 @@ export default function AdminPage() {
id,
label,
description: label,
colors: { torso: '#3b82f6', legs: '#3b82f6' },
colors: { torso: '#999999', legs: '#999999' },
modelPath,
});
}
@@ -318,7 +318,7 @@ export default function AdminPage() {
// --------------- PERSONAS ---------------
const personas = usePersonaStore((s) => s.personas);
const isPersonaHydrated = usePersonaStore((s) => s.isHydrated);
const [newPersona, setNewPersona] = useState({ label: '', description: '', torso: '#3b82f6', legs: '#3b82f6' });
const [newPersona, setNewPersona] = useState({ label: '', description: '', torso: '#999999', legs: '#999999' });
const [personaError, setPersonaError] = useState('');
const [personaSaved, setPersonaSaved] = useState(false);
@@ -337,7 +337,7 @@ export default function AdminPage() {
description,
colors: { torso: newPersona.torso, legs: newPersona.legs },
});
setNewPersona({ label: '', description: '', torso: '#3b82f6', legs: '#3b82f6' });
setNewPersona({ label: '', description: '', torso: '#999999', legs: '#999999' });
setPersonaSaved(true);
setTimeout(() => setPersonaSaved(false), 2000);
};
@@ -488,7 +488,7 @@ export default function AdminPage() {
new Date(ts * 1000).toLocaleDateString('en-AE', { day: 'numeric', month: 'short', year: 'numeric' });
if (!isPricingHydrated) {
return <div style={pageStyle}><p style={{ color: '#6a73a5' }}>Loading…</p></div>;
return <div style={pageStyle}><p style={{ color: '#888888' }}>Loading…</p></div>;
}
return (
@@ -497,10 +497,10 @@ export default function AdminPage() {
{/* HEADER */}
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
<div>
<h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c', margin: 0, marginBottom: '0.2rem' }}>
<h1 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b', margin: 0, marginBottom: '0.2rem' }}>
Admin Dashboard
</h1>
<p style={{ fontSize: '0.75rem', color: '#8891C7', margin: 0 }}>Lootah Robotics G1 Configurator</p>
<p style={{ fontSize: '0.75rem', color: '#a8a8a8', margin: 0 }}>Lootah Robotics G1 Configurator</p>
</div>
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
<button onClick={() => setShowPwModal(true)} style={ghostBtnStyle}>Change Password</button>
@@ -526,8 +526,8 @@ export default function AdminPage() {
padding: '0.4rem 0.875rem',
borderRadius: '0.375rem',
border: 'none',
background: activeTab === t ? 'rgba(59,130,246,0.08)' : 'transparent',
color: activeTab === t ? '#2563eb' : '#6a73a5',
background: activeTab === t ? 'rgba(153, 153, 153, 0.08)' : 'transparent',
color: activeTab === t ? '#888888' : '#888888',
fontSize: '0.8rem',
fontWeight: activeTab === t ? 600 : 400,
cursor: 'pointer',
@@ -553,20 +553,20 @@ export default function AdminPage() {
value={editedLabels[item.id] ?? item.label}
onChange={(e) => setEditedLabels((prev) => ({ ...prev, [item.id]: e.target.value }))}
style={tableInputStyle}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59,130,246,0.5)')}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)')}
aria-label={`Label for ${item.label}`}
/>
</div>
<div style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace', paddingLeft: '0.25rem' }}>{item.id}</div>
<div style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace', paddingLeft: '0.25rem' }}>{item.id}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
<span style={{ fontSize: '0.7rem', color: '#8891C7' }}>AED</span>
<span style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>AED</span>
<input
type="text"
value={formatPrice(editedPrices[item.id] ?? item.price)}
onChange={(e) => handlePriceChange(item.id, e.target.value)}
style={tableInputStyle}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(59,130,246,0.5)')}
onFocus={(e) => (e.currentTarget.style.borderColor = 'rgba(153, 153, 153, 0.5)')}
onBlur={(e) => (e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)')}
aria-label={`Price for ${item.label}`}
/>
@@ -584,7 +584,7 @@ export default function AdminPage() {
) : null}
<label
title="Upload / replace .glb"
style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', cursor: rowGlbUploading[item.id] ? 'wait' : 'pointer', fontSize: '0.7rem', color: rowGlbUploading[item.id] ? '#2563eb' : '#8891C7', background: rowGlbUploading[item.id] ? 'rgba(59,130,246,0.06)' : 'transparent', border: `1px dashed ${rowGlbUploading[item.id] ? 'rgba(59,130,246,0.3)' : 'rgba(0,0,0,0.12)'}`, borderRadius: '0.375rem', padding: '0.2rem 0.45rem', whiteSpace: 'nowrap' }}
style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem', cursor: rowGlbUploading[item.id] ? 'wait' : 'pointer', fontSize: '0.7rem', color: rowGlbUploading[item.id] ? '#888888' : '#a8a8a8', background: rowGlbUploading[item.id] ? 'rgba(153, 153, 153, 0.06)' : 'transparent', border: `1px dashed ${rowGlbUploading[item.id] ? 'rgba(153, 153, 153, 0.3)' : 'rgba(0,0,0,0.12)'}`, borderRadius: '0.375rem', padding: '0.2rem 0.45rem', whiteSpace: 'nowrap' }}
>
<input type="file" accept=".glb" style={{ display: 'none' }} onChange={(e) => {
const f = e.target.files?.[0] ?? null;
@@ -613,7 +613,7 @@ export default function AdminPage() {
{/* Add new pricing item */}
<div style={{ marginTop: '1rem', padding: '1rem 1.25rem', background: 'rgba(248,248,246,0.6)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem' }}>
<p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#374151', marginBottom: '0.75rem', marginTop: 0 }}>Add Pricing Item</p>
<p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#444444', marginBottom: '0.75rem', marginTop: 0 }}>Add Pricing Item</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 120px', gap: '0.5rem', alignItems: 'flex-end' }}>
<div>
<label style={labelStyle}>ID (slug)</label>
@@ -638,11 +638,11 @@ export default function AdminPage() {
gap: '0.625rem',
padding: '0.5rem 0.75rem',
borderRadius: '0.375rem',
border: `1px dashed ${addItemGlb ? 'rgba(59,130,246,0.4)' : 'rgba(0,0,0,0.15)'}`,
background: addItemGlb ? 'rgba(59,130,246,0.04)' : '#fff',
border: `1px dashed ${addItemGlb ? 'rgba(153, 153, 153, 0.4)' : 'rgba(0,0,0,0.15)'}`,
background: addItemGlb ? 'rgba(153, 153, 153, 0.04)' : '#fff',
cursor: 'pointer',
fontSize: '0.8rem',
color: addItemGlb ? '#2563eb' : '#8891C7',
color: addItemGlb ? '#888888' : '#a8a8a8',
transition: 'all 0.2s',
}}>
<input
@@ -658,7 +658,7 @@ export default function AdminPage() {
{addItemGlb && (
<button
onClick={(e) => { e.preventDefault(); setAddItemGlb(null); }}
style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#8891C7', fontSize: '0.75rem', padding: '0 2px' }}
style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#a8a8a8', fontSize: '0.75rem', padding: '0 2px' }}
>✕</button>
)}
</label>
@@ -674,7 +674,7 @@ export default function AdminPage() {
<button onClick={handleAddItem} disabled={addItemUploading} style={secondaryBtnStyle}>
{addItemUploading ? 'Uploading…' : 'Add Item'}
</button>
<button onClick={handleSavePrices} style={{ ...primaryBtnStyle, background: priceSaved ? 'rgba(34,197,94,0.08)' : 'rgba(59,130,246,0.08)', color: priceSaved ? '#16a34a' : '#2563eb' }}>
<button onClick={handleSavePrices} style={{ ...primaryBtnStyle, background: priceSaved ? 'rgba(34,197,94,0.08)' : 'rgba(153, 153, 153, 0.08)', color: priceSaved ? '#16a34a' : '#888888' }}>
{priceSaved ? 'Saved!' : 'Save Prices'}
</button>
</div>
@@ -686,23 +686,23 @@ export default function AdminPage() {
{activeTab === 'personas' && (
<div>
{!isPersonaHydrated ? (
<p style={{ color: '#6a73a5', fontSize: '0.85rem' }}>Loading personas…</p>
<p style={{ color: '#888888', fontSize: '0.85rem' }}>Loading personas…</p>
) : (
<TableCard>
<TableHeader cols="1fr 80px 80px 56px" labels={['Persona', 'Torso', 'Legs', '']} />
{personas.map((p, i) => (
<div key={p.id} style={{ display: 'grid', gridTemplateColumns: '1fr 80px 80px 56px', padding: '0.875rem 1.25rem', alignItems: 'center', borderBottom: i < personas.length - 1 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
<div>
<div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{p.label}</div>
<div style={{ fontSize: '0.7rem', color: '#8891C7' }}>{p.description}</div>
<div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{p.label}</div>
<div style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>{p.description}</div>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
<div style={{ width: 20, height: 20, borderRadius: 4, backgroundColor: p.colors.torso, border: '1px solid rgba(0,0,0,0.1)', flexShrink: 0 }} />
<span style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace' }}>{p.colors.torso}</span>
<span style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace' }}>{p.colors.torso}</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
<div style={{ width: 20, height: 20, borderRadius: 4, backgroundColor: p.colors.legs, border: '1px solid rgba(0,0,0,0.1)', flexShrink: 0 }} />
<span style={{ fontSize: '0.7rem', color: '#8891C7', fontFamily: 'monospace' }}>{p.colors.legs}</span>
<span style={{ fontSize: '0.7rem', color: '#a8a8a8', fontFamily: 'monospace' }}>{p.colors.legs}</span>
</div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
{p.id !== 'none' && (
@@ -716,7 +716,7 @@ export default function AdminPage() {
{/* Add new persona */}
<div style={{ marginTop: '1rem', padding: '1rem 1.25rem', background: 'rgba(248,248,246,0.6)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem' }}>
<p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#374151', marginBottom: '0.75rem', marginTop: 0 }}>Add Persona</p>
<p style={{ fontSize: '0.75rem', fontWeight: 600, color: '#444444', marginBottom: '0.75rem', marginTop: 0 }}>Add Persona</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.5rem' }}>
<div>
<label style={labelStyle}>Label</label>
@@ -744,7 +744,7 @@ export default function AdminPage() {
{personaError && <p style={errorTextStyle}>{personaError}</p>}
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '0.75rem' }}>
<button onClick={() => personaStore.getState().resetPersonas()} style={dangerBtnStyle}>Reset to Defaults</button>
<button onClick={handleAddPersona} style={{ ...primaryBtnStyle, background: personaSaved ? 'rgba(34,197,94,0.08)' : 'rgba(59,130,246,0.08)', color: personaSaved ? '#16a34a' : '#2563eb' }}>
<button onClick={handleAddPersona} style={{ ...primaryBtnStyle, background: personaSaved ? 'rgba(34,197,94,0.08)' : 'rgba(153, 153, 153, 0.08)', color: personaSaved ? '#16a34a' : '#888888' }}>
{personaSaved ? 'Added!' : 'Add Persona'}
</button>
</div>
@@ -762,7 +762,7 @@ export default function AdminPage() {
</div>
{ordersError && <p style={errorTextStyle}>{ordersError}</p>}
{!ordersLoading && orders.length === 0 && !ordersError && (
<p style={{ color: '#8891C7', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No orders found.</p>
<p style={{ color: '#a8a8a8', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No orders found.</p>
)}
{orders.length > 0 && (
<TableCard>
@@ -791,18 +791,18 @@ export default function AdminPage() {
</div>
{contactsError && <p style={errorTextStyle}>{contactsError}</p>}
{!contactsLoading && contacts.length === 0 && !contactsError && (
<p style={{ color: '#8891C7', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No contact inquiries yet.</p>
<p style={{ color: '#a8a8a8', fontSize: '0.85rem', textAlign: 'center', padding: '2rem' }}>No contact inquiries yet.</p>
)}
{contacts.length > 0 && (
<TableCard>
<TableHeader cols="1.5fr 1fr 1fr 2.5fr 1fr" labels={['Name', 'Email', 'Phone', 'Message', 'Date']} />
{contacts.map((c, i) => (
<div key={c.id} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 2.5fr 1fr', padding: '1rem 1.25rem', alignItems: 'flex-start', borderBottom: i < contacts.length - 1 ? '1px solid rgba(0,0,0,0.04)' : 'none', gap: '1rem' }}>
<div style={{ fontSize: '0.85rem', fontWeight: 500, color: '#1e293b' }}>{c.name}</div>
<div style={{ fontSize: '0.8rem', color: '#6a73a5' }}><a href={`mailto:${c.email}`} style={{ color: '#3b82f6', textDecoration: 'none' }}>{c.email}</a></div>
<div style={{ fontSize: '0.8rem', color: '#6a73a5' }}>{c.phone ? <a href={`tel:${c.phone}`} style={{ color: '#6a73a5', textDecoration: 'none' }}>{c.phone}</a> : '-'}</div>
<div style={{ fontSize: '0.8rem', color: '#475569', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{c.message}</div>
<div style={{ fontSize: '0.75rem', color: '#8891C7' }}>{new Date(c.createdAt).toLocaleDateString('en-AE')}</div>
<div style={{ fontSize: '0.85rem', fontWeight: 500, color: '#2d2d2d' }}>{c.name}</div>
<div style={{ fontSize: '0.8rem', color: '#888888' }}><a href={`mailto:${c.email}`} style={{ color: '#999999', textDecoration: 'none' }}>{c.email}</a></div>
<div style={{ fontSize: '0.8rem', color: '#888888' }}>{c.phone ? <a href={`tel:${c.phone}`} style={{ color: '#888888', textDecoration: 'none' }}>{c.phone}</a> : '-'}</div>
<div style={{ fontSize: '0.8rem', color: '#585858', whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{c.message}</div>
<div style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>{new Date(c.createdAt).toLocaleDateString('en-AE')}</div>
</div>
))}
</TableCard>
@@ -813,15 +813,15 @@ export default function AdminPage() {
{/* SETTINGS TAB */}
{activeTab === 'settings' && (
<div>
<h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0a0a0c', margin: '0 0 1rem' }}>App Settings</h2>
<h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0b0b0b', margin: '0 0 1rem' }}>App Settings</h2>
{settingError && <p style={{ color: '#dc2626', fontSize: '0.8rem', marginBottom: '0.75rem' }}>{settingError}</p>}
{settingsLoading ? (
<p style={{ color: '#6a73a5', fontSize: '0.875rem' }}>Loading…</p>
<p style={{ color: '#888888', fontSize: '0.875rem' }}>Loading…</p>
) : (
<TableCard>
<TableHeader cols="1fr 1.5fr 110px 50px" labels={['Key', 'Value', '', '']} />
{settings.length === 0 && (
<p style={{ padding: '1rem', color: '#8891C7', fontSize: '0.8rem' }}>No settings yet.</p>
<p style={{ padding: '1rem', color: '#a8a8a8', fontSize: '0.8rem' }}>No settings yet.</p>
)}
{settings.map((s, i) => (
<SettingRow
@@ -837,8 +837,8 @@ export default function AdminPage() {
)}
{/* Add new setting */}
<div style={{ marginTop: '1.25rem', padding: '1rem', background: '#FBFBFD', borderRadius: '0.75rem', border: '1px solid rgba(0,0,0,0.06)' }}>
<h3 style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0a0a0c', margin: '0 0 0.75rem' }}>Add Setting</h3>
<div style={{ marginTop: '1.25rem', padding: '1rem', background: '#fcfcfc', borderRadius: '0.75rem', border: '1px solid rgba(0,0,0,0.06)' }}>
<h3 style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0b0b0b', margin: '0 0 0.75rem' }}>Add Setting</h3>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr auto', gap: '0.5rem', alignItems: 'flex-end' }}>
<div>
<label style={labelStyle}>Key</label>
@@ -869,7 +869,7 @@ export default function AdminPage() {
{showPwModal && (
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 50 }}>
<div style={{ background: '#fff', borderRadius: '1rem', padding: '1.5rem', width: '100%', maxWidth: '380px', boxShadow: '0 20px 60px rgba(0,0,0,0.15)' }}>
<h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0a0a0c', margin: '0 0 1.25rem' }}>Change Password</h2>
<h2 style={{ fontSize: '1rem', fontWeight: 700, color: '#0b0b0b', margin: '0 0 1.25rem' }}>Change Password</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
{(['current', 'next', 'confirm'] as const).map((field) => (
<div key={field}>
@@ -918,8 +918,8 @@ function SettingRow({
useEffect(() => { setEditVal(setting.value); }, [setting.value]);
return (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr 110px 50px', gap: '0.75rem', padding: '0.625rem 1rem', alignItems: 'center', background: index % 2 === 0 ? '#fff' : '#FBFBFD', borderTop: index > 0 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
<span style={{ fontSize: '0.8rem', fontFamily: 'monospace', color: '#334155' }}>{setting.key}</span>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr 110px 50px', gap: '0.75rem', padding: '0.625rem 1rem', alignItems: 'center', background: index % 2 === 0 ? '#fff' : '#fcfcfc', borderTop: index > 0 ? '1px solid rgba(0,0,0,0.04)' : 'none' }}>
<span style={{ fontSize: '0.8rem', fontFamily: 'monospace', color: '#444444' }}>{setting.key}</span>
<input
value={editVal}
onChange={(e) => setEditVal(e.target.value)}
@@ -979,13 +979,13 @@ function OrderRow({
const fieldStyle: React.CSSProperties = {
fontSize: '0.63rem',
fontWeight: 600,
color: '#8891C7',
color: '#a8a8a8',
textTransform: 'uppercase',
letterSpacing: '0.04em',
};
const valueStyle: React.CSSProperties = {
fontSize: '0.8rem',
color: '#374151',
color: '#444444',
marginTop: '0.1rem',
wordBreak: 'break-word',
};
@@ -995,11 +995,11 @@ function OrderRow({
{/* Collapsed row */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 130px 90px 100px 28px', padding: '0.75rem 1.25rem', alignItems: 'center' }}>
<div>
<div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{name}</div>
{email && <div style={{ fontSize: '0.7rem', color: '#8891C7' }}>{email}</div>}
<div style={{ fontSize: '0.65rem', color: '#DEE0F0', fontFamily: 'monospace', marginTop: '0.1rem' }}>{order.id}</div>
<div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{name}</div>
{email && <div style={{ fontSize: '0.7rem', color: '#a8a8a8' }}>{email}</div>}
<div style={{ fontSize: '0.65rem', color: '#e7e7e7', fontFamily: 'monospace', marginTop: '0.1rem' }}>{order.id}</div>
</div>
<div style={{ fontSize: '0.85rem', color: '#374151', fontWeight: 500 }}>{formatAmount(order.amount, order.currency)}</div>
<div style={{ fontSize: '0.85rem', color: '#444444', fontWeight: 500 }}>{formatAmount(order.amount, order.currency)}</div>
<div>
<span style={{
display: 'inline-block',
@@ -1008,17 +1008,17 @@ function OrderRow({
fontSize: '0.65rem',
fontWeight: 600,
textTransform: 'uppercase',
background: order.status === 'succeeded' ? 'rgba(34,197,94,0.1)' : order.status === 'canceled' ? 'rgba(239,68,68,0.08)' : 'rgba(39, 63, 148,0.15)',
color: order.status === 'succeeded' ? '#16a34a' : order.status === 'canceled' ? '#dc2626' : '#6a73a5',
background: order.status === 'succeeded' ? 'rgba(34,197,94,0.1)' : order.status === 'canceled' ? 'rgba(239,68,68,0.08)' : 'rgba(94, 94, 94, 0.15)',
color: order.status === 'succeeded' ? '#16a34a' : order.status === 'canceled' ? '#dc2626' : '#888888',
}}>
{order.status}
</span>
</div>
<div style={{ fontSize: '0.75rem', color: '#8891C7' }}>{formatDate(order.created)}</div>
<div style={{ fontSize: '0.75rem', color: '#a8a8a8' }}>{formatDate(order.created)}</div>
<button
onClick={handleExpand}
title={expanded ? 'Collapse' : 'Show details'}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#8891C7', fontSize: '0.7rem', padding: '2px 4px', borderRadius: 4 }}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#a8a8a8', fontSize: '0.7rem', padding: '2px 4px', borderRadius: 4 }}
>
{expanded ? '▲' : '▼'}
</button>
@@ -1066,23 +1066,23 @@ function OrderRow({
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
{priceLines.map((line, i) => (
<div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ fontSize: '0.78rem', color: '#374151' }}>{line.label}</span>
<span style={{ fontSize: '0.78rem', color: '#374151', fontFamily: 'monospace' }}>
<span style={{ fontSize: '0.78rem', color: '#444444' }}>{line.label}</span>
<span style={{ fontSize: '0.78rem', color: '#444444', fontFamily: 'monospace' }}>
AED {new Intl.NumberFormat('en-AE').format(line.price)}
</span>
</div>
))}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: '0.4rem', marginTop: '0.1rem', borderTop: '1px solid rgba(0,0,0,0.07)' }}>
<span style={{ fontSize: '0.82rem', fontWeight: 700, color: '#0a0a0c' }}>Total</span>
<span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>
<span style={{ fontSize: '0.82rem', fontWeight: 700, color: '#0b0b0b' }}>Total</span>
<span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>
{formatAmount(order.amount, order.currency)}
</span>
</div>
</div>
) : (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span style={{ fontSize: '0.78rem', color: '#6a73a5' }}>Total (legacy order)</span>
<span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0a0a0c', fontFamily: 'monospace' }}>
<span style={{ fontSize: '0.78rem', color: '#888888' }}>Total (legacy order)</span>
<span style={{ fontSize: '0.88rem', fontWeight: 700, color: '#0b0b0b', fontFamily: 'monospace' }}>
{formatAmount(order.amount, order.currency)}
</span>
</div>
@@ -1090,16 +1090,16 @@ function OrderRow({
</SectionBox>
{/* Payment ID */}
<div style={{ fontSize: '0.65rem', color: '#DEE0F0', fontFamily: 'monospace' }}>
<div style={{ fontSize: '0.65rem', color: '#e7e7e7', fontFamily: 'monospace' }}>
Payment ID: {order.id}
</div>
</div>
{/* Right: snapshot */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
<div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Robot Snapshot</div>
<div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Robot Snapshot</div>
{snapshot === 'loading' && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 120, fontSize: '0.75rem', color: '#8891C7' }}>Loading…</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 120, fontSize: '0.75rem', color: '#a8a8a8' }}>Loading…</div>
)}
{snapshot && snapshot !== 'loading' && snapshot !== 'none' && (
/* eslint-disable-next-line @next/next/no-img-element */
@@ -1110,7 +1110,7 @@ function OrderRow({
/>
)}
{snapshot === 'none' && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 80, fontSize: '0.72rem', color: '#DEE0F0' }}>No snapshot</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', minHeight: 80, fontSize: '0.72rem', color: '#e7e7e7' }}>No snapshot</div>
)}
</div>
</div>
@@ -1122,7 +1122,7 @@ function OrderRow({
function SectionBox({ title, children }: { title: string; children: React.ReactNode }) {
return (
<div style={{ background: 'rgba(248,248,246,0.8)', borderRadius: '0.5rem', padding: '0.75rem 1rem' }}>
<div style={{ fontSize: '0.6rem', fontWeight: 700, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.5rem' }}>{title}</div>
<div style={{ fontSize: '0.6rem', fontWeight: 700, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '0.5rem' }}>{title}</div>
{children}
</div>
);
@@ -1138,8 +1138,8 @@ function InfoField({ label, value }: { label: string; value?: string | null }) {
if (!value) return null;
return (
<div>
<div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
<div style={{ fontSize: '0.8rem', color: '#374151', marginTop: '0.1rem', wordBreak: 'break-word' }}>{value}</div>
<div style={{ fontSize: '0.63rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.04em' }}>{label}</div>
<div style={{ fontSize: '0.8rem', color: '#444444', marginTop: '0.1rem', wordBreak: 'break-word' }}>{value}</div>
</div>
);
}
@@ -1147,8 +1147,8 @@ function InfoField({ label, value }: { label: string; value?: string | null }) {
function StatCard({ label, value }: { label: string; value: string }) {
return (
<div style={{ background: 'rgba(255,255,255,0.95)', border: '1px solid rgba(0,0,0,0.06)', borderRadius: '0.75rem', padding: '1rem 1.25rem' }}>
<div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#8891C7', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>{label}</div>
<div style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0a0a0c' }}>{value}</div>
<div style={{ fontSize: '0.7rem', fontWeight: 600, color: '#a8a8a8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '0.25rem' }}>{label}</div>
<div style={{ fontSize: '1.25rem', fontWeight: 700, color: '#0b0b0b' }}>{value}</div>
</div>
);
}
@@ -1165,7 +1165,7 @@ function TableHeader({ cols, labels }: { cols: string; labels: string[] }) {
return (
<div style={{ display: 'grid', gridTemplateColumns: cols, padding: '0.6rem 1.25rem', borderBottom: '1px solid rgba(0,0,0,0.04)', background: 'rgba(248,248,246,0.5)' }}>
{labels.map((l) => (
<span key={l} style={{ fontSize: '0.65rem', fontWeight: 600, color: '#6a73a5', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</span>
<span key={l} style={{ fontSize: '0.65rem', fontWeight: 600, color: '#888888', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{l}</span>
))}
</div>
);
@@ -1193,7 +1193,7 @@ const labelStyle: React.CSSProperties = {
display: 'block',
fontSize: '0.7rem',
fontWeight: 600,
color: '#374151',
color: '#444444',
marginBottom: '0.25rem',
letterSpacing: '0.02em',
};
@@ -1204,7 +1204,7 @@ const formInputStyle: React.CSSProperties = {
borderRadius: '0.375rem',
border: '1px solid rgba(0,0,0,0.1)',
background: '#ffffff',
color: '#0a0a0c',
color: '#0b0b0b',
fontSize: '0.8rem',
outline: 'none',
boxSizing: 'border-box',
@@ -1216,7 +1216,7 @@ const tableInputStyle: React.CSSProperties = {
borderRadius: '0.375rem',
border: '1px solid rgba(0,0,0,0.1)',
background: '#ffffff',
color: '#0a0a0c',
color: '#0b0b0b',
fontSize: '0.8rem',
fontFamily: 'monospace',
textAlign: 'right' as const,
@@ -1228,7 +1228,7 @@ const ghostBtnStyle: React.CSSProperties = {
borderRadius: '0.375rem',
border: '1px solid rgba(0,0,0,0.1)',
background: 'transparent',
color: '#374151',
color: '#444444',
fontSize: '0.75rem',
cursor: 'pointer',
};
@@ -1236,9 +1236,9 @@ const ghostBtnStyle: React.CSSProperties = {
const primaryBtnStyle: React.CSSProperties = {
padding: '0.5rem 1.25rem',
borderRadius: '0.375rem',
border: '1px solid rgba(59,130,246,0.3)',
background: 'rgba(59,130,246,0.08)',
color: '#2563eb',
border: '1px solid rgba(153, 153, 153, 0.3)',
background: 'rgba(153, 153, 153, 0.08)',
color: '#888888',
fontSize: '0.8rem',
fontWeight: 600,
cursor: 'pointer',
@@ -1249,7 +1249,7 @@ const secondaryBtnStyle: React.CSSProperties = {
borderRadius: '0.375rem',
border: '1px solid rgba(0,0,0,0.1)',
background: 'rgba(248,248,246,0.8)',
color: '#374151',
color: '#444444',
fontSize: '0.8rem',
cursor: 'pointer',
};
src/app/api/create-payment-intent/route.ts
+1 -1
View File
@@ -6,7 +6,7 @@ if (!process.env.STRIPE_SECRET_KEY) {
}
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || '', {
apiVersion: '2026-03-25.dahlia',
apiVersion: '2026-03-25.dahlia' as any,
});
export async function POST(request: Request) {
src/app/book-demo/page.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ export default function BookDemoPage() {
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
<span className="text-gradient" style={{ fontWeight: 500 }}>See the future in person.</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
Book a live robot demo at our Dubai showroom or schedule an on-site demo at your venue. Our team will tailor the demo to your use case before you arrive.
</p>
@@ -32,8 +32,8 @@ export default function BookDemoPage() {
'Walk through configuration and deployment options',
'Get UAE-specific pricing and availability',
].map((b) => (
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#DEE0F0', lineHeight: 1.55 }}>
<span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#DEE0F0', flex: 'none' }} />
<li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: '0.625rem', color: '#e7e7e7', lineHeight: 1.55 }}>
<span style={{ width: 8, height: 8, marginTop: 8, borderRadius: 999, background: '#e7e7e7', flex: 'none' }} />
{b}
</li>
))}
src/app/brands/page.tsx
+3 -3
View File
@@ -28,10 +28,10 @@ export default function BrandsPage() {
Selected Unitree and Pudu solutions in the UAE.
</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
YS Lootah Robotics holds UAE sales rights for selected Unitree and Pudu Robotics solutions with on-the-ground sales, demo, and deployment support across Dubai and the UAE.
</p>
<p style={{ margin: 0, color: '#6a73a5', fontSize: '0.82rem', lineHeight: 1.6 }}>
<p style={{ margin: 0, color: '#888888', fontSize: '0.82rem', lineHeight: 1.6 }}>
Brand names and product trademarks are property of their respective owners. Available in the UAE through YS Lootah Robotics.
</p>
</div>
@@ -57,7 +57,7 @@ export default function BrandsPage() {
{robots.length} model{robots.length === 1 ? '' : 's'}
</span>
</div>
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7, maxWidth: 800, marginBottom: '1.5rem' }}>
<p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7, maxWidth: 800, marginBottom: '1.5rem' }}>
{brand.description}
</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem', marginBottom: '2rem' }}>
src/app/bu-sunaidah/page.tsx
+62 -62
View File
@@ -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;
}
src/app/configure/page.tsx
+75 -75
View File
@@ -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;
}
src/app/contact/page.tsx
+5 -5
View File
@@ -21,7 +21,7 @@ export default function ContactPage() {
<h1 style={{ margin: 0, fontSize: 'clamp(2rem, 5vw, 3.2rem)', fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.03em' }}>
<span className="text-gradient" style={{ fontWeight: 500 }}>Talk to our Dubai robotics team.</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
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.
</p>
@@ -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',
}}
>
<span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8891C7' }}>{label}</span>
<span style={{ fontSize: '0.95rem', color: '#FBFBFD', textAlign: 'right' }}>{value}</span>
<span style={{ fontSize: '0.7rem', letterSpacing: '0.22em', textTransform: 'uppercase', color: '#a8a8a8' }}>{label}</span>
<span style={{ fontSize: '0.95rem', color: '#fcfcfc', textAlign: 'right' }}>{value}</span>
</a>
);
}
src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

src/app/globals.css
+120 -120
View File
@@ -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) === */
src/app/industries/[slug]/page.tsx
+101 -101
View File
@@ -461,23 +461,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8891C7;
color: #a8a8a8;
}
.ip-breadcrumbs a { color: #8891C7; text-decoration: none; transition: color 0.25s; }
.ip-breadcrumbs a { color: #a8a8a8; text-decoration: none; transition: color 0.25s; }
.ip-breadcrumbs a:hover { color: #FFFFFF; }
.ip-breadcrumbs li[aria-current="page"] { color: #FFFFFF; }
.ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #4a4f63; }
.ip-breadcrumbs li[aria-hidden] { display: inline-flex; align-items: center; color: #575757; }
/* HERO */
.ip-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);
}
.ip-hero-glow {
@@ -489,14 +489,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-hero-glow-b {
position: absolute; width: 460px; height: 460px; border-radius: 999px;
bottom: -200px; left: -150px;
background: radial-gradient(circle, rgba(74, 102, 216, 0.32), transparent 70%);
background: radial-gradient(circle, rgba(145, 145, 145, 0.32), transparent 70%);
filter: blur(110px); opacity: 0.5; pointer-events: none;
}
.ip-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%);
@@ -515,8 +515,8 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
width: fit-content;
}
.ip-dot {
width: 7px; height: 7px; border-radius: 999px; background: #DEE0F0;
box-shadow: 0 0 14px rgba(222, 224, 240, 0.85);
width: 7px; height: 7px; border-radius: 999px; background: #e7e7e7;
box-shadow: 0 0 14px rgba(231, 231, 231, 0.85);
}
.ip-hero-title {
margin: 0;
@@ -525,7 +525,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
}
.ip-hero-title .text-gradient { font-weight: 500; }
.ip-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;
}
.ip-hero-tags {
@@ -536,9 +536,9 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.35rem 0.65rem;
border-radius: 999px;
border: 1px solid rgba(120, 140, 255, 0.28);
background: rgba(58, 85, 196, 0.12);
color: #DEE0F0;
border: 1px solid rgba(188, 188, 188, 0.28);
background: rgba(127, 127, 127, 0.12);
color: #e7e7e7;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
@@ -553,8 +553,8 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
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),
@@ -571,7 +571,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 10, 14, 0.15) 0%, rgba(10, 10, 14, 0.05) 35%, rgba(10, 10, 14, 0.80) 100%),
linear-gradient(180deg, rgba(12, 12, 12, 0.15) 0%, rgba(12, 12, 12, 0.05) 35%, rgba(12, 12, 12, 0.80) 100%),
radial-gradient(ellipse 100% 70% at 100% 0%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 65%);
pointer-events: none;
}
@@ -587,19 +587,19 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
justify-content: space-between;
gap: 0.6rem;
padding: 0.9rem 1.05rem;
border-top: 1px solid rgba(222, 224, 240, 0.10);
background: linear-gradient(180deg, rgba(10, 10, 14, 0.0), rgba(10, 10, 14, 0.55));
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.55));
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ip-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;
}
.ip-live { color: #7FD6D0; display: inline-flex; align-items: center; gap: 0.4rem; }
.ip-live { color: #ababab; display: inline-flex; align-items: center; gap: 0.4rem; }
.ip-live-dot {
width: 7px; height: 7px; border-radius: 999px; background: #7FD6D0;
box-shadow: 0 0 10px rgba(127, 214, 208, 0.7);
width: 7px; height: 7px; border-radius: 999px; background: #ababab;
box-shadow: 0 0 10px rgba(171, 171, 171, 0.7);
}
@media (min-width: 920px) {
@@ -624,16 +624,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
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;
}
.ip-trust-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 10px;
color: #DEE0F0;
background: rgba(74, 102, 216, 0.18);
border: 1px solid rgba(74, 102, 216, 0.45);
color: #e7e7e7;
background: rgba(145, 145, 145, 0.18);
border: 1px solid rgba(145, 145, 145, 0.45);
}
.ip-trust-label {
display: block;
@@ -641,7 +641,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
letter-spacing: -0.005em;
}
.ip-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) {
.ip-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
@@ -659,23 +659,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
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;
}
.ip-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));
}
.ip-proof-value {
font-size: clamp(1.15rem, 3vw, 1.7rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 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;
@@ -685,7 +685,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: #A6B2D8;
color: #bfbfbf;
}
@media (min-width: 720px) {
.ip-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@@ -712,14 +712,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
overflow: hidden;
background:
radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--acc) 18%, transparent) 0%, transparent 65%),
linear-gradient(180deg, rgba(28, 27, 33, 0.78), rgba(8, 8, 10, 0.95));
border: 1px solid rgba(222, 224, 240, 0.10);
linear-gradient(180deg, rgba(30, 30, 30, 0.78), rgba(9, 9, 9, 0.95));
border: 1px solid rgba(231, 231, 231, 0.10);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-gallery-card:hover .ip-gallery-imgwrap {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--acc) 45%, rgba(120, 140, 255, 0.28));
border-color: color-mix(in srgb, var(--acc) 45%, rgba(188, 188, 188, 0.28));
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--acc) 18%, transparent);
}
.ip-gallery-credit {
@@ -728,10 +728,10 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
right: 0.55rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: rgba(8, 8, 12, 0.72);
border: 1px solid rgba(222, 224, 240, 0.18);
background: rgba(10, 10, 10, 0.72);
border: 1px solid rgba(231, 231, 231, 0.18);
backdrop-filter: blur(8px);
color: #DEE0F0;
color: #e7e7e7;
font-size: 0.56rem;
letter-spacing: 0.22em;
text-transform: uppercase;
@@ -740,7 +740,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-gallery-cap {
margin: 0;
padding: 0 0.15rem;
color: #C9CCDE;
color: #d4d4d4;
font-size: 0.82rem;
line-height: 1.5;
}
@@ -760,15 +760,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.15rem 1.2rem 1.2rem;
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));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-case:hover {
transform: translateY(-3px);
border-color: rgba(74, 102, 216, 0.42);
border-color: rgba(145, 145, 145, 0.42);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}
.ip-case-brand {
@@ -781,13 +781,13 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
padding: 0.3rem 0.55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
background: color-mix(in srgb, var(--acc) 10%, rgba(16, 16, 16, 0.55));
}
.ip-case h3 {
margin: 0; font-size: 1.02rem; font-weight: 600;
color: #FFFFFF; letter-spacing: -0.005em;
}
.ip-case p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
.ip-case p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; }
/* BLOCKS */
.ip-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
@@ -810,17 +810,17 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem;
padding: 1.05rem 1.15rem;
border-radius: 16px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(20, 19, 26, 0.78), rgba(10, 10, 14, 0.94));
border: 1px solid rgba(231, 231, 231, 0.08);
background: linear-gradient(135deg, rgba(23, 23, 23, 0.78), rgba(12, 12, 12, 0.94));
transition: border-color 0.3s, transform 0.3s;
}
.ip-problem:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
.ip-problem:hover { border-color: rgba(145, 145, 145, 0.32); transform: translateY(-2px); }
.ip-problem-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7rem; letter-spacing: 0.22em; font-weight: 800;
color: #8891C7; padding-top: 0.15rem;
color: #a8a8a8; padding-top: 0.15rem;
}
.ip-problem p { margin: 0; color: #DEE0F0; font-size: 0.92rem; line-height: 1.55; }
.ip-problem p { margin: 0; color: #e7e7e7; font-size: 0.92rem; line-height: 1.55; }
/* SOLUTIONS */
.ip-solutions {
@@ -832,47 +832,47 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: flex; flex-direction: column; gap: 0.65rem;
padding: 1.2rem 1.2rem 1.25rem;
border-radius: 18px;
border: 1px solid rgba(222, 224, 240, 0.10);
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;
}
.ip-solution: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);
}
.ip-solution-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));
}
.ip-solution h3 {
margin: 0; font-size: 1.02rem; font-weight: 600;
color: #FFFFFF; letter-spacing: -0.005em;
}
.ip-solution p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.55; flex: 1; }
.ip-solution p { margin: 0; color: #d4d4d4; font-size: 0.86rem; line-height: 1.55; flex: 1; }
.ip-solution-tags {
display: flex; flex-direction: column; gap: 0.4rem;
padding-top: 0.7rem; border-top: 1px solid rgba(222, 224, 240, 0.07);
padding-top: 0.7rem; border-top: 1px solid rgba(231, 231, 231, 0.07);
}
.ip-tag-label {
font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
font-weight: 800; color: #8891C7;
font-weight: 800; color: #a8a8a8;
}
.ip-solution-tags ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.ip-solution-tags li {
font-size: 0.7rem; font-weight: 600; color: #DEE0F0;
font-size: 0.7rem; font-weight: 600; color: #e7e7e7;
padding: 0.2rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(222, 224, 240, 0.10);
background: rgba(20, 19, 26, 0.65);
border: 1px solid rgba(231, 231, 231, 0.10);
background: rgba(23, 23, 23, 0.65);
}
/* USE CASES */
@@ -887,15 +887,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
align-items: center;
padding: 0.95rem 1.05rem;
border-radius: 14px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(18, 18, 26, 0.78), rgba(8, 8, 12, 0.92));
color: #DEE0F0; font-size: 0.92rem; line-height: 1.45;
border: 1px solid rgba(231, 231, 231, 0.08);
background: linear-gradient(135deg, rgba(22, 22, 22, 0.78), rgba(10, 10, 10, 0.92));
color: #e7e7e7; font-size: 0.92rem; line-height: 1.45;
transition: border-color 0.3s, transform 0.3s;
}
.ip-usecase:hover { border-color: rgba(74, 102, 216, 0.35); transform: translateX(2px); }
.ip-usecase:hover { border-color: rgba(145, 145, 145, 0.35); transform: translateX(2px); }
.ip-usecase-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #8891C7;
font-size: 0.7rem; letter-spacing: 0.18em; font-weight: 800; color: #a8a8a8;
}
/* BENEFITS */
@@ -908,23 +908,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
position: relative;
padding: 1.15rem 1.2rem 1.1rem;
border-radius: 16px;
border: 1px solid rgba(222, 224, 240, 0.08);
background: linear-gradient(135deg, rgba(20, 19, 26, 0.82), rgba(10, 10, 14, 0.94));
border: 1px solid rgba(231, 231, 231, 0.08);
background: linear-gradient(135deg, rgba(23, 23, 23, 0.82), rgba(12, 12, 12, 0.94));
transition: border-color 0.3s, transform 0.3s;
}
.ip-benefit:hover { border-color: rgba(74, 102, 216, 0.32); transform: translateY(-2px); }
.ip-benefit:hover { border-color: rgba(145, 145, 145, 0.32); transform: translateY(-2px); }
.ip-benefit-check {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px;
background: rgba(127, 214, 208, 0.18);
border: 1px solid rgba(127, 214, 208, 0.4);
color: #7FD6D0;
background: rgba(171, 171, 171, 0.18);
border: 1px solid rgba(171, 171, 171, 0.4);
color: #ababab;
margin-bottom: 0.55rem;
}
.ip-benefit h3 {
margin: 0 0 0.35rem; font-size: 0.98rem; font-weight: 600; color: #FFFFFF;
}
.ip-benefit p { margin: 0; color: #C9CCDE; font-size: 0.86rem; line-height: 1.5; }
.ip-benefit p { margin: 0; color: #d4d4d4; font-size: 0.86rem; line-height: 1.5; }
/* SUGGESTED ROBOTS */
.ip-robots {
@@ -936,16 +936,16 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.2rem 1.25rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(74, 102, 216, 0.24);
border: 1px solid rgba(145, 145, 145, 0.24);
background:
radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--acc) 20%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.92), rgba(10, 10, 14, 0.96));
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;
}
.ip-robot:hover {
transform: translateY(-3px);
border-color: rgba(74, 102, 216, 0.5);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(58, 85, 196, 0.22);
border-color: rgba(145, 145, 145, 0.5);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 28px rgba(127, 127, 127, 0.22);
}
.ip-robot-head {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
@@ -957,12 +957,12 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-robot-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 999px;
color: #DEE0F0;
border: 1px solid rgba(222, 224, 240, 0.14);
background: rgba(14, 13, 18, 0.6);
color: #e7e7e7;
border: 1px solid rgba(231, 231, 231, 0.14);
background: rgba(16, 16, 16, 0.6);
}
.ip-robot h3 { margin: 0; font-size: 1.08rem; font-weight: 600; color: #FFFFFF; }
.ip-robot p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; flex: 1; }
.ip-robot p { margin: 0; color: #d4d4d4; font-size: 0.88rem; line-height: 1.55; flex: 1; }
.ip-robot-chips {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.3rem;
@@ -976,14 +976,14 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
padding: 0.25rem 0.55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
color: #DEE0F0;
background: color-mix(in srgb, var(--acc) 10%, rgba(16, 16, 16, 0.55));
color: #e7e7e7;
}
.ip-robot-link {
display: inline-flex; align-items: center; gap: 0.45rem;
margin-top: 0.55rem; padding-top: 0.7rem;
border-top: 1px solid rgba(222, 224, 240, 0.07);
font-size: 0.8rem; font-weight: 600; color: #DEE0F0;
border-top: 1px solid rgba(231, 231, 231, 0.07);
font-size: 0.8rem; font-weight: 600; color: #e7e7e7;
text-decoration: none;
transition: color 0.25s, gap 0.25s;
}
@@ -1004,15 +1004,15 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
display: flex; flex-direction: column; gap: 0.45rem;
padding: 1.15rem 1.15rem 1.2rem;
border-radius: 16px;
border: 1px solid rgba(222, 224, 240, 0.10);
border: 1px solid rgba(231, 231, 231, 0.10);
background:
radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
linear-gradient(180deg, rgba(20, 19, 26, 0.85), rgba(8, 8, 12, 0.95));
linear-gradient(180deg, rgba(23, 23, 23, 0.85), rgba(10, 10, 10, 0.95));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-step:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--acc) 38%, rgba(120, 140, 255, 0.32));
border-color: color-mix(in srgb, var(--acc) 38%, rgba(188, 188, 188, 0.32));
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 0 22px color-mix(in srgb, var(--acc) 16%, transparent);
}
.ip-step-num {
@@ -1020,11 +1020,11 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
font-size: 0.68rem;
letter-spacing: 0.22em;
font-weight: 800;
color: color-mix(in srgb, var(--acc) 70%, #B5BDDB);
color: color-mix(in srgb, var(--acc) 70%, #c8c8c8);
padding: 0.2rem 0.5rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
background: color-mix(in srgb, var(--acc) 8%, rgba(14, 13, 18, 0.55));
background: color-mix(in srgb, var(--acc) 8%, rgba(16, 16, 16, 0.55));
align-self: flex-start;
}
.ip-step h3 {
@@ -1036,7 +1036,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
}
.ip-step p {
margin: 0;
color: #C9CCDE;
color: #d4d4d4;
font-size: 0.84rem;
line-height: 1.55;
}
@@ -1045,23 +1045,23 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-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);
}
.ip-cta-glow {
position: absolute; width: 480px; height: 480px; border-radius: 999px;
top: -160px; left: -160px;
background: radial-gradient(circle, rgba(74, 102, 216, 0.45), transparent 70%);
background: radial-gradient(circle, rgba(145, 145, 145, 0.45), transparent 70%);
filter: blur(100px); opacity: 0.55; pointer-events: none;
}
.ip-cta-grid {
position: absolute; inset: 0;
background:
linear-gradient(rgba(74, 102, 216, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(74, 102, 216, 0.05) 1px, transparent 1px);
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%);
@@ -1083,7 +1083,7 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
font-size: clamp(1.65rem, 3vw, 2.25rem);
font-weight: 400; letter-spacing: -0.02em; color: #FFFFFF; line-height: 1.1;
}
.ip-cta-text p { margin: 0; color: #DEE0F0; font-size: 0.95rem; line-height: 1.65; }
.ip-cta-text p { margin: 0; color: #e7e7e7; font-size: 0.95rem; line-height: 1.65; }
.ip-cta-actions {
display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-start;
}
src/app/industries/page.tsx
+33 -33
View File
@@ -38,7 +38,7 @@ const PROOF = [
];
export default function IndustriesPage() {
const accent = '#3a55c4';
const accent = '#7f7f7f';
return (
<>
@@ -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; }
src/app/layout.tsx
+1 -1
View File
@@ -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({
src/app/page.tsx
+1 -1
View File
@@ -160,7 +160,7 @@ function SectionHeading({ eyebrow, title, description }: { eyebrow: string; titl
<span className="text-gradient" style={{ fontWeight: 500 }}>{title}</span>
</h2>
{description && (
<p style={{ margin: 0, color: '#DEE0F0', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: 'clamp(0.95rem, 2vw, 1.05rem)', lineHeight: 1.7 }}>
{description}
</p>
)}
src/app/privacy-policy/page.tsx
+6 -6
View File
@@ -6,35 +6,35 @@ export default function PrivacyPolicyPage() {
return (
<>
<Navbar />
<div style={{ background: '#050508', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
<div style={{ background: '#070707', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
<main style={{ maxWidth: '800px', margin: '0 auto', padding: '12rem 1.5rem 6rem', lineHeight: 1.8 }}>
<h1 style={{ fontSize: '3rem', fontWeight: 200, marginBottom: '1rem', letterSpacing: '-0.03em' }}>Privacy <span style={{ color: 'var(--color-gold)', fontWeight: 500 }}>Policy</span></h1>
<p style={{ color: '#8891C7', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
<p style={{ color: '#a8a8a8', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>1. Information We Collect</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>2. How We Use Your Information</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>3. Data Security</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>4. Contact Us</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
If you have questions or concerns about this Privacy Policy, please reach out to us at:
<br/><br/>
<strong>YS Lootah Robotics</strong><br/>
src/app/robots/CatalogClient.tsx
+5 -5
View File
@@ -71,7 +71,7 @@ function CatalogInner() {
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.5rem' }}>
<span style={{ color: '#8891C7', fontSize: '0.85rem' }}>
<span style={{ color: '#a8a8a8', fontSize: '0.85rem' }}>
{filtered.length} robot{filtered.length === 1 ? '' : 's'} found
</span>
{(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() {
</div>
{filtered.length === 0 ? (
<div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#DEE0F0' }}>
<div className="card" style={{ padding: '2rem', textAlign: 'center', color: '#e7e7e7' }}>
No robots match these filters yet. Try a different brand or category, or{' '}
<a href="/contact/" style={{ color: '#DEE0F0', textDecoration: 'none' }}>contact us</a> for tailored options.
<a href="/contact/" style={{ color: '#e7e7e7', textDecoration: 'none' }}>contact us</a> for tailored options.
</div>
) : (
<div
@@ -118,7 +118,7 @@ function CatalogInner() {
export function CatalogClient() {
return (
<Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#DEE0F0' }}>Loading catalog…</div>}>
<Suspense fallback={<div className="card" style={{ padding: '2rem', color: '#e7e7e7' }}>Loading catalog…</div>}>
<CatalogInner />
</Suspense>
);
src/app/robots/[slug]/page.tsx
+12 -12
View File
@@ -43,12 +43,12 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
<main style={{ paddingTop: 'clamp(6rem, 10vw, 8rem)', paddingBottom: 'clamp(4rem, 8vw, 6rem)' }}>
<div className="container-wide" style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(3rem, 6vw, 5rem)' }}>
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#8891C7' }}>
<Link href="/" style={{ color: '#8891C7', textDecoration: 'none' }}>Home</Link>
<nav style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', fontSize: '0.78rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a8a8a8' }}>
<Link href="/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Home</Link>
<span>/</span>
<Link href="/robots/" style={{ color: '#8891C7', textDecoration: 'none' }}>Robots</Link>
<Link href="/robots/" style={{ color: '#a8a8a8', textDecoration: 'none' }}>Robots</Link>
<span>/</span>
<span style={{ color: '#DEE0F0' }}>{robot.name}</span>
<span style={{ color: '#e7e7e7' }}>{robot.name}</span>
</nav>
<section
@@ -73,8 +73,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
padding: '0.3rem 0.55rem',
borderRadius: 999,
background: 'rgba(5, 5, 5,0.6)',
border: '1px solid rgba(39, 63, 148,0.2)',
color: '#8891C7',
border: '1px solid rgba(94, 94, 94, 0.2)',
color: '#a8a8a8',
fontSize: '0.62rem',
letterSpacing: '0.2em',
textTransform: 'uppercase',
@@ -94,8 +94,8 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
{robot.name}
</span>
</h1>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
<p style={{ margin: 0, color: '#DEE0F0', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: '1.05rem', lineHeight: 1.5 }}>{robot.tagline}</p>
<p style={{ margin: 0, color: '#e7e7e7', fontSize: '1rem', lineHeight: 1.7 }}>{robot.longDescription}</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.625rem' }}>
<a className="btn btn-primary" href="#inquire">Request quotation</a>
@@ -123,14 +123,14 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
<Block title="Key features">
<ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
{robot.features.map((f) => (
<li key={f} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{f}</li>
<li key={f} style={{ color: '#e7e7e7', lineHeight: 1.6 }}>{f}</li>
))}
</ul>
</Block>
<Block title="Use cases">
<ul style={{ margin: 0, paddingLeft: '1.1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
{robot.useCases.map((u) => (
<li key={u} style={{ color: '#DEE0F0', lineHeight: 1.6 }}>{u}</li>
<li key={u} style={{ color: '#e7e7e7', lineHeight: 1.6 }}>{u}</li>
))}
</ul>
</Block>
@@ -156,7 +156,7 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
Request a quotation for {robot.name}.
</span>
</h2>
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7 }}>
Tell us about your venue, timeline, and use case. We will respond with availability, configuration options, and pricing for the UAE.
</p>
</div>
@@ -166,7 +166,7 @@ export default async function RobotDetailPage({ params }: { params: Promise<Para
<div className="card" style={{ padding: 'clamp(1.5rem, 4vw, 2.25rem)', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<span className="eyebrow">Talk to an advisor</span>
<h3 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Prefer a quick conversation?</h3>
<p style={{ margin: 0, color: '#DEE0F0', lineHeight: 1.7 }}>
<p style={{ margin: 0, color: '#e7e7e7', lineHeight: 1.7 }}>
Call our Dubai team or message us on WhatsApp we will share availability and demo slots for {robot.name}.
</p>
<a className="btn btn-ghost" href="tel:+971559482728">Call +971 55 948 2728</a>
src/app/robots/page.tsx
+27 -27
View File
@@ -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;
}
src/app/terms-of-service/page.tsx
+6 -6
View File
@@ -6,35 +6,35 @@ export default function TermsOfServicePage() {
return (
<>
<Navbar />
<div style={{ background: '#050508', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
<div style={{ background: '#070707', minHeight: '100vh', color: '#ffffff', fontFamily: 'Inter, sans-serif' }}>
<main style={{ maxWidth: '800px', margin: '0 auto', padding: '12rem 1.5rem 6rem', lineHeight: 1.8 }}>
<h1 style={{ fontSize: '3rem', fontWeight: 200, marginBottom: '1rem', letterSpacing: '-0.03em' }}>Terms of <span style={{ color: 'var(--color-gold)', fontWeight: 500 }}>Service</span></h1>
<p style={{ color: '#8891C7', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
<p style={{ color: '#a8a8a8', fontSize: '1rem', marginBottom: '4rem' }}>Effective Date: {new Date().toLocaleDateString('en-AE')}</p>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>1. Acceptance of Terms</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>2. Use of the Site & Configurator</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>3. Intellectual Property Rights</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>
<section style={{ marginBottom: '3rem' }}>
<h2 style={{ fontSize: '1.5rem', fontWeight: 500, color: '#e8e0cf', marginBottom: '1rem' }}>4. Disclaimer of Warranties</h2>
<p style={{ color: '#DEE0F0', marginBottom: '1rem' }}>
<p style={{ color: '#e7e7e7', marginBottom: '1rem' }}>
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.
</p>
</section>