feat: enhance cloud features UI with improved image styling

- Removed CircleBackground component and its instances from desktop and mobile views for cleaner design
- Updated image shadows from shadow-xl to shadow-2xl for stronger depth effect
- Modified image positioning with -ml-32 margin for better layout alignment in tablet and desktop views
- Removed unnecessary background animations to improve visual focus on feature screenshots

src/pages/cloud/CloudFeatures.tsx

@@ -19,7 +19,6 @@ import {
   P,
   SectionHeader,
 } from '@/components/Texts'
-import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 
 import reservenodeimg from '/images/cloud/reserve.png'
@@ -187,7 +186,7 @@ function ReserveNodeScreen() {
       alt="Mycelium Reserve Node"
       width={2432}
       height={1442}
-      className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0"
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
     />
   );
 }
@@ -199,7 +198,7 @@ function ManageClusterScreen() {
       alt="Mycelium Kubeconfig"
       width={2432}
       height={1442}
-      className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0"
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
     />
   );
 }
@@ -211,7 +210,7 @@ function PersonalisedBillingsScreen() {
       alt="Mycelium Billing"
       width={2432}
       height={1442}
-      className="w-4xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-4 lg:ml-0"
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
     />
   );
 }
@@ -282,9 +281,6 @@ function CloudFeaturesDesktop() {
         ))}
       </TabList>
       <div className="relative col-span-6 overflow-hidden">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
-        </div>
         <div className="z-10 mx-auto w-full max-w-[366px]">
           <TabPanels as={Fragment}>
             <AnimatePresence
@@ -364,13 +360,6 @@ function CloudFeaturesMobile() {
                   : 'outline-transparent hover:outline-cyan-500',
               )}
             >
-              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                                <CircleBackground
-                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
-                  color="#13B5C8"
-                  className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
-                />
-              </div>
               <div className="relative mx-auto w-full max-w-[366px]">
                 <feature.screen />
               </div>