feat: update landing page and add new library and scan pages

- Refactor landing page content and links for better user experience. - Introduce a new library page to display disease information with filtering and modal details. - Add a scan page for users to upload images for diagnosis with a preview modal. - Enhance login and registration pages with automatic navigation to the dashboard. - Integrate vite-tsconfig-paths for improved path resolution in Vite configuration.
2026-06-02 02:42:07 +07:00
parent 73772f5f56
commit 0745dd903d
20 changed files with 1029 additions and 287 deletions
@@ -0,0 +1,9 @@
+export function Footer() {
+  return (
+    <footer className="border-t bg-[#ECF4E8]">
+      <div className="mx-auto max-w-6xl px-6 py-6 text-sm text-muted-foreground text-center">
+        © 2026 ZeaVis Edu - AI for Smart Education
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { Navbar } from "./navbar";
+import { Footer } from "./footer";
+
+type Props = { children: ReactNode };
+
+export function MainLayout({ children }: Props) {
+  return (
+    <div className="min-h-screen flex flex-col bg-[#ECF4E8]">
+      <Navbar />
+      <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-8">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Leaf } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuthStore } from "@/store/auth-store";
+import { apiClient } from "@/lib/api-client";
+
+export function Navbar() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const setUser = useAuthStore((state) => state.setUser);
+  const isDashboard = location.pathname === "/dashboard";
+  const isScan = location.pathname === "/scan";
+  const isLibrary = location.pathname === "/library";
+
+  const navLinkClassName = (isActive: boolean) =>
+    [
+      "inline-flex items-center rounded-full px-4 py-2 text-[18px] font-medium transition-colors",
+      isActive
+        ? "bg-[#48A111] text-white shadow-sm"
+        : "text-white/85 hover:bg-white/10 hover:text-white",
+    ].join(" ");
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      await apiClient.logout();
+    },
+    onSuccess: () => {
+      setUser(null);
+      queryClient.clear();
+      navigate("/");
+    },
+  });
+
+  const user = useAuthStore((state) => state.user);
+
+  return (
+    <header className="sticky top-0 z-40 bg-[#306D29] text-white shadow-sm backdrop-blur">
+      <div className="mx-auto flex h-20 max-w-6xl items-center justify-between px-6">
+        <div className="flex items-center gap-3 font-semibold">
+          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#48A111] text-primary-foreground">
+            <Link to="/dashboard">
+              <Leaf className="h-5 w-5" />
+            </Link>
+          </div>
+          <div className="leading-tight font-bold text-2xl">
+            <div>ZeaVis Edu</div>
+            <div className="text-[14px] font-normal text-[#9AD872]">
+              Smart AI for Corn Disease Detection
+            </div>
+          </div>
+        </div>
+
+        <nav className="flex items-center gap-3">
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/dashboard" className={navLinkClassName(isDashboard)}>
+              Dashboard
+            </Link>
+          </Button>
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/scan" className={navLinkClassName(isScan)}>
+              Scan Tanaman
+            </Link>
+          </Button>
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/library" className={navLinkClassName(isLibrary)}>
+              Pustaka Penyakit
+            </Link>
+          </Button>
+          {user && (
+            <Button
+              variant="outline"
+              onClick={() => logoutMutation.mutate()}
+              disabled={logoutMutation.isPending}
+            >
+              {logoutMutation.isPending ? "Keluar..." : "Keluar"}
+            </Button>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}