Fix canvas rendering issue and update error messages

frontend/src/app/signin/page.tsx

@@ -67,8 +67,8 @@ export default function SignIn() {
 
   return (
     <div className="dark:bg-custom-gray flex items-center justify-center min-h-screen relative">
-      <canvas id="canvas3d" ref={canvasRef} className="absolute inset-0" />
       <ThemeSwitcher />
+      <canvas id="canvas3d" ref={canvasRef} className="absolute inset-0" />
       <form className="flex flex-col gap-3 z-10" onSubmit={handleSubmit}>
         <div className="flex flex-col gap-3">
           <input

frontend/src/app/signup/page.tsx

@@ -63,18 +63,18 @@ export default function SignUp() {
     });
 
     if (response.status === 400) {
-      alert("Cet utilisateur existe déjà");
+      alert("This user already exists");
     } else if (response.status === 201) {
       router.push("/signin");
     } else {
-      throw new Error("Une erreur inattendue s'est produite");
+      throw new Error("An error as occured");
     }
   };
 
   return (
     <div className="dark:bg-custom-gray flex items-center justify-center min-h-screen relative">
-      <canvas id="canvas3d" ref={canvasRef} className="absolute inset-0" />
       <ThemeSwitcher />
+      <canvas id="canvas3d" ref={canvasRef} className="absolute inset-0" />
       <form className="flex flex-col gap-3 z-10" onSubmit={handleSubmit}>
         <div className="flex flex-col gap-3">
           <input

frontend/src/contexts/CanvasContext.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Application } from "@splinetool/runtime";
+
+const CanvasContext = createContext<Application | null>(null);
+
+export const useCanvas = () => useContext(CanvasContext);
+
+export const CanvasProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [app, setApp] = useState<Application | null>(null);
+
+  useEffect(() => {
+    if (canvasRef.current && !app) {
+      const newApp = new Application(canvasRef.current);
+      newApp.load(
+        "https://prod.spline.design/hnkOtrqss6sQ-wLy/scene.splinecode"
+      );
+      setApp(newApp);
+    }
+  }, [canvasRef, app]);
+
+  return (
+    <CanvasContext.Provider value={app}>
+      <canvas
+        ref={canvasRef}
+        className="absolute inset-0"
+        style={{ pointerEvents: "none" }}
+      />
+      {children}
+    </CanvasContext.Provider>
+  );
+};