Skip to content

Replaced hardcoded stats with a new 'How Orb Oracle works?' section #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
0x-Rahul wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Replaced hardcoded stats with a new 'How Orb Oracle works?' section #18

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 101 additions & 57 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,75 @@
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Navigation } from "@/components/navigation"
import { ArrowRight, Database, Shield, Zap } from "lucide-react"
import Orb from "@/components/Orb"
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Navigation } from "@/components/navigation";
import { ArrowRight, Database, Shield, Zap } from "lucide-react";
import Orb from "@/components/Orb";

// StepArrow component
const StepArrow = () => (
<div className="hidden md:block absolute right-[-80px] top-[34px]">
<svg width="150" height="24" viewBox="0 0 150 24" fill="none">
<path
d="M0 12 H140 L130 4 M140 12 L130 20"
stroke="rgb(147,197,253)"
strokeWidth="2.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);

export default function HomePage() {
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" style={{ fontStyle: "oblique 12deg" }}>
<Navigation />

{/* Hero Section */}
<section className="relative h-screen flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0">
<div style={{
width: '100vw',
height: '100vh',
position: 'absolute',
top: '0',
left: '0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<div style={{
width: 'min(90vw, 90vh)',
height: 'min(90vw, 90vh)',
maxWidth: '800px',
maxHeight: '800px'
}}>
<Orb
hoverIntensity={1.7}
rotateOnHover={true}
hue={300}
forceHoverState={false}
/>
<div
style={{
width: "100vw",
height: "100vh",
position: "absolute",
top: "0",
left: "0",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<div
style={{
width: "min(90vw, 90vh)",
height: "min(90vw, 90vh)",
maxWidth: "800px",
maxHeight: "800px",
}}
>
<Orb hoverIntensity={1.7} rotateOnHover={true} hue={300} forceHoverState={false} />
</div>
</div>
</div>
<div className="container mx-auto px-4 text-center z-10 relative">
<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' }}>
Orb Oracle:
<div><span className="text-primary">The Price of Everything</span></div>
<h1 className="text-4xl md:text-5xl font-medium mb-8 text-balance tracking-wide" style={{ fontStyle: "oblique 15deg" }}>
Orb Oracle:
<div>
<span className="text-primary">The Price of Everything</span>
</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">
<Link href="/create">
Get Started
</Link>
<Link href="/create">Get Started</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">
<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>
</div>
Expand All @@ -63,7 +81,9 @@ export default function HomePage() {
<section className="h-screen flex items-center justify-center">
<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>
<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
</p>
Expand Down Expand Up @@ -109,25 +129,47 @@ export default function HomePage() {
</div>
</section>

{/* Stats Section */}
<section className="h-screen flex items-center justify-center">
<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>
{/* How Orb Oracle Works */}
<section className="py-28 bg-background text-center">
<div className="container mx-auto px-8 max-w-6xl">
<h2 className="text-3xl md:text-4xl font-medium mb-20 tracking-wide" style={{ fontStyle: "oblique 15deg" }}>
How Orb Oracle Works?
</h2>

<div className="relative flex flex-col md:flex-row items-center justify-between text-center md:text-left">
{/* Step 1 */}
<div className="flex-1 flex flex-col items-center px-6 relative">
<div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-black font-semibold text-lg shadow-md mb-6">
1
</div>
<h3 className="text-xl font-semibold text-primary mb-3">Multi-Source Aggregation</h3>
<p className="text-muted-foreground leading-relaxed max-w-xs md:max-w-sm mb-8">
Orb Oracle pulls live prices from top exchanges, filters out bad data, and delivers a clean, reliable market value.
</p>
<StepArrow />
</div>
<div>
<div className="text-4xl font-medium text-primary mb-2">99.9%</div>
<div className="text-muted-foreground">Uptime</div>

{/* Step 2 */}
<div className="flex-1 flex flex-col items-center px-6 relative">
<div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-black font-semibold text-lg shadow-md mb-6">
2
</div>
<h3 className="text-xl font-semibold text-primary mb-3">Validation & Signing</h3>
<p className="text-muted-foreground leading-relaxed max-w-xs md:max-w-sm mb-8">
Independent nodes verify each update and sign it with cryptography to ensure accuracy and security.
</p>
<StepArrow />
</div>
<div>
<div className="text-4xl font-medium text-primary mb-2">50+</div>
<div className="text-muted-foreground">Supported Chains</div>

{/* Step 3 */}
<div className="flex-1 flex flex-col items-center px-6 relative">
<div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center text-black font-semibold text-lg shadow-md mb-6">
3
</div>
<h3 className="text-xl font-semibold text-primary mb-3">On-Chain Publishing</h3>
<p className="text-muted-foreground leading-relaxed max-w-xs md:max-w-sm">
The verified data is posted on-chain so smart contracts can access it instantly — no middlemen needed.
</p>
</div>
</div>
</div>
Expand All @@ -137,7 +179,9 @@ export default function HomePage() {
<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>
<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
</p>
Expand All @@ -150,5 +194,5 @@ export default function HomePage() {
</div>
</section>
</div>
)
);
}