170 lines
8.2 KiB
TypeScript
170 lines
8.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { cn } from '../../../lib/cn';
|
|
import { buttonGhostLightClass } from '../../../lib/buttonStyles';
|
|
import ContactForm from '../../../components/ui/ContactForm';
|
|
|
|
const useCases = [
|
|
{
|
|
title: 'Project Mycelium',
|
|
highlight: 'Decentralized Core',
|
|
description:
|
|
'Project Mycelium turns GeoMind primitives into community services, giving underserved regions, nomads, and privacy seekers decentralized storage, secure networking, and personal agents while sustaining host demand.',
|
|
image: '/images/mycelium.jpeg',
|
|
},
|
|
{
|
|
title: 'Digital Free Zone',
|
|
highlight: 'Sovereign Innovation',
|
|
description:
|
|
'An economic bridge in Zanzibar for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products on GeoMind-powered future-ready infrastructure.',
|
|
image: '/images/freezone.jpeg',
|
|
titleOffset: '-mt-2 sm:-mt-3',
|
|
},
|
|
{
|
|
title: 'COOP Cloud',
|
|
highlight: 'People-Powered Cloud',
|
|
description:
|
|
'COOP Cloud teams with the International Cooperative Alliance so 1.2 billion co-op members can run shared infrastructure and launch services together on GeoMind, building a self-sustaining digital infrastructure that serves their communities.',
|
|
image: '/images/coop.jpeg',
|
|
titleOffset: '-mt-3 sm:-mt-4',
|
|
},
|
|
{
|
|
title: 'Cloud for Nations',
|
|
highlight: 'Digital Sovereignty',
|
|
description:
|
|
'Most governments and citizens rely on foreign clouds, exposing finances and national security. GeoMind equips physical and digital states with sovereign infrastructure so they control data, AI, and services on their own terms.',
|
|
image: '/images/countries.jpeg',
|
|
},
|
|
{
|
|
title: 'Real Estate Deployments',
|
|
highlight: 'Underutilized Spaces',
|
|
description:
|
|
'Deploy GeoMind in underutilized spaces with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty on tech that requires minimal maintenance.',
|
|
image: '/images/hometech2.jpg',
|
|
featured: true,
|
|
},
|
|
];
|
|
|
|
export const UseCasesGrid = () => {
|
|
const [isContactFormOpen, setIsContactFormOpen] = useState(false);
|
|
const [formType, setFormType] = useState<'deploy' | 'offtake' | 'investor'>('deploy');
|
|
|
|
const handleOpenForm = (type: 'deploy' | 'offtake' | 'investor') => {
|
|
setFormType(type);
|
|
setIsContactFormOpen(true);
|
|
};
|
|
|
|
return (
|
|
<section className="px-4 py-16 text-slate-100 sm:px-0 lg:py-24">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.3 }}
|
|
transition={{ duration: 0.6, ease: 'easeOut' }}
|
|
>
|
|
<h2 className="text-center text-3xl font-semibold text-white sm:text-4xl">Use Cases</h2>
|
|
<p className="mt-5 max-w-4xl text-center text-base text-slate-300 sm:text-lg sm:mx-auto">
|
|
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 -mx-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 sm:mx-0 sm:grid sm:grid-cols-2 sm:gap-8 sm:overflow-visible sm:pb-0 sm:snap-none xl:grid-cols-4">
|
|
{useCases.map((useCase, index) => (
|
|
<motion.article
|
|
key={useCase.title}
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: 0.25 }}
|
|
transition={{ duration: 0.5, delay: index * 0.05 }}
|
|
className={cn(
|
|
'group relative flex h-full min-w-[80vw] snap-center flex-col overflow-hidden rounded-3xl border border-white/10 bg-slate-950/80 transition-all duration-300 hover:-translate-y-1 hover:border-brand-400/50 hover:shadow-[0_25px_40px_-24px_rgba(15,118,230,0.45)] sm:min-w-0',
|
|
useCase.featured && 'min-w-[88vw] sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-start sm:gap-8'
|
|
)}
|
|
>
|
|
<div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-brand-500/15 via-transparent to-brand-200/10" />
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'relative h-48 overflow-hidden sm:h-56 lg:h-full',
|
|
useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
|
|
)}
|
|
>
|
|
<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={cn(
|
|
'relative flex h-full flex-col items-center px-6 pb-6 pt-6 text-center sm:px-8 sm:pb-8 sm:pt-8',
|
|
useCase.featured && 'sm:flex-1 sm:px-10 sm:pb-12 sm:pt-12'
|
|
)}
|
|
>
|
|
<div className={cn('flex flex-col items-center gap-3', useCase.titleOffset)}>
|
|
<span className="text-xs font-semibold uppercase tracking-[0.3em] text-sky-200/80">
|
|
{useCase.highlight}
|
|
</span>
|
|
<h3 className="text-xl font-semibold text-white">{useCase.title}</h3>
|
|
</div>
|
|
<p className="mt-6 text-sm leading-6 text-slate-300 sm:mt-8">{useCase.description}</p>
|
|
</div>
|
|
</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-8 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'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">
|
|
<button
|
|
onClick={() => handleOpenForm('deploy')}
|
|
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
|
|
>
|
|
Deploy Capacity
|
|
</button>
|
|
<button
|
|
onClick={() => handleOpenForm('offtake')}
|
|
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
|
|
>
|
|
Offtake Capacity
|
|
</button>
|
|
<button
|
|
onClick={() => handleOpenForm('investor')}
|
|
className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
|
|
>
|
|
Invest in the Tech
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
<ContactForm
|
|
isOpen={isContactFormOpen}
|
|
onClose={() => setIsContactFormOpen(false)}
|
|
title={formType === 'deploy' ? 'Deploy Capacity' : formType === 'offtake' ? 'Offtake Capacity' : 'Invest in the Tech'}
|
|
formType={formType}
|
|
/>
|
|
</section>
|
|
);
|
|
};
|