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

trying out responsive hero on mac

Browse Source
This commit is contained in:
Jason Jordan
2025-07-10 11:52:38 -04:00
parent 06f29c816a
commit 76a1a828dc
7 changed files with 106 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dropdown.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export default function Dropdown(props: Props) {
className="hover:text-britton-light font-semibold text-lg" className="hover:text-britton-light font-semibold text-lg"
onClick={toggle} onClick={toggle}
>{item.title}</Button> >{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 => menuItems.map(item =>
<> <>
@@ -73,7 +73,7 @@ export default function Dropdown(props: Props) {
isOpen isOpen
? ?
<div <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} onClick={toggle}
></div> ></div>
: :
src/components/InfoCard.tsx
-8
View File
@@ -56,7 +56,6 @@ const InfoCard: React.FC<InfoCardProps> = (
"flex-row-reverse" : invert, "flex-row-reverse" : invert,
} }
)}> )}>
{/* <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Company</div> */}
<div className={classnames( <div className={classnames(
"relative w-full pt-8 mb-2 ml-8 border-b-3", "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 "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( <div className={classnames(
'absolute bottom-0 left-0 mb-[2px] text-5xl text-left', 'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
{ {
src/components/Navbar.tsx
+71 -73
View File
@@ -14,66 +14,66 @@ export interface MenuItem {
children?: MenuItem[]; children?: MenuItem[];
} }
const menuItems: MenuItem[] = [ // const menuItems: MenuItem[] = [
{ // {
id: "members", // id: "members",
title: "Members", // title: "Members",
children: [ // children: [
{ // {
id: "findMedicalProvider", // id: "findMedicalProvider",
title: "Find a Medical Provider", // title: "Find a Medical Provider",
route: "", // route: "",
}, // },
{ // {
id: "obtainRxInformation", // id: "obtainRxInformation",
title: "Obtain Rx Information", // title: "Obtain Rx Information",
route: "", // route: "",
}, // },
], // ],
}, // },
{ // {
id: "employers", // id: "employers",
title: "Employers", // title: "Employers",
children: [ // children: [
{ // {
id: "employerServices", // id: "employerServices",
title: "Employer Services", // title: "Employer Services",
route: "", // route: "",
}, // },
{ // {
id: "selfFundedPlans", // id: "selfFundedPlans",
title: "Self-Funded Plans", // title: "Self-Funded Plans",
route: "", // route: "",
}, // },
{ // {
id: "controlHealthCareCosts", // id: "controlHealthCareCosts",
title: "Control Health Care Costs", // title: "Control Health Care Costs",
route: "", // route: "",
}, // },
], // ],
}, // },
{ // {
id: "providers", // id: "providers",
title: "Providers", // title: "Providers",
children: [ // children: [
{ // {
id: "eligibilityLookup", // id: "eligibilityLookup",
title: "Eligibility Lookup", // title: "Eligibility Lookup",
route: "", // route: "",
}, // },
{ // {
id: "contactBbs", // id: "contactBbs",
title: "Contact BBS", // title: "Contact BBS",
route: "", // route: "",
}, // },
], // ],
}, // },
{ // {
id: "brokers", // id: "brokers",
title: "Brokers", // title: "Brokers",
route: "", // route: "",
}, // },
]; // ];
const Navbar = () => { const Navbar = () => {
@@ -81,9 +81,7 @@ const Navbar = () => {
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
// const viewportHeight = window.innerHeight;
const subtractedHeight = window.innerHeight - 80; const subtractedHeight = window.innerHeight - 80;
// Find pixels from top to bottom of "tag line" div
if (window.scrollY > subtractedHeight) { if (window.scrollY > subtractedHeight) {
setIsScrolled(true); setIsScrolled(true);
} else { } else {
@@ -99,7 +97,7 @@ const Navbar = () => {
}, []); }, []);
return ( 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( <div className={classnames(
"w-11/12 bg-britton-neutral px-1 text-britton-dark rounded-b-3xl", { "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, "h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
@@ -121,34 +119,34 @@ const Navbar = () => {
Britton Benefit Services Britton Benefit Services
</Link> </Link>
</div> </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> <li>
<Link href="/services" className="hover:text-britton-light"> <Link href="/" className="hover:text-britton-light">
Employers Employers
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/contact" className="hover:text-britton-light"> <Link href="/" className="hover:text-britton-light">
Members Members
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/contact" className="hover:text-britton-light"> <Link href="/" className="hover:text-britton-light">
Providers Providers
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/contact" className="hover:text-britton-light"> <Link href="/" className="hover:text-britton-light">
Brokers Brokers
</Link> </Link>
</li> </li>
<li> <li>
<Link href="/contact" className="hover:text-britton-light"> <Link href="/" className="hover:text-britton-light">
Contact Us Services
</Link> </Link>
</li> </li>
</ul> */} </ul>
<div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}> {/* <div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
{menuItems.map((item) => { {menuItems.map((item) => {
return item.hasOwnProperty("children") ? return item.hasOwnProperty("children") ?
( (
@@ -159,7 +157,7 @@ const Navbar = () => {
</Link> </Link>
); );
})} })}
</div> </div> */}
<div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}> <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"> <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 Sign In
src/components/Tagline.tsx
+23 -3
View File
@@ -3,7 +3,6 @@
import { textColor, bgColor } from '@/interfaces/common' import { textColor, bgColor } from '@/interfaces/common'
interface TaglineProps { interface TaglineProps {
className?: string;
bgColor: bgColor; bgColor: bgColor;
textColor: textColor; textColor: textColor;
textTop: string; textTop: string;
@@ -11,7 +10,7 @@ interface TaglineProps {
} }
const Tagline: React.FC<TaglineProps> = ( const Tagline: React.FC<TaglineProps> = (
{ className, {
bgColor, bgColor,
textColor, textColor,
textTop, textTop,
@@ -20,7 +19,8 @@ const Tagline: React.FC<TaglineProps> = (
) => { ) => {
return ( 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="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="flex flex-col justify-center items-center py-20">
<div className="w-11/12 flex justify-start mt-58"> <div className="w-11/12 flex justify-start mt-58">
@@ -35,7 +35,27 @@ const Tagline: React.FC<TaglineProps> = (
</div> </div>
</div> </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> </div>
</>
); );
}; };
src/pages/_app.tsx
+8 -11
View File
@@ -1,24 +1,21 @@
import '../styles/globals.css'; import '../styles/globals.css';
import type { AppProps } from 'next/app'; 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 Navbar from '../components/Navbar';
import Footer from '../components/Footer'; import Footer from '../components/Footer';
import classNames from 'classnames'; import classNames from 'classnames';
// const font = Playfair_Display({ weight: '500',subsets: ['latin'] })
const font = Fraunces({ subsets: ['latin'] }) const font = Fraunces({ subsets: ['latin'] })
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
return ( return (
<> <main className={classNames("bg-britton-dark min-h-screen flex justify-center", font.className)}>
<main className={classNames("bg-britton-dark min-h-screen", font.className)}> <div className="max-w-[1920px]">
<Navbar /> <Navbar />
<Component {...pageProps} /> <Component {...pageProps} />
<Footer /> <Footer />
</main> </div>
</> </main>
); );
} }
src/pages/index-services.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export default function Home() {
<br /> <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. 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> </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 <InfoCard
title="Self-Funded Plans" title="Self-Funded Plans"
imageUrl='/images/pwn-webi-square.png' imageUrl='/images/pwn-webi-square.png'
src/pages/index.tsx
+1 -18
View File
@@ -19,7 +19,7 @@ export default function Home() {
<br /> <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. 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> </InfoCard>
<div className='z-10 bg-britton-newblue w-full h-full rounded-3xl'> <div className='bg-britton-newblue rounded-3xl'>
<InfoCard <InfoCard
title="Employers" title="Employers"
imageUrl='/images/employers-stock.jpg' 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. 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> </InfoCard>
</div> </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> */}
</> </>
); );
} }