feat(nx-dev): update typography and hero component styles (#27011)

Enhanced the typography styles to improve text scaling across various
screen sizes. Adjusted the hero component to include responsive line
breaks and optimized the SVG element for better alignment and sizing.

nx-dev/ui-common/src/lib/typography.tsx

@@ -23,7 +23,7 @@ const variants: Record<AllowedVariants, string> = {
   title:
     'text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-5xl',
   display:
-    'text-4xl font-medium tracking-tight text-slate-950 dark:text-white sm:text-8xl',
+    'text-5xl font-medium tracking-tight text-slate-950 md:text-6xl dark:text-white xl:text-8xl',
   subtitle: 'text-lg leading-8 text-slate-700 dark:text-slate-300 sm:text-2xl',
 };
 

nx-dev/ui-home/src/lib/hero.tsx

@@ -45,10 +45,11 @@ export function Hero(): JSX.Element {
               Smart
             </span>{' '}
             Monorepos
+            <br className="sm:hidden" />
             <svg
               viewBox="0 0 2 2"
               fill="currentColor"
-              className="mx-4 inline-flex h-2 w-2"
+              className="mx-6 hidden size-2 sm:inline-flex xl:size-3"
             >
               <circle cx={1} cy={1} r={1} />
             </svg>