Resolve safari bug and update colours

src/components/buttons/CTAButtons.tsx

@@ -184,8 +184,6 @@ export const CTASubtitleButton = ({
   children,
   subtitle,
   href = SHOP_URL,
-  variant = ColorVariant.RUST,
-  mode = FillMode.DEFAULT,
   target = "_self",
 }: {
   className?: string;
@@ -205,7 +203,7 @@ export const CTASubtitleButton = ({
         className,
         "cursor-pointer select-none",
         "rounded",
-        getVariantClass(variant, mode)
+        "rust"
       )}
       variants={hoverVariants}
       initial="initial"
@@ -224,7 +222,7 @@ export const CTASubtitleButton = ({
         className="select-none flex flex-col pointer pointer-events-auto"
       >
         {children}
-        <span className="block text-caption text-filament60 pointer select-none">{subtitle}</span>
+        <span className="block text-caption pointer opacity-60 select-none">{subtitle}</span>
       </a>
     </motion.button>
   ) : (
@@ -234,7 +232,7 @@ export const CTASubtitleButton = ({
         className,
         "cursor-pointer select-none flex flex-col",
         "rounded",
-        getVariantClass(variant, mode)
+        "rust"
       )}
       variants={hoverVariants}
       initial="initial"
@@ -249,7 +247,7 @@ export const CTASubtitleButton = ({
       onClick={() => router.push(href ? href : SHOP_URL)}
     >
       {children}
-      <span className="block text-caption pointer select-none ">{subtitle}</span>
+      <span className="block text-caption opacity-60 pointer select-none ">{subtitle}</span>
     </motion.button>
   );
 };

src/components/navbar/burgerMenu.tsx

@@ -44,11 +44,11 @@ const BurgerMenu = (isOpen: boolean) => {
       })}
 
       <CTASubtitleButton
-        subtitle="Available for pre-order, Q1 2025"
+        subtitle="Shipping Q1 2025"
         className="w-full col-span-full h-fit"
         mode={FillMode.FILL}
       >
-        Buy K-Bot today
+        Preorder K-Bot today
       </CTASubtitleButton>
     </motion.div>
   ) : (

src/components/navbar/burgerOpenButton.tsx

@@ -2,23 +2,6 @@ import { BurgerOpenButtonProps } from "@/components/util/interfaces";
 import clsx from "clsx";
 import { motion } from "motion/react";
 
-const closeBurgerPaths: string[] = [
-  "M23.025 9.56738C23.025 10.433 22.3233 11.1348 21.4576 11.1348L1.56738 11.1348C0.701742 11.1348 -5.26833e-08 10.433 0 9.56738C5.26833e-08 8.70174 0.701741 8 1.56738 8L21.4576 8C22.3233 8 23.025 8.70174 23.025 9.56738Z",
-  "M23.025 15.2842C23.025 16.1498 22.3233 16.8516 21.4576 16.8516L1.56738 16.8516C0.701742 16.8516 -5.26833e-08 16.1498 0 15.2842C5.26833e-08 14.4185 0.701741 13.7168 1.56738 13.7168L21.4576 13.7168C22.3233 13.7168 23.025 14.4185 23.025 15.2842Z",
-  "M23.025 21.001C23.025 21.8666 22.3233 22.5684 21.4576 22.5684L1.56738 22.5684C0.701742 22.5684 -5.26833e-08 21.8666 0 21.001C5.26833e-08 20.1353 0.701741 19.4336 1.56738 19.4336L21.4576 19.4336C22.3233 19.4336 23.025 20.1353 23.025 21.001Z",
-];
-const openBurgerPaths: string[] = [
-  "M23.1426 10.8086C22.8102 11.6079 21.8927 11.9863 21.0935 11.6538L2.72855 4.01498C1.92929 3.68253 1.55087 2.7651 1.88332 1.96584C2.21577 1.16658 3.1332 0.788159 3.93246 1.12061L22.2974 8.75947C23.0966 9.09192 23.4751 10.0093 23.1426 10.8086Z",
-  "M23.025 15.8029C23.025 16.6686 22.3233 17.3703 21.4576 17.3703H1.56738C0.701742 17.3703 -5.26833e-08 16.6685 0 15.8029C5.26833e-08 14.9373 0.701741 14.2355 1.56738 14.2355L21.4576 14.2355C22.3233 14.2355 23.025 14.9373 23.025 15.8029Z",
-  "M23.025 21.5197C23.025 22.3853 22.3233 23.0871 21.4576 23.0871H1.56738C0.701742 23.0871 -5.26833e-08 22.3853 0 21.5197C5.26833e-08 20.6541 0.701741 19.9523 1.56738 19.9523H21.4576C22.3233 19.9523 23.025 20.6541 23.025 21.5197Z",
-];
-
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="3" y="6" width="18" height="2" fill="#D9D9D9" />
-  <rect x="3" y="11" width="18" height="2" fill="#D9D9D9" />
-  <rect x="3" y="16" width="18" height="2" fill="#D9D9D9" />
-</svg>;
-
 const BurgerOpenButton = ({ atTop = true, ...props }: BurgerOpenButtonProps) => {
   return (
     <button

src/components/navbar/navbar.tsx

@@ -105,7 +105,7 @@ export default function NavBar() {
 
   return (
     <motion.nav
-      className="fixed top-0 inset-x-0 z-50 h-[100dvh] md:h-fit md:py-4 grid-a grid-rows-[min-content_auto] pointer-events-none"
+      className="fixed top-0 inset-x-0 z-50 h-[100dvh] md:h-auto md:py-4 grid-a grid-rows-[min-content_auto] pointer-events-none"
       initial={{
         backgroundColor: "var(--background-0)",
       }}

src/landing/CommunitySection.tsx

@@ -12,9 +12,13 @@ const CommunitySection = () => {
         <span className="text-caption uppercase text-foreground70 relative y-1/2">Community</span>
         <h2 className="text-heading-md">Take ownership of how we keep building.</h2>
         <p>
-          With over 2000 people in our Discord, our community has collaboratively on 6 humanoid
-          robot projects, building off each other&apos;s work and publishing papers on the forefront
-          of embodied AI tools.
+          Get rapid-fire support during your development process through our Discord&mdash;home to
+          2000+ active members who have collaborated on 6 humanoid robots and counting.
+        </p>
+
+        <p>
+          We&apos;re actively publishing papers and researching deeper into the potential of
+          embodied AI tools.
         </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">

src/landing/HeaderSection.tsx

@@ -19,15 +19,10 @@ const HeaderSection = () => {
       <hgroup className="z-10 text-filament col-span-full sm:col-span-4 md:col-span-5 md:col-start-5 lg:col-span-4 lg:col-start-6 xl:col-span-3 xl:col-start-6 2xl:col-start-8 2xl:col-span-5 4xl:col-start-8 4xl:col-span-4 flex flex-col mb-12 gap-4">
         <h1 className="text-heading-lg">Made to be modified</h1>
         <h2 className="text-body">
-          K-Bot is an open-source &amp; auditable robot, for those who prefer transparency over
-          trust.
+          K-Bot is an open-source humanoid robot, for those who prefer transparency over trust.
         </h2>
-        <CTASubtitleButton
-          subtitle="Available for pre-order, Q1 2025"
-          className="w-full"
-          mode={FillMode.FILL}
-        >
-          Order K-Bot today
+        <CTASubtitleButton subtitle="Shipping Q1 2025" className="w-full" mode={FillMode.FILL}>
+          Preorder K-Bot today
         </CTASubtitleButton>
       </hgroup>
     </header>

src/landing/ResearchSection.tsx

@@ -17,7 +17,8 @@ import { ColorVariant, FillMode, Size } from "@/components/util/constants";
 const RESEARCH_ITEMS = [
   {
     title: "Edge VLA",
-    description: "We’re collaboratively training a mega mondo beast of a model. ",
+    description:
+      "We’re collaboratively training a foundation for general purpose robots, that gets faster with more contributions from the open-source community",
     image: "/images/research/edge-vla.png",
     link: "https://github.com/kscalelabs/evla",
     icon: <EVLAIcon />,
@@ -297,9 +298,7 @@ const ResearchSection = () => {
     <section className="col-span-full grid grid-cols-subgrid auto-rows-min py-16">
       <hgroup className="col-span-full sm:col-span-4 2xl:col-span-4 flex flex-col mb-12 gap-4">
         <span className="text-caption uppercase text-foreground70 relative y-1/2">Research</span>
-        <h2 className="text-heading-md">
-          The humanoid robot is as strong as its brain, not its body.
-        </h2>
+        <h2 className="text-heading-md">The humanoid robot is as strong as its brain.</h2>
         <p>
           While we provide robust, accessible hardware, our end-to-end model is what makes K-Bot
           perform. Here&apos;s some of the progress we&apos;ve made:

src/landing/SpecSection.tsx

@@ -22,7 +22,7 @@ const SpecSection = () => {
       </motion.aside>
       <article className="col-span-full lg:col-span-5 2xl:col-span-6 2xl:-col-end-1 4xl:col-span-7 4xl:-col-end-1 grid grid-cols-subgrid gap-y-4">
         <h3 className="col-span-full sm:col-span-5 sm:col-start-2 md:col-span-5 md:col-start-4 lg:col-span-4 lg:col-start-2 xl:col-span-3 xl:col-start-2 2xl:col-span-5 2xl:col-start-2 3xl:col-span-5 3xl:col-start-2 4xl:col-span-4 4xl:col-start-2 text-heading-sm">
-          {`We've built K-Bot with an aerospace-grade alumininum body, for under $20,000 USD. `}
+          {`We've built K-Bot with an aerospace-grade alumininum body, for under $500 per month. `}
           <span className="inline text-foreground60">
             Anodized with a matte black finish, because it looks cooler.
           </span>

src/pages/index.tsx

@@ -1,5 +1,4 @@
 import Footer from "@/components/footer/footer";
-import { Grid } from "@/components/grid/Grid";
 import NavBar from "@/components/navbar/navbar";
 import HeaderSection from "@/landing/HeaderSection";
 import ResearchSection from "@/landing/ResearchSection";
@@ -15,7 +14,6 @@ export default function Home() {
   return (
     <div className="min-h-screen flex flex-col ">
       <NavBar />
-      <Grid />
       <main className="gap-y-4">
         <HeaderSection />
         <ResearchSection />

src/styles/globals.css

@@ -326,6 +326,36 @@ main .sponsors {
   overflow-x: visible;
 }
 
+.rust {
+  @apply bg-rust text-filament;
+}
+
+@media (prefers-color-scheme: dark) {
+  .rust {
+    @apply bg-filament text-rust;
+  }
+}
+
+.rust-fill {
+  @apply bg-rust text-filament;
+}
+
+.plasma-fill {
+  @apply bg-plasma text-filament;
+}
+
+.rust-invert {
+  @apply bg-filament text-rust;
+}
+
+.plasma-invert {
+  @apply bg-filament text-plasma;
+}
+
+.rust-stroke {
+  @apply border-rust text-rust bg-background;
+}
+
 /*CURSOR*/
 @media (pointer: fine) and (prefers-color-scheme: light) {
   body {