style: adjust UI elements spacing and outline styles across components

src/components/CallToAction.tsx

@@ -15,7 +15,7 @@ export function CallToAction() {
         <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container className="relative">
-        <div className="mx-auto max-w-2xl sm:text-center">
+        <div className="mx-auto max-w-2xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Get Started Today
           </h2>

src/components/Footer.tsx

@@ -60,7 +60,7 @@ export function Footer() {
                 <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">
+            <nav className="mt-10 flex gap-8">
               <NavLinks />
             </nav>
           </div>

src/components/NavLinks.tsx

@@ -19,7 +19,7 @@ export function NavLinks() {
     <Link
       key={label}
       href={href}
-      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
+      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm leading-tight text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
       onMouseEnter={() => {
         if (timeoutRef.current) {
           window.clearTimeout(timeoutRef.current)

src/components/PrimaryFeatures.tsx

@@ -256,7 +256,7 @@ function FeaturesDesktop() {
           <div
             key={feature.name}
             className={clsx(
-              'relative rounded-2xl outline outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
               selectedIndex === featureIndex
                 ? 'outline-cyan-500'
                 : 'outline-transparent hover:outline-cyan-500',
@@ -362,9 +362,9 @@ function FeaturesMobile() {
           >
             <div
               className={clsx(
-                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline outline-2 transition-colors',
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                 activeIndex === featureIndex
-                  ? 'outline-cyan-500'
+                  ? 'outline-transparent' // Remove outline for active mobile slide
                   : 'outline-transparent hover:outline-cyan-500',
               )}
             >