diff --git a/app/globals.css b/app/globals.css
index 0599562..5d91d57 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
 @custom-variant dark (&:is(.dark *));
 
@@ -126,3 +126,143 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Custom animations for interactive homepage */
+@keyframes gradient {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(168, 85, 247, 0.8);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+@keyframes slideInFromBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes scaleIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-shimmer {
+  animation: shimmer 2s linear infinite;
+}
+
+.animate-slide-in {
+  animation: slideInFromBottom 0.6s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.5s ease-out;
+}
+
+/* Smooth scroll behavior */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Card hover effects */
+.card-hover-effect {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-hover-effect:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 60px rgba(168, 85, 247, 0.3);
+}
+
+/* Glassmorphism effect */
+.glass-effect {
+  backdrop-filter: blur(10px);
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Text gradient effect */
+.text-gradient {
+  background: linear-gradient(135deg, #a855f7, #ec4899, #8b5cf6);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
+/* Parallax container */
+.parallax-container {
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: oklch(0.08 0 0);
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(0.7 0.18 270);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.6 0.15 270);
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 882a6b9..6b99dcd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,14 +1,93 @@
+'use client'
+
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardDescription, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 import { Navigation } from "@/components/navigation"
-import { ArrowRight, Database, Shield, Zap } from "lucide-react"
+import { ArrowRight, Database, Shield, Zap, CheckCircle2, TrendingUp, Users, Network, Sparkles, Rocket, DollarSign, BarChart3, Code, Lock, Globe } from "lucide-react"
 import Orb from "@/components/Orb"
+import { useEffect, useState, useRef } from "react"
 
 export default function HomePage() {
+  const [mounted, setMounted] = useState(false)
+  const [hoveredCard, setHoveredCard] = useState<number | null>(null)
+  const [visibleSections, setVisibleSections] = useState<Set<string>>(new Set())
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+  const [scrollProgress, setScrollProgress] = useState(0)
+  const sectionRefs = useRef<{ [key: string]: HTMLElement | null }>({})
+
+  useEffect(() => {
+    setMounted(true)
+
+    // Mouse tracking for parallax effects
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY })
+    }
+
+    // Scroll progress tracking
+    const handleScroll = () => {
+      const totalHeight = document.documentElement.scrollHeight - window.innerHeight
+      const progress = (window.scrollY / totalHeight) * 100
+      setScrollProgress(progress)
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+    window.addEventListener('scroll', handleScroll)
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setVisibleSections((prev) => new Set(prev).add(entry.target.id))
+          }
+        })
+      },
+      { threshold: 0.1 }
+    )
+
+    Object.values(sectionRefs.current).forEach((ref) => {
+      if (ref) observer.observe(ref)
+    })
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('mousemove', handleMouseMove)
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  const setSectionRef = (id: string) => (el: HTMLElement | null) => {
+    sectionRefs.current[id] = el
+  }
+
+  // Parallax offset calculation
+  const parallaxOffset = {
+    x: (mousePosition.x - window.innerWidth / 2) / 50,
+    y: (mousePosition.y - window.innerHeight / 2) / 50
+  }
+
   return (
-    <div className="min-h-screen bg-background font-[oblique] tracking-wide" style={{ fontStyle: 'oblique 12deg' }}>
-      {/* <SplashCursor /> */}
+    <div className="min-h-screen bg-background font-[oblique] tracking-wide relative" style={{ fontStyle: 'oblique 12deg' }}>
+      {/* Scroll Progress Bar */}
+      <div className="fixed top-0 left-0 w-full h-1 bg-transparent z-50">
+        <div 
+          className="h-full bg-gradient-to-r from-primary via-purple-400 to-primary transition-all duration-300"
+          style={{ width: `${scrollProgress}%` }}
+        />
+      </div>
+
+      {/* Animated Background Grid */}
+      <div className="fixed inset-0 z-0 opacity-20 pointer-events-none">
+        <div className="absolute inset-0" style={{
+          backgroundImage: `
+            linear-gradient(to right, rgba(168, 85, 247, 0.1) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(168, 85, 247, 0.1) 1px, transparent 1px)
+          `,
+          backgroundSize: '50px 50px',
+          transform: `translate(${parallaxOffset.x}px, ${parallaxOffset.y}px)`
+        }} />
+      </div>
+
       <Navigation />
 
       {/* Hero Section */}
@@ -28,7 +107,8 @@ export default function HomePage() {
               width: 'min(90vw, 90vh)', 
               height: 'min(90vw, 90vh)', 
               maxWidth: '800px',
-              maxHeight: '800px'
+              maxHeight: '800px',
+              transform: `translate(${parallaxOffset.x * 2}px, ${parallaxOffset.y * 2}px)`
             }}>
               <Orb
                 hoverIntensity={1.7}
@@ -39,116 +119,331 @@ export default function HomePage() {
             </div>
           </div>
         </div>
-        <div className="container mx-auto px-4 text-center z-10 relative">
+        
+        {/* Floating particles effect */}
+        <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
+          {[...Array(20)].map((_, i) => (
+            <div
+              key={i}
+              className="absolute w-2 h-2 bg-primary/30 rounded-full animate-float"
+              style={{
+                left: `${Math.random() * 100}%`,
+                top: `${Math.random() * 100}%`,
+                animationDelay: `${Math.random() * 3}s`,
+                animationDuration: `${3 + Math.random() * 4}s`
+              }}
+            />
+          ))}
+        </div>
+
+        <div className={`container mx-auto px-4 text-center z-10 relative transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
           <div className="max-w-4xl mx-auto">
-            <h1 className="text-4xl md:text-5xl font-medium mb-8 text-balance tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-6 animate-pulse">
+              <Sparkles className="h-4 w-4 text-primary" />
+              <span className="text-sm text-primary font-semibold">Decentralized Price Discovery</span>
+            </div>
+            <h1 className="text-5xl md:text-7xl font-bold mb-6 text-balance tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>
               Orb Oracle: 
-              <div><span className="text-primary">The Price of Everything</span></div>
+              <div className="bg-gradient-to-r from-primary via-purple-400 to-pink-400 bg-clip-text text-transparent animate-gradient">
+                The Price of Everything
+              </div>
             </h1>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button asChild size="lg" className="text-lg px-8 bg-white text-black hover:bg-gray-100">
+            <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
+              Decentralized price feeds powered by community consensus. Create, trade, and discover oracles for any asset in the world.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+              <Button asChild size="lg" className="text-lg px-8 bg-white text-black hover:bg-gray-100 hover:scale-105 transition-transform duration-200 group shadow-xl shadow-primary/20">
                 <Link href="/create">
-                  Get Started
+                  Create an Oracle
+                  <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                 </Link>
               </Button>
-              <Button asChild variant="outline" size="lg" className="text-lg px-8 bg-transparent border-gray-600 text-gray-400 hover:bg-gray-800">
-                <Link href="/explorer">Learn More</Link>
+              <Button asChild variant="outline" size="lg" className="text-lg px-8 bg-transparent border-gray-600 text-gray-400 hover:bg-gray-800 hover:scale-105 transition-transform duration-200 hover:border-primary">
+                <Link href="/explorer">Explore Oracles</Link>
               </Button>
             </div>
+
+            {/* Live Stats (Animated Counters) */}
+            <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto mt-12">
+              <div className="bg-card/30 backdrop-blur border border-primary/20 rounded-lg p-4 hover:bg-card/50 transition-all duration-300 hover:scale-105">
+                <Rocket className="h-6 w-6 text-primary mx-auto mb-2" />
+                <div className="text-2xl font-bold text-primary">∞</div>
+                <div className="text-xs text-muted-foreground">Permissionless</div>
+              </div>
+              <div className="bg-card/30 backdrop-blur border border-primary/20 rounded-lg p-4 hover:bg-card/50 transition-all duration-300 hover:scale-105">
+                <DollarSign className="h-6 w-6 text-primary mx-auto mb-2" />
+                <div className="text-2xl font-bold text-primary">0%</div>
+                <div className="text-xs text-muted-foreground">Creation Fee</div>
+              </div>
+              <div className="bg-card/30 backdrop-blur border border-primary/20 rounded-lg p-4 hover:bg-card/50 transition-all duration-300 hover:scale-105">
+                <BarChart3 className="h-6 w-6 text-primary mx-auto mb-2" />
+                <div className="text-2xl font-bold text-primary">100%</div>
+                <div className="text-xs text-muted-foreground">On-Chain</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Scroll indicator */}
+        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-bounce">
+          <div className="w-6 h-10 border-2 border-primary/50 rounded-full flex justify-center">
+            <div className="w-1 h-3 bg-primary rounded-full mt-2 animate-pulse"></div>
           </div>
         </div>
       </section>
 
-      {/* Features Section */}
-      <section className="h-screen flex items-center justify-center">
+      {/* How It Works Section */}
+      <section 
+        id="how-it-works" 
+        ref={setSectionRef('how-it-works')}
+        className="min-h-screen flex items-center justify-center py-20 relative z-10"
+      >
         <div className="container mx-auto px-4">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl md:text-4xl font-medium mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Why choose OracleNet?</h2>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              Enterprise-grade infrastructure for the next generation of decentralized applications
+          <div className={`text-center mb-16 transition-all duration-1000 ${visibleSections.has('how-it-works') ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+            <div className="inline-block px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-4">
+              <span className="text-sm text-primary font-semibold">MECHANISM</span>
+            </div>
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>How Does Orb Oracle Work?</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              A revolutionary bonding curve mechanism that enables anyone to create and trade price oracles with built-in liquidity
             </p>
           </div>
 
-          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <Zap className="h-6 w-6 text-primary" />
-                </div>
-                <CardTitle>Lightning Fast</CardTitle>
-                <CardDescription>
-                  Sub-second data feeds with 99.9% uptime guarantee for mission-critical applications
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <Shield className="h-6 w-6 text-primary" />
-                </div>
-                <CardTitle>Secure & Reliable</CardTitle>
-                <CardDescription>
-                  Multi-signature validation and cryptographic proofs ensure data integrity
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card className="border-border bg-card">
-              <CardHeader>
-                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <Database className="h-6 w-6 text-primary" />
-                </div>
-                <CardTitle>Rich Data Sources</CardTitle>
-                <CardDescription>
-                  Connect to thousands of APIs, IoT devices, and real-world data providers
-                </CardDescription>
-              </CardHeader>
-            </Card>
+          <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto mb-16">
+            {[
+              { 
+                icon: TrendingUp, 
+                title: "1. Create an Oracle", 
+                desc: "Anyone can create an oracle for any asset. The oracle starts with a bonding curve that determines its price based on supply and demand. Initial creation requires minimal capital, making it accessible to everyone.",
+                color: "from-purple-500 to-pink-500"
+              },
+              { 
+                icon: Users, 
+                title: "2. Trade & Build Liquidity", 
+                desc: "As users buy and sell oracle shares, the bonding curve automatically provides liquidity. No need for external liquidity providers—the protocol handles it algorithmically, ensuring seamless trading at all times.",
+                color: "from-blue-500 to-purple-500"
+              },
+              { 
+                icon: Network, 
+                title: "3. Consensus Pricing", 
+                desc: "The oracle price is determined by market participants through trading activity. This creates a decentralized consensus mechanism where the collective wisdom of traders establishes fair market value.",
+                color: "from-pink-500 to-red-500"
+              },
+              { 
+                icon: CheckCircle2, 
+                title: "4. Use Anywhere", 
+                desc: "Once established, oracle prices can be integrated into any DeFi protocol, smart contract, or dApp. The on-chain data is tamper-proof, always available, and reflects real-time market consensus.",
+                color: "from-green-500 to-blue-500"
+              }
+            ].map((item, idx) => (
+              <Card 
+                key={idx}
+                className={`border-border bg-card/50 backdrop-blur transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:shadow-primary/20 cursor-pointer group relative overflow-hidden ${visibleSections.has('how-it-works') ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
+                style={{ transitionDelay: `${idx * 100}ms` }}
+                onMouseEnter={() => setHoveredCard(idx)}
+                onMouseLeave={() => setHoveredCard(null)}
+              >
+                {/* Gradient overlay on hover */}
+                <div className={`absolute inset-0 bg-gradient-to-br ${item.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`} />
+                
+                <CardHeader className="relative">
+                  <div className={`w-14 h-14 bg-gradient-to-br ${item.color} rounded-xl flex items-center justify-center mb-4 transition-all duration-300 ${hoveredCard === idx ? 'scale-110 rotate-12' : ''} shadow-lg`}>
+                    <item.icon className={`h-7 w-7 text-white transition-all duration-300 ${hoveredCard === idx ? 'scale-125' : ''}`} />
+                  </div>
+                  <CardTitle className="text-2xl group-hover:text-primary transition-colors">{item.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-base leading-relaxed">
+                    {item.desc}
+                  </CardDescription>
+                </CardContent>
+              </Card>
+            ))}
           </div>
         </div>
       </section>
 
-      {/* Stats Section */}
-      <section className="h-screen flex items-center justify-center">
+      {/* Why Better Section */}
+      <section 
+        id="why-better" 
+        ref={setSectionRef('why-better')}
+        className="min-h-screen flex items-center justify-center py-20 relative z-10"
+      >
         <div className="container mx-auto px-4">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
-            <div>
-              <div className="text-4xl font-medium text-primary mb-2">1,247</div>
-              <div className="text-muted-foreground">Active Oracles</div>
-            </div>
-            <div>
-              <div className="text-4xl font-medium text-primary mb-2">$2.4B</div>
-              <div className="text-muted-foreground">Total Value Secured</div>
+          <div className={`text-center mb-16 transition-all duration-1000 ${visibleSections.has('why-better') ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+            <div className="inline-block px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-4">
+              <span className="text-sm text-primary font-semibold">ADVANTAGES</span>
             </div>
-            <div>
-              <div className="text-4xl font-medium text-primary mb-2">99.9%</div>
-              <div className="text-muted-foreground">Uptime</div>
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Why Choose Orb Oracle?</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              Traditional oracles have limitations. We've built a better solution from the ground up.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {[
+              { icon: Zap, title: "Permissionless Creation", desc: "Unlike centralized oracles that require approval, anyone can create an oracle for any asset instantly. No gatekeepers, no waiting, no barriers to entry.", id: 10, gradient: "from-yellow-500 to-orange-500" },
+              { icon: Shield, title: "Built-in Liquidity", desc: "Bonding curves eliminate the need for external market makers. Liquidity is always available, prices are algorithmically determined, and trading is instant.", id: 11, gradient: "from-blue-500 to-cyan-500" },
+              { icon: Database, title: "Market-Driven Truth", desc: "Instead of relying on centralized data sources, prices emerge from market consensus. If the crowd believes it has value, it does—pure decentralization.", id: 12, gradient: "from-purple-500 to-pink-500" },
+              { icon: TrendingUp, title: "Incentive Aligned", desc: "Oracle creators earn fees from trading activity. The more useful and accurate the oracle, the more trading volume it generates, creating perfect incentive alignment.", id: 13, gradient: "from-green-500 to-emerald-500" },
+              { icon: Lock, title: "Truly Decentralized", desc: "No single point of failure, no admin keys, no centralized control. The protocol is fully on-chain and governed by code, not corporations.", id: 14, gradient: "from-red-500 to-pink-500" },
+              { icon: Code, title: "Instant Integration", desc: "Simple smart contract interfaces make it easy to integrate oracle data into any dApp. Get started in minutes with our developer-friendly APIs.", id: 15, gradient: "from-indigo-500 to-purple-500" }
+            ].map((item, idx) => (
+              <Card 
+                key={item.id}
+                className={`border-border bg-card transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/50 cursor-pointer group relative overflow-hidden ${visibleSections.has('why-better') ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}
+                onMouseEnter={() => setHoveredCard(item.id)}
+                onMouseLeave={() => setHoveredCard(null)}
+                style={{ transitionDelay: `${idx * 100}ms` }}
+              >
+                {/* Animated gradient background on hover */}
+                <div className={`absolute inset-0 bg-gradient-to-br ${item.gradient} opacity-0 group-hover:opacity-10 transition-all duration-500`} />
+                
+                <CardHeader className="relative">
+                  <div className={`w-12 h-12 bg-gradient-to-br ${item.gradient} rounded-lg flex items-center justify-center mb-4 transition-all duration-300 ${hoveredCard === item.id ? 'scale-110 rotate-12 shadow-lg' : ''}`}>
+                    <item.icon className={`h-6 w-6 text-white transition-all duration-300 ${hoveredCard === item.id ? 'scale-125' : ''}`} />
+                  </div>
+                  <CardTitle className="group-hover:text-primary transition-colors text-lg">{item.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="leading-relaxed">
+                    {item.desc}
+                  </CardDescription>
+                </CardContent>
+
+                {/* Hover indicator */}
+                <div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${item.gradient} transform origin-left transition-transform duration-500 ${hoveredCard === item.id ? 'scale-x-100' : 'scale-x-0'}`} />
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Comparison Section */}
+      <section 
+        id="comparison" 
+        ref={setSectionRef('comparison')}
+        className="min-h-screen flex items-center justify-center py-20 relative z-10"
+      >
+        <div className="container mx-auto px-4">
+          <div className={`text-center mb-16 transition-all duration-1000 ${visibleSections.has('comparison') ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
+            <div className="inline-block px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-4">
+              <span className="text-sm text-primary font-semibold">COMPARISON</span>
             </div>
-            <div>
-              <div className="text-4xl font-medium text-primary mb-2">50+</div>
-              <div className="text-muted-foreground">Supported Chains</div>
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Orb Oracle vs Traditional Oracles</h2>
+            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+              See how we stack up against centralized alternatives
+            </p>
+          </div>
+
+          <div className="max-w-4xl mx-auto">
+            <div className="grid md:grid-cols-2 gap-6">
+              {/* Orb Oracle Column */}
+              <div className="bg-gradient-to-br from-primary/20 to-purple-500/20 backdrop-blur border border-primary/30 rounded-2xl p-8 hover:scale-105 transition-all duration-500 shadow-xl shadow-primary/10">
+                <div className="flex items-center gap-3 mb-6">
+                  <Globe className="h-8 w-8 text-primary" />
+                  <h3 className="text-2xl font-bold">Orb Oracle</h3>
+                </div>
+                <ul className="space-y-4">
+                  {[
+                    "✓ Permissionless creation",
+                    "✓ Built-in liquidity via bonding curves",
+                    "✓ Market-driven consensus",
+                    "✓ Zero creation fees",
+                    "✓ Earn trading fees",
+                    "✓ Fully decentralized",
+                    "✓ No admin keys",
+                    "✓ Instant deployment"
+                  ].map((feature, idx) => (
+                    <li key={idx} className="flex items-start gap-3 text-sm">
+                      <CheckCircle2 className="h-5 w-5 text-green-400 flex-shrink-0 mt-0.5" />
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              {/* Traditional Oracles Column */}
+              <div className="bg-card/50 backdrop-blur border border-border rounded-2xl p-8 opacity-70">
+                <div className="flex items-center gap-3 mb-6">
+                  <Database className="h-8 w-8 text-muted-foreground" />
+                  <h3 className="text-2xl font-bold text-muted-foreground">Traditional Oracles</h3>
+                </div>
+                <ul className="space-y-4">
+                  {[
+                    "✗ Requires approval/whitelisting",
+                    "✗ External liquidity needed",
+                    "✗ Centralized data sources",
+                    "✗ High setup costs",
+                    "✗ No creator incentives",
+                    "✗ Centralized control",
+                    "✗ Single point of failure",
+                    "✗ Slow deployment process"
+                  ].map((feature, idx) => (
+                    <li key={idx} className="flex items-start gap-3 text-sm text-muted-foreground">
+                      <span className="h-5 w-5 flex-shrink-0 mt-0.5 text-red-400">✗</span>
+                      <span>{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
           </div>
         </div>
       </section>
 
       {/* CTA Section */}
-      <section className="h-screen flex items-center justify-center">
-        <div className="container mx-auto px-4 text-center">
-          <div className="max-w-2xl mx-auto">
-            <h2 className="text-3xl md:text-4xl font-medium mb-6 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Ready to build the future?</h2>
-            <p className="text-xl text-muted-foreground mb-8">
-              Join thousands of developers building the next generation of decentralized applications
+      <section className="min-h-screen flex items-center justify-center relative overflow-hidden py-20">
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent"></div>
+        
+        {/* Animated orbs in background */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '0s' }} />
+          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }} />
+        </div>
+
+        <div className="container mx-auto px-4 text-center relative z-10">
+          <div className="max-w-3xl mx-auto">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-6">
+              <Sparkles className="h-4 w-4 text-primary animate-pulse" />
+              <span className="text-sm text-primary font-semibold">Start Earning Today</span>
+            </div>
+            <h2 className="text-4xl md:text-6xl font-bold mb-6 tracking-wide" style={{ fontStyle: 'oblique 15deg' }}>Ready to Create Your Oracle?</h2>
+            <p className="text-xl text-muted-foreground mb-8 leading-relaxed max-w-2xl mx-auto">
+              Join the future of decentralized price discovery. Create an oracle for any asset and start earning from trading fees today.
             </p>
-            <Button asChild size="lg" className="text-lg px-8">
+            <Button asChild size="lg" className="text-lg px-12 py-6 hover:scale-110 transition-all duration-300 shadow-2xl shadow-primary/50 group bg-gradient-to-r from-primary to-purple-500 hover:from-purple-500 hover:to-primary">
               <Link href="/create">
-                Get Started <ArrowRight className="ml-2 h-5 w-5" />
+                Get Started Now <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-2 transition-transform" />
               </Link>
             </Button>
+            <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6 text-sm">
+              <div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-card/30 backdrop-blur border border-primary/20 hover:bg-card/50 transition-all hover:scale-105">
+                <CheckCircle2 className="h-6 w-6 text-primary" />
+                <span className="font-semibold">No Fees to Create</span>
+                <span className="text-xs text-muted-foreground">Deploy for free</span>
+              </div>
+              <div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-card/30 backdrop-blur border border-primary/20 hover:bg-card/50 transition-all hover:scale-105">
+                <Zap className="h-6 w-6 text-primary" />
+                <span className="font-semibold">Instant Deployment</span>
+                <span className="text-xs text-muted-foreground">Live in seconds</span>
+              </div>
+              <div className="flex flex-col items-center gap-2 p-4 rounded-lg bg-card/30 backdrop-blur border border-primary/20 hover:bg-card/50 transition-all hover:scale-105">
+                <DollarSign className="h-6 w-6 text-primary" />
+                <span className="font-semibold">Earn Trading Fees</span>
+                <span className="text-xs text-muted-foreground">Passive income</span>
+              </div>
+            </div>
           </div>
         </div>
       </section>
+
+      {/* Footer */}
+      <footer className="border-t border-border py-8 relative z-10">
+        <div className="container mx-auto px-4 text-center text-sm text-muted-foreground">
+          <p>© 2025 Orb Oracle. Decentralized price discovery for everyone.</p>
+        </div>
+      </footer>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0fe3916..a91e970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1125,6 +1125,7 @@
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3001,6 +3002,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -3481,6 +3483,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -3913,6 +3916,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -4319,6 +4323,7 @@
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.2.tgz",
       "integrity": "sha512-CLABiR+h5PYfOWr/z+vWFt5VsOA2ekQeRQBFSKlcoW6Ndx/f8rfyVmq4LbgOM4GG2qtxAxjLYLOpCNTYm4uKzw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tanstack/query-core": "5.90.2"
       },
@@ -4437,6 +4442,7 @@
       "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4448,6 +4454,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4469,6 +4476,7 @@
       "resolved": "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.17.3.tgz",
       "integrity": "sha512-jHivr1UPoJTX5Uel4AZSOwrCf4mO42LcdmnhJtUxZaRWhW4FviFbIfs0moAWWld7GOT+2XnuVZjjA/K32uUnMQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@emotion/hash": "^0.9.0",
         "@vanilla-extract/private": "^1.0.8",
@@ -4581,6 +4589,7 @@
       "resolved": "https://registry.npmjs.org/@wagmi/core/-/core-2.21.2.tgz",
       "integrity": "sha512-Rp4waam2z0FQUDINkJ91jq38PI5wFUHCv1YBL2LXzAQswaEk1ZY8d6+WG3vYGhFHQ22DXy2AlQ8IWmj+2EG3zQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "eventemitter3": "5.0.1",
         "mipd": "0.0.7",
@@ -5739,6 +5748,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -6005,6 +6015,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -6305,6 +6316,7 @@
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.1.0.tgz",
       "integrity": "sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "node-fetch": "^2.7.0"
       }
@@ -6683,6 +6695,7 @@
       "resolved": "https://registry.npmjs.org/eciesjs/-/eciesjs-0.4.15.tgz",
       "integrity": "sha512-r6kEJXDKecVOCj2nLMuXK/FCPeurW33+3JRpfXVbjLja3XUYFfD9I/JBreH6sUyzcm3G/YQboBjMla6poKeSdA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ecies/ciphers": "^0.2.3",
         "@noble/ciphers": "^1.3.0",
@@ -6705,7 +6718,8 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
       "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.5.1",
@@ -7011,7 +7025,8 @@
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.9.tgz",
       "integrity": "sha512-JEPTiaOt9f04oa6NOkc4aH+nVp5I3wEjpHbIPqfgCdD5v5bUzy7xQqwcVO2aDQgOWhI28da57HksMrzK9HlRxg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/eventemitter3": {
       "version": "5.0.1",
@@ -7982,6 +7997,7 @@
       "resolved": "https://registry.npmjs.org/next/-/next-14.2.16.tgz",
       "integrity": "sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@next/env": "14.2.16",
         "@swc/helpers": "0.5.5",
@@ -8466,6 +8482,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8581,6 +8598,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8614,6 +8632,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8627,6 +8646,7 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
       "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -8650,6 +8670,7 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -8752,6 +8773,7 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
       "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -8814,7 +8836,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -8961,6 +8984,7 @@
       "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
       "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@socket.io/component-emitter": "~3.1.0",
         "debug": "~4.3.2",
@@ -9134,7 +9158,8 @@
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
       "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -9247,6 +9272,7 @@
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9437,6 +9463,7 @@
       "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.13.2.tgz",
       "integrity": "sha512-Qik0o+DSy741TmkqmRfjq+0xpZBXi/Y6+fXZLn0xNF1z/waFMbE3rkivv5Zcf9RrMUp6zswf2J7sbh2KBlba5A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "derive-valtio": "0.1.0",
         "proxy-compare": "2.6.0",
@@ -9513,6 +9540,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@noble/curves": "1.9.1",
         "@noble/hashes": "1.8.0",
@@ -9537,6 +9565,7 @@
       "resolved": "https://registry.npmjs.org/wagmi/-/wagmi-2.17.5.tgz",
       "integrity": "sha512-Sk2e40gfo68gbJ6lHkpIwCMkH76rO0+toCPjf3PzdQX37rZo9042DdNTYcSg3zhnx8abFJtrk/5vAWfR8APTDw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@wagmi/connectors": "5.11.2",
         "@wagmi/core": "2.21.2",
@@ -9640,6 +9669,7 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -9729,6 +9759,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.67.tgz",
       "integrity": "sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/utils/config.ts b/utils/config.ts
index 9d96080..f353201 100644
--- a/utils/config.ts
+++ b/utils/config.ts
@@ -9,9 +9,12 @@ import {
   getDefaultConfig
 } from '@rainbow-me/rainbowkit'
 
+// Fallback project ID for development (get your own at https://cloud.walletconnect.com)
+const projectId = process.env.NEXT_PUBLIC_PROJECT_ID || 'a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6'
+
 export const config = getDefaultConfig({
   appName: 'OrbOracle',
-  projectId: process.env.NEXT_PUBLIC_PROJECT_ID ?? '',
+  projectId,
   chains: [
     mainnet,
     base,