Added frontend folder structure in Ombase's branch
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
const About = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-white py-12 w-full flex justify-center">
|
||||
<div className="flex flex-col md:flex-row justify-between w-10/12 h-auto">
|
||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||
<img src="/images/calender.png" className="w-full h-auto" alt="" />
|
||||
</div>
|
||||
<div className="container mx-auto flex flex-col justify-around h-full w-full md:py-10">
|
||||
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||
CUSTOMIZE WITH YOUR SCHEDULE
|
||||
</h2>
|
||||
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||
Personalized Professional Online Mentor on Your Schedule
|
||||
</h1>
|
||||
<p className="text-base mb-8">
|
||||
Our scheduling system allows you to select based on free time.
|
||||
Lorem ipsum demo text for template. Keep track of your students
|
||||
class and mentoring schedules, and never miss your Session. The
|
||||
best online class scheduling system with easy accessibility.
|
||||
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||
the visual form
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center md:justify-start">
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
|
||||
const Customization = () => {
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
className="bg-gray-100 py-12 w-full flex justify-center"
|
||||
style={{ backgroundColor: "#f0f0f0" }}
|
||||
>
|
||||
<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-around h-full w-full md:py-10">
|
||||
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||
CUSTOMIZE WITH YOUR SCHEDULE
|
||||
</h2>
|
||||
<h1 className="text-2xl md:text-4xl md:font-extrabold font-bold mb-4">
|
||||
Talented and Qualified Tutors to Serve You for Help
|
||||
</h1>
|
||||
<p className="text-base mb-8">
|
||||
Our scheduling system allows you to select based on free time.
|
||||
Lorem ipsum demo text for template. Keep track of your students
|
||||
class and tutoring schedules, and never miss your lectures. The
|
||||
best online class scheduling system with easy accessibility.
|
||||
Lorem ipsum is a placeholder text commonly used to demonstrate
|
||||
the visual form
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center md:justify-start">
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Get started
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||
<img
|
||||
src="/images/interaction2.png"
|
||||
className="w-full h-auto"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Customization;
|
||||
@@ -0,0 +1,190 @@
|
||||
import React from "react";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<footer className="bg-white dark:bg-gray-900">
|
||||
<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/" class="flex items-center gap-2">
|
||||
<img
|
||||
src="/images/logo.jpg"
|
||||
className="h-9 rounded-full"
|
||||
alt="Flowbite Logo"
|
||||
/>
|
||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||
MentorFlux
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
Resources
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a href="https://flowbite.com/" class="hover:underline">
|
||||
Flowbite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://tailwindcss.com/" class="hover:underline">
|
||||
Tailwind CSS
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
Follow us
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a
|
||||
href="https://github.com/themesberg/flowbite"
|
||||
className="hover:underline "
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://discord.gg/4eeurUVvTy"
|
||||
className="hover:underline"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
|
||||
Legal
|
||||
</h2>
|
||||
<ul className="text-gray-500 dark:text-gray-400 font-medium">
|
||||
<li className="mb-4">
|
||||
<a href="#" className="hover:underline">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:underline">
|
||||
Terms & Conditions
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
|
||||
<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/" class="hover:underline">
|
||||
MentorFlux™
|
||||
</a>
|
||||
. All Rights Reserved.
|
||||
</span>
|
||||
<div className="flex mt-4 sm:justify-center sm:mt-0">
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 8 19"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Facebook page</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 21 16"
|
||||
>
|
||||
<path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
|
||||
</svg>
|
||||
<span className="sr-only">Discord community</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 17"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Twitter page</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">GitHub account</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Dribbble account</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,118 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-white py-12 w-full flex justify-center">
|
||||
<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 gap-5 justify-around h-full">
|
||||
<h2 className="text-xl font-bold mb-4 text-yellow-600">
|
||||
100% SATISFACTION GUARANTEE
|
||||
</h2>
|
||||
<h1 className="text-6xl md:text-8xl md:font-extrabold font-bold mb-4">
|
||||
Find Your Perfect Mentor
|
||||
</h1>
|
||||
<div className="flex gap-4 justify-center md:justify-start">
|
||||
<form class="w-full md:w-3/5">
|
||||
<label
|
||||
for="default-search"
|
||||
class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
|
||||
>
|
||||
Search
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||
<svg
|
||||
class="w-4 h-4 text-gray-500 dark:text-gray-400"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
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>
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
id="default-search"
|
||||
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"
|
||||
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>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/*
|
||||
<Link
|
||||
to={"/mentor"}
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
Find your Mentor
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
|
||||
>
|
||||
Contact Us
|
||||
</button> */}
|
||||
</div>
|
||||
<p className="text-lg mb-8 my-6">
|
||||
Find guidance, support, and industry insights from seasoned
|
||||
professionals. Achieve your goals with our mentorship
|
||||
platform.Our platform bridges the gap between students and
|
||||
experienced mentors.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||
<img src="/images/student.png" className="w-full h-auto" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mt-8">
|
||||
<div className="w-full p-4">
|
||||
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||
<h3 className="text-white font-bold text-3xl mb-2">870</h3>
|
||||
<p className="text-white font-bold">Expert tutors</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full p-4">
|
||||
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||
<h3 className="text-white font-bold text-3xl mb-2">20,000+</h3>
|
||||
<p className="text-white font-bold">Hours tutored</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full p-4">
|
||||
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||
<h3 className="text-white font-bold text-3xl mb-2">298</h3>
|
||||
<p className="text-white font-bold">Subjects and courses</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full p-4">
|
||||
<div className="bg-blue-500 rounded-lg p-6 text-center">
|
||||
<h3 className="text-white font-bold text-3xl mb-2">72,920</h3>
|
||||
<p className="text-white font-bold">Active students</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
import Navbar from "../../components/Navbar";
|
||||
import Hero from "./Hero";
|
||||
import Testimonial from "./Testimonial";
|
||||
import About from "./About";
|
||||
import Customization from "./Customization";
|
||||
import SubjectSection from "./SubjectSection";
|
||||
import ReviewSection from "./ReviewSection";
|
||||
import Footer from "./Footer";
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<Testimonial />
|
||||
<About />
|
||||
<Customization />
|
||||
<SubjectSection />
|
||||
<ReviewSection />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
@@ -0,0 +1,289 @@
|
||||
import React from "react";
|
||||
|
||||
const Reviews = [
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
|
||||
[
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
{
|
||||
src: "/images/Review1.jpeg",
|
||||
alt: "Bonnie image",
|
||||
name: "Bonnie",
|
||||
occupation: "Student",
|
||||
review:
|
||||
"As a student of this online education website, I can confidently say that it has been an incredible experience. The platform is user-friendly and making it easy for me to learn at my own pace.",
|
||||
},
|
||||
],
|
||||
];
|
||||
|
||||
const ReviewSection = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-gray-100 py-12">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className=" text-2xl md:text-4xl font-bold mb-4">OUR TESTIMONIALS</h2>
|
||||
<h1 className="text-3xl md:text-6xl font-bold mb-4">
|
||||
What Our Students Say About Us
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="default-carousel"
|
||||
className="relative w-full"
|
||||
data-carousel="slide"
|
||||
>
|
||||
{/* <!-- Carousel wrapper --> */}
|
||||
<div className="relative h-64 overflow-hidden rounded-lg md:h-96">
|
||||
{/* <!-- Item 1 --> */}
|
||||
{Reviews.map((reviewList) => (
|
||||
<div
|
||||
className="hidden duration-700 ease-in-out w-full"
|
||||
data-carousel-item
|
||||
>
|
||||
<div className="flex w-full items-center justify-center h-full gap-8">
|
||||
{/* Review no 1 */}
|
||||
|
||||
{reviewList.map((review) => (
|
||||
<div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 md:py-2">
|
||||
<div className="flex flex-col items-center pb-10 p-2">
|
||||
<img
|
||||
className="w-20 h-20 md:w-24 md:h-24 mb-3 rounded-full shadow-lg"
|
||||
src={`${review.src}`}
|
||||
alt={`${review.alt}`}
|
||||
/>
|
||||
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">
|
||||
{review.name}
|
||||
</h5>
|
||||
<span className="text-base font-semibold text-gray-500 dark:text-gray-400">
|
||||
{review.occupation}
|
||||
</span>
|
||||
|
||||
<p className="md:hidden text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0, 35)}....
|
||||
</p>
|
||||
|
||||
<p className="hidden md:block text-sm text-gray-600 text-center">
|
||||
{review.review.substring(0,200)}...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* <!-- Slider indicators --> */}
|
||||
<div className="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
data-carousel-slide-to="0"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 2"
|
||||
data-carousel-slide-to="1"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 3"
|
||||
data-carousel-slide-to="2"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 4"
|
||||
data-carousel-slide-to="3"
|
||||
></button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-3 h-3 rounded-full"
|
||||
aria-current="false"
|
||||
aria-label="Slide 5"
|
||||
data-carousel-slide-to="4"
|
||||
></button>
|
||||
</div>
|
||||
{/* <!-- Slider controls --> */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-prev
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 1 1 5l4 4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Previous</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
|
||||
data-carousel-next
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
|
||||
<svg
|
||||
className="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 6 10"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="m1 9 4-4-4-4"
|
||||
/>
|
||||
</svg>
|
||||
<span className="sr-only">Next</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReviewSection;
|
||||
@@ -0,0 +1,179 @@
|
||||
import React from "react";
|
||||
import { MdEngineering } from "react-icons/md";
|
||||
import { FaLaptopCode } from "react-icons/fa";
|
||||
import { LiaLanguageSolid } from "react-icons/lia";
|
||||
import { MdScience } from "react-icons/md";
|
||||
import { MdHistoryEdu } from "react-icons/md";
|
||||
import { MdPsychology } from "react-icons/md";
|
||||
import { CgWebsite } from "react-icons/cg";
|
||||
import { FaReplyAll } from "react-icons/fa";
|
||||
|
||||
const SubjectList = [
|
||||
{
|
||||
icon: "FaLaptopCode",
|
||||
title: "Programming",
|
||||
},
|
||||
{
|
||||
icon: "MdEngineering",
|
||||
title: "Engineering",
|
||||
},
|
||||
{
|
||||
icon: "LiaLanguageSolid",
|
||||
title: "Languages",
|
||||
},
|
||||
{
|
||||
icon: "MdScience",
|
||||
title: "Science",
|
||||
},
|
||||
{
|
||||
icon: "MdHistoryEdu",
|
||||
title: "History",
|
||||
},
|
||||
{
|
||||
icon: "MdPsychology",
|
||||
title: "Psychology",
|
||||
},
|
||||
{
|
||||
icon: "CgWebsite",
|
||||
title: "Web Design",
|
||||
},
|
||||
{
|
||||
icon: "FaReplyAll",
|
||||
title: "See all",
|
||||
},
|
||||
];
|
||||
const SubjectSection = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="bg-white py-12 flex justify-center">
|
||||
<div className="w-11/12">
|
||||
<div className="container mx-auto">
|
||||
<div className="text-center">
|
||||
<h2 className="text-xl md:text-4xl font-bold mb-4">
|
||||
OUR TUTOR SUBJECTS
|
||||
</h2>
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4">
|
||||
Find Online Tutor in Any Subject
|
||||
</h1>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3 md:gap-4 mt-10 md:grid-cols-3 lg:grid-cols-4">
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 "
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||
<FaLaptopCode className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||
Programming
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
|
||||
<MdEngineering className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-sm sm:text-xl font-bold text-black font-sans">
|
||||
Engineering
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-pink-500 bg-pink-100 rounded-lg dark:bg-pink-800 dark:text-pink-200">
|
||||
<LiaLanguageSolid className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Languages
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-purple-500 bg-purple-100 rounded-lg dark:bg-purple-800 dark:text-purple-200">
|
||||
<MdScience className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Science
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-yellow-500 bg-yellow-100 rounded-lg dark:bg-yellow-800 dark:text-yellow-200">
|
||||
<MdHistoryEdu className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
History
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
||||
<MdPsychology className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Psychology
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||
role="alert"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-800 dark:text-orange-200 ">
|
||||
<CgWebsite className="text-base sm:text-xl" />
|
||||
<span className="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
Web Design
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
className="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 md:hidden lg:flex"
|
||||
role="alert"
|
||||
>
|
||||
<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 class="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||
See all
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubjectSection;
|
||||
@@ -0,0 +1,87 @@
|
||||
import React from "react";
|
||||
import { IoMdContacts } from "react-icons/io";
|
||||
import { FaClock } from "react-icons/fa";
|
||||
import { FaMessage } from "react-icons/fa6";
|
||||
|
||||
const Testimonial = () => {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
|
||||
Benefits of online tutoring services with us
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row justify-center mt-8 h-auto">
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||
<IoMdContacts className=" text-4xl p-1 rounded-lg text-white bg-blue-600 " />
|
||||
|
||||
<h3 className="text-xl font-bold mb-2">One-on-One Mentoring</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
All of our special education experts have a degree in special
|
||||
education
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<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>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Our Mentors are always available to respond as quick as
|
||||
possible for you
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-full md:w-1/3 p-4">
|
||||
<div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
|
||||
<FaMessage className=" text-4xl p-2 rounded-lg text-white bg-orange-600 " />
|
||||
|
||||
<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.
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
@@ -0,0 +1,147 @@
|
||||
import React, { useRef } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { userSliceActions } from "../../store/userSlice";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const LoginPage = () => {
|
||||
const emailElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
event.preventDefault();
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
password: passwordElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const user = await responce.json();
|
||||
|
||||
//console.log("User Login Data is here : ", user);
|
||||
|
||||
dispatch(userSliceActions.addUser(user.data));
|
||||
|
||||
emailElement.current.value = "";
|
||||
passwordElement.current.value = "";
|
||||
|
||||
if (user.success == true) {
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<section className="bg-gray-100 font-sans h-[91vh] flex flex-col justify-center md:p-5">
|
||||
<div className="container mx-auto p-4 ">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center">
|
||||
<div className="flex flex-col items-center justify-center h-full relative">
|
||||
<img
|
||||
src="/images/background1.jpg"
|
||||
alt=""
|
||||
className="absolute order-3 w-full h-full"
|
||||
/>
|
||||
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
|
||||
Welcome Back!
|
||||
</h1>
|
||||
{/* <img src="/images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||
{/* <img
|
||||
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||
alt="Arrow"
|
||||
className="w-16 h-16 text-white"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-8 rounded-lg shadow-md h-full lg:p-36">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-4">Login</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Welcome back! Please login to your account.
|
||||
</p>
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="username"
|
||||
ref={emailElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="username@gmail.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={passwordElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="********"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember_me"
|
||||
type="checkbox"
|
||||
value=""
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
for="remember_me"
|
||||
className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
<Link
|
||||
to={"/user/forgetpassword"}
|
||||
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
||||
>
|
||||
Forget Password?
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<p className="text-gray-600 text-center mt-4">
|
||||
New User?{" "}
|
||||
<Link
|
||||
to={"/user/signup"}
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Signup
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import Navbar from "../../components/Navbar.jsx";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Container from "../../components/Container.jsx";
|
||||
|
||||
const MainLoginPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Container>
|
||||
<Outlet />
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainLoginPage;
|
||||
@@ -0,0 +1,233 @@
|
||||
import React, { useRef } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const SignupPage = () => {
|
||||
const firstNameElement = useRef();
|
||||
const lastNameElement = useRef();
|
||||
const emailElement = useRef();
|
||||
const roleElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleRegisteration = async (event) => {
|
||||
event.preventDefault();
|
||||
let userRole;
|
||||
if (roleElement.current.value == "Student") {
|
||||
userRole = "user";
|
||||
} else {
|
||||
userRole = "mentor";
|
||||
}
|
||||
const user = {
|
||||
name:
|
||||
firstNameElement.current.value + " " + lastNameElement.current.value,
|
||||
email: emailElement.current.value,
|
||||
password: passwordElement.current.value,
|
||||
role: userRole,
|
||||
};
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(user),
|
||||
credentials: "include",
|
||||
});
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("Our user data is : ", data);
|
||||
|
||||
firstNameElement.current.value = "";
|
||||
lastNameElement.current.value = "";
|
||||
emailElement.current.value = "";
|
||||
passwordElement.current.value = "";
|
||||
roleElement.current.value = "";
|
||||
|
||||
if (data.success == true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="bg-gray-100 font-sans h-[91vh] flex flex-col justify-center md:p-5 ">
|
||||
<div className="container mx-auto p-4 mt-64 sm:mt-32 md:mt-0">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center md:hidden">
|
||||
<div className="flex flex-col items-center justify-center h-full relative">
|
||||
<img
|
||||
src="/images/background1.jpg"
|
||||
alt=""
|
||||
className="absolute order-3 w-full h-full"
|
||||
/>
|
||||
<h1 className="text-6xl font-bold text-white mb-4 md:text-6xl lg:text-9xl relative ml-8">
|
||||
Welcome to MentorFlux!
|
||||
</h1>
|
||||
{/* <img src="./images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||
{/* <img
|
||||
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||
alt="Arrow"
|
||||
className="w-16 h-16 text-white"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white p-8 rounded-lg shadow-md h-full lg:p-16">
|
||||
<h1 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Register Your account
|
||||
</h1>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Welcome to MentorFlux. Please register your new account.
|
||||
</p>
|
||||
<form
|
||||
action="#"
|
||||
className="space-y-6"
|
||||
onSubmit={handleRegisteration}
|
||||
>
|
||||
<div className="flex flex-col gap-5 sm:flex-row">
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
ref={firstNameElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your First name here..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="LastName"
|
||||
ref={lastNameElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your Last name here..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
ref={emailElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Please Enter your Email here..."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label
|
||||
htmlFor="countries"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Select your Role
|
||||
</label>
|
||||
<select
|
||||
id="role"
|
||||
ref={roleElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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"
|
||||
>
|
||||
<option>Student</option>
|
||||
<option>Mentor</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={passwordElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Please enter password having at least 6 unique letters.. "
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
id="remember_me"
|
||||
type="checkbox"
|
||||
value=""
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember_me"
|
||||
className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
||||
>
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
|
||||
></a>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Register your Account
|
||||
</button>
|
||||
<p className="text-gray-600 text-center mt-4">
|
||||
Already have an Account ?{" "}
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div className="bg-gradient-to-br from-purple-300 to-pink-200 overflow-hidden rounded-lg shadow-md min-h-40 object-center hidden md:block">
|
||||
<div className="flex flex-col items-center justify-center h-full relative text-center">
|
||||
<img
|
||||
src="/images/background1.jpg"
|
||||
alt=""
|
||||
className="absolute order-3 w-full h-full"
|
||||
/>
|
||||
<h1 className="text-5xl font-bold text-white mb-4 md:text-5xl lg:text-8xl relative ml-8 text-center">
|
||||
Welcome to MentorFlux!
|
||||
</h1>
|
||||
{/* <img src="./images/background.jpg" alt="" className="absolute order-3"/> */}
|
||||
{/* <img
|
||||
src="https://cdn.pixabay.com/photo/2017/02/21/15/19/arrow-2074591_960_720.png"
|
||||
alt="Arrow"
|
||||
className="w-16 h-16 text-white"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignupPage;
|
||||
@@ -0,0 +1,77 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { IoIosKey } from "react-icons/io";
|
||||
import { Link } from "react-router-dom";
|
||||
import { FaArrowLeft } from "react-icons/fa6";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const ForgetPassword = () => {
|
||||
const emailElement = useRef();
|
||||
|
||||
const [status, setStatus] = useState(false);
|
||||
|
||||
const handleForgetPassword = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1//password/forgot`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
if (data.success === true) {
|
||||
setStatus(true);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||
<div className="">
|
||||
<div className="flex flex-col items-center gap-12">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<IoIosKey className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||
<h2 className="text-3xl font-bold font-sans">Forget Password?</h2>
|
||||
<p className="text-gray-500">
|
||||
No worries, we'll send you resent instructions.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
className="flex flex-col w-full gap-5"
|
||||
onSubmit={handleForgetPassword}
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="email"></label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
placeholder="Enter your email"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
ref={emailElement}
|
||||
/>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
{status === false ? "Send Email" : "Email Sent to your Mail"}
|
||||
</button>
|
||||
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgetPassword;
|
||||
@@ -0,0 +1,131 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { RiLockPasswordFill } from "react-icons/ri";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { FaArrowLeft } from "react-icons/fa6";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const ResetPassword = () => {
|
||||
const [secure, setSecure] = useState(true);
|
||||
|
||||
const newPassworElement = useRef();
|
||||
const confirmPassworElement = useRef();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { token } = useParams();
|
||||
|
||||
// console.log("So our Token is : ", token);
|
||||
|
||||
const handleResetPassword = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (
|
||||
confirmPassworElement.current.value !== newPassworElement.current.value
|
||||
) {
|
||||
setSecure(false);
|
||||
} else {
|
||||
const responce = await fetch(
|
||||
`${BACKEND_URL}/api/v1/password/reset/${token}`,
|
||||
{
|
||||
method: "PUT",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password: newPassworElement.current.value,
|
||||
confirmPassword: confirmPassworElement.current.value,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("Status of the Reset password", data);
|
||||
|
||||
if (data.success === true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-[78vh] flex justify-center items-center">
|
||||
<div className="">
|
||||
<div className="flex flex-col items-center gap-10">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<RiLockPasswordFill className="text-5xl bg-purple-200 p-2 rounded-full text-purple-500" />
|
||||
<h2 className="text-3xl font-bold font-sans">
|
||||
Create New Password
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
Create your new, unique and secure password here.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
className="flex flex-col w-full gap-5"
|
||||
onSubmit={handleResetPassword}
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="passwordNew"
|
||||
className="text-gray-500 font-semibold"
|
||||
>
|
||||
New Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordNew"
|
||||
ref={newPassworElement}
|
||||
placeholder="Enter your New Password"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="passwordConfirm"
|
||||
className="text-gray-500 font-semibold"
|
||||
>
|
||||
Confirm Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="passwordConfirm"
|
||||
ref={confirmPassworElement}
|
||||
placeholder="Enter your Confirm Password"
|
||||
className="w-full rounded-md border-gray-400 border-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={`text-red-800 text-sm underline w-96 text-center ${
|
||||
secure && "hidden"
|
||||
} `}
|
||||
>
|
||||
Password and confirm Password is not same.Please Enter new
|
||||
password and confirm Password same
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
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>
|
||||
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="text-center text-gray-600 inline-flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaArrowLeft className="text-lg" /> Back to Login Page
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPassword;
|
||||
@@ -0,0 +1,202 @@
|
||||
import React from "react";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
const FeedBackAndRatings = () => {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
export default FeedBackAndRatings
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
|
||||
const History = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div></>
|
||||
)
|
||||
}
|
||||
|
||||
export default History
|
||||
@@ -0,0 +1,261 @@
|
||||
import React from "react";
|
||||
import { Link, Outlet, useNavigate } from "react-router-dom";
|
||||
import { BsThreeDotsVertical } from "react-icons/bs";
|
||||
import { RiLogoutBoxLine } from "react-icons/ri";
|
||||
import { IoMdSettings } from "react-icons/io";
|
||||
import { FaHome } from "react-icons/fa";
|
||||
import { useSelector } from "react-redux";
|
||||
import { MdHistory } from "react-icons/md";
|
||||
import { IoIosNotifications } from "react-icons/io";
|
||||
import { MdFeedback } from "react-icons/md";
|
||||
import { MdOutlineSupportAgent } from "react-icons/md";
|
||||
import { IoSettings } from "react-icons/io5";
|
||||
import { RiCalendarScheduleLine } from "react-icons/ri";
|
||||
import { IoIosHome } from "react-icons/io";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const MainUserPanel = () => {
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
const user = useSelector((store) => store.user);
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto p-4 ">
|
||||
<div className="flex items-center mb-4 md:hidden">
|
||||
<img
|
||||
src={`${user.avatar}`}
|
||||
alt="Profile Picture"
|
||||
className="rounded-full w-10 h-10 mr-2"
|
||||
/>
|
||||
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||
</div>
|
||||
<div className="flex flex-row gap-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}`}
|
||||
alt="Profile Picture"
|
||||
className="rounded-full w-10 h-10 mr-2"
|
||||
/>
|
||||
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||
</div>
|
||||
<ul className="list-none">
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link to={"/user/dashboard"} className="flex items-center">
|
||||
<IoIosHome className="text-xl font-bold text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Dashboard
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/scheduledmeetings"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<RiCalendarScheduleLine className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Scheduled Meeting
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/history"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<MdHistory className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
History
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/notifications"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<IoIosNotifications className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Notifications
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/feedback"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<MdFeedback className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Feedback and Ratings
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/support"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<MdOutlineSupportAgent className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Support
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="py-2 border-b border-gray-200">
|
||||
<Link
|
||||
to={"/user/dashboard/settings"}
|
||||
className="flex items-center"
|
||||
>
|
||||
<IoSettings className="text-xl text-gray-700" />
|
||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
||||
Settings
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Outlet />
|
||||
<div className="hidden md:block w-3/12 bg-white rounded-lg shadow p-4 h-96">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium">My Profile</h3>
|
||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="flex text-sm 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"
|
||||
>
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<BsThreeDotsVertical className="text-lg" />
|
||||
</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"
|
||||
id="user-dropdown"
|
||||
>
|
||||
<div className="px-4 py-3">
|
||||
<span className="block text-sm text-gray-900 dark:text-white">
|
||||
Bonnie Green
|
||||
</span>
|
||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
name@flowbite.com
|
||||
</span>
|
||||
</div>
|
||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||
<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>
|
||||
<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"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</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>
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogOut}
|
||||
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 out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
data-collapse-toggle="navbar-user"
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<div class="mb-4">
|
||||
<img
|
||||
src={`${user.avatar}`}
|
||||
alt="Profile Picture"
|
||||
class="rounded-full w-24 h-24 mx-auto"
|
||||
/>
|
||||
<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 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 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 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
|
||||
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" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainUserPanel;
|
||||
@@ -0,0 +1,100 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const MentorSessionCard = ({ session }) => {
|
||||
const {
|
||||
id,
|
||||
mentorName,
|
||||
mentorMail,
|
||||
mentorAvatar,
|
||||
studentName,
|
||||
studentMail,
|
||||
studentAvatar,
|
||||
roomid,
|
||||
schduledTime,
|
||||
createdAt,
|
||||
updatedAt,
|
||||
amountPaid,
|
||||
status,
|
||||
} = session;
|
||||
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
//console.log("User in the Dashborde : ");
|
||||
|
||||
let timeStringToDayName = (dateStr) => {
|
||||
// for getting day name by time string
|
||||
// const dateStr = "2024-09-26T04:31:50.646+00:00";
|
||||
const date = new Date(dateStr);
|
||||
const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
|
||||
//console.log(dayName);
|
||||
return dayName;
|
||||
};
|
||||
|
||||
let timeStringtoRealTime = (utcDateStr) => {
|
||||
// for converting the to get time in am or pm
|
||||
//const utcDateStr = "2024-09-26T04:31:50.646+00:00";
|
||||
const date = new Date(utcDateStr);
|
||||
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||
const options = {
|
||||
timeZone: "Asia/Kolkata",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
second: "numeric",
|
||||
hour12: true,
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
|
||||
const istDate = date.toLocaleString("en-US", options);
|
||||
console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||
return istDate;
|
||||
};
|
||||
|
||||
const realTimeString = timeStringtoRealTime(schduledTime);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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 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>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MentorSessionCard;
|
||||
@@ -0,0 +1,120 @@
|
||||
import React from "react";
|
||||
import Notification from "../../components/Notification";
|
||||
|
||||
const Notifications = () => {
|
||||
let notifications = [
|
||||
{
|
||||
id: 1,
|
||||
type: "success",
|
||||
message: "Your profile has been updated successfully.",
|
||||
timestamp: "2024-09-26T10:00:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: "warning",
|
||||
message: "Your subscription is about to expire in 3 days.",
|
||||
timestamp: "2024-09-25T09:30:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: "info",
|
||||
message: "New mentor has joined your network.",
|
||||
timestamp: "2024-09-24T15:45:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
type: "error",
|
||||
message: "Failed to connect to the video call. Please try again.",
|
||||
timestamp: "2024-09-26T08:20:00Z",
|
||||
isRead: false,
|
||||
},
|
||||
];
|
||||
|
||||
// for getting day name by time string
|
||||
// const dateStr = '2024-09-26T04:31:50.646+00:00';
|
||||
// const date = new Date(dateStr);
|
||||
// const dayName = date.toLocaleDateString('en-US', { weekday: 'long' });
|
||||
// console.log(dayName); // Output: "Thursday"
|
||||
|
||||
// for converting the to get time in am or pm
|
||||
// const utcDateStr = '2024-09-26T04:31:50.646+00:00';
|
||||
// const date = new Date(utcDateStr);
|
||||
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||
// const options = {
|
||||
// timeZone: 'Asia/Kolkata',
|
||||
// hour: 'numeric',
|
||||
// minute: 'numeric',
|
||||
// second: 'numeric',
|
||||
// hour12: true,
|
||||
// year: 'numeric',
|
||||
// month: 'long',
|
||||
// day: 'numeric'
|
||||
// };
|
||||
|
||||
// const istDate = date.toLocaleString('en-US', options);
|
||||
// console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-col w-full gap-2">
|
||||
{notifications.map((notification) => (
|
||||
<Notification key={notification.id} notification={notification} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
@@ -0,0 +1,131 @@
|
||||
import React from "react";
|
||||
import MentorSessionCard from "./MentorSessionCard";
|
||||
|
||||
const ScheduleMeeting = () => {
|
||||
let meetingInfo = [
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
id: "7K6dU5qLpF9tS4",
|
||||
mentorName: "mentor",
|
||||
mentorMail: "mentor4@gmail.com",
|
||||
mentorAvatar: "/images/profile4.jpeg",
|
||||
studentName: "student",
|
||||
studentMail: "student4@gmail.com",
|
||||
studentAvatar: "/images/profile4.jpeg",
|
||||
roomid: "F7mT9rV5uP3sL2K7cJ8xH4zG1yW5aQ9nD2o",
|
||||
schduledTime: "2024-09-29T11:20:40.456+00:00",
|
||||
createdAt: "2024-09-29T11:20:40.456+00:00",
|
||||
updatedAt: "2024-09-29T11:20:40.456+00:00",
|
||||
amountPaid: "550",
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Scheduled Meetings
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-5">
|
||||
{meetingInfo.map((session) => (
|
||||
<MentorSessionCard session={session} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScheduleMeeting;
|
||||
@@ -0,0 +1,273 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { loaderSliceActions } from "../../store/loaderSlice";
|
||||
import { userSliceActions } from "../../store/userSlice";
|
||||
import { BACKEND_URL } from "../../constants";
|
||||
|
||||
const Settings = () => {
|
||||
const nameElement = useRef();
|
||||
const emailElement = useRef();
|
||||
const passwordElement = useRef();
|
||||
const confirmPassElement = useRef();
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
const [avatar, setAvatar] = useState();
|
||||
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
const loader = useSelector((store) => store.loader);
|
||||
|
||||
//console.log("Before the user is : ", user);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// Optimise the call for the database here you are refreshing the page again and again which makes read and write operation
|
||||
const handleAvatar = async (event) => {
|
||||
event.preventDefault();
|
||||
formData.append("avatar", avatar);
|
||||
|
||||
//console.log("forma daata is : ", formData);
|
||||
|
||||
if (avatar) {
|
||||
dispatch(loaderSliceActions.showLoader());
|
||||
//console.log("The loader values is : ", loader);
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/user/avatar`, {
|
||||
method: "PUT",
|
||||
credentials: "include",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const finalResponce = await responce.json();
|
||||
|
||||
//console.log("Our final responce is : ", finalResponce);
|
||||
|
||||
if (finalResponce.success) {
|
||||
dispatch(loaderSliceActions.hideLoader());
|
||||
//console.log("The loader values is : ", loader);
|
||||
dispatch(userSliceActions.addUser(finalResponce.data));
|
||||
// console.log("Updated User is : ", user);
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogin = async (event) => {
|
||||
event.preventDefault();
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/login`, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email: emailElement.current.value,
|
||||
password: passwordElement.current.value,
|
||||
}),
|
||||
});
|
||||
|
||||
const user = await responce.json();
|
||||
|
||||
//console.log("User Login Data is here : ", user);
|
||||
|
||||
dispatch(userSliceActions.addUser(user.data));
|
||||
|
||||
emailElement.current.value = "";
|
||||
passwordElement.current.value = "";
|
||||
|
||||
if (user.success == true) {
|
||||
navigate("/");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
<div className="w-full bg-white rounded-lg shadow p-4 min-h-[85vh]">
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Avatar
|
||||
</h2>
|
||||
|
||||
<div className="w-full h-auto flex items-center justify-center py-7">
|
||||
<div className="w-[9rem] h-[9rem] overflow-hidden rounded-full object-center">
|
||||
<img src={`${user.avatar}`} alt="Avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleAvatar}>
|
||||
<div class="flex items-center justify-center w-full">
|
||||
<img src={formData.avatar && `${formData.avatar}`} alt="" />
|
||||
<label
|
||||
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 class="flex flex-col items-center justify-center pt-5 pb-6 ">
|
||||
<svg
|
||||
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"
|
||||
viewBox="0 0 20 16"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
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 class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{avatar ? (
|
||||
<span class="font-semibold">
|
||||
Avatar uploaded successfulky
|
||||
</span>
|
||||
) : (
|
||||
<span class="font-semibold">
|
||||
Click to upload and press Upload button
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
SVG, PNG, JPG or GIF (MAX. 800x400px)
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-gray-600 px-4 py-1 rounded-lg text-white font-semibold my-4"
|
||||
>
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
id="dropzone-file"
|
||||
type="file"
|
||||
class="hidden"
|
||||
onChange={(e) => {
|
||||
setAvatar(e.target.files[0]);
|
||||
//console.log(e.target.files[0]);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col justify-center items-center mb-4">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Details
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Name :
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="password"
|
||||
ref={nameElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your Updated Name here.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Email :
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="username"
|
||||
ref={emailElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your Updated Email here.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={passwordElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="********"
|
||||
required
|
||||
/>
|
||||
</div> */}
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Change the Details
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="flex flex-col justify-center items-center my-10">
|
||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
||||
Update Your Password
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
New Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={passwordElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your New Password to update.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
Confirm Password :
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
ref={confirmPassElement}
|
||||
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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="Enter your New Password to update.."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-center items-center">
|
||||
<button
|
||||
type="submit"
|
||||
className="text-white bg-purple-500 hover:bg-purple-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||
>
|
||||
Change the Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const Support = () => {
|
||||
return (
|
||||
<>
|
||||
<div className=""></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Support;
|
||||
Reference in New Issue
Block a user