got bg-images working with passing in url

src/pages/index-testing.tsx

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import { Playfair_Display, Fraunces } from "next/font/google"
+import Tagline from "../components/Tagline";
+
+const playfair = Playfair_Display({ weight: "500",subsets: ["latin"] })
+const fraunces = Fraunces({ subsets: ["latin"] })
+
+export default function Home() {
+  return (
+    <>
+      <Tagline 
+        bgColor="bg-britton-light"
+        textColor="text-britton-dark"
+        textTop="Healthcare that's"
+        textBottom="truly affordable"
+      />
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-medium text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-neutral text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-accent text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+    </>
+  );
+}

src/pages/index.tsx

@@ -1,28 +1,33 @@
 import InfoCard from '../components/InfoCard';
+import Tagline from "../components/Tagline";
 
 export default function Home() {
   return (
     <>
-      <div className="flex justify-center py-20">
-        <div className="w-11/12 bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
-          Healthcare that's truly affordable
-        </div>
+      <div className="pb-5">
+        <Tagline 
+          bgColor="bg-britton-light"
+          textColor="text-britton-dark"
+          textTop="Healthcare that's"
+          textBottom="truly affordable"
+        />
       </div>
       <div>
         <div className='bg-britton-medium rounded-3xl'>
           <InfoCard
             title="Self-Funded Plans"
-            imageUrl="/images/placeHolder.png"
+            imageUrl='/images/doctor.png'
             sectionBgColor="bg-britton-medium"
             cardBGColor="bg-britton-neutral"
             bodyTextColor="text-britton-dark"
+            learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
           >
             Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike traditional insurance plans that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.
           </InfoCard>
         </div>
         <InfoCard
           title="Health & Risk Management"
-          imageUrl="/images/placeHolder.png"
+          imageUrl="/images/doctor.png"
           sectionBgColor="bg-britton-dark"
           cardBGColor="bg-britton-medium"
           bodyTextColor="text-britton-light"
@@ -35,7 +40,7 @@ export default function Home() {
         <div className='bg-britton-neutral rounded-3xl'>
           <InfoCard
             title="Regulatory Compliance"
-            imageUrl="/images/placeHolder.png"
+            imageUrl="/images/doctor.png"
             sectionBgColor="bg-britton-neutral"
             cardBGColor="bg-britton-dark"
             bodyTextColor="text-britton-light"
@@ -45,7 +50,7 @@ export default function Home() {
         </div>
         <InfoCard
           title="Benefit Access & Online Support"
-          imageUrl="/images/placeHolder.png"
+          imageUrl="/images/doctor.png"
           sectionBgColor="bg-britton-dark"
           cardBGColor="bg-britton-light"
           bodyTextColor="text-britton-medium"