Update components and index page responsivity

choutkamartin · Jan 2, 2022 · 3578d49 · 3578d49
1 parent 719d253
commit 3578d49
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/components/layout/Container.jsx b/components/layout/Container.jsx
@@ -4,7 +4,7 @@ export default function Container({ children, variant, className }) {
   return (
     <section
       className={joinClassNames(
-        variant == "box" && "flex px-2 lg:px-80",
+        variant == "box" && "flex px-4 md:px-8 lg:px-20 xl:px-40 2xl:px-80",
         className
       )}
     >

diff --git a/components/layout/Footer.jsx b/components/layout/Footer.jsx
@@ -60,7 +60,7 @@ const footer = [
 
 export default function Footer() {
   return (
-    <footer className="bg-white px-4 md:px-80 py-12">
+    <footer className="bg-white py-12 px-4 md:px-8 lg:px-20 xl:px-40 2xl:px-80">
       <div className="relative grid grid-cols-1 lg:grid-cols-2 gap-x-64 gap-y-8">
         <div className="grid grid-cols-1 2xl:grid-cols-2 gap-y-8">
           <Logo />

diff --git a/components/layout/Header.jsx b/components/layout/Header.jsx
@@ -124,7 +124,7 @@ export default function Header() {
   const { data: session, status } = useSession();
   return (
     <Popover className="relative bg-white shadow">
-      <div className="px-4 sm:px-80">
+      <div className="px-4 md:px-8 lg:px-20 xl:px-40 2xl:px-80">
         <div className="flex justify-between items-center py-6 lg:justify-start md:space-x-10">
           <div className="flex justify-start">
             <Logo />
@@ -318,7 +318,7 @@ export default function Header() {
                   Sign In
                 </Anchor>
                 <Anchor to={path.auth.signUp} type="button" variant="primary">
-                  Gather data now
+                  Sign Up
                 </Anchor>
               </>
             )}

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -16,7 +16,7 @@ export default function Index() {
   return (
     <div className="flex flex-col gap-y-36 py-8 lg:py-24">
       <Container variant="box">
-        <div className="bg-hero w-full bg-cover bg-gray-700 bg-blend-multiply bg-center rounded-xl text-gray-100 lg:px-48 py-24 flex flex-col items-center text-center">
+        <div className="bg-hero w-full bg-cover bg-gray-700 bg-blend-multiply bg-center rounded-xl text-gray-100 px-8 lg:px-48 py-24 flex flex-col items-center text-center">
           <Title headingLevel="h1" className="mb-4">
             Get labeled data
             <br />
@@ -27,7 +27,7 @@ export default function Index() {
             of data, such as images or text. With those data, you can train your
             ML model.
           </p>
-          <div className="flex gap-x-4">
+          <div className="flex flex-wrap gap-4">
             <Anchor to="/" type="button" variant="primary">
               Get started
             </Anchor>