Desktop nav buttons tighter

src/components/buttons/CTAButtons.tsx

@@ -123,6 +123,82 @@ export const NavCTAButton = ({
 }) => {
   const router = useRouter();
 
+  return target === "_blank" ? (
+    <motion.button
+      className={clsx(
+        "font-planar font-normal 2xl:text-md xl:text-md text-md whitespace-nowrap select-none rounded pointer pointer-events-auto z-20",
+        getVariantClass(variant, mode),
+        className
+      )}
+      variants={hoverVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      whileHover="hover"
+      whileTap="tap"
+      transition={{
+        duration: 0.2,
+        ease: "circOut",
+      }}
+    >
+      <a
+        href={href}
+        target={target}
+        className={clsx(
+          "flex flex-row gap-1 justify-center items-center px-2 pointer select-none pointer-events-auto",
+          size === Size.THIN ? "py-1" : "py-2"
+        )}
+      >
+        {children}
+      </a>
+    </motion.button>
+  ) : (
+    <motion.button
+      className={clsx(
+        "font-planar font-normal px-2 2xl:text-md xl:text-sm text-md whitespace-nowrap select-none flex flex-row " +
+          "gap-1 justify-center items-center pointer pointer-events-auto z-20",
+        size === Size.THIN ? "py-1" : "py-2",
+        "cursor-pointer select-none",
+        "rounded",
+        getVariantClass(variant, mode),
+        className
+      )}
+      variants={hoverVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      whileHover="hover"
+      whileTap="tap"
+      transition={{
+        duration: 0.2,
+        ease: "circOut",
+      }}
+      onClick={() => router.push(href ? href : SHOP_URL)}
+    >
+      {children}
+    </motion.button>
+  );
+};
+
+export const CTAButton = ({
+  children,
+  href = SHOP_URL,
+  className,
+  variant = ColorVariant.RUST,
+  mode = FillMode.DEFAULT,
+  size = Size.THIN,
+  target = "_self",
+}: {
+  children: React.ReactNode;
+  href?: string;
+  className?: string;
+  variant?: ColorVariant;
+  mode?: FillMode;
+  size?: Size;
+  target?: string;
+}) => {
+  const router = useRouter();
+
   return target === "_blank" ? (
     <motion.button
       className={clsx(

src/components/navbar/navButtons.tsx

@@ -14,7 +14,8 @@ export const NavLogInButton = ({ atTop = true }: { atTop: boolean }) => {
     <motion.a
       href={navItemLinks[1].link}
       target={navItemLinks[1].target}
-      className="-col-end-2 md:-col-end-4 2xl:-col-end-5 select-none size-fit self-center pointer-events-auto"
+      className="-col-end-2 md:-col-end-3 2xl:-col-end-3 2xl:text-[0.75rem] lg:text-[1rem] md:text-[0.8rem]
+      select-none size-fit self-center pointer-events-auto"
       variants={arrowLinkVariants}
       initial="initial"
       animate={{ color: atTop ? "var(--filament)" : "var(--foreground)" }}
@@ -30,7 +31,8 @@ export const NavDocsButton = ({ atTop = true }: { atTop: boolean }) => {
     <motion.a
       href={navItemLinks[0].link}
       target={navItemLinks[0].target}
-      className="-col-end-3 md:-col-end-5 2xl:-col-end-6 flex flex-row gap-1 size-fit items-center select-none self-center pointer-events-auto"
+      className="-col-end-3 md:-col-end-4 2xl:-col-end-4 2xl:text-[0.75rem] lg:text-[1rem] md:text-[0.8rem]
+      flex flex-row gap-1 size-fit items-center select-none self-center pointer-events-auto"
       variants={arrowLinkVariants}
       initial="initial"
       animate={{ color: atTop ? "var(--filament)" : "var(--foreground)" }}

src/components/navbar/navbar.tsx

@@ -77,10 +77,7 @@ export default function NavBar() {
         <Logotype atTop={atTop} isMenuOpen={mobileShouldOpenBurger} />
         <NavDocsButton atTop={atTop} />
         <NavLogInButton atTop={atTop} />
-        <NavCTAButton
-          className="md:col-span-2 md:-col-end-1 2xl:col-span-3 2xl:-col-end-1"
-          mode={FillMode.FILL}
-        >
+        <NavCTAButton className=" col-span-2 -col-end-1 " mode={FillMode.FILL}>
           View products
         </NavCTAButton>
       </>

src/landing/CommunitySection.tsx

@@ -1,7 +1,7 @@
 import { ExpressiveArrow } from "@/components/iconography/Iconography";
 import { ColorVariant, FillMode } from "@/components/util/constants";
 import { Discord } from "@/components/footer/socialMediaSvgs";
-import { InlineCTA, NavCTAButton } from "@/components/buttons/CTAButtons";
+import { InlineCTA, CTAButton } from "@/components/buttons/CTAButtons";
 import { IconMode, Size } from "@/components/util/constants";
 import Image from "next/image";
 
@@ -22,7 +22,7 @@ const CommunitySection = () => {
         </p>
       </hgroup>
       <menu className="col-span-full sm:col-span-4 sm:col-start-2 md:col-span-5 md:col-start-2 h-min flex flex-row flex-wrap gap-4">
-        <NavCTAButton
+        <CTAButton
           href="https://discord.com/invite/kscale"
           variant={ColorVariant.PLASMA}
           size={Size.NORMAL}
@@ -31,7 +31,7 @@ const CommunitySection = () => {
           className="max-md:w-full pointer-events-auto"
         >
           Join the Discord <Discord mode={IconMode.SET} />
-        </NavCTAButton>
+        </CTAButton>
         <InlineCTA href="https://docs.google.com/forms/d/e/1FAIpQLSemVaJ6HfieS9xDKv7SqWYArHyHLV-kraraiT_VEmPL_6lkPw/viewform">
           Send feedback <ExpressiveArrow size={"size-4"} />
         </InlineCTA>

src/landing/ResearchSection.tsx

@@ -1,4 +1,4 @@
-import { NavCTAButton } from "@/components/buttons/CTAButtons";
+import { CTAButton } from "@/components/buttons/CTAButtons";
 import { Github } from "@/components/footer/socialMediaSvgs";
 import {
   EVLAIcon,
@@ -114,7 +114,7 @@ const ResearchCard = ({ title, description, image, link, index, icon, variant }:
             {title}
           </h3>
           <p className={"text-body cursor-grab  active:cursor-grabbing  "}>{description}</p>
-          <NavCTAButton
+          <CTAButton
             href={link}
             target="_blank"
             className="mt-auto w-fit px-2"
@@ -123,7 +123,7 @@ const ResearchCard = ({ title, description, image, link, index, icon, variant }:
             size={Size.NORMAL}
           >
             View on Github <Github mode={IconMode.SET} variant={variant} />
-          </NavCTAButton>
+          </CTAButton>
         </div>
       </article>
     </motion.div>

src/landing/RobotSection.tsx

@@ -1,4 +1,4 @@
-import { NavCTAButton } from "@/components/buttons/CTAButtons";
+import { CTAButton } from "@/components/buttons/CTAButtons";
 import RobotRenderer from "@/components/robot/robotRenderer";
 import { ColorVariant, Size, FillMode } from "@/components/util/constants";
 import { motion, useInView } from "motion/react";
@@ -15,7 +15,7 @@ const RobotSection = () => {
         <p className="text-body">
           Interact with your robot through our toolkit, supporting real-time ML application.
         </p>
-        <NavCTAButton
+        <CTAButton
           href="https://dashboard.kscale.dev"
           variant={ColorVariant.PLASMA}
           size={Size.NORMAL}
@@ -24,7 +24,7 @@ const RobotSection = () => {
           className="max-md:w-fit"
         >
           Dashboard
-        </NavCTAButton>
+        </CTAButton>
       </hgroup>
       <div
         className="col-span-full w-full relative h-[60svh] lg:h-full lg:aspect-video min-h-[16rem]"

src/pages/index.tsx

@@ -8,11 +8,13 @@ import GallerySection from "@/landing/GallerySection";
 import PricingSection from "@/landing/PricingSection";
 import CommunitySection from "@/landing/CommunitySection";
 import Sponsors from "@/landing/Sponsors";
+import { Grid } from "@/components/grid/Grid";
 
 export default function Home() {
   return (
     <div className="min-h-screen flex flex-col ">
       <NavBar />
+      <Grid />
       <main className="gap-y-4">
         <HeaderSection />
         <ResearchSection />