homepage/landing pages 'done', dashboard started
This commit is contained in:
Jason Jordan
Generated
+240
@@ -14,6 +14,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/eslintrc": "^3",
|
"@eslint/eslintrc": "^3",
|
||||||
|
"@headlessui/react": "2.2.4",
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
@@ -241,6 +242,85 @@
|
|||||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@floating-ui/core": {
|
||||||
|
"version": "1.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
|
||||||
|
"integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/utils": "^0.2.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/dom": {
|
||||||
|
"version": "1.7.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
|
||||||
|
"integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/core": "^1.7.2",
|
||||||
|
"@floating-ui/utils": "^0.2.10"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react": {
|
||||||
|
"version": "0.26.28",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
|
||||||
|
"integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react-dom": "^2.1.2",
|
||||||
|
"@floating-ui/utils": "^0.2.8",
|
||||||
|
"tabbable": "^6.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/react-dom": {
|
||||||
|
"version": "2.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
|
||||||
|
"integrity": "sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/dom": "^1.7.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@floating-ui/utils": {
|
||||||
|
"version": "0.2.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||||
|
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/@headlessui/react": {
|
||||||
|
"version": "2.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.4.tgz",
|
||||||
|
"integrity": "sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@floating-ui/react": "^0.26.16",
|
||||||
|
"@react-aria/focus": "^3.20.2",
|
||||||
|
"@react-aria/interactions": "^3.25.0",
|
||||||
|
"@tanstack/react-virtual": "^3.13.9",
|
||||||
|
"use-sync-external-store": "^1.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^18 || ^19 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^18 || ^19 || ^19.0.0-rc"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@humanfs/core": {
|
"node_modules/@humanfs/core": {
|
||||||
"version": "0.19.1",
|
"version": "0.19.1",
|
||||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||||
@@ -974,6 +1054,110 @@
|
|||||||
"node": ">=12.4.0"
|
"node": ">=12.4.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-aria/focus": {
|
||||||
|
"version": "3.20.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.5.tgz",
|
||||||
|
"integrity": "sha512-JpFtXmWQ0Oca7FcvkqgjSyo6xEP7v3oQOLUId6o0xTvm4AD5W0mU2r3lYrbhsJ+XxdUUX4AVR5473sZZ85kU4A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/interactions": "^3.25.3",
|
||||||
|
"@react-aria/utils": "^3.29.1",
|
||||||
|
"@react-types/shared": "^3.30.0",
|
||||||
|
"@swc/helpers": "^0.5.0",
|
||||||
|
"clsx": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/interactions": {
|
||||||
|
"version": "3.25.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.3.tgz",
|
||||||
|
"integrity": "sha512-J1bhlrNtjPS/fe5uJQ+0c7/jiXniwa4RQlP+Emjfc/iuqpW2RhbF9ou5vROcLzWIyaW8tVMZ468J68rAs/aZ5A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/ssr": "^3.9.9",
|
||||||
|
"@react-aria/utils": "^3.29.1",
|
||||||
|
"@react-stately/flags": "^3.1.2",
|
||||||
|
"@react-types/shared": "^3.30.0",
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/ssr": {
|
||||||
|
"version": "3.9.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.9.tgz",
|
||||||
|
"integrity": "sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 12"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-aria/utils": {
|
||||||
|
"version": "3.29.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.29.1.tgz",
|
||||||
|
"integrity": "sha512-yXMFVJ73rbQ/yYE/49n5Uidjw7kh192WNN9PNQGV0Xoc7EJUlSOxqhnpHmYTyO0EotJ8fdM1fMH8durHjUSI8g==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/ssr": "^3.9.9",
|
||||||
|
"@react-stately/flags": "^3.1.2",
|
||||||
|
"@react-stately/utils": "^3.10.7",
|
||||||
|
"@react-types/shared": "^3.30.0",
|
||||||
|
"@swc/helpers": "^0.5.0",
|
||||||
|
"clsx": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-stately/flags": {
|
||||||
|
"version": "3.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
|
||||||
|
"integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-stately/utils": {
|
||||||
|
"version": "3.10.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.7.tgz",
|
||||||
|
"integrity": "sha512-cWvjGAocvy4abO9zbr6PW6taHgF24Mwy/LbQ4TC4Aq3tKdKDntxyD+sh7AkSRfJRT2ccMVaHVv2+FfHThd3PKQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@react-types/shared": {
|
||||||
|
"version": "3.30.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz",
|
||||||
|
"integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rtsao/scc": {
|
"node_modules/@rtsao/scc": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||||
@@ -1279,6 +1463,35 @@
|
|||||||
"tailwindcss": "4.1.10"
|
"tailwindcss": "4.1.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tanstack/react-virtual": {
|
||||||
|
"version": "3.13.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
|
||||||
|
"integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@tanstack/virtual-core": "3.13.12"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/tannerlinsley"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tanstack/virtual-core": {
|
||||||
|
"version": "3.13.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
|
||||||
|
"integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/tannerlinsley"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@tybys/wasm-util": {
|
"node_modules/@tybys/wasm-util": {
|
||||||
"version": "0.9.0",
|
"version": "0.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
|
||||||
@@ -2345,6 +2558,16 @@
|
|||||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/clsx": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/color": {
|
"node_modules/color": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||||
@@ -5756,6 +5979,13 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/tabbable": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/tailwind-rounded-out": {
|
"node_modules/tailwind-rounded-out": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-rounded-out/-/tailwind-rounded-out-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-rounded-out/-/tailwind-rounded-out-2.0.0.tgz",
|
||||||
@@ -6064,6 +6294,16 @@
|
|||||||
"punycode": "^2.1.0"
|
"punycode": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/use-sync-external-store": {
|
||||||
|
"version": "1.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||||
|
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/which": {
|
"node_modules/which": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||||
|
|||||||
+2
-1
@@ -25,6 +25,7 @@
|
|||||||
"@eslint/eslintrc": "^3",
|
"@eslint/eslintrc": "^3",
|
||||||
"react-icons": "^5.5",
|
"react-icons": "^5.5",
|
||||||
"classnames": "^2.5",
|
"classnames": "^2.5",
|
||||||
"tailwind-rounded-out": "2.0.0"
|
"tailwind-rounded-out": "2.0.0",
|
||||||
|
"@headlessui/react": "2.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+37
-74
@@ -1,84 +1,47 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
|
||||||
|
import { FaAngleDown } from "react-icons/fa";
|
||||||
|
|
||||||
import Button from './Button';
|
const userRoles: string[] = ["Member", "Employer"]
|
||||||
import { MenuItem } from './Navbar'
|
|
||||||
|
|
||||||
interface Props {
|
interface DropdownProps {
|
||||||
item: MenuItem;
|
page: "Member" | "Employer";
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Dropdown(props: Props) {
|
const Dropdown: React.FC<DropdownProps> = ({page}) => {
|
||||||
const { item } = props;
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
||||||
const menuItems = item?.children ? item.children : [];
|
|
||||||
const lastIndex = menuItems.length - 1;
|
|
||||||
const itemId = item.id;
|
|
||||||
|
|
||||||
const toggle = () => {
|
let otherRoles: string[] = userRoles.filter(role => role !== page);
|
||||||
setIsOpen(old => !old);
|
|
||||||
}
|
|
||||||
|
|
||||||
const transClass = isOpen
|
|
||||||
?
|
|
||||||
"flex"
|
|
||||||
:
|
|
||||||
"hidden";
|
|
||||||
|
|
||||||
function isLastItem (currentItem: MenuItem) {
|
|
||||||
return lastIndex == menuItems.indexOf(currentItem)
|
|
||||||
}
|
|
||||||
|
|
||||||
function isSecondItem (currentItem: MenuItem) {
|
|
||||||
return 1 == menuItems.indexOf(currentItem)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="">
|
||||||
<div className="relative">
|
<Menu>
|
||||||
<Button
|
<MenuButton as="a" className={classnames(
|
||||||
className="hover:text-britton-light font-semibold text-lg"
|
"text-bluemana decoration-bluemana underline hover:text-atmosphere hover:decoration-atmosphere flex items-end",
|
||||||
onClick={toggle}
|
{
|
||||||
>{item.title}</Button>
|
'cursor-pointer': isHovered,
|
||||||
<div className={`absolute top-8 z-11 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
|
'cursor-default': !isHovered,
|
||||||
{
|
}
|
||||||
menuItems.map(item =>
|
)}
|
||||||
<>
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
<Link
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
key={item.id}
|
>
|
||||||
className={classnames(
|
{page}
|
||||||
"hover:text-britton-neutral text-center px-2 py-1",
|
</MenuButton>
|
||||||
{
|
<MenuItems anchor="bottom end" className={"py-2 bg-deepcove border border-copper focus:outline-hidden text-platinum text-md text-left font-semibold rounded-md divide-y divide-[#B8B8B8]"}>
|
||||||
"hover:bg-britton-newblue" : itemId == 'employers',
|
{otherRoles.map((role) => (
|
||||||
"hover:bg-britton-medium" : itemId != 'employers'
|
<MenuItem as="div" className={"px-1"}>
|
||||||
}
|
<a className="block data-focus:text-atmosphere hover:text-atmosphere" href={`/dashboard/${role.toLowerCase()}`}>
|
||||||
)}
|
Switch To {role} Role
|
||||||
href={item?.route || ''}
|
</a>
|
||||||
onClick={toggle}
|
</MenuItem>
|
||||||
>
|
))}
|
||||||
{item.title}
|
</MenuItems>
|
||||||
</Link>
|
</Menu>
|
||||||
<div className={classnames(
|
</div>
|
||||||
"h-px bg-britton-accent mx-2",
|
);
|
||||||
{"hidden" : isLastItem(item)}
|
};
|
||||||
)}
|
|
||||||
/>
|
export default Dropdown;
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{
|
|
||||||
isOpen
|
|
||||||
?
|
|
||||||
<div
|
|
||||||
className="fixed top-0 right-0 bottom-0 left-0 z-11 bg-britton-dark/40"
|
|
||||||
onClick={toggle}
|
|
||||||
></div>
|
|
||||||
:
|
|
||||||
<></>
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
+29
-29
@@ -11,8 +11,8 @@ const headerFont = Fraunces({ subsets: ['latin'] })
|
|||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<footer className="m-h-[135vh] bg-britton-dark flex justify-center py-30">
|
<footer className="m-h-[135vh] bg-deepcove flex justify-center py-30">
|
||||||
<div className={classnames("w-11/12 md:flex md:items-center md:justify-evenly text-britton-neutral", font.className)}>
|
<div className={classnames("w-11/12 md:flex md:items-center md:justify-evenly text-platinum", font.className)}>
|
||||||
<div className='w-1/2 h-full flex flex-col justify-between'>
|
<div className='w-1/2 h-full flex flex-col justify-between'>
|
||||||
<div className='w-full flex justify-start'>
|
<div className='w-full flex justify-start'>
|
||||||
<Image
|
<Image
|
||||||
@@ -25,15 +25,15 @@ const Footer = () => {
|
|||||||
<div className='w-full flex flex-col justify-start ml-[22px]'>
|
<div className='w-full flex flex-col justify-start ml-[22px]'>
|
||||||
<div className='flex'>
|
<div className='flex'>
|
||||||
<Link href="https://www.linkedin.com/company/discovery-insurance">
|
<Link href="https://www.linkedin.com/company/discovery-insurance">
|
||||||
<BsLinkedin size={32} className='hover:text-britton-newblue' />
|
<BsLinkedin size={32} className='hover:text-atmosphere' />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<ul className="flex flex-col pt-2 text-md font-semibold">
|
<ul className="flex flex-col pt-2 text-md font-semibold">
|
||||||
<li className='pt-1'>
|
<li className='pt-1'>
|
||||||
<a href="#" className="hover:text-britton-newblue">Terms of Service</a>
|
<a href="#" className="hover:text-atmosphere">Terms of Service</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-1'>
|
<li className='pt-1'>
|
||||||
<a href="#" className="hover:text-britton-newblue">Website Privacy Statement</a>
|
<a href="#" className="hover:text-atmosphere">Website Privacy Statement</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-3 font-normal text-xs'>
|
<li className='pt-3 font-normal text-xs'>
|
||||||
© Copyright 2025 Britton Benefit Services, LLC All Rights Reserved
|
© Copyright 2025 Britton Benefit Services, LLC All Rights Reserved
|
||||||
@@ -44,82 +44,82 @@ const Footer = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
||||||
<div className={classnames("text-xl text-britton-light pb-12", headerFont.className)}>
|
<div className={classnames("text-xl text-bluemana pb-12", headerFont.className)}>
|
||||||
<div className="pb-6">
|
<div className="pb-6">
|
||||||
<a href="#" className="hover:text-britton-accent">Log In?</a>
|
<a href="#" className="hover:text-bronze">Log In?</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Resources</div>
|
<div className="text-xl border-b border-bronze mt-4 pb-2 mr-20">Resources</div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="pt-3 text-md font-medium">
|
<ul className="pt-3 text-md font-medium">
|
||||||
<li className="text-britton-accent pb-4">
|
<li className="text-bronze pb-4">
|
||||||
Members
|
Members
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Members Landing</a>
|
<a href="#" className='hover:text-bluemana'>Members Landing</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Find a Medical Provider</a>
|
<a href="#" className='hover:text-bluemana'>Find a Medical Provider</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Obtain Rx Information</a>
|
<a href="#" className='hover:text-bluemana'>Obtain Rx Information</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="pt-7 text-md font-medium">
|
<ul className="pt-7 text-md font-medium">
|
||||||
<li className="text-britton-accent pb-4">
|
<li className="text-bronze pb-4">
|
||||||
Employers
|
Employers
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Employers Landing</a>
|
<a href="#" className='hover:text-bluemana'>Employers Landing</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Self-Funded Plans</a>
|
<a href="#" className='hover:text-bluemana'>Self-Funded Plans</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Employer Services</a>
|
<a href="#" className='hover:text-bluemana'>Employer Services</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Control Health Care Costs</a>
|
<a href="#" className='hover:text-bluemana'>Control Health Care Costs</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="pt-7 text-md font-medium">
|
<ul className="pt-7 text-md font-medium">
|
||||||
<li className="text-britton-accent mb-4">
|
<li className="text-bronze mb-4">
|
||||||
Providers
|
Providers
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Providers Landing</a>
|
<a href="#" className='hover:text-bluemana'>Providers Landing</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Eligibility Lookup</a>
|
<a href="#" className='hover:text-bluemana'>Eligibility Lookup</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Contact BBS</a>
|
<a href="#" className='hover:text-bluemana'>Contact BBS</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul className="pt-7 text-md font-medium">
|
<ul className="pt-7 text-md font-medium">
|
||||||
<li className="text-britton-accent mb-4">
|
<li className="text-bronze mb-4">
|
||||||
Brokers
|
Brokers
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-2'>
|
<li className='pt-2'>
|
||||||
<a href="#" className='hover:text-britton-light'>Brokers Landing</a>
|
<a href="#" className='hover:text-bluemana'>Brokers Landing</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
<div className='w-1/4 h-full flex flex-col justify-start pt-5'>
|
||||||
<div className={classnames("text-xl text-britton-light pb-12", headerFont.className)}>
|
<div className={classnames("text-xl text-bluemana pb-12", headerFont.className)}>
|
||||||
<div className="pb-6">
|
<div className="pb-6">
|
||||||
<a href="#" className="hover:text-britton-accent">Get a Quote</a>
|
<a href="#" className="hover:text-bronze">Get a Quote</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Company</div>
|
<div className="text-xl border-b border-bronze mt-4 pb-2 mr-20">Company</div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="pt-3 text-md font-medium">
|
<ul className="pt-3 text-md font-medium">
|
||||||
<li className='pt-3'>
|
<li className='pt-3'>
|
||||||
<a href="#" className='hover:text-britton-light' >About</a>
|
<a href="#" className='hover:text-bluemana' >About</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-6'>
|
<li className='pt-6'>
|
||||||
<a href="#" className='hover:text-britton-light' >Careers</a>
|
<a href="#" className='hover:text-bluemana' >Careers</a>
|
||||||
</li>
|
</li>
|
||||||
<li className='pt-6'>
|
<li className='pt-6'>
|
||||||
<a href="#" className='hover:text-britton-light' >Contact Us</a>
|
<a href="#" className='hover:text-bluemana' >Contact Us</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+13
-13
@@ -29,10 +29,10 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
let imageShadowColor;
|
let imageShadowColor;
|
||||||
|
|
||||||
if (invert) {
|
if (invert) {
|
||||||
cardBGColor = "bg-britton-dark";
|
cardBGColor = "bg-deepcove";
|
||||||
imageShadowColor = "shadow-britton-neutral/70";
|
imageShadowColor = "shadow-platinum/70";
|
||||||
} else {
|
} else {
|
||||||
cardBGColor = "bg-britton-medium";
|
cardBGColor = "bg-bluetang";
|
||||||
imageShadowColor = "shadow-black/50";
|
imageShadowColor = "shadow-black/50";
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -40,14 +40,14 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
<div className='flex m-h-150 justify-center py-10'>
|
<div className='flex m-h-150 justify-center py-10'>
|
||||||
<div className='flex flex-col w-11/12'>
|
<div className='flex flex-col w-11/12'>
|
||||||
<div className='flex flex-col w-full items-center'>
|
<div className='flex flex-col w-full items-center'>
|
||||||
<div className={classnames('flex rounded-2xl shadow-britton-accent2/90',
|
<div className={classnames('flex rounded-2xl shadow-copper/90',
|
||||||
{
|
{
|
||||||
"flex-row-reverse relative" : invert,
|
"flex-row-reverse relative" : invert,
|
||||||
"shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert
|
"shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert
|
||||||
})}>
|
})}>
|
||||||
<div className={classnames({
|
<div className={classnames({
|
||||||
"hidden" : !invert,
|
"hidden" : !invert,
|
||||||
"after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-britton-accent2/90" : invert,
|
"after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-copper/90" : invert,
|
||||||
})}/>
|
})}/>
|
||||||
<div className={classnames("flex flex-col w-7/12")}>
|
<div className={classnames("flex flex-col w-7/12")}>
|
||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
@@ -59,15 +59,15 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
"relative w-full pt-8 mb-2 ml-8 mr-100 border-b-3",
|
"relative w-full pt-8 mb-2 ml-8 mr-100 border-b-3",
|
||||||
{
|
{
|
||||||
"border-britton-newblue" : !invert,
|
"border-atmosphere" : !invert,
|
||||||
"border-britton-accent" : invert
|
"border-bronze" : invert
|
||||||
}
|
}
|
||||||
)}>
|
)}>
|
||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
|
'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
|
||||||
{
|
{
|
||||||
"text-britton-accent" : !invert,
|
"text-bronze" : !invert,
|
||||||
"text-britton-dark font-semibold" : invert
|
"text-deepcove font-semibold" : invert
|
||||||
}
|
}
|
||||||
)}>
|
)}>
|
||||||
{title}
|
{title}
|
||||||
@@ -75,7 +75,7 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
"relative text-2xl text-left text-britton-neutral font-medium p-8 h-full",
|
"relative xl:text-xl 2xl:text-2xl text-left text-platinum font-medium p-8 h-full",
|
||||||
cardBGColor, font.className,
|
cardBGColor, font.className,
|
||||||
{
|
{
|
||||||
"rounded-l-2xl rounded-out-rt-2xl" : !invert,
|
"rounded-l-2xl rounded-out-rt-2xl" : !invert,
|
||||||
@@ -98,13 +98,13 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
imageShadowColor
|
imageShadowColor
|
||||||
)}>
|
)}>
|
||||||
<img src={imageUrl} alt="Description" className="grayscale rounded-xl bg-cover bg-center" />
|
<img src={imageUrl} alt="Description" className="grayscale rounded-xl bg-cover bg-center" />
|
||||||
<div className="after:absolute after:inset-0 after:bg-britton-medium after:mix-blend-color after:rounded-xl" />
|
<div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-xl" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
"w-2/9 relative flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px] shadow-britton-accent2/90",
|
"w-2/9 relative flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px] shadow-copper/90",
|
||||||
cardBGColor,
|
cardBGColor,
|
||||||
{
|
{
|
||||||
"ml-[calc(2/9*100%)]" : !invert,
|
"ml-[calc(2/9*100%)]" : !invert,
|
||||||
@@ -113,7 +113,7 @@ const InfoCard: React.FC<InfoCardProps> = (
|
|||||||
)}>
|
)}>
|
||||||
<Link href={learnMoreUrl ? learnMoreUrl : '/'}
|
<Link href={learnMoreUrl ? learnMoreUrl : '/'}
|
||||||
className={classnames(
|
className={classnames(
|
||||||
"py-1 px-4 rounded text-xl text-semibold border-2 text-britton-accent hover:text-britton-accent2 border-britton-accent hover:border-britton-accent2",
|
"py-1 px-4 rounded text-xl text-semibold border-2 text-bronze hover:text-copper border-bronze hover:border-copper",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
Learn More
|
Learn More
|
||||||
|
|||||||
@@ -1,12 +1,22 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
interface InlineLinkProps {
|
interface InlineLinkProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
alt?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const InlineLink: React.FC<InlineLinkProps> = ({ children }) => {
|
const InlineLink: React.FC<InlineLinkProps> = ({ children, alt }) => {
|
||||||
return (
|
return (
|
||||||
<a href="#" className='text-britton-light hover:text-britton-newblue' >{children}</a>
|
<a href="#" className={classnames(
|
||||||
|
{
|
||||||
|
"text-bluemana hover:text-bronze" : !alt,
|
||||||
|
"text-bluemana hover:text-atmosphere" : alt,
|
||||||
|
}
|
||||||
|
)} >
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,117 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Schibsted_Grotesk } from 'next/font/google'
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import InlineLink from "../components/InlineLink";
|
||||||
|
|
||||||
|
|
||||||
|
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||||
|
|
||||||
|
interface LandingPageProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
imageUrl: string;
|
||||||
|
underlineColor: string;
|
||||||
|
stripeColor: string;
|
||||||
|
headerColor: string;
|
||||||
|
headerText: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LandingPage: React.FC<LandingPageProps> = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
imageUrl,
|
||||||
|
underlineColor,
|
||||||
|
stripeColor,
|
||||||
|
headerColor,
|
||||||
|
headerText
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const stripeBorder: string = stripeColor.replace("bg-", "")
|
||||||
|
const underlineBorder: string = underlineColor.replace("bg-", "")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative w-full">
|
||||||
|
<div className="absolute bottom-0 left-0 flex items-end w-full h-full">
|
||||||
|
<div className="w-1/24 h-full flex justify-end">
|
||||||
|
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||||
|
<div className={classnames(
|
||||||
|
"relative h-full border-l-6 rounded-out-br-4xl",
|
||||||
|
stripeColor, `border-${underlineBorder}`
|
||||||
|
)} />
|
||||||
|
{/* <div className={classnames(
|
||||||
|
"h-9 rounded-bl-4xl border-b-6 border-l-6",
|
||||||
|
stripeColor, `border-${underlineBorder}`
|
||||||
|
)} /> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div className="w-11/12 flex justify-start">
|
||||||
|
<div className={classnames(
|
||||||
|
"w-full h-9 border-b-6 rounded-br-4xl",
|
||||||
|
stripeColor, `border-${underlineBorder}`
|
||||||
|
)} />
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex justify-start items-end pt-30">
|
||||||
|
<div className="w-1/24 h-full flex justify-end">
|
||||||
|
<div className="w-[calc(50%+6px)] flex flex-col justify-end z-1 bg-deepcove">
|
||||||
|
<div className={classnames(
|
||||||
|
"h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl",
|
||||||
|
stripeColor, `border-${underlineBorder}`
|
||||||
|
)} />
|
||||||
|
<div className={classnames(
|
||||||
|
"h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl",
|
||||||
|
stripeColor, `border-${underlineBorder}`
|
||||||
|
)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={`w-11/12 flex flex-col justify-end mb-[14px]`}>
|
||||||
|
<div className={classnames(
|
||||||
|
"mb-[7px] text-5xl text-left ml-10 z-1",
|
||||||
|
headerColor
|
||||||
|
)}>
|
||||||
|
{headerText}
|
||||||
|
</div>
|
||||||
|
<div className={classnames(
|
||||||
|
"w-full h-[6px] rounded-r",
|
||||||
|
underlineColor
|
||||||
|
)}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex justify-center pb-30">
|
||||||
|
<div className="w-11/12 z-1">
|
||||||
|
<div className="relative w-full flex justify-start pl-10 py-5">
|
||||||
|
<div className="absolute flex flex-col justify-center left-0 bottom-0 w-full h-full">
|
||||||
|
<div className="relative h-80 w-full bg-bluetang rounded-r-2xl rounded-out-lt-3xl rounded-out-lb-3xl border-r-2 border-copper" />
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-3/5 flex flex-col justify-center z-2")}>
|
||||||
|
<div className={classnames("text-4xl pb-8")}>
|
||||||
|
Quick Access to Your Services
|
||||||
|
</div>
|
||||||
|
<div className={classnames("text-2xl leading-12", font.className)}>
|
||||||
|
• <InlineLink>{headerText} Login/Registration</InlineLink><br />
|
||||||
|
• <InlineLink>Link to Thing 1</InlineLink><br />
|
||||||
|
• <InlineLink>Link to Thing 2</InlineLink><br />
|
||||||
|
• <InlineLink>Link to another Thing</InlineLink><br />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-2/5 flex justify-center mr-10 bg-atmosphere rounded-2xl z-2">
|
||||||
|
<div className={classnames(
|
||||||
|
"relative w-9/10"
|
||||||
|
)}>
|
||||||
|
<img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
|
||||||
|
<div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full text-2xl px-10", font.className)}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LandingPage;
|
||||||
+22
-18
@@ -5,7 +5,6 @@ import classnames from 'classnames';
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Button from './Button';
|
import Button from './Button';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import Dropdown from "./Dropdown";
|
|
||||||
|
|
||||||
export interface MenuItem {
|
export interface MenuItem {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -97,16 +96,16 @@ const Navbar = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="sticky top-0 left-0 z-10 hidden md:flex h-[85px] justify-center bg-transparent">
|
<nav className="fixed top-0 left-0 z-10 hidden md:flex w-full h-[85px] justify-center bg-transparent">
|
||||||
<div className={classnames(
|
<div className={classnames(
|
||||||
"w-11/12 bg-britton-neutral px-1 text-britton-dark rounded-b-3xl", {
|
"w-11/12 bg-platinum px-1 text-deepcove rounded-b-3xl", {
|
||||||
"h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
|
"h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
|
||||||
"h-full pb-4" : !isScrolled
|
"h-full pb-4" : !isScrolled
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="w-full px-3 justify-between items-center flex">
|
<div className="w-full px-3 justify-between items-center flex">
|
||||||
<div className={classnames('rounded-b-2xl bg-britton-dark w-72', {"hidden" : isScrolled})}>
|
<div className={classnames('rounded-b-2xl bg-deepcove w-72', {"hidden" : isScrolled})}>
|
||||||
<Image
|
<Image
|
||||||
src="/images/bbstpa-forsite.png"
|
src="/images/bbstpa-forsite.png"
|
||||||
alt="Britton Logo"
|
alt="Britton Logo"
|
||||||
@@ -114,34 +113,34 @@ const Navbar = () => {
|
|||||||
height={60}
|
height={60}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classnames('rounded-b-2xl py-2 mb-1 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
|
<div className={classnames('rounded-b-2xl py-2 mb-1 bg-deepcove font-semibold text-platinum text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
Britton Benefit Services
|
Britton Benefit Services
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<ul className={classnames("flex space-x-4 font-semibold text-xl", {"pl-2" : isScrolled})}>
|
<ul className={classnames("flex space-x-4 font-semibold text-xl", {"pl-2" : isScrolled})}>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/" className="hover:text-britton-light">
|
<Link href="/members" className="hover:text-bluemana">
|
||||||
Employers
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Link href="/" className="hover:text-britton-light">
|
|
||||||
Members
|
Members
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/" className="hover:text-britton-light">
|
<Link href="/employers" className="hover:text-bluemana">
|
||||||
|
Employers
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link href="/" className="hover:text-bluemana">
|
||||||
Providers
|
Providers
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/" className="hover:text-britton-light">
|
<Link href="/" className="hover:text-bluemana">
|
||||||
Brokers
|
Brokers
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link href="/" className="hover:text-britton-light">
|
<Link href="/" className="hover:text-bluemana">
|
||||||
Services
|
Services
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
@@ -152,17 +151,22 @@ const Navbar = () => {
|
|||||||
(
|
(
|
||||||
<Dropdown item={item} />
|
<Dropdown item={item} />
|
||||||
) : (
|
) : (
|
||||||
<Link className="hover:text-britton-light" href={item?.route || ""}>
|
<Link className="hover:text-bluemana" href={item?.route || ""}>
|
||||||
{item.title}
|
{item.title}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div> */}
|
</div> */}
|
||||||
<div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}>
|
<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">
|
<Link href="/dashboard/broker" passHref>
|
||||||
|
<button className="bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
|
||||||
|
Sign In
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
{/* <Button href="" className="bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
|
||||||
Sign In
|
Sign In
|
||||||
</Button>
|
</Button> */}
|
||||||
<Button className="bg-britton-dark hover:bg-britton-medium text-britton-light py-1 px-4 rounded">
|
<Button className="bg-deepcove hover:bg-bluetang text-bluemana py-1 px-4 rounded">
|
||||||
Get a Quote
|
Get a Quote
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,16 +21,16 @@ const Tagline: React.FC<TaglineProps> = (
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='h-[calc(100vh-85px)] lg:min-h-[640px] xl:min-h-[786px] 2xl:min-h-[1080px] flex'>
|
<div className='h-[calc(100vh-85px)] lg:min-h-[640px] xl:min-h-[786px] 2xl:min-h-[1080px] flex'>
|
||||||
<div className="absolute top-0 left-0 w-full aspect-16/9 bg-cover bg-center bg-[url('/images/bg.jpg')] bg-britton-medium bg-blend-soft-light bg-position-[center_-4.5rem] rounded-b-3xl">
|
<div className="absolute top-0 left-0 w-full aspect-16/9 bg-cover bg-center bg-[url('/images/bg.jpg')] bg-[#223C59] bg-blend-soft-light bg-position-[center_-4.5rem] rounded-b-3xl">
|
||||||
<div className="relative w-full h-full overflow-hidden">
|
<div className="relative w-full h-full overflow-hidden">
|
||||||
<div className="absolute flex flex-col w-100 lg:w-150 xl:w-190 bottom-2/5 left-7/20 text-center text-britton-dark text-4xl lg:text-5xl xl:text-7xl">
|
<div className="absolute flex flex-col w-100 lg:w-150 xl:w-190 bottom-2/5 left-7/20 text-center text-deepcove text-4xl lg:text-5xl xl:text-7xl">
|
||||||
<div className="flex justify-start">
|
<div className="flex justify-start">
|
||||||
<div className="w-5/6 lg:w-4/5 relative bg-britton-light rounded-t-3xl rounded-l-3xl rounded-out-br-3xl py-2 lg:py-3 px-4">
|
<div className="w-5/6 lg:w-4/5 relative bg-bluemana rounded-t-3xl rounded-l-3xl rounded-out-br-3xl py-2 lg:py-3 px-4">
|
||||||
{textTop}
|
{textTop}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<div className="w-5/6 lg:w-4/5 relative bg-britton-light rounded-b-3xl rounded-r-3xl rounded-out-tl-3xl py-2 lg:py-3 px-4">
|
<div className="w-5/6 lg:w-4/5 relative bg-bluemana rounded-b-3xl rounded-r-3xl rounded-out-tl-3xl py-2 lg:py-3 px-4">
|
||||||
{textBottom}
|
{textBottom}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
interface TextImage50Props {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
imageUrl: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const TextImage50: React.FC<TextImage50Props> = ({ children, className, imageUrl }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex justify-between py-5">
|
||||||
|
<div className="w-4/7 flex flex-col justify-start">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
<div className="w-2/5 flex flex-col justify-start">
|
||||||
|
<div className="flex justify-center bg-atmosphere rounded-2xl">
|
||||||
|
<div className={classnames(
|
||||||
|
"relative w-9/10"
|
||||||
|
)}>
|
||||||
|
<img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
|
||||||
|
<div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TextImage50;
|
||||||
Vendored
+2
-2
@@ -1,6 +1,6 @@
|
|||||||
export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-newblue" | "text-britton-newblue2" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2" | "text-britton-electric2";
|
export type textColor = "text-deepcove" | "text-bluetang" | "text-atmosphere" | "text-bluemana" | "text-platinum" | "text-bronze" | "text-copper";
|
||||||
|
|
||||||
export type bgColor = "bg-britton-medium-rgb" | "bg-britton-dark" | "bg-britton-medium" | "bg-britton-newblue" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
|
export type bgColor = "bg-deepcove" | "bg-bluetang" | "bg-atmosphere" | "bg-bluemana" | "bg-platinum" | "bg-bronze" | "bg-copper";
|
||||||
|
|
||||||
export interface brittonRGB {
|
export interface brittonRGB {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
|
|||||||
Vendored
+2
-2
@@ -1,6 +1,6 @@
|
|||||||
declare global {
|
declare global {
|
||||||
type textColors = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
|
type textColors = "text-deepcove" | "text-bluetang" | "text-bluemana" | "text-platinum" | "text-bronze" | "text-copper";
|
||||||
type bgColors = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
|
type bgColors = "bg-deepcove" | "bg-bluetang" | "bg-bluemana" | "bg-platinum" | "bg-bronze" | "bg-copper";
|
||||||
}
|
}
|
||||||
|
|
||||||
export {};
|
export {};
|
||||||
+10
-4
@@ -1,5 +1,6 @@
|
|||||||
import '../styles/globals.css';
|
import '../styles/globals.css';
|
||||||
import type { AppProps } from 'next/app';
|
import type { AppProps } from 'next/app';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
import { Fraunces } from 'next/font/google'
|
import { Fraunces } from 'next/font/google'
|
||||||
import Navbar from '../components/Navbar';
|
import Navbar from '../components/Navbar';
|
||||||
import Footer from '../components/Footer';
|
import Footer from '../components/Footer';
|
||||||
@@ -8,12 +9,17 @@ import classNames from 'classnames';
|
|||||||
const font = Fraunces({ subsets: ['latin'] })
|
const font = Fraunces({ subsets: ['latin'] })
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
function MyApp({ Component, pageProps }: AppProps) {
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const noNavPath = "/dashboard/"
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className={classNames("bg-britton-dark min-h-screen flex justify-center", font.className)}>
|
<main className={classNames("bg-deepcove min-h-screen flex justify-center", font.className)}>
|
||||||
<div className="max-w-[1920px]">
|
<div className="w-full max-w-[1920px]">
|
||||||
<Navbar />
|
{!router.pathname.includes("/dashboard/") && <Navbar />}
|
||||||
|
{/* <Navbar /> */}
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
<Footer />
|
{!router.pathname.includes("/dashboard/") && <Footer />}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,141 @@
|
|||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Button from '../../../components/Button';
|
||||||
|
import InlineLink from "../../../components/InlineLink";
|
||||||
|
import classnames from 'classnames';
|
||||||
|
|
||||||
|
import { Schibsted_Grotesk } from 'next/font/google'
|
||||||
|
|
||||||
|
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||||
|
|
||||||
|
export default function Broker() {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex bg-black">
|
||||||
|
<div className="w-full h-full flex p-4 bg-bluetang rounded-4xl">
|
||||||
|
{/* <div className="w-1/24 h-full flex justify-end">
|
||||||
|
<div className="w-4 flex flex-col justify-end z-1 bg-deepcove">
|
||||||
|
<div className={classnames(
|
||||||
|
"h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl border-deepcove bg-atmosphere",
|
||||||
|
)} />
|
||||||
|
<div className={classnames(
|
||||||
|
"h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl border-deepcove bg-atmosphere",
|
||||||
|
)} />
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div className="w-full h-full flex p-4 bg-atmosphere rounded-4xl">
|
||||||
|
<div className="w-full h-full flex p-1 bg-bronze rounded-4xl">
|
||||||
|
<div className="w-full h-full flex p-1 bg-copper rounded-3xl">
|
||||||
|
<div className="w-full h-full flex p-5 bg-deepcove rounded-3xl flex flex-col justify-start">
|
||||||
|
<div className="relative w-full h-20 p-2 flex flex-col justify-start">
|
||||||
|
{/* <div className="w-6/7 h-full pl-3 flex flex-col justify-center text-3xl text-left">
|
||||||
|
Dashboard | Items | Go | Here | More | Dashboard | Items | Go | Here | Too
|
||||||
|
</div>
|
||||||
|
<div className="w-1/7 flex flex-col justify-center items-center space-y-1 text-sm font-semibold">
|
||||||
|
<Button className="h-8 w-39 bg-deepcove hover:bg-bluetang text-bluemana py-1 px-4 rounded">
|
||||||
|
Change User Type
|
||||||
|
</Button>
|
||||||
|
<Button className="h-8 w-39 bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
|
||||||
|
Sign Out
|
||||||
|
</Button>
|
||||||
|
</div> */}
|
||||||
|
{/* <div className={`w-11/12 flex flex-col justify-start mb-[14px]`}> */}
|
||||||
|
<div className="flex justify-between bg-deepcore">
|
||||||
|
<div className={classnames(
|
||||||
|
"mb-[7px] text-4xl text-left z-1 text-bluemana font-semibold"
|
||||||
|
)}>
|
||||||
|
Tom McSwain's Dashboard
|
||||||
|
</div>
|
||||||
|
<div className="w-2/7 flex justify-center space-x-2 text-sm font-semibold">
|
||||||
|
<Button className="h-9 hover:bg-atmosphere bg-deepcove text-platinum py-1 px-4 rounded border-2 border-atmosphere">
|
||||||
|
Change User Type
|
||||||
|
</Button>
|
||||||
|
<Link href="/" passHref>
|
||||||
|
<button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
{/* <Button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
|
||||||
|
Sign Out
|
||||||
|
</Button> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classnames(
|
||||||
|
"w-full h-[6px] ml-[-52px] rounded-r bg-bluetang"
|
||||||
|
)}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-full flex flex-col justify-start rounded-3xl">
|
||||||
|
<div className="flex gap-[2px] px-10 justify-center text-bluemana text-xl">
|
||||||
|
<a className="relative rounded-out-b-2xl bg-platinum text-deepcove font-semibold px-8 py-2 rounded-t-2xl z-10">
|
||||||
|
Dashboard Home
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 1
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 2
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 3
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 4
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 5
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 6
|
||||||
|
</a>
|
||||||
|
<a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
|
||||||
|
Thing 7
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/* <div className="w-full p-3 flex justify-between items-center text-2xl">
|
||||||
|
<InlineLink alt >Dashboard Home</InlineLink>
|
||||||
|
<InlineLink alt >Thing 1</InlineLink>
|
||||||
|
<InlineLink alt >Thing 2</InlineLink>
|
||||||
|
<InlineLink alt >Thing 3</InlineLink>
|
||||||
|
<InlineLink alt >Thing 4</InlineLink>
|
||||||
|
<InlineLink alt >Thing 5</InlineLink>
|
||||||
|
<InlineLink alt >Thing 6</InlineLink>
|
||||||
|
<InlineLink alt >Thing 7</InlineLink>
|
||||||
|
</div> */}
|
||||||
|
<div className={classnames("w-full flex flex-col justify-center items-start px-4 pt-6 pb-4 bg-platinum space-y-4 text-left text-deepcove text-lg rounded-2xl")} >
|
||||||
|
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||||
|
Thing 1
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full", font.className)} >
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||||
|
Thing 2
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full", font.className)} >
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full text-2xl font-semibold")} >
|
||||||
|
Thing 3
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-full", font.className)} >
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
import Link from 'next/link';
|
||||||
|
import Dropdown from '../../../components/Dropdown';
|
||||||
|
import InlineLink from "../../../components/InlineLink";
|
||||||
|
import Image from 'next/image';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
|
||||||
|
|
||||||
|
import { Schibsted_Grotesk } from 'next/font/google'
|
||||||
|
|
||||||
|
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||||||
|
|
||||||
|
export default function Member() {
|
||||||
|
return (
|
||||||
|
<div className="relative w-full h-200">
|
||||||
|
<div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
|
||||||
|
<div className="w-full -mb-[2px] flex justify-start">
|
||||||
|
<div className="relative w-31 bg-copper rounded-out-br-4xl" />
|
||||||
|
<div className="w-21/24 h-20 border-b-2 border-copper" />
|
||||||
|
</div>
|
||||||
|
<div className="w-1/24 h-full flex justify-start">
|
||||||
|
<div className="w-[calc(50%+6px)] flex flex-col">
|
||||||
|
<div className={classnames(
|
||||||
|
"relative h-full border-r-6 rounded-out-tl-4xl rounded-tr-4xl bg-copper border-atmosphere"
|
||||||
|
)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-full flex flex-col justify-start items-center">
|
||||||
|
<div className="w-21/24">
|
||||||
|
<div className="w-full h-20 flex justify-between items-center">
|
||||||
|
<div className={classnames('w-72 -ml-[1px] z-1')}>
|
||||||
|
<Image
|
||||||
|
src="/images/bbstpa-forsite.png"
|
||||||
|
alt="Britton Logo"
|
||||||
|
width={205}
|
||||||
|
height={60}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className={classnames("w-1/3 flex justify-end items-center space-x-2 text-md font-semibold z-1", font.className)}>
|
||||||
|
{/* <Button className="h-9 hover:bg-atmosphere bg-deepcove text-platinum py-1 px-4 rounded border-2 border-atmosphere">
|
||||||
|
Change User Type
|
||||||
|
</Button> */}
|
||||||
|
<div className="flex space-x-1">
|
||||||
|
<p>Current Role:</p>
|
||||||
|
<Dropdown page="Member" />
|
||||||
|
</div>
|
||||||
|
<p>|</p>
|
||||||
|
<Link href="/" className="underline hover:text-bronze hover:decoration-bronze">
|
||||||
|
Sign Out
|
||||||
|
</Link>
|
||||||
|
{/* <Button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
|
||||||
|
Sign Out
|
||||||
|
</Button> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full h-full flex justify-start">
|
||||||
|
<div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere rounded-out-tr-4xl divide-y divide-bluetang">
|
||||||
|
<a href="#" className="w-full h-20 mt-15 flex justify-center items-center bg-bluetang text-platinum">
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||||
|
My Plan & Benefits
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||||
|
Plan Utilization
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||||
|
Claims & Authorizations
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||||
|
Providers & Services
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
|
||||||
|
Insurance Card
|
||||||
|
</a>
|
||||||
|
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
|
||||||
|
Benefits Documents
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex w-21/24 justify-between ml-8 pt-4">
|
||||||
|
<div className="w-full flex flex-col justify-start">
|
||||||
|
<div className={classnames(
|
||||||
|
"text-4xl text-left z-1 text-bluemana font-semibold"
|
||||||
|
)}>
|
||||||
|
Tom McSwain
|
||||||
|
</div>
|
||||||
|
<div className={classnames(
|
||||||
|
"w-full h-[6px] rounded-s bg-atmosphere z-1"
|
||||||
|
)}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import LandingPage from '../../components/LandingPage';
|
||||||
|
import InlineLink from "../../components/InlineLink";
|
||||||
|
// import TextImage50 from "../../components/TextImage50-50";
|
||||||
|
|
||||||
|
export default function Members() {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<LandingPage
|
||||||
|
headerText='Employers'
|
||||||
|
headerColor="text-bronze"
|
||||||
|
underlineColor="bg-bluemana"
|
||||||
|
stripeColor="bg-bluetang"
|
||||||
|
imageUrl="/images/employers-stock.jpg"
|
||||||
|
>
|
||||||
|
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.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
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. By logging in to any of the services we provide, you can do the following:
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Look up in-network providers through our list of PPOs<br />
|
||||||
|
• File insurance claims and review a claim’s status<br />
|
||||||
|
• Research which type of plan is best for you<br />
|
||||||
|
• Control your health care costs by selecting a PPO that’s actively competing for your business.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
Request a free, no-obligation quote today, and learn how our completely customizable benefits solutions can work for you. To learn more about our company and to discover the benefits of third-party benefits administration, review our services or contact us today.
|
||||||
|
</LandingPage>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -5,29 +5,29 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tagline
|
<Tagline
|
||||||
bgColor="bg-britton-light"
|
bgColor="bg-bluemana"
|
||||||
textColor="text-britton-dark"
|
textColor="text-deepcove"
|
||||||
textTop="Healthcare that's"
|
textTop="Healthcare that's"
|
||||||
textBottom="truly affordable"
|
textBottom="truly affordable"
|
||||||
/>
|
/>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title="Health & Risk Management"
|
title="Health & Risk Management"
|
||||||
imageUrl="/images/doctor.png"
|
imageUrl="/images/doctor.png"
|
||||||
parentBgColor="bg-britton-dark"
|
parentBgColor="bg-deepcove"
|
||||||
cardBGColor="bg-britton-medium"
|
cardBGColor="bg-bluetang"
|
||||||
bodyTextColor="text-britton-neutral"
|
bodyTextColor="text-platinum"
|
||||||
>
|
>
|
||||||
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.
|
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 />
|
<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.
|
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>
|
</InfoCard>
|
||||||
<div className='bg-britton-newblue w-full h-full rounded-3xl'>
|
<div className='bg-atmosphere w-full h-full rounded-3xl'>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title="Self-Funded Plans"
|
title="Self-Funded Plans"
|
||||||
imageUrl='/images/pwn-webi-square.png'
|
imageUrl='/images/pwn-webi-square.png'
|
||||||
parentBgColor="bg-britton-newblue"
|
parentBgColor="bg-atmosphere"
|
||||||
cardBGColor="bg-britton-dark"
|
cardBGColor="bg-deepcove"
|
||||||
bodyTextColor="text-britton-neutral"
|
bodyTextColor="text-platinum"
|
||||||
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
|
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
|
||||||
invert
|
invert
|
||||||
>
|
>
|
||||||
@@ -37,19 +37,19 @@ export default function Home() {
|
|||||||
<InfoCard
|
<InfoCard
|
||||||
title="Benefit Access & Online Support"
|
title="Benefit Access & Online Support"
|
||||||
imageUrl="/images/doctor.png"
|
imageUrl="/images/doctor.png"
|
||||||
parentBgColor="bg-britton-dark"
|
parentBgColor="bg-deepcove"
|
||||||
cardBGColor="bg-britton-medium"
|
cardBGColor="bg-bluetang"
|
||||||
bodyTextColor="text-britton-neutral"
|
bodyTextColor="text-platinum"
|
||||||
>
|
>
|
||||||
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.
|
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>
|
</InfoCard>
|
||||||
<div className='bg-britton-neutral rounded-3xl'>
|
<div className='bg-platinum rounded-3xl'>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title="Regulatory Compliance"
|
title="Regulatory Compliance"
|
||||||
imageUrl="/images/pwn-webi-square.png"
|
imageUrl="/images/pwn-webi-square.png"
|
||||||
parentBgColor="bg-britton-neutral"
|
parentBgColor="bg-platinum"
|
||||||
cardBGColor="bg-britton-dark"
|
cardBGColor="bg-deepcove"
|
||||||
bodyTextColor="text-britton-neutral"
|
bodyTextColor="text-platinum"
|
||||||
invert
|
invert
|
||||||
>
|
>
|
||||||
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.
|
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.
|
||||||
@@ -68,9 +68,9 @@ export default function Home() {
|
|||||||
|
|
||||||
|
|
||||||
{/* <div className="flex w-full h-70 justify-between items-center pt-30">
|
{/* <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-platinum h-full w-3/12 rounded-3xl"></div>
|
||||||
<div className="bg-britton-medium h-full w-3/12 rounded-3xl"></div>
|
<div className="bg-bluetang h-full w-3/12 rounded-3xl"></div>
|
||||||
<div className="bg-britton-light h-full w-3/12 rounded-3xl"></div>
|
<div className="bg-bluemana h-full w-3/12 rounded-3xl"></div>
|
||||||
</div> */}
|
</div> */}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -9,21 +9,21 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tagline
|
<Tagline
|
||||||
bgColor="bg-britton-light"
|
bgColor="bg-bluemana"
|
||||||
textColor="text-britton-dark"
|
textColor="text-deepcove"
|
||||||
textTop="Healthcare that's"
|
textTop="Healthcare that's"
|
||||||
textBottom="truly affordable"
|
textBottom="truly affordable"
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-center p-5">
|
<div className="flex justify-center p-5">
|
||||||
<div className="w-11/12 h-4 bg-britton-medium text-center text-britton-dark text-7xl rounded-3xl p-4">
|
<div className="w-11/12 h-4 bg-bluetang text-center text-deepcove text-7xl rounded-3xl p-4">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center p-5">
|
<div className="flex justify-center p-5">
|
||||||
<div className="w-11/12 h-4 bg-britton-neutral text-center text-britton-dark text-7xl rounded-3xl p-4">
|
<div className="w-11/12 h-4 bg-platinum text-center text-deepcove text-7xl rounded-3xl p-4">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center p-5">
|
<div className="flex justify-center p-5">
|
||||||
<div className="w-11/12 h-4 bg-britton-accent text-center text-britton-dark text-7xl rounded-3xl p-4">
|
<div className="w-11/12 h-4 bg-bronze text-center text-deepcove text-7xl rounded-3xl p-4">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
+6
-8
@@ -6,8 +6,8 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Tagline
|
<Tagline
|
||||||
bgColor="bg-britton-light"
|
bgColor="bg-bluemana"
|
||||||
textColor="text-britton-dark"
|
textColor="text-deepcove"
|
||||||
textTop="Healthcare that's"
|
textTop="Healthcare that's"
|
||||||
textBottom="truly affordable"
|
textBottom="truly affordable"
|
||||||
/>
|
/>
|
||||||
@@ -15,18 +15,16 @@ export default function Home() {
|
|||||||
title="Members"
|
title="Members"
|
||||||
imageUrl="/images/members-stock.jpg"
|
imageUrl="/images/members-stock.jpg"
|
||||||
>
|
>
|
||||||
Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your <InlineLink>insurance provider</InlineLink> will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
|
Aenean et nulla nec dolor finibus dictum. Vestibulum ultrices aliquam sapien. Cras at nunc tincidunt, tristique metus nec, auctor ipsum. Mauris maximus justo sit amet lorem semper, ac accumsan turpis tempor. Proin id maximus libero. Fusce ac elementum risus. Suspendisse tincidunt rutrum eros eu facilisis. Nulla efficitur ac tortor ut elementum. Etiam sed elementum urna, a rhoncus lacus. Pellentesque vitae eros diam. Suspendisse sem purus, dictum id fringilla vel, malesuada sed odio. Nunc ut odio id purus tempus placerat quis vel ex. Maecenas tincidunt ante metus, eu interdum felis vehicula eu. Nulla pellentesque mi id velit vulputate tristique. Donec consectetur tempus interdum. Sed tellus lectus, ornare at sem vitae, tempor lobortis eros. Nam at eleifend eros, quis porta dolor. Aliquam mollis sapien vitae ex eleifend commodo. Integer vel pellentesque eros. Morbi tincidunt ipsum id dolor consectetur mollis ut vitae leo. Proin iaculis vel.
|
||||||
<br />
|
|
||||||
While there are still fixed costs with <InlineLink>self-funded plans</InlineLink>, 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>
|
</InfoCard>
|
||||||
<div className='bg-britton-newblue rounded-3xl'>
|
<div className='bg-atmosphere rounded-3xl'>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title="Employers"
|
title="Employers"
|
||||||
imageUrl='/images/employers-stock.jpg'
|
imageUrl='/images/employers-stock.jpg'
|
||||||
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
|
learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
|
||||||
invert
|
invert
|
||||||
>
|
>
|
||||||
Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike <InlineLink>traditional insurance plans</InlineLink> 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.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel elit pellentesque, pulvinar ipsum et, rutrum neque. Donec ullamcorper suscipit laoreet. Sed posuere placerat vestibulum. Nulla ornare tristique felis sit amet maximus. Aliquam convallis mi et turpis venenatis iaculis. Aliquam erat volutpat. Suspendisse felis elit, semper efficitur blandit ut, eleifend at est. Vestibulum vulputate volutpat mattis. Suspendisse bibendum, dolor in rutrum commodo, nulla augue feugiat nibh, vestibulum imperdiet turpis massa consequat risus. Fusce fringilla, libero nec efficitur eleifend, ligula elit commodo lacus, sed facilisis orci ligula quis felis. Praesent malesuada, velit consequat ultrices ultricies, elit sapien pretium sapien, at consectetur nunc nisi quis est. Ut interdum urna non ligula cursus ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut laoreet vehicula felis, in tincidunt ante porta et.
|
||||||
</InfoCard>
|
</InfoCard>
|
||||||
</div>
|
</div>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
@@ -35,7 +33,7 @@ export default function Home() {
|
|||||||
>
|
>
|
||||||
We offer a wide range of <InlineLink>online services</InlineLink> 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 <InlineLink>in-network providers</InlineLink> 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.
|
We offer a wide range of <InlineLink>online services</InlineLink> 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 <InlineLink>in-network providers</InlineLink> 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>
|
</InfoCard>
|
||||||
<div className='bg-britton-neutral rounded-3xl'>
|
<div className='bg-platinum rounded-3xl'>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title="Brokers"
|
title="Brokers"
|
||||||
imageUrl="/images/brokers-stock.jpg"
|
imageUrl="/images/brokers-stock.jpg"
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import LandingPage from '../../components/LandingPage';
|
||||||
|
import InlineLink from "../../components/InlineLink";
|
||||||
|
// import TextImage50 from "../../components/TextImage50-50";
|
||||||
|
|
||||||
|
export default function Members() {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<LandingPage
|
||||||
|
headerText='Members'
|
||||||
|
headerColor="text-atmosphere"
|
||||||
|
underlineColor="bg-copper"
|
||||||
|
stripeColor="bg-bluetang"
|
||||||
|
imageUrl="/images/members-stock.jpg"
|
||||||
|
>
|
||||||
|
At Britton Benefit Services, LLC we're making employee benefits more affordable. In addition to the cost savings you receive when your employer chooses Britton Benefit Services, LLC we also make sure the important information you need is at your fingertips.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
That's why our member portal offers you 24/7 access to things like in-network provider lists, claim forms and prescription medication information. Select from any of the links below to get access to the benefit information and forms you need to file a claim, search for a provider or learn more about your benefits plan.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
At Britton Benefit Services, LLC we're making employee benefits more affordable. In addition to the cost savings you receive when your employer chooses Britton Benefit Services, LLC we also make sure the important information you need is at your fingertips.
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
That's why our member portal offers you 24/7 access to things like in-network provider lists, claim forms and prescription medication information. Select from any of the links below to get access to the benefit information and forms you need to file a claim, search for a provider or learn more about your benefits plan.
|
||||||
|
</LandingPage>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
+14
-24
@@ -7,30 +7,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--color-britton-dark: #04153E;
|
/* dark blue */
|
||||||
--color-britton-medium: #2A4B6F;
|
--color-deepcove: #04153E;
|
||||||
--color-britton-newblue: #0096E0;
|
/* medium dark blue */
|
||||||
--color-britton-newblue2: #0094de;
|
--color-bluetang: #2A4B6F;
|
||||||
--color-britton-light: #6AC8F1;
|
/* bright blue */
|
||||||
--color-britton-electric: #00F0FF;
|
--color-atmosphere: #0096E0;
|
||||||
--color-britton-electric2: #7DF9FF;
|
/* light blue */
|
||||||
--color-britton-neutral: #E0E0E0;
|
--color-bluemana: #6AC8F1;
|
||||||
--color-britton-accent2: #B06E30;
|
/* platinum */
|
||||||
--color-britton-accent: #D38F4A;
|
--color-platinum: #E0E0E0;
|
||||||
|
/* copper */
|
||||||
/* for testing */
|
--color-copper: #B06E30;
|
||||||
/* --color-britton-light: #7DF9FF; */
|
/* bronze */
|
||||||
|
--color-bronze: #D38F4A;
|
||||||
|
|
||||||
/* --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 {
|
@theme inline {
|
||||||
|
|||||||
+1
-15
@@ -1,19 +1,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {},
|
||||||
colors: {
|
|
||||||
'britton-dark-rgb': 'rgb(var(--color-britton-dark))',
|
|
||||||
'britton-medium-rgb': 'rgb(var(--color-britton-medium))',
|
|
||||||
'britton-light-rgb': 'rgb(var(--color-britton-light))',
|
|
||||||
'britton-electric-rgb': 'rgb(var(--color-britton-electric))',
|
|
||||||
'britton-electric2-rgb': 'rgb(var(--color-britton-electric2))',
|
|
||||||
'britton-neutral-rgb': 'rgb(var(--color-britton-neutral))',
|
|
||||||
'britton-accent2-rgb': 'rgb(var(--color-britton-accent2))',
|
|
||||||
'britton-accent-rgb': 'rgb(var(--color-britton-accent))',
|
|
||||||
},
|
|
||||||
boxShadow: {
|
|
||||||
'britton': '10px 10px 5px 0px'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user