Merge pull request #11 from jspvg/landing-page

style landing page
jspvg · Feb 17, 2024 · cd05b1f · cd05b1f
2 parents 50bcbd7 + 96bf577
commit cd05b1f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 26 deletions.
diff --git a/public/bg-linksharing.png b/public/bg-linksharing.png
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
@@ -3,23 +3,29 @@ const Landing = () => {
     <div className="body-landing">
       <div className="page-landing">
         <h2>Share all your links with one!</h2>
-        <p>
-          Don't have an account?
-          <a href="/register" style={{ margin: '0 1rem' }}>
-            Register here
-          </a>
-        </p>
-        <p>
-          Already have an account?
-          <a href="/login" style={{ margin: '0 1rem' }}>
-            Login
-          </a>
-          and go to your
-          <a href="/" style={{ margin: '0 1rem' }}>
-            profile
-          </a>
-          to continue where you've left off!
-        </p>
+        <div className="landing-align">
+          <p>
+            Don't have an account?
+            <a href="/register" style={{ margin: '0 0.3rem' }}>
+              Register here
+            </a>
+          </p>
+        </div>
+        <div className="landing-align">
+          <p>
+            Already have an account?
+            <a href="/login" style={{ margin: '0 0.3rem' }}>
+              Login
+            </a>
+          </p>
+          <p>
+            and go to your
+            <a href="/" style={{ margin: '0 0.3rem' }}>
+              profile
+            </a>
+            to continue where you've left off!
+          </p>
+        </div>
       </div>
     </div>
   );

diff --git a/src/pages/Root.tsx b/src/pages/Root.tsx
@@ -5,8 +5,9 @@ export default function Root() {
   const homeMatch = useMatch('/');
   const profileMatch = useMatch('/profile');
   const previewMatch = useMatch('/preview');
+  const landingMatch = useMatch('/landing');
   return (
-    <div className={previewMatch ? 'no-padding' : 'padding'}>
+    <div className={previewMatch || landingMatch ? 'no-padding' : 'padding'}>
       {homeMatch || profileMatch ? <Navbar /> : <></>}
       <Outlet />
     </div>

diff --git a/src/styles/components/layout.scss b/src/styles/components/layout.scss
@@ -9,38 +9,72 @@
   align-self: stretch;
 }
 
-.page-body,
-.body-landing {
+.page-body {
   @extend %flex-container;
   @extend %flex-column;
   gap: 24px;
   width: 100%;
 }
 
 .body-landing {
-  height: 100dvh;
+  border: 3px solid $pale-gray;
+  background-image: url('public/bg-linksharing.png');
+  height: 80dvh;
 }
 
-.page-container,
-.page-landing {
+.body-landing,
+.page-container {
   @extend %flex-container;
   @extend %flex-row;
   border-radius: 8px;
   gap: 24px;
-  margin: 0px 24px 24px;
   width: 100%;
 }
 
 .page-container {
   background-color: $grayish-white;
+  margin: 0px 24px 24px;
 }
 
 .page-landing {
-  flex-direction: column;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  @extend %flex-column;
+  border: 3px solid $pale-gray;
+  border-radius: 8px;
   background-color: white;
-  height: 80dvh;
+  padding: 20px;
+  height: 30%;
 }
 
+.landing-align {
+  @extend %flex-container;
+  a{
+    text-decoration: underline;
+  }
+}
+
+@media (max-width: 600px) {
+  .page-landing {
+    text-align: center;
+  }
+  .landing-align {
+    flex-direction: column;
+    p {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+/*@media (max-width: 375px) {
+  .landing-align {
+    p {
+      flex-wrap: wrap;
+    }
+  }
+}*/
+
 .left {
   @extend %page-section;
   justify-content: flex-start !important;