Homepage first runthrough complete

2025-07-02 16:39:16 -04:00
parent 129af6b414
commit 633b2a997a
12 changed files with 337 additions and 248 deletions
@@ -0,0 +1,115 @@
+"use client";
+
+import Link from 'next/link';
+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";
+
+
+
+interface InfoCardProps {
+    className?: string;
+    bodyTextColor: textColor;
+    cardBGColor: bgColor;
+    sectionBgColor: bgColor;
+    title: string;
+    imageUrl: string;
+    invert?: boolean;
+    children: React.ReactNode;
+}
+
+const InfoCard: React.FC<InfoCardProps> = (
+    {   className,
+        bodyTextColor,
+        cardBGColor,
+        sectionBgColor,
+        title,
+        imageUrl,
+        invert,
+        children
+     }
+) => {
+
+  return (
+    <div className='flex flex-col items-center m-h-150 py-10'>
+        <div className={classnames('w-11/12 flex', {"flex-row-reverse" : invert})}>
+            <div className="flex flex-col w-7/12">
+                <div className={classnames(
+                    'h-30 flex rounded-t-4xl', 
+                    cardBGColor,
+                    {
+                        "rounded-l-4xl" : !invert,
+                        "rounded-r-4xl" : invert
+                    }
+                )}> 
+                    <div className={classnames(
+                        "w-7/8 text-4xl pt-10 text-britton-accent rounded-l-3xl", 
+                        sectionBgColor,
+                        {
+                            "text-left pl-24" : !invert,
+                            "text-right" : invert
+                        }
+                    )}>
+                        {title}
+                    </div>
+                    <div className={classnames('w-1/8 rounded-r-3xl', sectionBgColor)} />
+                </div>
+                <div className={classnames(
+                    "text-3xl text-left p-8 h-full", 
+                    cardBGColor, bodyTextColor,
+                    {
+                        "rounded-l-3xl" : !invert,
+                        "rounded-r-3xl" : invert
+                    }
+                )}>
+                    {children}
+                </div>
+            </div>
+            <div className={classnames(
+                'w-5/12 p-4 justify-center', 
+                cardBGColor, 
+                {
+                    "rounded-r-3xl rounded-tl-3xl" : !invert,
+                    "rounded-l-3xl rounded-tr-3xl" : invert
+                }
+            )}>
+                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(${imageUrl})]`} />
+            </div>
+        </div>
+
+        <div className='flex w-11/12 h-20'>
+            <div className={classnames(
+                "rounded-b-4xl", 
+                cardBGColor,
+                {
+                    "w-1/9" : !invert,
+                    "w-5/9" : invert
+                }
+            )}>
+                <div className={classnames('w-full h-full rounded-tr-3xl', sectionBgColor)} />
+            </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">
+                        Learn More
+                    </Link>
+                </div>
+            </div>
+            <div className={classnames(
+                "rounded-b-4xl", 
+                cardBGColor,
+                {
+                    "w-5/9" : !invert,
+                    "w-1/9" : invert,
+                }
+            )}>
+                <div className={classnames(
+                    'w-full h-full rounded-tl-3xl', sectionBgColor)} />
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default InfoCard;