Docker compose update, fixed a few navbar related size issues

docker-compose.yml

@@ -9,4 +9,4 @@ services:
       - "3001:3001"
     volumes:
       - .:/usr/src/app # Mount the current directory into the container for live reloading
-      - /app/node_modules # Isolate node_modules to prevent host-container conflicts
+      - /usr/src/app/node_modules # Isolate node_modules to prevent host-container conflicts

src/components/Navbar.tsx

@@ -12,6 +12,7 @@ const Navbar = () => {
 
     useEffect(() => {
         const handleScroll = () => {
+            // Find pixels from top to bottom of "tag line" div
             if (window.scrollY > 355) {
                 setIsScrolled(true);
             } else {
@@ -79,7 +80,7 @@ const Navbar = () => {
                     </li>
                 </ul>
                 <div className="flex space-x-2 font-semibold">
-                    <Button className="bg-britton-neutral py-1 px-4 rounded border-1 border-britton-dark">
+                    <Button className="bg-britton-neutral hover:bg-britton-accent2 py-1 px-4 rounded border-1 border-britton-dark">
                         Sign In
                     </Button>
                     <Button className="bg-britton-dark hover:bg-britton-medium text-britton-light py-1 px-4 rounded">

src/components/Section1.tsx

@@ -23,20 +23,22 @@ const Section1: React.FC<SectionProps> = (
      }
 ) => {
   return (
-    <div className='flex justify-center m-h-150  py-10 mx-20'>
+    <div className='flex justify-center m-h-150  py-10'>
-        <div className="flex flex-col w-7/12"> 
+        <div className='w-11/12 flex'>
-            <div className="text-5xl h-30 pt-10 text-britton-accent">
+            <div className="flex flex-col w-7/12"> 
-                {title}
+                <div className="text-5xl 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">
+                    {children}
+                </div>
             </div>
-            <div className="text-4xl text-left bg-britton-neutral text-britton-dark rounded-l-3xl p-8 h-full">
+            {/* <Image src="/images/placeHolder.png" alt="Description of image" width={300} height={300} /> */}
-                {children}
+            <div className='w-5/12 rounded-r-3xl rounded-tl-3xl p-4 bg-britton-neutral justify-center'>
-            </div>
+                {/* <div className={`h-full w-full bg-cover mask-cover mask-[url(/images/brittonRoundedOctogon.png)] bg-[url(/images/placeHolder.png)]`} /> */}
-        </div>
+                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(/images/placeHolder.png)]`} />
-        {/* <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>
         </div>
     </div>
   );

src/pages/index.tsx

@@ -6,8 +6,8 @@ import Section1InvertLight from '../components/Section1InvertLight';
 export default function Home() {
   return (
     <>
-      <div className="p-20">
+      <div className="flex justify-center py-20">
-        <div className="bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
+        <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>
@@ -28,8 +28,6 @@ export default function Home() {
           imageUrl="/images/SelfFundedDrSquare.png"
         >
           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.
-
-          With stop-loss insurance, you pay a fixed fee and your claim costs are set a predetermined level. If a claim exceeds that level, the stop-loss insurance will pay the rest. This coverage can be purchased to cover catastrophic claims on one member (known as specific coverage) or it can cover claims that significantly exceed the expected level for the entire group (aggregate coverage).
         </Section1Invert>
         <div className='bg-britton-neutral rounded-3xl'>
           <Section1Light
@@ -37,8 +35,6 @@ export default function Home() {
             imageUrl="/images/SelfFundedDrSquare.png"
           >
             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.
-
-            In addition to the generous cost savings for you and your employees, we also 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.
           </Section1Light>
 
         </div>
@@ -48,8 +44,9 @@ export default function Home() {
           imageUrl="/images/SelfFundedDrSquare.png"
         >
           This will all be new text talking about our login pages and other online support.
-
+          <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. Donec quam metus, dictum quis egestas a, semper nec elit. Donec maximus semper vestibulum. Nullam eu libero at metus cursus tristique sed et mi. Aliquam sodales nunc ex, ut euismod tortor venenatis vel. Proin finibus sodales nibh, sit amet luctus ligula ultrices dapibus. Quisque in lacinia dolor.
+          <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>