refactor: standardize background color to #121212

- Replaced inconsistent gray-900 and #171717 background colors with unified #121212 across all pages
- Removed unused imports from multiple component files
- Cleaned up trailing spaces in className attributes

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/tailwind.css'
-import App from './App.tsx'
+import App from './App'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

src/pages/agents/AgentBento.tsx

@@ -94,12 +94,12 @@ export function AgentBento() {
             >
               {!card.noBorder && (
                 <div
-                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${card.rounded}`}
+                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] `}
                 />
               )}
 
               <div
-                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
+                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
               >
                 {/* ✅ VIDEO instead of animation */}
                 {card.video ? (
@@ -145,7 +145,7 @@ export function AgentBento() {
 
               {!card.noBorder && (
                 <div
-                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`}
+                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 `}
                 />
               )}
             </div>

src/pages/agents/BentoSection.tsx

@@ -69,7 +69,7 @@ export function BentoSection() {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.2 }}
               transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
-              className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
+              className="overflow-hidden rounded-2xl border border-gray-800 bg-[#121212]  p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
             >
               <video
                 src={item.video}

src/pages/agents/Companies.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { P, Eyebrow } from "@/components/Texts";
 import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
 
 

src/pages/cloud/CalltoAction.tsx

@@ -5,9 +5,9 @@ import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section className="relative overflow-hidden bg-gray-900">
+    <section className="relative overflow-hidden bg-[#121212]">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}

src/pages/cloud/CloudFeatures.tsx

@@ -406,7 +406,7 @@ export function CloudFeatures() {
     <section
       id="overview"
       aria-label="Features for investing all your money"
-      className="bg-gray-900 py-20 sm:py-32"
+      className="bg-[#121212]  py-20 sm:py-32"
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">

src/pages/cloud/archive/CloudGettingStarted.tsx

@@ -69,7 +69,7 @@ export function CloudGettingStarted() {
   return (
     <section
       id="getting-started"
-      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+      className="relative overflow-hidden bg-[#121212]  py-24 sm:py-32"
     >
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
       <Container className="relative">

src/pages/compute/CallToAction.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section className="relative overflow-hidden bg-gray-900">
+    <section className="relative overflow-hidden bg-[#121212] ">
       {/* ✅ Top horizontal line with spacing */}
       <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />

src/pages/compute/ComputeArchitecture.tsx

@@ -55,9 +55,9 @@ const deterministicCards = [
 
 export function ComputeArchitecture() {
   return (
-    <section className="relative w-full bg-[#171717] overflow-hidden">
+    <section className="relative w-full bg-[#121212] overflow-hidden">
       {/* ✅ Top horizontal line */}
-      <div className="max-w-7xl bg-[#171717] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
       <div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">

src/pages/compute/ComputeCodeTabs.tsx

@@ -72,7 +72,7 @@ export function ComputeCodeTabs() {
         />
 
         <div className="mx-auto max-w-2xl sm:mx-0 sm:max-w-none">
-          <div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900 ring-1 ring-white/10">
+          <div className="w-screen overflow-hidden rounded-tl-xl bg-[#121212]  ring-1 ring-white/10">
 
             {/* FILE TABS */}
             <div className="flex bg-gray-800/40 ring-1 ring-white/5">

src/pages/compute/archive/ComputeDeveloperExperience.tsx

@@ -99,7 +99,7 @@ export function ComputeDeveloperExperience() {
                   {sample.description}
                 </p>
               </div>
-              <div className="mt-auto bg-gray-900 p-6">
+              <div className="mt-auto bg-[#121212]  p-6">
                 <pre className="overflow-auto text-left text-xs leading-relaxed text-cyan-100">
                   <code>{sample.code}</code>
                 </pre>

src/pages/download/DevHub.tsx

@@ -36,7 +36,7 @@ const features = [
 
 export function DevHub() {
   return (
-    <div className="bg-gray-900 py-24 sm:py-32">
+    <div className="bg-[#121212]  py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
@@ -54,7 +54,7 @@ export function DevHub() {
                 href={feature.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="block rounded-2xl border border-gray-800 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
+                className="block rounded-2xl border border-gray-800 bg-[#121212] /40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
               >
                 <feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
                 <dt className="font-semibold text-white">{feature.name}</dt>

src/pages/gpu/GpuDesign.tsx

@@ -1,5 +1,3 @@
-import { Container } from '@/components/Container'
-import { Eyebrow, H3, CT } from '@/components/Texts'
 import {
   BoltIcon,
   BanknotesIcon,

src/pages/gpu/GpuOverview.tsx

@@ -8,7 +8,6 @@ import {
 
 import { Container } from '@/components/Container'
 import { Eyebrow, SectionHeader, P } from '@/components/Texts'
-import { Button } from '@/components/Button'
 
 const coreFeatures = [
   {

src/pages/gpu/archive/GpuGettingStarted.tsx

@@ -42,7 +42,7 @@ export function GpuGettingStarted() {
   return (
     <section
       id="gpu-getting-started"
-      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+      className="relative overflow-hidden bg-[#121212]  py-24 sm:py-32"
     >
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.12),transparent_60%)]" />
       <Container className="relative">

src/pages/home/CallToAction.tsx

@@ -3,9 +3,9 @@ import { Button } from '@/components/Button'
 
 export function CallToAction() {
   return (
-    <section className='relative overflow-hidden bg-gray-900'>
+    <section className='relative overflow-hidden bg-[#121212]'>
     {/* ✅ Top horizontal line with spacing */}
-    <div className="max-w-7xl  bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    <div className="max-w-7xl  bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
     {/* === Content === */}
     <div className="w-full border-t border-l border-r border-gray-800 " />
       <div  

src/pages/home/StackSectionDark.tsx

@@ -7,7 +7,7 @@ import { FadeIn } from "@/components/ui/FadeIn";
 
 export function StackSectionDark() {
   return (
-    <section className="relative w-full bg-[#171717] overflow-hidden">
+    <section className="relative w-full bg-[#121212] overflow-hidden">
        {/* ✅ Top horizontal line with spacing */}
       <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />

src/pages/home/archive/HomeFeaturesDark.tsx

@@ -42,7 +42,7 @@ export function HomeFeaturesDark() {
         <div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
           <div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
             {features.map((feature) => (
-                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-800 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
+                                          <div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-800 bg-[#121212] /50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
                                                 <div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
                   <feature.icon className="h-12 w-12 text-cyan-500" />
                 </div>

src/pages/network/About.tsx

@@ -6,7 +6,7 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
+      className="relative overflow-hidden bg-[#121212]  py-20 lg:py-32 lg:top-0 top-0"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />

src/pages/network/Features.tsx

@@ -3,7 +3,7 @@ import MessageBus from './animations/MessageBus'
 import ProxyDetection from './animations/ProxyDetection'
 import ProxyForwarding from './animations/ProxyForwarding'
 import ContentDistribution from './animations/ContentDistribution'
-import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
+import { P, H3, Eyebrow } from '@/components/Texts'
 
 export function Features() {
   return (

src/pages/network/Hero.tsx

@@ -2,7 +2,7 @@ import { useId } from 'react'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
 import phoneFrame from '../../images/phoneframe.png'
-import { H3, Eyebrow, P, CT, CP } from "@/components/Texts";
+import { H3, P, CT } from "@/components/Texts";
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId()

src/pages/network/NetworkUsecases.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { Eyebrow, SectionHeader, P, CT, CP } from "@/components/Texts";
+import { Eyebrow, SectionHeader, P } from "@/components/Texts";
 import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
 import {
   LockClosedIcon,
@@ -100,20 +100,22 @@ export function NetworkUsecases() {
               ) : (
                 <>
                   {/* ✅ Icon above title */}
-                  <div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100 mb-4">
+                                    {item.icon && (
-                    <item.icon className="h-6 w-6 text-cyan-600" />
+                    <div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100 mb-4">
-                  </div>
+                      <item.icon className="h-6 w-6 text-cyan-600" />
+                    </div>
+                  )}
 
-                  <CT className="text-lg font-semibold text-gray-900">
+                                    <p className="text-lg font-semibold text-gray-900">
                     {item.title}
-                  </CT>
+                  </p>
 
-                  <CP className="mt-2 text-gray-600 leading-snug">
+                                    <p className="mt-2 text-gray-600 leading-snug">
                     {item.description}
-                  </CP>
+                  </p>
-                  <CP className="mt-3 text-xs font-medium text-cyan-700">
+                                    <p className="mt-3 text-xs font-medium text-cyan-700">
                     {item.ideal}
-                  </CP>
+                  </p>
                 </>
               )}
             </li>

src/pages/storage/CallToAction.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section className="relative overflow-hidden bg-gray-900">
+    <section className="relative overflow-hidden bg-[#121212] ">
       {/* ✅ Top horizontal line with spacing */}
       <div className="max-w-7xl  mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />

src/pages/storage/StorageArchitecture.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Container } from "@/components/Container";
-import { Eyebrow, SectionHeader, P, H3, H4, H5, CT, CP } from "@/components/Texts";
+import { Eyebrow, P, H3, H5, CP } from "@/components/Texts";
 
 const architecture = [
   {
@@ -49,7 +49,7 @@ export function StorageArchitecture() {
             {architecture.map((item, index) => (
               <button
                 key={item.title}
-                className={`w-full border bg-[#171717] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8 
+                className={`w-full border bg-[#121212] text-left border-white/10 p-4 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8 
                   ${active === index
                     ? "border-cyan-400 shadow-md"
                     : "border-gray-800 hover:border-cyan-200 hover:shadow-sm"}`}
@@ -61,7 +61,7 @@ export function StorageArchitecture() {
           </div>
 
           {/* RIGHT — 2 columns */}
-          <div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#171717] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
+          <div className="lg:col-span-2 flex items-center justify-center border border-gray-800 bg-[#121212] p-10 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/8" >
             <div
               key={active} // ✅ force smooth transition
               className="transition-opacity duration-300 opacity-100 animate-fade"

src/pages/storage/StorageCapabilitiesNew.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef } from "react";
-import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
+import { Eyebrow, H5 } from "@/components/Texts";
 import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
 
 const capabilities = [

src/pages/storage/StorageCoreValue.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Container } from "@/components/Container";
-import { H3, P, Eyebrow, CT, CP } from "@/components/Texts";
+import { H3, P, Eyebrow, CT } from "@/components/Texts";
 import Encrypted from "./animation/Encrypted";
 import SelfHealing from "./animation/SelfHealing";
 import Residency from "./animation/Residency";

src/pages/storage/StorageOverview.tsx

@@ -1,4 +1,4 @@
-import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
+import { Small } from '@/components/Texts'
 
 const highlights = [
   {

src/pages/storage/archive/StorageDeveloperExperience.tsx

@@ -75,7 +75,7 @@ export function StorageDeveloperExperience() {
   return (
     <section
       id="storage-developer-experience"
-      className="bg-gray-900 py-24 sm:py-32"
+      className="bg-[#121212]  py-24 sm:py-32"
     >
       <Container>
         <div className="mx-auto max-w-3xl text-center">