got bg-images working with passing in url

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>