feat(nx-dev): update descriptions and layout styles for better clarity (

#26991)

Revised meta descriptions and adjusted layout styles to improve visual
consistency and accessibility. Enhanced card layout by refining padding
and icon handling for different screen sizes.

nx-dev/nx-dev/pages/index.tsx

@@ -15,7 +15,7 @@ export default function Index(): JSX.Element {
     <>
       <NextSeo
         title="Nx: Smart Monorepos · Fast CI"
-        description="Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI."
+        description="Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution."
         openGraph={{
           url: 'https://nx.dev',
           title: 'Nx: Smart Monorepos · Fast CI',
@@ -34,8 +34,7 @@ export default function Index(): JSX.Element {
           type: 'website',
         }}
       />
-      <h1 className="sr-only">Next generation monorepo tool</h1>
-      {/*<AnnouncementBanner />*/}
+      <h1 className="sr-only">Build system with advanced CI capabilities.</h1>
       <DefaultLayout isHome>
         <Hero />
         <div className="mt-16 lg:-mt-32">

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

@@ -144,7 +144,7 @@ export function Footer(): JSX.Element {
       <h2 id="footer-heading" className="sr-only">
         Footer
       </h2>
-      <div className="mx-auto max-w-7xl px-4 pt-12 opacity-50 transition-opacity hover:opacity-100 sm:px-6 lg:px-8 lg:pt-16">
+      <div className="mx-auto max-w-7xl px-4 pt-12 transition-opacity sm:px-6 lg:px-8 lg:pt-16 lg:opacity-50 lg:hover:opacity-100">
         <div className="xl:grid xl:grid-cols-3 xl:gap-8">
           <div className="space-y-4 text-slate-700 xl:col-span-1 dark:text-slate-300">
             <svg
@@ -173,7 +173,7 @@ export function Footer(): JSX.Element {
               ))}
             </div>
             <div className="flex items-center text-sm">
-              Preferences <ThemeSwitcher />
+              Theme <ThemeSwitcher />
             </div>
           </div>
           <div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">

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

@@ -10,7 +10,9 @@ import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
 export function Hero(): JSX.Element {
   return (
     <div className="mx-auto h-screen w-full max-w-7xl px-6 lg:px-8">
-      <ShaderGradientElement />
+      <div className="hidden lg:block">
+        <ShaderGradientElement />
+      </div>
       <div className="absolute left-0 right-0 -z-10 mx-auto flex h-full max-h-screen w-full flex-row justify-between border-b border-dashed border-slate-200/30 px-6 lg:h-full lg:max-w-7xl lg:px-0 dark:border-slate-800/40">
         <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
         <div className="h-full w-full border-x border-dashed border-slate-200/20 dark:border-slate-800/40" />
@@ -22,7 +24,7 @@ export function Hero(): JSX.Element {
       <div className="z-20 mx-auto grid h-screen max-w-6xl grid-cols-1 place-items-center text-center">
         <div className="container">
           <div className="-mt-16 hidden sm:mb-8 sm:flex sm:justify-center">
-            <div className="relative rounded-full px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 transition-all hover:ring-slate-900/20 dark:ring-slate-100/10 dark:hover:ring-slate-100/20">
+            <div className="relative rounded-full bg-white px-3 py-1 text-sm leading-6 ring-1 ring-slate-900/10 transition-all hover:ring-slate-900/20 dark:bg-slate-950 dark:ring-slate-100/10 dark:hover:ring-slate-100/20">
               <span className="text-blue-500 dark:text-sky-500">
                 Monorepo World
               </span>{' '}