Adding temporary styles to pages in development

Author: mariana-caldas

components/Layout.js

@@ -1,13 +1,14 @@
 import Nav from './Nav';
 import Meta from './Meta';
 import Footer from './Footer';
+import styles from '../styles/Layout.module.scss';
 
 export default function Layout({ children }) {
   return (
     <>
       <Meta />
       <Nav />
-      <main>{children}</main>
+      <main className={styles.main}>{children}</main>
       <Footer />
     </>
   );

pages/404.js

@@ -1,5 +1,6 @@
 import Link from 'next/link';
-const NotFound = () => {
+
+export default function NotFound() {
   return (
     <div className="not-found">
       <h1>Ooops...</h1>
@@ -12,5 +13,4 @@ const NotFound = () => {
       </p>
     </div>
   );
-};
-export default NotFound;
+}

pages/about-us.js

@@ -1,3 +1,9 @@
 export default function AboutUs() {
-  return <h1>Hello from About Us</h1>;
+  return (
+    <div className="about-us">
+      <h1>About Us</h1>
+      <p>We're building this page.</p>
+      <p>Stay tuned!</p>
+    </div>
+  );
 }

pages/blog/index.js

@@ -2,8 +2,9 @@ import Link from 'next/link';
 
 export default function Blog() {
   return (
-    <div>
-      <h1>Hello from the blog page</h1>
+    <div className="blog">
+      <h1>Blog Page</h1>
+      <p>We're building this page. Stay tuned!</p>
       <ul>
         <li>
           <Link href="/blog/first-post">

pages/contact-us.js

@@ -1,3 +1,9 @@
 export default function ContactUs() {
-  return <h1>Hello from Contact Us</h1>;
+  return (
+    <div className="contact-us">
+      <h1>Contact Us</h1>
+      <p>We're building this page.</p>
+      <p>Stay tuned!</p>
+    </div>
+  );
 }

styles/Home.module.scss

@@ -1,5 +1,5 @@
-@import 'mixins';
-@import 'variables';
+@use './variables' as *;
+@use './mixins' as *;
 
 .title {
   margin: 0;
@@ -15,7 +15,8 @@
 .description {
   font-size: 1.5rem;
   text-align: center;
-  max-width: 90%;
+  width: 90%;
+  max-width: $large-desktop-breakpoint;
   margin: 0 auto;
   padding: 5rem 0;
 }

styles/Layout.module.scss

@@ -0,0 +1,6 @@
+@use './variables' as *;
+@use './mixins' as *;
+
+.main {
+  min-height: 100vh;
+}

styles/globals.scss

@@ -36,8 +36,16 @@ a {
   box-sizing: border-box;
 }
 
-.not-found {
-  text-align: center;
+.not-found,
+.about-us,
+.contact-us,
+.blog {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+  margin-top: 10%;
+  align-items: center;
 }
 
 .not-found a {