layouts and components, oh my!

src/components/InsuranceCard.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import classnames from 'classnames';
+import Button from '@/components/Button';
+import { FaRegIdCard } from "react-icons/fa";
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+const InsuranceCardWidget = () => {
+    
+  return (
+    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
+        <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
+        <FaRegIdCard size={150} className="text-bluemana" />
+        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
+            <Button className="hover:text-bronze">
+                View
+            </Button>
+            <p>|</p>
+            <Button className="hover:text-bronze">
+                Download
+            </Button>
+        </div>
+    </div>
+  );
+};
+
+export default InsuranceCardWidget;