From a35cf7532656b75849c37c428aeda3c33cf31cb9 Mon Sep 17 00:00:00 2001
From: Anmol-Baranwal <74038190+Anmol-Baranwal@users.noreply.github.com>
Date: Thu, 3 Aug 2023 16:06:29 +0530
Subject: [PATCH] chore: update styling of homepage on small devices

---
 components/Footer.tsx         | 12 ++++++------
 components/landing/Banner.tsx |  4 ++--
 components/landing/Home.tsx   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 32bc61fb..e4ba6a1f 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -23,7 +23,7 @@ function Footer() {
       name: "Linkedin",
       link: "https://linkedin.com/in/priyankarpal",
       icon: <SiLinkedin aria-label="Follow us on LinkedIn" title="LinkedIn(External Link)" />,
-      hover: " text-xl  text-gray-200 cursor-pointer hover:text-purple-500 ",
+      hover: " text-xl  text-gray-200 cursor-pointer hover:text-purple-700 ",
     }
   ]
 
@@ -73,7 +73,7 @@ function Footer() {
       <div className="mx-auto max-w-screen-xl pt-16 sm:px-4 sm:pb-[5.65rem] lg:px-8 lg:pb-8">
         <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-32">
           <div className="mx-auto max-w-sm lg:max-w-none">
-          <div className="inline-flex h-10 items-center text-white rounded-lg font-extrabold text-[2rem]"> Ph <span className="text-primary">.</span></div>
+          <div className="flex h-10 items-center justify-center lg:justify-start text-white rounded-lg font-extrabold text-[2rem] text-center"> Ph <span className="text-primary">.</span></div>
             <p
               className="mt-4 text-center text-gray-200 dark:text-gray-400 lg:text-left lg:text-lg"
             >
@@ -103,10 +103,10 @@ function Footer() {
             className="grid grid-cols-1 gap-8 text-center lg:grid-cols-2 lg:text-left"
           >
             {/* for footer docs links */}
-            <ul className="font-medium text-gray-200">
+            <ul className="font-medium text-gray-200 pt-5">
               {footerdocsLinks.map((section, index) => (
                 <div key={index}>
-                  <h3 className="text-xl font-extrabold mb-8 text-gray-200">{section.title}</h3>
+                  <h3 className="text-xl font-extrabold mb-4 text-gray-200">{section.title}</h3>
                   <ul>
                     {section.child.map((link, linkIndex) => (
                       <li key={linkIndex} className="pt-2">
@@ -124,7 +124,7 @@ function Footer() {
               <ul className="font-medium text-gray-200">
                 {footerServiceLinks.map((section, index) => (
                   <div key={index}>
-                    <h3 className="text-xl font-extrabold mb-8 text-gray-200">{section.title}</h3>
+                    <h3 className="text-xl font-extrabold mt-10 mb-4 text-gray-200">{section.title}</h3>
                     <ul>
                       {section.child.map((link, linkIndex) => (
                         <li key={linkIndex} className="pt-2">
@@ -150,4 +150,4 @@ function Footer() {
   );
 }
 
-export default Footer;
+export default Footer;
\ No newline at end of file
diff --git a/components/landing/Banner.tsx b/components/landing/Banner.tsx
index 73bfc56f..2814f400 100644
--- a/components/landing/Banner.tsx
+++ b/components/landing/Banner.tsx
@@ -37,7 +37,7 @@ export default function Banner() {
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, type: "spring", stiffness: 110 }}
-            className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            className="mt-2 sm:mt-0 text-3xl font-bold tracking-tight text-white sm:text-4xl">
             Why should you use this?
           </motion.p>
           <motion.h2
@@ -49,7 +49,7 @@ export default function Banner() {
             Showcase your projects
           </motion.h2>
         </div>
-        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
+        <div className="mx-auto mt-16 max-w-2xl sm:mt-15 lg:mt-24 lg:max-w-4xl">
           <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
             {features.map((feature, i) => (
               <motion.div
diff --git a/components/landing/Home.tsx b/components/landing/Home.tsx
index 56db39c3..a3639b6a 100644
--- a/components/landing/Home.tsx
+++ b/components/landing/Home.tsx
@@ -6,8 +6,8 @@ import Image from "next/image";
 
 export default function Landing() {
   return (
-    <div className="relative sm:pb-4 select-none overflow-hidden">
-      <div className="pt-16 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
+    <div className="relative sm:pb-0 select-none overflow-hidden">
+        <div className="pt-16 sm:pt-10 sm:pb-0 lg:pt-40 lg:pb-48">
         <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
           <section className="sm:max-w-[19.5rem] md:max-w-[24.5rem] tab:max-w-[28rem] lg:max-w-[30rem]">
             <motion.div