got bg-images working with passing in url

src/components/Dropdown.tsx

@@ -33,7 +33,7 @@ export default function Dropdown(props: Props) {
         <>
             <div className="relative">
                 <Button
-                    className="hover:text-britton-light font-semibold text-lg uppercase"
+                    className="hover:text-britton-light font-semibold text-lg"
                     onClick={toggle}
                 >{item.title}</Button>
                 <div className={`absolute top-8 z-30 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
@@ -42,14 +42,14 @@ export default function Dropdown(props: Props) {
                             <>
                                 <Link
                                     key={item.route}
-                                    className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
+                                    className="hover:bg-britton-medium hover:text-britton-neutral text-center px-2 py-1"
                                     href={item?.route || ''}
                                     onClick={toggle}
                                 >
                                     {item.title}
                                 </Link>
                                 <div className={classnames(
-                                        "h-px bg-britton-accent",
+                                        "h-px bg-britton-accent mx-2",
                                         {"hidden" : isLastItem(item)}
                                     )}
                                 />

src/components/InfoCard.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import Link from 'next/link';
+import Image from 'next/image';
 import classnames from 'classnames';
 
-type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
+export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
-type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
+export type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
 
 
 
@@ -15,6 +16,7 @@ interface InfoCardProps {
     sectionBgColor: bgColor;
     title: string;
     imageUrl: string;
+    learnMoreUrl?: string;
     invert?: boolean;
     children: React.ReactNode;
 }
@@ -26,6 +28,7 @@ const InfoCard: React.FC<InfoCardProps> = (
         sectionBgColor,
         title,
         imageUrl,
+        learnMoreUrl,
         invert,
         children
      }
@@ -74,7 +77,7 @@ const InfoCard: React.FC<InfoCardProps> = (
                     "rounded-l-3xl rounded-tr-3xl" : invert
                 }
             )}>
-                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(${imageUrl})]`} />
+                <div style={{ backgroundImage: `url(${imageUrl})` }} className="w-full h-full bg-cover bg-center rounded-3xl" />
             </div>
         </div>
 
@@ -91,7 +94,7 @@ const InfoCard: React.FC<InfoCardProps> = (
             </div>
             <div className={classnames("w-3/9 rounded-b-4xl", sectionBgColor)}>
                 <div className={classnames("w-full p-6 text-xl text-center text-britton-accent2 rounded-b-3xl", cardBGColor)}>
-                    <Link href="/services" className="hover:text-britton-accent">
+                    <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="hover:text-britton-accent">
                         Learn More
                     </Link>
                 </div>

src/components/Navbar.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image';
 import Dropdown from "./Dropdown";
 
 export interface MenuItem {
+  id: string;
   title: string;
   route?: string;
   children?: MenuItem[];
@@ -15,49 +16,60 @@ export interface MenuItem {
 
 const menuItems: MenuItem[] = [
   {
+    id: "employers",
     title: "Employers",
     children: [
       {
+        id: "employerServices",
         title: "Employer Services",
         route: "",
       },
       {
+        id: "selfFundedPlans",
         title: "Self-Funded Plans",
         route: "",
       },
       {
+        id: "controlHealthCareCosts",
         title: "Control Health Care Costs",
         route: "",
       },
     ],
   },
   {
+    id: "members",
     title: "Members",
     children: [
       {
+        id: "findMedicalProvider",
         title: "Find a Medical Provider",
         route: "",
       },
       {
+        id: "obtainRxInformation",
         title: "Obtain Rx Information",
         route: "",
       },
     ],
   },
   {
+    id: "providers",
     title: "Providers",
     children: [
       {
+        id: "eligibilityLookup",
         title: "Eligibility Lookup",
         route: "",
       },
       {
+        id: "contactBbs",
         title: "Contact BBS",
         route: "",
       },
     ],
   },
   {
+    id: "brokers",
     title: "Brokers",
     route: "",
     },
@@ -98,8 +110,8 @@ const Navbar = () => {
                     <Image
                         src="/images/bbstpa-forsite.png"
                         alt="Britton Logo"
-                        width={273}
+                        width={205}
-                        height={80}
+                        height={60}
                     />
                 </div>
                 <div className={classnames('rounded-b-3xl py-2 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
@@ -134,7 +146,7 @@ const Navbar = () => {
                         </Link>
                     </li>
                 </ul> */}
-                <div className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
+                <div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
                     {menuItems.map((item) => {
                     return item.hasOwnProperty("children") ? 
                     (

src/components/Tagline.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { bgColor, textColor } from './InfoCard'
+
+interface TaglineProps {
+    className?: string;
+    bgColor: bgColor;
+    textColor: textColor;
+    textTop: string;
+    textBottom: string;
+}
+
+const Tagline: React.FC<TaglineProps> = (
+    {   className,
+        bgColor,
+        textColor,
+        textTop,
+        textBottom
+     }
+) => {
+
+    return (
+        <>
+            <div className="flex flex-col justify-center items-center py-20">
+                <div className="w-11/12 flex justify-start">
+                    <div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl py-3 px-4 ml-30">
+                        {textTop}
+                    </div>
+                    {/* <div className="w-5/12 bg-britton-light rounded-4xl">
+                        <div>
+                            
+                        </div>
+                    </div> */}
+                </div>
+                <div className="w-11/12 flex justify-end">
+                    <div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl py-3 px-4 mr-30">
+                        {textBottom}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Tagline;

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="pb-5">
-        <div className="w-11/12 bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
+        <Tagline 
-          Healthcare that's truly affordable
+          bgColor="bg-britton-light"
-        </div>
+          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"

src/styles/globals.css

@@ -9,6 +9,8 @@
   --color-britton-dark: #04153E;
   --color-britton-medium: #2A4B6F;
   --color-britton-light: #6AC8F1;
+  --color-britton-electric: #00F0FF;
+  --color-britton-electric2: #7DF9FF;
   --color-britton-neutral: #E0E0E0;
   --color-britton-accent2: #B06E30;
   --color-britton-accent: #D38F4A;