diff --git a/src/App.tsx b/src/App.tsx
index 9cd5bad..139b738 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,22 @@
-import { CssBaseline, Divider, ThemeProvider } from "@mui/material";
+import { CssBaseline, Divider, ThemeProvider, useMediaQuery } from "@mui/material";
import { theme } from "./utils/muiTheme";
import Landing from "./components/landing/Landing";
import NavbarCollapsed from "./components/NavbarCollapsed";
import Footer from "./components/Footer";
+import Navbar from "./components/Navbar";
function App() {
+ const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
return (
- {/* */}
-
-
+ {upMd ?
+
+ :
+
+ }
+
diff --git a/src/assets/card-pages-background4.png b/src/assets/card-pages-background4.png
new file mode 100644
index 0000000..fbf73f9
Binary files /dev/null and b/src/assets/card-pages-background4.png differ
diff --git a/src/assets/card-pages-background5.png b/src/assets/card-pages-background5.png
new file mode 100644
index 0000000..dd14875
Binary files /dev/null and b/src/assets/card-pages-background5.png differ
diff --git a/src/assets/card-pages-background6.png b/src/assets/card-pages-background6.png
new file mode 100644
index 0000000..5ebb258
Binary files /dev/null and b/src/assets/card-pages-background6.png differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 01fce7e..7e99410 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "./PenaLogo";
import SectionWrapper from "./SectionWrapper";
@@ -6,6 +6,7 @@ import SectionWrapper from "./SectionWrapper";
export default function Footer() {
const theme = useTheme();
+ const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
-
+
+
+
@@ -51,16 +63,24 @@ export default function Footer() {
Сервисы помогают предпринимателям, маркетологам и агентствам
сделать интернет-маркетинг прозрач
- Конструктор маркетинговых решений. © 2022
+ {!upMd && }
+ Конструктор маркетинговых решений. © 2022
);
};
\ No newline at end of file
diff --git a/src/components/NavMenuItem.tsx b/src/components/NavMenuItem.tsx
index 622d48f..0dac6cc 100644
--- a/src/components/NavMenuItem.tsx
+++ b/src/components/NavMenuItem.tsx
@@ -10,10 +10,13 @@ export default function NavMenuItem({ text, isActive = false }: Props) {
const theme = useTheme();
return (
-
+
-
+
diff --git a/src/components/PenaLogo.tsx b/src/components/PenaLogo.tsx
index 9b32e57..3f565e7 100644
--- a/src/components/PenaLogo.tsx
+++ b/src/components/PenaLogo.tsx
@@ -1,13 +1,13 @@
interface Props {
- small?: boolean;
+ width: number;
}
-export default function PenaLogo({ small = false }: Props) {
+export default function PenaLogo({ width }: Props) {
return (
-
- {text}
+ {text}
);
}
\ No newline at end of file
diff --git a/src/components/landing/PromoCard.tsx b/src/components/landing/PromoCard.tsx
index 8df4809..90df0e4 100644
--- a/src/components/landing/PromoCard.tsx
+++ b/src/components/landing/PromoCard.tsx
@@ -8,23 +8,21 @@ interface Props {
text: string;
textOrientation: "row" | "column";
sx?: SxProps;
+ small?: boolean;
}
-// TODO background images
-export default function PromoCard({ backgroundImage, headerText, text, textOrientation, sx, width }: Props) {
+export default function PromoCard({ backgroundImage, headerText, text, textOrientation, sx, width, small = false }: Props) {
const theme = useTheme();
return (
- {headerText}
+
+ {headerText}
+
+ {text}
- {text}
-
+
);
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/components/landing/Section1.tsx b/src/components/landing/Section1.tsx
index 3fac6f8..7d8cd0b 100644
--- a/src/components/landing/Section1.tsx
+++ b/src/components/landing/Section1.tsx
@@ -34,7 +34,7 @@ export default function Section1() {
mb: upMd ? undefined : "30px",
}}
>
- {upMd && }
+ {upMd && }
Сервисы прокачки маркетинга
}
sx={{
mt: "auto",
}}
diff --git a/src/components/landing/Section3.tsx b/src/components/landing/Section3.tsx
index 70bdb51..859fc1a 100644
--- a/src/components/landing/Section3.tsx
+++ b/src/components/landing/Section3.tsx
@@ -3,13 +3,18 @@ import PromoCard from "./PromoCard";
import cardPagesBackground1 from "../../assets/card-pages-background1.png";
import cardPagesBackground2 from "../../assets/card-pages-background2.png";
import cardPagesBackground3 from "../../assets/card-pages-background3.png";
+import cardPagesBackground4 from "../../assets/card-pages-background4.png";
+import cardPagesBackground5 from "../../assets/card-pages-background5.png";
+import cardPagesBackground6 from "../../assets/card-pages-background6.png";
import UnderlinedLink from "../UnderlinedLink";
import SectionWrapper from "../SectionWrapper";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
export default function Section3() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
+ const downXs = useMediaQuery(theme.breakpoints.down("sm"));
return (
}
/>
diff --git a/src/mui.d.ts b/src/mui.d.ts
index e7a1573..d7c1ac2 100644
--- a/src/mui.d.ts
+++ b/src/mui.d.ts
@@ -3,7 +3,6 @@ import "@material-ui/styles";
declare module "@mui/material/styles" {
interface Palette {
custom: {
- divider: Palette["primary"],
lightPurple: Palette["primary"],
darkPurple: Palette["primary"],
brightPurple: Palette["primary"],
@@ -12,7 +11,6 @@ declare module "@mui/material/styles" {
}
interface PaletteOptions {
custom: {
- divider: PaletteOptions["primary"],
lightPurple: PaletteOptions["primary"],
darkPurple: PaletteOptions["primary"],
brightPurple: PaletteOptions["primary"],
@@ -20,18 +18,15 @@ declare module "@mui/material/styles" {
};
}
interface TypographyVariants {
- medium: React.CSSProperties;
infographic: React.CSSProperties;
}
interface TypographyVariantsOptions {
- medium?: React.CSSProperties;
infographic?: React.CSSProperties;
}
}
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
- medium: true;
infographic: true;
}
}
\ No newline at end of file
diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts
index 9a7f50c..36fd72a 100644
--- a/src/utils/muiTheme.ts
+++ b/src/utils/muiTheme.ts
@@ -15,9 +15,6 @@ export const theme = createTheme({
secondary: "#7E2AEA",
},
custom: {
- divider: {
- main: "#E3E3E3",
- },
lightPurple: {
main: "#333647",
},
@@ -35,7 +32,7 @@ export const theme = createTheme({
breakpoints: {
values: {
xs: 0,
- sm: 600,
+ sm: 540,
md: 900,
lg: 1200,
xl: 1536,
@@ -56,8 +53,9 @@ export const theme = createTheme({
body1: { // T1 в макете
fontSize: "18px",
lineHeight: "21.33px",
+ fontWeight: 400,
},
- medium: { // M1 в макете
+ body2: { // M1 в макете
fontSize: "16px",
lineHeight: "20px",
fontWeight: 500,