Responsive fix (#36)

atharvadeosthale · web-flow · commit 813e9855e14f · 2022-02-17T17:19:41.000+05:30
fix: responsive
diff --git a/web/components/Hero.tsx b/web/components/Hero.tsx
@@ -4,20 +4,20 @@ import Navbar from './Navbar'
 
 export default function Hero() {
   return (
-    <div className="relative flex h-screen flex-col">
+    <div className="relative flex flex-col py-20 md:h-screen md:py-0">
       {/* Blur absolute div */}
       <div className="absolute top-0 left-1/2 h-48 w-[40rem] -translate-x-1/2 bg-[#2A468E] blur-[140px]"></div>
       {/* Main content */}
       <Navbar />
       <div className="z-10 flex flex-1 flex-col items-center justify-center p-10 text-center xl:p-0">
-        <div className="max-w-5xl text-5xl font-black leading-normal lg:text-7xl lg:leading-[6rem]">
+        <div className="text-5xl font-black leading-[3.5rem] md:max-w-5xl lg:text-7xl lg:leading-[6rem]">
           Stop rewriting your <span className="text-[#24D1DC]">React</span> and{' '}
           <span className="text-[#24D1DC]">Next.js</span> code
         </div>
         <div className="mt-7 text-3xl leading-normal text-gray-400">
           Use our VSCode and Jetbrains snippets extension
         </div>
-        <div className="mt-8 grid grid-cols-2 gap-5">
+        <div className="mt-8 grid grid-cols-1 gap-5 md:grid-cols-2">
           <Link href="#">
             <a className="w-48 rounded-md bg-gradient-to-r from-[#000A67] to-[#004E92] py-3 text-xl">
               Get started
@@ -32,4 +32,4 @@ export default function Hero() {
       </div>
     </div>
   )
-}
+}
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
@@ -6,7 +6,7 @@ import Working from '../components/Working'
 
 export default function Home() {
   return (
-    <div className="w-screen overflow-y-hidden">
+    <div className="w-screen overflow-x-hidden">
       <div className="mx-auto max-w-6xl">
         <Head>
           <title>React &amp; Next.js snippets</title>
@@ -19,4 +19,4 @@ export default function Home() {
       </div>
     </div>
   )
-}
+}
