feat: redesign cloud page sections with improved layout and branding

- Added logo assets for featured applications (CryptPad, Gitea, Matrix, Nextcloud, Stalwart, LifeKit)
- Restructured CallToAction, CloudBluePrint, and CloudUseCases components with consistent boxed layouts and border styling
- Enhanced hover effects on architecture layers and use case cards with scale transforms
- Updated button styling and improved responsive grid layouts for better visual hierarchy

src/pages/cloud/CalltoAction.tsx

@@ -1,55 +1,56 @@
+"use client";
+
 import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '@/components/Container'
-import { Button } from '@/components/Button'
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section
+    <section className="relative overflow-hidden bg-gray-900">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
+      <div className="w-full border-t border-l border-r border-gray-700" />
+
+      {/* ✅ Main boxed area */}
+      <div
         id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-24 lg:py-32"
+        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
       >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
+    
 
         <Container className="relative">
-        <div className="mx-auto max-w-xl text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl lg:text-4xl">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
               Choose How You Want to Start
             </h2>
 
             <p className="mt-6 text-lg text-gray-300">
               Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
+              You don’t need to host before deploying, and you don’t need to deploy before hosting.
+              
             </p>
 
-          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <div className="flex flex-col items-center text-center">
-              <h3 className="text-lg font-semibold text-white">Host a Node</h3>
-              <p className="mt-2 text-gray-300">
-                Add compute to the network and run your own environment.
-              </p>
+            {/* ✅ Two cards, stacked center with spacing */}
+            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+              <div className="flex flex-col items-center text-center max-w-xs">
                 <Button to="/host" variant="solid" color="cyan" className="mt-4">
                   Host a Node
                 </Button>
               </div>
 
-            <div className="flex flex-col items-center text-center">
-              <h3 className="text-lg font-semibold text-white">Deploy Workloads</h3>
-              <p className="mt-2 text-gray-300">
-                Run Kubernetes clusters, agents, and services on the Mycelium Cloud.
-              </p>
-              <Button to="/cloud" variant="outline" color="white" className="mt-4">
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button to="/cloud" variant="outline" color="dark" className="mt-4">
                   Start Deploying
                 </Button>
               </div>
             </div>
-
-          <p className="mt-10 text-gray-300 text-lg max-w-md mx-auto">
-            You don’t need to host before deploying, and you don’t need to deploy before hosting.
-            Start wherever it makes sense for you.
-          </p>
           </div>
         </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-700" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
     </section>
-  )
+  );
 }

src/pages/cloud/CloudArchitecture.tsx

@@ -61,7 +61,7 @@ export function CloudArchitecture() {
             {architecture.map((layer) => (
               <li
                 key={layer.title}
-                className="rounded-xl border border-gray-800 bg-[#111]/60 p-6"
+                className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 hover:transform-[scale(1.05)]"
               >
                 {layer.icon}   {/* ✅ this now works */}
                 <h3 className="text-lg font-semibold text-white">{layer.title}</h3>

src/pages/cloud/CloudBluePrint.tsx

@@ -1,52 +1,61 @@
-import { H3, P, Eyebrow } from '@/components/Texts'
+"use client";
 
+import { Container } from "@/components/Container";
+import { H3, P, Eyebrow } from "@/components/Texts";
 
 export function CloudBluePrint() {
+  const logos = [
+    { src: '/images/logo/cryptpad.png', href: 'https://cryptpad.fr' },
+    { src: '/images/logo/gitea.png', href: 'https://about.gitea.com' },
+    { src: '/images/logo/lifekit.png', href: '#' }, // No link available
+    { src: '/images/logo/matrix.png', href: 'https://matrix.org' },
+    { src: '/images/logo/nextcloud.png', href: 'https://nextcloud.com' },
+    { src: '/images/logo/stalwart.png', href: 'https://stalw.art' },
+  ];
+
   return (
-    <div className="bg-white py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <Eyebrow color="accent">Featured Blueprint</Eyebrow>
-        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
-        <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
-            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
-        <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
-          <img
-            alt="Transistor"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="Reform"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="Tuple"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
-          />
-          <img
-            alt="SavvyCal"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
-          />
-          <img
-            alt="Statamic"
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
-            width={158}
-            height={48}
-            className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
-          />
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Boxed container */}
+      <div className="max-w-7xl bg-white mx-auto pb-12 border border-t-0 border-b-0 border-gray-200">
+        <Container>
+          <div className="mx-auto max-w-4xl sm:text-center">
+            <Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
+
+            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
+              Your Personal Sovereign Cloud Workspace
+            </H3>
+
+            <P className="mt-6 text-lg text-gray-600">
+              Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack — a full personal cloud you can deploy, customize, or extend. Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.
+            </P>
           </div>
+
+          {/* ✅ 3x2 logo grid */}
+          <div className="mt-12 grid grid-cols-3 gap-x-8 gap-y-12">
+            {logos.map((logo, i) => (
+              <div key={i} className="flex justify-center">
+                <a
+                  href={logo.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform duration-300 hover:scale-105"
+                >
+                  <img
+                    src={logo.src}
+                    alt={`Logo ${i + 1}`}
+                    className="max-h-12 w-auto object-contain"
+                  />
+                </a>
               </div>
+            ))}
           </div>
-  )
+        </Container>
+      </div>
+
+      {/* ✅ Bottom line + bottom spacer */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 bg-transparent" />
+    </section>
+  );
 }

src/pages/cloud/CloudUseCases.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
+import { Eyebrow, H3, P, Small } from '@/components/Texts'
 
 const useCases = [
   {
@@ -36,38 +38,54 @@ const useCases = [
 
 export function CloudUseCases() {
   return (
-    <section className="bg-white py-24 sm:py-32">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="w-full border-t border-l border-r border-gray-200" />
+
+      {/* ✅ Inner boxed container */}
+      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
         <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
-            Use Cases
-          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
+          <div className="mx-auto max-w-4xl sm:text-center">
+            <Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
+
+            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
               Built for intelligent workloads across every edge.
-          </SectionHeader>
-          <P className="mt-6 text-gray-600">
+            </H3>
+
+            <P className="mt-6 text-lg text-gray-600">
               Mycelium Cloud unifies compute, storage, and networking so teams can
-            launch anything from GPU inference farms to global collaboration
-            suites with deterministic outcomes.
+              launch anything from GPU inference farms to global collaboration suites
+              with deterministic outcomes.
             </P>
           </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
+          {/* ✅ 3 columns on desktop */}
+          <ul
+            role="list"
+            className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
+                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
+          >
             {useCases.map((useCase) => (
-            <div
+              <li
                 key={useCase.title}
-              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
+                className="rounded-md border border-gray-200 bg-white p-6 transition-all duration-300
+                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
               >
                 <div className="flex items-center justify-between">
-                <h3 className="text-xl font-semibold text-gray-900">
+                  <h3 className="font-semibold text-gray-900">
                     {useCase.title}
                   </h3>
-                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  <Small className="uppercase tracking-[0.25em] text-cyan-500">
                     Scenario
                   </Small>
                 </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+
+                <p className="mt-4 text-gray-700 leading-snug">
                   {useCase.description}
                 </p>
+
                 <ul className="mt-6 space-y-3 text-sm text-gray-600">
                   {useCase.bullets.map((bullet) => (
                     <li
@@ -79,10 +97,15 @@ export function CloudUseCases() {
                     </li>
                   ))}
                 </ul>
-            </div>
+              </li>
             ))}
-        </div>
+          </ul>
         </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line + spacing */}
+      <div className="w-full border-b border-gray-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
     </section>
   )
 }

tailwind.config.js

@@ -10,6 +10,10 @@ export default {
         sans: ['Mulish', 'system-ui', 'Avenir', 'Helvetica', 'Arial', 'sans-serif'],
       },
       keyframes: {
+        logoScroll: {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-50%)' },
+        },
         'glitch-1': {
           '0%': { transform: 'none' },
           '25%': { transform: 'skew(-0.5deg, -0.5deg)' },
@@ -26,6 +30,7 @@ export default {
         },
       },
       animation: {
+        logoScroll: 'logoScroll 16s linear infinite',
         'glitch-1': 'glitch-1 1s infinite',
         'glitch-2': 'glitch-2 1s infinite',
       },