notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Merged Bhakti's changes with Omabase's changes.

Browse Source
This commit is contained in:
K
2025-02-23 02:50:37 +05:30
parent a6b604f04f f41d33625f
commit f92534f814
24 changed files with 4822 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/package-lock.json
Generated
+4061 -16
View File
File diff suppressed because it is too large Load Diff
Frontend/package.json
+6 -1
View File
@@ -14,14 +14,19 @@
"apexcharts": "^4.5.0",
"chart.js": "^4.4.8",
"flowbite": "^2.5.1",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
"react-chartjs-2": "^5.3.0",
"@splinetool/react-spline": "^4.0.0",
"flowbite": "^2.5.1",
"framer-motion": "^12.4.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.15.1",
"react-player": "^2.16.0",
"react-redux": "^9.1.2",
"react-router-dom": "^6.26.1",
"react-typewriter-effect": "^1.1.0",
"socket.io-client": "^4.7.5"
},
"devDependencies": {
Frontend/public/images/agriculture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

Frontend/public/images/bgphoto.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

Frontend/public/images/logowhite.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

Frontend/public/images/plant.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

Frontend/src/App.jsx
+6 -6
View File
@@ -1,6 +1,7 @@
import { useDispatch, useSelector } from "react-redux";
import "./App.css";
import Navbar from "./components/Navbar";
//import Navbar from "./components/Navbar";
import Navbar2 from "./components/Navbar2";
import { useEffect } from "react";
import { userSliceActions } from "./store/userSlice";
@@ -36,19 +37,18 @@ function App() {
return (
<>
<div className="w-full h-auto flex-col relative">
<Navbar />
<div className="h-28"></div>
<Navbar2 />
<Outlet />
<div
className={`${
loader ? "block" : "hidden"
} absolute w-full h-full bg-black opacity-50 top-0 left-0`}
>
<div className="text-center my-96">
<div class="text-center my-96">
<div role="status">
<svg
aria-hidden="true"
className="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
class="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ function App() {
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
Frontend/src/components/Navbar.jsx
+134 -22
View File
@@ -1,30 +1,134 @@
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { BACKEND_URL } from "../constants";
const Navbar = () => {
const user = useSelector((store) => store.user);
//console.log("User is : ", user);
const navigate = useNavigate();
const handleLogOut = async () => {
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
method: "Get",
credentials: "include",
});
const data = await responce.json();
//console.log("User Logged out data is : ", data);
if (data.success == true) {
navigate("/user/login");
}
};
return (
<div className=" flex justify-center rounded-full">
<nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
<div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
<div className="relative h-full flex items-center justify-between p-4">
<>
<nav className="bg-[#3D8D7A] dark:bg-gray-900">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img src="/images/logo.png" className="size-10" alt="Logo" />
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
<img
src="/images/logo.png"
className="size-12 mr-2 "
alt="Logo"
/>
<span className="self-center text-4xl font-bold whitespace-nowrap dark:text-white">
Crop Compass
</span>
</a>
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button
type="button"
className="text-black bg-white hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
className="flex text-sm bg-white rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button"
aria-expanded="false"
data-dropdown-toggle="user-dropdown"
data-dropdown-placement="bottom"
>
Get started
<span className="sr-only">Open user menu</span>
<img
className="size-9 rounded-full"
src={`${user?.avatar}`}
alt="user photo"
/>
</button>
{/* <!-- Dropdown menu --> */}
<div
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
id="user-dropdown"
>
{user?.name !== "Unloggedin User" && (
<div className="px-4 py-3">
<span className="block text-sm text-gray-900 dark:text-white">
{user?.name}
</span>
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
{user?.email}
</span>
</div>
)}
<ul className="py-2" aria-labelledby="user-menu-button">
{user?.name !== "Unloggedin User" && (
<>
<li>
<Link
to={"/user/dashboard"}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Dashboard
</Link>
</li>
<li>
<Link
to={"/user/dashboard/settings"}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Settings
</Link>
</li>
<li>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Earnings
</a>
</li>
</>
)}
{user?.name === "Unloggedin User" ? (
<li>
<Link
to={"/user/login"}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Sign In
</Link>
</li>
) : (
<li>
<a
onClick={handleLogOut}
className="block px-4 py-2 text-sm text-[#FBFFE4] hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Sign out
</a>
</li>
)}
</ul>
</div>
<button
data-collapse-toggle="navbar-sticky"
data-collapse-toggle="navbar-user"
type="button"
className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
aria-controls="navbar-sticky"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-user"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
@@ -47,22 +151,22 @@ const Navbar = () => {
</div>
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky"
id="navbar-user"
>
<ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
<ul className="flex text-xl flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-[#A3D1C6] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[#3D8D7A] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
<Link
to={"/"}
className="block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
aria-current="page"
>
Home
</a>
</Link>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
About
</a>
@@ -70,7 +174,7 @@ const Navbar = () => {
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Services
</a>
@@ -78,7 +182,15 @@ const Navbar = () => {
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Pricing
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>
Contact
</a>
@@ -87,7 +199,7 @@ const Navbar = () => {
</div>
</div>
</nav>
</div>
</>
);
};
Frontend/src/components/Navbar2.jsx
+100
View File
@@ -0,0 +1,100 @@
const Navbar2 = () => {
return (
<div className=" flex justify-center rounded-full">
<nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
<div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
<div className="relative h-full flex items-center justify-between p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
src="/images/logo.png"
className="size-10"
alt="Logo"
/>
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
Crop Compass
</span>
</a>
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button
type="button"
className="text-black bg-white hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
>
Get started
</button>
<button
data-collapse-toggle="navbar-sticky"
type="button"
className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
aria-controls="navbar-sticky"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
</div>
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky"
>
<ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
>
About
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Services
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
};
export default Navbar2;
Frontend/src/index.css
+1 -1
View File
@@ -4,4 +4,4 @@
@theme {
--color-midnight: #A3D1C6;
}
}
Frontend/src/main.jsx
+40
View File
@@ -66,3 +66,43 @@ createRoot(document.getElementById("root")).render(
</Provider>
</StrictMode>
);
createRoot(document.getElementById("root")).render(
<StrictMode>
<Provider store={MentifyStore}>
<SocketProvider>
<BrowserRouter>
<Routes>
{/* Routes for the main App */}
<Route path="/" element={<App />}>
<Route index element={<HomePage />} />
<Route path="home" element={<HomePage />} />
</Route>
{/* User related routes */}
<Route path="user" element={<App />}>
<Route path="login" element={<LoginPage />} />
<Route path="signup" element={<SignupPage />} />
<Route path="forgetpassword" element={<ForgetPassword />} />
<Route
path="api/v1/password/reset/:token"
element={<ResetPassword />}
/>
<Route path="dashboard" element={<MainUserPanel />}>
<Route index element={<Dashboard />} />
<Route path="history" element={<History />} />
<Route path="notifications" element={<Notifications />} />
<Route path="settings" element={<Settings />} />
<Route path="scheduledmeetings" element={<ScheduleMeeting />} />
<Route path="support" element={<Support />} />
<Route path="feedback" element={<FeedBackAndRatings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
</SocketProvider>
</Provider>
</StrictMode>
);
d;
Frontend/src/pages/Home/Cards.jsx
+111
View File
@@ -0,0 +1,111 @@
import React from "react";
export const HeroSecn = () =>{
return(
<section className=" py-40 w-full flex justify-center text-gray-100">
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
<div className="container mx-auto flex flex-col justify-between h-full w-full">
<div className="text-center md:text-start flex flex-col justify-around h-full">
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
Anything and Everything you Need to know About
</h1>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div>
</div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
</div>
</div>
</section>
)
}
export const CardWithImage = () => {
return (
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
</a>
<div class="p-6 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Excellent Dashboards</h5>
</a>
<p class="mb-3 font-normal text-white dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</div>
)
}
export const CardOnlyText = () => {
return(
<div>
<a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
</div>
)
}
export const CardWithButton = () => {
return(
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
)
}
export const CardWithOnlyImage = () => {
return(
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class=" rounded-lg" src="/images/plant.png" alt="product image" />
</a>
</div>
)
}
const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
export default cards;
export const CardLayout = () => {
return(
<div>
<HeroSecn />
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<cardWithImage />
<div className="flex flex-col gap-10 justify-between ">
<cardOnlyText />
<cardWithButton />
</div>
<div className=" flex flex-col justify-between">
<cardWithOnlyImage />
<cardOnlyText />
</div>
</div>
</div>
</div>
)
}
Frontend/src/pages/Home/Footer.jsx
+5 -11
View File
@@ -7,12 +7,9 @@ const Footer = () => {
<div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
<div className="md:flex md:justify-between">
<div className="mb-6 md:mb-0">
<a
href="https://flowbite.com/"
className="flex items-center gap-2"
>
<a href="https://flowbite.com/" class="flex items-center gap-2">
<img
src="/images/logo.png"
src="/images/logo.jpg"
className="h-9 rounded-full"
alt="Flowbite Logo"
/>
@@ -28,15 +25,12 @@ const Footer = () => {
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<li className="mb-4">
<a href="https://flowbite.com/" className="hover:underline">
<a href="https://flowbite.com/" class="hover:underline">
Flowbite
</a>
</li>
<li>
<a
href="https://tailwindcss.com/"
className="hover:underline"
>
<a href="https://tailwindcss.com/" class="hover:underline">
Tailwind CSS
</a>
</li>
@@ -88,7 +82,7 @@ const Footer = () => {
<div className="sm:flex sm:items-center sm:justify-between">
<span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
© 2024{" "}
<a href="https://flowbite.com/" className="hover:underline">
<a href="https://flowbite.com/" class="hover:underline">
MentorFlux™
</a>
. All Rights Reserved.
Frontend/src/pages/Home/Hero.jsx
+10 -10
View File
@@ -15,17 +15,17 @@ const Hero = () => {
Find Your Perfect Mentor
</h1>
<div className="flex gap-4 justify-center md:justify-start">
<form className="w-full md:w-3/5">
<form class="w-full md:w-3/5">
<label
for="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
>
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<div class="relative">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg
className="w-4 h-4 text-gray-500 dark:text-gray-400"
class="w-4 h-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@@ -33,9 +33,9 @@ const Hero = () => {
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
@@ -43,14 +43,14 @@ const Hero = () => {
<input
type="search"
id="default-search"
className="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Search for mentors"
required
/>
<Link
to={"/mentor"}
type="button"
className="text-white absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
class="text-white absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
>
Find your Mentor
</Link>
Frontend/src/pages/Home/Hero2.jsx
+58
View File
@@ -0,0 +1,58 @@
import React from 'react'
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
const ScrollReveal = ({ children, direction = "left" }) => {
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
const variants = {
left: { opacity: 0, x: -100 },
right: { opacity: 0, x: 100 },
up: { opacity: 0, y: 100 },
down: { opacity: 0, y: -100 },
};
return (
<motion.div
ref={ref}
initial={variants[direction]}
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
transition={{ duration: 1.2, ease: "easeOut" }}
>
{children}
</motion.div>
);
};
function Hero2() {
const myRef = document.querySelector('.scrollable-div')
return (
<div>
<ScrollReveal direction='up'>
<HeroSecn />
</ScrollReveal>
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<ScrollReveal direction='up'>
<CardWithImage />
</ScrollReveal>
<div className="flex flex-col gap-10 justify-between ">
<ScrollReveal direction='up' > <CardOnlyText /> </ScrollReveal>
<ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
</div>
<div className=" flex flex-col justify-between">
<ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
<ScrollReveal direction='up'> <CardOnlyText /> </ScrollReveal>
</div>
</div>
</div>
</div>
)
}
export default Hero2
Frontend/src/pages/Home/SubjectSection.jsx
+1 -1
View File
@@ -162,7 +162,7 @@ const SubjectSection = () => {
>
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
<FaReplyAll className="text-base sm:text-xl" />
<span className="sr-only">Check icon</span>
<span class="sr-only">Check icon</span>
</div>
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
See all
Frontend/src/pages/Home/Testimonial.jsx
+30 -37
View File
@@ -9,9 +9,7 @@ const Testimonial = () => {
<section className="bg-gray-100 py-12 px-2 md:px-32">
<div className="container mx-auto">
<div className="text-center">
<h2 className="text-xl sm:text-4xl font-bold mb-4">
WHY CHOOSE US
</h2>
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
Benefits of online tutoring services with us
</h1>
@@ -33,9 +31,7 @@ const Testimonial = () => {
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
<FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
<h3 className="text-xl font-bold mb-2">
24/7 Mentor Availability
</h3>
<h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3>
<p className="text-gray-600 text-sm">
Our Mentors are always available to respond as quick as
possible for you
@@ -49,41 +45,38 @@ const Testimonial = () => {
<h3 className="text-xl font-bold mb-2">Interactive Session</h3>
<p className="text-gray-600 text-sm">
Our digital messaging with audio and video chat features give
interactiveness.
Our digital messaging with audio and video chat features give interactiveness.
</p>
</div>
</div>
{/* <div className="w-full md:w-1/3 p-4">
<div className="bg-white rounded-lg p-6 text-center shadow-md">
<img
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
alt="Icon"
className="w-12 h-12 mb-4"
/>
<h3 className="text-2xl font-bold mb-2">
Interactive Whiteboard
</h3>
<p className="text-gray-600">
Our digital whiteboard equipped with audio and video chat
features
</p>
</div>
</div>
<div className="w-full md:w-1/3 p-4">
<div className="bg-white rounded-lg p-6 text-center shadow-md">
<img
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
alt="Icon"
className="w-12 h-12 mb-4"
/>
<h3 className="text-2xl font-bold mb-2">Affordable Prices</h3>
<p className="text-gray-600">
Choose an expert tutor based on your budget and per hour
</p>
</div>
</div> */}
{/* <div class="w-full md:w-1/3 p-4">
<div class="bg-white rounded-lg p-6 text-center shadow-md">
<img
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
alt="Icon"
class="w-12 h-12 mb-4"
/>
<h3 class="text-2xl font-bold mb-2">Interactive Whiteboard</h3>
<p class="text-gray-600">
Our digital whiteboard equipped with audio and video chat
features
</p>
</div>
</div>
<div class="w-full md:w-1/3 p-4">
<div class="bg-white rounded-lg p-6 text-center shadow-md">
<img
src="https://cdn-icons-png.flaticon.com/512/2768/2768851.png"
alt="Icon"
class="w-12 h-12 mb-4"
/>
<h3 class="text-2xl font-bold mb-2">Affordable Prices</h3>
<p class="text-gray-600">
Choose an expert tutor based on your budget and per hour
</p>
</div>
</div> */}
</div>
</div>
</section>
Frontend/src/pages/Password/ResetPassword.jsx
+2 -1
View File
@@ -109,7 +109,7 @@ const ResetPassword = () => {
<button
type="submit"
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
>
Reset Password
</button>
@@ -127,4 +127,5 @@ const ResetPassword = () => {
</>
);
};
export default ResetPassword;
Frontend/src/pages/UserPanel/Dashboard.jsx
+193 -14
View File
@@ -1,23 +1,202 @@
import React from "react";
import { useNavigate } from "react-router-dom";
import Piechart from "../../components/monitoring charts/Piechart";
import TotalSpent from "../../components/TotalSpent";
import FarmList from "../../components/FarmList";
import AddFarm from "./Farm/AddFarm";
const Dashboard = () => {
return (
<div className="w-full bg-white rounded-lg shadow p-4">
<div className="mb-4 flex justify-end space-x-4">
<AddFarm />
</div>
<>
<div className="w-full bg-white rounded-lg shadow p-4">
<div className="flex flex-col justify-center items-center mb-4">
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
Upcoming Sessions{" "}
</h2>
<div className="bg-gray-300 w-full h-52 rounded-lg"></div>
</div>
<div className="mb-4 flex space-x-4">
<Piechart />
<TotalSpent />
<div className="mb-4">
<h3 className="text-lg font-medium">Recent Activity</h3>
<p className="text-gray-500 text-sm mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div className="grid grid-cols-1 gap-4 mt-4">
<input type="range" className="w-full h-auto" readOnly:true/>
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
<span className="ml-2 font-medium">Topup</span>
</div>
<div className="flex items-center">
<span className="text-gray-500 text-sm">06:24:45 AM</span>
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
</div>
</div>
</div>
</div>
<div className="mb-4">
<h3 className="text-lg font-medium">Weekly Summary</h3>
<div className="grid grid-cols-8 gap-2 mt-4">
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Sun</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Mon</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Tue</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Wed</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Thu</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Fri</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Sat</span>
</div>
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
<span className="text-gray-500 text-xs">Completed</span>
</div>
</div>
<div className="grid grid-cols-8 gap-2 mt-2">
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-16"></div>
<div className="bg-gray-300 h-4"></div>
<div className="bg-red-500 rounded-b-lg h-16"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-20"></div>
<div className="bg-gray-300 h-8"></div>
<div className="bg-red-500 rounded-b-lg h-12"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-12"></div>
<div className="bg-gray-300 h-12"></div>
<div className="bg-red-500 rounded-b-lg h-20"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-24"></div>
<div className="bg-gray-300 h-4"></div>
<div className="bg-red-500 rounded-b-lg h-8"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-16"></div>
<div className="bg-gray-300 h-12"></div>
<div className="bg-red-500 rounded-b-lg h-16"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-16"></div>
<div className="bg-gray-300 h-4"></div>
<div className="bg-red-500 rounded-b-lg h-24"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-green-500 rounded-t-lg h-8"></div>
<div className="bg-gray-300 h-16"></div>
<div className="bg-red-500 rounded-b-lg h-20"></div>
</div>
<div
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
style={{ height: "100px" }}
>
<div className="bg-gray-300 h-24"></div>
<div className="bg-gray-300 h-24"></div>
<div className="bg-gray-300 h-24"></div>
</div>
</div>
</div>
<div className="mb-4">
<h3 className="text-lg font-medium">Notifications</h3>
<div className="grid grid-cols-1 gap-4 mt-4">
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
<span className="ml-2 font-medium">Topup</span>
</div>
<div className="flex items-center">
<span className="text-gray-500 text-sm">06:24:45 AM</span>
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-4 mt-4">
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
<div className="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth="2"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13 7l5 5m0 0l-5 5m5-5H6"
/>
</svg>
<span className="ml-2 font-medium">Topup</span>
</div>
<div className="flex items-center">
<span className="text-gray-500 text-sm">06:24:45 AM</span>
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
</div>
</div>
</div>
</div>
</div>
<FarmList />
</div>
</>
);
};
export default Dashboard;
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+13 -13
View File
@@ -36,7 +36,7 @@ const MainUserPanel = () => {
return (
<>
<div className="container mx-auto p-4 ">
<div className="flex items-center mb-4 md:hidden ">
<div className="flex items-center mb-4 md:hidden">
<img
src={`${user.avatar}`}
alt="Profile Picture"
@@ -45,7 +45,7 @@ const MainUserPanel = () => {
<span className="text-lg font-medium">Hello, {user.name}</span>
</div>
<div className="flex flex-row gap-4">
<div className="w-1.5/12 bg-white md:w-3/12 rounded-lg shadow p-4">
<div className="w-1.5/12 md:w-3/12 bg-white rounded-lg shadow p-4">
<div className="hidden md:flex items-center mb-4">
<img
src={`${user.avatar}`}
@@ -198,7 +198,7 @@ const MainUserPanel = () => {
<button
data-collapse-toggle="navbar-user"
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-user"
aria-expanded="false"
>
@@ -221,30 +221,30 @@ const MainUserPanel = () => {
</button>
</div>
</div>
<div className="mb-4">
<div class="mb-4">
<img
src={`${user.avatar}`}
alt="Profile Picture"
className="rounded-full w-24 h-24 mx-auto"
class="rounded-full w-24 h-24 mx-auto"
/>
<h4 className="text-lg font-medium mt-2">{user.name}</h4>
{/* <span className="text-gray-500 text-sm">@thomasdox</span> */}
<p className="text-gray-500 text-sm mt-2">
<h4 class="text-lg font-medium mt-2">{user.name}</h4>
{/* <span class="text-gray-500 text-sm">@thomasdox</span> */}
<p class="text-gray-500 text-sm mt-2">
Join on {user.createdAt && user.createdAt.substring(0, 10)}
</p>
<p className="text-gray-500 text-sm mt-2">
<p class="text-gray-500 text-sm mt-2">
{user.description == null &&
"I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
</p>
<div className="flex justify-center mt-4">
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<div class="flex justify-center mt-4">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<FaHome className="text-lg font-extrabold" />
</button>
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
<IoMdSettings className="text-lg font-extrabold" />
</button>
<button
className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
onClick={handleLogOut}
>
<RiLogoutBoxLine className="text-lg font-extrabold" />
Frontend/src/pages/UserPanel/MentorSessionCard.jsx
+35 -33
View File
@@ -55,43 +55,45 @@ const MentorSessionCard = ({ session }) => {
const realTimeString = timeStringtoRealTime(schduledTime);
return (
<li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
className="w-8 h-8 rounded-full"
src="/images/profile.jpeg"
alt="Neil image"
/>
</div>
<div className="flex-1 min-w-0 ms-4">
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
{user.role === "user" ? mentorName : studentName}
</p>
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
{user.role === "user" ? mentorMail : studentMail}
</p>
</div>
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
₹{amountPaid}
</div>
</div>
<div className="flex justify-between">
<div className="flex items-center">
<div>
<p className="text-gray-500">
{timeStringToDayName(schduledTime)},
{realTimeString.substring(21, 26) +
" " +
realTimeString.substring(30)}
<>
<li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
<div class="flex items-center">
<div class="flex-shrink-0">
<img
class="w-8 h-8 rounded-full"
src="/images/profile.jpeg"
alt="Neil image"
/>
</div>
<div class="flex-1 min-w-0 ms-4">
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
{user.role === "user" ? mentorName : studentName}
</p>
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
{user.role === "user" ? mentorMail : studentMail}
</p>
</div>
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
₹{amountPaid}
</div>
</div>
<div className="flex items-center">
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
<div className="flex justify-between">
<div className="flex items-center">
<div>
<p className="text-gray-500">
{timeStringToDayName(schduledTime)},
{realTimeString.substring(21, 26) +
" " +
realTimeString.substring(30)}
</p>
</div>
</div>
<div className="flex items-center">
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
</div>
</div>
</div>
</li>
</li>
</>
);
};
Frontend/src/pages/UserPanel/Settings.jsx
+14 -14
View File
@@ -95,15 +95,15 @@ const Settings = () => {
</div>
</div>
<form onSubmit={handleAvatar}>
<div className="flex items-center justify-center w-full">
<div class="flex items-center justify-center w-full">
<img src={formData.avatar && `${formData.avatar}`} alt="" />
<label
htmlFor="dropzone-file"
className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
for="dropzone-file"
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
>
<div className="flex flex-col items-center justify-center pt-5 pb-6">
<div class="flex flex-col items-center justify-center pt-5 pb-6 ">
<svg
className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
@@ -111,24 +111,24 @@ const Settings = () => {
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
/>
</svg>
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
{avatar ? (
<span className="font-semibold">
Avatar uploaded successfully
<span class="font-semibold">
Avatar uploaded successfulky
</span>
) : (
<span className="font-semibold">
<span class="font-semibold">
Click to upload and press Upload button
</span>
)}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
<p class="text-xs text-gray-500 dark:text-gray-400">
SVG, PNG, JPG or GIF (MAX. 800x400px)
</p>
<button
@@ -141,7 +141,7 @@ const Settings = () => {
<input
id="dropzone-file"
type="file"
className="hidden"
class="hidden"
onChange={(e) => {
setAvatar(e.target.files[0]);
//console.log(e.target.files[0]);
Frontend/tailwind.config.js
+1
View File
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
<<<<<<< HEAD
darkMode: 'class', // Change this based on your needs
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {