chore: Update layout and add XatuCallToAction components

frontend/src/components/CallToAction.tsx

@@ -0,0 +1,35 @@
+import { ArrowRight, Share2 } from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+interface CallToActionProps {
+  title: string
+  description: string
+  buttonText: string
+  buttonLink: string
+}
+
+export const CallToAction = ({ title, description, buttonText, buttonLink }: CallToActionProps) => {
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-cyan-400/30 bg-gradient-to-br from-cyan-500/20 via-purple-500/10 to-cyan-500/20 shadow-[0_0_30px_-5px_rgba(6,182,212,0.25)]">
+      <div className="absolute inset-0 bg-grid-white/[0.02]" />
+      <div className="relative p-6">
+        <div className="flex items-center gap-4">
+          <div className="h-12 w-12 rounded-xl bg-cyan-400/20 p-2.5 flex items-center justify-center ring-1 ring-cyan-400/30 shadow-[0_0_15px_-3px_rgba(6,182,212,0.4)]">
+            <Share2 className="h-6 w-6 text-cyan-300" />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-purple-400">{title}</h3>
+            <p className="mt-1 text-base text-gray-200">{description}</p>
+          </div>
+          <Link
+            to={buttonLink}
+            className="flex-shrink-0 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-cyan-500/20 to-purple-500/20 hover:from-cyan-500/30 hover:to-purple-500/30 border border-cyan-400/50 rounded-lg transition-all hover:scale-105 shadow-[0_0_15px_-3px_rgba(6,182,212,0.3)]"
+          >
+            {buttonText}
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+} 

frontend/src/components/layout/Navigation.tsx

@@ -43,7 +43,7 @@ export const Navigation = ({ onToggleSidebar, showMenuButton }: NavigationProps)
 
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center">
             {showMenuButton && (
@@ -58,9 +58,12 @@ export const Navigation = ({ onToggleSidebar, showMenuButton }: NavigationProps)
             )}
             <Link to="/" className="flex items-center gap-x-3">
               <img src="/ethpandaops.png" alt="Logo" className="h-8 w-auto" />
-              <span className="text-xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
-                The Lab
-              </span>
+              <div className="flex flex-col">
+                <span className="text-xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-500 text-transparent bg-clip-text">
+                  The Lab
+                </span>
+                <span className="text-[10px] text-gray-400 -mt-1">by EthPandaOps</span>
+              </div>
             </Link>
           </div>
 

frontend/src/components/layout/Sidebar.tsx

@@ -10,6 +10,7 @@ interface SidebarProps {
 
 interface SidebarItem {
   name: string
+  path: string
   items: {
     name: string
     path: string
@@ -23,6 +24,7 @@ interface SidebarItem {
 const sidebarItems: SidebarItem[] = [
   {
     name: 'Experiments',
+    path: '/experiments',
     items: [
       { 
         name: 'Xatu',
@@ -91,7 +93,7 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
       </Transition.Root>
 
       {/* Desktop Sidebar */}
-      <div className="hidden lg:fixed lg:top-20 lg:inset-y-0 lg:z-20 lg:flex lg:w-72">
+      <div className="hidden lg:fixed lg:top-16 lg:inset-y-0 lg:z-20 lg:flex lg:w-72">
         <SidebarContent />
       </div>
     </>
@@ -107,7 +109,9 @@ const SidebarContent = () => {
         <ul role="list" className="flex flex-1 flex-col gap-y-7">
           {sidebarItems.map((section) => (
             <li key={section.name}>
-              <div className="text-xs font-semibold leading-6 text-cyan-400">{section.name}</div>
+              <Link to={section.path} className="block">
+                <div className="text-xs font-semibold leading-6 text-cyan-400 hover:text-cyan-300 transition-colors">{section.name}</div>
+              </Link>
               <ul role="list" className="mt-2 space-y-1">
                 {section.items.map((group) => (
                   <li key={group.name}>

frontend/src/components/xatu/XatuCallToAction.tsx

@@ -0,0 +1,12 @@
+import { CallToAction } from '../CallToAction'
+
+export const XatuCallToAction = () => {
+  return (
+    <CallToAction
+      title="Contribute to Xatu"
+      description="Help improve Ethereum by contributing your node's data to our research. Data is published openly in a privacy-focused manner and used for research and analysis."
+      buttonText="Contribute"
+      buttonLink="https://docs.google.com/forms/d/e/1FAIpQLSfSCHLZv2xdDKceQ3ajzYbkm2jkQnG0lVBhjEX4c1Jxvf8QfA/viewform"
+    />
+  )
+} 

frontend/src/pages/Home.tsx

@@ -12,11 +12,11 @@ export const Home = () => {
         <div className="absolute inset-0 bg-black/75" />
         <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/30 via-transparent to-purple-500/30" />
         <div className="relative p-6 md:p-12">
-          <div className="text-center md:text-left">
+          <div className="text-center md:text-left max-w-6xl mx-auto">
             <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3 md:mb-4">The Lab</h1>
             <p className="text-lg md:text-xl text-gray-300 max-w-3xl mb-4">
               The Lab is our experimental platform for exploring Ethereum data. We collect data from various sources 
-              and present it in a way that is easy to understand and visualize.
+              and present it in a way that is easy to understand.
             </p>
             <p className="text-2xl font-mono text-cyan-400 italic opacity-75">&quot;Let the pandas cook 🐼👨‍🍳&quot;</p>
           </div>
@@ -50,7 +50,7 @@ export const Home = () => {
           </div>
           <h3 className="text-lg font-semibold text-white mb-2">Experimental Platform</h3>
           <p className="text-gray-300">
-            A space for testing new ideas, visualizing data, and exploring the Ethereum network in novel ways.
+            A space for testing new ideas, visualizing data, and exploring the Ethereum network in new ways.
           </p>
         </div>
 
@@ -59,9 +59,9 @@ export const Home = () => {
           <div className="w-12 h-12 rounded-lg bg-cyan-500/10 flex items-center justify-center mb-4">
             <Activity className="h-6 w-6 text-cyan-400" />
           </div>
-          <h3 className="text-lg font-semibold text-white mb-2">Network Insights</h3>
+          <h3 className="text-lg font-semibold text-white mb-2">Network Analytics</h3>
           <p className="text-gray-300">
-            Providing valuable insights into network health, client diversity, and blockchain metrics through interactive visualizations.
+            Explore network health and performance through dynamic data visualizations.
           </p>
         </div>
       </div>
@@ -77,7 +77,7 @@ export const Home = () => {
             <div>
               <h3 className="text-lg font-semibold text-white mt-0">Xatu</h3>
               <p className="text-gray-300 mt-2">
-                A comprehensive dataset containing detailed information about the Ethereum network, including beacon chain events, mempool activity, and canonical chain events. Xatu helps monitor network health, track client diversity, and provide insights into network behavior.
+                A comprehensive dataset containing detailed information about the Ethereum network, including beacon chain events, mempool activity, and canonical chain events. Xatu helps monitor network health, and provide insights into network behavior.
               </p>
               <Link
                 to="/experiments/xatu"