ok
This commit is contained in:
@@ -10,6 +10,7 @@ import { Companies } from '@/components/Companies'
|
|||||||
import { CallTo } from '@/components/CallTo'
|
import { CallTo } from '@/components/CallTo'
|
||||||
import { ScrollDown } from '@/components/ui/ScrollDown'
|
import { ScrollDown } from '@/components/ui/ScrollDown'
|
||||||
import { ScrollUp } from '@/components/ui/ScrollUp'
|
import { ScrollUp } from '@/components/ui/ScrollUp'
|
||||||
|
import { GridStats } from '@/components/GridStats'
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
@@ -20,6 +21,9 @@ export default function Home() {
|
|||||||
<section id="home-about">
|
<section id="home-about">
|
||||||
<HomeAbout />
|
<HomeAbout />
|
||||||
</section>
|
</section>
|
||||||
|
<section id="grid-stats">
|
||||||
|
<GridStats />
|
||||||
|
</section>
|
||||||
<section id="companies">
|
<section id="companies">
|
||||||
<Companies />
|
<Companies />
|
||||||
</section>
|
</section>
|
||||||
|
@@ -0,0 +1,119 @@
|
|||||||
|
"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 [
|
return [
|
||||||
['About', '/#home-about'],
|
['About', '/#home-about'],
|
||||||
|
['Cloud', '/#grid-stats'],
|
||||||
['Marketplace', '/#companies'],
|
['Marketplace', '/#companies'],
|
||||||
['Technology', '/#stack-section'],
|
['Technology', '/#stack-section'],
|
||||||
['How it works', '/#steps'],
|
['How it works', '/#steps'],
|
||||||
['Use Cases', '/#clickable-gallery'],
|
['Use Cases', '/#clickable-gallery'],
|
||||||
['Coming Soon', '/#use-cases'],
|
['Coming Soon', '/#use-cases'],
|
||||||
['Get Started', '/#call-to-action'],
|
|
||||||
['FAQs', '/#faqs'],
|
['FAQs', '/#faqs'],
|
||||||
].map(([label, href], index) => (
|
].map(([label, href], index) => (
|
||||||
<Link
|
<Link
|
||||||
|
77
tailwind.config.js
Normal file
77
tailwind.config.js
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
/** @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