File size: 6,553 Bytes
5fcdc45 c51e9c9 5fcdc45 6d09a0b 5fcdc45 c51e9c9 5fcdc45 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | "use client";
import Link from "next/link";
export function HeroSection() {
return (
<section style={{ position: "relative", overflow: "hidden" }}>
<div style={{
position: "absolute", top: "-30%", right: "-10%",
width: "700px", height: "700px",
borderRadius: "50%",
background: "radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%)",
pointerEvents: "none",
}} />
<div style={{
position: "absolute", bottom: "-20%", left: "-5%",
width: "500px", height: "500px",
borderRadius: "50%",
background: "radial-gradient(circle, rgba(0,114,206,0.04) 0%, transparent 70%)",
pointerEvents: "none",
}} />
<div className="container" style={{ paddingTop: "80px", paddingBottom: "32px", position: "relative" }}>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<div className="flex items-center gap-3 mb-8 animate-fade-in-up">
<span className="badge-glow" style={{ fontSize: "0.75rem" }}>🏆 Hackathon 2025</span>
<span className="badge-outline" style={{ fontSize: "0.75rem" }}>Powered by TigerGraph</span>
</div>
<h1 className="display-hero mb-8 animate-fade-in-up delay-100">
Graphs make{" "}
<br className="hidden sm:block" />
LLM inference{" "}
<span className="gradient-text-orange">smarter</span>
</h1>
<p className="body-lg mb-10 animate-fade-in-up delay-200" style={{ maxWidth: "540px", color: "#3d3d3a" }}>
A 3-pipeline system that routes queries through knowledge graphs
when it matters — cutting tokens by 44%, speeding up multi-hop questions,
and delivering measurably better answers.
</p>
<div className="flex flex-wrap gap-4 animate-fade-in-up delay-300">
<Link href="/playground" className="btn btn-primary btn-lg no-underline">
Try Live Demo
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<path d="M3 8h10M9 4l4 4-4 4" />
</svg>
</Link>
<Link href="/benchmarks" className="btn btn-secondary btn-lg no-underline">
View Benchmarks
</Link>
</div>
</div>
<div className="animate-fade-in-up delay-400">
<div className="code-window animate-float" style={{ boxShadow: "0 20px 60px rgba(0,43,73,0.12)" }}>
<div className="code-window-header">
<div className="code-window-dot code-window-dot-red" />
<div className="code-window-dot code-window-dot-yellow" />
<div className="code-window-dot code-window-dot-green" />
<span className="body-sm" style={{ color: "#a09d96", marginLeft: "12px" }}>
graphrag_pipeline.py
</span>
</div>
<div style={{ padding: "28px", fontFamily: "var(--font-mono)", fontSize: "0.8125rem", lineHeight: "2" }}>
<div style={{ color: "#6c6a64" }}>{"# AI Factory Model — 4-Layer Architecture"}</div>
<br />
<div>
<span style={{ color: "#FF6B00" }}>class</span>
<span style={{ color: "#faf9f5" }}> GraphRAGPipeline</span>
<span style={{ color: "#6c6a64" }}>:</span>
</div>
<div style={{ paddingLeft: "24px" }}>
<span style={{ color: "#5db8a6" }}>graph</span>
<span style={{ color: "#6c6a64" }}>{" = "}</span>
<span style={{ color: "#e8a55a" }}>TigerGraphCloud</span>
<span style={{ color: "#6c6a64" }}>()</span>
</div>
<div style={{ paddingLeft: "24px" }}>
<span style={{ color: "#5db8a6" }}>router</span>
<span style={{ color: "#6c6a64" }}>{" = "}</span>
<span style={{ color: "#e8a55a" }}>AdaptiveQueryRouter</span>
<span style={{ color: "#6c6a64" }}>()</span>
</div>
<div style={{ paddingLeft: "24px" }}>
<span style={{ color: "#5db8a6" }}>llm</span>
<span style={{ color: "#6c6a64" }}>{" = "}</span>
<span style={{ color: "#e8a55a" }}>UniversalLLM</span>
<span style={{ color: "#6c6a64" }}>(</span>
<span style={{ color: "#cc785c" }}>"gemini-2.5-flash"</span>
<span style={{ color: "#6c6a64" }}>)</span>
</div>
<div style={{ paddingLeft: "24px" }}>
<span style={{ color: "#5db8a6" }}>eval</span>
<span style={{ color: "#6c6a64" }}>{" = "}</span>
<span style={{ color: "#e8a55a" }}>RAGASEvaluator</span>
<span style={{ color: "#6c6a64" }}>()</span>
</div>
<br />
<div style={{ paddingLeft: "24px" }}>
<span style={{ color: "#FF6B00" }}>def</span>
<span style={{ color: "#faf9f5" }}> query</span>
<span style={{ color: "#6c6a64" }}>(self, q):</span>
</div>
<div style={{ paddingLeft: "48px" }}>
<span style={{ color: "#6c6a64" }}>route = self.router.</span>
<span style={{ color: "#5db872" }}>classify</span>
<span style={{ color: "#6c6a64" }}>(q)</span>
</div>
<div style={{ paddingLeft: "48px" }}>
<span style={{ color: "#6c6a64" }}>context = self.graph.</span>
<span style={{ color: "#5db872" }}>traverse</span>
<span style={{ color: "#6c6a64" }}>(q)</span>
</div>
<div style={{ paddingLeft: "48px" }}>
<span style={{ color: "#FF6B00" }}>return</span>
<span style={{ color: "#6c6a64" }}> self.llm.</span>
<span style={{ color: "#5db872" }}>generate</span>
<span style={{ color: "#6c6a64" }}>(context) </span>
<span style={{ color: "#5db872" }}>✓</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
|