L1 performance fact sheet draft version

app/(home)/l1-performance/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { 
+  AnimatedBackground,
+  HeroSection,
+  MetricsSection,
+  HorizontalScrollSection,
+  FAQSection,
+  CTASection
+} from '@/components/l1-performance';
+
+export default function L1PerformancePage() {
+  const [isInSlider, setIsInSlider] = useState(false);
+
+  // Initialize custom animations
+  useEffect(() => {
+    addCustomAnimations();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <AnimatedBackground />
+      <main className="relative">
+        <HeroSection />
+        <MetricsSection />
+        <HorizontalScrollSection isInSlider={isInSlider} setIsInSlider={setIsInSlider} />
+        <FAQSection />
+        <CTASection />
+      </main>
+    </div>
+  );
+}
+
+// Add custom animations to global CSS
+const addCustomAnimations = () => {
+  if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes circuit-vertical {
+        0% { transform: translateY(-100%); opacity: 0; }
+        50% { opacity: 0.5; }
+        100% { transform: translateY(100%); opacity: 0; }
+      }
+
+      @keyframes wave {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+      }
+
+      .animate-circuit-vertical {
+        animation: circuit-vertical 8s linear infinite;
+      }
+
+      .animate-wave {
+        animation: wave 8s ease-in-out infinite;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+};

app/global.css

@@ -570,11 +570,92 @@ html body[data-scroll-locked] {
     text-shadow: var(--shadow);
   }
 
+  /* Token Background Animations */
+  @keyframes slide-up {
+    0% {
+      transform: translateY(100%);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes slide-down {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes slide-up-seamless {
+    0% {
+      transform: translateY(0%);
+    }
+    100% {
+      transform: translateY(-50%);
+    }
+  }
+
+  @keyframes slide-down-seamless {
+    0% {
+      transform: translateY(0%);
+    }
+    100% {
+      transform: translateY(50%);
+    }
+  }
+
+  .animate-slide-up {
+    animation: slide-up 60s linear infinite;
+  }
+
+  .animate-slide-down {
+    animation: slide-down 70s linear infinite;
+  }
+
+  .animate-slide-up-seamless {
+    animation: slide-up-seamless 40s linear infinite;
+  }
+
+  .animate-slide-down-seamless {
+    animation: slide-down-seamless 45s linear infinite;
+  }
+
+  @keyframes infinite-scroll-up {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-12.5%);
+    }
+  }
+
+  @keyframes infinite-scroll-down {
+    0% {
+      transform: translateY(-12.5%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  .animate-infinite-scroll-up {
+    animation: infinite-scroll-up 10s linear infinite;
+  }
+
+  .animate-infinite-scroll-down {
+    animation: infinite-scroll-down 15s linear infinite;
+  }
+
   .scrollbar-hide {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+
   .scrollbar-hide::-webkit-scrollbar {
     display: none;
   }
+
 }

components/charts/L1TPSChart.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { ChartContainer } from '@/components/ui/chart';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip as RechartsTooltip,
+} from "recharts";
+
+export default function L1TPSChart({ data }: { data: any[] }) {
+  return (
+    <ChartContainer
+      config={{ tps: { color: '#FF4747', label: 'TPS' } }}
+      className="h-32 w-full"
+    >
+      <div className="w-full h-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+            <XAxis dataKey="name" axisLine={false} tickLine={false} stroke="#888" />
+            <YAxis axisLine={false} tickLine={false} stroke="#888" />
+            <RechartsTooltip />
+            <Line type="monotone" dataKey="tps" stroke="#FF4747" strokeWidth={2} dot={false} />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </ChartContainer>
+  );
+} 

components/l1-performance/AnimatedBackground.tsx

@@ -0,0 +1,50 @@
+// Animated Background Components
+export const AnimatedBackground = () => (
+  <div className="fixed inset-0 overflow-hidden pointer-events-none">
+    {/* Gradient Orbs */}
+    <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-r from-[#EB4C50]/20 to-orange-500/20 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8s'}} />
+    <div className="absolute top-3/4 right-1/4 w-80 h-80 bg-gradient-to-r from-blue-500/15 to-purple-500/15 rounded-full blur-3xl animate-pulse" style={{animationDuration: '12s', animationDelay: '2s'}} />
+    <div className="absolute bottom-1/4 left-1/3 w-64 h-64 bg-gradient-to-r from-emerald-500/10 to-cyan-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10s', animationDelay: '4s'}} />
+
+    {/* Additional Gradient Orbs */}
+    <div className="absolute top-1/6 right-1/6 w-72 h-72 bg-gradient-to-r from-purple-500/15 to-pink-500/15 rounded-full blur-3xl animate-pulse" style={{animationDuration: '9s', animationDelay: '1s'}} />
+    <div className="absolute top-2/3 left-1/6 w-56 h-56 bg-gradient-to-r from-cyan-500/12 to-blue-500/12 rounded-full blur-3xl animate-pulse" style={{animationDuration: '11s', animationDelay: '3s'}} />
+    <div className="absolute bottom-1/3 right-1/3 w-88 h-88 bg-gradient-to-r from-orange-500/10 to-yellow-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '7s', animationDelay: '5s'}} />
+    <div className="absolute top-1/2 left-1/2 w-48 h-48 bg-gradient-to-r from-green-500/8 to-emerald-500/8 rounded-full blur-3xl animate-pulse" style={{animationDuration: '13s', animationDelay: '0.5s'}} />
+    <div className="absolute bottom-1/6 left-1/4 w-64 h-64 bg-gradient-to-r from-indigo-500/12 to-purple-500/12 rounded-full blur-3xl animate-pulse" style={{animationDuration: '10.5s', animationDelay: '2.5s'}} />
+    <div className="absolute top-1/3 right-1/2 w-40 h-40 bg-gradient-to-r from-red-500/10 to-orange-500/10 rounded-full blur-3xl animate-pulse" style={{animationDuration: '8.5s', animationDelay: '4.5s'}} />
+
+    {/* Network Grid Lines */}
+    <div className="absolute inset-0 opacity-5">
+      <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id="network-grid" width="100" height="100" patternUnits="userSpaceOnUse">
+            <path d="M 100 0 L 0 0 0 100" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#network-grid)" />
+      </svg>
+    </div>
+
+    {/* Animated Circuit Lines */}
+    <div className="absolute inset-0">
+      {/* Vertical Circuit Lines */}
+      {[...Array(6)].map((_, i) => (
+        <div
+          key={`circuit-v-${i}`}
+          className="absolute w-px bg-gradient-to-b from-transparent via-[#EB4C50]/20 to-transparent animate-circuit-vertical"
+          style={{
+            left: `${15 + i * 15}%`,
+            top: '0%',
+            height: '100%',
+            animationDelay: `${i * 0.7}s`,
+            animationDuration: '8s'
+          }}
+        />
+      ))}
+    </div>
+
+    {/* Subtle Wave Effect */}
+    <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#EB4C50]/5 to-transparent animate-wave" style={{animationDuration: '8s'}} />
+  </div>
+); 

components/l1-performance/BlockAnimation.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface BlockAnimationProps {
+  className?: string;
+}
+
+interface Block {
+  id: number;
+  y: number;
+  hash: string;
+  height: number;
+  isActive: boolean;
+}
+
+export const BlockAnimation: React.FC<BlockAnimationProps> = ({ className = '' }) => {
+  const [blocks, setBlocks] = useState<Block[]>([]);
+  const [nextId, setNextId] = useState(0);
+
+  // Generate random hash-like string
+  const generateHash = () => {
+    const chars = '0123456789abcdef';
+    let hash = '';
+    for (let i = 0; i < 8; i++) {
+      hash += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return hash;
+  };
+
+  // Generate random block height
+  const generateHeight = () => Math.floor(Math.random() * 900000) + 100000;
+
+  // Simple system: One block at a time
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setBlocks(prev => {
+        const minSpacing = 25; // Minimum distance
+        const maxSpacing = 40; // Maximum distance
+
+        // Move all blocks down
+        let updatedBlocks = prev.map(block => ({
+          ...block,
+          y: block.y + 1.5
+        })).filter(block => block.y < 130); // Remove blocks that are off screen
+
+        // Add new block if there's space
+        const lastBlock = updatedBlocks.length > 0 
+          ? updatedBlocks.reduce((highest, block) => block.y < highest.y ? block : highest)
+          : null;
+
+        const shouldAddBlock = !lastBlock || lastBlock.y > minSpacing;
+
+        if (shouldAddBlock) {
+          const randomSpacing = minSpacing + Math.random() * (maxSpacing - minSpacing);
+          const newBlockY = lastBlock ? lastBlock.y - randomSpacing : -20;
+
+          updatedBlocks.push({
+            id: nextId,
+            y: newBlockY,
+            hash: generateHash(),
+            height: generateHeight(),
+            isActive: false
+          });
+
+          setNextId(prev => prev + 1);
+        }
+
+        // Update active state
+        return updatedBlocks.map(block => ({
+          ...block,
+          isActive: block.y >= 40 && block.y <= 60
+        }));
+      });
+    }, 40);
+
+    return () => clearInterval(interval);
+  }, [nextId]);
+
+  return (
+    <div className={`absolute inset-0 overflow-hidden pointer-events-none select-none ${className}`}>
+      {/* Chain line */}
+      <div className="absolute right-12 top-0 w-0.5 h-full bg-gradient-to-b from-transparent via-foreground/10 to-transparent" />
+
+      {/* Blocks */}
+      {blocks.map(block => (
+        <div
+          key={block.id}
+          className={`absolute transition-transform duration-200`}
+          style={{
+            top: `${block.y}%`,
+            right: '48px', // Exactly align with chain line
+            transform: `translateY(-50%) translateX(50%)`,
+          }}
+        >
+          {/* Block container */}
+          <div className={`
+            w-12 h-6 rounded-sm border transition-all duration-200
+            ${block.isActive 
+              ? 'bg-blue-500/20 border-blue-400/40 shadow-lg scale-110' 
+              : 'bg-foreground/5 border-foreground/10 scale-100'
+            }
+          `}>
+            {/* Block content */}
+            <div className="p-1 text-xs font-mono">
+              <div className={`text-[8px] leading-none ${
+                block.isActive ? 'text-blue-400' : 'text-foreground/40'
+              }`}>
+                #{block.height}
+              </div>
+              <div className={`text-[6px] leading-none mt-0.5 ${
+                block.isActive ? 'text-blue-300' : 'text-foreground/30'
+              }`}>
+                {block.hash}
+              </div>
+            </div>
+          </div>
+
+          {/* Active block glow */}
+          {block.isActive && (
+            <div className="absolute inset-0 rounded-sm bg-blue-400/10 animate-pulse" />
+          )}
+        </div>
+      ))}
+
+      {/* Gradient overlay */}
+      <div className="absolute inset-0 bg-gradient-to-l from-transparent via-background/5 to-background/80 pointer-events-none" />
+    </div>
+  );
+};

components/l1-performance/CTASection.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+export const CTASection = () => (
+  <section className="relative py-24 px-4">
+    <div className="absolute inset-0 bg-gradient-to-r from-[#EB4C50]/5 to-orange-500/5 rounded-3xl backdrop-blur-sm " />
+    <div className="relative px-8 py-16 text-center space-y-6 rounded-3xl max-w-4xl mx-auto">
+      <h2 className="text-3xl md:text-5xl font-bold">Ready to Build Your L1?</h2>
+      <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
+        Start building your high-performance L1 blockchain with Avalanche's battle-tested infrastructure and tooling.
+      </p>
+
+      <div className="flex gap-4 justify-center mb-16">
+        <Link
+          href="/docs"
+          className="bg-black hover:bg-black/75 dark:bg-white dark:hover:bg-white/75 text-white dark:text-black px-4 py-2 rounded-lg text-sm font-semibold transition-colors dark:bg-opacity-90"
+        >
+          Get Started
+        </Link>
+      </div>
+    </div>
+  </section>
+);