Homepage first runthrough complete

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   web:
     build:

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">
+    <>
+        <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.
-                </span>
-                <ul className="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+                    </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;

src/pages/_app.tsx

@@ -1,18 +1,19 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
-import { Poppins } from 'next/font/google'
+import { Playfair_Display, Fraunces } from 'next/font/google'
 import Navbar from '../components/Navbar';
 import Footer from '../components/Footer';
 import classNames from 'classnames';
 
-const poppins = Poppins({ weight: '400',subsets: ['latin'] })
+// 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", poppins.className)}> 
+      <main className={classNames("bg-britton-dark min-h-screen", font.className)}>
           <Navbar />
           <Component {...pageProps} />
           <Footer />

src/pages/index.tsx

@@ -1,7 +1,4 @@
-import Section1 from '../components/Section1';
-import Section1Invert from '../components/Section1Invert';
-import Section1Light from '../components/Section1Light';
-import Section1InvertLight from '../components/Section1InvertLight';
+import InfoCard from '../components/InfoCard';
 
 export default function Home() {
   return (
@@ -11,43 +8,51 @@ export default function Home() {
           Healthcare that's truly affordable
         </div>
       </div>
-
       <div>
         <div className='bg-britton-medium rounded-3xl'>
-          <Section1
+          <InfoCard
             title="Self-Funded Plans"
-            imageUrl="/images/SelfFundedDrSquare.png"
+            imageUrl="/images/placeHolder.png"
+            sectionBgColor="bg-britton-medium"
+            cardBGColor="bg-britton-neutral"
+            bodyTextColor="text-britton-dark"
           >
             Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike traditional insurance plans that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.
-          </Section1>
+          </InfoCard>
         </div>
-
-
-        <Section1Invert
+        <InfoCard
           title="Health & Risk Management"
-          imageUrl="/images/SelfFundedDrSquare.png"
+          imageUrl="/images/placeHolder.png"
+          sectionBgColor="bg-britton-dark"
+          cardBGColor="bg-britton-medium"
+          bodyTextColor="text-britton-light"
+          invert
         >
-          While self-funding protects you from paying higher month-to-month premiums for unutilized services, because self-funding bills per-claim, it does leave you susceptible to a catastrophic claim. To protect you against having to cover an excessive amount due to a catastrophic claim, self-funded plans give you the option to purchase stop-loss insurance.
-        </Section1Invert>
+          Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your insurance provider will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
+          <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='bg-britton-neutral rounded-3xl'>
-          <Section1Light
+          <InfoCard
             title="Regulatory Compliance"
-            imageUrl="/images/SelfFundedDrSquare.png"
+            imageUrl="/images/placeHolder.png"
+            sectionBgColor="bg-britton-neutral"
+            cardBGColor="bg-britton-dark"
+            bodyTextColor="text-britton-light"
           >
             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.
-          </Section1Light>
-
+          </InfoCard>
         </div>
-
-        <Section1InvertLight
+        <InfoCard
           title="Benefit Access & Online Support"
-          imageUrl="/images/SelfFundedDrSquare.png"
+          imageUrl="/images/placeHolder.png"
+          sectionBgColor="bg-britton-dark"
+          cardBGColor="bg-britton-light"
+          bodyTextColor="text-britton-medium"
+          invert
         >
-          This will all be new text talking about our login pages and other online support.
-          <br />
-          <br />
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac gravida massa. Morbi et posuere ligula. Cras ultrices luctus tincidunt. Nam arcu orci, porttitor sit amet dui vel, egestas consectetur eros. Maecenas tempus commodo lorem ac aliquam. Nunc mattis nisl non tortor semper fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-        </Section1InvertLight>
+          We 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 look up in-network providers through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
+        </InfoCard>
 
 
 
@@ -57,11 +62,14 @@ export default function Home() {
 
 
 
-        <div className="flex w-full h-70 justify-between items-center pt-30">
+
+
+
+        {/* <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>
+        </div> */}
       </div>
     </>
   );

src/styles/globals.css

@@ -10,8 +10,8 @@
   --color-britton-medium: #2A4B6F;
   --color-britton-light: #6AC8F1;
   --color-britton-neutral: #E0E0E0;
-  --color-britton-accent: #B87333;
-  --color-britton-accent2:  #CD7F32;
+  --color-britton-accent2: #B06E30;
+  --color-britton-accent: #D38F4A;
   /* --color-britton-neutral: #EEF2E3; */
   /* name colors like below AFTER we settle on them for sure */
   /* --color-britton-deepcove: #04153E;