Home page updates

src/app.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
 :root {
@@ -105,21 +105,23 @@
 
   --animate-stars: stars 2s ease-in-out infinite;
   @keyframes stars {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 1;
     }
     50% {
-     opacity: 0.5;
+      opacity: 0.5;
     }
   }
 
   --animate-stars2: stars2 2s ease-in-out infinite;
   @keyframes stars2 {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.5;
     }
     50% {
-     opacity: 1;
+      opacity: 1;
     }
   }
 }
@@ -206,6 +208,11 @@ a.link {
   -webkit-backface-visibility: hidden;
 }
 
+.no-interact {
+  user-select: none;
+  pointer-events: none;
+}
+
 /* OverlayScrollbars styling */
 .os-scrollbar-handle {
   background: rgba(255, 255, 255, 0.6) !important;

src/assets/i18n/en.json

@@ -32,14 +32,18 @@
   "home": {
     "title": "SlimeVR Full-Body Trackers",
     "hero": {
-      "description": "An affordable, comfortable, wireless, 360° solution for full-body tracking in virtual reality",
+      "description": "The affordable VR full-body tracking solution.",
       "price": "From $219",
       "price-butterfly": "From $279",
       "order-btn": "Order on",
       "preorder-btn": "Pre-order on",
       "join-btn": "Join campaign at",
       "butterfly-slime": "Butterfly Trackers",
       "og-slime": "SlimeVR V1.2",
+      "buy-slime": {
+        "order": "Order SlimeVR 1.2 on",
+        "preorder": "Pre-order Butterfly Trackers on"
+      },
       "download-server": {
         "title": "Download the server",
         "desc": "Available on all platforms!"
@@ -51,7 +55,7 @@
     },
     "video-section": "Reviews and Demos",
     "use-cases": {
-      "title": " Use Cases",
+      "title": "Use Cases",
       "vr": {
         "title": "VR Games",
         "desc": "SlimeVR Trackers are compatible with any SteamVR or standalone games that support full-body tracking. That includes social games like VRChat."

src/components/Footer.tsx

@@ -2,6 +2,7 @@ import { A, useNavigate } from "@solidjs/router";
 import { Component } from "solid-js";
 import { Typography } from "./commons/Typography";
 import { SlimeVRIcon } from "./commons/icons/SlimeVRIcon";
+import { scrollToSection } from "~/utils/dom";
 
 export const Footer: Component = (props) => {
   const navigate = useNavigate();
@@ -20,7 +21,8 @@ export const Footer: Component = (props) => {
             class="mt-2 text-center sm:text-left text-xs text-background-30 link"
             href="/tm"
           >
-            SlimeVR and Butterfly Trackers are a trademark or a registered trademark of SlimeVR B.V. world-wide.
+            SlimeVR and Butterfly Trackers are a trademark or a registered
+            trademark of SlimeVR B.V. world-wide.
           </A>
         </div>
         <div class="flex flex-col gap-2">
@@ -33,23 +35,16 @@ export const Footer: Component = (props) => {
             <a
               href="https://docs.slimevr.dev"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography key="navbar.documentation" tag="span" />
             </a>
             <A
               href="/#download"
               onClick={(e) => {
-                const pathname = window.location.pathname;
                 e.preventDefault();
-                if (pathname === "/") {
-                  const el = document.getElementById("download");
-                  if (el)
-                    el.scrollIntoView({ behavior: "smooth", block: "center" });
-                } else {
-                  // use location.state to pass scrollTo
-                  navigate("/", { state: { scrollTo: "download" } });
-                }
+                scrollToSection("download", window.location.pathname, navigate);
               }}
               class="link w-fit"
             >
@@ -58,13 +53,15 @@ export const Footer: Component = (props) => {
             <a
               href="https://discord.gg/SlimeVR"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography key="navbar.discord" tag="span" />
             </a>
             <a
               href="https://github.com/SlimeVR"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography key="navbar.github" tag="span" />
@@ -75,6 +72,7 @@ export const Footer: Component = (props) => {
             <a
               href="https://shop.slimevr.dev/pages/support"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span" key="navbar.support" />
@@ -91,13 +89,15 @@ export const Footer: Component = (props) => {
             <a
               href="https://www.crowdsupply.com/slimevr/slimevr-full-body-tracker"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span" key="footer.column.shop.official" />
             </a>
             <a
               href="https://shop.slimevr.dev"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span" key="footer.column.shop.spare-parts" />
@@ -114,27 +114,31 @@ export const Footer: Component = (props) => {
             <a
               href="https://bsky.app/profile/slimevr.dev"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span">Bluesky</Typography>
             </a>
             <a
               href="https://www.youtube.com/@SlimeVR"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span">YouTube</Typography>
             </a>
             <a
               href="https://www.tiktok.com/@officialslimevr"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span">TikTok</Typography>
             </a>
             <a
               href="https://www.reddit.com/r/SlimeVR/"
               target="_blank"
+              rel="noopener noreferrer"
               class="link w-fit"
             >
               <Typography tag="span">Reddit</Typography>

src/components/Navbar.tsx

@@ -2,6 +2,7 @@ import { A, useLocation, useNavigate } from "@solidjs/router";
 import clsx from "clsx";
 import { Component, createSignal } from "solid-js";
 import { Localized } from "~/i18n";
+import { scrollToSection } from "~/utils/dom";
 import { Button } from "./commons/Button";
 import { BarsIcon } from "./commons/icons/BarsIcon";
 import { SlimeVRIcon } from "./commons/icons/SlimeVRIcon";
@@ -17,33 +18,41 @@ export const NavItems: Component = () => {
           <Typography tag="span">Home</Typography>
         </A>
       )}
-      <a href="https://docs.slimevr.dev" target="_blank" class="link px-2">
+      <a
+        href="https://docs.slimevr.dev"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link px-2"
+      >
         <Typography key="navbar.documentation" tag="span" />
       </a>
       <A
         href="/#download"
         onClick={(e) => {
-          const pathname = window.location.pathname;
           e.preventDefault();
-          if (pathname === "/") {
-            const el = document.getElementById("download");
-            if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-          } else {
-            // use location.state to pass scrollTo
-            navigate("/", { state: { scrollTo: "download" } });
-          }
+          scrollToSection("download", window.location.pathname, navigate);
         }}
         class="link px-2"
       >
         <Typography tag="span" key="navbar.download" />
       </A>
-      <a href="https://discord.gg/SlimeVR" target="_blank" class="link px-2">
+      <a
+        href="https://discord.gg/SlimeVR"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link px-2"
+      >
         <Typography key="navbar.discord" tag="span" />
       </a>
       <a href="https://shop.slimevr.dev/" class="link px-2">
         <Typography key="navbar.shop" tag="span" />
       </a>
-      <a href="https://github.com/SlimeVR" target="_blank" class="link px-2">
+      <a
+        href="https://github.com/SlimeVR"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link px-2"
+      >
         <Typography key="navbar.github" tag="span" />
       </a>
       <A href="/team" class="link px-2">
@@ -52,6 +61,7 @@ export const NavItems: Component = () => {
       <a
         href="https://shop.slimevr.dev/pages/support"
         target="_blank"
+        rel="noopener noreferrer"
         class="link px-2"
       >
         <Typography tag="span" key="navbar.support" />
@@ -84,6 +94,7 @@ export const Navbar: Component = (props) => {
               <Button
                 variant="primary"
                 href="https://www.crowdsupply.com/slimevr/slimevr-full-body-tracker"
+                aria-label="Order SlimeVR 1.2 trackers"
               >
                 <Localized id="navbar.order" />
               </Button>
@@ -92,6 +103,7 @@ export const Navbar: Component = (props) => {
               <button
                 class="hover:bg-background-60 px-4 rounded-lg"
                 onClick={() => setOpen((open) => !open)}
+                aria-label="Toggle navigation menu"
               >
                 <BarsIcon size={20} class="fill-background-10"></BarsIcon>
               </button>

src/components/Section.tsx

@@ -10,13 +10,11 @@ export const Section: ParentComponent<SectionProps> = (props) => {
     <div class="w-full relative flex justify-center">
       <Show when={props.gizmo}>
         {(gizmo) => (
-          <div class="flex absolute top-0 h-fit justify-center w-full overflow-x-clip select-none pointer-events-none">
+          <div class="flex absolute top-0 h-fit justify-center w-full overflow-x-clip no-interact">
             <img
-              class={clsx(
-                "w-full object-contain scale-[110%]",
-                "rotate-12"
-              )}
+              class={clsx("w-full object-contain scale-[110%]", "rotate-12")}
               src={gizmo()}
+              alt=""
             ></img>
           </div>
         )}

src/components/commons/Container.tsx

@@ -2,8 +2,10 @@ import { ParentProps } from "solid-js";
 
 export function Container(props: ParentProps & { class?: string }) {
   return (
-      <div class={`bg-background-70 border border-background-40 rounded-2xl p-4 ${props.class ? `${props.class}` : ""}`}>
-        {props.children}
-      </div>
+    <div
+      class={`bg-background-70 border border-background-40 rounded-2xl p-4 ${props.class ? `${props.class}` : ""}`}
+    >
+      {props.children}
+    </div>
   );
 }

src/components/commons/Markdown.tsx

@@ -1,7 +1,12 @@
 import { ComponentProps } from "solid-js";
 
 export const MarkdownLink = (props: ComponentProps<"a">) => (
-  <a target="_blank" href={props.href} class="link text-background-20">
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href={props.href}
+    class="link text-background-20"
+  >
     {props.children}
   </a>
 );

src/components/commons/Typography.tsx

@@ -62,7 +62,7 @@ export const Typography: Component<TypographyProps> = (initialProps) => {
       props.textAlign,
       props.italic && "italic",
       props.truncate && "leading-3 text-ellipsis line-clamp-2",
-      props.class
+      props.class,
     ])
   );
 

src/components/commons/icons/DownloadIcon.tsx

@@ -1,6 +1,6 @@
 import { Component } from "solid-js";
 
-export const DonwloadIcon: Component<IconProps> = (props) => {
+export const DownloadIcon: Component<IconProps> = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/components/commons/icons/socials/PrintablesIcon.tsx

@@ -9,7 +9,7 @@ export const PrintablesIcon: Component<IconProps> = (props) => {
       viewBox="0 0 25 35"
       xmlns="http://www.w3.org/2000/svg"
     >
-        <path d="m0 35 12.172-7L0 21ZM12.172 0 0 7l12.172 7v14l12.172-7V7Z"></path>
+      <path d="m0 35 12.172-7L0 21ZM12.172 0 0 7l12.172 7v14l12.172-7V7Z"></path>
     </svg>
   );
 };

src/components/commons/icons/socials/SteamIcon.tsx

@@ -1,6 +1,10 @@
 import { Component } from "solid-js";
 
-export const SteamIcon: Component<IconProps> = (props) => {
+interface Props extends IconProps {
+  variant?: "default" | "download";
+}
+
+export const SteamIcon: Component<Props> = (props) => {
   return (
     <svg
       width={props.size}
@@ -9,11 +13,11 @@ export const SteamIcon: Component<IconProps> = (props) => {
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 65 65"
-      fill="#fff"
+      fill={props.variant === "download" ? "#fff" : "#fff"}
     >
       <path
         d="M1.305 41.202C5.259 54.386 17.488 64 31.959 64c17.673 0 32-14.327 32-32s-14.327-32-32-32C15.001 0 1.124 13.193.028 29.874c2.074 3.477 2.879 5.628 1.275 11.328z"
-        fill="#081E30"
+        fill={props.variant === "download" ? "none" : "#081E30"}
       />
       <path d="M30.31 23.985l.003.158-7.83 11.375c-1.268-.058-2.54.165-3.748.662a8.14 8.14 0 0 0-1.498.8L.042 29.893s-.398 6.546 1.26 11.424l12.156 5.016c.6 2.728 2.48 5.12 5.242 6.27a8.88 8.88 0 0 0 11.603-4.782 8.89 8.89 0 0 0 .684-3.656L42.18 36.16l.275.005c6.705 0 12.155-5.466 12.155-12.18s-5.44-12.16-12.155-12.174c-6.702 0-12.155 5.46-12.155 12.174zm-1.88 23.05c-1.454 3.5-5.466 5.147-8.953 3.694a6.84 6.84 0 0 1-3.524-3.362l3.957 1.64a5.04 5.04 0 0 0 6.591-2.719 5.05 5.05 0 0 0-2.715-6.601l-4.1-1.695c1.578-.6 3.372-.62 5.05.077 1.7.703 3 2.027 3.696 3.72s.692 3.56-.01 5.246M42.466 32.1a8.12 8.12 0 0 1-8.098-8.113 8.12 8.12 0 0 1 8.098-8.111 8.12 8.12 0 0 1 8.1 8.111 8.12 8.12 0 0 1-8.1 8.113m-6.068-8.126a6.09 6.09 0 0 1 6.08-6.095c3.355 0 6.084 2.73 6.084 6.095a6.09 6.09 0 0 1-6.084 6.093 6.09 6.09 0 0 1-6.081-6.093z" />
     </svg>