Britton/next-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

got bg-images working with passing in url

Browse Source
This commit is contained in:
Jason Jordan
2025-07-03 13:35:22 -04:00
parent 633b2a997a
commit 2b607590d9
8 changed files with 116 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/placeHolder.png → public/images/doctor.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

src/components/Dropdown.tsx
+3 -3
View File
@@ -33,7 +33,7 @@ export default function Dropdown(props: Props) {
<>
<div className="relative">
<Button
className="hover:text-britton-light font-semibold text-lg uppercase"
className="hover:text-britton-light font-semibold text-lg"
onClick={toggle}
>{item.title}</Button>
<div className={`absolute top-8 z-30 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
@@ -42,14 +42,14 @@ export default function Dropdown(props: Props) {
<>
<Link
key={item.route}
className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
className="hover:bg-britton-medium hover:text-britton-neutral text-center px-2 py-1"
href={item?.route || ''}
onClick={toggle}
>
{item.title}
</Link>
<div className={classnames(
"h-px bg-britton-accent",
"h-px bg-britton-accent mx-2",
{"hidden" : isLastItem(item)}
)}
/>
src/components/InfoCard.tsx
+7 -4
View File
@@ -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<InfoCardProps> = (
sectionBgColor,
title,
imageUrl,
learnMoreUrl,
invert,
children
}
@@ -74,7 +77,7 @@ const InfoCard: React.FC<InfoCardProps> = (
"rounded-l-3xl rounded-tr-3xl" : invert
}
)}>
<div className={`h-full w-full rounded-3xl bg-cover bg-[url(${imageUrl})]`} />
<div style={{ backgroundImage: `url(${imageUrl})` }} className="w-full h-full bg-cover bg-center rounded-3xl" />
</div>
</div>
@@ -91,7 +94,7 @@ const InfoCard: React.FC<InfoCardProps> = (
</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">
<Link href={learnMoreUrl ? learnMoreUrl : '/'} className="hover:text-britton-accent">
Learn More
</Link>
</div>
src/components/Navbar.tsx
+15 -3
View File
@@ -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 = () => {
<Image
src="/images/bbstpa-forsite.png"
alt="Britton Logo"
width={273}
height={80}
width={205}
height={60}
/>
</div>
<div className={classnames('rounded-b-3xl py-2 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
@@ -134,7 +146,7 @@ const Navbar = () => {
</Link>
</li>
</ul> */}
<div className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
<div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
{menuItems.map((item) => {
return item.hasOwnProperty("children") ?
(
src/components/Tagline.tsx
+45
View File
@@ -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<TaglineProps> = (
{ className,
bgColor,
textColor,
textTop,
textBottom
}
) => {
return (
<>
<div className="flex flex-col justify-center items-center py-20">
<div className="w-11/12 flex justify-start">
<div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl py-3 px-4 ml-30">
{textTop}
</div>
{/* <div className="w-5/12 bg-britton-light rounded-4xl">
<div>
</div>
</div> */}
</div>
<div className="w-11/12 flex justify-end">
<div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl py-3 px-4 mr-30">
{textBottom}
</div>
</div>
</div>
</>
);
};
export default Tagline;
src/pages/index-testing.tsx
+31
View File
@@ -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 (
<>
<Tagline
bgColor="bg-britton-light"
textColor="text-britton-dark"
textTop="Healthcare that's"
textBottom="truly affordable"
/>
<div className="flex justify-center p-5">
<div className="w-11/12 h-4 bg-britton-medium text-center text-britton-dark text-7xl rounded-3xl p-4">
</div>
</div>
<div className="flex justify-center p-5">
<div className="w-11/12 h-4 bg-britton-neutral text-center text-britton-dark text-7xl rounded-3xl p-4">
</div>
</div>
<div className="flex justify-center p-5">
<div className="w-11/12 h-4 bg-britton-accent text-center text-britton-dark text-7xl rounded-3xl p-4">
</div>
</div>
</>
);
}
src/pages/index.tsx
+13 -8
View File
@@ -1,28 +1,33 @@
import InfoCard from '../components/InfoCard';
import Tagline from "../components/Tagline";
export default function Home() {
return (
<>
<div className="flex justify-center py-20">
<div className="w-11/12 bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
Healthcare that's truly affordable
</div>
<div className="pb-5">
<Tagline
bgColor="bg-britton-light"
textColor="text-britton-dark"
textTop="Healthcare that's"
textBottom="truly affordable"
/>
</div>
<div>
<div className='bg-britton-medium rounded-3xl'>
<InfoCard
title="Self-Funded Plans"
imageUrl="/images/placeHolder.png"
imageUrl='/images/doctor.png'
sectionBgColor="bg-britton-medium"
cardBGColor="bg-britton-neutral"
bodyTextColor="text-britton-dark"
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
>
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.
</InfoCard>
</div>
<InfoCard
title="Health & Risk Management"
imageUrl="/images/placeHolder.png"
imageUrl="/images/doctor.png"
sectionBgColor="bg-britton-dark"
cardBGColor="bg-britton-medium"
bodyTextColor="text-britton-light"
@@ -35,7 +40,7 @@ export default function Home() {
<div className='bg-britton-neutral rounded-3xl'>
<InfoCard
title="Regulatory Compliance"
imageUrl="/images/placeHolder.png"
imageUrl="/images/doctor.png"
sectionBgColor="bg-britton-neutral"
cardBGColor="bg-britton-dark"
bodyTextColor="text-britton-light"
@@ -45,7 +50,7 @@ export default function Home() {
</div>
<InfoCard
title="Benefit Access & Online Support"
imageUrl="/images/placeHolder.png"
imageUrl="/images/doctor.png"
sectionBgColor="bg-britton-dark"
cardBGColor="bg-britton-light"
bodyTextColor="text-britton-medium"
src/styles/globals.css
+2
View File
@@ -9,6 +9,8 @@
--color-britton-dark: #04153E;
--color-britton-medium: #2A4B6F;
--color-britton-light: #6AC8F1;
--color-britton-electric: #00F0FF;
--color-britton-electric2: #7DF9FF;
--color-britton-neutral: #E0E0E0;
--color-britton-accent2: #B06E30;
--color-britton-accent: #D38F4A;