From 76a1a828dc01cefa3fec514464d808f87ba18d2f Mon Sep 17 00:00:00 2001
From: Jason Jordan <jasonj@discoveryinsurance.com>
Date: Thu, 10 Jul 2025 11:52:38 -0400
Subject: [PATCH] trying out responsive hero on mac

---
 src/components/Dropdown.tsx  |   4 +-
 src/components/InfoCard.tsx  |   8 --
 src/components/Navbar.tsx    | 144 +++++++++++++++++------------------
 src/components/Tagline.tsx   |  26 ++++++-
 src/pages/_app.tsx           |  19 ++---
 src/pages/index-services.tsx |   2 +-
 src/pages/index.tsx          |  19 +----
 7 files changed, 106 insertions(+), 116 deletions(-)

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index bd6908d..31dcd0f 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -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>
                     :
diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
index 25e7542..1b5ce14 100644
--- a/src/components/InfoCard.tsx
+++ b/src/components/InfoCard.tsx
@@ -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',
                                     {
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9fc1a57..20b315f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -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
diff --git a/src/components/Tagline.tsx b/src/components/Tagline.tsx
index c475c4a..a50e60d 100644
--- a/src/components/Tagline.tsx
+++ b/src/components/Tagline.tsx
@@ -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>
+</>
     );
 };
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 00f9be3..bf9c053 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -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)}>
-          <Navbar />
-          <Component {...pageProps} />
-          <Footer />
-      </main>
-    </>
+    <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>
   );
 }
 
diff --git a/src/pages/index-services.tsx b/src/pages/index-services.tsx
index 1bbd8e8..ea4889a 100644
--- a/src/pages/index-services.tsx
+++ b/src/pages/index-services.tsx
@@ -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'
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 115a484..504eb95 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -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> */}
     </>
   );
 }
\ No newline at end of file