fix: css things

apps/web/src/app/contact/page.tsx

@@ -37,7 +37,7 @@ export default function AboutPage() {
       {/* CTA section */}
       <DotsSection className='max-w-2xl'>
         <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-8'>
-          <HeroButton asChild heroVariant='orange' className=''>
+          <HeroButton asChild heroVariant='orange'>
             <Link href={twitterUrl} target='_blank' rel='noopener'>
               DM me on Twitter / X
             </Link>

apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-public-project-detail.tsx

@@ -491,6 +491,7 @@ function ProjectHeader({
           heroVariant='orange'
           className='justify-self-end'
           disabled={tab === 'pricing'}
+          asChild={tab !== 'pricing'}
         >
           <Link
             href={`/marketplace/projects/${project.identifier}?tab=pricing`}

apps/web/src/components/hero-button/index.tsx

@@ -1,8 +1,8 @@
 import type * as React from 'react'
 import type { Simplify } from 'type-fest'
-import cs from 'clsx'
 
 import { Button, type ButtonProps } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 import styles from './styles.module.css'
 
@@ -23,21 +23,21 @@ export function HeroButton({
   ...buttonProps
 }: HeroButtonProps) {
   return (
-    <div className={cs(styles.heroButtonWrapper, className)}>
+    <div className={cn(styles.heroButtonWrapper, className)}>
       {heroVariant === 'blue' && (
-        <span className={cs(styles.heroButtonBg, styles.heroButtonBg1)} />
+        <span className={cn(styles.heroButtonBg, styles.heroButtonBg1)} />
       )}
 
       {heroVariant === 'purple' && (
-        <span className={cs(styles.heroButtonBg, styles.heroButtonBg2)} />
+        <span className={cn(styles.heroButtonBg, styles.heroButtonBg2)} />
       )}
 
       {heroVariant === 'orange' && (
-        <span className={cs(styles.heroButtonBg, styles.heroButtonBg3)} />
+        <span className={cn(styles.heroButtonBg, styles.heroButtonBg3)} />
       )}
 
       <Button
-        className={cs(styles.heroButton, buttonClassName)}
+        className={cn(styles.heroButton, buttonClassName)}
         type='button'
         {...(buttonProps as any)}
       />

apps/web/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {