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

src/pages/cloud/CloudArchitecture.tsx

@@ -56,12 +56,12 @@ export function CloudArchitecture() {
           <ul
             role="list"
             className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
-                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
+                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10 "
           >
             {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">
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+
-        <Eyebrow color="accent">Featured Blueprint</Eyebrow>
+      {/* ✅ Boxed container */}
-        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
+      <div className="max-w-7xl bg-white mx-auto pb-12 border border-t-0 border-b-0 border-gray-200">
-        <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.
+        <Container>
-            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
+          <div className="mx-auto max-w-4xl sm:text-center">
-        <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">
+            <Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
-          <img
+
-            alt="Transistor"
+            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
+              Your Personal Sovereign Cloud Workspace
-            width={158}
+            </H3>
-            height={48}
+
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+            <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.
-          <img
+            </P>
-            alt="Reform"
+          </div>
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
+
-            width={158}
+          {/* ✅ 3x2 logo grid */}
-            height={48}
+          <div className="mt-12 grid grid-cols-3 gap-x-8 gap-y-12">
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+            {logos.map((logo, i) => (
-          />
+              <div key={i} className="flex justify-center">
-          <img
+                <a
-            alt="Tuple"
+                  href={logo.href}
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
+                  target="_blank"
-            width={158}
+                  rel="noopener noreferrer"
-            height={48}
+                  className="transition-transform duration-300 hover:scale-105"
-            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+                >
-          />
+                  <img
-          <img
+                    src={logo.src}
-            alt="SavvyCal"
+                    alt={`Logo ${i + 1}`}
-            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
+                    className="max-h-12 w-auto object-contain"
-            width={158}
+                  />
-            height={48}
+                </a>
-            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
+              </div>
-          />
+            ))}
-          <img
+          </div>
-            alt="Statamic"
+        </Container>
-            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"
-          />
-        </div>
       </div>
-    </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,53 +38,74 @@ 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">
-      <Container>
+
-        <div className="mx-auto max-w-3xl text-center">
+      {/* ✅ Top horizontal line with spacing */}
-          <Eyebrow>
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
-            Use Cases
+      <div className="w-full border-t border-l border-r border-gray-200" />
-          </Eyebrow>
+
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
+      {/* ✅ Inner boxed container */}
-            Built for intelligent workloads across every edge.
+      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
-          </SectionHeader>
+        <Container>
-          <P className="mt-6 text-gray-600">
+          <div className="mx-auto max-w-4xl sm:text-center">
-            Mycelium Cloud unifies compute, storage, and networking so teams can
+            <Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
-            launch anything from GPU inference farms to global collaboration
+
-            suites with deterministic outcomes.
+            <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-          </P>
+              Built for intelligent workloads across every edge.
-        </div>
+            </H3>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          {useCases.map((useCase) => (
+            <P className="mt-6 text-lg text-gray-600">
-            <div
+              Mycelium Cloud unifies compute, storage, and networking so teams can
-              key={useCase.title}
+              launch anything from GPU inference farms to global collaboration suites
-              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"
+              with deterministic outcomes.
-            >
+            </P>
-              <div className="flex items-center justify-between">
+          </div>
-                <h3 className="text-xl font-semibold text-gray-900">
+
-                  {useCase.title}
+          {/* ✅ 3 columns on desktop */}
-                </h3>
+          <ul
-                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+            role="list"
-                  Scenario
+            className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
-                </Small>
+                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
-              </div>
+          >
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+            {useCases.map((useCase) => (
-                {useCase.description}
+              <li
-              </p>
+                key={useCase.title}
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                className="rounded-md border border-gray-200 bg-white p-6 transition-all duration-300
-                {useCase.bullets.map((bullet) => (
+                           hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
-                  <li
+              >
-                    key={bullet}
+                <div className="flex items-center justify-between">
-                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  <h3 className="font-semibold text-gray-900">
-                  >
+                    {useCase.title}
-                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                  </h3>
-                    <span>{bullet}</span>
+                  <Small className="uppercase tracking-[0.25em] text-cyan-500">
-                  </li>
+                    Scenario
-                ))}
+                  </Small>
-              </ul>
+                </div>
-            </div>
+
-          ))}
+                <p className="mt-4 text-gray-700 leading-snug">
-        </div>
+                  {useCase.description}
-      </Container>
+                </p>
+
+                <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                  {useCase.bullets.map((bullet) => (
+                    <li
+                      key={bullet}
+                      className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                    >
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </li>
+            ))}
+          </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',
       },