fix(docs): landing hero buttons

apps/docs/components/marketing/hero.tsx

@@ -20,7 +20,6 @@ import {useInView} from "framer-motion";
 import {useRef} from "react";
 import NextLink from "next/link";
 
-import {useIsMobile, useMediaQuery} from "@/hooks/use-media-query";
 import {title, subtitle} from "@/components/primitives";
 import {NextUILogo} from "@/components";
 import {GithubIcon} from "@/components/icons";
@@ -177,9 +176,6 @@ const FloatingComponents: React.FC<{mounted: boolean}> = ({mounted}) => {
 };
 
 export const Hero = () => {
-  const isTablet = useMediaQuery(1024);
-  const isMobile = useIsMobile();
-
   const isMounted = useIsMounted();
 
   return (
@@ -198,6 +194,7 @@ export const Hero = () => {
         <div className="flex flex-col md:flex-row items-center gap-4">
           <Button
             as={NextLink}
+            className="w-full md:w-auto"
             color="primary"
             endIcon={
               <ArrowRightIcon
@@ -205,7 +202,6 @@ export const Hero = () => {
                 strokeWidth={2}
               />
             }
-            fullWidth={isMobile}
             href="/docs/guide/introduction"
             radius="full"
             size="lg"
@@ -215,7 +211,7 @@ export const Hero = () => {
           <Button
             isExternal
             as={Link}
-            fullWidth={isMobile}
+            className="w-full md:w-auto"
             href="https://github.com/nextui-org/nextui"
             radius="full"
             size="lg"
@@ -227,7 +223,7 @@ export const Hero = () => {
         </div>
       </div>
 
-      {!isTablet && <FloatingComponents mounted={isMounted} />}
+      <FloatingComponents mounted={isMounted} />
 
       <div
         className={clsx(
@@ -235,9 +231,7 @@ export const Hero = () => {
           "data-[mounted=true]:opacity-100 transition-opacity",
           "bg-left bg-no-repeat bg-[url('/gradients/looper-pattern.svg')]",
           "after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:z-[-1]",
-          isTablet
-            ? "after:bg-gradient-to-l after:from-transparent after:to-white dark:after:to-black"
-            : "after:bg-gradient-to-r after:from-transparent after:to-white dark:after:to-black after:z-[-1]",
+          "after:bg-gradient-to-r after:from-transparent after:to-white dark:after:to-black after:z-[-1]",
         )}
         data-mounted={isMounted}
       />

apps/docs/components/mdx-components.tsx

@@ -112,7 +112,7 @@ const Code = ({
           className,
         ),
         pre: "font-light w-full text-sm",
-        copyButton: "text-lg text-code-foreground/50 mr-2",
+        copyButton: "text-lg text-zinc-500 mr-2",
       }}
       codeString={codeString}
     >

apps/docs/components/sandpack/bugreport-button.tsx

@@ -35,7 +35,7 @@ export const BugReportButton = () => {
         title="Report a bug"
         variant="light"
       >
-        <BugIcon className="text-code-foreground/50" height={16} width={16} />
+        <BugIcon className="text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>
   );

apps/docs/components/sandpack/code-viewer.tsx

@@ -115,7 +115,7 @@ export const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
         {isExpandable && (
           <div className="w-full absolute bottom-0 py-1 px-4 flex items-center justify-end bg-gradient-to-b from-code-background/30 to-black/40 dark:to-black h-10">
             <button
-              className="text-sm transition-colors text-code-foreground/50 hover:text-code-foreground/80"
+              className="text-sm font-sans transition-colors text-code-foreground/50 hover:text-code-foreground/80"
               onClick={handleExpand}
             >
               {isExpanded ? "Show less" : "Show more"}

apps/docs/components/sandpack/codesandbox-button.tsx

@@ -30,7 +30,7 @@ export const CodeSandboxButton = () => {
             cursor: "pointer",
           }}
         >
-          <CodeSandboxIcon className="text-code-foreground/50" height={20} width={20} />
+          <CodeSandboxIcon className="text-zinc-500" height={20} width={20} />
         </UnstyledOpenInCodeSandboxButton>
       </Button>
     </Tooltip>

apps/docs/components/sandpack/copy-button.tsx

@@ -24,7 +24,7 @@ export const CopyButton = () => {
       radius="md"
     >
       <Button isIconOnly size="xs" title="Copy Code" variant="light" onClick={copyHandler}>
-        <CopyLinearIcon className="text-code-foreground/50" height={16} width={16} />
+        <CopyLinearIcon className="text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>
   );