SQuiz/frontPanel
2
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

планшетная адаптация лендинга

Browse Source
This commit is contained in:
Tamara 2024-01-09 13:39:08 +03:00
parent be4b4567cc
commit 30c0e8ad57
8 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Quiz-main.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

BIN
src/assets/quizMain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

8
src/pages/Landing/Counter.tsx
View File

@ -15,16 +15,16 @@ export default function Counter() {
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
height: isMobile ? "606px" : isTablet ? "430px" : "208px",
// height: isMobile ? "606px" : isTablet ? "430px" : "208px",
boxSizing: "border-box",
padding: isTablet ? "0 40px" : undefined,
padding: isTablet ? "0 40px" : "0 20px",
backgroundColor: "#333647",
}}
>
<Box
sx={{
maxWidth: "1160px",
height: isMobile ? "587px" : isTablet ? "341px" : "190px",
height: isMobile ? "587px" : isTablet ? undefined : "190px",
display: "flex",
justifyContent: "space-between",
alignItems: isTablet ? "start" : "center",
@ -36,7 +36,7 @@ export default function Counter() {
padding: isMobile
? "42px 60px 30px 35px"
: isTablet
? "37px 99px 0px 100px"
? "37px 99px 40px 100px"
: "30px 60px 30px 20px",
width: "100%",
marginTop: isMobile ? "-50px" : isTablet ? "45px" : "-41px",

2
src/pages/Landing/FooterLanding.tsx
View File

@ -28,7 +28,7 @@ export default function Component() {
? "40px 16px 74px 16px"
: isTablet
? "56px 40px"
: "56px 0px",
: "56px 20px",
boxSizing: "border-box",
}}
>

2
src/pages/Landing/HeaderLanding.tsx
View File

@ -35,7 +35,7 @@ export default function Component() {
minHeight: "80px",
borderBottom: "1px solid #E3E3E3",
position: "relative",
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : 0,
padding: isMobile ? "0 16px" : isTablet ? "0 40px" : "0 20px",
zIndex: 3,
}}
sxcont={{

29
src/pages/Landing/Hero.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import abstraction from "../../assets/Quiz-main.png";
import abstraction from "../../assets/quizMain.png";
import SectionStyled from "./SectionStyled";
import { Link, redirect, useNavigate } from "react-router-dom";
import { setIsContactFormOpen } from "@root/contactForm";
@ -12,6 +12,7 @@ export default function Component() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1200));
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
@ -24,7 +25,7 @@ export default function Component() {
bg={"#f2f3f7"}
mwidth={"1160px"}
sxsect={{
height: isMobile ? "702px" : isTablet ? "986px" : "660px",
height: isMobile ? "702px" : isTablet ? "823px" : "660px",
}}
sxcont={{
display: "flex",
@ -33,8 +34,10 @@ export default function Component() {
padding: isMobile
? "300px 16px 0 16px"
: isTablet
? "494px 40px 0 40px"
: 0,
? "485px 40px 0 40px"
: isSmallMonitor
? "0 20px"
: 0,
marginBottom: isMobile ? "55px" : isTablet ? 0 : "55px",
}}
>
@ -75,10 +78,22 @@ export default function Component() {
src={abstraction}
sx={{
position: "absolute",
bottom: isMobile ? undefined : isTablet ? "138px" : "-291px",
maxWidth: isMobile ? "403px" : "810px",
bottom: isMobile
? undefined
: isTablet
? "270px"
: isSmallMonitor
? "-146px"
: "-145px",
maxWidth: isMobile ? "403px" : isSmallMonitor ? "500px" : "810px",
width: isMobile ? "100%" : undefined,
left: isMobile ? "-20px" : isTablet ? "54px" : "401px",
left: isMobile
? "-20px"
: isTablet
? "54px"
: isSmallMonitor
? "460px"
: "544px",
top: isMobile ? "-345px" : undefined,
}}
/>

16
src/pages/Landing/HowItWorks.tsx
View File

@ -35,7 +35,7 @@ import Icon21 from "./images/icons/Network";
export default function HowItWorks() {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isTablet = useMediaQuery(theme.breakpoints.down(1140));
return (
<SectionStyled
tag={"section"}
@ -47,7 +47,7 @@ export default function HowItWorks() {
? "65px 16px 0 16px"
: isTablet
? "80px 40px"
: "75px 0 0 0",
: "75px 20px 0 20px",
boxSizing: "border-box",
}}
>
@ -131,7 +131,7 @@ export default function HowItWorks() {
sx={{
backgroundColor: "#C8DADE",
width: isMobile ? undefined : "880px",
height: isMobile ? "193px" : "561px",
height: isMobile ? undefined : "561px",
borderRadius: "12px",
}}
/>
@ -239,7 +239,7 @@ export default function HowItWorks() {
sx={{
display: isTablet ? "none" : "block",
backgroundColor: "#C8DADE",
width: "564px",
width: "550px",
height: "360px",
borderRadius: "12px",
}}
@ -315,7 +315,7 @@ export default function HowItWorks() {
sx={{
backgroundColor: "#C8DADE",
width: isMobile ? undefined : "880px",
height: isMobile ? "193px" : "561px",
height: isMobile ? undefined : "561px",
borderRadius: "12px",
}}
/>
@ -429,7 +429,7 @@ export default function HowItWorks() {
sx={{
backgroundColor: "#C8DADE",
width: isMobile ? undefined : "880px",
height: isMobile ? "193px" : "561px",
height: isMobile ? undefined : "561px",
borderRadius: "12px",
}}
/>
@ -582,7 +582,7 @@ export default function HowItWorks() {
sx={{
backgroundColor: "#C8DADE",
width: isMobile ? undefined : "880px",
height: isMobile ? "193px" : "561px",
height: isMobile ? undefined : "561px",
borderRadius: "12px",
}}
/>
@ -680,7 +680,7 @@ export default function HowItWorks() {
sx={{
display: isTablet ? "none" : "block",
backgroundColor: "#C8DADE",
width: "564px",
width: "550px",
height: "360px",
borderRadius: "12px",

2
src/pages/Landing/WhatTheFeatures.tsx
View File

@ -84,7 +84,7 @@ export default function Component() {
? "20px 16px 40px 16px"
: isTablet
? "30px 40px"
: "30px 0",
: "30px 20px",
color: "#ffffff",
flexWrap: "wrap",
}}