From a70f7953e6248aa51bb8aa3dd3f9869c634983e7 Mon Sep 17 00:00:00 2001 From: Dizzy2507 Date: Mon, 16 Jun 2025 18:40:41 +0530 Subject: [PATCH] UI-fixes-Landing-page --- .../client/package-lock.json | 49 ++++ team-nishita-dashboard/client/package.json | 1 + .../client/src/components/LandingPage.tsx | 242 +++++++++++++----- 3 files changed, 224 insertions(+), 68 deletions(-) diff --git a/team-nishita-dashboard/client/package-lock.json b/team-nishita-dashboard/client/package-lock.json index a7627a313..daaa76e7f 100644 --- a/team-nishita-dashboard/client/package-lock.json +++ b/team-nishita-dashboard/client/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.10", "axios": "^1.9.0", + "framer-motion": "^12.18.1", "jwt-decode": "^4.0.0", "lucide-react": "^0.514.0", "react": "^19.1.0", @@ -2771,6 +2772,33 @@ "node": ">= 6" } }, + "node_modules/framer-motion": { + "version": "12.18.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.18.1.tgz", + "integrity": "sha512-6o4EDuRPLk4LSZ1kRnnEOurbQ86MklVk+Y1rFBUKiF+d2pCdvMjWVu0ZkyMVCTwl5UyTH2n/zJEJx+jvTYuxow==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.18.1", + "motion-utils": "^12.18.1", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3509,6 +3537,21 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/motion-dom": { + "version": "12.18.1", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.18.1.tgz", + "integrity": "sha512-dR/4EYT23Snd+eUSLrde63Ws3oXQtJNw/krgautvTfwrN/2cHfCZMdu6CeTxVfRRWREW3Fy1f5vobRDiBb/q+w==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.18.1" + } + }, + "node_modules/motion-utils": { + "version": "12.18.1", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.18.1.tgz", + "integrity": "sha512-az26YDU4WoDP0ueAkUtABLk2BIxe28d8NH1qWT8jPGhPyf44XTdDUh8pDk9OPphaSrR9McgpcJlgwSOIw/sfkA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -4073,6 +4116,12 @@ "typescript": ">=4.8.4" } }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/team-nishita-dashboard/client/package.json b/team-nishita-dashboard/client/package.json index 5a5106559..06da7bcb1 100644 --- a/team-nishita-dashboard/client/package.json +++ b/team-nishita-dashboard/client/package.json @@ -12,6 +12,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.10", "axios": "^1.9.0", + "framer-motion": "^12.18.1", "jwt-decode": "^4.0.0", "lucide-react": "^0.514.0", "react": "^19.1.0", diff --git a/team-nishita-dashboard/client/src/components/LandingPage.tsx b/team-nishita-dashboard/client/src/components/LandingPage.tsx index 2de59cc5d..f49f3b4e3 100644 --- a/team-nishita-dashboard/client/src/components/LandingPage.tsx +++ b/team-nishita-dashboard/client/src/components/LandingPage.tsx @@ -1,10 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import './LandingPage.css'; import { signup, login } from '../api/api'; import { useNavigate } from 'react-router-dom'; import { jwtDecode } from 'jwt-decode'; +import { motion } from 'framer-motion'; -// Lucide icons import { Compass, LogIn, @@ -13,7 +13,9 @@ import { Share2, Bot, Sparkles, - ClipboardCheck + ClipboardCheck, + Sun, + Moon } from 'lucide-react'; interface Props { @@ -25,6 +27,7 @@ const LandingPage: React.FC = ({ onLogin }) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(null); + const [darkMode, setDarkMode] = useState(false); const navigate = useNavigate(); const closeModal = () => { @@ -37,20 +40,14 @@ const LandingPage: React.FC = ({ onLogin }) => { const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(null); - try { const credentials = { username, password }; const response = - modalType === 'login' - ? await login(credentials) - : await signup(credentials); - + modalType === 'login' ? await login(credentials) : await signup(credentials); const token = response.data.access_token; localStorage.setItem('token', token); - const decoded = jwtDecode<{ username: string }>(token); onLogin({ username: decoded.username }); - closeModal(); navigate('/home'); } catch (err: any) { @@ -58,75 +55,160 @@ const LandingPage: React.FC = ({ onLogin }) => { } }; + useEffect(() => { + const hero = document.querySelector('.hero') as HTMLElement; + if (hero) { + hero.style.background = darkMode + ? 'linear-gradient(135deg, #000000, #1a0033, #3b0000, #660033, #802900)' + : 'linear-gradient(135deg, #7dd3fc, #bbf7d0, #fef08a, #5eead4)'; + hero.style.transition = 'background 0.6s ease'; + } + document.body.classList.toggle('dark-theme', darkMode); + }, [darkMode]); + return ( - <> +
PathPilot
-
-

+ + Visualize Your Learning Journey -

-

+ + PathPilot helps you understand where you are, what to study next, and how close you are to your goals. -

+
-
- - Progress Tracking -

Track your learning goals and monitor real-time progress with intuitive charts.

-
- -
- - Knowledge Graph -

Visualize concepts you've learned and identify knowledge gaps clearly.

-
- -
- - AI Chat Assistant -

Ask questions anytime and get smart explanations powered by AI.

-
- -
- - Recommendations -

Receive personalized learning path suggestions based on your progress.

-
- -
- - Assessments -

Take quick quizzes to reinforce concepts and track understanding.

-
+ {[ + { + icon: , + title: "Progress Tracking", + desc: "Track your learning goals and monitor real-time progress with intuitive charts." + }, + { + icon: , + title: "Knowledge Graph", + desc: "Visualize concepts you've learned and identify knowledge gaps clearly." + }, + { + icon: , + title: "AI Chat Assistant", + desc: "Ask questions anytime and get smart explanations powered by AI." + }, + { + icon: , + title: "Recommendations", + desc: "Receive personalized learning path suggestions based on your progress." + }, + { + icon: , + title: "Assessments", + desc: "Take quick quizzes to reinforce concepts and track understanding." + } + ].map((feat, idx) => ( + +
{feat.icon}
+ {feat.title} +

{feat.desc}

+ + ))}
-
+ {modalType && (
-
e.stopPropagation()}> + e.stopPropagation()} + initial={{ scale: 0.9, opacity: 0 }} + animate={{ scale: 1, opacity: 1 }} + style={{ + background: darkMode ? '#1a1a1a' : '#ffffff', + color: darkMode ? '#f5f5f5' : '#022c22', + borderRadius: '12px', + padding: '2rem', + boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)', + backdropFilter: 'blur(10px)' + }} + > ×

{modalType === 'login' ? 'Login' : 'Sign Up'}

- {error &&

{error}

} + {error &&

{error}

}
= ({ onLogin }) => { onChange={(e) => setPassword(e.target.value)} required /> -
-
+
)} - + + +
); };