added responsiveness

Krishna100604 · Oct 2, 2024 · 06dca44 · 06dca44
1 parent 930d33f
commit 06dca44
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 23 deletions.
diff --git a/Client/src/App.jsx b/Client/src/App.jsx
@@ -6,7 +6,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import Navbar from "./Components/Navbar";
-import MainContent from "./Components/Home/MainContent";
+import MainContent from "./Components/Home/HomeSections/MainContent";
 import Footer from "./Components/Footer";
 import Dashboard from "./Components/Dashboard/Dashboard";
 import Login from "./Components/Auth/Login";

diff --git a/Client/src/Components/Home/HomeSections/About.jsx b/Client/src/Components/Home/HomeSections/About.jsx
@@ -15,7 +15,7 @@ const About = () => {
 
   return (
     <>
-      <div className="bg-[#f1cffe] h-screen px-10 py-5 flex items-center justify-between">
+      <div className="bg-[#f1cffe] lg:h-screen px-10 py-5 flex items-center justify-between">
         <div className="md:w-1/2">
           {loading ? (
             <ContentSkeleton />
@@ -28,7 +28,7 @@ const About = () => {
                 </span>
                 online education
               </h1>
-              <p>
+              <p className=" text-xs md:text-sm">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                 Molestiae, quasi sint et accusamus labore nulla reiciendis
                 maxime possimus ratione alias totam deleniti eius optio tempore

diff --git a/Client/src/Components/Home/HomeSections/Courses.jsx b/Client/src/Components/Home/HomeSections/Courses.jsx
@@ -41,7 +41,7 @@ const Courses = () => {
   ];
 
   return (
-    <div className="bg-yellow-100 h-screen p-10  items-center justify-between ">
+    <div className="bg-yellow-100 lg:h-screen p-10  items-center justify-between ">
       <div className=" ">
         {loading ? (
           <ContentSkeleton />

diff --git a/Client/src/Components/Home/HomeSections/Features.jsx b/Client/src/Components/Home/HomeSections/Features.jsx
@@ -24,7 +24,7 @@ const Features = () => {
   ];
   return (
     <div>
-      <div className="bg-[#f5ffee] h-screen p-10  items-center ">
+      <div className="bg-[#f5ffee] lg:h-screen p-10  items-center ">
         <div className="flex ">
           {loading ? (
             <ContentSkeleton width={800} height={50} />
@@ -36,7 +36,7 @@ const Features = () => {
                 </h2>
               </div>
               <div className="w-2/4">
-                <p className="text-sm mb-5">
+                <p className=" text-xs md:text-sm mb-5">
                   With Eduverse, you can earn points, unlock achievements, and
                   compete with friends as you explore a vast array of learning
                   materials tailored to your needs. Whether you're looking to

diff --git a/Client/src/Components/Home/MainContent.jsx → ...ponents/Home/HomeSections/MainContent.jsx b/Client/src/Components/Home/MainContent.jsx → ...ponents/Home/HomeSections/MainContent.jsx
@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from "react";
-import Navbar from "../Navbar";
-import Chatbot from "./chatbot";
-import homeImg from "../../images/home/home-5.png";
-import Button from "../ReusableComponents/Button";
+import Navbar from "./../../Navbar";
+import Chatbot from "../chatbot";
+import homeImg from "../../../images/home/home-5.png";
+import Button from "../../ReusableComponents/Button";
 import { useNavigate } from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
-import About from "./HomeSections/About";
-import Features from "./HomeSections/Features";
-import Courses from "./HomeSections/Courses";
-import Testimonial from "./HomeSections/Testimonial";
-import ContentSkeleton from "../Loading/Skeleton/ContentSkeleton";
-import ImageSkeleton from "../Loading/Skeleton/ImageSkeleton";
+import About from "./About";
+import Features from "./Features";
+import Courses from "./Courses";
+import Testimonial from "./Testimonial";
+import ContentSkeleton from "../../Loading/Skeleton/ContentSkeleton";
+import ImageSkeleton from "../../Loading/Skeleton/ImageSkeleton";
 
 const MainContent = () => {
   const [loading, setLoading] = useState(true);
@@ -39,23 +39,24 @@ const MainContent = () => {
       <Navbar />
 
       {/* Welcome Section */}
-      <div className="bg-[#f5ffee] justify-center items-center w-full h-1/4 lg:h-screen flex flex-col md:flex-row">
-        <div className="hidden sm:block md:w-1/2">
+      <div className="bg-[#f5ffee] justify-center items-center w-full h-2/4 lg:h-screen flex flex-col md:flex-row">
+        <div className=" sm:block md:w-1/2">
           {loading ? <ImageSkeleton /> : <img src={homeImg} alt="Home" />}
         </div>
-        <div className="md:w-1/2 p-5">
+        <div className="md:w-1/2 p-5 mt-10">
           {loading ? (
             <ContentSkeleton width={500} height={50} />
           ) : (
             <>
-              <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl font-bold leading-tight mb-4 sm:mb-5">
+              <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold  mb-4 sm:mb-5">
                 Develop
-                <span className="bg-[#1da8e2] text-white rounded-full px-2 sm:px-3 lg:px-4 mx-1">
+                <span className="bg-[#1da8e2] text-white rounded-full px-2 sm:px-3 lg:px-4 mx-1 ">
                   skills
                 </span>
-                from the best source
+                <br />
+                <div className="mt-2"> from the best source</div>
               </h1>
-              <p className="my-3 text-sm">
+              <p className="my-3 text-xs md:text-sm">
                 Our platform transforms traditional learning into an engaging
                 and rewarding experience by combining the best educational
                 content with innovative gamification techniques.