Update UI styling in dashboard, pricing, and marketing

The changes include UI styling updates across dashboard, pricing, and marketing components. This involves updating animations and slide-in effects on the dashboard demo component, adjusting color schemes, animations, and spacing on pricing related components, and modifying layout and spacing on the marketing page. Other subtle style changes like font weights, colors and sizes were also addressed.

apps/web/app/(dashboard)/home/[account]/_components/dashboard-demo.tsx

@@ -215,7 +215,11 @@ function Chart(
   props: React.PropsWithChildren<{ data: { value: string; name: string }[] }>,
 ) {
   return (
-    <div className={'h-36'}>
+    <div
+      className={
+        'h-36 duration-200 animate-in fade-in slide-in-from-left-4 slide-in-from-top-4'
+      }
+    >
       <ResponsiveContainer width={'100%'} height={'100%'}>
         <LineChart
           width={400}

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

@@ -18,13 +18,11 @@ async function PricingPage() {
   const { t } = await createI18nServerInstance();
 
   return (
-    <div className={'container mx-auto'}>
-      <div className={'my-8 flex flex-col space-y-16'}>
-        <SitePageHeader
-          title={t('marketing:pricing')}
-          subtitle={t('marketing:pricingSubtitle')}
-        />
-      </div>
+    <div className={'container mx-auto mt-8 flex flex-col space-y-12'}>
+      <SitePageHeader
+        title={t('marketing:pricing')}
+        subtitle={t('marketing:pricingSubtitle')}
+      />
 
       <PricingTable paths={pathsConfig.auth} config={billingConfig} />
     </div>