updates

src/pages/usecases/components/UseCasesGrid.tsx

@@ -1,39 +1,57 @@
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '../../../lib/cn';
-import { buttonBaseClass, buttonGhostLightClass } from '../../../lib/buttonStyles';
+import { buttonGhostLightClass } from '../../../lib/buttonStyles';
+import ContactForm from '../../../components/ui/ContactForm';
 
 const useCases = [
   {
     title: 'Project Mycelium',
     highlight: 'Decentralized Core',
     description:
-      'A self-healing compute mesh that lets organizations and communities spin up sovereign cloud capacity instantly while sharing economics across the network.',
+      '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: 'Zanzibar Digital Free Zone',
+    title: 'Digital Free Zone',
     highlight: 'Sovereign Innovation',
     description:
-      'An economic bridge for digital assets with dedicated governance, regulation, and dispute resolution so builders can deploy compliant Web3, AI, and fintech products.',
+      '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.',
     image: '/images/freezone.jpeg',
   },
   {
     title: 'COOP Cloud',
     highlight: 'People-Powered Cloud',
     description:
-      'A member-owned platform where every participant contributes nodes, earns rewards, and governs the roadmap as GeoMind scales toward a million-node collective.',
+      '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.',
     image: '/images/coop.jpeg',
   },
   {
-    title: 'Sovereign Cloud for Nations',
-    highlight: 'National Capacity',
+    title: 'Cloud for Nations',
+    highlight: 'Digital Sovereignty',
     description:
-      'Independent hyperscale-to-edge infrastructure that gives governments full control over data, AI, and digital services while retaining economic value locally.',
+      '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 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.',
+    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="py-16 text-slate-100 lg:py-24">
       <motion.div
@@ -57,9 +75,20 @@ export const UseCasesGrid = () => {
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, amount: 0.25 }}
               transition={{ duration: 0.5, delay: index * 0.05 }}
-              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"
+              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'
+              )}
             >
-              <div className="relative h-48 overflow-hidden">
+              <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',
+                  useCase.featured && 'sm:h-full sm:w-[42%] lg:w-[38%]'
+                )}
+              >
                 <img
                   src={useCase.image}
                   alt={useCase.title}
@@ -67,7 +96,12 @@ export const UseCasesGrid = () => {
                 />
                 <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">
+              <div
+                className={cn(
+                  'relative flex h-full flex-col gap-4 p-8',
+                  useCase.featured && 'sm:flex-1 sm:p-10 lg:p-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}
@@ -99,28 +133,34 @@ export const UseCasesGrid = () => {
               </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"
+              <button
+                onClick={() => handleOpenForm('deploy')}
                 className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
               >
                 Deploy Capacity
-              </a>
-              <a
-                href="mailto:support@threefold.tech?subject=Offtake%20Capacity"
+              </button>
+              <button
+                onClick={() => handleOpenForm('offtake')}
                 className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
               >
                 Offtake Capacity
-              </a>
-              <a
-                href="mailto:support@threefold.tech?subject=Invest%20in%20the%20Tech"
+              </button>
+              <button
+                onClick={() => handleOpenForm('investor')}
                 className={cn(buttonGhostLightClass, 'flex w-full uppercase tracking-[0.25em]')}
               >
                 Invest in the Tech
-              </a>
+              </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>
   );
 };