feat: update homepage layout and visual styling

- Reorganized homepage sections by adding HomeHostingDark and HomeComparisonTable components
- Changed background color of slider section from #0b0b0b to #111111 for better contrast
- Updated card styling in CloudArchitecture to use semi-transparent gray background (bg-gray-50/25)
- Modified paragraph text styling to use leading-tight instead of leading-relaxed for better readability
- Reordered HomeBenefits section placement in the page flow

src/pages/home/HomeComparisonTable.tsx

@@ -0,0 +1,60 @@
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Eyebrow, H3, P, CT } from '../../components/Texts'
+
+const features = [
+  { name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
+  { name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+]
+
+export function HomeComparisonTable() {
+  return (
+    <div className="relative bg-white py-24 lg:py-32">
+      <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-6xl lg:px-8">
+        <Eyebrow>COMPARISON</Eyebrow>
+        <H3 className="mt-2">Why People Choose Mycelium</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
+          or uptime to centralized platforms.
+        </P>
+
+        <div className="mt-16 overflow-x-auto">
+          <table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
+            <thead className="bg-cyan-50/60">
+              <tr className="text-base font-semibold text-slate-700">
+                <th className="py-4 pl-3 text-left">Capability</th>
+                <th className="py-4 pl-3 text-left">Traditional Cloud</th>
+                <th className="py-4 pl-3 text-left">Mycelium</th>
+              </tr>
+            </thead>
+
+            <tbody className="divide-y divide-slate-200">
+              {features.map((feature) => (
+                <tr key={feature.name}>
+                  <td className="py-3 pl-3">
+                    <CT>{feature.name}</CT>
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.cloud}
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.mycelium}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+      </div>
+    </div>
+  )
+}