next-web/src/pages/index.tsx

import InfoCard from '../components/InfoCard';

export default function Home() {
  return (
    <>
      <div className="flex justify-center py-20">
        <div className="w-11/12 bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
          Healthcare that's truly affordable
        </div>
      </div>
      <div>
        <div className='bg-britton-medium rounded-3xl'>
          <InfoCard
            title="Self-Funded Plans"
            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.
          </InfoCard>
        </div>
        <InfoCard
          title="Health & Risk Management"
          imageUrl="/images/placeHolder.png"
          sectionBgColor="bg-britton-dark"
          cardBGColor="bg-britton-medium"
          bodyTextColor="text-britton-light"
          invert
        >
          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'>
          <InfoCard
            title="Regulatory Compliance"
            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.
          </InfoCard>
        </div>
        <InfoCard
          title="Benefit Access & Online Support"
          imageUrl="/images/placeHolder.png"
          sectionBgColor="bg-britton-dark"
          cardBGColor="bg-britton-light"
          bodyTextColor="text-britton-medium"
          invert
        >
          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>












        {/* <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>
    </>
  );
}