cards wip

src/app/components/Card.js

@@ -0,0 +1,30 @@
+import styles from "./Card.module.css";
+
+export default function Card() {
+  return (
+    <div className={styles.card}>
+      <div className={styles.imgcontainer}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
+          />
+        </svg>
+      </div>
+      <div>
+        <h2>Title</h2>
+        <p>
+          Voluptatem culpa dolores eos. Aliquid omnis adipisci ex magnam quis
+          nemo.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/components/Card.module.css

@@ -0,0 +1,13 @@
+.card {
+    max-width: 20em;
+    padding: 1em;
+    text-align: center; 
+}
+
+.imgcontainer {
+    margin-bottom: 1em;
+}
+
+.imgcontainer svg {
+    width: 6em;
+}

src/app/components/Cards.js

@@ -0,0 +1,9 @@
+import styles from "./Cards.module.css";
+
+export default function Cards({ children }) {
+  return (
+    <div className={styles.cards}>
+        {children}
+    </div>
+  );
+}

src/app/components/Cards.module.css

@@ -0,0 +1,5 @@
+.cards {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}

src/app/page.js

@@ -2,6 +2,7 @@ import Image from "next/image";
 import styles from "./page.module.css";
 import bgimage from "./assets/header-bg.jpg";
 import Button from "./components/Button";
+import Cards from "./components/Cards";
 import Card from "./components/Card";
 import Link from "next/link";
 
@@ -55,8 +56,13 @@ export default function Home() {
         </section>
 
         <section className="container">
-          <h1>Services we Offer</h1>
-          <Card />
+          <h1 className={styles.h1}>Services we Offer</h1>
+          <Cards>
+            <Card />
+            <Card />
+            <Card />
+            <Card />
+          </Cards>
         </section>
       </main>
     </div>

src/app/page.module.css

@@ -35,4 +35,8 @@
   .textboxInner {
     width: 50%;
   }
+}
+
+.h1 {
+  text-align: center;
 }