@@ -10,7 +10,6 @@ import { Companies } from '@/components/Companies'
|
||||
import { CallTo } from '@/components/CallTo'
|
||||
import { ScrollDown } from '@/components/ui/ScrollDown'
|
||||
import { ScrollUp } from '@/components/ui/ScrollUp'
|
||||
import { GridStats } from '@/components/GridStats'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@@ -21,9 +20,6 @@ export default function Home() {
|
||||
<section id="home-about">
|
||||
<HomeAbout />
|
||||
</section>
|
||||
<section id="grid-stats">
|
||||
<GridStats />
|
||||
</section>
|
||||
<section id="companies">
|
||||
<Companies />
|
||||
</section>
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import CountUp from "react-countup";
|
||||
import React from "react";
|
||||
import { Button } from "./Button";
|
||||
|
||||
export function GridStats() {
|
||||
return (
|
||||
<div id="grid-stats" className="py-24 bg-transparent relative">
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
{/* Column 1: Title & NODES */}
|
||||
<div className="flex flex-col space-y-10">
|
||||
{/* Title + Description */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
|
||||
Powered by a Global Community
|
||||
</h2>
|
||||
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
|
||||
ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
|
||||
</p>
|
||||
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Column 2: CORES (staggered) + SSD */}
|
||||
<div className="flex flex-col space-y-10">
|
||||
<StatCard
|
||||
label="CORES"
|
||||
description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
|
||||
value={<CountUp end={54_958} duration={2.5} separator="," />}
|
||||
note="Total Central Processing Unit Cores available on the grid."
|
||||
className="mt-24"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
label="SSD CAPACITY"
|
||||
description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
|
||||
value={<CountUp end={7_364_506} duration={2.5} separator="," />}
|
||||
unit="GB"
|
||||
note="The total amount of storage (SSD, HDD, & RAM) on the grid."
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Column 3: nodes countries */}
|
||||
<div className="flex flex-col space-y-10 justify-start">
|
||||
<StatCard
|
||||
label="NODES"
|
||||
description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
|
||||
value={<CountUp end={1778} duration={2.5} separator="," />}
|
||||
note="The total number of nodes on the grid."
|
||||
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
label="COUNTRIES"
|
||||
description="The number of countries where at least one node is connected and operational on the grid."
|
||||
value={<CountUp end={51} duration={2.5} separator="," />}
|
||||
note="The total number of countries with active nodes."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧱 Stat Card Component
|
||||
function StatCard({
|
||||
label,
|
||||
description,
|
||||
value,
|
||||
unit,
|
||||
note,
|
||||
className = "",
|
||||
}: {
|
||||
label: string;
|
||||
description: string;
|
||||
value: React.ReactNode;
|
||||
unit?: string;
|
||||
note: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`relative flex flex-col overflow-hidden rounded-2xl rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
|
||||
style={{
|
||||
filter: 'brightness(1)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(0.8)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(1)';
|
||||
}}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
|
||||
<p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
|
||||
{description}
|
||||
</p>
|
||||
<div className="mt-8 flex items-center space-x-3">
|
||||
<span className="text-gradient-neutral-vertical text-3xl">•</span>
|
||||
<div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
|
||||
{value}
|
||||
{unit && (
|
||||
<span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
|
||||
{note}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,12 +10,12 @@ export function NavLinks() {
|
||||
|
||||
return [
|
||||
['About', '/#home-about'],
|
||||
['Cloud', '/#grid-stats'],
|
||||
['Marketplace', '/#companies'],
|
||||
['Technology', '/#stack-section'],
|
||||
['How it works', '/#steps'],
|
||||
['Use Cases', '/#clickable-gallery'],
|
||||
['Coming Soon', '/#use-cases'],
|
||||
['Get Started', '/#call-to-action'],
|
||||
['FAQs', '/#faqs'],
|
||||
].map(([label, href], index) => (
|
||||
<Link
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./src/styles/**/*.css',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
gray: {
|
||||
50: 'oklch(0.985 0 0)',
|
||||
100: 'oklch(0.97 0 0)',
|
||||
200: 'oklch(0.922 0 0)',
|
||||
300: 'oklch(0.87 0 0)',
|
||||
400: 'oklch(0.708 0 0)',
|
||||
500: 'oklch(0.556 0 0)',
|
||||
600: 'oklch(0.439 0 0)',
|
||||
700: 'oklch(0.371 0 0)',
|
||||
800: 'oklch(0.269 0 0)',
|
||||
900: 'oklch(0.205 0 0)',
|
||||
950: 'oklch(0.145 0 0)',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['var(--font-mulish)'],
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
'5xl': '2.5rem',
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fade-in 0.5s linear forwards',
|
||||
'spin-slow': 'spin 4s linear infinite',
|
||||
'spin-slower': 'spin 6s linear infinite',
|
||||
'spin-reverse': 'spin-reverse 1s linear infinite',
|
||||
'spin-reverse-slow': 'spin-reverse 4s linear infinite',
|
||||
'spin-reverse-slower': 'spin-reverse 6s linear infinite',
|
||||
'marquee-vertical': 'marquee-vertical 40s linear infinite',
|
||||
'bounce-y': 'bounce-y 1.5s infinite',
|
||||
'blink': 'blink 2s infinite',
|
||||
'marquee': 'marquee var(--marquee-duration) linear infinite',
|
||||
},
|
||||
keyframes: {
|
||||
'fade-in': {
|
||||
from: { opacity: 0 },
|
||||
to: { opacity: 1 },
|
||||
},
|
||||
'spin-reverse': {
|
||||
to: { transform: 'rotate(-360deg)' },
|
||||
},
|
||||
'blink': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'50%': { opacity: 0.3 },
|
||||
},
|
||||
'bounce-y': {
|
||||
'0%, 100%': {
|
||||
transform: 'translateY(-10%)',
|
||||
animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'translateY(0)',
|
||||
animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
},
|
||||
},
|
||||
'marquee-vertical': {
|
||||
from: { transform: 'translateY(0)' },
|
||||
to: { transform: 'translateY(-50%)' },
|
||||
},
|
||||
'marquee': {
|
||||
'100%': { transform: 'translateY(-50%)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('@tailwindcss/forms')],
|
||||
};
|
||||
Reference in New Issue
Block a user