added content cards and picture with text section. also added hero section

components/ui/content-cards.tsx

@@ -2,16 +2,27 @@
 interface cardProps {
   src?: string
   button_link?: string
+  heading?: string
   button_text?: string
+  card_text?: string
 }
 
-export default function ContentCard(buttonProps: cardProps) {
+export default function ContentCard(CardProps: cardProps) {
     return (
-        <>
-            <img src={buttonProps.src}></img>
-            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
-                {buttonProps.button_text}
-            </button>
-        </>
+    <>
+    <div className="bg-neutral-primary-soft shadow-lg shadow-blue-500/50 rounded-3xl block p-6 border-2 border-blue-500 rounded-base m-3 min-w-60 max-w-80">
+        <a href="#">
+            <img className="rounded-2xl" src={CardProps.src} alt="" />
+        </a>
+        <a href="#">
+            <h5 className="mt-6 mb-2 text-2xl font-semibold tracking-tight text-heading">{CardProps.heading}</h5>
+        </a>
+        <p className="mb-6 text-body">{CardProps.card_text}</p>
+        <a href="#" className="inline-flex rounded-3xl items-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">
+            {CardProps.button_text}
+            <svg className="w-3 h-3 ms-1.5 rtl:rotate-180 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </a>
+    </div>
+    </>
     )
 }