emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style updates

Browse Source
This commit is contained in:
Emre
2025-10-11 11:17:38 +03:00
parent c0f08ad3fa
commit 9451d22494
28 changed files with 613 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/pages/usecases/components/UseCasesGrid.tsx
View File

@@ -1,40 +1,34 @@
import { motion } from 'framer-motion';
import { cn } from '../../../lib/cn';
import { buttonBaseClass, buttonGhostLightClass } from '../../../lib/buttonStyles';
const useCases = [
{
title: 'Tier-S Datacenters',
description:
"GeoMind's datacenters are 60% more efficient, disaster-resistant, highly secure, fully private, and can be deployed in weeks rather than years, offering a faster, safer, and smarter solution for modern data needs.",
image: '/images/tier-s.jpeg',
},
{
title: 'Tier-H Datacenters',
description:
"GeoMind's distributed datacenter architecture extends from core to edge, seamlessly scaling into homes, offices, and communities. Its ultra-efficient AI, compute, and storage nodes deliver unmatched cost efficiency, performance, and scalability.",
image: '/images/tier-h.jpeg',
},
{
title: 'Project Mycelium',
highlight: 'Decentralized Core',
description:
'Project Mycelium is a core use case of our ecosystem, providing a decentralized, scalable, and secure infrastructure. Built on a global network of independent nodes, it allows individuals and businesses to participate in a more open, distributed, and participatory cloud and Internet model.',
'A self-healing compute mesh that lets organizations and communities spin up sovereign cloud capacity instantly while sharing economics across the network.',
image: '/images/mycelium.jpeg',
},
{
title: 'Zanzibar Digital Free Zone',
highlight: 'Sovereign Innovation',
description:
'Zanzibar Digital Free Zone offers a sovereign jurisdiction for digital innovation, allowing businesses to operate with regulatory clarity and independent dispute resolution. It supports the emerging Real World Assets (RWA) economy, enabling compliant management of digital and physical assets.',
'An economic bridge for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products.',
image: '/images/freezone.jpeg',
},
{
title: 'COOP Cloud',
highlight: 'People-Powered Cloud',
description:
'COOP Cloud is a global cooperative where every user is a member with one vote. Offering a decentralized alternative to centralized cloud providers, it empowers users to deploy nodes worldwide, aiming to create Augmented Collective Intelligence with over one million nodes globally.',
'A member-owned platform where every participant contributes nodes, earns rewards, and governs the roadmap as GeoMind scales toward a million-node collective.',
image: '/images/coop.jpeg',
},
{
title: 'Sovereign Cloud & Internet for Countries',
title: 'Sovereign Cloud for Nations',
highlight: 'National Capacity',
description:
'Most countries lack independent Internet infrastructure and rely on foreign operators. GeoMind enables countries to deploy their own sovereign Cloud & Internet, ensuring economic benefits, data sovereignty, and local control. Several governments are already exploring this.',
'Independent hyperscale-to-edge infrastructure that gives governments full control over data, AI, and digital services while retaining economic value locally.',
image: '/images/countries.jpeg',
},
];
@@ -50,14 +44,12 @@ export const UseCasesGrid = () => {
>
<h2 className="text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
<p className="mt-5 max-w-4xl text-base text-slate-300 sm:text-lg">
GeoMind's next-generation datacenter architecture extends from core to edge, seamlessly
connecting Tier S hyperscale facilities with Tier H local nodes to create a unified, sovereign
infrastructure. Up to 60% more energy-efficient and built for resilience, privacy, and
quantum-safe security, it can be deployed in weeks rather than years. These capabilities power
the transformative use cases below, driving a more secure, efficient, and autonomous digital
future.
From decentralized cores to national-scale infrastructure, GeoMind translates sovereign
compute into deployable products. Each use case blends hyperscale performance with edge
responsiveness, enabling partners to launch resilient, energy-efficient capacity exactly
where it is needed.
</p>
<div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div className="mt-12 grid gap-8 sm:grid-cols-2 xl:grid-cols-4">
{useCases.map((useCase, index) => (
<motion.article
key={useCase.title}
@@ -65,19 +57,69 @@ export const UseCasesGrid = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.25 }}
transition={{ duration: 0.5, delay: index * 0.05 }}
className="overflow-hidden rounded-3xl border border-white/10 bg-black shadow-none backdrop-blur"
className="group relative overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.02] shadow-[0_30px_80px_-40px_rgba(15,23,42,0.9)] transition-all duration-300 hover:-translate-y-1.5 hover:border-brand-400/50 hover:bg-white/10 hover:shadow-[0_36px_96px_-48px_rgba(79,70,229,0.55)] backdrop-blur"
>
<div className="relative h-48 overflow-hidden">
<img src={useCase.image} alt={useCase.title} className="h-full w-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
<h3 className="absolute bottom-4 left-4 text-lg font-semibold text-white">
{useCase.title}
</h3>
<img
src={useCase.image}
alt={useCase.title}
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-transparent" />
</div>
<div className="relative flex h-full flex-col gap-4 p-8">
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
<span className="h-px w-6 bg-sky-200/60" />
{useCase.highlight}
</span>
<h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
<p className="text-sm leading-6 text-slate-300">{useCase.description}</p>
</div>
<p className="p-6 text-sm leading-6 text-slate-300">{useCase.description}</p>
</motion.article>
))}
</div>
<motion.div
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.6, ease: 'easeOut', delay: 0.2 }}
className="mt-16 overflow-hidden rounded-[32px] border border-white/10 bg-gradient-to-br from-[#0d112a] via-[#111f3f] to-[#1c2257] p-10 text-white shadow-[0_30px_90px_-50px_rgba(15,23,42,1)] sm:p-12 lg:p-16"
>
<div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
<div className="max-w-2xl space-y-4">
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-white/60">
Become a Partner
</p>
<h3 className="text-2xl font-semibold sm:text-3xl">
Build sovereign infrastructure with GeoMind&apos;s ecosystem.
</h3>
<p className="text-base text-white/70">
Pick the path that delivers outcomes fast: deploy capacity, lock in offtake, or invest in
the platform redefining cloud infrastructure.
</p>
</div>
<div className="grid w-full gap-4 sm:grid-cols-2 lg:w-auto lg:grid-cols-1">
<a
href="mailto:support@threefold.tech?subject=Deploy%20Capacity"
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
>
Deploy Capacity
</a>
<a
href="mailto:support@threefold.tech?subject=Offtake%20Capacity"
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
>
Offtake Capacity
</a>
<a
href="mailto:support@threefold.tech?subject=Invest%20in%20the%20Tech"
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
>
Invest in the Tech
</a>
</div>
</div>
</motion.div>
</motion.div>
</section>
);