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

Merged Bhakti's changes with Ombase's changes in frontend testing branch

Browse Source
This commit is contained in:
K
2025-02-23 03:08:19 +05:30
parent 82f457406a f41d33625f
commit 928c3fbb12
18 changed files with 491 additions and 5799 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/index.html
+2 -2
View File
@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image" href="/images/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>Crop Compass</title>
<link
href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
rel="stylesheet"
Frontend/package-lock.json
Generated
-5598
View File
File diff suppressed because it is too large Load Diff
Frontend/package.json
+5
View File
@@ -12,12 +12,17 @@
"dependencies": {
"@reduxjs/toolkit": "^2.2.7",
"flowbite": "^2.5.1",
"@splinetool/react-spline": "^4.0.0",
"flowbite": "^2.5.1",
"framer-motion": "^12.4.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.15.1",
"react-player": "^2.16.0",
"react-redux": "^9.1.2",
"react-router-dom": "^6.26.1",
"react-typewriter-effect": "^1.1.0",
"socket.io-client": "^4.7.5"
},
"devDependencies": {
Frontend/public/images/agriculture.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

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

After

Width:  |  Height:  |  Size: 1.1 MiB

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

After

Width:  |  Height:  |  Size: 55 KiB

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

After

Width:  |  Height:  |  Size: 58 KiB

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

After

Width:  |  Height:  |  Size: 31 KiB

Frontend/src/App.jsx
+3 -2
View File
@@ -1,6 +1,7 @@
import { useDispatch, useSelector } from "react-redux";
import "./App.css";
import Navbar from "./components/Navbar";
//import Navbar from "./components/Navbar";
import Navbar2 from "./components/Navbar2";
import { useEffect } from "react";
import { userSliceActions } from "./store/userSlice";
@@ -36,7 +37,7 @@ function App() {
return (
<>
<div className="w-full h-auto flex-col relative">
<Navbar />
<Navbar2 />
<Outlet />
<div
className={`${
Frontend/src/components/Navbar.jsx
+11 -11
View File
@@ -26,25 +26,25 @@ const Navbar = () => {
};
return (
<>
<nav className="bg-white border-gray-200 dark:bg-gray-900">
<nav className="bg-[#3D8D7A] dark:bg-gray-900">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
src="/images/logo.jpg"
className="h-9 rounded-full"
alt="Flowbite Logo"
src="/images/logo.png"
className="size-12 mr-2 "
alt="Logo"
/>
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
MentorFlux
<span className="self-center text-4xl font-bold whitespace-nowrap dark:text-white">
Crop Compass
</span>
</a>
<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 bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
className="flex text-sm bg-white rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
id="user-menu-button"
aria-expanded="false"
data-dropdown-toggle="user-dropdown"
@@ -52,7 +52,7 @@ const Navbar = () => {
>
<span className="sr-only">Open user menu</span>
<img
className="w-8 h-8 rounded-full"
className="size-9 rounded-full"
src={`${user?.avatar}`}
alt="user photo"
/>
@@ -116,7 +116,7 @@ const Navbar = () => {
<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"
className="block px-4 py-2 text-sm text-[#FBFFE4] hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
>
Sign out
</a>
@@ -153,11 +153,11 @@ const Navbar = () => {
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-user"
>
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<ul className="flex text-xl flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-[#A3D1C6] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[#3D8D7A] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<Link
to={"/"}
className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
className="block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
aria-current="page"
>
Home
Frontend/src/components/Navbar2.jsx
+100
View File
@@ -0,0 +1,100 @@
const Navbar2 = () => {
return (
<div className=" flex justify-center rounded-full">
<nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
<div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
<div className="relative h-full flex items-center justify-between p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
src="/images/logo.png"
className="size-10"
alt="Logo"
/>
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
Crop Compass
</span>
</a>
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button
type="button"
className="text-black bg-white hover:bg-purple-200 focus:ring-4 focus:outline-none focus:ring-black-300 font-medium rounded-full text-sm py-2 px-4 text-center"
>
Get started
</button>
<button
data-collapse-toggle="navbar-sticky"
type="button"
className="inline-flex items-center p-2 w-10 h-10 mt-2 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-purple-400 dark:focus:ring-gray-600"
aria-controls="navbar-sticky"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
</div>
<div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky"
>
<ul className="flex flex-col p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-transparent font-bold">
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm md:bg-transparent md:text-gray-50 md:p-0 md:dark:text-gray-50"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent "
>
About
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-100 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Services
</a>
</li>
<li>
<a
href="#"
className="block py-2 px-3 text-gray-50 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:hover:text-gray-50 md:p-0 md:dark:hover:text-gray-50 dark:text-white dark:hover:bg-purple-400 dark:hover:text-white md:dark:hover:bg-transparent `0"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
};
export default Navbar2;
Frontend/src/pages/Home/Cards.jsx
+111
View File
@@ -0,0 +1,111 @@
import React from "react";
export const HeroSecn = () =>{
return(
<section className=" py-40 w-full flex justify-center text-gray-100">
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
<div className="container mx-auto flex flex-col justify-between h-full w-full">
<div className="text-center md:text-start flex flex-col justify-around h-full">
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
Anything and Everything you Need to know About
</h1>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div>
</div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
</div>
</div>
</section>
)
}
export const CardWithImage = () => {
return (
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
</a>
<div class="p-6 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Excellent Dashboards</h5>
</a>
<p class="mb-3 font-normal text-white dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</div>
)
}
export const CardOnlyText = () => {
return(
<div>
<a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
</div>
)
}
export const CardWithButton = () => {
return(
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
)
}
export const CardWithOnlyImage = () => {
return(
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class=" rounded-lg" src="/images/plant.png" alt="product image" />
</a>
</div>
)
}
const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
export default cards;
export const CardLayout = () => {
return(
<div>
<HeroSecn />
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<cardWithImage />
<div className="flex flex-col gap-10 justify-between ">
<cardOnlyText />
<cardWithButton />
</div>
<div className=" flex flex-col justify-between">
<cardWithOnlyImage />
<cardOnlyText />
</div>
</div>
</div>
</div>
)
}
Frontend/src/pages/Home/Footer.jsx
+20 -20
View File
@@ -3,27 +3,27 @@ import React from "react";
const Footer = () => {
return (
<>
<footer className="bg-white dark:bg-gray-900">
<footer className=" text-gray-50">
<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">
<a href="/" class="flex items-center gap-2">
<img
src="/images/logo.jpg"
src="/images/logo.png"
className="h-9 rounded-full"
alt="Flowbite Logo"
alt="Logo"
/>
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
MentorFlux
Crop Compass
</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">
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
Resources
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<ul className="text-gray-50 dark:text-gray-400 font-medium">
<li className="mb-4">
<a href="https://flowbite.com/" class="hover:underline">
Flowbite
@@ -37,10 +37,10 @@ const Footer = () => {
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
Follow us
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<ul className="text-gray-50 dark:text-gray-400 font-medium">
<li className="mb-4">
<a
href="https://github.com/themesberg/flowbite"
@@ -60,10 +60,10 @@ const Footer = () => {
</ul>
</div>
<div>
<h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
<h2 className="mb-6 text-sm font-semibold text-gray-50 uppercase dark:text-white">
Legal
</h2>
<ul className="text-gray-500 dark:text-gray-400 font-medium">
<ul className="text-gray-50 dark:text-gray-400 font-medium">
<li className="mb-4">
<a href="#" className="hover:underline">
Privacy Policy
@@ -78,19 +78,19 @@ const Footer = () => {
</div>
</div>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<hr className="my-6 border-gray-50 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">
<span className="text-sm text-gray-50 sm:text-center dark:text-gray-400">
© 2024{" "}
<a href="https://flowbite.com/" class="hover:underline">
MentorFlux™
<a href="/" class="hover:underline">
Crop Compass™
</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"
className="text-gray-50 hover:text-gray-900 dark:hover:text-white"
>
<svg
className="w-4 h-4"
@@ -109,7 +109,7 @@ const Footer = () => {
</a>
<a
href="#"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
>
<svg
className="w-4 h-4"
@@ -124,7 +124,7 @@ const Footer = () => {
</a>
<a
href="#"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
>
<svg
className="w-4 h-4"
@@ -143,7 +143,7 @@ const Footer = () => {
</a>
<a
href="#"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
>
<svg
className="w-4 h-4"
@@ -162,7 +162,7 @@ const Footer = () => {
</a>
<a
href="#"
className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
className="text-gray-50 hover:text-gray-900 dark:hover:text-white ms-5"
>
<svg
className="w-4 h-4"
Frontend/src/pages/Home/Hero.jsx
+76 -92
View File
@@ -4,111 +4,90 @@ import { Link } from "react-router-dom";
const Hero = () => {
return (
<>
<section className="bg-white py-12 w-full flex justify-center">
<section className=" py-12 w-full flex justify-center pt-28 text-gray-100">
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
<div className="container mx-auto flex flex-col justify-between h-full w-full">
<div className="text-center md:text-start flex flex-col 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
<div className="text-center md:text-start flex flex-col justify-around h-full">
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
Anything and Everything you Need to know About
</h1>
<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 className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div>
</div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img src="/images/student.png" className="w-full h-auto" alt="" />
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
</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 className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="/images/plant.png" alt="plant" />
</a>
<div class="p-8 backdrop-blur-md rounded-b-lg">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-white dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</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 className="flex flex-col gap-10 justify-between ">
<div>
<a href="#" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
</div>
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
Read more
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</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 className=" flex flex-col justify-between">
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class=" rounded-lg" src="/images/plant.png" alt="product image" />
</a>
</div>
<div>
<a href="#" class="block max-w-sm p-6 backdrop-blur-xl rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-50 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</a>
</div>
</div>
</div>
</div>
</>
@@ -116,3 +95,8 @@ const Hero = () => {
};
export default Hero;
// {grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2}
Frontend/src/pages/Home/Hero2.jsx
+58
View File
@@ -0,0 +1,58 @@
import React from 'react'
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
const ScrollReveal = ({ children, direction = "left" }) => {
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
const variants = {
left: { opacity: 0, x: -100 },
right: { opacity: 0, x: 100 },
up: { opacity: 0, y: 100 },
down: { opacity: 0, y: -100 },
};
return (
<motion.div
ref={ref}
initial={variants[direction]}
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
transition={{ duration: 1.2, ease: "easeOut" }}
>
{children}
</motion.div>
);
};
function Hero2() {
const myRef = document.querySelector('.scrollable-div')
return (
<div>
<ScrollReveal direction='up'>
<HeroSecn />
</ScrollReveal>
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<ScrollReveal direction='up'>
<CardWithImage />
</ScrollReveal>
<div className="flex flex-col gap-10 justify-between ">
<ScrollReveal direction='up' > <CardOnlyText /> </ScrollReveal>
<ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
</div>
<div className=" flex flex-col justify-between">
<ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
<ScrollReveal direction='up'> <CardOnlyText /> </ScrollReveal>
</div>
</div>
</div>
</div>
)
}
export default Hero2
Frontend/src/pages/Home/HomePage.jsx
+6 -11
View File
@@ -2,22 +2,17 @@ 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 Hero2 from "./Hero2";
import Footer from "./Footer";
const HomePage = () => {
return (
<>
<Hero />
<Testimonial />
<About />
<Customization />
<SubjectSection />
<ReviewSection />
<Footer />
<div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
<Hero2 />
<Testimonial />
<Footer />
</div>
</>
);
};
Frontend/src/pages/Home/Testimonial.jsx
+99 -62
View File
@@ -2,81 +2,118 @@ import React from "react";
import { IoMdContacts } from "react-icons/io";
import { FaClock } from "react-icons/fa";
import { FaMessage } from "react-icons/fa6";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import TypeWriterEffect from "react-typewriter-effect";
import cards from "./Cards";
const ScrollReveal = ({ children, direction = "left" }) => {
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
const variants = {
left: { opacity: 0, x: -100 },
right: { opacity: 0, x: 100 },
up: { opacity: 0, y: 100 },
down: { opacity: 0, y: -100 },
};
return (
<motion.div
ref={ref}
initial={variants[direction]}
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
transition={{ duration: 1.2, ease: "easeOut" }}
>
{children}
</motion.div>
);
};
const Testimonial = () => {
const myRef = document.querySelector('.scrollable-div')
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>
<section className=" py-12 px-2 md:px-32 text-white">
<div className="container mx-auto ">
<div className="text-center flex-col justify-center align-middle ">
<ScrollReveal direction="up">
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
</ScrollReveal>
<ScrollReveal direction="up">
<h1 className="text-3xl text-center sm:text-6xl text-white drop-shadow-[10px_10px_10px_rgba(0,0,0,0.25)] font-bold mb-4">
<TypeWriterEffect
width="230"
trackWidth="13"
scrollArea={myRef}
startDelay={100}
cursorColor="white"
text="Record breaking features like never before!"
typeSpeed={100}
/>
</h1>
</ScrollReveal>
</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 className="flex flex-col sm:flex-row justify-around mt-8 h-auto">
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
</svg>
<a href="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
See our guideline
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
</a>
</div>
</div>
</ScrollReveal>
<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>
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
</svg>
<a href="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
See our guideline
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
</a>
</div>
</div>
</ScrollReveal>
<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>
<ScrollReveal direction="up">
<div class="max-w-sm p-6 backdrop-blur-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
</svg>
<a href="#">
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
See our guideline
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
</svg>
</a>
</div>
</div>
</ScrollReveal>
{/* <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>