refactor: replace RobotCategoryGrid with CategoryShowcaseScroll and update styles across components

- Updated HomePage to use CategoryShowcaseScroll instead of RobotCategoryGrid for better category display.
- Modified BrandShowcase component to adjust background gradients and text colors for improved aesthetics.
- Changed CompanyStory component to enhance visual consistency with updated accent colors.
- Refined ExclusiveAccessSection to align with new design standards, including gradient adjustments.
- Enhanced Hero3DRobotics with new gradient backgrounds and updated text colors for better readability.
- Updated RoboticsScrollShowcase to reflect new color scheme and improved text visibility.
- Adjusted RoboticsSplineShowcase to maintain design consistency with updated colors and gradients.
- Improved MotionSection to enhance scroll behavior and visibility transitions.
- Updated container-scroll-animation styles for better visual effects.
- Introduced new CategoryShowcaseScroll component for a more dynamic category display experience.

src/app/globals.css

@@ -15,7 +15,7 @@
   --color-blue-deep: #1a2e6e;
   --color-blue-bright: #3a55c4;
   --color-silver: #DEE0F0;
-  --color-silver-soft: #BFC3E2;
+  --color-silver-soft: #D7DBEA;
   --color-steel: #8891C7;
   --color-graphite: #221F20;
   --color-white: #FBFBFD;
@@ -23,7 +23,7 @@
   /* Accent aliases (kept for legacy class names) */
   --color-gold: #DEE0F0;
   --color-accent: #273F94;
-  --color-accent-2: #BFC3E2;
+  --color-accent-2: #D7DBEA;
   --color-accent-3: #8891C7;
   --color-accent-hover: #3a55c4;
 
@@ -34,14 +34,14 @@
   --color-text-dim: #6a73a5;
 
   /* Borders */
-  --color-border: rgba(191, 195, 226, 0.18);
-  --color-border-strong: rgba(191, 195, 226, 0.36);
-  --color-border-light: rgba(191, 195, 226, 0.08);
+  --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-neutral: rgba(255, 255, 255, 0.08);
 
   /* Glass */
   --color-glass-bg: rgba(28, 27, 33, 0.6);
-  --color-glass-border: rgba(191, 195, 226, 0.22);
+  --color-glass-border: rgba(199, 207, 230, 0.22);
   --color-glass-highlight: rgba(222, 224, 240, 0.06);
 
   /* Spacing */
@@ -129,7 +129,7 @@ html {
 
 /* === Typography gradients (metallic silver-blue) === */
 .text-gradient {
-  background: linear-gradient(135deg, #FBFBFD 0%, #DEE0F0 45%, #8891C7 100%);
+  background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -137,7 +137,7 @@ html {
 }
 
 .text-gradient-accent {
-  background: linear-gradient(135deg, #FBFBFD 0%, #DEE0F0 35%, #BFC3E2 65%, #273F94 100%);
+  background: linear-gradient(135deg, #FFFFFF 0%, #DEE0F0 50%, #8891C7 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -186,8 +186,8 @@ html {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(rgba(191, 195, 226, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(191, 195, 226, 0.05) 1px, transparent 1px);
+    linear-gradient(rgba(199, 207, 230, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(199, 207, 230, 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%);
@@ -213,7 +213,7 @@ html {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background: linear-gradient(110deg, transparent 30%, rgba(191, 195, 226, 0.07) 50%, transparent 70%);
+  background: linear-gradient(110deg, transparent 30%, rgba(199, 207, 230, 0.07) 50%, transparent 70%);
   background-size: 250% 100%;
   animation: lightSweep 9s ease-in-out infinite;
   mix-blend-mode: screen;
@@ -297,7 +297,7 @@ html {
 .btn-ghost {
   background: rgba(222, 224, 240, 0.04);
   color: #FBFBFD;
-  border-color: rgba(191, 195, 226, 0.28);
+  border-color: rgba(199, 207, 230, 0.28);
   backdrop-filter: blur(12px);
 }
 .btn-ghost:hover {

src/app/page.tsx

@@ -3,7 +3,7 @@ import { Navbar } from '@/components/Navbar';
 import { FooterAndContact } from '@/components/FooterAndContact';
 import { Hero3DRobotics } from '@/components/robotics/Hero3DRobotics';
 import { BrandShowcase } from '@/components/robotics/BrandShowcase';
-import { RobotCategoryGrid } from '@/components/robotics/RobotCategoryGrid';
+import { CategoryShowcaseScroll } from '@/components/robotics/CategoryShowcaseScroll';
 import { RobotProductCard } from '@/components/robotics/RobotProductCard';
 import { IndustryUseCases } from '@/components/robotics/IndustryUseCases';
 import { DemoCTA } from '@/components/robotics/DemoCTA';
@@ -88,9 +88,9 @@ export default function HomePage() {
             <SectionHeading
               eyebrow="Robot categories"
               title="From quadruped patrol to humanoid concierge."
-              description="Find the right robot for your business humanoid for events and education, quadruped for inspection and security, service and delivery for hospitality."
+              description="Find the right robot for your business — humanoid platforms for events and education, quadrupeds for inspection and security, and service robots for hospitality, delivery, and cleaning."
             />
-            <RobotCategoryGrid />
+            <CategoryShowcaseScroll />
           </div>
         </MotionSection>