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

converting all parts to glassmorphism

Browse Source
This commit is contained in:
Bhakti
2025-02-22 18:42:03 +05:30
parent 355f13b33d
commit d5086e21ae
5 changed files with 60 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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/pages/Home/Footer.jsx
+1 -1
View File
@@ -3,7 +3,7 @@ import React from "react";
const Footer = () => {
return (
<>
<footer className="bg-white dark:bg-gray-900">
<footer className=" 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">
Frontend/src/pages/Home/Hero.jsx
+4 -4
View File
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
const Hero = () => {
return (
<>
<section className="bg-[#FBFFE4] 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 justify-around h-full">
@@ -23,7 +23,7 @@ const Hero = () => {
</section>
<div className=" flex justify-center bg-[#FBFFE4]">
<div className=" flex justify-center">
<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">
@@ -47,7 +47,7 @@ const Hero = () => {
<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">
<a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#A3D1C6] 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>
@@ -80,7 +80,7 @@ const Hero = () => {
<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">
<a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-gray-100 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>
Frontend/src/pages/Home/HomePage.jsx
+5 -7
View File
@@ -11,13 +11,11 @@ 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">
<Hero />
<Testimonial />
<Footer />
</div>
</>
);
};
Frontend/src/pages/Home/Testimonial.jsx
+47 -58
View File
@@ -6,77 +6,66 @@ import { FaMessage } from "react-icons/fa6";
const Testimonial = () => {
return (
<>
<section className="bg-[#FBFFE4] py-12 px-2 md:px-32">
<section className=" py-12 px-2 md:px-32">
<div className="container mx-auto">
<div className="text-center">
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
<h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US?</h2>
<h1 className="text-3xl sm:text-6xl font-bold mb-4">
Benefits of online tutoring services with us
Record breaking features like never before
</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-[#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>
<p className="text-gray-600 text-sm">
All of our special education experts have a degree in special
education
</p>
</div>
<div class="max-w-sm p-6 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-500 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-900 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-500 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 className="w-full h-full md:w-1/3 p-4">
<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>
<p className="text-gray-600 text-sm">
Our Mentors are always available to respond as quick as
possible for you
</p>
</div>
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-500 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-900 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-500 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 className="w-full h-full md:w-1/3 p-4">
<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>
<p className="text-gray-600 text-sm">
Our digital messaging with audio and video chat features give interactiveness.
</p>
</div>
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
<svg class="w-7 h-7 text-gray-500 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-900 dark:text-white">Need a help in Claim?</h5>
</a>
<p class="mb-3 font-normal text-gray-500 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 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>