From 2b607590d963ee4d50a7a58cefc64f5dd39810e1 Mon Sep 17 00:00:00 2001 From: Jason Jordan Date: Thu, 3 Jul 2025 13:35:22 -0400 Subject: [PATCH] got bg-images working with passing in url --- public/images/{placeHolder.png => doctor.png} | Bin src/components/Dropdown.tsx | 6 +-- src/components/InfoCard.tsx | 11 +++-- src/components/Navbar.tsx | 18 +++++-- src/components/Tagline.tsx | 45 ++++++++++++++++++ src/pages/index-testing.tsx | 31 ++++++++++++ src/pages/index.tsx | 21 ++++---- src/styles/globals.css | 2 + 8 files changed, 116 insertions(+), 18 deletions(-) rename public/images/{placeHolder.png => doctor.png} (100%) create mode 100644 src/components/Tagline.tsx create mode 100644 src/pages/index-testing.tsx diff --git a/public/images/placeHolder.png b/public/images/doctor.png similarity index 100% rename from public/images/placeHolder.png rename to public/images/doctor.png diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 66cc464..20ce57c 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -33,7 +33,7 @@ export default function Dropdown(props: Props) { <>
@@ -42,14 +42,14 @@ export default function Dropdown(props: Props) { <> {item.title}
diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx index fd9edda..8f8db0f 100644 --- a/src/components/InfoCard.tsx +++ b/src/components/InfoCard.tsx @@ -1,10 +1,11 @@ "use client"; import Link from 'next/link'; +import Image from 'next/image'; 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"; +export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2"; +export type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2"; @@ -15,6 +16,7 @@ interface InfoCardProps { sectionBgColor: bgColor; title: string; imageUrl: string; + learnMoreUrl?: string; invert?: boolean; children: React.ReactNode; } @@ -26,6 +28,7 @@ const InfoCard: React.FC = ( sectionBgColor, title, imageUrl, + learnMoreUrl, invert, children } @@ -74,7 +77,7 @@ const InfoCard: React.FC = ( "rounded-l-3xl rounded-tr-3xl" : invert } )}> -
+
@@ -91,7 +94,7 @@ const InfoCard: React.FC = (
- + Learn More
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 458b57f..395d65f 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -8,6 +8,7 @@ import Image from 'next/image'; import Dropdown from "./Dropdown"; export interface MenuItem { + id: string; title: string; route?: string; children?: MenuItem[]; @@ -15,49 +16,60 @@ export interface MenuItem { const menuItems: MenuItem[] = [ { + id: "employers", title: "Employers", children: [ { + id: "employerServices", title: "Employer Services", route: "", }, { + id: "selfFundedPlans", title: "Self-Funded Plans", route: "", }, { + id: "controlHealthCareCosts", title: "Control Health Care Costs", route: "", }, ], }, { + id: "members", title: "Members", children: [ { + id: "findMedicalProvider", title: "Find a Medical Provider", route: "", }, { + id: "obtainRxInformation", title: "Obtain Rx Information", route: "", }, ], }, { + id: "providers", title: "Providers", children: [ { + id: "eligibilityLookup", title: "Eligibility Lookup", route: "", }, { + id: "contactBbs", title: "Contact BBS", route: "", }, ], }, { + id: "brokers", title: "Brokers", route: "", }, @@ -98,8 +110,8 @@ const Navbar = () => { Britton Logo
@@ -134,7 +146,7 @@ const Navbar = () => { */} -
+
{menuItems.map((item) => { return item.hasOwnProperty("children") ? ( diff --git a/src/components/Tagline.tsx b/src/components/Tagline.tsx new file mode 100644 index 0000000..7ed744d --- /dev/null +++ b/src/components/Tagline.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { bgColor, textColor } from './InfoCard' + +interface TaglineProps { + className?: string; + bgColor: bgColor; + textColor: textColor; + textTop: string; + textBottom: string; +} + +const Tagline: React.FC = ( + { className, + bgColor, + textColor, + textTop, + textBottom + } +) => { + + return ( + <> +
+
+
+ {textTop} +
+ {/*
+
+ +
+
*/} +
+
+
+ {textBottom} +
+
+
+ + ); +}; + +export default Tagline; \ No newline at end of file diff --git a/src/pages/index-testing.tsx b/src/pages/index-testing.tsx new file mode 100644 index 0000000..d82c36b --- /dev/null +++ b/src/pages/index-testing.tsx @@ -0,0 +1,31 @@ +import classNames from "classnames"; +import { Playfair_Display, Fraunces } from "next/font/google" +import Tagline from "../components/Tagline"; + +const playfair = Playfair_Display({ weight: "500",subsets: ["latin"] }) +const fraunces = Fraunces({ subsets: ["latin"] }) + +export default function Home() { + return ( + <> + +
+
+
+
+
+
+
+
+
+
+
+
+ + ); +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5775d75..3eec785 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,28 +1,33 @@ import InfoCard from '../components/InfoCard'; +import Tagline from "../components/Tagline"; export default function Home() { return ( <> -
-
- Healthcare that's truly affordable -
+
+
Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike traditional insurance plans that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.