layouts and components, oh my!

2025-07-29 17:41:13 -04:00
parent d1ebd100b5
commit 3bdc768714
36 changed files with 919 additions and 129 deletions
@@ -0,0 +1,48 @@
+import { Schibsted_Grotesk } from 'next/font/google'
+import classnames from 'classnames';
+import InlineLink from "@/components/InlineLink";
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+export interface QuickLink {
+  display: string;
+  url: string;
+}
+
+interface QuickAccessLinksProps {
+  imageUrl: string;
+  quickLinks: QuickLink[];
+  
+}
+
+const QuickAccessLinks: React.FC<QuickAccessLinksProps> = ({ imageUrl, quickLinks }) => {
+
+    
+  return (
+     <div className="relative w-full flex justify-start pl-10 py-5">
+        <div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
+            <div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
+        </div>
+        <div className={classnames("w-3/5 flex flex-col justify-center text-platinum z-2")}>
+            <div className={classnames("text-4xl pb-8")}>
+                Quick Access to Your Services
+            </div>
+            <ul className={classnames("flex flex-col pl-10 text-2xl leading-12 list-disc list-inside", font.className)}>
+                {quickLinks.map((quickLink) => (
+                  <li><InlineLink>{quickLink.display}</InlineLink></li>
+                ))}
+            </ul>
+        </div>
+        <div className={classnames("w-2/5 flex justify-center mr-10 rounded-2xl z-2 bg-atmosphere")}>
+            <div className={classnames(
+                "relative w-9/10"
+            )}>
+                <img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
+                <div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default QuickAccessLinks;