feat: Add new images and update content in Header component

frontend/src/components/layout/Header.tsx

@@ -39,7 +39,7 @@ export const Header = ({ onToggleSidebar }: HeaderProps) => {
             </button>
             <Link to="/" className="flex items-center space-x-3">
               <img
-                src="/ethpandaops-logo.svg"
+                src="/ethpandaops.png"
                 alt="EthPandaOps Logo"
                 className="h-8 w-8"
               />

frontend/src/pages/About.tsx

@@ -3,39 +3,18 @@ import { Github, ExternalLink } from 'lucide-react'
 export const About = () => {
   return (
     <div className="space-y-8 max-w-4xl">
-      <h2 className="text-2xl font-bold">About EthPandaOps Lab</h2>
+      <h2 className="text-2xl font-bold">About The Lab</h2>
 
       <div className="prose dark:prose-invert max-w-none">
         <p className="text-lg">
-          EthPandaOps Lab is an experimental platform that provides insights into the Ethereum network. 
-          We collect, analyze, and visualize data from various sources to help understand the network's health, 
-          client diversity, and overall ecosystem.
+          The Lab is an experimental platform that provides insights into Ethereum.
+          Here we present data and visualizations that we've collected. All of our data is public and open source.
         </p>
+      </div>
 
-        <h3>Our Data Sources</h3>
-        <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 space-y-4">
-          <div>
-            <h4 className="text-lg font-semibold mb-2">Xatu</h4>
-            <p className="text-gray-600 dark:text-gray-300">
-              A beacon chain event collector and metrics exporter. Xatu helps monitor the Ethereum network by collecting:
-            </p>
-            <div className="mt-4">
-              <a
-                href="https://github.com/ethpandaops/xatu"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-              >
-                <Github className="h-5 w-5 mr-2" />
-                View Xatu on GitHub
-              </a>
-            </div>
-          </div>
-        </div>
-
-        <h2 className="mt-8">About EthPandaOps</h2>
-        <p>
-          Check out our main website for more information:
+      <h2 className="mt-8">About EthPandaOps</h2>
+      <p>
+        Check out our main website for more information:
         </p>
 
         <div className="flex flex-col sm:flex-row gap-4 mt-8">
@@ -55,9 +34,8 @@ export const About = () => {
             className="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-indigo-600 bg-indigo-100 hover:bg-indigo-200 dark:text-white dark:bg-indigo-900 dark:hover:bg-indigo-800 rounded-lg transition-colors"
           >
             <Github className="h-5 w-5 mr-2" />
-            View Our Projects
-          </a>
-        </div>
+          View Our Projects
+        </a>
       </div>
     </div>
   )

frontend/src/pages/Home.tsx

@@ -3,25 +3,35 @@ import { Link } from 'react-router-dom'
 
 export const Home = () => {
   return (
-    <div className="flex flex-col items-center justify-center min-h-[80vh] text-center px-4">
-      <img
-        src="/ethpandaops-logo.svg"
-        alt="EthPandaOps Logo"
-        className="w-48 h-48 mb-8"
-      />
-      <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
-        Welcome to EthPandaOps Lab
-      </h1>
-      <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl">
-        The Lab is our experimental platform for exploring Ethereum. 
-      </p>
-      <Link
-        to="/xatu/contributors"
-        className="inline-flex items-center px-6 py-3 text-lg font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
-      >
-        Explore Data
-        <ArrowRight className="ml-2 h-5 w-5" />
-      </Link>
+    <div className="relative min-h-[80vh]">
+      {/* Background Image */}
+      <div className="absolute inset-0 z-0">
+        <img
+          src="/header.png"
+          alt=""
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/80" />
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-[80vh] text-center px-4">
+        <div className="bg-black/20 backdrop-blur-sm p-12 rounded-3xl max-w-3xl border border-white/10">
+          <h1 className="text-5xl font-bold text-white mb-6">
+            Welcome to The Lab
+          </h1>
+          <p className="text-xl text-gray-100 mb-10 max-w-2xl">
+            The Lab is our experimental platform for exploring Ethereum
+          </p>
+          <Link
+            to="/xatu/contributors"
+            className="inline-flex items-center px-8 py-4 text-lg font-medium text-white bg-indigo-600/90 hover:bg-indigo-700 rounded-xl transition-all hover:scale-105"
+          >
+            Explore
+            <ArrowRight className="ml-2 h-5 w-5" />
+          </Link>
+        </div>
+      </div>
     </div>
   )
 } 

frontend/src/utils/data.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { getDataUrl } from '../config'
 
 export const fetchData = async <T>(path: string): Promise<T> => {
@@ -10,25 +10,10 @@ export const fetchData = async <T>(path: string): Promise<T> => {
 }
 
 export const useDataFetch = <T>(path: string) => {
-  const [data, setData] = useState<T | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<Error | null>(null)
-
-  useEffect(() => {
-    const fetchDataFromPath = async () => {
-      try {
-        setLoading(true)
-        const result = await fetchData<T>(path)
-        setData(result)
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error('Unknown error occurred'))
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchDataFromPath()
-  }, [path])
+  const { data, isLoading: loading, error } = useQuery<T, Error>({
+    queryKey: ['data', path],
+    queryFn: () => fetchData<T>(path),
+  })
 
   return { data, loading, error }
 }