feat: mobile-header

src/components/StartFreeCTAButton.tsx

@@ -23,7 +23,7 @@ export const StartFreeCTAButton = ({
         )}
         href={"https://portal.zuplo.com"}
       >
-        Start free
+        Sign Up
       </Link>
       <Link
         className={classNames(

src/components/ThemeSelector.tsx

@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 const themes = [
   { name: "Light", value: "light", icon: LightIcon },
   { name: "Dark", value: "dark", icon: DarkIcon },
-  { name: "System", value: "system", icon: SystemIcon },
 ];
 
 function LightIcon(props: React.ComponentPropsWithoutRef<"svg">) {
@@ -33,18 +32,6 @@ function DarkIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   );
 }
 
-function SystemIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
-      />
-    </svg>
-  );
-}
-
 export function ThemeSelector(
   props: React.ComponentPropsWithoutRef<typeof Listbox<"div">>,
 ) {
@@ -66,18 +53,8 @@ export function ThemeSelector(
         className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
         aria-label="Theme"
       >
-        <LightIcon
-          className={clsx(
-            "h-4 w-4 dark:hidden",
-            theme === "system" ? "fill-gray-600" : "fill-pink-400",
-          )}
-        />
-        <DarkIcon
-          className={clsx(
-            "hidden h-4 w-4 dark:block",
-            theme === "system" ? "fill-slate-400" : "fill-pink-400",
-          )}
-        />
+        <LightIcon className="h-4 w-4 fill-pink-400 dark:hidden" />
+        <DarkIcon className="hidden h-4 w-4 fill-pink-400 dark:block" />
       </Listbox.Button>
       <Listbox.Options className="absolute left-1/2 top-full mt-5 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
         {themes.map((theme) => (