feat(inspector): update visual styling to match landing page (#166)

feat(inspector): update visual styling to match landing page

- Update color scheme to match website (black bg, white/10 borders)
- Add Open Sans font
- Update button styles (white primary buttons)
- Add collapsible tool results and status messages
- Replace avatar letters with icons (User, Settings, AlertTriangle)
- Add status dividers for session/turn events
- Update feature coverage badges to lighter grey
- Remove pill styling from event times
- Update popup menus to solid black background

feat(website): add Pi agent to hero diagram and update styling

- Add Pi agent with cyan color (#06B6D4) to the diagram
- Update layout to 3 agents on top row, 2 on bottom row
- Add backdrop-blur glass effects for modern look
- Add animated dot background that changes with active adapter
- Add scroll fade effect for hero section
- Update subtitle to include Pi in supported agents list
- Increase 'CONNECTED TO' label font size

feat(website): add site styling updates and SEO improvements

- Update component styling to match Rivet design (FAQ, FeatureGrid, etc.)
- Add SEO improvements (sitemap, robots.txt, meta tags, Open Graph)
- Remove CTASection component
- Update footer tagline
- Add Pi logo

frontend/packages/website/src/components/Inspector.tsx

@@ -1,23 +1,45 @@
 'use client';
 
+import { motion } from 'framer-motion';
+
 export function Inspector() {
   return (
-    <section className="relative overflow-hidden border-t border-white/5 py-24">
-      <div className="mx-auto max-w-4xl px-6 text-center">
-        <h2 className="mb-4 text-3xl font-medium tracking-tight text-white md:text-5xl">
-          Built-in Debugger
-        </h2>
-        <p className="mb-12 text-lg text-zinc-400">
-          Inspect sessions, view event payloads, and troubleshoot without writing code.
-        </p>
+    <section className="border-t border-white/10 py-48">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="mb-12 text-center">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="mb-2 text-2xl font-normal tracking-tight text-white md:text-4xl"
+          >
+            Built-in Debugger
+          </motion.h2>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="mx-auto max-w-xl text-base leading-relaxed text-zinc-500"
+          >
+            Inspect sessions, view event payloads, and troubleshoot without writing&nbsp;code.
+          </motion.p>
+        </div>
 
-        <div className="overflow-hidden rounded-2xl border border-white/10 shadow-2xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          className="overflow-hidden rounded-2xl border border-white/10"
+        >
           <img
             src="/images/inspector.png"
             alt="Sandbox Agent Inspector"
             className="w-full"
           />
-        </div>
+        </motion.div>
       </div>
     </section>
   );