Feature/basic intro pages

package.json

@@ -10,19 +10,25 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.2",
+        "@radix-ui/react-scroll-area": "^1.2.2",
         "@radix-ui/react-slot": "^1.1.1",
+        "@tabler/icons-react": "^3.26.0",
+        "@types/p5": "^1.7.6",
         "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "framer-motion": "^11.15.0",
         "lucide-react": "^0.469.0",
+        "p5": "^1.11.2",
         "prettier": "^3.4.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hot-toast": "^2.4.1",
         "react-router-dom": "^7.1.1",
+        "react-scroll": "^1.9.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7"
     },
@@ -31,6 +37,7 @@
         "@types/node": "^22.10.2",
         "@types/react": "^18.3.17",
         "@types/react-dom": "^18.3.5",
+        "@types/react-scroll": "^1.8.10",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.17.0",

src/App.tsx

@@ -1,12 +1,30 @@
-import { Button } from "./components/ui/button"
+import { Route, Routes } from "react-router-dom"
+
+import Login from "./pages/Auth/Login"
+import Signup from "./pages/Auth/SignUp"
+import Dashboard from "./pages/Dashboard"
+import DevInfo from "./pages/DevInfo"
+import Home from "./pages/Home"
+
+// take user role from store of auth. setup Zustand store
+const userRole = "Student"
 
 const App = () => {
     return (
-        <div className="flex flex-col items-center justify-center h-screen">
-            <h2 className="font-extrabold">GradSpace</h2>
-            <p>under development</p>
-            <Button>loading...</Button>
-        </div>
+        // implement protected routes, redirectAuthenticated routes
+        <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<Signup />} />
+            {/* user role from store of auth. setup Zustand store  */}
+            <Route
+                path="/dashboard"
+                element={<Dashboard userRole={userRole} />}
+            />
+            <Route path="devinfo" element={<DevInfo />} />
+            {/* handle page not found */}
+            <Route path="*" element={<h1>Page not found</h1>} />
+        </Routes>
     )
 }
 

src/components/AnimatedLogo/AnimatedLogo.css

@@ -0,0 +1,59 @@
+:root {
+  --border-color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --border-color: black;
+  }
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  perspective: 1000px;
+}
+
+.logo-wrapper {
+  width: 300px;
+  height: 300px;
+  animation: float 8s ease-in-out infinite;
+  transform-style: preserve-3d;
+}
+
+.animated-logo {
+  width: 90%;
+  height: 90%;
+}
+
+.face {
+  filter: drop-shadow(0 10px 20px rgba(11, 6, 71, 0.2));
+}
+
+.face-border {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+  stroke: var(--border-color);
+}
+
+.cap-shadow {
+  stroke: rgba(0, 0, 0, 0.15);
+}
+
+.cap-top-edge {
+  stroke: var(--border-color);
+}
+
+.edge-pattern {
+  stroke: url(#edge-gradient);
+}
+
+.gutter-detail {
+  stroke: url(#edge-gradient);
+  opacity: 0.6;
+}
+
+.mouth {
+  stroke: var(--border-color);
+}

src/components/AnimatedLogo/AnimatedLogo.tsx

@@ -0,0 +1,77 @@
+import './AnimatedLogo.css';
+
+import { useEffect, useState } from 'react';
+
+import Eyes from './Face/Eyes';
+import FaceShape from './Face/FaceShape';
+import Mouth from './Face/Mouth';
+const AnimatedLogo = ({ facefill }: { facefill: boolean }) => {
+  const [animationState, setAnimationState] = useState<{
+    eyes: 'straight' | 'right';
+    mouth: 'neutral' | 'smile' | 'open';
+  }>({
+    eyes: 'straight',
+    mouth: 'neutral',
+  });
+
+  useEffect(() => {
+    const animationSequence = async () => {
+      while (true) {
+        // Look right
+        setAnimationState({ eyes: 'right', mouth: 'neutral' });
+        await new Promise((r) => setTimeout(r, 2000));
+
+        // Smile with open mouth
+        setAnimationState({ eyes: 'right', mouth: 'open' });
+        await new Promise((r) => setTimeout(r, 1000));
+
+        // Close mouth but keep smiling
+        setAnimationState({ eyes: 'right', mouth: 'smile' });
+        await new Promise((r) => setTimeout(r, 1000));
+
+        // Return to neutral
+        setAnimationState({ eyes: 'straight', mouth: 'neutral' });
+        await new Promise((r) => setTimeout(r, 3000));
+      }
+    };
+
+    animationSequence();
+  }, []);
+
+  return (
+    <div className="logo-container">
+      <div className="logo-wrapper">
+        <svg
+          viewBox="0 0 240 240"
+          xmlns="http://www.w3.org/2000/svg"
+          className="animated-logo"
+        >
+          <FaceShape facefill={facefill} />
+          <Eyes animationState={animationState.eyes} />
+          <Mouth expression={animationState.mouth} />
+
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#7a73d9" />
+              <stop offset="100%" stopColor="#5e57c9" />
+            </linearGradient>
+
+            <linearGradient
+              id="edge-gradient"
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor="#6a63c9" />
+              <stop offset="50%" stopColor="#8a83e9" />
+              <stop offset="100%" stopColor="#6a63c9" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedLogo;

src/components/AnimatedLogo/Face/Eyes.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface EyesProps {
+  animationState: 'straight' | 'right';
+}
+
+const Eyes: React.FC<EyesProps> = () => {
+  const pupilOffset = 5; // Fixed offset for the right position
+
+  return (
+    <>
+      <g className="eye-group left">
+        <circle className="eye left-eye" cx="80" cy="100" r="15" fill="white" />
+        <circle
+          className="pupil left-pupil"
+          cx={80 + pupilOffset}
+          cy="100"
+          r="7"
+          fill="black"
+        />
+      </g>
+
+      <g className="eye-group right">
+        <circle
+          className="eye right-eye"
+          cx="160"
+          cy="100"
+          r="15"
+          fill="white"
+        />
+        <circle
+          className="pupil right-pupil"
+          cx={160 + pupilOffset}
+          cy="100"
+          r="7"
+          fill="black"
+        />
+      </g>
+    </>
+  );
+};
+
+export default Eyes;