diff --git a/app/reset.css b/app/reset.css
deleted file mode 100644
index 6183ec0cc1..0000000000
--- a/app/reset.css
+++ /dev/null
@@ -1,73 +0,0 @@
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-
-/* Prevent font size inflation */
-html {
- -moz-text-size-adjust: none;
- -webkit-text-size-adjust: none;
- text-size-adjust: none;
-}
-
-/* Remove default margin in favour of better control in authored CSS */
-body, h1, h2, h3, h4, p,
-figure, blockquote, dl, dd {
- margin-block-end: 0;
-}
-body {
- margin:0;
-}
-/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role='list'],
-ol[role='list'] {
- list-style: none;
-}
-
-/* Set core body defaults */
-body {
- min-height: 100vh;
- line-height: 1.5;
-}
-
-/* Set shorter line heights on headings and interactive elements */
-h1, h2, h3, h4,
-button, input, label {
- line-height: 1.1;
-}
-
-/* Balance text wrapping on headings */
-h1, h2,
-h3, h4 {
- text-wrap: balance;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
- text-decoration-skip-ink: auto;
- color: currentColor;
-}
-
-/* Make images easier to work with */
-img,
-picture {
- max-width: 100%;
- display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input, button,
-textarea, select {
- font: inherit;
-}
-
-/* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
- min-height: 10em;
-}
-
-/* Anything that has been anchored to should have extra scroll margin */
-:target {
- scroll-margin-block: 5ex;
-}
\ No newline at end of file
diff --git a/app/root.tsx b/app/root.tsx
index 45bda64d12..a29e97345b 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -7,12 +7,14 @@ import {
ScrollRestoration,
} from "@remix-run/react";
-import tailwindCss from "./tailwind.css?url";
-import resetCss from "./tailwind.css?url";
+import tailwindCss from "./rootStyles/tailwind.css?url";
+import normalizeCss from "./rootStyles/normalize.css?url";
+
+import { TopBar } from "./template/TopBar";
export const links : LinksFunction = () => [{
rel: "stylesheet",
- href: resetCss,
+ href: normalizeCss,
},{
rel: "stylesheet",
href: tailwindCss,
@@ -27,7 +29,8 @@ export default function App() {
-
+
+
diff --git a/app/rootStyles/base.scss b/app/rootStyles/base.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/rootStyles/colours.scss b/app/rootStyles/colours.scss
new file mode 100644
index 0000000000..9ef966d8bc
--- /dev/null
+++ b/app/rootStyles/colours.scss
@@ -0,0 +1,82 @@
+// Default colours
+$primary: #e66462;
+$secondary: #39394c;
+$bg: #1a1a27;
+$input: #39394c;
+$input-placeholder: #aeaeb3;
+$danger: #8f4951;
+$input-dark: #39394c;
+$info: #252d43;
+$success: #40ad48;
+$warning: darken(#f7941c, 5%);
+$accent: #80cfd3;
+$workflow: $primary;
+$panel: #242433;
+$panel-inner: #2b2b3b;
+$panel-inner-border: lighten($panel, 8%);
+
+$primary-lm: #000;
+
+// Darken some of the grays, since the default bootswatch grays are almost impossible to see against white
+$gray-100: #ecf0f1;
+$gray-200: #dee2e6;
+$gray-300: #ced4da;
+$gray-400: #b4bcc2;
+$gray-500: #a5b2b4;
+// These have not been changed yet
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000;
+$white: #fff;
+
+// Changes and new classes
+$gray-750: #5c656e;
+$light: $gray-300;
+$lighter: $gray-200;
+$medium: $gray-500;
+$medium-dark: $gray-600;
+$dark: $gray-750;
+
+// lighter and darker colors
+$primary-light: desaturate(lighten($primary, 20%), 15%);
+$primary-dark: saturate(darken($primary, 15%), 10%);
+$primary-very-light: desaturate(lighten($primary, 45%), 35%);
+
+$secondary-light: lighten($secondary, 5%);
+$secondary-lighter: lighten($secondary, 12%);
+$secondary-very-light: lighten($secondary, 24%);
+$secondary-lightest: lighten($secondary, 60%);
+
+$info-light: desaturate(lighten($info, 15%), 15%);
+$info-dark: darken($info, 10%);
+$info-very-light: desaturate(lighten($info, 55%), 30%);
+
+$success-light: desaturate(lighten($success, 15%), 15%);
+$success-dark: darken($success, 10%);
+
+$warning-light: desaturate(lighten($warning, 15%), 15%);
+$warning-dark: darken($warning, 10%);
+
+$danger-light: desaturate(lighten($danger, 15%), 15%);
+$danger-dark: darken($danger, 10%);
+
+$accent-light: desaturate(lighten($accent, 20%), 15%);
+$accent-dark: saturate(darken($accent, 15%), 10%);
+
+$badge-colors: (
+ "gray": #5b7282,
+ "red": #d91f11,
+ "orange": #e86427,
+ "yellow": #f5c518,
+ "lime": #3c7d0e,
+ "green": #077d55,
+ "teal": #167b7d,
+ "turquoise": #067a91,
+ "aqua": #0073ba,
+ "blue": #186ade,
+ "ultramarine": #535fe8,
+ "purple": #8f49de,
+ "pink": #cc1d92,
+);
diff --git a/app/rootStyles/normalize.css b/app/rootStyles/normalize.css
new file mode 100644
index 0000000000..b6eb821659
--- /dev/null
+++ b/app/rootStyles/normalize.css
@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+ ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+ line-height: 1.15; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+ border-style: none;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+ padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Misc
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+ display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+ display: none;
+}
\ No newline at end of file
diff --git a/app/tailwind.css b/app/rootStyles/tailwind.css
similarity index 100%
rename from app/tailwind.css
rename to app/rootStyles/tailwind.css
diff --git a/app/routes/ColourGuide.tsx b/app/routes/ColourGuide.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/routes/ComponentLibrary.tsx b/app/routes/ComponentLibrary.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index eb49aad3d1..7c9037bbfd 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -15,7 +15,13 @@ export default function Index() {
);
diff --git a/app/template/TopBar/TopBar.tsx b/app/template/TopBar/TopBar.tsx
new file mode 100644
index 0000000000..201adb2828
--- /dev/null
+++ b/app/template/TopBar/TopBar.tsx
@@ -0,0 +1,43 @@
+import { Fragment, useState } from 'react'
+import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
+
+
+const products = [
+ { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', //icon: ChartPieIcon
+ },
+ { name: 'Engagement', description: 'Speak directly to your customers', href: '#', //icon: CursorArrowRaysIcon
+ },
+ { name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', //icon: FingerPrintIcon
+ },
+ { name: 'Integrations', description: 'Connect with third-party tools', href: '#', //icon: SquaresPlusIcon
+ },
+ { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', //icon: ArrowPathIcon
+ },
+]
+const callsToAction = [
+ { name: 'Watch demo', href: '#', //icon: PlayCircleIcon
+ },
+ { name: 'Contact sales', href: '#', //icon: PhoneIcon
+ },
+]
+
+function classNames({...classes}:Array) {
+ return classes.filter(Boolean).join(' ')
+}
+
+export const TopBar = () => {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+ return (
+
+ )
+}
diff --git a/app/template/TopBar/index.tsx b/app/template/TopBar/index.tsx
new file mode 100644
index 0000000000..b8adf3c4f4
--- /dev/null
+++ b/app/template/TopBar/index.tsx
@@ -0,0 +1 @@
+export { TopBar } from "./TopBar";
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 628632df16..6f421030dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
"": {
"name": "gottagofast_v0.0.0",
"dependencies": {
+ "@headlessui/react": "^1.7.18",
"@netlify/edge-functions": "^2.3.1",
"@netlify/remix-edge-adapter": "^3.2.0",
"@netlify/remix-runtime": "^2.2.0",
@@ -1276,6 +1277,22 @@
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
"dev": true
},
+ "node_modules/@headlessui/react": {
+ "version": "1.7.18",
+ "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
+ "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+ "dependencies": {
+ "@tanstack/react-virtual": "^3.0.0-beta.60",
+ "client-only": "^0.0.1"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "peerDependencies": {
+ "react": "^16 || ^17 || ^18",
+ "react-dom": "^16 || ^17 || ^18"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -2105,6 +2122,31 @@
"win32"
]
},
+ "node_modules/@tanstack/react-virtual": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.2.0.tgz",
+ "integrity": "sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==",
+ "dependencies": {
+ "@tanstack/virtual-core": "3.2.0"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/@tanstack/virtual-core": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.2.0.tgz",
+ "integrity": "sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ }
+ },
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3481,6 +3523,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/client-only": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+ },
"node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
diff --git a/package.json b/package.json
index 207dae0916..58495700ec 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"typecheck": "tsc"
},
"dependencies": {
+ "@headlessui/react": "^1.7.18",
"@netlify/edge-functions": "^2.3.1",
"@netlify/remix-edge-adapter": "^3.2.0",
"@netlify/remix-runtime": "^2.2.0",
diff --git a/public/resources/images/FakeYou-Logo-2.png b/public/resources/images/FakeYou-Logo-2.png
new file mode 100644
index 0000000000..616af230d2
Binary files /dev/null and b/public/resources/images/FakeYou-Logo-2.png differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b1e1e47067..56bf943cc3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,4 +1,5 @@
import type { Config } from 'tailwindcss';
+import colors from 'tailwindcss/colors';
export default {
content: [
@@ -7,7 +8,19 @@ export default {
"./app/*.{js,jsx,ts,tsx}",
],
theme: {
- extend: {},
+ // extend: {},
+ colors:{
+ transparent: 'transparent',
+ current: 'currentColor',
+
+ 'brand-primary': '#e66462',
+ 'brand-secondary': '#39394c',
+
+ 'ui-background': '#1a1a27',
+ 'ui-panel': '#242433',
+
+ gray: colors.gray,
+ }
},
plugins: [],
} satisfies Config
\ No newline at end of file