From 92eeda5de50ef7c30696471a7609b74e79d45e16 Mon Sep 17 00:00:00 2001 From: Ajit Singh <32074655+as-ajitsingh@users.noreply.github.com> Date: Sat, 8 May 2021 01:50:04 +0530 Subject: [PATCH] Ajit | Updated landing page --- .gitignore | 4 +- packages/webapp/.gitignore | 2 + packages/webapp/src/assets/Logo-old.png | Bin 0 -> 2287 bytes packages/webapp/src/assets/Logo.png | Bin 2287 -> 7026 bytes packages/webapp/src/assets/main-image.svg | 55 ++++++ packages/webapp/src/assets/waves.svg | 9 + .../src/components/common/navbar/Navbar.tsx | 2 +- .../components/landing-page/LandingPage.scss | 162 ++++++++++-------- .../components/landing-page/LandingPage.tsx | 151 ++++++++++------ 9 files changed, 258 insertions(+), 127 deletions(-) create mode 100644 packages/webapp/src/assets/Logo-old.png create mode 100644 packages/webapp/src/assets/main-image.svg create mode 100644 packages/webapp/src/assets/waves.svg diff --git a/.gitignore b/.gitignore index 2013968..4101dff 100644 --- a/.gitignore +++ b/.gitignore @@ -109,4 +109,6 @@ dist # react build folder **/build/ -packages/webservice/src/public \ No newline at end of file +packages/webservice/src/public + +.idea \ No newline at end of file diff --git a/packages/webapp/.gitignore b/packages/webapp/.gitignore index 4d29575..eecc05b 100644 --- a/packages/webapp/.gitignore +++ b/packages/webapp/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.idea/ diff --git a/packages/webapp/src/assets/Logo-old.png b/packages/webapp/src/assets/Logo-old.png new file mode 100644 index 0000000000000000000000000000000000000000..f803843243787ecdb27e7bfc021485ce299303ad GIT binary patch literal 2287 zcmZ`*dpOf=AHT-Sgo`oU3ukYcyzn}ZQ?o&Iw-L#jkSqcEq zhTN&UU_}2i)Dn1SayZ{%Kpx)WwFQ9cbIX1l)cEBLcHiX%0LL5vZUz8zFva}GHxA_wZtPpSW$OIJ>NB=3Zt*xPK8XD zp7}4&(N3&?=x^S&D8k=vWmIGLHb*4BKd&gf4b9U+Z++l<2! zd5VYPT4Hw4vhBc%oDTxxy7cv?LH#0H_27}WIc{qoq^eomG~y!0)W%5w+4FH2(E^Op zUJYz~-u1hMpuOu1<5)^m2?9t$8T6>@+AZ#N2owFBm8(?9OnLW6q%>gGdQcb2B&Lc zAN^X>G~;)O?|Jn3Ekxp!>Z8q#iuDz1$Q#-&lpQ>QFx0x0+a_b|F-|MqU)AuJaVhrk z{b@fnBa79CvQ#O{b4w1o*>1kg49>bJQx((wBQF&fH(6%fI{HeSeA4%3;F;r^y3RAL ze%bC+I}`oa%a9BDX);EF!>Qw-2%yxkgYyq_F%wByUuTasCbvn=T@?0`Dn()S z4gNS*qC9MUK%68L$q|6iUODw;xKY#}{y_GswkE>FqHcNKw#NRfO6?hY@A?!|Y6jiE z4(iHIB0zlITmkwT!IecWzHBriJmjBJMt^pS5GWMIU!b$k7gpgqC#(tWhKhb;KWAe- z!EbMkk!#75Wk{zD2+zX7dKu#zpK+U{^Ewfn1@<~Yu^bMk>}jZH!q_E|Z{>h!^fP0s z`ik2*v9(vP(tSZ9?UTxPXIeRBZv-!Nf+}#G z7x~yhWY9@b%7Ao;v8W%;U@RdLiMKJaetwhpVq#-!pow?&-yK$Ee9P2%uSqAql?3h( zzx;E&;oCfcLP@&B{K6pyJd3>BY~XA!9FBYykpGS)yp0cp(iIS}CVC{c4mCEv^b!rU zoU-=7*V0?I2NLiU7!eyrC&>}Dd*2EgPlWjNH=ZuL%J8oX`kcAS3XK_;N12m8HZ|Yb zTjfht+{FsFq6|4>F+-M_YX12&XO!Pze_z?RA2`~uSIvlEeyF8|`;x;f$9DOJ)6m+6w(J@S3=F^6BM_6dK@jek2Kx?=FLHKsK%8#l_MCXx%PdE zTj`P}7K__R@eYzO<;%l}7E-(!#OxXdpmy)k7~}-yW@g6-c6-9uT{S1v8;ss+gB-)H zsIeV11v@alEBUk{OClHBX_X z$F_s`9<)gz_JwFJ*UqckyO&kZqd3`;m12smZF+bu#}&C$kDV6+C*`R;dRelbo@{%i z*gLk)uYln*Iq#p}WRr2ro0_84;uGfwi?Ted!G7c>X1st$`P9^$7P6a`ny;MYZ!6!m zv;VKe(I28+*S=p1Zx+ej{_&Yqh85|s$EqWT8y*>S)GTM07-H8M|pDL|R- zbB*0cErIw7Sr=)!w)W3yBz&d*bIGYh`C)aEuH*t$5yZzD!}Hke9P3LP>#jKx#>X11 zUQJ@E^@p#5hjX@NH@jr|9Xmx-kT7=hOZnT-q6#ZmT4kcUIXK$n6kPg8;}fCK0}bhC zf3NcW6b|I1cth@cNv_4tl^PS2#o)%_XGSBw!~j@3r#nKkzTP()Sw(37xUjHb;l8)B zfA4*@^V{g&X|J-A$X>k~vo9-u(r8Urrc>{QMMw9nhiq|}d1&plJQWG%=H|KzoXj!0 z>N7-1`L|Tzi@Kv*Q3(HhYlEBvxq`3q)CNPdvCoe>PMc;db3YUv9UWtXGL_Z`RTdV* zQZ8oRSdmlCsAI8McW&Z3y|ccqlh6Mov`;@Wa{M5$lH&Ao#5K6hMT2aJPw5M_3-oVJ z`T5bRr!(D$x|TYvAbQ1aqnbl&HSs#Hi`W^CP7^4OuyXc-=nE_|v{&y5ua6OzaUSqH zq$3#?&6zZO=7cejJ%-iohmF9(HMjBUqs0)p;#-pQSqZnaF=x7!@nvM>O zW(5O~AQ+igj*9WMw0yF?QwqJ?1=P)!*#s{$Ff;JTU8!z>rgH6CL)6V~`=C3Y_jR;M i+f3RtJGt(q+ibw7p&o0(dDD5g1b|$;sW+U1(*FfLo*mf$ literal 0 HcmV?d00001 diff --git a/packages/webapp/src/assets/Logo.png b/packages/webapp/src/assets/Logo.png index f803843243787ecdb27e7bfc021485ce299303ad..b5adcd01bf38cf76072d6d270cd26b0b89b25d46 100644 GIT binary patch literal 7026 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 diff --git a/packages/webapp/src/assets/main-image.svg b/packages/webapp/src/assets/main-image.svg new file mode 100644 index 0000000..87bbc94 --- /dev/null +++ b/packages/webapp/src/assets/main-image.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/webapp/src/assets/waves.svg b/packages/webapp/src/assets/waves.svg new file mode 100644 index 0000000..c14e445 --- /dev/null +++ b/packages/webapp/src/assets/waves.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/webapp/src/components/common/navbar/Navbar.tsx b/packages/webapp/src/components/common/navbar/Navbar.tsx index f628b69..ab222a4 100644 --- a/packages/webapp/src/components/common/navbar/Navbar.tsx +++ b/packages/webapp/src/components/common/navbar/Navbar.tsx @@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import Avatar from "@material-ui/core/Avatar"; import { useHistory } from 'react-router'; -import HomeLogo from '../../../assets/Logo.png'; +import HomeLogo from '../../../assets/Logo-old.png'; import BoardInfo from './board-info/BoardInfo'; import './Navbar.scss'; diff --git a/packages/webapp/src/components/landing-page/LandingPage.scss b/packages/webapp/src/components/landing-page/LandingPage.scss index 440b822..de36396 100644 --- a/packages/webapp/src/components/landing-page/LandingPage.scss +++ b/packages/webapp/src/components/landing-page/LandingPage.scss @@ -1,81 +1,99 @@ -.landingPage{ - background-image: url(https://source.unsplash.com/user/bored_engineer/likes); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - width: 100%; +.main { + flex-grow: 1; + width:100%; height: 100%; - overflow: hidden; - .form{ - max-width: 30em; - // background-color: transparentize($color:black, $amount: 0.5); - align-items: center; - display: flex; - flex-direction: column; - padding: 2vh 5vh; - .title-sup{ - font-size: 14; + padding: 46px 65px; + z-index: 10; + flex-wrap: nowrap !important; +} - } - .title-main{ - align-self: center; - } - .image { - width: 15em; - img { - width: 100%; - height: 100%; - } - } - .create-board{ - margin-top: 5vh; - margin-bottom: 1vh; - width: 100%; +.row{ + align-items: center; +} - Button{ - width: 100%; - margin-bottom: 1vh; - } - } +.main-image{ + width: 35vw; +} - .join-board{ - width: 100%; - margin-bottom: 2vh; - .join-board-title{ - text-align: center; - } - Button{ - margin-top: 2vh; - margin-bottom: 1vh; - width: 100%; +.form{ + height: 100%; + width: 400px; + background: white; + border: 1px solid black; + border-radius: 10px; + display: flex; + flex-direction: column; + justify-items: center; + justify-content: space-evenly; + padding: 0px 30px; +} + +.form > * { + margin-top: 30px !important; +} + +.join-text{ + text-align: center; + color: #5a5858; +} + +.input{ + margin-top: 50px !important; +} + +.button{ + height: 50px; + background-color: #3E64C7; +} + +.caption{ + text-align: center; + margin-bottom: 20px !important; +} - } - } - hr { - width: 100%; - border: none; - border-top: 1px solid #333; - color: #333; - overflow: visible; - text-align: center; - height: 1px; - margin: 20px; - align-self: center; +.ocean { + z-index: -5; + height: 20%; + width:100%; + position:absolute; + bottom:0; + left:0; + background: #FF6584; +} - &:after { - width: 100%; - background: #fff; - content: 'or'; - padding: 0 4px; - position: relative; - top: -13px; - - } - } - .footer{ - margin: 0% !important - } - +.wave { + z-index: -5; + background: url(../../assets/waves.svg) repeat-x; + position: absolute; + top: -198px; + width: 6400px; + height: 250px; + animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; + transform: translate3d(0, 0, 0); +} + +.wave:nth-of-type(2) { + z-index: -5; + top: -175px; + animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite; + opacity: 0.7; +} + +@keyframes wave { + 0% { + margin-left: 0; + } + 100% { + margin-left: -1600px; + } +} + +@keyframes swell { + 0%, 100% { + transform: translate3d(0,-25px,0); + } + 50% { + transform: translate3d(0,5px,0); } } \ No newline at end of file diff --git a/packages/webapp/src/components/landing-page/LandingPage.tsx b/packages/webapp/src/components/landing-page/LandingPage.tsx index 35093e9..2ab31b0 100644 --- a/packages/webapp/src/components/landing-page/LandingPage.tsx +++ b/packages/webapp/src/components/landing-page/LandingPage.tsx @@ -1,27 +1,25 @@ -import { v4 as uuid } from 'uuid'; -import React, { useState, useEffect } from 'react'; -import { Dispatch } from 'redux'; -import { connect } from 'react-redux'; -import { TState, TAction } from '../../store/interfaces'; +import {v4 as uuid} from 'uuid'; +import React, {useEffect, useState} from 'react'; +import {Dispatch} from 'redux'; +import {connect} from 'react-redux'; +import {TAction, TState} from '../../store/interfaces'; import * as ActionTypes from '../../store/actions'; import Grid from '@material-ui/core/Grid'; -import Divider from '@material-ui/core/Divider'; -import FormControl from '@material-ui/core/FormControl' -import InputLabel from '@material-ui/core/InputLabel' -import Input from '@material-ui/core/Input' -import LinearProgress from '@material-ui/core/LinearProgress' import FormHelperText from '@material-ui/core/FormHelperText' -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; -import { useHistory, useLocation } from 'react-router'; - -import { createBoard, joinBoard } from '../../services/board.service'; +import {useHistory, useLocation} from 'react-router'; +import {createBoard, joinBoard} from '../../services/board.service'; import './LandingPage.scss'; -import boardImage from '../../assets/board.svg'; -import { getUserIDStorageKey } from '../../common-utils'; -import { Box, Link } from '@material-ui/core'; +import {getUserIDStorageKey} from '../../common-utils'; +import {Input, LinearProgress, Link} from '@material-ui/core'; +import LogoImage from '../../assets/Logo.png' +import MainImage from '../../assets/main-image.svg' +import IconButton from '@material-ui/core/IconButton'; +import TwitterIcon from '@material-ui/icons/Twitter'; +import FacebookIcon from '@material-ui/icons/Facebook'; +import Divider from '@material-ui/core/Divider'; +import {makeStyles} from '@material-ui/core/styles'; type TLandingPageDispatchProps = { setUserId: Function, @@ -35,8 +33,35 @@ type TLandingPageStateProps = { type TLandingPageProps = TLandingPageDispatchProps & TLandingPageStateProps; +const useStyles = makeStyles(theme => ({ + mainImageContainer: { + position: 'relative', + '&::before': { + content: '""', + left: '7.5vw', + top: '-1vh', + position: 'absolute', + width: '6vw', + height: '6vw', + borderRadius: '6vw', + backgroundColor: '#F2F2F2', + zIndex: '-5', + animation: '$grow 10s infinite' + }, + [theme.breakpoints.down("sm")]: { + display: 'none' + } + }, + '@keyframes grow': { + '0%': {transform: 'scale(0.5)'}, + '50%': {transform: 'scale(1)'}, + '100%': {transform: 'scale(0.5)'} + } +})) + const LandingPage = (props: TLandingPageProps) => { + const classes = useStyles(); const {setUserId, setBoardId, boardId} = props; const browserHistory = useHistory(); const location = useLocation(); @@ -119,7 +144,7 @@ const LandingPage = (props: TLandingPageProps) => { function Branding() { return ( - + {'From the minds of '} Bored Engineers @@ -127,43 +152,63 @@ const LandingPage = (props: TLandingPageProps) => { ); } + return ( - - - - - Welcome to - - - The Retro App - - -
-
- - {createBoardProgress && } - {createBoardError && There is some problem creating board. Try Again Later...} - {createBoardSuccess && getSuccessElements()} -
- -
- - Join an existing board - - - Board ID - setBoardId(event.target.value)} disabled={createBoardProgress || joinBoardProgress} error={joinBoardError.errorField === 'boardId'} /> - - - {joinBoardProgress && } - {joinBoardError && {joinBoardError.message}} -
- - - - +
+
+
+ + + logo + + + + + + + + + main + + +
+ Let's get started... + + {createBoardProgress && } + {createBoardError && There is some problem creating board. Try Again Later...} + {createBoardSuccess && getSuccessElements()} + + Or Join An Existing Board + setBoardId(event.target.value)} + disabled={createBoardProgress || joinBoardProgress} + error={joinBoardError.errorField === 'boardId'}/> + + {joinBoardProgress && } + {joinBoardError && {joinBoardError.message}} + By joining, I agree to the Terms and + Privacy Policy. +
+ + + + + ); }