Homepage first runthrough complete

src/components/Dropdown.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import Link from 'next/link';
+import classnames from 'classnames';
+
+import Button from './Button';
+import { MenuItem } from './Navbar'
+
+interface Props {
+    item: MenuItem;
+}
+
+export default function Dropdown(props: Props) {
+    const { item } = props;
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const menuItems = item?.children ? item.children : [];
+    const lastIndex = menuItems.length - 1;
+
+    const toggle = () => {
+        setIsOpen(old => !old);
+    }
+
+    const transClass = isOpen
+        ?
+        "flex"
+        :
+        "hidden";
+    
+    function isLastItem (currentItem: MenuItem) {
+        return lastIndex == menuItems.indexOf(currentItem)
+    }
+
+    return (
+        <>
+            <div className="relative">
+                <Button
+                    className="hover:text-britton-light font-semibold text-lg uppercase"
+                    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}`}>
+                    {
+                        menuItems.map(item =>
+                            <>
+                                <Link
+                                    key={item.route}
+                                    className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
+                                    href={item?.route || ''}
+                                    onClick={toggle}
+                                >
+                                    {item.title}
+                                </Link>
+                                <div className={classnames(
+                                        "h-px bg-britton-accent",
+                                        {"hidden" : isLastItem(item)}
+                                    )}
+                                />
+                            </>
+                        )
+                    }
+                </div>
+            </div>
+            {
+                isOpen
+                    ?
+                    <div
+                        className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-britton-dark/40"
+                        onClick={toggle}
+                    ></div>
+                    :
+                    <></>
+            }
+        </>
+    )
+}

src/components/Footer.tsx

@@ -1,31 +1,44 @@
 "use client";
 
-import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';
-import Link from 'next/link';
-import Button from './Button';
-import Image from 'next/image';
-
 const Footer = () => {
   return (
-        <footer className="bg-white rounded-lg shadow-sm m-4 dark:bg-gray-800">
-            <div className="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-                <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
-                    © Copyright 2025 Britton Benefit Services, LLC All Rights Reserved.
-                </span>
-                <ul className="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
-                    <li>
-                        <a href="#" className="hover:underline me-4 md:me-6">About</a>
-                    </li>
-                    <li>
-                        <a href="#" className="hover:underline me-4 md:me-6">Careers</a>
-                    </li>
-                    <li>
-                        <a href="#" className="hover:underline">Contact</a>
-                    </li>
-                </ul>
+    <>
+        <div className="h-20 bg-gradient-to-b from-britton-dark to-britton-medium" />
+        <footer className="bg-britton-medium flex justify-center pt-6 pb-8">
+            <div className="w-11/12 md:flex md:items-center md:justify-evenly text-britton-neutral">
+                <div className='flex flex-col'>
+                    <div className="text-md sm:text-left my-1 mx-2">
+                        Britton Benefit Services, LLC 604 North Queen St., Kinston, NC 28502
+                    </div>
+                    <div className="text-md sm:text-left my-1 mx-2">
+                        © Copyright 2025 Britton Benefit Services, LLC All Rights Reserved.
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <ul className="flex flex-wrap items-center mt-3 text-lg font-medium sm:mt-0">
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">About</a>
+                        </li>
+                        <li className='me-4 md:me-6'>
+                            |
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline me-4 md:me-6">Careers</a>
+                        </li>
+                        <li className='me-4 md:me-6'>
+                            |
+                        </li>
+                        <li>
+                            <a href="#" className="hover:underline">Contact</a>
+                        </li>
+                    </ul>
+                    <div className="text-md sm:text-center my-1 mx-2">
+                        1-800-676-1182
+                    </div>
+                </div>
             </div>
         </footer>
+    </>
   );
 };
 

src/components/InfoCard.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import Link from 'next/link';
+import classnames from 'classnames';
+
+type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
+type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
+
+
+
+interface InfoCardProps {
+    className?: string;
+    bodyTextColor: textColor;
+    cardBGColor: bgColor;
+    sectionBgColor: bgColor;
+    title: string;
+    imageUrl: string;
+    invert?: boolean;
+    children: React.ReactNode;
+}
+
+const InfoCard: React.FC<InfoCardProps> = (
+    {   className,
+        bodyTextColor,
+        cardBGColor,
+        sectionBgColor,
+        title,
+        imageUrl,
+        invert,
+        children
+     }
+) => {
+
+  return (
+    <div className='flex flex-col items-center m-h-150 py-10'>
+        <div className={classnames('w-11/12 flex', {"flex-row-reverse" : invert})}>
+            <div className="flex flex-col w-7/12">
+                <div className={classnames(
+                    'h-30 flex rounded-t-4xl', 
+                    cardBGColor,
+                    {
+                        "rounded-l-4xl" : !invert,
+                        "rounded-r-4xl" : invert
+                    }
+                )}> 
+                    <div className={classnames(
+                        "w-7/8 text-4xl pt-10 text-britton-accent rounded-l-3xl", 
+                        sectionBgColor,
+                        {
+                            "text-left pl-24" : !invert,
+                            "text-right" : invert
+                        }
+                    )}>
+                        {title}
+                    </div>
+                    <div className={classnames('w-1/8 rounded-r-3xl', sectionBgColor)} />
+                </div>
+                <div className={classnames(
+                    "text-3xl text-left p-8 h-full", 
+                    cardBGColor, bodyTextColor,
+                    {
+                        "rounded-l-3xl" : !invert,
+                        "rounded-r-3xl" : invert
+                    }
+                )}>
+                    {children}
+                </div>
+            </div>
+            <div className={classnames(
+                'w-5/12 p-4 justify-center', 
+                cardBGColor, 
+                {
+                    "rounded-r-3xl rounded-tl-3xl" : !invert,
+                    "rounded-l-3xl rounded-tr-3xl" : invert
+                }
+            )}>
+                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(${imageUrl})]`} />
+            </div>
+        </div>
+
+        <div className='flex w-11/12 h-20'>
+            <div className={classnames(
+                "rounded-b-4xl", 
+                cardBGColor,
+                {
+                    "w-1/9" : !invert,
+                    "w-5/9" : invert
+                }
+            )}>
+                <div className={classnames('w-full h-full rounded-tr-3xl', sectionBgColor)} />
+            </div>
+            <div className={classnames("w-3/9 rounded-b-4xl", sectionBgColor)}>
+                <div className={classnames("w-full p-6 text-xl text-center text-britton-accent2 rounded-b-3xl", cardBGColor)}>
+                    <Link href="/services" className="hover:text-britton-accent">
+                        Learn More
+                    </Link>
+                </div>
+            </div>
+            <div className={classnames(
+                "rounded-b-4xl", 
+                cardBGColor,
+                {
+                    "w-5/9" : !invert,
+                    "w-1/9" : invert,
+                }
+            )}>
+                <div className={classnames(
+                    'w-full h-full rounded-tl-3xl', sectionBgColor)} />
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default InfoCard;

src/components/Navbar.tsx

@@ -5,6 +5,63 @@ import classnames from 'classnames';
 import Link from 'next/link';
 import Button from './Button';
 import Image from 'next/image';
+import Dropdown from "./Dropdown";
+
+export interface MenuItem {
+  title: string;
+  route?: string;
+  children?: MenuItem[];
+}
+
+const menuItems: MenuItem[] = [
+  {
+    title: "Employers",
+    children: [
+      {
+        title: "Employer Services",
+        route: "",
+      },
+      {
+        title: "Self-Funded Plans",
+        route: "",
+      },
+      {
+        title: "Control Health Care Costs",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Members",
+    children: [
+      {
+        title: "Find a Medical Provider",
+        route: "",
+      },
+      {
+        title: "Obtain Rx Information",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Providers",
+    children: [
+      {
+        title: "Eligibility Lookup",
+        route: "",
+      },
+      {
+        title: "Contact BBS",
+        route: "",
+      },
+    ],
+  },
+  {
+    title: "Brokers",
+    route: "",
+    },
+];
 
 const Navbar = () => {
 
@@ -45,19 +102,12 @@ const Navbar = () => {
                         height={80}
                     />
                 </div>
-                <div className={classnames('rounded-b-3xl py-2 bg-britton-dark text-britton-neutral text-center text-xl uppercase w-72', {"hidden" : !isScrolled})}>
+                <div className={classnames('rounded-b-3xl py-2 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
                     <Link href="/">
                         Britton Benefit Services
                     </Link>
                 </div>
-                {/* <div className={classnames(`bg-[url(/images/bbstpa-forsite.png)]`, {"hidden" : isScrolled})} /> */}
-                {/* <Image src="/images/bbstpa-forsite.png" alt="Britton Logo" className={classnames({"hidden" : isScrolled})}/> */}
-                {/* <div className={classnames("text-xl font-bold", {"hidden" : isScrolled})}>
-                    Britton <br />
-                    &nbsp;&nbsp;&nbsp;Benefit <br />
-                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services
-                </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-lg uppercase", {"pl-2" : isScrolled})}>
                     <li>
                         <Link href="/services" className="hover:text-britton-light">
                             Employers
@@ -83,7 +133,19 @@ const Navbar = () => {
                             Contact Us
                         </Link>
                     </li>
-                </ul>
+                </ul> */}
+                <div className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
+                    {menuItems.map((item) => {
+                    return item.hasOwnProperty("children") ? 
+                    (
+                        <Dropdown item={item} />
+                    ) : (
+                        <Link className="hover:text-britton-light" href={item?.route || ""}>
+                            {item.title}
+                        </Link>
+                    );
+                    })}
+                </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

src/components/Section1.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import Image from 'next/image';
-
-interface SectionProps {
-    className?: string;
-    theme?: string;
-    title: string;
-    imageUrl: string;
-    invert?: boolean;
-    children: React.ReactNode;
-}
-
-const Section1: React.FC<SectionProps> = (
-    {   className,
-        theme,
-        title,
-        imageUrl,
-        invert,
-        children
-     }
-) => {
-  return (
-    <div className='flex justify-center m-h-150  py-10'>
-        <div className='w-11/12 flex'>
-            {/* <div className='absolute bottom-0 right-0 z-40 border-b-2 border-r-2 rounded-3xl border-britton-accent2'></div> */}
-            <div className="flex flex-col w-7/12"> 
-                <div className="text-4xl h-30 pt-10 text-britton-accent">
-                    {title}
-                </div>
-                <div className="text-3xl text-left bg-britton-neutral text-britton-dark rounded-l-3xl p-8 h-full">
-                    {children}
-                </div>
-            </div>
-            <div className='w-5/12 rounded-r-3xl rounded-tl-3xl p-4 bg-britton-neutral justify-center'>
-                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(/images/placeHolder.png)]`} />
-
-            </div>
-        </div>
-    </div>
-  );
-};
-
-export default Section1;

src/components/Section1Invert.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import Image from 'next/image';
-
-interface SectionProps {
-    className?: string;
-    theme?: string;
-    title: string;
-    imageUrl: string;
-    invert?: boolean;
-    children: React.ReactNode;
-}
-
-const Section1Invert: React.FC<SectionProps> = (
-    {   className,
-        theme,
-        title,
-        imageUrl,
-        invert,
-        children
-     }
-) => {
-  return (
-    <div className='flex justify-center m-h-150 py-10 mx-20'>
-        {/* <Image src="/images/placeHolder.png" alt="Description of image" width={300} height={300} /> */}
-        <div className='w-5/12 rounded-l-3xl rounded-tr-3xl p-4 bg-britton-medium justify-center'>
-            {/* <div className={`h-full w-full bg-cover mask-cover mask-[url(/images/brittonRoundedOctogon.png)] bg-[url(/images/placeHolder.png)]`} /> */}
-            <div className={`h-full w-full rounded-3xl bg-cover bg-[url(/images/placeHolder.png)]`} />
-
-        </div>
-        <div className="flex flex-col w-7/12"> 
-            <div className="text-4xl text-right h-30 pt-10 text-britton-accent2">
-                {title}
-            </div>
-            <div className="text-3xl text-left bg-britton-medium text-britton-light rounded-r-3xl p-8 h-full">
-                {children}
-            </div>
-        </div>
-    </div>
-  );
-};
-
-export default Section1Invert;

src/components/Section1InvertLight.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import Image from 'next/image';
-
-interface SectionProps {
-    className?: string;
-    theme?: string;
-    title: string;
-    imageUrl: string;
-    invert?: boolean;
-    children: React.ReactNode;
-}
-
-const Section1InvertLight: React.FC<SectionProps> = (
-    {   className,
-        theme,
-        title,
-        imageUrl,
-        invert,
-        children
-     }
-) => {
-  return (
-    <div className='flex justify-center m-h-150 py-10 mx-20'>
-        {/* <Image src="/images/placeHolder.png" alt="Description of image" width={300} height={300} /> */}
-        <div className='w-5/12 rounded-l-3xl rounded-tr-3xl p-4 bg-britton-light justify-center'>
-            {/* <div className={`h-full w-full bg-cover mask-cover mask-[url(/images/brittonRoundedOctogon.png)] bg-[url(/images/placeHolder.png)]`} /> */}
-            <div className={`h-full w-full rounded-3xl bg-cover bg-[url(/images/placeHolder.png)]`} />
-
-        </div>
-        <div className="flex flex-col w-7/12"> 
-            <div className="text-4xl text-right h-30 pt-10 text-britton-accent2">
-                {title}
-            </div>
-            <div className="text-3xl text-left bg-britton-light text-britton-medium rounded-r-3xl p-8 h-full">
-                {children}
-            </div>
-        </div>
-    </div>
-  );
-};
-
-export default Section1InvertLight;

src/components/Section1Light.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import React, { useState } from 'react';
-import classnames from 'classnames';
-import Image from 'next/image';
-
-interface SectionProps {
-    className?: string;
-    theme?: string;
-    title: string;
-    imageUrl: string;
-    invert?: boolean;
-    children: React.ReactNode;
-}
-
-const Section1: React.FC<SectionProps> = (
-    {   className,
-        theme,
-        title,
-        imageUrl,
-        invert,
-        children
-     }
-) => {
-  return (
-    <div className='flex justify-center m-h-150  py-10 mx-20'>
-        <div className="flex flex-col w-7/12"> 
-            <div className="text-4xl h-30 pt-10 text-britton-accent">
-                {title}
-            </div>
-            <div className="text-3xl text-left bg-britton-dark text-britton-light rounded-l-3xl p-8 h-full">
-                {children}
-            </div>
-        </div>
-        {/* <Image src="/images/placeHolder.png" alt="Description of image" width={300} height={300} /> */}
-        <div className='w-5/12 rounded-r-3xl rounded-tl-3xl p-4 bg-britton-dark justify-center'>
-            {/* <div className={`h-full w-full bg-cover mask-cover mask-[url(/images/brittonRoundedOctogon.png)] bg-[url(/images/placeHolder.png)]`} /> */}
-            <div className={`h-full w-full rounded-3xl bg-cover bg-[url(/images/placeHolder.png)]`} />
-
-        </div>
-    </div>
-  );
-};
-
-export default Section1;