improved site header, added contact form, content card carousel, footer, and more photos

components/ui/content-cards.tsx

@@ -1,3 +1,4 @@
+import './content-cards.css'
 
 interface cardProps {
   src?: string
@@ -8,21 +9,45 @@ interface cardProps {
 }
 
 export default function ContentCard(CardProps: cardProps) {
-    return (
-    <>
-    <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="" />
+  return (
+    <article className="content-card group flex h-full w-full min-h-80 flex-col p-6">
+      <div className="content-card-body flex h-full flex-col">
+        <a href="#" className="block shrink-0">
+          <div className="content-card-image aspect-video w-full">
+            <img
+              className="h-full w-full object-cover"
+              src={CardProps.src}
+              alt=""
+            />
+          </div>
         </a>
-        <a href="#">
-            <h5 className="mt-6 mb-2 text-2xl font-semibold tracking-tight text-heading">{CardProps.heading}</h5>
+        <a href="#" className="mt-6 block shrink-0">
+          <h5 className="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>
+        <p className="mb-6 line-clamp-3 flex-1 text-body">{CardProps.card_text}</p>
+        <a href="#" className="content-card-cta mt-auto self-start">
+          {CardProps.button_text}
+          <svg
+            className="ms-1.5 -me-0.5 h-3 w-3 rtl:rotate-180"
+            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>
-    </>
-    )
-} 
+      </div>
+    </article>
+  )
+}