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";
-type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
+export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-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}
-                        height={80}
+                        width={205}
+                        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;