Responsive done for computer screens

src/app/(informational)/brokers/page.tsx

@@ -0,0 +1,63 @@
+import { Schibsted_Grotesk } from 'next/font/google'
+import classnames from 'classnames';
+import InlineLink from "@/components/InlineLink";
+import QuickAccessLinks, { QuickLink } from '@/components/QuickAccessLinks';
+import LandingPageHeader from '@/components/LandingPageHeader';
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+const quickLinks: QuickLink[] = [
+    {
+        display: "Member Login/Registration",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 1",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 2",
+        url: "/"
+    },
+    {
+        display: "Link to another Thing",
+        url: "/"
+    }
+]
+
+
+export default function Brokers() {
+  return (
+    <div className="w-full">
+        <LandingPageHeader headerText="Brokers" />
+        <div className="w-full flex justify-center pb-30">
+            <div className="w-11/12 z-1">
+                <div className={classnames("w-3/5 text-4xl text-bluemana px-10 -mb-14", font.className)}>
+                    Partner with Britton Benefit Services to Grow Your Business and Serve Your Clients
+                </div>
+                <QuickAccessLinks 
+                    imageUrl="/images/brokers-stock.jpg"
+                    quickLinks={quickLinks}
+                />
+                <div className={classnames("w-full text-2xl px-10", font.className)}>
+                    In the ever-changing health care market, finding cost-effective plans to help your clients save money is a serious challenge. At Britton Benefit Services, LLC we have a proven ourselves as leaders in Third-Party Benefits Administration through our performance in finding employers the right self-funded plans that work for them. Whether you need to review a plan document, manage information reports, review provider directories, or you are looking for access to marketing materials, you’ve come to the right place.
+                    <br />
+                    <br />
+                    Broker Services from Britton Benefit Services
+                    <ul className="flex flex-col pl-10 leading-4 list-disc list-inside">
+                        <li>
+                            Discuss your client’s needs and provide additional insight
+                        </li>
+                        <li>
+                            Learn more about our company and self-funding
+                        </li>
+                        <li>
+                            Request a free, no-obligation quote to see the cost savings we can help you provide to your client
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}

src/app/(informational)/employers/page.tsx

@@ -0,0 +1,60 @@
+import { Schibsted_Grotesk } from 'next/font/google'
+import classnames from 'classnames';
+import InlineLink from "@/components/InlineLink";
+import QuickAccessLinks, { QuickLink } from '@/components/QuickAccessLinks';
+import LandingPageHeader from '@/components/LandingPageHeader';
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+const quickLinks: QuickLink[] = [
+    {
+        display: "Employer Login/Registration",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 1",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 2",
+        url: "/"
+    },
+    {
+        display: "Link to another Thing",
+        url: "/"
+    }
+]
+
+export default function Employers() {
+  return (
+    <div className="w-full">
+        <LandingPageHeader headerText="Employers" />
+        <div className="w-full flex justify-center pb-30">
+            <div className="w-11/12 z-1">
+                <div className={classnames("w-3/5 text-4xl text-bluemana px-10 -mb-14", font.className)}>
+                    Making Your Benefits Work for You and Your Employees
+                </div>
+                <QuickAccessLinks 
+                    imageUrl="/images/employers-stock.jpg"
+                    quickLinks={quickLinks}
+                />
+                <div className={classnames("w-full text-2xl px-10", font.className)}>
+                    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.
+                    <br />
+                    <br />
+                    In addition to the generous cost savings for you and your employees, we also 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 do the following:
+                    <br />
+                    <br />
+                    Look up in-network providers through our list of PPOs<br />
+                    • File insurance claims and review a claim’s status<br />
+                    • Research which type of plan is best for you<br />
+                    • Control your health care costs by selecting a PPO that’s actively competing for your business.
+                    <br />
+                    <br />
+                    Request a free, no-obligation quote today, and learn how our completely customizable benefits solutions can work for you. To learn more about our company and to discover the benefits of third-party benefits administration, review our services or contact us today.
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}

src/app/(informational)/layout.tsx

@@ -12,7 +12,7 @@ export default async function LandingPageLayout({ children }: { children: React.
 
     return (
         <>
-            <Navbar />
+            <Navbar collapseHeight={40} />
             <div className="w-full relative">
                 <div className="absolute bottom-0 left-0 flex items-end w-full h-full">
                     <div className="w-1/24 h-full flex justify-end">
@@ -23,7 +23,7 @@ export default async function LandingPageLayout({ children }: { children: React.
                         </div>
                     </div>
                 </div>
-                <div className="w-full flex justify-start items-end pt-30">
+                {/* <div className="w-full flex justify-start items-end pt-30">
                     <div className="w-1/24 h-full flex justify-end">
                         <div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
                             <div className={classnames(
@@ -45,12 +45,10 @@ export default async function LandingPageLayout({ children }: { children: React.
                             )}>
                         </div>
                     </div>
-                </div>
-                <div className="w-full flex justify-center pb-30">
-                    <div className="w-11/12 z-1">
+                </div> */}
+                <div className="w-full">
                     {children}
                 </div>
-                </div>
                 <Footer />
             </div>
         </>

src/app/(informational)/members/page.tsx

@@ -2,12 +2,13 @@ import { Schibsted_Grotesk } from 'next/font/google'
 import classnames from 'classnames';
 import InlineLink from "@/components/InlineLink";
 import QuickAccessLinks, { QuickLink } from '@/components/QuickAccessLinks';
+import LandingPageHeader from '@/components/LandingPageHeader';
 
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
 const quickLinks: QuickLink[] = [
     {
-        display: "Login/Registration",
+        display: "Member Login/Registration",
         url: "/"
     },
     {
@@ -27,7 +28,13 @@ const quickLinks: QuickLink[] = [
 
 export default function Members() {
   return (
-    <>
+    <div className="w-full">
+        <LandingPageHeader headerText="Members" />
+        <div className="w-full flex justify-center pb-30">
+            <div className="w-11/12 z-1">
+                <div className={classnames("w-3/5 text-4xl text-bluemana px-10 -mb-14", font.className)}>
+                    Member Tagline will go here when we come up with the wording
+                </div>
                 <QuickAccessLinks 
                     imageUrl="/images/members-stock.jpg"
                     quickLinks={quickLinks}
@@ -44,6 +51,8 @@ export default function Members() {
                     <br />
                     That's why our member portal offers you 24/7 access to things like in-network provider lists, claim forms and prescription medication information. Select from any of the links below to get access to the benefit information and forms you need to file a claim, search for a provider or learn more about your benefits plan. 
                 </div>
-    </>
+            </div>
+        </div>
+    </div>
   )
 }

src/app/(informational)/providers/page.tsx

@@ -0,0 +1,49 @@
+import { Schibsted_Grotesk } from 'next/font/google'
+import classnames from 'classnames';
+import InlineLink from "@/components/InlineLink";
+import QuickAccessLinks, { QuickLink } from '@/components/QuickAccessLinks';
+import LandingPageHeader from '@/components/LandingPageHeader';
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+const quickLinks: QuickLink[] = [
+    {
+        display: "Member Login/Registration",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 1",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 2",
+        url: "/"
+    },
+    {
+        display: "Link to another Thing",
+        url: "/"
+    }
+]
+
+
+export default function Providers() {
+  return (
+    <div className="w-full">
+        <LandingPageHeader headerText="Providers" />
+        <div className="w-full flex justify-center pb-6">
+            <div className="w-11/12 z-1">
+                <div className={classnames("w-3/5 text-4xl text-bluemana px-10 -mb-14", font.className)}>
+                    Easy Access to HIPAA Compliant Patient Information and Much More
+                </div>
+                <QuickAccessLinks 
+                    imageUrl="/images/providers-stock.jpg"
+                    quickLinks={quickLinks}
+                />
+                <div className={classnames("w-full text-2xl px-10", font.className)}>
+                    You know that as a provider, you have a responsibility to your patients to respond promptly and accurately. At Britton Benefit Services, LLC it’s our goal to provide you with the prompt response to your inquiry and easy access to the information you need to care for your patients. In addition to 24/7 online support and access to HIPAA compliant patient information, you can find the information you need to verify eligibility, confirm benefits and check claim statuses. Simply select the navigation above to access the forms and information you need.
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}

src/app/dashboard/layout.tsx

@@ -6,7 +6,6 @@ import Script from 'next/script';
 
 import AccountDropdown from '../../components/AccountDropdown';
 import SideNav from "@/components/SideNav";
-import DashboardHeader from "@/components/DashboardHeader";
 import Image from 'next/image';
 import classnames from 'classnames';
 
@@ -34,12 +33,12 @@ export default async function DashboardLayout({ children }: { children: React.Re
         </div>
         <div className="w-full h-full flex items-start">
             <SideNav
-                maxWidth="max-w-31"
+                maxWidth="w-[16vw]"
                 bgColor="bg-atmosphere"
                 navItems={pageNavItems}
             />
-            <div className="w-full flex flex-col items-end">
-                <div className="h-20 w-[calc(100vw-124px)] flex justify-between items-center">
+            <div className="w-full min-w-[89vw] max-w-[95vw] flex flex-col items-end">
+                <div className="w-[90.15vw] h-20 flex justify-between items-center">
                     <div className={classnames('flex items-center')}>
                         <div className="-ml-8.5 z-2">
                             <Image
@@ -55,15 +54,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
                     </div>
                 </div>
                 <div className="w-full h-full flex justify-start">
-                    <div className="flex flex-col w-full ml-8 pt-5 2xl:pt-7">
-                        <DashboardHeader
-                            userDisplayName="Robert La'Blah"
-                        />
-                        <div className="flex w-full">
                     {children}
-                            <div className="w-1/24 h-full" />
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>

src/app/dashboard/member/page.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
 
+import DashboardHeader from "@/components/DashboardHeader";
 import FindProvider from '@/components/FindProvider';
 import InsuranceCardWidget from '@/components/InsuranceCard';
 import DeductableProgressWidget from '@/components/DeductableProgressWidget';
@@ -8,8 +9,12 @@ import BenefitsAAGWidget from '@/components/BenefitsAAGWidget';
 
 export default function Member() {
   return (
-    <div className="w-full">
-        <div className={classnames("w-full flex justify-start pt-4 z-2 space-x-4")}>
+    <div className="flex flex-col w-full pl-8 pt-5 2xl:pt-7">
+        <DashboardHeader
+            userDisplayName="Robert La'Blah"
+        />
+        <div className="flex w-full pr-23">
+            <div className={classnames("w-full flex flex-col xl:flex-row justify-stretch pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
                 <div className="flex flex-col space-y-4">
                     <div className="flex space-x-4">
                         <DeductableProgressWidget />
@@ -21,5 +26,6 @@ export default function Member() {
                 <BenefitsAAGWidget />
             </div>
         </div>
+    </div>
   )
 }

src/app/page.tsx

@@ -7,7 +7,7 @@ import Footer from '@/components/Footer';
 export default function Home() {
   return (
     <>
-        <Navbar />
+        <Navbar collapseHeight={730} />
         <Tagline 
           bgColor="bg-bluemana"
           textColor="text-deepcove"

src/components/BenefitsAAGWidget.tsx

@@ -11,7 +11,7 @@ interface BenefitsAAGWidgetProps {
 const BenefitsAAGWidget = () => {
     
   return (
-    <div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
+    <div className="2xl:min-w-[32vw] xl:min-w-[30vw] w-full flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
         <p className="text-3xl underline py-2">Benefits At A Glance</p>
         <p className={classnames("text-2xl font-semibold py-2", font.className)}>CLASSIC 5K 100/5000</p>
         <div className={classnames("w-full flex justify-between", font.className)}>

src/components/DashboardHeader.tsx

@@ -13,13 +13,13 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({ userDisplayName }) =>
         )}>
             {userDisplayName}
         </div>
-        <div className="flex items-center">
+        <div className="w-full flex items-center justify-end">
             <div className={classnames(
-                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
+                "w-full h-[6px] rounded-s bg-atmosphere z-1"
                 )}>
             </div>
-            <div className="w-[60px] h-full flex justify-end">
-                <div className="w-full flex flex-col mr-[27px] justify-start z-1 bg-deepcove">
+            <div className="w-[60px] h-full flex justify-start flex-shrink-0">
+                <div className="w-[33px] flex flex-col justify-start z-1 bg-deepcove">
                     <div className={classnames(
                         "h-9 w-full -mb-[3px] relative border-b-6 border-r-6 rounded-br-4xl rounded-out-bl-4xl bg-copper border-atmosphere"
                         )} />

src/components/DeductableProgressWidget.tsx

@@ -13,7 +13,7 @@ interface DeductableProgressWidgetProps {
 const DeductableProgressWidget = () => {
     
   return (
-    <div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
+    <div className="2xl:min-w-[32vw] xl:min-w-[30vw] min-w-[50vw] flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
         <div className="flex justify-between items-end px-4">
             <p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
             <div className="flex flex-col items-center">

src/components/FindProvider.tsx

@@ -16,7 +16,7 @@ interface FindProviderProps {
 const FindProvider: React.FC<FindProviderProps> = ({ zipOnly }) => {
     
   return (
-    <div className="flex z-1">
+    <div className="2xl:min-w-[48vw] xl:min-w-[45vw] flex z-1">
         <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl">
             <div className="w-full pb-2 flex justify-center text-2xl text-bronze font-semibold">
                 <p>Find A Provider By...</p>

src/components/InsuranceCard.tsx

@@ -10,10 +10,10 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
 const InsuranceCardWidget = () => {
     
   return (
-    <div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
+    <div className="2xl:min-w-[16vw] xl:min-w-[15vw] flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
         <div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
         <FaRegIdCard size={150} className="text-bluemana" />
-        <div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
+        <div className={classnames("w-full 2xl:min-w-[9vw] xl:min-w-[11vw] flex justify-between items-center space-x-1", font.className)}>
             <Button className="hover:text-bronze">
                 View
             </Button>

src/components/LandingPageHeader.tsx

@@ -0,0 +1,36 @@
+import classnames from 'classnames';
+
+interface LandingPageHeaderProps {
+  headerText: string;
+}
+
+const LandingPageHeader: React.FC<LandingPageHeaderProps> = ({ headerText }) => {
+    
+  return (
+    <div className="w-full flex justify-start items-end pt-30">
+        <div className="w-1/24 h-full flex justify-end">
+            <div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
+                <div className={classnames(
+                    "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl bg-bluetang border-atmosphere"
+                    )} />
+                <div className={classnames(
+                    "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl bg-bluetang border-atmosphere"
+                    )} />
+            </div>
+        </div>
+        <div className={`w-11/12 flex flex-col justify-end mb-[14px]`}>
+            <div className={classnames(
+                "text-5xl text-left ml-10 z-1 text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove text-bronze"
+            )}>
+                {headerText}
+            </div>
+            <div className={classnames(
+                "w-full h-[6px] rounded-r bg-atmosphere"
+                )}>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default LandingPageHeader;

src/components/Navbar.tsx

@@ -74,13 +74,18 @@ export interface MenuItem {
 //     },
 // ];
 
-const Navbar = () => {
+interface NavbarProps {
+    collapseHeight: number;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ collapseHeight }) => {
     const [isScrolled, setIsScrolled] = useState(false);
 
     useEffect(() => {
         const handleScroll = () => {
-            const subtractedHeight = window.innerHeight - 80;
-            if (window.scrollY > subtractedHeight) {
+            // const subtractedHeight = window.innerHeight - 80;
+            const subtractedHeight = window.innerHeight - collapseHeight;
+            if (window.scrollY > collapseHeight) {
                 setIsScrolled(true);
             } else {
                 setIsScrolled(false);
@@ -105,12 +110,14 @@ const Navbar = () => {
         >
             <div className="w-full px-3 justify-between items-center flex">
                 <div className={classnames('rounded-b-2xl bg-deepcove w-72', {"hidden" : isScrolled})}>
+                    <Link href="/">
                         <Image
                             src="/images/bbstpa-forsite.png"
                             alt="Britton Logo"
                             width={205}
                             height={60}
                         />
+                    </Link>
                 </div>
                 <div className={classnames('rounded-b-2xl py-2 mb-1 bg-deepcove font-semibold text-platinum text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
                     <Link href="/">
@@ -129,12 +136,12 @@ const Navbar = () => {
                         </Link>
                     </li>
                     <li>
-                        <Link href="/" className="hover:text-bluemana">
+                        <Link href="/providers" className="hover:text-bluemana">
                             Providers
                         </Link>
                     </li>
                     <li>
-                        <Link href="/" className="hover:text-bluemana">
+                        <Link href="/brokers" className="hover:text-bluemana">
                             Brokers
                         </Link>
                     </li>

src/components/RecentClaimsWidget.tsx

@@ -12,7 +12,7 @@ interface RecentClaimsWidgetProps {
 const RecentClaimsWidget = () => {
     
   return (
-    <div className="flex z-1">
+    <div className="2xl:min-w-[48vw] xl:min-w-[45vw] flex z-1">
         <div className="w-full flex flex-col px-4 py-3 border border-6 border-bronze rounded-4xl space-y-2">
             <div className="w-full flex justify-center text-2xl text-atmosphere font-semibold">
                 <p>Recent Claims</p>

src/components/SideNav.tsx

@@ -32,9 +32,10 @@ const SideNav: React.FC<SideNavProps> = (
   return (
     <div className={classnames(
         "relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
-        bgColor, maxWidth,
+        bgColor,
         {
-            "w-16" : !isSidebarOpen,
+            "w-[5vw]" : !isSidebarOpen,
+            "w-[11vw]" : isSidebarOpen
         }
 
     )}>
@@ -45,10 +46,10 @@ const SideNav: React.FC<SideNavProps> = (
         >
             {isSidebarOpen ? <FaArrowCircleLeft size={30} /> : <FaArrowCircleRight size={30} />}
         </Button>
-        <div className="flex flex-col divide-y divide-bluetang"></div>
+        <div className="flex flex-col divide-y divide-bluetang">
             {navItems.map((navItem, index) => (
                 <a href={navItem.url} className={classnames(
-                    "w-full h-20 flex justify-center items-center hover:text-platinum",
+                    "w-full h-20 flex justify-center items-center font-semibold hover:text-platinum",
                     {"bg-bluetang text-platinum" : index == 0}
                 )}>
                     {isSidebarOpen ? (
@@ -59,6 +60,7 @@ const SideNav: React.FC<SideNavProps> = (
                 </a> 
             ))}
         </div>
+    </div>
   );
 }