ready for initial presentation
This commit is contained in:
Jason Jordan
Generated
+8
@@ -22,6 +22,7 @@
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.4",
|
||||
"react-icons": "^5.5",
|
||||
"tailwind-rounded-out": "2.0.0",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
@@ -5755,6 +5756,13 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-rounded-out": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-rounded-out/-/tailwind-rounded-out-2.0.0.tgz",
|
||||
"integrity": "sha512-QPZGy7zvE/qbN81e9MrLZhd+CPTHlHcrKAp0TKrJFb/yfcpwD7mY8bCwD8aCBMtEPtexKSVAKfQsMrk1cNkPEA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.1.10",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.10.tgz",
|
||||
|
||||
+2
-1
@@ -24,6 +24,7 @@
|
||||
"eslint-config-next": "15.3.4",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"react-icons": "^5.5",
|
||||
"classnames": "^2.5"
|
||||
"classnames": "^2.5",
|
||||
"tailwind-rounded-out": "2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
+124
-5
@@ -1,12 +1,131 @@
|
||||
"use client";
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { BsLinkedin } from "react-icons/bs";
|
||||
import { Schibsted_Grotesk, Fraunces } from 'next/font/google'
|
||||
import classnames from 'classnames';
|
||||
|
||||
// (san serif grotesque)(public sans, Schibsted grotesque, source sans 3)
|
||||
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||
const headerFont = Fraunces({ subsets: ['latin'] })
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="h-20 bg-gradient-to-b from-britton-dark to-britton-medium" />
|
||||
<footer className="bg-britton-medium flex justify-center pt-6 pb-8">
|
||||
<div className="w-11/12 md:flex md:items-center md:justify-evenly text-britton-neutral">
|
||||
<div className='flex flex-col'>
|
||||
<footer className="h-[135vh] bg-britton-dark flex justify-center pt-20 pb-30">
|
||||
<div className={classnames("w-11/12 md:flex md:items-center md:justify-evenly text-britton-neutral", font.className)}>
|
||||
<div className='w-1/2 h-full flex flex-col justify-between'>
|
||||
<div className='w-full flex justify-start'>
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
width={410}
|
||||
height={120}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-full flex flex-col justify-start ml-[22px]'>
|
||||
<div className='hover:text-britton-light pb-1'>
|
||||
<Link href="https://www.linkedin.com/company/discovery-insurance">
|
||||
<BsLinkedin size={32} />
|
||||
</Link>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-3 text-md font-medium sm:mt-0">
|
||||
<li className='pt-1'>
|
||||
<a href="#" className="hover:text-britton-light">Terms of Service</a>
|
||||
</li>
|
||||
<li className='pt-1'>
|
||||
<a href="#" className="hover:text-britton-light">Website Privacy Statement</a>
|
||||
</li>
|
||||
<li className='pt-3 font-normal text-xs'>
|
||||
© Copyright 2025 Britton Benefit Services, LLC All Rights Reserved
|
||||
</li>
|
||||
<li className='font-normal text-xs'>
|
||||
604 North Queen St., Kinston, NC 28502
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
||||
<div className={classnames("text-xl text-britton-light pb-12", headerFont.className)}>
|
||||
<div className="pb-6">
|
||||
<a href="#" className="hover:text-britton-accent">Log In?</a>
|
||||
</div>
|
||||
<div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-15">Resources</div>
|
||||
</div>
|
||||
<ul className="flex flex-col pt-3 text-md font-medium sm:mt-0">
|
||||
<li className="text-britton-accent mb-4">
|
||||
Members
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Members Landing</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Find a Medical Provider</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Obtain Rx Information</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
|
||||
<li className="text-britton-accent mb-4">
|
||||
Employers
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Employers Landing</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Self-Funded Plans</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Employer Services</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Control Health Care Costs</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
|
||||
<li className="text-britton-accent mb-4">
|
||||
Providers
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Providers Landing</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Eligibility Lookup</a>
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Contact BBS</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
|
||||
<li className="text-britton-accent mb-4">
|
||||
Brokers
|
||||
</li>
|
||||
<li className='pt-2'>
|
||||
<a href="#" className='hover:text-britton-light'>Brokers Landing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
||||
<div className={classnames("text-xl text-britton-light pb-12", headerFont.className)}>
|
||||
<div className="pb-6">
|
||||
<a href="#" className="hover:text-britton-accent">Get a Quote</a>
|
||||
</div>
|
||||
<div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-15">Company</div>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-3 text-md font-medium sm:mt-0">
|
||||
<li className='pt-3 hover:text-britton-light'>
|
||||
<a href="#" className='hover:text-britton-light' >About</a>
|
||||
</li>
|
||||
<li className='pt-6 hover:text-britton-light'>
|
||||
<a href="#" className='hover:text-britton-light' >Careers</a>
|
||||
</li>
|
||||
<li className='pt-6 hover:text-britton-light'>
|
||||
<a href="#" className='hover:text-britton-light' >Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* <div className='flex flex-col'>
|
||||
<div className="text-md sm:text-left my-1 mx-2">
|
||||
Britton Benefit Services, LLC 604 North Queen St., Kinston, NC 28502
|
||||
</div>
|
||||
@@ -35,7 +154,7 @@ const Footer = () => {
|
||||
<div className="text-md sm:text-center my-1 mx-2">
|
||||
1-800-676-1182
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
|
||||
+135
-67
@@ -1,19 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { Public_Sans, Schibsted_Grotesk, Source_Sans_3 } from 'next/font/google'
|
||||
import classnames from 'classnames';
|
||||
|
||||
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";
|
||||
|
||||
import { brittonRGB, textColor, bgColor } from '@/interfaces/common'
|
||||
|
||||
// (san serif grotesque)(public sans, Schibsted grotesque, source sans 3)
|
||||
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||
|
||||
interface InfoCardProps {
|
||||
className?: string;
|
||||
bodyTextColor: textColor;
|
||||
cardBGColor: bgColor;
|
||||
sectionBgColor: bgColor;
|
||||
parentBgColor: bgColor;
|
||||
title: string;
|
||||
imageUrl: string;
|
||||
learnMoreUrl?: string;
|
||||
@@ -21,11 +21,22 @@ interface InfoCardProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const brittonColorsRBG: brittonRGB = {
|
||||
'britton-dark': '4,21,62',
|
||||
'britton-medium': '42,75,111',
|
||||
'britton-light': '106,200,241',
|
||||
'britton-electric': '_0,240,255',
|
||||
'britton-electric2': '125,249,255',
|
||||
'britton-neutral': '224,224,224',
|
||||
'britton-accent2': '176,110,48',
|
||||
'britton-accent': '211,143,74',
|
||||
}
|
||||
|
||||
const InfoCard: React.FC<InfoCardProps> = (
|
||||
{ className,
|
||||
bodyTextColor,
|
||||
cardBGColor,
|
||||
sectionBgColor,
|
||||
parentBgColor,
|
||||
title,
|
||||
imageUrl,
|
||||
learnMoreUrl,
|
||||
@@ -34,81 +45,138 @@ const InfoCard: React.FC<InfoCardProps> = (
|
||||
}
|
||||
) => {
|
||||
|
||||
const imageShadowColor: string = (cardBGColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
|
||||
const cardVhadowColor: string = (parentBgColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
|
||||
|
||||
|
||||
// const imageShadowColor = () => {
|
||||
// if (cardBGColor == 'bg-britton-dark') {
|
||||
// return 'shadow-britton-accent2/90'
|
||||
// } else {
|
||||
// return 'shadow-black/50'
|
||||
// }
|
||||
// }
|
||||
|
||||
// const cardVhadowColor = () => {
|
||||
// if (parentBgColor == 'bg-britton-dark') {
|
||||
// return 'shadow-britton-accent2/90'
|
||||
// } else {
|
||||
// return 'shadow-black/50'
|
||||
// }
|
||||
// }
|
||||
|
||||
// const rgbColor = ({ tailWindColor }: string) => {
|
||||
// return brittonColorsRBG[tailWindColor];
|
||||
// };
|
||||
|
||||
// const rgbColor: string = ({ name }) => {
|
||||
// return <div>Hello, {name}</div>;
|
||||
// };
|
||||
|
||||
|
||||
|
||||
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,
|
||||
<div className='flex m-h-150 justify-center py-10'>
|
||||
<div className='flex flex-col w-11/12'>
|
||||
<div className='flex flex-col w-full z-30 items-center'>
|
||||
<div className={classnames('flex rounded-2xl',
|
||||
{
|
||||
"rounded-l-4xl" : !invert,
|
||||
"rounded-r-4xl" : invert
|
||||
}
|
||||
)}>
|
||||
"flex-row-reverse" : invert,
|
||||
"shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert,
|
||||
[`${cardVhadowColor}`] : !invert
|
||||
})}>
|
||||
<div className={classnames("flex flex-col w-7/12 z-40")}>
|
||||
<div className={classnames(
|
||||
'h-30 flex', parentBgColor,
|
||||
{
|
||||
"flex-row-reverse" : invert,
|
||||
}
|
||||
)}>
|
||||
<div className={classnames(
|
||||
"w-29/30 text-4xl text-left pl-8 pt-10 text-britton-accent rounded-l-2xl",
|
||||
parentBgColor
|
||||
)}>
|
||||
{title}
|
||||
</div>
|
||||
<div className={classnames(
|
||||
'w-1/30 relative', cardBGColor,
|
||||
{
|
||||
"rounded-tr-2xl rounded-out-br-2xl" : invert,
|
||||
"rounded-tl-2xl rounded-out-bl-2xl" : !invert,
|
||||
}
|
||||
)} />
|
||||
</div>
|
||||
<div className={classnames(
|
||||
"text-2xl text-left font-medium p-8 h-full",
|
||||
cardBGColor, bodyTextColor, font.className,
|
||||
{
|
||||
"rounded-l-2xl" : !invert,
|
||||
"rounded-r-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]" : invert,
|
||||
[`${cardVhadowColor}`] : invert
|
||||
}
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
<div className={classnames(
|
||||
"w-7/8 text-4xl pt-10 text-britton-accent rounded-l-3xl",
|
||||
sectionBgColor,
|
||||
'w-5/12 p-4 z-40 justify-center',
|
||||
cardBGColor,
|
||||
{
|
||||
"text-left pl-24" : !invert,
|
||||
"text-right" : invert
|
||||
"rounded-r-2xl" : !invert,
|
||||
"rounded-l-2xl" : invert
|
||||
}
|
||||
)}>
|
||||
{title}
|
||||
<div className={classnames(
|
||||
"relative shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-xl z-40",
|
||||
imageShadowColor
|
||||
)}>
|
||||
<img src={imageUrl} alt="Description" className="grayscale rounded-xl w-full h-full bg-cover bg-center" />
|
||||
<div className="after:absolute after:inset-0 after:bg-britton-medium after:mix-blend-color after:rounded-xl" />
|
||||
</div>
|
||||
{/* <div style={{ backgroundImage: `url(${imageUrl})` }} className="relative w-full h-full bg-cover bg-center rounded-xl shadow shadow-britton-dark">
|
||||
<div className="absolute inset-0 bg-britton-light/30" />
|
||||
</div> */}
|
||||
</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,
|
||||
</div>
|
||||
<div className={classnames("w-2/9 relative z-45 flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]",
|
||||
cardBGColor, cardVhadowColor,
|
||||
{
|
||||
"ml-[calc(2/9*100%)]" : !invert,
|
||||
"ml-[calc(5/9*100%)]" : invert
|
||||
}
|
||||
)}>
|
||||
<Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
|
||||
Learn More
|
||||
</Link>
|
||||
{/* <div className={classnames(
|
||||
"rounded-b-4xl z-40",
|
||||
cardBGColor,
|
||||
{
|
||||
"rounded-l-3xl" : !invert,
|
||||
"rounded-r-3xl" : invert
|
||||
"w-1/9" : !invert,
|
||||
"w-6/9" : 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 style={{ backgroundImage: `url(${imageUrl})` }} className="w-full h-full bg-cover bg-center rounded-3xl" />
|
||||
</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={learnMoreUrl ? learnMoreUrl : '/'} className="hover:text-britton-accent">
|
||||
<div className={classnames('w-full h-full rounded-tr-2xl', parentBgColor)} />
|
||||
</div> */}
|
||||
{/* <div className={classnames("w-2/9 z-45 flex flex-col justify-start pb-4 text-center shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-b-3xl rounded-out-t-3xl", cardBGColor, cardVhadowColor)}>
|
||||
<Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
|
||||
Learn More
|
||||
</Link>
|
||||
</div> */}
|
||||
{/* <div className={classnames("w-2/9 z-45 rounded-b-4xl", parentBgColor)}>
|
||||
</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)} />
|
||||
"rounded-b-4xl",
|
||||
cardBGColor,
|
||||
{
|
||||
"w-6/9" : !invert,
|
||||
"w-1/9" : invert,
|
||||
}
|
||||
)}>
|
||||
<div className={classnames(
|
||||
'w-full h-full rounded-tl-2xl', parentBgColor)} />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+24
-22
@@ -15,6 +15,22 @@ export interface MenuItem {
|
||||
}
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{
|
||||
id: "members",
|
||||
title: "Members",
|
||||
children: [
|
||||
{
|
||||
id: "findMedicalProvider",
|
||||
title: "Find a Medical Provider",
|
||||
route: "",
|
||||
},
|
||||
{
|
||||
id: "obtainRxInformation",
|
||||
title: "Obtain Rx Information",
|
||||
route: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "employers",
|
||||
title: "Employers",
|
||||
@@ -36,22 +52,6 @@ const menuItems: MenuItem[] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "members",
|
||||
title: "Members",
|
||||
children: [
|
||||
{
|
||||
id: "findMedicalProvider",
|
||||
title: "Find a Medical Provider",
|
||||
route: "",
|
||||
},
|
||||
{
|
||||
id: "obtainRxInformation",
|
||||
title: "Obtain Rx Information",
|
||||
route: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "providers",
|
||||
title: "Providers",
|
||||
@@ -81,8 +81,10 @@ const Navbar = () => {
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
// const viewportHeight = window.innerHeight;
|
||||
const subtractedHeight = window.innerHeight - 80;
|
||||
// Find pixels from top to bottom of "tag line" div
|
||||
if (window.scrollY > 280) {
|
||||
if (window.scrollY > subtractedHeight) {
|
||||
setIsScrolled(true);
|
||||
} else {
|
||||
setIsScrolled(false);
|
||||
@@ -97,16 +99,16 @@ const Navbar = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 left-0 z-50 hidden lg:flex justify-center">
|
||||
<nav className="sticky top-0 left-0 z-50 hidden lg:flex h-[85px] justify-center bg-transparent">
|
||||
<div className={classnames(
|
||||
"w-11/12 bg-britton-neutral px-1 text-britton-dark rounded-b-3xl", {
|
||||
"min-h-6 pb-1 border-b-2 border-x-2 border-britton-dark" : isScrolled,
|
||||
"min-h-20 pb-4" : !isScrolled
|
||||
"h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
|
||||
"h-full pb-4" : !isScrolled
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="container mx-auto justify-between items-center flex">
|
||||
<div className={classnames('rounded-b-3xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
|
||||
<div className={classnames('rounded-b-2xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
|
||||
<Image
|
||||
src="/images/bbstpa-forsite.png"
|
||||
alt="Britton Logo"
|
||||
@@ -114,7 +116,7 @@ const Navbar = () => {
|
||||
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})}>
|
||||
<div className={classnames('rounded-b-2xl py-2 mb-1 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
|
||||
<Link href="/">
|
||||
Britton Benefit Services
|
||||
</Link>
|
||||
|
||||
+13
-16
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { bgColor, textColor } from './InfoCard'
|
||||
import { textColor, bgColor } from '@/interfaces/common'
|
||||
|
||||
interface TaglineProps {
|
||||
className?: string;
|
||||
@@ -20,25 +20,22 @@ const Tagline: React.FC<TaglineProps> = (
|
||||
) => {
|
||||
|
||||
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 className='h-[calc(100vh-85px)]'>
|
||||
<div className="w-full h-screen aspect-16/9 absolute top-0 left-0 bg-britton-medium bg-blend-soft-light bg-[url('/images/bg.jpg')] bg-cover bg-position-[center_-4.5rem] rounded-b-3xl">
|
||||
<div className="flex flex-col justify-center items-center py-20">
|
||||
<div className="w-11/12 flex justify-start mt-58">
|
||||
<div className="w-1/2 relative bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl rounded-out-br-3xl py-3 px-4 ml-110">
|
||||
{textTop}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-11/12 flex justify-end">
|
||||
<div className="w-1/2 relative bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl rounded-out-tl-3xl py-3 px-4 mr-20">
|
||||
{textBottom}
|
||||
</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>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
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-medium-rgb" | "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
|
||||
|
||||
export interface brittonRGB {
|
||||
[key: string]: string;
|
||||
}
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
declare global {
|
||||
type textColors = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
|
||||
type bgColors = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
|
||||
}
|
||||
|
||||
export {};
|
||||
+23
-27
@@ -4,60 +4,57 @@ import Tagline from "../components/Tagline";
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<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/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/doctor.png"
|
||||
sectionBgColor="bg-britton-dark"
|
||||
parentBgColor="bg-britton-dark"
|
||||
cardBGColor="bg-britton-medium"
|
||||
bodyTextColor="text-britton-light"
|
||||
invert
|
||||
>
|
||||
Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your insurance provider will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
|
||||
<br />
|
||||
While there are still fixed costs with self-funded plans, such as administrative fees, stop-loss premiums and any other set fees charged per employee, your employee premiums are billed on a per-claim basis.
|
||||
</InfoCard>
|
||||
<div className='bg-britton-neutral rounded-3xl'>
|
||||
<div className='z-10 bg-britton-medium w-full h-full rounded-3xl'>
|
||||
<InfoCard
|
||||
title="Regulatory Compliance"
|
||||
imageUrl="/images/doctor.png"
|
||||
sectionBgColor="bg-britton-neutral"
|
||||
cardBGColor="bg-britton-dark"
|
||||
bodyTextColor="text-britton-light"
|
||||
title="Self-Funded Plans"
|
||||
imageUrl='/images/doctor.png'
|
||||
parentBgColor="bg-britton-medium"
|
||||
cardBGColor="bg-britton-neutral"
|
||||
bodyTextColor="text-britton-dark"
|
||||
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
|
||||
invert
|
||||
>
|
||||
At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make employee benefits more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
|
||||
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="Benefit Access & Online Support"
|
||||
imageUrl="/images/doctor.png"
|
||||
sectionBgColor="bg-britton-dark"
|
||||
parentBgColor="bg-britton-dark"
|
||||
cardBGColor="bg-britton-light"
|
||||
bodyTextColor="text-britton-medium"
|
||||
invert
|
||||
>
|
||||
We offer a wide range of online services to help streamline and automate the benefit process for you and your employees. This means easier access to the benefit information you need and faster action on individual claims. By logging in to any of the services we provide, you can look up in-network providers through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
|
||||
</InfoCard>
|
||||
<div className='bg-britton-neutral rounded-3xl'>
|
||||
<InfoCard
|
||||
title="Regulatory Compliance"
|
||||
imageUrl="/images/doctor.png"
|
||||
parentBgColor="bg-britton-neutral"
|
||||
cardBGColor="bg-britton-dark"
|
||||
bodyTextColor="text-britton-light"
|
||||
invert
|
||||
>
|
||||
At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make employee benefits more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
|
||||
</InfoCard>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -75,7 +72,6 @@ export default function Home() {
|
||||
<div className="bg-britton-medium h-full w-3/12 rounded-3xl"></div>
|
||||
<div className="bg-britton-light h-full w-3/12 rounded-3xl"></div>
|
||||
</div> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@import "tailwind-rounded-out";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
@@ -14,6 +15,11 @@
|
||||
--color-britton-neutral: #E0E0E0;
|
||||
--color-britton-accent2: #B06E30;
|
||||
--color-britton-accent: #D38F4A;
|
||||
|
||||
/* for testing */
|
||||
/* --color-britton-light: #7DF9FF; */
|
||||
|
||||
|
||||
/* --color-britton-neutral: #EEF2E3; */
|
||||
/* name colors like below AFTER we settle on them for sure */
|
||||
/* --color-britton-deepcove: #04153E;
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'britton-dark-rgb': 'rgb(var(--color-britton-dark))',
|
||||
'britton-medium-rgb': 'rgb(var(--color-britton-medium))',
|
||||
'britton-light-rgb': 'rgb(var(--color-britton-light))',
|
||||
'britton-electric-rgb': 'rgb(var(--color-britton-electric))',
|
||||
'britton-electric2-rgb': 'rgb(var(--color-britton-electric2))',
|
||||
'britton-neutral-rgb': 'rgb(var(--color-britton-neutral))',
|
||||
'britton-accent2-rgb': 'rgb(var(--color-britton-accent2))',
|
||||
'britton-accent-rgb': 'rgb(var(--color-britton-accent))',
|
||||
},
|
||||
boxShadow: {
|
||||
'britton': '10px 10px 5px 0px'
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user