Merge pull request #46 from Redot-Engine/feature/user-select

Improve Accessibility and UI Consistency on Landing Page Components
Redot-Engine · Jan 12, 2025 · 9bbeebe · 9bbeebe
2 parents 34897a8 + 13d9419
commit 9bbeebe
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 87 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -37,7 +37,7 @@ export default async function RootLayout({
     <html
       lang={locale}
       suppressHydrationWarning
-      className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-700"
+      className="overflow-y-scroll scrollbar-thin scrollbar-track-transparent scrollbar-thumb-zinc-700 selection:bg-zinc-700/60 selection:text-white"
     >
       <head>
         <link rel="preconnect" href="https://image.redotengine.org" />

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -22,7 +22,7 @@ export const Header = () => {
           <div className="flex items-center justify-between">
             <Link
               href="/"
-              className="rounded-md border border-slate-800 bg-black p-2"
+              className="select-none rounded-md border border-slate-800 bg-black p-2"
             >
               <Image
                 src="/logo.webp"

diff --git a/components/sections/landing/Features.tsx b/components/sections/landing/Features.tsx
@@ -37,7 +37,7 @@ export const Features = () => {
           transition={{ duration: 0.6, delay: 0.8 }}
           className="mt-10"
         >
-          <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+          <div className="relative flex w-full select-none flex-col items-center justify-center overflow-hidden">
             <Marquee pauseOnHover className="[--duration:15s]">
               {firstRow.map((feature) => (
                 <FeatureItem key={feature.label} {...feature} />

diff --git a/components/sections/landing/Hero.tsx b/components/sections/landing/Hero.tsx
@@ -4,7 +4,6 @@ import { IconArrowRight } from "@tabler/icons-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { motion } from "motion/react";
-import Head from "next/head";
 import { links } from "@/constants/links";
 import { useTranslations } from "next-intl";
 import useOS from "@/hooks/useOS";
@@ -14,96 +13,85 @@ export const Hero = () => {
   const os = useOS();
 
   return (
-    <>
-      <Head>
-        <link
-          rel="preload"
-          as="image"
-          href="https://image.redotengine.org/cover.webp"
-          imageSrcSet="https://image.redotengine.org/cover.webp 1x"
-          type="image/webp"
-        />
-      </Head>
-      <section className="bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#FF4E40,#FFFFFF_80%)] pb-20 pt-8">
-        <div className="px-5 lg:px-40">
-          <div className="grid grid-cols-1 place-content-between gap-10 md:grid-cols-12 md:items-center">
-            <div className="md:col-span-6">
-              <motion.h1
-                className="mt-6 bg-gradient-to-b from-black to-[#7F0000] bg-clip-text pb-6 text-5xl font-bold tracking-tighter text-transparent md:text-7xl"
+    <section className="bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#FF4E40,#FFFFFF_80%)] pb-20 pt-8">
+      <div className="px-5 lg:px-40">
+        <div className="grid grid-cols-1 place-content-between gap-10 md:grid-cols-12 md:items-center">
+          <div className="md:col-span-6">
+            <motion.h1
+              className="mt-6 select-none bg-gradient-to-b from-black to-[#7F0000] bg-clip-text pb-6 text-5xl font-bold tracking-tighter text-transparent md:text-7xl"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4 }}
+              dangerouslySetInnerHTML={{ __html: t("heading") }}
+            />
+
+            <motion.p
+              className="text-xl tracking-tight"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              {t("description")}
+            </motion.p>
+
+            <div className="mt-[38px] flex flex-col items-center gap-1 md:flex-row">
+              <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4 }}
-                dangerouslySetInnerHTML={{ __html: t("heading") }}
-              />
-
-              <motion.p
-                className="text-xl tracking-tight"
+                transition={{ duration: 0.6, delay: 0.1 }}
+                className="w-full md:w-auto"
+              >
+                <Button asChild className="w-full md:w-auto">
+                  <Link href="/download">
+                    {t("buttons.primary", {
+                      os: os
+                        ? os.charAt(0).toUpperCase() + os.slice(1)
+                        : "Unknown",
+                    })}
+                  </Link>
+                </Button>
+              </motion.div>
+              <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5 }}
+                transition={{ duration: 0.7, delay: 0.2 }}
+                className="w-full md:w-auto"
               >
-                {t("description")}
-              </motion.p>
-
-              <div className="mt-[38px] flex flex-col items-center gap-1 md:flex-row">
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.6, delay: 0.1 }}
-                  className="w-full md:w-auto"
-                >
-                  <Button asChild className="w-full md:w-auto">
-                    <Link href="/download">
-                      {t("buttons.primary", {
-                        os: os
-                          ? os.charAt(0).toUpperCase() + os.slice(1)
-                          : "Unknown",
-                      })}
-                    </Link>
-                  </Button>
-                </motion.div>
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.7, delay: 0.2 }}
-                  className="w-full md:w-auto"
-                >
-                  <Button variant="link" asChild className="w-full md:w-auto">
-                    <Link href={links.documentation}>
-                      {t("buttons.secondary")}
-                      <IconArrowRight className="h-5 w-5" />
-                    </Link>
-                  </Button>
-                </motion.div>
-              </div>
+                <Button variant="link" asChild className="w-full md:w-auto">
+                  <Link href={links.documentation}>
+                    {t("buttons.secondary")}
+                    <IconArrowRight className="h-5 w-5" />
+                  </Link>
+                </Button>
+              </motion.div>
             </div>
+          </div>
 
-            <motion.div
-              className="relative md:col-span-6"
-              initial={{ opacity: 0, x: 40 }}
-              animate={{ opacity: 1, x: 0 }}
-              transition={{ duration: 0.7, delay: 0.2 }}
+          <motion.div
+            className="relative md:col-span-6"
+            initial={{ opacity: 0, x: 40 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.7, delay: 0.2 }}
+          >
+            <video
+              width="1200"
+              height="800"
+              className="h-auto w-full rounded-lg object-cover md:h-full"
+              loop
+              autoPlay
+              muted
+              controls={false}
+              preload="none"
             >
-              <video
-                width="1200"
-                height="800"
-                className="h-auto w-full rounded-lg object-cover md:h-full"
-                loop
-                autoPlay
-                muted
-                controls={false}
-                preload="none"
-              >
-                <source
-                  src="https://image.redotengine.org/Games%20are%20made%20with%20Redot%20Engine%202024%20Without%20outro.mp4"
-                  type="video/mp4"
-                />
-                Your browser does not support the video tag.
-              </video>
-            </motion.div>
-          </div>
+              <source
+                src="https://image.redotengine.org/Games%20are%20made%20with%20Redot%20Engine%202024%20Without%20outro.mp4"
+                type="video/mp4"
+              />
+              Your browser does not support the video tag.
+            </video>
+          </motion.div>
         </div>
-      </section>
-    </>
+      </div>
+    </section>
   );
 };
diff --git a/components/sections/landing/ProductShowcase.tsx b/components/sections/landing/ProductShowcase.tsx
@@ -28,7 +28,7 @@ export const ProductShowcase = () => {
           initial={{ opacity: 0, scale: 0.95 }}
           animate={inView ? { opacity: 1, scale: 1 } : {}}
           transition={{ duration: 0.6, delay: 0.8 }}
-          className="relative mx-5 mt-10 aspect-video h-full lg:mx-24"
+          className="relative mx-5 mt-10 aspect-video h-full select-none lg:mx-24"
         >
           <Image
             src="https://image.redotengine.org/productImage.webp"