Design A front page

.dockerignore

@@ -0,0 +1,3 @@
+    node_modules/
+    .env
+    .git

package-lock.json

@@ -1,12 +1,12 @@
 {
-  "name": "next-web",
+  "name": "britton-site",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "next-web",
+      "name": "britton-site",
-      "version": "0.1.0",
+      "version": "2.0.0",
       "dependencies": {
         "next": "15.3.4",
         "react": "^19.0.0",
@@ -18,8 +18,10 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "classnames": "^2.5",
         "eslint": "^9",
         "eslint-config-next": "15.3.4",
+        "react-icons": "^5.5",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -2329,6 +2331,13 @@
         "node": ">=18"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -5112,6 +5121,16 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -22,6 +22,8 @@
     "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
-    "@eslint/eslintrc": "^3"
+    "@eslint/eslintrc": "^3",
+    "react-icons": "^5.5",
+    "classnames": "^2.5"
   }
 }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/app/globals.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/layout.tsx

@@ -1,34 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}

src/components/Button.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+interface ButtonProps {
+  onClick?: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children, className }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    
+  return (
+    <button 
+        onClick={onClick} 
+        className={classnames(
+            className, {
+                'cursor-pointer': isHovered,
+                'cursor-default': !isHovered,
+            }
+        )}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/Navbar.tsx

@@ -0,0 +1,95 @@
+"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 Navbar = () => {
+
+    const [isScrolled, setIsScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 355) {
+                setIsScrolled(true);
+            } else {
+                setIsScrolled(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+  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
+                    }
+                )}
+        >
+            <div className="container mx-auto justify-between items-center flex">
+                <div className={classnames('rounded-3xl bg-britton-dark', {"hidden" : isScrolled})}>
+                    <Image
+                        src="/images/bbstpa-forsite.png"
+                        alt="Britton Logo"
+                        width={273}
+                        height={80}
+                    />
+                </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="flex space-x-4 font-semibold text-lg uppercase">
+                    <li>
+                        <Link href="/services" className="hover:text-britton-light">
+                            Employers
+                        </Link>
+                    </li>
+                    <li>
+                        <Link href="/contact" className="hover:text-britton-light">
+                            Members
+                        </Link>
+                    </li>
+                    <li>
+                        <Link href="/contact" className="hover:text-britton-light">
+                            Providers
+                        </Link>
+                    </li>
+                    <li>
+                        <Link href="/contact" className="hover:text-britton-light">
+                            Brokers
+                        </Link>
+                    </li>
+                    <li>
+                        <Link href="/contact" className="hover:text-britton-light">
+                            Contact Us
+                        </Link>
+                    </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">
+                        Sign In
+                    </Button>
+                    <Button className="bg-britton-dark hover:bg-britton-medium text-britton-light py-1 px-4 rounded">
+                        Get a Quote
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/Section1.tsx

@@ -0,0 +1,45 @@
+"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-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>
+        {/* <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>
+  );
+};
+
+export default Section1;

src/components/Section1Invert.tsx

@@ -0,0 +1,45 @@
+"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-5xl 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">
+                {children}
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default Section1Invert;

src/components/Section1InvertLight.tsx

@@ -0,0 +1,45 @@
+"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-5xl 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">
+                {children}
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default Section1InvertLight;

src/components/Section1Light.tsx

@@ -0,0 +1,45 @@
+"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-5xl 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">
+                {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

@@ -0,0 +1,16 @@
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
+import Navbar from '../components/Navbar';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <div className="bg-britton-dark min-h-screen"> 
+          <Navbar />
+          <Component {...pageProps} />
+      </div>
+    </>
+  );
+}
+
+export default MyApp;

src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

src/pages/index.tsx

@@ -0,0 +1,71 @@
+import Section1 from '../components/Section1';
+import Section1Invert from '../components/Section1Invert';
+import Section1Light from '../components/Section1Light';
+import Section1InvertLight from '../components/Section1InvertLight';
+
+export default function Home() {
+  return (
+    <>
+      <div className="p-20">
+        <div className="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'>
+          <Section1
+            title="Self-Funded Plans"
+            imageUrl="/images/SelfFundedDrSquare.png"
+          >
+            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>
+        </div>
+
+
+        <Section1Invert
+          title="Health & Risk Management"
+          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
+            title="Regulatory Compliance"
+            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>
+
+        <Section1InvertLight
+          title="Benefit Access & Online Support"
+          imageUrl="/images/SelfFundedDrSquare.png"
+        >
+          This will all be new text talking about our login pages and other online support.
+
+          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.
+        </Section1InvertLight>
+
+
+
+
+
+
+
+
+
+        <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>
+    </>
+  );
+}

src/styles/globals.css

@@ -0,0 +1,44 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme {
+  --color-britton-dark: #04153E;
+  --color-britton-medium: #2A4B6F;
+  --color-britton-light: #6AC8F1;
+  --color-britton-neutral: #E0E0E0;
+  --color-britton-accent: #B87333;
+  --color-britton-accent2:  #CD7F32;
+  /* --color-britton-neutral: #EEF2E3; */
+  /* name colors like below AFTER we settle on them for sure */
+  /* --color-britton-deepcove: #04153E;
+  --color-britton-bluetang: #2A4B6F;
+  --color-britton-bluemana: #6AC8F1; */
+  /* --color-britton-deepcove-background: #04153E;
+  --color-britton-bluetang-background: #2A4B6F;
+  --color-britton-bluemana-background: #6AC8F1; */
+  /* Add more custom colors as needed */
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}