Style updates

src/components/HeroSection/HeroItemsGroup.tsx

@@ -32,10 +32,10 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
   return (
     <div
       className={cn(
-        'transition-all',
+        'border-b border-gray-800/50',
         {
-          'pb-2 pt-5': !isCollapsed,
+          'py-4': !isCollapsed,
-          'py-1': isCollapsed,
+          'py-3': isCollapsed,
         },
         className,
       )}
@@ -52,7 +52,7 @@ export function HeroItemsGroup(props: HeroItemsGroupProps) {
           }}
         />
         {!isCollapsed && (
-          <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
+          <div className="mt-4 grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:grid-cols-3">
             {children}
           </div>
         )}

src/components/HeroSection/HeroTitle.tsx

@@ -24,14 +24,16 @@ export function HeroTitle(props: HeroTitleProps) {
 
   return (
     <div className="flex items-center justify-between">
-      <p className="flex items-center text-sm text-gray-400">
+      <div className="flex items-center gap-3">
-        {!isLoading && icon}
+        <p className="flex items-center text-sm text-gray-400">
-        {isLoading && (
+          {!isLoading && icon}
-          <span className="mr-1.5">
+          {isLoading && (
-            <Spinner />
+            <span className="mr-1.5">
-          </span>
+              <Spinner />
-        )}
+            </span>
-        {title}
+          )}
+          {title}
+        </p>
         {!isLoading && (
           <button
             onClick={onToggleCollapse}
@@ -55,8 +57,8 @@ export function HeroTitle(props: HeroTitleProps) {
             )}
           </button>
         )}
-      </p>
+      </div>
-      <div>{isCollapsed && rightContent}</div>
+      <div className="flex items-center">{!isCollapsed && rightContent}</div>
     </div>
   );
 }