v1.1.1

Author: FelipeRicard0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-builder",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -3,6 +3,7 @@ import Buildpage from "./pages/Builder";
 import LandingPage from "./pages/LandingPage";
 import i18n from "./i18n";
 import { useEffect } from "react";
+import NotFound from "./pages/NotFound";
 
 function LangLayout() {
   const { lang } = useParams();
@@ -33,6 +34,7 @@ function LangLayout() {
     <Routes>
       <Route index element={<LandingPage />} />
       <Route path="builder" element={<Buildpage />} />
+      <Route path="*" element={<NotFound />} />
     </Routes>
   );
 }

src/components/command-step.tsx

@@ -35,7 +35,12 @@ export default function CommandStep({ step, index }: CommandStepProps) {
             {step.label}
           </span>
         </div>
-        <Button variant="ghost" size={"icon-sm"} onClick={handleCopy}>
+        <Button
+          className="cursor-pointer"
+          variant="ghost"
+          size={"icon-sm"}
+          onClick={handleCopy}
+        >
           {copied ? (
             <Check className="text-foreground size-3.5" />
           ) : (

src/components/mode-toggle.tsx

@@ -15,7 +15,7 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button className="cursor-pointer" variant="outline" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
           <span className="sr-only">Toggle theme</span>

src/pages/Builder.tsx

@@ -502,7 +502,10 @@ function ShareDialog({ selections }: { selections: Set<string> }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" className="w-full gap-1.5 bg-transparent">
+        <Button
+          variant="outline"
+          className="w-full cursor-pointer gap-1.5 bg-transparent"
+        >
           <Share2 className="size-3.5" />
           {t("share")}
         </Button>
@@ -554,7 +557,7 @@ function ShareDialog({ selections }: { selections: Set<string> }) {
             </label>
             <div className="flex gap-2">
               <Input type="text" value={shareUrl} readOnly />
-              <Button onClick={handleCopy}>
+              <Button onClick={handleCopy} className="cursor-pointer">
                 {copied ? (
                   <>
                     <Check className="h-4 w-4" />
@@ -775,7 +778,12 @@ export default function BuilderPage() {
             <div className="flex items-center gap-2">
               <Tooltip disableHoverableContent>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" onClick={handleReset}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="cursor-pointer"
+                    onClick={handleReset}
+                  >
                     <RotateCcw className="size-4" />
                   </Button>
                 </TooltipTrigger>
@@ -785,7 +793,12 @@ export default function BuilderPage() {
               </Tooltip>
               <Tooltip disableHoverableContent>
                 <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" onClick={handleRandom}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="cursor-pointer"
+                    onClick={handleRandom}
+                  >
                     <Shuffle className="size-4" />
                   </Button>
                 </TooltipTrigger>
@@ -795,7 +808,10 @@ export default function BuilderPage() {
               </Tooltip>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="gap-1 bg-transparent">
+                  <Button
+                    variant="outline"
+                    className="cursor-pointer gap-1 bg-transparent"
+                  >
                     {t("presets")}
                     <ChevronDown className="size-3" />
                   </Button>
@@ -837,7 +853,12 @@ export default function BuilderPage() {
                 <span className="text-muted-foreground text-xs font-medium">
                   {t("command_label")}
                 </span>
-                <Button variant="ghost" size="icon-xs" onClick={handleCopy}>
+                <Button
+                  className="cursor-pointer"
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={handleCopy}
+                >
                   {copied ? (
                     <Check className="text-foreground size-3" />
                   ) : (

src/pages/LandingPage.tsx

@@ -135,41 +135,55 @@ export default function LandingPage() {
   const [menu, setMenu] = useState(false);
   const [visible, setVisible] = useState(false);
 
+  function toggleNav() {
+    if (window.innerWidth <= 640) {
+      setMenu(!menu);
+      setTimeout(() => {
+        setVisible(!visible);
+      }, 700);
+    } else return;
+  }
+
   return (
     <>
       <header
         className={`border-border/50 bg-background/80 fixed top-0 z-10 w-screen border-b backdrop-blur-md max-sm:transition-[height] max-sm:duration-1000 ${menu ? `max-sm:h-66` : `max-sm:h-16.5`}`}
       >
         <div className="relative mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center gap-2">
-            <img
-              className="size-8 dark:invert"
-              src="/Logo_dark.svg"
-              alt="Logo"
-            />
-            <span className="text-lg font-semibold tracking-tight max-sm:leading-5.5">
-              Stack Builder
+          <HashLink smooth to={"#"}>
+            <span className="flex items-center gap-2">
+              <img
+                className="size-8 dark:invert"
+                src="/Logo_dark.svg"
+                alt="Logo"
+              />
+              <span className="text-lg font-semibold tracking-tight max-sm:text-base max-sm:leading-5">
+                Stack Builder
+              </span>
             </span>
-          </div>
+          </HashLink>
           <nav
             className={`absolute left-1/2 flex -translate-x-1/2 items-center gap-6 max-sm:top-17 max-sm:w-full max-sm:translate-y-0 max-sm:flex-col max-sm:gap-4 max-sm:p-4 max-sm:transition-all ${menu ? `` : `max-sm:opacity-0`} ${visible ? `` : `max-sm:hidden`}`}
           >
             <HashLink
               to="#features"
+              onClick={toggleNav}
               smooth
               className="text-muted-foreground hover:text-foreground text-sm transition-colors"
             >
               {t("features")}
             </HashLink>
             <HashLink
               to="#presets"
+              onClick={toggleNav}
               smooth
               className="text-muted-foreground hover:text-foreground text-sm transition-colors"
             >
               {t("presets")}
             </HashLink>
             <a
               href="https://github.com/FelipeRicard0/stack-builder"
+              onClick={toggleNav}
               target="_blank"
               rel="noopener noreferrer"
               className="text-muted-foreground hover:text-foreground text-sm transition-colors"
@@ -243,7 +257,7 @@ export default function LandingPage() {
               }
             >
               <Link to="builder">
-                <Button className="group" size={"lg"}>
+                <Button className="group cursor-pointer" size={"lg"}>
                   {t("open_builder")}
                   <ArrowRight className="ml-0.5 size-4 transition-transform group-hover:translate-x-1" />
                 </Button>
@@ -354,7 +368,7 @@ export default function LandingPage() {
             <p className="text-muted-foreground mt-4">{t("join_thousands")}</p>
             <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
               <Link to="builder">
-                <Button size="lg">
+                <Button size="lg" className="cursor-pointer">
                   {t("launch_builder")}
                   <ArrowRight />
                 </Button>
@@ -364,7 +378,7 @@ export default function LandingPage() {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Button variant="outline" size="lg">
+                <Button variant="outline" className="cursor-pointer" size="lg">
                   <Github />
                   {t("view_on_github")}
                 </Button>

src/pages/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link, useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error(
+      "404 Error: User attempted to access non-existent route:",
+      location.pathname,
+    );
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <h1 className="mb-4 text-4xl font-bold">404</h1>
+      <p className="text-muted-foreground mb-4 text-xl">Oops! Page not found</p>
+      <Link to="/" className="underline">
+        Return to Home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;

vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}