diff --git a/frontend/src/assets/img/duo-splash.png b/frontend/src/assets/img/duo-splash.png new file mode 100644 index 0000000..5312a80 Binary files /dev/null and b/frontend/src/assets/img/duo-splash.png differ diff --git a/frontend/src/index.sass b/frontend/src/index.sass index fb8c8c5..ee07c0d 100644 --- a/frontend/src/index.sass +++ b/frontend/src/index.sass @@ -1,8 +1,56 @@ +@tailwind base +@tailwind components +@tailwind utilities + +$c-default-text: #222 + +$c-blue: rgb(28, 176, 246) +$c-blue-shadow: rgb(24, 153, 214) +$c-green: rgb(88, 204, 2) +$c-green-shadow: rgb(88, 167, 0) +$c-white-shadow: rgb(222, 222, 222) +$border-radius: 16px +$shadow-width: 0 4px 0 + +.c-blue + color: $c-blue +.c-green + color: $c-green + body margin: 0 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale + color: $c-default-text + code font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace + +button + background-color: $c-blue + border: none + border-radius: $border-radius + box-shadow: $shadow-width $c-blue-shadow + color: white + cursor: pointer + font-weight: 600 + padding: 12px 16px + width: 100% + transition: all 0.2s ease-in-out + +button.green + background-color: $c-green + box-shadow: $shadow-width $c-green-shadow + +button.white + background-color: white + color: $c-blue + border: solid $c-white-shadow + border-width: 2px 2px 4px + box-shadow: none + +h1 + font-size: 2em + margin-bottom: 0.5em diff --git a/frontend/src/pages/Welcome.tsx b/frontend/src/pages/Welcome.tsx index be14f07..7fdc441 100644 --- a/frontend/src/pages/Welcome.tsx +++ b/frontend/src/pages/Welcome.tsx @@ -1,9 +1,15 @@ +import DuoSplash from "../assets/img/duo-splash.png"; + export default function Welcome() { - return <> -