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/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;
}