Update CSS classes for multiple components

The commit refactors CSS classes of multiple components to improve the visual consistency across different resolutions. The changes include adjusting margin, padding, fonts, and adding hover states to some elements. Furthermore, the logo size has been made responsive for both small and large views.

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -84,7 +84,7 @@ function AuthButtons() {
 
           <ArrowRightIcon
             className={
-              'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1'
+              'ml-1 h-4 w-4 transition-transform duration-500 group-hover:translate-x-1 hidden lg:block'
             }
           />
         </Link>

apps/web/app/(marketing)/page.tsx

@@ -262,7 +262,7 @@ function Pill(
       {props.new && (
         <span
           className={
-            'rounded-2xl bg-primary px-2 py-1.5 text-sm font-semibold text-primary-foreground'
+            'rounded-2xl bg-primary px-2.5 py-1.5 text-sm font-semibold text-primary-foreground'
           }
         >
           New
@@ -306,7 +306,7 @@ function MainCallToActionButton() {
   return (
     <div className={'flex space-x-4'}>
       <Button
-        className={'h-12 rounded-xl px-4 text-base font-semibold'}
+        className={'h-12 rounded-xl px-4 text-base font-semibold hover:shadow-2xl transition-all dark:shadow-primary/30'}
         asChild
       >
         <Link href={'/auth/sign-up'}>

apps/web/components/app-logo.tsx

@@ -12,7 +12,7 @@ function LogoImage({
   return (
     <svg
       width={width}
-      className={cn(`w-[95px]`, className)}
+      className={cn(`w-[80px] lg:w-[95px]`, className)}
       viewBox="0 0 733 140"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"