layouts and components, oh my!

2025-07-29 17:41:13 -04:00
parent d1ebd100b5
commit 3bdc768714
36 changed files with 919 additions and 129 deletions
@@ -0,0 +1,58 @@
+import { headers } from "next/headers";
+import classnames from 'classnames';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+
+export default async function LandingPageLayout({ children }: { children: React.ReactNode }) {
+    const headersList = await headers();
+    const pathname = headersList.get("x-current-path");
+    const landingPageType = pathname?.split('/').pop() || "";
+    const headerText = landingPageType.charAt(0).toUpperCase() + landingPageType.slice(1);
+
+    return (
+        <>
+            <Navbar />
+            <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">
+                        <div className="w-[calc(50%+6px)] flex flex-col">
+                            <div className={classnames(
+                                "relative h-full border-l-6 bg-bluetang border-atmosphere"
+                            )} />
+                        </div>
+                    </div>
+                </div>
+                <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>
+                <div className="w-full flex justify-center pb-30">
+                    <div className="w-11/12 z-1">
+                        {children}
+                    </div>
+                </div>
+                <Footer />
+            </div>
+        </>
+    )
+}
@@ -1,5 +1,5 @@
-import LandingPage from '../../components/LandingPage';
-import InlineLink from "../../components/InlineLink";
+import LandingPage from '../../../components/LandingPage';
+import InlineLink from "../../../components/InlineLink";
 // import TextImage50 from "../../components/TextImage50-50";

 export default function Members() {
@@ -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';
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+const quickLinks: QuickLink[] = [
+    {
+        display: "Login/Registration",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 1",
+        url: "/"
+    },
+    {
+        display: "Link to Thing 2",
+        url: "/"
+    },
+    {
+        display: "Link to another Thing",
+        url: "/"
+    }
+]
+
+
+export default function Members() {
+  return (
+    <>
+        <QuickAccessLinks 
+            imageUrl="/images/members-stock.jpg"
+            quickLinks={quickLinks}
+        />
+        <div className={classnames("w-full text-2xl px-10", font.className)}>
+            At Britton Benefit Services, LLC we're making employee benefits more affordable. In addition to the cost savings you receive when your employer chooses Britton Benefit Services, LLC we also make sure the important information you need is at your fingertips.
+            <br />
+            <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.
+            <br />
+            <br />
+            At Britton Benefit Services, LLC we're making employee benefits more affordable. In addition to the cost savings you receive when your employer chooses Britton Benefit Services, LLC we also make sure the important information you need is at your fingertips.
+            <br />
+            <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>
+    </>
+  )
+}
@@ -0,0 +1,72 @@
+"user client"
+
+import { sideNavItems } from '@/lib/dashboard';
+import { headers } from "next/headers";
+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';
+
+
+export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
+    const headersList = await headers();
+    const pathname = headersList.get("x-current-path");
+    const dashboardType = pathname?.split('/').pop() || "";
+    const pageNavItems = sideNavItems[dashboardType];
+
+  return (
+   <div className="relative w-full h-full">
+        <Script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} strategy="beforeInteractive" />
+        <div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
+            <div className="w-full -mb-[2px] flex justify-start">
+                <div className="w-23/24 h-20 border-b-2 border-copper z-2" />
+            </div>
+            <div className="w-[60px] h-full flex justify-start">
+                <div className="w-[32.5px] flex flex-col">
+                    <div className={classnames(
+                        "relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
+                    )} />
+                </div>
+            </div>
+        </div>
+        <div className="w-full h-full flex items-start">
+            <SideNav
+                maxWidth="max-w-31"
+                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={classnames('flex items-center')}>
+                        <div className="-ml-8.5 z-2">
+                            <Image
+                                src="/images/bbstpa-forsite.png"
+                                alt="Britton Logo"
+                                width={205}
+                                height={60}
+                            />
+                        </div>
+                    </div>
+                    <div className="pr-20 z-2">
+                        <AccountDropdown userRole="member" />
+                    </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>
+    </div>
+  )
+}
@@ -1,15 +1,15 @@
-import Link from 'next/link';
 import AccountDropdown from '../../../components/AccountDropdown';
-import InlineLink from "../../../components/InlineLink";
+import SideNav from "@/components/SideNav";
 import Image from 'next/image';
 import classnames from 'classnames';
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

 import { Schibsted_Grotesk } from 'next/font/google'
 import DashboardPieChart from '@/components/DashboardPieChart';
-import { FaRegIdCard } from "react-icons/fa";
-import { GrMapLocation } from "react-icons/gr";
-import { FiDownload } from "react-icons/fi";
+import { FaRegIdCard, FaStethoscope } from "react-icons/fa";
+import { LuLayoutDashboard, LuClipboardList  } from "react-icons/lu";
+import { IoDocumentsOutline } from "react-icons/io5";
+import { BsClipboardCheck } from "react-icons/bs";
+import { TbProgress } from "react-icons/tb";
 import { MdLocationOn } from "react-icons/md";
 import LocationSearchInput from '@/components/LocationSearchInput';
 import Button from '@/components/Button';
@@ -51,7 +51,7 @@ export default function Member() {
                </div>
            </div>
            <div className="w-full h-full flex justify-start">
-                <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere divide-y divide-bluetang">
+                {/* <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere divide-y divide-bluetang">
                    <a href="#" className="w-full h-20 flex justify-center items-center bg-bluetang text-platinum">
                        Dashboard
                    </a>
@@ -73,8 +73,51 @@ export default function Member() {
                    <a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
                        Benefits Documents
                    </a>
-                </div>
-                <div className="flex w-21/24 2xl:w-11/12 ml-8 pt-5 2xl:pt-7">
+                </div> */}
+                <SideNav
+                    maxWidth="max-w-31"
+                    bgColor="bg-atmosphere"
+                    navItems={
+                            [
+                            {
+                                title: "Dashboard",
+                                url: "/",
+                                Icon: LuLayoutDashboard
+                            },
+                            {
+                                title: "My Plan & Benefits",
+                                url: "/",
+                                Icon: LuClipboardList
+                            },
+                            {
+                                title: "Plan Utilization",
+                                url: "/",
+                                Icon: TbProgress
+                            },
+                            {
+                                title: "Claims & Authorizations",
+                                url: "/",
+                                Icon: BsClipboardCheck
+                            },
+                            {
+                                title: "Providers & Services",
+                                url: "/",
+                                Icon: FaStethoscope
+                            },
+                            {
+                                title: "Insurance Card",
+                                url: "/",
+                                Icon: FaRegIdCard
+                            },
+                            {
+                                title: "Benefits Documents",
+                                url: "/",
+                                Icon: IoDocumentsOutline
+                            }
+                            ]
+                    }
+                />
+                <div className="flex w-full ml-8 pt-5 2xl:pt-7">
                    <div className="w-full flex flex-col justify-start">
                        <div className={classnames(
                            "-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
@@ -86,7 +129,7 @@ export default function Member() {
                                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
                                )}>
                            </div>
-                            <div className="w-1/21 h-full flex justify-end 2xl:pr-7.5">
+                            <div className="w-1/21 h-full flex justify-start 2xl:pr-7.5">
                                <div className="w-[calc(50%+6px)] 2xl:w-[calc(100%-6px)] 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"
@@ -302,6 +345,7 @@ export default function Member() {
                    </div>
                </div>
            </div>
+            <div className="w-1/24 h-full" />
        </div>
    </div>
  )
@@ -0,0 +1,25 @@
+import classnames from 'classnames';
+
+import FindProvider from '@/components/FindProvider';
+import InsuranceCardWidget from '@/components/InsuranceCard';
+import DeductableProgressWidget from '@/components/DeductableProgressWidget';
+import RecentClaimsWidget from '@/components/RecentClaimsWidget';
+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 space-y-4">
+                <div className="flex space-x-4">
+                    <DeductableProgressWidget />
+                    <InsuranceCardWidget />
+                </div>
+                <FindProvider />
+                <RecentClaimsWidget />
+            </div>
+            <BenefitsAAGWidget />
+        </div>
+    </div>
+  )
+}
@@ -0,0 +1,30 @@
+import '../styles/globals.css';
+import type { Metadata } from 'next';
+import { Fraunces } from 'next/font/google'
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import classNames from 'classnames';
+
+const font = Fraunces({ subsets: ['latin'] })
+
+// export const metadata: Metadata = {
+//   title: 'Britton Benifit Services, LLC',
+// };
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+        <body>
+            <main className={classNames("bg-deepcove min-h-screen flex justify-center", font.className)}>
+                <div className="w-full max-w-[1920px]">
+                    {children}
+                </div>
+            </main>
+        </body>
+    </html>
+  );
+}
@@ -1,103 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
@@ -1,10 +1,13 @@
 import InfoCard from '../components/InfoCard';
 import Tagline from "../components/Tagline";
 import InlineLink from "../components/InlineLink";
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';

 export default function Home() {
  return (
    <>
+        <Navbar />
        <Tagline 
          bgColor="bg-bluemana"
          textColor="text-deepcove"
@@ -44,6 +47,7 @@ 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>
+        <Footer />
    </>
  );
 }
@@ -0,0 +1,11 @@
+export default function Basepage() {
+  return (
+    <div className="w-full h-screen flex justify-center items-center">
+
+        <div>
+
+        </div>
+
+    </div>
+  )
+}
@@ -0,0 +1,35 @@
+// import SideNav from "@/components/SideNav";
+
+// export default function Sidenav() {
+//   return (
+//     <div className="w-full h-screen flex justify-start items-center">
+//           <div className="h-[calc(screen * 2/3)]">
+//             <SideNav
+//               maxWidth="max-w-31"
+//               bgColor="bg-atmosphere"
+//               navItems={
+//                     [
+//                       {
+//                         title: "Dashboard",
+//                         url: "/"
+//                       },
+//                       {
+//                         title: "My Plan & Benefits",
+//                         url: "/"
+//                       },
+//                       {
+//                         title: "Plan Utilization",
+//                         url: "/"
+//                       },
+//                       {
+//                         title: "Insurance Card",
+//                         url: "/"
+//                       }
+//                     ]
+//               }
+//             />
+//           </div>
+
+//     </div>
+//   )
+// }
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useState } from 'react'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
 import { CgProfile } from "react-icons/cg";
@@ -0,0 +1,55 @@
+"use client";
+
+import classnames from 'classnames';
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+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">
+        <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)}>
+            <div className="flex flex-col">
+                <p>Physician Visit</p>
+                <p>Specialist Visit</p>
+                <p>Urgent Care</p>
+                <p>INN-Ind Ded</p>
+                <p>INN-Family Ded</p>
+                <p>OON-Ind Ded</p>
+                <p>OON-Family Ded</p>
+                <p>Co-Insurance</p>
+                <p>INN-Ind OOP</p>
+                <p>INN-Family OOP</p>
+                <p>OON-Ind OOP</p>
+                <p>OON-Family OOP</p>
+                <p>Emergency Room</p>
+                <p>Preventive Care</p>
+            </div>
+            <div className="flex flex-col">
+                <p>$25.00</p>
+                <p>$50.00</p>
+                <p>$50.00</p>
+                <p>$5,000</p>
+                <p>$10,000</p>
+                <p>$10,000</p>
+                <p>$20,000</p>
+                <p>100%/0%</p>
+                <p>$5,000</p>
+                <p>$10,000</p>
+                <p>$10,000</p>
+                <p>$20,000</p>
+                <p>Ded & Coin</p> 
+                <p>100%</p>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default BenefitsAAGWidget;
@@ -0,0 +1,36 @@
+import classnames from 'classnames';
+
+interface DashboardHeaderProps {
+  userDisplayName: string;
+}
+
+const DashboardHeader: React.FC<DashboardHeaderProps> = ({ userDisplayName }) => {
+    
+  return (
+    <div className="w-full flex flex-col justify-start">
+        <div className={classnames(
+            "-mb-[34px] text-4xl text-left z-2 text-bluemana font-semibold text-shadow-[1px_1px_0,-1px_1px_0,-1px_-1px_0,1px_-1px_0] text-shadow-deepcove"
+        )}>
+            {userDisplayName}
+        </div>
+        <div className="flex items-center">
+            <div className={classnames(
+                "w-full h-[6px] rounded-s bg-atmosphere z-1 -mr-[26px] 2xl:-mr-[16px]"
+                )}>
+            </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={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"
+                        )} />
+                    <div className={classnames(
+                        "h-9 w-full -mt-[3px] relative border-t-6 border-r-6 rounded-tr-4xl rounded-out-tl-4xl bg-copper border-atmosphere"
+                        )} />
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default DashboardHeader;
@@ -1,3 +1,5 @@
+"use client"
+
 import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';

 type TooltipPayload = ReadonlyArray<any>;
@@ -0,0 +1,29 @@
+"use client";
+
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import DashboardPieChart from '@/components/DashboardPieChart';
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+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="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">
+                <DashboardPieChart paid={1007.23} remaining={492.77} />
+                <p className="text-2xl">Deductable Progress</p>
+            </div>
+            <p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
+        </div>
+    </div>
+  );
+};
+
+export default DeductableProgressWidget;
@@ -0,0 +1,46 @@
+"use client";
+
+import React, { type SVGProps } from 'react'
+import { IconBaseProps, IconType } from 'react-icons';
+
+import { FaRegIdCard, FaStethoscope } from "react-icons/fa";
+import { LuLayoutDashboard, LuClipboardList  } from "react-icons/lu";
+import { IoDocumentsOutline } from "react-icons/io5";
+import { BsClipboardCheck } from "react-icons/bs";
+import { TbProgress } from "react-icons/tb";
+
+interface iconMapType {
+    [key: string]: IconType
+}
+
+const iconMap: iconMapType = {
+  FaRegIdCard: FaRegIdCard,
+  FaStethoscope: FaStethoscope,
+  LuLayoutDashboard: LuLayoutDashboard,
+  LuClipboardList: LuClipboardList,
+  IoDocumentsOutline: IoDocumentsOutline,
+  BsClipboardCheck: BsClipboardCheck,
+  TbProgress: TbProgress
+};
+
+type DynamicIconProps = IconBaseProps & {
+  iconName: string;
+  size?: number;
+};
+
+// interface DynamicIconProps {
+//   iconName: string;
+// };
+
+const DynamicIcon: React.FC<DynamicIconProps> = ({ iconName, ...props }) => {
+    const IconComponent = iconMap[iconName];
+
+    if (!IconComponent) {
+        console.warn(`Icon "${iconName}" not found in iconMap.`);
+        return null; // Or render a fallback icon
+    }
+
+    return React.createElement(IconComponent, props);
+};
+
+export default DynamicIcon;
@@ -0,0 +1,57 @@
+"use client";
+
+import classnames from 'classnames';
+import Button from '@/components/Button';
+
+import { MdLocationOn } from "react-icons/md";
+import LocationSearchInput from '@/components/LocationSearchInput';
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+interface FindProviderProps {
+  zipOnly?: boolean;
+}
+
+const FindProvider: React.FC<FindProviderProps> = ({ zipOnly }) => {
+    
+  return (
+    <div className="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>
+            </div>
+            <div className="w-full flex px-2">
+                <div className="w-full flex border-x-2 border-t-2 rounded-t-xl font-semibold divide-x-2 divide-bronze">
+                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tl-lg bg-bluetang text-platinum">
+                        Location
+                    </a>
+                    <a href="#" className="w-full h-9 flex justify-center items-center text-platinum hover:text-bronze">
+                        Procedure
+                    </a>
+                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tr-lg text-platinum hover:text-bronze">
+                        Provider/Facility
+                    </a>
+                </div>
+            </div>
+            <div className={classnames("w-full flex items-start px-2 pb-2 text-xl", font.className)}>
+                {/* <p className='pr-3'><GrMapLocation size={30} /></p> */}
+                <Button className="h-10 text-deepcove hover:text-atmosphere bg-platinum rounded-bl-xl">
+                    <MdLocationOn size={30} />
+                </Button>
+                <LocationSearchInput className="h-10 pl-3 text-bluemana border-y-2 border-platinum" />
+                <Button className="h-10 pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-br-xl border-y-2 border-r-2 border-platinum">
+                    Search
+                </Button>
+            </div>
+            <div className="w-full flex justify-end text-platinum font-semibold">
+                <Button className="mr-2 underline hover:text-bronze">
+                    View Full Provider List
+                </Button>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default FindProvider;
@@ -1,4 +1,3 @@
-"use client";
 import Image from 'next/image';
 import Link from 'next/link';
 import { BsLinkedin } from "react-icons/bs";
@@ -1,5 +1,3 @@
-"use client";
-
 import Link from 'next/link';
 import { Schibsted_Grotesk } from 'next/font/google'
 import classnames from 'classnames';
@@ -1,5 +1,3 @@
-"use client";
-
 import classnames from 'classnames';

 interface InlineLinkProps {
@@ -0,0 +1,29 @@
+"use client";
+
+import classnames from 'classnames';
+import Button from '@/components/Button';
+import { FaRegIdCard } from "react-icons/fa";
+
+import { Schibsted_Grotesk } from 'next/font/google'
+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="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)}>
+            <Button className="hover:text-bronze">
+                View
+            </Button>
+            <p>|</p>
+            <Button className="hover:text-bronze">
+                Download
+            </Button>
+        </div>
+    </div>
+  );
+};
+
+export default InsuranceCardWidget;
@@ -1,5 +1,3 @@
-"use client";
-
 import { Schibsted_Grotesk } from 'next/font/google'
 import classnames from 'classnames';
 import InlineLink from "../components/InlineLink";
@@ -1,4 +1,5 @@
-import classNames from 'classnames';
+"use client"
+
 import React, { useState } from 'react';
 import PlacesAutocomplete, {
  geocodeByAddress,
@@ -75,7 +75,6 @@ export interface MenuItem {
 // ];

 const Navbar = () => {
-
    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(() => {
@@ -0,0 +1,48 @@
+import { Schibsted_Grotesk } from 'next/font/google'
+import classnames from 'classnames';
+import InlineLink from "@/components/InlineLink";
+
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+export interface QuickLink {
+  display: string;
+  url: string;
+}
+
+interface QuickAccessLinksProps {
+  imageUrl: string;
+  quickLinks: QuickLink[];
+  
+}
+
+const QuickAccessLinks: React.FC<QuickAccessLinksProps> = ({ imageUrl, quickLinks }) => {
+
+    
+  return (
+     <div className="relative w-full flex justify-start pl-10 py-5">
+        <div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
+            <div className={classnames("relative h-80 w-full rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 bg-bluetang border-atmosphere")} />
+        </div>
+        <div className={classnames("w-3/5 flex flex-col justify-center text-platinum z-2")}>
+            <div className={classnames("text-4xl pb-8")}>
+                Quick Access to Your Services
+            </div>
+            <ul className={classnames("flex flex-col pl-10 text-2xl leading-12 list-disc list-inside", font.className)}>
+                {quickLinks.map((quickLink) => (
+                  <li><InlineLink>{quickLink.display}</InlineLink></li>
+                ))}
+            </ul>
+        </div>
+        <div className={classnames("w-2/5 flex justify-center mr-10 rounded-2xl z-2 bg-atmosphere")}>
+            <div className={classnames(
+                "relative w-9/10"
+            )}>
+                <img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
+                <div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default QuickAccessLinks;
@@ -0,0 +1,96 @@
+"use client";
+
+import classnames from 'classnames';
+import Button from '@/components/Button';
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+interface RecentClaimsWidgetProps {
+}
+
+const RecentClaimsWidget = () => {
+    
+  return (
+    <div className="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>
+            </div>
+            <div className={classnames("w-full flex flex-col px-2 text-lg", font.className)}>
+                <div className="flex">
+                    <div className="w-1/6">
+                        <Button className="hover:text-bronze text-bluemana">
+                            2907457
+                        </Button>
+                    </div>
+                    <div className="w-2/6">
+                        LA'BLAH, ROBERT 
+                    </div>
+                    <div className="w-2/6">
+                        HOUSE, GREGORY
+                    </div>
+                    <div className="w-1/6">
+                        07/21/2025
+                    </div>
+                </div>
+                <div className="flex">
+                    <div className="w-1/6">
+                        <Button className="hover:text-bronze text-bluemana">
+                            2907201
+                        </Button>
+                    </div>
+                    <div className="w-2/6">
+                        LA'BLAH, ROBERT 
+                    </div>
+                    <div className="w-2/6">
+                        QUINN, MICHAELA
+                    </div>
+                    <div className="w-1/6">
+                        07/02/2025
+                    </div>
+                </div>
+                <div className="flex">
+                    <div className="w-1/6">
+                        <Button className="hover:text-bronze text-bluemana">
+                            2905891
+                        </Button>
+                    </div>
+                    <div className="w-2/6">
+                        LA'BLAH, JENNY
+                    </div>
+                    <div className="w-2/6">
+                        HOWSER, DOGGIE
+                    </div>
+                    <div className="w-1/6">
+                        05/15/2025
+                    </div>
+                </div>
+                <div className="flex">
+                    <div className="w-1/6">
+                        <Button className="hover:text-bronze text-bluemana">
+                            2905547
+                        </Button>
+                    </div>
+                    <div className="w-2/6">
+                        LA'BLAH, ROBERT 
+                    </div>
+                    <div className="w-2/6">
+                        HOUSE, GREGORY
+                    </div>
+                    <div className="w-1/6">
+                        04/29/2025
+                    </div>
+                </div>
+            </div>
+            <div className="w-full flex justify-end text-platinum font-semibold">
+                <Button className="mr-2 underline hover:text-bronze">
+                    View All Claims
+                </Button>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default RecentClaimsWidget;
@@ -0,0 +1,65 @@
+"use client";
+
+import React, { useState, ComponentType } from 'react';
+import classnames from 'classnames';
+
+import DynamicIcon from './DynamicIcon';
+import { NavItems } from '@/lib/dashboard';
+
+import { FaArrowCircleLeft, FaArrowCircleRight } from "react-icons/fa";
+import { TbCircleArrowLeft, TbCircleArrowRight } from "react-icons/tb";
+import { PiBreadFill } from "react-icons/pi";
+
+import Button from './Button';
+
+
+interface SideNavProps {
+    maxWidth: string;
+    bgColor: string;
+    navItems: NavItems[];
+}
+
+const SideNav: React.FC<SideNavProps> = (
+    {
+        maxWidth,
+        bgColor,
+        navItems
+    }
+) => {
+    
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  return (
+    <div className={classnames(
+        "relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
+        bgColor, maxWidth,
+        {
+            "w-16" : !isSidebarOpen,
+        }
+
+    )}>
+        <div className="h-25" />
+        <Button
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="h-10 flex justify-end items-center pr-2"
+        >
+            {isSidebarOpen ? <FaArrowCircleLeft size={30} /> : <FaArrowCircleRight size={30} />}
+        </Button>
+        <div className="flex flex-col divide-y divide-bluetang"></div>
+            {navItems.map((navItem, index) => (
+                <a href={navItem.url} className={classnames(
+                    "w-full h-20 flex justify-center items-center hover:text-platinum",
+                    {"bg-bluetang text-platinum" : index == 0}
+                )}>
+                    {isSidebarOpen ? (
+                        <>{navItem.title}</>
+                    ) : (
+                        <DynamicIcon iconName={navItem.iconName} size={30} />
+                    )}
+                </a> 
+            ))}
+    </div>
+  );
+}
+
+export default SideNav;
@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useState } from 'react';
+
+
+interface SideNavTempProps {
+    idk?: string
+}
+
+const SideNavTemp: React.FC<SideNavTempProps> = (
+    {
+        idk
+     }
+) => {
+    
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  return (
+    <div className="flex flex-col justify-end">
+      {/* Sidebar */}
+      <div
+        className={`bg-gray-800 text-white h-screen/2 transition-all duration-300 ${
+          isSidebarOpen ? 'w-64' : 'w-16'
+        }`}
+      >
+        <div className="p-4">
+          {isSidebarOpen ? (
+            <h1 className="text-xl font-bold">My App</h1>
+          ) : (
+            <h1 className="text-xl font-bold">M</h1>
+          )}
+          <button
+            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          >
+            {isSidebarOpen ? 'Collapse' : 'Expand'} Sidebar
+          </button>
+          {/* Navigation Links */}
+          <ul className="mt-4">
+            <li className="mb-2">Link 1</li>
+            <li className="mb-2">Link 2</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SideNavTemp;
@@ -1,5 +1,3 @@
-"use client";
-
 import { textColor, bgColor } from '@/interfaces/common'

 interface TaglineProps {
@@ -1,6 +1,3 @@
-"use client";
-
-import React, { useState } from 'react';
 import classnames from 'classnames';

 interface TextImage50Props {
@@ -0,0 +1,50 @@
+
+export interface NavItems {
+    title: string;
+    url: string;
+    iconName: string;
+}
+
+interface sideNavGroups {
+    [key: string]: NavItems[]
+}
+
+export const sideNavItems: sideNavGroups = {
+    "member": [
+        {
+            title: "Dashboard",
+            url: "/",
+            iconName: "LuLayoutDashboard"
+        },
+        {
+            title: "My Plan & Benefits",
+            url: "/",
+            iconName: "LuClipboardList"
+        },
+        {
+            title: "Plan Utilization",
+            url: "/",
+            iconName: "TbProgress"
+        },
+        {
+            title: "Claims & Authorizations",
+            url: "/",
+            iconName: "BsClipboardCheck"
+        },
+        {
+            title: "Providers & Services",
+            url: "/",
+            iconName: "FaStethoscope"
+        },
+        {
+            title: "Insurance Card",
+            url: "/",
+            iconName: "FaRegIdCard"
+        },
+        {
+            title: "Benefits Documents",
+            url: "/",
+            iconName: "IoDocumentsOutline"
+        }
+    ]
+}
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+    const headers = new Headers(request.headers);
+    headers.set("x-current-path", request.nextUrl.pathname);
+    return NextResponse.next({ headers });
+}
+
+export const config = {
+    matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)" // Exclude API routes, static files, etc.
+    ],
+};