From 47349c7e809d19855a026967068d9912ac40f0a1 Mon Sep 17 00:00:00 2001
From: shourya <shourya26rathore@gmail.com>
Date: Mon, 2 Oct 2023 15:53:01 +0530
Subject: [PATCH] "Landing and fields responsive"

---
 components/Fields.jsx  | 26 +++++++++++++-------------
 components/Landing.jsx |  4 ++--
 components/Navbar.jsx  |  2 +-
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/components/Fields.jsx b/components/Fields.jsx
index b4ccdbc..1026475 100644
--- a/components/Fields.jsx
+++ b/components/Fields.jsx
@@ -3,12 +3,12 @@ import Image from "next/image";
 
 function Fields() {
   return (
-    <div className="p-20 relative mx-auto">
-      <p className="text-6xl font-semibold text-center">FIELDS WE WORK IN</p>
+    <div className="md:px-5 w-[95%] lg:w-[90%] relative mx-auto lg:mt-20 md:mt-[100px]">
+      <p className="text-2xl     font-semibold text-center">FIELDS WE  WORK IN</p>
       {/* Web Development */}
-      <div className="grid grid-cols-2 items-center py-5">
-        <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">Development</p>
+      <div className="grid grid-cols-2 mx-auto  grid-col my-5  gap-5 md:grid-cols-1 items-center py-5">
+        <div className="w-10/12 ">
+          <p className="font-semibold text-6xl  md:text-xl lg:mb-5">Development</p>
           <p>
             Development is the process of creating and maintaining software and
             computer programs. Dev encompasses everything from coding, to
@@ -16,18 +16,18 @@ function Fields() {
             most popular &quot;developer&quot; communities
           </p>
         </div>
-        <div>
+        <div className="mx-auto">
           <Image src="/webdev-image.png" width={400} height={400} alt="" />
         </div>
       </div>
 
       {/* DSA AND CP */}
-      <div className="grid grid-cols-2 items-center py-5 bg-gray-100">
-        <div>
+      <div className="grid grid-cols-2 gap-4 my-5  md:grid-cols-1 md:p-2 items-center py-5 bg-gray-100">
+        <div className="md:mx-auto">
           <Image src="/dsacp-image.png" width={400} height={400} alt="" />
         </div>
-        <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">DSA And CP</p>
+        <div className="w-10/12 ">
+          <p className="font-semibold md:text-xl text-6xl lg:mb-5">DSA And CP</p>
           <p>
             DSA (Data Structures and Algorithms) is the study of organizing and
             manipulating data efficiently to perform complex computations
@@ -39,9 +39,9 @@ function Fields() {
       </div>
 
       {/* Machine Learning */}
-      <div className="grid grid-cols-2 items-center py-5">
+      <div className="grid grid-cols-2 md:grid-cols-1 gap-5  items-center py-5">
         <div className="w-10/12">
-          <p className="font-semibold text-6xl mb-5">Machine Learning</p>
+          <p className="font-semibold text-6xl md:text-xl lg:mb-5">Machine Learning</p>
           <p>
             Machine learning is a sub domain of artificial intelligence that
             lets computers learn from data and make predictions or decisions for
@@ -51,7 +51,7 @@ function Fields() {
             bioinformatics.
           </p>
         </div>
-        <div>
+        <div className="mx-auto">
           <Image src="/ml-image.png" width={400} height={400} alt="" />
         </div>
       </div>
diff --git a/components/Landing.jsx b/components/Landing.jsx
index 6516158..7dc8947 100644
--- a/components/Landing.jsx
+++ b/components/Landing.jsx
@@ -3,12 +3,12 @@ import { Player } from "@lottiefiles/react-lottie-player";
 
 function Landing() {
   return (
-    <div className="px-20 h-[90vh] flex justify-center items-center">
+    <div className=" mt-5 w-[95%] mx-auto h-[100%] flex justify-center items-center">
       
       {/* Landing text */}
       <div className="flex justify-center items-center">
         <div className="w-4/5 flex justify-center flex-col">
-          <p className="font-semibold text-5xl mb-10 leading-[4.8rem]">
+          <p className="font-semibold text-5xl md:text-3xl mb-10 md:mb-5 leading-[4.8rem] ">
             DEVELOPER STUDENT CLUBS <br />{" "}
             <strong className="font-bold">
               <span className="text-red-400">Ja</span>
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 2723236..3af3977 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -10,7 +10,7 @@ const Navbar = () => {
       </Link>
 
       {/* Nav Links */}
-      <div className="flex justify-between items-center w-1/3">
+      <div className="flex justify-between items-center w-1/3 md:hidden">
         <Link href="/events">
           <p className="text-2xl hover:text-gray-400 text-red-400">Events</p>
         </Link>