Design A front page

2025-06-30 15:54:10 -04:00
parent f971a75ad5
commit 3d85feb4b3
27 changed files with 480 additions and 70 deletions
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;