style: update UI with darker background, remove animations and adjust layout spacing

src/components/About.tsx

@@ -6,10 +6,10 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+      className="relative overflow-hidden bg-black py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
+        <CircleBackground color="#fff" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl sm:text-center">

src/components/ContentDistribution.tsx

@@ -153,24 +153,31 @@ export default function ContentDistribution({ className, bg = '#ffffff' }: Props
           {/* central cloud */}
           <Cloud />
 
-          {/* rotating layer with badges */}
+          {/* rotating layer with badges and beams */}
           <motion.g
             initial={{ rotate: 0 }}
             animate={{ rotate: prefersReduced ? 0 : 360 }}
             transition={{ duration: 40, ease: 'linear', repeat: prefersReduced ? 0 : Infinity }}
           >
+            {/* Beams */}
+            {layout.map((n, i) => {
+              const rad = (n.a * Math.PI) / 180;
+              const x = n.r * Math.cos(rad);
+              const y = n.r * Math.sin(rad);
+              return <Beam key={`beam-${i}`} x2={x} y2={y} delay={i * 0.15} />;
+            })}
+
+            {/* Badges */}
             {layout.map((n, i) => {
               const rad = (n.a * Math.PI) / 180;
               const x = n.r * Math.cos(rad);
               const y = n.r * Math.sin(rad);
               return (
-                <g key={i} transform={`translate(${x}, ${y})`} filter="url(#shadow)">
+                <g key={`badge-${i}`} transform={`translate(${x}, ${y})`} filter="url(#shadow)">
                   <circle r={34} fill="#fff" stroke={GRAY_LT} strokeWidth={3} />
                   <g transform="scale(1)">
                     {n.icon}
                   </g>
-                  {/* beam from center to this node (animated) */}
-                  <Beam x2={-x} y2={-y} delay={i * 0.15} />
                 </g>
               );
             })}

src/components/LinuxLink.tsx

@@ -8,7 +8,7 @@ export function LinuxLink({
 }) {
   return (
     <Link
-      href="#"
+      href="https://github.com/threefoldtech/mycelium/releases"
       aria-label="Download for Linux"
       className={clsx(
         'flex items-center rounded-lg transition-colors px-4 py-2',

src/components/PrimaryFeatures.tsx

@@ -410,7 +410,7 @@ function FeaturesDesktop() {
 
   return (
     <TabGroup
-      className="grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24"
+      className="grid grid-cols-12 items-center gap-8 lg:gap-16"
       selectedIndex={selectedIndex}
       onChange={onChange}
       vertical