Finished questions section

src/app/home.module.css

@@ -23,6 +23,7 @@
   font-size: 3.5rem;
   width: 75%;
   font-weight: 600;
+  letter-spacing: 1.5px;
 }
 
 .description {
@@ -40,12 +41,13 @@
   }
 }
 
-.heroCta {
+.landingCta {
   background: var(--yellow);
   color: var(--dark-gray);
   width: fit-content;
   padding: 1em 2em;
   border-radius: var(--border-radius);
+  text-transform: capitalize;
 }
 
 /* Image */
@@ -142,3 +144,45 @@
   font-size: 1.5rem;
   line-height: 1.5;
 }
+
+/* Questions cta */
+.questionsSection {
+  width: 80%;
+  margin: 4.5em auto 2em;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+}
+
+.questions_text {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.questions_text .header {
+  width: 70%;
+}
+
+.questions_text .description {
+  width: 65%;
+}
+
+.questions_image {
+  position: relative;
+  border-radius: 1rem;
+  overflow: clip;
+}
+
+.questions_image img {
+  object-fit: cover;
+}
+
+.questionsSection::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: var(--stroke-height);
+  background-color: var(--stroke-color);
+  margin-top: 1em;
+}

src/app/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
               opoku-ameyaw.tech
             </Link>
           </p>
-          <Link href="/get-started" className={styles.heroCta}>
+          <Link href="/get-started" className={styles.landingCta}>
             Get Started
           </Link>
         </div>
@@ -64,6 +64,20 @@ export default function Home() {
           />
         </div>
       </section>
+      <section className={styles.questionsSection}>
+        <div className={styles.questions_text}>
+          <h2 className={styles.header}>Questions? Let’s talk</h2>
+          <p className={styles.description}>
+            Contact us through our 24/7 live chat.We’re always happy to help!
+          </p>
+          <Link href="/get-started" className={styles.landingCta}>
+            Talk to Us!
+          </Link>
+        </div>
+        <div className={styles.questions_image}>
+          <Image src="/questions.png" alt="Questions image" fill />
+        </div>
+      </section>
     </main>
   );
 }

src/components/footer/Footer.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Footer = () => {
+  return <div>Footer</div>;
+};
+
+export default Footer;