trying out responsive hero on mac
This commit is contained in:
Jason Jordan
@@ -41,7 +41,7 @@ export default function Dropdown(props: Props) {
|
||||
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}`}>
|
||||
<div className={`absolute top-8 z-11 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
|
||||
{
|
||||
menuItems.map(item =>
|
||||
<>
|
||||
@@ -73,7 +73,7 @@ export default function Dropdown(props: Props) {
|
||||
isOpen
|
||||
?
|
||||
<div
|
||||
className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-britton-dark/40"
|
||||
className="fixed top-0 right-0 bottom-0 left-0 z-11 bg-britton-dark/40"
|
||||
onClick={toggle}
|
||||
></div>
|
||||
:
|
||||
|
||||
@@ -56,7 +56,6 @@ const InfoCard: React.FC<InfoCardProps> = (
|
||||
"flex-row-reverse" : invert,
|
||||
}
|
||||
)}>
|
||||
{/* <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Company</div> */}
|
||||
<div className={classnames(
|
||||
"relative w-full pt-8 mb-2 ml-8 border-b-3",
|
||||
{
|
||||
@@ -64,13 +63,6 @@ const InfoCard: React.FC<InfoCardProps> = (
|
||||
"border-britton-accent mr-100" : invert
|
||||
}
|
||||
)}>
|
||||
{/* <div className={classnames(
|
||||
"w-full text-5xl text-left pt-8 pl-8 rounded-l-2xl underline underline-offset-8 decoration-2",
|
||||
{
|
||||
"text-britton-accent decoration-britton-newblue" : !invert,
|
||||
"text-britton-dark font-semibold decoration-britton-accent" : invert
|
||||
}
|
||||
)}> */}
|
||||
<div className={classnames(
|
||||
'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
|
||||
{
|
||||
|
||||
+71
-73
@@ -14,66 +14,66 @@ export interface MenuItem {
|
||||
children?: 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",
|
||||
children: [
|
||||
{
|
||||
id: "employerServices",
|
||||
title: "Employer Services",
|
||||
route: "",
|
||||
},
|
||||
{
|
||||
id: "selfFundedPlans",
|
||||
title: "Self-Funded Plans",
|
||||
route: "",
|
||||
},
|
||||
{
|
||||
id: "controlHealthCareCosts",
|
||||
title: "Control Health Care Costs",
|
||||
route: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "providers",
|
||||
title: "Providers",
|
||||
children: [
|
||||
{
|
||||
id: "eligibilityLookup",
|
||||
title: "Eligibility Lookup",
|
||||
route: "",
|
||||
},
|
||||
{
|
||||
id: "contactBbs",
|
||||
title: "Contact BBS",
|
||||
route: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "brokers",
|
||||
title: "Brokers",
|
||||
route: "",
|
||||
},
|
||||
];
|
||||
// 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",
|
||||
// children: [
|
||||
// {
|
||||
// id: "employerServices",
|
||||
// title: "Employer Services",
|
||||
// route: "",
|
||||
// },
|
||||
// {
|
||||
// id: "selfFundedPlans",
|
||||
// title: "Self-Funded Plans",
|
||||
// route: "",
|
||||
// },
|
||||
// {
|
||||
// id: "controlHealthCareCosts",
|
||||
// title: "Control Health Care Costs",
|
||||
// route: "",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: "providers",
|
||||
// title: "Providers",
|
||||
// children: [
|
||||
// {
|
||||
// id: "eligibilityLookup",
|
||||
// title: "Eligibility Lookup",
|
||||
// route: "",
|
||||
// },
|
||||
// {
|
||||
// id: "contactBbs",
|
||||
// title: "Contact BBS",
|
||||
// route: "",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: "brokers",
|
||||
// title: "Brokers",
|
||||
// route: "",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const Navbar = () => {
|
||||
|
||||
@@ -81,9 +81,7 @@ 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 > subtractedHeight) {
|
||||
setIsScrolled(true);
|
||||
} else {
|
||||
@@ -99,7 +97,7 @@ const Navbar = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 left-0 z-50 hidden lg:flex h-[85px] justify-center bg-transparent">
|
||||
<nav className="sticky top-0 left-0 z-10 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", {
|
||||
"h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
|
||||
@@ -121,34 +119,34 @@ const Navbar = () => {
|
||||
Britton Benefit Services
|
||||
</Link>
|
||||
</div>
|
||||
{/* <ul className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
|
||||
<ul className={classnames("flex space-x-4 font-semibold text-xl", {"pl-2" : isScrolled})}>
|
||||
<li>
|
||||
<Link href="/services" className="hover:text-britton-light">
|
||||
<Link href="/" className="hover:text-britton-light">
|
||||
Employers
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="hover:text-britton-light">
|
||||
<Link href="/" className="hover:text-britton-light">
|
||||
Members
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="hover:text-britton-light">
|
||||
<Link href="/" className="hover:text-britton-light">
|
||||
Providers
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="hover:text-britton-light">
|
||||
<Link href="/" className="hover:text-britton-light">
|
||||
Brokers
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="hover:text-britton-light">
|
||||
Contact Us
|
||||
<Link href="/" className="hover:text-britton-light">
|
||||
Services
|
||||
</Link>
|
||||
</li>
|
||||
</ul> */}
|
||||
<div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
|
||||
</ul>
|
||||
{/* <div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
|
||||
{menuItems.map((item) => {
|
||||
return item.hasOwnProperty("children") ?
|
||||
(
|
||||
@@ -159,7 +157,7 @@ const Navbar = () => {
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div> */}
|
||||
<div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}>
|
||||
<Button className="bg-britton-neutral text-britton-accent2 hover:text-britton-accent py-1 px-4 rounded border-1 border-britton-accent2 hover:border-britton-accent">
|
||||
Sign In
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import { textColor, bgColor } from '@/interfaces/common'
|
||||
|
||||
interface TaglineProps {
|
||||
className?: string;
|
||||
bgColor: bgColor;
|
||||
textColor: textColor;
|
||||
textTop: string;
|
||||
@@ -11,7 +10,7 @@ interface TaglineProps {
|
||||
}
|
||||
|
||||
const Tagline: React.FC<TaglineProps> = (
|
||||
{ className,
|
||||
{
|
||||
bgColor,
|
||||
textColor,
|
||||
textTop,
|
||||
@@ -20,7 +19,8 @@ const Tagline: React.FC<TaglineProps> = (
|
||||
) => {
|
||||
|
||||
return (
|
||||
<div className='h-[calc(100vh-85px)]'>
|
||||
<>
|
||||
{/* <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">
|
||||
@@ -35,7 +35,27 @@ const Tagline: React.FC<TaglineProps> = (
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className='h-[calc(100vh-85px)] lg:min-h-[640px] xl:min-h-[786px] 2xl:min-h-[1080px] flex'>
|
||||
<div className="absolute top-0 left-0 w-full aspect-16/9 bg-cover bg-center bg-[url('/images/bg.jpg')] bg-britton-medium bg-blend-soft-light bg-position-[center_-4.5rem] rounded-b-3xl">
|
||||
<div className="relative w-full h-full overflow-hidden">
|
||||
<div className="absolute flex flex-col w-3/7 top-1/2 right-9/40">
|
||||
<div className="flex justify-start">
|
||||
<div className="w-4/5 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">
|
||||
{textTop}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="w-4/5 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">
|
||||
{textBottom}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+4
-7
@@ -1,24 +1,21 @@
|
||||
import '../styles/globals.css';
|
||||
import type { AppProps } from 'next/app';
|
||||
import { Playfair_Display, Fraunces } from 'next/font/google'
|
||||
import { Fraunces } from 'next/font/google'
|
||||
import Navbar from '../components/Navbar';
|
||||
import Footer from '../components/Footer';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// const font = Playfair_Display({ weight: '500',subsets: ['latin'] })
|
||||
const font = Fraunces({ subsets: ['latin'] })
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className={classNames("bg-britton-dark min-h-screen", font.className)}>
|
||||
<main className={classNames("bg-britton-dark min-h-screen flex justify-center", font.className)}>
|
||||
<div className="max-w-[1920px]">
|
||||
<Navbar />
|
||||
<Component {...pageProps} />
|
||||
<Footer />
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function Home() {
|
||||
<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='z-10 bg-britton-newblue w-full h-full rounded-3xl'>
|
||||
<div className='bg-britton-newblue w-full h-full rounded-3xl'>
|
||||
<InfoCard
|
||||
title="Self-Funded Plans"
|
||||
imageUrl='/images/pwn-webi-square.png'
|
||||
|
||||
+1
-18
@@ -19,7 +19,7 @@ export default function Home() {
|
||||
<br />
|
||||
While there are still fixed costs with <InlineLink>self-funded plans</InlineLink>, 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='z-10 bg-britton-newblue w-full h-full rounded-3xl'>
|
||||
<div className='bg-britton-newblue rounded-3xl'>
|
||||
<InfoCard
|
||||
title="Employers"
|
||||
imageUrl='/images/employers-stock.jpg'
|
||||
@@ -44,23 +44,6 @@ export default function Home() {
|
||||
At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make <InlineLink>employee benefits</InlineLink> 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="flex w-full h-70 justify-between items-center pt-30">
|
||||
<div className="bg-britton-neutral h-full w-3/12 rounded-3xl"></div>
|
||||
<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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user