styling wip

components/Container/Container.module.css

@@ -0,0 +1,8 @@
+.container {
+  background: linear-gradient(
+    132.82deg,
+    rgba(11, 14, 32, 0.64) 5.03%,
+    rgba(52, 20, 33, 0.9) 73.08%
+  );
+  border-radius: 16px;
+}

components/Container/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./Container.module.css";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Container = ({ children, className = "" }: Props) => {
+  return <div className={`${styles.container} ${className}`}>{children}</div>;
+};
+
+export default Container;

pages/index.tsx

@@ -3,6 +3,8 @@ import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 
+import Container from "components/Container";
+
 const Home: NextPage = () => {
   return (
     <div className={styles.container}>
@@ -12,33 +14,35 @@ const Home: NextPage = () => {
         </h1>
 
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
+          <Container className={styles.card}>
+            <a href="https://nextjs.org/docs">
+              <h2>Documentation &rarr;</h2>
+              <p>Find in-depth information about Next.js features and API.</p>
+            </a>
+          </Container>
 
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
+          <Container className={styles.card}>
+            <a href="https://nextjs.org/learn">
+              <h2>Learn &rarr;</h2>
+              <p>Learn about Next.js in an interactive course with quizzes!</p>
+            </a>
+          </Container>
 
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
+          <Container className={styles.card}>
+            <a href="https://github.com/vercel/next.js/tree/canary/examples">
+              <h2>Examples &rarr;</h2>
+              <p>Discover and deploy boilerplate example Next.js projects.</p>
+            </a>
+          </Container>
 
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
+          <Container className={styles.card}>
+            <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app">
+              <h2>Deploy &rarr;</h2>
+              <p>
+                Instantly deploy your Next.js site to a public URL with Vercel.
+              </p>
+            </a>
+          </Container>
         </div>
       </main>
 

styles/Home.module.css

@@ -28,7 +28,7 @@
 }
 
 .title a {
-  color: #0070f3;
+  color: orange;
   text-decoration: none;
 }
 
@@ -79,7 +79,6 @@
   color: inherit;
   text-decoration: none;
   border: 1px solid #eaeaea;
-  border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
   max-width: 300px;
 }
@@ -87,8 +86,8 @@
 .card:hover,
 .card:focus,
 .card:active {
-  color: #0070f3;
-  border-color: #0070f3;
+  color: orange;
+  border-color: orange;
 }
 
 .card h2 {