improvements
This commit is contained in:
Emre
@@ -16,15 +16,17 @@ const useCases = [
|
||||
title: 'Digital Free Zone',
|
||||
highlight: 'Sovereign Innovation',
|
||||
description:
|
||||
'An economic bridge for digital assets with dedicated governance, regulation, and dispute resolution so builders deploy compliant Web3, AI, and fintech products on GeoMind-powered infrastructure.',
|
||||
'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, earn rewards, and launch services together on GeoMind.',
|
||||
'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',
|
||||
@@ -37,7 +39,7 @@ const useCases = [
|
||||
title: 'Real Estate Deployments',
|
||||
highlight: 'Underutilized Spaces',
|
||||
description:
|
||||
'Deploy GeoMind capacity inside underutilized properties with rapid integration into building utilities. Turn idle rooms into revenue generating data centers at minimal additional cost. Deliver residents and employees data sovereignty tools while relying on passive liquid cooling that requires little maintenance and keeps operating expenses highly competitive.',
|
||||
'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,
|
||||
},
|
||||
@@ -53,21 +55,21 @@ export const UseCasesGrid = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 text-slate-100 lg:py-24">
|
||||
<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-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">
|
||||
<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 grid gap-8 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<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}
|
||||
@@ -76,8 +78,8 @@ export const UseCasesGrid = () => {
|
||||
viewport={{ once: true, amount: 0.25 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.05 }}
|
||||
className={cn(
|
||||
'group relative flex h-full 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)]',
|
||||
useCase.featured && 'sm:col-span-2 xl:col-span-4 sm:flex sm:flex-row sm:items-center sm:gap-8'
|
||||
'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">
|
||||
@@ -85,7 +87,7 @@ export const UseCasesGrid = () => {
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'relative h-48 overflow-hidden',
|
||||
'relative h-48 overflow-hidden sm:h-56 lg:h-full',
|
||||
useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
|
||||
)}
|
||||
>
|
||||
@@ -98,16 +100,17 @@ export const UseCasesGrid = () => {
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex h-full flex-col gap-4 p-8',
|
||||
useCase.featured && 'sm:flex-1 sm:p-10 lg:p-12'
|
||||
'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'
|
||||
)}
|
||||
>
|
||||
<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 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>
|
||||
))}
|
||||
@@ -117,7 +120,7 @@ export const UseCasesGrid = () => {
|
||||
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"
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user