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/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">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
-            Use Cases
-          </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Built for intelligent workloads across every edge.
-          </SectionHeader>
-          <P className="mt-6 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.
-          </P>
-        </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
-          {useCases.map((useCase) => (
-            <div
-              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"
-            >
-              <div className="flex items-center justify-between">
-                <h3 className="text-xl font-semibold text-gray-900">
-                  {useCase.title}
-                </h3>
-                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
-                  Scenario
-                </Small>
-              </div>
-              <p className="mt-4 text-sm leading-relaxed text-gray-600">
-                {useCase.description}
-              </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>
-            </div>
-          ))}
-        </div>
-      </Container>
+    <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-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.
+            </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.
+            </P>
+          </div>
+
+          {/* ✅ 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) => (
+              <li
+                key={useCase.title}
+                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="font-semibold text-gray-900">
+                    {useCase.title}
+                  </h3>
+                  <Small className="uppercase tracking-[0.25em] text-cyan-500">
+                    Scenario
+                  </Small>
+                </div>
+
+                <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
+                      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>
   )
 }