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

changed website's name in index.html, working on landing page

Browse Source
This commit is contained in:
Bhakti
2025-02-22 17:34:21 +05:30
parent 8db0eeba9a
commit 68f3efc128
4 changed files with 93 additions and 109 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/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/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="bg-[#FBFFE4] 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
<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 bg-[#FBFFE4]">
<div className=" flex justify-between py-8 w-5/6 ">
<div class="max-w-sm bg-white border border-gray-200 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 bg-[#A3D1C6] 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 items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
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 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#8cc0b4] 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-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700 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 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 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 items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
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 border border-gray-200 rounded-lg shadow-md 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 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#8cc0b4] 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-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="font-normal text-gray-700 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/Testimonial.jsx
+4 -4
View File
@@ -6,7 +6,7 @@ import { FaMessage } from "react-icons/fa6";
const Testimonial = () => {
return (
<>
<section className="bg-gray-100 py-12 px-2 md:px-32">
<section className="bg-[#FBFFE4] 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>
@@ -16,7 +16,7 @@ const Testimonial = () => {
</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">
<div className="bg-[#B3D8A8] 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>
@@ -28,7 +28,7 @@ const Testimonial = () => {
</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">
<div className="bg-[#B3D8A8] 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>
@@ -40,7 +40,7 @@ const Testimonial = () => {
</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">
<div className="bg-[#B3D8A8] 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>