From 0a61ae5f6455d76c1f7f925abce9dfeb94fbc1fa Mon Sep 17 00:00:00 2001 From: enes Date: Thu, 25 Jul 2024 15:05:47 +0200 Subject: [PATCH 01/45] feat: landing page implementation and styling --- src/colors.scss | 2 + src/components/AppBar/AppBar.tsx | 195 ++++++------ src/components/AppBar/style.module.scss | 5 +- src/components/Footer/Footer.tsx | 71 +++++ src/components/Footer/style.module.scss | 83 +++++ .../Landing/CardComponent/CardComponent.tsx | 58 ++++ .../Landing/CardComponent/style.module.scss | 43 +++ src/index.css | 11 +- src/layouts/Main.tsx | 20 +- src/layouts/style.module.scss | 15 +- src/pages/landing/LandingPage.tsx | 300 ++++++++++++++---- src/pages/landing/style.module.scss | 7 + src/pages/login/index.tsx | 6 +- src/sizes.scss | 1 + src/theme/index.ts | 31 +- 15 files changed, 667 insertions(+), 181 deletions(-) create mode 100644 src/components/Footer/Footer.tsx create mode 100644 src/components/Footer/style.module.scss create mode 100644 src/components/Landing/CardComponent/CardComponent.tsx create mode 100644 src/components/Landing/CardComponent/style.module.scss create mode 100644 src/sizes.scss diff --git a/src/colors.scss b/src/colors.scss index d00f37b..a779639 100644 --- a/src/colors.scss +++ b/src/colors.scss @@ -2,6 +2,8 @@ $primary-main: var(--mui-palette-primary-main); $primary-light: var(--mui-palette-primary-light); $primary-dark: var(--mui-palette-primary-dark); +$accent-color: #41bfc2; + $box-shadow-color: rgba(0, 0, 0, 0.1); $border-color: #27323c; diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index dd21b03..89c37f5 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -2,6 +2,7 @@ import { AppBar as AppBarMui, Box, Button, + Container, Menu, MenuItem, Toolbar, @@ -117,112 +118,120 @@ export const AppBar = () => { const isAuthenticated = authState?.loggedIn === true return ( - - - - Logo navigate('/')} /> - + + + + + Logo navigate('/')} /> + - - {!isAuthenticated && ( - - )} - - {isAuthenticated && ( - <> - - + {!isAuthenticated && ( + + )} - navigate(appPrivateRoutes.settings) + {isAuthenticated && ( + <> + + - Settings - - { - setAnchorElUser(null) - - navigate(appPublicRoutes.verify) - }} - sx={{ - justifyContent: 'center' - }} - > - Verify - - + {username} + + - Source + Profile - - - Logout - - - - )} - - + { + setAnchorElUser(null) + + navigate(appPrivateRoutes.settings) + }} + sx={{ + justifyContent: 'center' + }} + > + Settings + + { + setAnchorElUser(null) + + navigate(appPublicRoutes.verify) + }} + sx={{ + justifyContent: 'center' + }} + > + Verify + + + + Source + + + + Logout + + + + )} + + + ) } diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss index 718b872..1e58cb7 100644 --- a/src/components/AppBar/style.module.scss +++ b/src/components/AppBar/style.module.scss @@ -1,12 +1,15 @@ @import '../../colors.scss'; +@import '../../sizes.scss'; .AppBar { background-color: $background-color !important; z-index: 1400 !important; - height: 60px; + height: $header-height; flex-direction: row !important; align-items: center; + border-bottom: solid 1px rgba(0, 0, 0, 0.075); + .toolbar { flex-grow: 1; display: flex; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..460f6e0 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,71 @@ +import { Box, Button, Grid, Link } from '@mui/material' +import { Link as RouterLink } from 'react-router-dom' +import styles from './style.module.scss' + +export const Footer = () => ( +
+ + + + + Logo + + + + +
+ + + + + + + + + +
+ + +
+ + + +
+ + +
+ Built by  + + Nostr Dev + {' '} + 2024. +
+
+) diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss new file mode 100644 index 0000000..b711182 --- /dev/null +++ b/src/components/Footer/style.module.scss @@ -0,0 +1,83 @@ +.borderTop { + border-top: solid 1px rgba(0, 0, 0, 0.075); +} + +.footer { + display: flex; + flex-direction: column; + align-items: center; + + letter-spacing: 1px; + font-size: 14px; + line-height: 25px; + word-break: break-word; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.15); + font-weight: 500; +} + +.nav { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: none; + grid-gap: 15px; + + > a { + min-height: 0; + } + + button { + width: 100%; + justify-content: start; + } +} + +.about { + font-weight: 500; + + > p { + margin: 0; + } +} + +.links { + > a + a { + margin-left: 25px; + } +} + +.credits { + width: 100%; + text-align: center; + padding: 10px 0; + font-size: 12px; + color: rgba(0, 0, 0, 0.5); + font-weight: 500; + + > a { + transition: ease 0.4s; + color: rgba(1, 170, 173, 0.75); + text-decoration-color: inherit; + + &:hover { + color: #01aaad; + } + } +} + +.logo { + width: 100%; + max-width: 150px; + height: auto; + + > img { + width: 100%; + max-width: 150px; + height: auto; + } +} + +@media (max-width: 992px) { + .logo { + max-width: 200px; + } +} diff --git a/src/components/Landing/CardComponent/CardComponent.tsx b/src/components/Landing/CardComponent/CardComponent.tsx new file mode 100644 index 0000000..be39ae0 --- /dev/null +++ b/src/components/Landing/CardComponent/CardComponent.tsx @@ -0,0 +1,58 @@ +import { Box, Typography } from '@mui/material' +import { ReactElement } from 'react' + +import styles from './style.module.scss' + +interface CardComponentProps { + icon: ReactElement + title: ReactElement + description: ReactElement + actions?: ReactElement +} + +export const CardComponent = ({ + icon, + title, + description, + actions +}: CardComponentProps) => { + return ( +
+ + {icon} + + + {title} + + + {description} + + + + + {actions} + +
+ ) +} diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss new file mode 100644 index 0000000..f82e98f --- /dev/null +++ b/src/components/Landing/CardComponent/style.module.scss @@ -0,0 +1,43 @@ +@import '../../../colors.scss'; + +.card { + border-radius: 32px; + padding: 25px; + + box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0); + border: solid 1px rgba(0, 0, 0, 0); + position: relative; + background: #f4f4f4; + + transition: ease 0.4s; + + display: flex; + flex-direction: column; + gap: 15px; + + &:hover { + box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1); + background: #ffffff; + border: solid 1px rgba(0, 0, 0, 0.075); + + .icon { + opacity: 1; + filter: saturate(1); + } + } +} + +.content { + display: flex; + flex-direction: column; + + gap: 25px; +} + +.icon { + color: $accent-color; + transition: ease 0.4s; + font-size: 25px; + opacity: 0.5; + filter: saturate(0); +} diff --git a/src/index.css b/src/index.css index b71a3cb..9ab84bb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,5 @@ :root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -25,8 +25,6 @@ a:hover { body { margin: 0; - /* display: flex; - place-items: center; */ min-width: 320px; min-height: 100vh; background-color: #f4f4fb; @@ -70,8 +68,11 @@ button { } } -.main { - padding: 60px 0; +#root { + min-height: 100vh; + display: flex; + flex-direction: column; + background: white; } .hide-mobile { diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 60b052b..57d3597 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -1,4 +1,3 @@ -import { Box } from '@mui/material' import Container from '@mui/material/Container' import { Event, kinds } from 'nostr-tools' import { useEffect, useState } from 'react' @@ -28,6 +27,8 @@ import { } from '../utils' import { useAppSelector } from '../hooks' import { SubCloser } from 'nostr-tools/abstract-pool' +import styles from './style.module.scss' +import { Footer } from '../components/Footer/Footer' export const MainLayout = () => { const dispatch: Dispatch = useDispatch() @@ -152,19 +153,10 @@ export const MainLayout = () => { return ( <> - - - - - - +
+ +
+