@@ -10,7 +10,6 @@ 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 (
|
||||||
@@ -21,9 +20,6 @@ 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>
|
||||||
|
@@ -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 [
|
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
|
||||||
|
@@ -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