ready to add animations

src/pages/home/HomePage.tsx

@@ -3,54 +3,92 @@ import { ScrollLockedSection } from './components/ScrollLockedSection';
 import { CtaSection } from './components/CtaSection';
 import { FooterSection } from './components/FooterSection';
 
+const highlightTextClass = 'text-brand-500';
+
 const sections = [
   {
-    id: 'deploy',
-    eyebrow: 'Deploy',
-    title: 'Launch seamlessly across your environments.',
+    id: 'datacenter-economy',
+    eyebrow: 'Datacenter Economy',
+    title: (
+      <>
+        The Datacenter Economy,{' '}
+        <span className={highlightTextClass}>Decentralized</span>
+      </>
+    ),
     description:
-      'Use this space to outline the deployment story. Highlight speed, reliability, or any differentiators that matter for your product rollout.',
+      'Physical infrastructure meets profitable capacity. Deploy hardware, join the grid, earn from day one.',
   },
   {
-    id: 'plug_play',
-    eyebrow: 'Plug & Play',
-    title: 'Connect data sources without orchestration headaches.',
+    id: 'deploy-anywhere',
+    eyebrow: 'Deployment Tiers',
+    title: (
+      <>
+        <span className={highlightTextClass}>Deploy</span> Anywhere, Any Scale
+      </>
+    ),
     description:
-      'Describe how integrations work and communicate the ease of getting started. Keep the copy short and scannable.',
+      'Tier-H for homes and communities. Tier-S for enterprises and unused commercial space. Same economics, different scale.',
   },
   {
-    id: 'slice',
-    eyebrow: 'Slice',
-    title: 'Break complex geospatial datasets into digestible layers.',
+    id: 'autonomous-stack',
+    eyebrow: 'Autonomous Stack',
+    title: (
+      <>
+        Five Primitives, <span className={highlightTextClass}>Zero Dependencies</span>
+      </>
+    ),
     description:
-      'Talk through the slicing concept in a sentence or two. This is placeholder text while the final story is drafted.',
+      'Hardware ships with OS, Compute, Storage, Network, and GPU built-in. Fully autonomous operation eliminates vendor lock-in completely.',
   },
   {
-    id: 'global',
-    eyebrow: 'Global',
-    title: 'Stay synchronized across every region you operate in.',
+    id: 'capacity-marketplace',
+    eyebrow: 'Marketplace',
+    title: (
+      <>
+        Local Hardware, <span className={highlightTextClass}>Global</span> Liquidity
+      </>
+    ),
     description:
-      'Explain the global coverage or synchronization narrative you want to share. Replace this block with final messaging later.',
+      'The OS divides capacity into tradeable slices. Use what you need. Sell idle capacity automatically. Access scales instantly.',
   },
   {
-    id: 'profit',
-    eyebrow: 'Profit',
-    title: 'Make the commercial case with defensible metrics.',
+    id: 'dual-revenue',
+    eyebrow: 'Revenue Streams',
+    title: (
+      <>
+        <span className={highlightTextClass}>Earn</span> While You Operate
+      </>
+    ),
     description:
-      'Use these lines to tease the ROI conversation. Mention efficiency, cost savings, or other proof points once they are ready.',
+      'Run your workloads during business hours. Rent excess capacity 24/7. Infrastructure becomes an income-generating asset, not a cost center.',
   },
   {
-    id: 'usecases',
-    eyebrow: 'Use Cases',
-    title: 'Show how teams activate the platform day-to-day.',
+    id: 'economic-advantage',
+    eyebrow: 'Economics',
+    title: (
+      <>
+        <span className={highlightTextClass}>Lower Costs</span>, Higher Margins
+      </>
+    ),
     description:
-      'Imagine this section as a carousel or story. For now, it is a placeholder where future customer narratives will land.',
+      'Minimal datacenter build costs. Energy-efficient autonomous operation. No enterprise maintenance overhead. Math works from day one.',
+  },
+  {
+    id: 'instant-demand',
+    eyebrow: 'Demand',
+    title: (
+      <>
+        <span className={highlightTextClass}>Built-In</span> Customer Base
+      </>
+    ),
+    description:
+      'Applications already consume capacity from the grid. Deploy hardware, connect to marketplace, start earning. No customer acquisition needed.',
   },
 ];
 
 export const HomePage = () => {
   return (
-    <div className="flex min-h-screen flex-col bg-mist text-ink">
+    <div className="flex min-h-screen flex-col bg-black text-white">
       <div className="flex flex-col">
         <HeroSection />
         {sections.map((section) => (