Merge branch 'main' of https://github.com/Luahp/Whaticket-Page into main

luaporto · Oct 15, 2021 · 760aeac · 760aeac
2 parents d864793 + 283f963
commit 760aeac
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 49 deletions.
diff --git a/src/App.js b/src/App.js
@@ -20,20 +20,18 @@ const ContainedButton = styled(Button)({
   width: "188px",
   height: "55px",
   textTransform: "none",
+  filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.2))",
 });
 
 const CardBox = styled(Box)({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  // padding: '78px',
   width: "330px",
-  height: "330px",
-
-  // zIndex: '30',
-
+  height: "340px",
   backgroundColor: "#F4C2C9",
   borderRadius: "40px 40px 0px 0px",
+  filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
 });
 
 const ButtonTypography = styled(Typography)({
@@ -43,6 +41,7 @@ const ButtonTypography = styled(Typography)({
   fontSize: "20px",
   lineHeight: "27px",
   letterSpacing: "0.025em",
+  filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
 });
 
 const SubtitleTypography = styled(Typography)({
@@ -124,40 +123,25 @@ function App() {
             CardBox={CardBox}
           />
         </Container>
-        <Box
-          sx={{
-            zIndex: 100,
-            fontStyle: "normal",
-            fontSize: "20px",
-            letterSpacing: "0.025em",
-            position: "sticky",
-            top: 0,
-            backgroundColor: "#00ACC1",
-            height: "90px",
-          }}
-        >
+
+        <FooterBottomWave>
+          <FooterTopWave />
           <Stack
             direction="row"
             justifyContent="space-around"
             alignItems="center"
             sx={{
-              paddingTop: "10px",
-              height: "75px",
               color: "#fff",
+              paddingTop: "40px",
             }}
           >
             <Stack direction="row">
-              <img
-                style={{
-                  width: 75,
-                  height: 75,
-                }}
-                src={whiteIcon}
-                alt=""
-              />
+              <img style={{ width: 75, height: 75 }} src={whiteIcon} alt="" />
 
               <Typography
                 sx={{
+                  zIndex: 2000,
+
                   fontSize: "36px",
                   fontFamily: "Mada",
                   fontWeight: "400",
@@ -180,7 +164,7 @@ function App() {
             <TextTypography
               sx={{
                 marginTop: "auto",
-
+                fontSize: "15px",
                 color: "#e0e0e0",
               }}
             >
@@ -199,7 +183,7 @@ function App() {
               </IconButton>
             </Stack>
           </Stack>
-        </Box>
+        </FooterBottomWave>
       </ThemeProvider>
     </>
   );

diff --git a/src/Components/Outro.js b/src/Components/Outro.js
@@ -25,6 +25,7 @@ const Outro = ({ TextTypography, ContainedButton, ButtonTypography }) => {
               lineHeight: "49px",
               alignItems: "center",
               paddingTop: "100px",
+              filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
             }}
           >
             Conheça o Whaticket

diff --git a/src/Components/Prices.js b/src/Components/Prices.js
@@ -51,7 +51,16 @@ const PriceListStack = styled(Stack)({
 const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
   return (
     <Grid container spacing={2}>
-      <Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
+      <Grid
+        item
+        xg={4}
+        md={4}
+        xs={12}
+        sx={{
+          zIndex: "20",
+          filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
+        }}
+      >
         <Card sx={{ maxWidth: 345, borderRadius: "20px 20px 20px 20px" }}>
           <Box
             sx={{
@@ -135,7 +144,16 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
           </CardContent>
         </Card>
       </Grid>
-      <Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
+      <Grid
+        item
+        xg={4}
+        md={4}
+        xs={12}
+        sx={{
+          zIndex: "20",
+          filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
+        }}
+      >
         <Card
           sx={{
             maxWidth: 345,
@@ -254,7 +272,16 @@ const Prices = ({ TextTypography, ContainedButton, ButtonTypography }) => {
           </CardContent>
         </Card>
       </Grid>
-      <Grid item xg={4} md={4} xs={12} sx={{ zIndex: "20" }}>
+      <Grid
+        item
+        xg={4}
+        md={4}
+        xs={12}
+        sx={{
+          zIndex: "20",
+          filter: "drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.29))",
+        }}
+      >
         <Card sx={{ maxWidth: 345, borderRadius: "20px 20px 20px 20px" }}>
           <Box
             sx={{

diff --git a/src/Components/TopBar.js b/src/Components/TopBar.js
@@ -1,49 +1,50 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from '@mui/material';
 
-import icon from "../assets/icon.png";
+import icon from '../assets/icon.png';
 
 const TopBar = ({ ContainedButton, ButtonTypography }) => {
   return (
     <>
       <Box
         sx={{
           zIndex: 100,
-          fontStyle: "normal",
-          fontSize: "20px",
-          letterSpacing: "0.025em",
-          position: "sticky",
+          fontStyle: 'normal',
+          fontSize: '20px',
+          letterSpacing: '0.025em',
+          position: 'sticky',
           top: 0,
-          backgroundColor: "#fff",
-          height: "90px",
+          backgroundColor: '#fff',
+          height: '90px',
+          filter: 'drop-shadow(11px 14px 17px rgba(37, 56, 92, 0.10))',
         }}
       >
         <Stack
           direction="row"
           justifyContent="space-around"
           alignItems="center"
           sx={{
-            paddingTop: "10px",
-            height: "75px",
+            paddingTop: '10px',
+            height: '75px',
           }}
         >
           <Stack direction="row">
             <img
               style={{
                 width: 75,
                 height: 75,
-                marginTop: "-15px",
+                marginTop: '-15px',
               }}
               src={icon}
               alt=""
             />
 
             <Typography
-              sx={{ fontSize: "36px", fontFamily: "Mada", fontWeight: "400" }}
+              sx={{ fontSize: '36px', fontFamily: 'Mada', fontWeight: '400' }}
             >
               Wha
             </Typography>
             <Typography
-              sx={{ fontSize: "36px", fontFamily: "Mada", fontWeight: "700" }}
+              sx={{ fontSize: '36px', fontFamily: 'Mada', fontWeight: '700' }}
             >
               ticket
             </Typography>
@@ -53,10 +54,10 @@ const TopBar = ({ ContainedButton, ButtonTypography }) => {
             <Button
               href="https://app.whaticket.com/login"
               sx={{
-                borderRadius: "10px",
-                width: "100px",
-                height: "55px",
-                textTransform: "none",
+                borderRadius: '10px',
+                width: '100px',
+                height: '55px',
+                textTransform: 'none',
               }}
               color="secondary"
             >