refactor: remove unused icon components and simplify feature layout

- Removed DeviceUserIcon, DeviceNotificationIcon, and DeviceTouchIcon components that were no longer being used
- Cleaned up unused useId import
- Adjusted spacing in feature titles and tab list padding

src/pages/cloud/CloudFeaturesLight.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Fragment, useEffect, useId, useRef, useState } from 'react'
+import { Fragment, useEffect, useRef, useState } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import clsx from 'clsx'
 import {
@@ -26,67 +26,6 @@ import billingImg from '/images/cloud/billing.png'
 import kubeconfigImg from '/images/cloud/kubeconfig.png'
 
 
-/* ICONS */
-function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#E5E7EB" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
-        fill="#6B7280"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
-        fill="#9CA3AF"
-      />
-    </svg>
-  )
-}
-
-function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
-      <circle cx={16} cy={16} r={16} fill="#E5E7EB" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
-        fill="#9CA3AF"
-      />
-      <path d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z" fill="#6B7280" />
-    </svg>
-  )
-}
-
-function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  let id = useId()
-  return (
-    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
-      <defs>
-        <linearGradient id={`${id}-gradient`} x1={14} y1={14.5} x2={7} y2={17}>
-          <stop stopColor="#6B7280" />
-          <stop offset={1} stopColor="#D1D5DB" stopOpacity={0} />
-        </linearGradient>
-      </defs>
-      <circle cx={16} cy={16} r={16} fill="#E5E7EB" />
-      <path
-        fill="#9CA3AF"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
-      />
-      <path d="M7 22c0-4.694 3.5-8 8-8" stroke={`url(#${id}-gradient)`} strokeWidth={2} strokeLinecap="round" />
-      <path
-        d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
-        fill="#9CA3AF"
-      />
-    </svg>
-  )
-}
 
 
 /* Feature Data */
@@ -95,7 +34,6 @@ const features = [
     name: 'Decentralized Kubernetes',
     description:
       "Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.",
-    icon: DeviceUserIcon,
     screen: () => (
       <img
         src={reservenodeimg}
@@ -107,7 +45,6 @@ const features = [
     name: 'Manage Your Cluster',
     description:
       'Manage your cluster with ease, with a simple and intuitive interface.',
-    icon: DeviceNotificationIcon,
     screen: () => (
       <img
         src={kubeconfigImg}
@@ -119,7 +56,6 @@ const features = [
     name: 'Personalised Billings & Accounts',
     description:
       'Easily manage your cluster billing and accounts with personalised configurations.',
-    icon: DeviceTouchIcon,
     screen: () => (
       <img
         src={billingImg}
@@ -210,7 +146,7 @@ function CloudFeaturesDesktop() {
       selectedIndex={selectedIndex}
       onChange={onChange}
     >
-      <TabList className="col-span-6 space-y-6 pl-4 sm:pl-6 lg:pl-8">
+      <TabList className="col-span-6 space-y-6 pl-4 lg:pl-6">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
@@ -229,8 +165,7 @@ function CloudFeaturesDesktop() {
               />
             )}
             <div className="relative z-10 p-8">
-              <feature.icon className="h-8 w-8" />
+              <FeatureTitle as="h3" className="text-gray-900">
-              <FeatureTitle as="h3" className="mt-6 text-gray-900">
                 <Tab className="text-left data-selected:not-data-focus:outline-hidden">
                   <span className="absolute inset-0 rounded-2xl" />
                   {feature.name}
@@ -287,8 +222,7 @@ function CloudFeaturesMobile() {
                 <feature.screen />
               </div>
               <div className="mt-6">
-                <feature.icon className="h-8 w-8" />
+                <MobileFeatureTitle className="text-gray-900">
-                <MobileFeatureTitle className="mt-4 text-gray-900">
                   {feature.name}
                 </MobileFeatureTitle>
                 <FeatureDescription className="mt-2 text-gray-600">