feat(frontend): home page import logo

Signed-off-by: Me0wo <152751263+Sn0wo2@users.noreply.github.com>

Author: Sn0wo2

Frontend/public/file-pencil-alt-svgrepo-com.svg

@@ -129,6 +129,31 @@ a {
     font-size: 1.6vmin;
     opacity: 0.7;
   }
+
+  .upload {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15%;
+    aspect-ratio: 1;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .upload:hover {
+    transform: translate(-50%, -10%) scale(1.05);
+  }
+
+  .upload img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+  }
 }
 
 .input-container {

Frontend/src/router/Home.scss

@@ -1,8 +1,10 @@
-import { useEffect, useState } from "react";
+import { type ChangeEvent, useEffect, useRef, useState } from "react";
+import { toast } from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import "./Home.scss";
 import { ImportNote } from "../components/ImportNote.tsx";
+import { importNote } from "../services/noteAPI.ts";
 
 export function Home() {
   const [visible, setVisible] = useState(false);
@@ -22,6 +24,8 @@ export function Home() {
     return () => clearTimeout(t);
   }, []);
 
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
   return (
     <>
       <DarkModeToggle />
@@ -49,6 +53,32 @@ export function Home() {
             <span className="warning">
               ⚠️ Please don’t upload illegal or sensitive content.
             </span>
+            <label className="upload">
+              <input
+                type="file"
+                accept=".qnote"
+                style={{ display: 'none' }}
+                ref={fileInputRef}
+                onChange={async (e: ChangeEvent<HTMLInputElement>) => {
+                  try {
+                    const file = e.target.files?.[0];
+                    if (!file) return;
+                    const success = await importNote(file);
+                    if (!success) {
+                      toast.error("Failed to import note");
+                      return;
+                    }
+
+                    navigate(`/note/${file.name.replace(/\.qnote$/, "")}`);
+
+                  } catch (error) {
+                    console.error(error);
+                    toast.error("Failed to import note");
+                  }
+                }}
+              />
+              <img src="/file-pencil-alt-svgrepo-com.svg" alt="upload icon" />
+            </label>
           </p>
           <div className="input-container">
             <input