Added basic footer, few style changes to nav

src/components/Footer.tsx

@@ -0,0 +1,32 @@
+"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>
+        </footer>
+  );
+};
+
+export default Footer;

src/components/Navbar.tsx

@@ -13,7 +13,7 @@ const Navbar = () => {
     useEffect(() => {
         const handleScroll = () => {
             // Find pixels from top to bottom of "tag line" div
-            if (window.scrollY > 355) {
+            if (window.scrollY > 280) {
                 setIsScrolled(true);
             } else {
                 setIsScrolled(false);
@@ -30,14 +30,14 @@ const Navbar = () => {
   return (
     <nav className="sticky top-0 left-0 z-50 hidden lg:flex justify-center">
         <div className={classnames(
-                    "w-11/12 bg-britton-neutral p-1 text-britton-dark rounded-b-3xl", {
-                        "min-h-5 border-1 border-britton-dark" : isScrolled,
-                        "min-h-20" : !isScrolled
+                    "w-11/12 bg-britton-neutral px-1 text-britton-dark rounded-b-3xl", {
+                        "min-h-6 pb-1 border-b-2 border-x-2 border-britton-dark" : isScrolled,
+                        "min-h-20 pb-4" : !isScrolled
                     }
                 )}
         >
             <div className="container mx-auto justify-between items-center flex">
-                <div className={classnames('rounded-3xl bg-britton-dark', {"hidden" : isScrolled})}>
+                <div className={classnames('rounded-b-3xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
                     <Image
                         src="/images/bbstpa-forsite.png"
                         alt="Britton Logo"
@@ -45,6 +45,11 @@ 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})}>
+                    <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})}>
@@ -52,7 +57,7 @@ const Navbar = () => {
                     &nbsp;&nbsp;&nbsp;Benefit <br />
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services
                 </div> */}
-                <ul className="flex space-x-4 font-semibold text-lg uppercase">
+                <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
@@ -79,8 +84,8 @@ const Navbar = () => {
                         </Link>
                     </li>
                 </ul>
-                <div className="flex space-x-2 font-semibold">
-                    <Button className="bg-britton-neutral hover:bg-britton-accent2 py-1 px-4 rounded border-1 border-britton-dark">
+                <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
                     </Button>
                     <Button className="bg-britton-dark hover:bg-britton-medium text-britton-light py-1 px-4 rounded">

src/components/Section1.tsx

@@ -25,17 +25,16 @@ const Section1: React.FC<SectionProps> = (
   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-5xl h-30 pt-10 text-britton-accent">
+                <div className="text-4xl h-30 pt-10 text-britton-accent">
                     {title}
                 </div>
-                <div className="text-4xl text-left bg-britton-neutral text-britton-dark rounded-l-3xl p-8 h-full">
+                <div className="text-3xl text-left bg-britton-neutral text-britton-dark 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-neutral 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>

src/components/Section1Invert.tsx

@@ -31,10 +31,10 @@ const Section1Invert: React.FC<SectionProps> = (
 
         </div>
         <div className="flex flex-col w-7/12"> 
-            <div className="text-5xl text-right h-30 pt-10 text-britton-accent2">
+            <div className="text-4xl text-right h-30 pt-10 text-britton-accent2">
                 {title}
             </div>
-            <div className="text-4xl text-left bg-britton-medium text-britton-light rounded-r-3xl p-8 h-full">
+            <div className="text-3xl text-left bg-britton-medium text-britton-light rounded-r-3xl p-8 h-full">
                 {children}
             </div>
         </div>

src/components/Section1InvertLight.tsx

@@ -31,10 +31,10 @@ const Section1InvertLight: React.FC<SectionProps> = (
 
         </div>
         <div className="flex flex-col w-7/12"> 
-            <div className="text-5xl text-right h-30 pt-10 text-britton-accent2">
+            <div className="text-4xl text-right h-30 pt-10 text-britton-accent2">
                 {title}
             </div>
-            <div className="text-4xl text-left bg-britton-light text-britton-medium rounded-r-3xl p-8 h-full">
+            <div className="text-3xl text-left bg-britton-light text-britton-medium rounded-r-3xl p-8 h-full">
                 {children}
             </div>
         </div>

src/components/Section1Light.tsx

@@ -25,10 +25,10 @@ const Section1: React.FC<SectionProps> = (
   return (
     <div className='flex justify-center m-h-150  py-10 mx-20'>
         <div className="flex flex-col w-7/12"> 
-            <div className="text-5xl h-30 pt-10 text-britton-accent">
+            <div className="text-4xl h-30 pt-10 text-britton-accent">
                 {title}
             </div>
-            <div className="text-4xl text-left bg-britton-dark text-britton-light rounded-l-3xl p-8 h-full">
+            <div className="text-3xl text-left bg-britton-dark text-britton-light rounded-l-3xl p-8 h-full">
                 {children}
             </div>
         </div>

src/pages/_app.tsx

@@ -1,14 +1,22 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
+import { Poppins } 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'] })
 
 function MyApp({ Component, pageProps }: AppProps) {
+
+
   return (
     <>
-      <div className="bg-britton-dark min-h-screen"> 
+      <main className={classNames("bg-britton-dark min-h-screen", poppins.className)}> 
           <Navbar />
           <Component {...pageProps} />
-      </div>
+          <Footer />
+      </main>
     </>
   );
 }