Landings/reducer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Правки по дизайну

Browse Source
This commit is contained in:
ArtChaos189 2023-05-04 20:31:31 +03:00
parent 5c8e4011a7
commit f262ec8f33
41 changed files with 3435 additions and 2425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/index.tsx
View File

@ -1,45 +1,48 @@
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import CreateLink from "./pages/CreateLink/CreateLink";
import Stats from "./pages/Stats/Stats";
import { CssBaseline, ThemeProvider } from "@mui/material";
import Landing from "./pages/Landing/Landing";
import theme from "@theme";
import Buying from "./pages/Buying/Buying";
import LinkTransitionsChart from "./pages/LinkTransitionsChart/LinkTransitionsChart";
import Buying from "./pages/Buying/Buying";
import MyLinks from "./pages/MyLinks/MyLinks";
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/ru';
import dayjs from "dayjs";
import ScrollToTop from "./kitUI/ScrollToTop";
import Navbar from "./kitUI/Navbars/Navbar";
import dayjs from "dayjs";
import theme from "@theme";
import "dayjs/locale/ru";
dayjs.locale("ru");
const container = document.getElementById('root');
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<React.StrictMode>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru">
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<ScrollToTop />
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/buy" element={<Buying />} />
<Route path="/chart" element={<LinkTransitionsChart />} />
<Route path="/links" element={<MyLinks />} />
<Route path="/create" element={<CreateLink />} />
<Route path="/stats" element={<Stats />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</LocalizationProvider>
</React.StrictMode>
<React.StrictMode>
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru">
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<ScrollToTop />
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/buy" element={<Buying />} />
<Route path="/chart" element={<LinkTransitionsChart />} />
<Route path="/links" element={<MyLinks />} />
<Route path="/create" element={<CreateLink />} />
<Route path="/stats" element={<Stats />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</LocalizationProvider>
</React.StrictMode>
);

180
src/kitUI/CustomTextField.tsx
View File

@ -1,89 +1,105 @@
import { Box, FormControl, SxProps, TextField, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import { ChangeEventHandler } from "react";
interface Props {
id: string;
label?: string;
placeholder?: string;
backgroundColor?: string;
disabled?: boolean;
inputColor?: string;
sx?: SxProps<Theme>;
textFieldSx?: SxProps<Theme>;
multiline?: boolean;
maxRows?: number;
value?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
id: string;
label?: string;
placeholder?: string;
backgroundColor?: string;
disabled?: boolean;
inputColor?: string;
sx?: SxProps<Theme>;
textFieldSx?: SxProps<Theme>;
multiline?: boolean;
maxRows?: number;
value?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
}
export default function CustomTextField({ id, label, placeholder, backgroundColor, disabled, inputColor, sx, textFieldSx, multiline, maxRows, value, onChange }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
export default function CustomTextField({
id,
label,
placeholder,
backgroundColor,
disabled,
inputColor,
sx,
textFieldSx,
multiline,
maxRows,
value,
onChange,
}: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Box sx={sx}>
{label && <Typography
variant="t1"
sx={{
fontWeight: 500,
color: "#4D4D4D",
mb: upMd ? "10px" : "11.5px",
lineHeight: "100%",
}}
>{label}</Typography>}
<FormControl
fullWidth
variant="standard"
sx={{
p: 0,
}}
>
<TextField
multiline={multiline}
maxRows={maxRows}
id={id}
value={value}
onChange={onChange}
fullWidth
placeholder={placeholder}
disabled={disabled}
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: "10px",
padding: 0,
overflow: "hidden",
backgroundColor,
color: "black",
"& fieldset": {
border: "1px solid #9A9AAF",
},
"&:hover fieldset": {
borderColor: "#5b5d6e",
},
"&.Mui-focused fieldset": {
borderColor: "#9A9AAF",
},
"& ::placeholder": {
color: "#9A9AAF",
opacity: 1,
},
"& input": {
p: "11px 20px",
WebkitTextFillColor: inputColor,
},
"& .MuiInputBase-inputMultiline": {
overflow: "hidden",
padding: "10px 20px",
paddingBottom: "8px",
WebkitTextFillColor: inputColor,
lineHeight: "21.33px",
}
},
...textFieldSx,
}}
/>
</FormControl>
</Box>
);
}
return (
<Box sx={sx}>
{label && (
<Typography
variant="t1"
sx={{
fontWeight: 500,
color: "#4D4D4D",
mb: upMd ? "10px" : "11.5px",
lineHeight: "100%",
}}
>
{label}
</Typography>
)}
<FormControl
fullWidth
variant="standard"
sx={{
p: 0,
}}
>
<TextField
multiline={multiline}
maxRows={maxRows}
id={id}
value={value}
onChange={onChange}
fullWidth
placeholder={placeholder}
disabled={disabled}
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: "10px",
padding: 0,
overflow: "hidden",
backgroundColor,
color: "black",
"& fieldset": {
border: "1px solid #9A9AAF",
},
"&:hover fieldset": {
borderColor: "#5b5d6e",
},
"&.Mui-focused fieldset": {
borderColor: "#995BEE",
},
"& ::placeholder": {
color: "#9A9AAF",
opacity: 1,
},
"& input": {
p: "11px 20px",
WebkitTextFillColor: inputColor,
},
"& .MuiInputBase-inputMultiline": {
overflow: "hidden",
padding: "10px 20px",
paddingBottom: "8px",
WebkitTextFillColor: inputColor,
lineHeight: "21.33px",
},
},
...textFieldSx,
}}
/>
</FormControl>
</Box>
);
}

45
src/kitUI/Icons/BurgerIcon.tsx
View File

@ -1,27 +1,30 @@
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
sx?: SxProps<Theme>;
sx?: SxProps<Theme>;
}
export default function BurgerIcon({ sx }: Props) {
return (
<Box sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
...sx,
}}>
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 8.15039L3 8.15039" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 16.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 24.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover": {
color: "#7E2AEA",
},
...sx,
}}
>
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 8.15039L3 8.15039" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 16.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 24.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
</svg>
</Box>
);
}

60
src/kitUI/Icons/CalendarIcon.tsx
View File

@ -1,27 +1,39 @@
import { Box } from "@mui/material";
export default function CalendarIcon() {
return (
<Box sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
}}>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="2.5" width="18" height="18" rx="5" stroke="#7E2AEA" strokeWidth="1.5" />
<path d="M1 7.5H19" stroke="#7E2AEA" strokeWidth="1.5" strokeLinejoin="round" />
<path d="M14.5 1L14.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.5 1L5.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 11.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 11.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 11.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 15.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 15.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 15.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover path": {
stroke: "#581CA7",
},
"&:active path": {
stroke: "#FB5607",
},
"&:hover rect": {
stroke: "#581CA7",
},
"&:active rect": {
stroke: "#FB5607",
},
}}
>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="2.5" width="18" height="18" rx="5" stroke="#7E2AEA" strokeWidth="1.5" />
<path d="M1 7.5H19" stroke="#7E2AEA" strokeWidth="1.5" strokeLinejoin="round" />
<path d="M14.5 1L14.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.5 1L5.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 11.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 11.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 11.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 15.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 15.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 15.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}

41
src/kitUI/Icons/CloseIcon.tsx
View File

@ -1,25 +1,28 @@
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
sx?: SxProps<Theme>;
sx?: SxProps<Theme>;
}
export default function CloseIcon({ sx }: Props) {
return (
<Box sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
...sx,
}}>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L27 27M3 27L27 3" stroke="currentColor" />
</svg>
</Box>
);
}
return (
<Box
sx={{
width: "30px",
height: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover": {
color: "#7E2AEA",
},
...sx,
}}
>
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3L27 27M3 27L27 3" stroke="currentColor" />
</svg>
</Box>
);
}

45
src/kitUI/Icons/CopyIcon.tsx
View File

@ -1,20 +1,31 @@
import { Box } from "@mui/material";
export default function CopyIcon() {
return (
<Box sx={{
width: "24px",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
}}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5357 17.4286V19.4643C16.5357 20.5886 15.6243 21.5 14.5 21.5H7.03571C5.91142 21.5 5 20.5886 5 19.4643V8.60714C5 7.48285 5.91142 6.57143 7.03571 6.57143H9.07143M16.5357 17.4286H11.1071C9.98285 17.4286 9.07143 16.5172 9.07143 15.3929V6.57143M16.5357 17.4286H17.2143C18.3386 17.4286 19.25 16.5172 19.25 15.3929V7.92857M13.8214 2.5H11.1071C9.98285 2.5 9.07143 3.41142 9.07143 4.53572V6.57143M13.8214 2.5V7.92857H19.25M13.8214 2.5L19.25 7.92857" stroke="#7E2AEA" strokeWidth="1.58333" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
width: "24px",
height: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover path": {
stroke: "#581CA7",
},
"&:active path": {
stroke: "#FB5607",
},
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.5357 17.4286V19.4643C16.5357 20.5886 15.6243 21.5 14.5 21.5H7.03571C5.91142 21.5 5 20.5886 5 19.4643V8.60714C5 7.48285 5.91142 6.57143 7.03571 6.57143H9.07143M16.5357 17.4286H11.1071C9.98285 17.4286 9.07143 16.5172 9.07143 15.3929V6.57143M16.5357 17.4286H17.2143C18.3386 17.4286 19.25 16.5172 19.25 15.3929V7.92857M13.8214 2.5H11.1071C9.98285 2.5 9.07143 3.41142 9.07143 4.53572V6.57143M13.8214 2.5V7.92857H19.25M13.8214 2.5L19.25 7.92857"
stroke="#7E2AEA"
strokeWidth="1.58333"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

150
src/kitUI/Navbars/LandingNavbar/DesktopLandingNavbar.tsx
View File

@ -1,73 +1,101 @@
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import SectionStyled from "@kitUI/section";
import { useTheme } from "@mui/material/styles";
import LogoLight from "@kitUI/img/logo_pena_links_light";
import NavMenuItem from "../NavMenuItem";
import SectionStyled from "@kitUI/section";
import LogoLight from "@kitUI/img/logo_pena_links_light";
interface Props {
menuItems: { path: string; title: string; }[];
menuItems: { path: string; title: string }[];
}
export default function DesktopLandingNavbar({ menuItems }: Props) {
const themeMUI = useTheme();
const themeMUI = useTheme();
return (
<SectionStyled
tag="header"
mwidth="1200px"
sxsect={{
minHeight: "90px",
position: "absolute",
zIndex: themeMUI.zIndex.header,
background: "none",
top: 0,
borderBottom: "1px solid #434654",
}}
sxcont={{
display: "flex",
alignItems: "center",
}}
return (
<SectionStyled
tag="header"
mwidth="1200px"
sxsect={{
minHeight: "90px",
position: "absolute",
zIndex: themeMUI.zIndex.header,
background: "none",
top: 0,
borderBottom: "1px solid #434654",
}}
sxcont={{
display: "flex",
alignItems: "center",
}}
>
<LogoLight style={{ minWidth: "150px" }} textColor="white" />
<Box
sx={{
display: "flex",
gap: "14px",
ml: "42px",
overflow: "hidden",
}}
>
{menuItems.map((element) => (
<NavMenuItem mode="dark" key={element.title} to={element.path}>
{element.title}
</NavMenuItem>
))}
</Box>
<Box
sx={{
ml: "auto",
display: "flex",
gap: "20px",
}}
>
<Button
variant="outlined"
disableRipple
sx={{
color: "white",
border: "1px solid white",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
p: "9px 31px",
"&:hover": {
borderColor: "white",
bgColor: "#252734",
},
"&:active": {
borderColor: "#7E2AEA",
background: "#7E2AEA",
},
}}
>
<LogoLight style={{ minWidth: "150px" }} />
<Box
sx={{
display: "flex",
gap: "14px",
ml: "42px",
overflow: "hidden",
}}
>
{menuItems.map((element, index) =>
<NavMenuItem mode="dark" key={index} to={element.path}>{element.title}</NavMenuItem>
)}
</Box>
<Box sx={{
ml: "auto",
display: "flex",
gap: "20px",
}}>
<Button
variant="outlined"
sx={{
color: "white",
border: "1px solid white",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
p: "9px 31px",
}}
>Регистрация</Button>
<Button
variant="template"
sx={{
p: "9px 31px",
}}
>Войти</Button>
</Box>
</SectionStyled>
);
}
Регистрация
</Button>
<Button
disableRipple
variant="template"
sx={{
p: "9px 31px",
"&:hover": {
border: "1px solid #944FEE",
bgcolor: "#944FEE",
},
"&:active": {
borderColor: "#944FEE",
bgcolor: "white",
color: "#944FEE",
},
}}
>
Войти
</Button>
</Box>
</SectionStyled>
);
}

28
src/kitUI/Navbars/LandingNavbar/LandingNavbar.tsx
View File

@ -1,18 +1,26 @@
import { useMediaQuery, useTheme } from "@mui/material";
import DesktopLandingNavbar from "./DesktopLandingNavbar";
import MobileLandingNavbar from "./MobileLandingNavbar";
import TabletLandingNavbar from "./TabletLandingNavbar";
const landingNavMenuItems: { path: string; title: string; }[] = [
{ path: "/links", title: "Мои ссылки" },
{ path: "/create", title: "Создание ссылки" },
{ path: "/stats", title: "Статистика" },
{ path: "/chart", title: "Пиксель" }
const landingNavMenuItems: { path: string; title: string }[] = [
{ path: "/links", title: "Мои ссылки" },
{ path: "/create", title: "Создание ссылки" },
{ path: "/stats", title: "Статистика" },
{ path: "/chart", title: "Пиксель" },
];
export default function LandingNavbar() {
const muiTheme = useTheme();
const upLg = useMediaQuery(muiTheme.breakpoints.up("lg"));
const muiTheme = useTheme();
const phablet = useMediaQuery(muiTheme.breakpoints.up(1000));
const isMobile = useMediaQuery(muiTheme.breakpoints.up(600));
return upLg ? <DesktopLandingNavbar menuItems={landingNavMenuItems} /> : <MobileLandingNavbar menuItems={landingNavMenuItems} />;
}
return phablet ? (
<DesktopLandingNavbar menuItems={landingNavMenuItems} />
) : isMobile ? (
<TabletLandingNavbar menuItems={landingNavMenuItems} />
) : (
<MobileLandingNavbar menuItems={landingNavMenuItems} />
);
}

236
src/kitUI/Navbars/LandingNavbar/MobileLandingNavbar.tsx
View File

@ -1,3 +1,4 @@
import { forwardRef, useState } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import AppBar from "@mui/material/AppBar";
@ -6,133 +7,142 @@ import IconButton from "@mui/material/IconButton";
import Slide from "@mui/material/Slide";
import { TransitionProps } from "@mui/material/transitions";
import Box from "@mui/material/Box";
import LogoLight from "@kitUI/img/logo_pena_links_light";
import { useTheme } from "@mui/material";
import BurgerIcon from "../../Icons/BurgerIcon";
import CloseIcon from "@root/kitUI/Icons/CloseIcon";
import { forwardRef, useState } from "react";
import NavMenuItem from "../NavMenuItem";
import LogoLight from "@kitUI/img/logo_pena_links_light";
import CloseIcon from "@root/kitUI/Icons/CloseIcon";
import BurgerIcon from "../../Icons/BurgerIcon";
const logoStyle = { minWidth: "101px", width: "101px", height: "39px" };
const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>,
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
) {
return <Slide direction="up" ref={ref} {...props} />;
return <Slide direction="up" ref={ref} {...props} />;
});
interface Props {
menuItems: { path: string; title: string; }[];
menuItems: { path: string; title: string }[];
}
export default function MobileLandingNavbar({ menuItems }: Props) {
const theme = useTheme();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const theme = useTheme();
const [isDialogOpen, setIsDialogOpen] = useState(false);
return (
<Box
component="nav"
sx={{
width: "100%",
height: "51px",
backgroundColor: "#2A2C3A",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
zIndex: theme.zIndex.header,
px: "16px",
gap: "20px",
}}
return (
<Box
component="nav"
sx={{
width: "100%",
height: "51px",
backgroundColor: "#2A2C3A",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
zIndex: theme.zIndex.header,
px: "16px",
gap: "20px",
}}
>
<LogoLight style={logoStyle} textColor="white" />
<IconButton onClick={() => setIsDialogOpen(true)} sx={{ p: 0 }}>
<BurgerIcon sx={{ color: "white" }} />
</IconButton>
<Dialog
fullScreen
open={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
TransitionComponent={Transition}
PaperProps={{
sx: {
height: "100%",
display: "flex",
flexDirection: "column",
background: "#252734",
pb: "20px",
gap: "18px",
},
}}
>
<AppBar
sx={{
position: "relative",
boxShadow: "none",
borderRadius: 0,
background: "#252734",
}}
>
<LogoLight style={logoStyle} />
<IconButton onClick={() => setIsDialogOpen(true)} sx={{ p: 0 }}>
<BurgerIcon sx={{ color: "white" }} />
<Toolbar
disableGutters
sx={{
display: "flex",
justifyContent: "space-between",
px: "16px",
minHeight: "51px",
[theme.breakpoints.up("sm")]: {
minHeight: "51px",
},
}}
>
<LogoLight style={logoStyle} textColor="white" />
<IconButton onClick={() => setIsDialogOpen(false)} aria-label="close" sx={{ p: 0 }}>
<CloseIcon sx={{ color: "white" }} />
</IconButton>
<Dialog
fullScreen
open={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
TransitionComponent={Transition}
PaperProps={{
sx: {
height: "100%",
display: "flex",
flexDirection: "column",
background: "#252734",
pb: "20px",
gap: "18px",
}
}}
>
<AppBar sx={{
position: "relative",
boxShadow: "none",
borderRadius: 0,
background: "#252734",
}}>
<Toolbar
disableGutters
sx={{
display: "flex",
justifyContent: "space-between",
px: "16px",
minHeight: "51px",
[theme.breakpoints.up("sm")]: {
minHeight: "51px",
},
}}
>
<LogoLight style={logoStyle} />
<IconButton
onClick={() => setIsDialogOpen(false)}
aria-label="close"
sx={{ p: 0 }}
>
<CloseIcon sx={{ color: "white" }} />
</IconButton>
</Toolbar>
</AppBar>
<Box sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
}}>
{menuItems.map((element, index) =>
<NavMenuItem key={index} mode="dark" fullWidth to={element.path}>{element.title}</NavMenuItem>
)}
</Box>
<Box sx={{
mt: "auto",
display: "flex",
justifyContent: "center",
gap: "20px",
px: "16px",
}}>
<Button
variant="template"
sx={{
p: "9px 31px",
}}
>Войти</Button>
<Button
variant="outlined"
sx={{
color: "white",
border: "1px solid white",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
p: "9px 31px",
}}
>Регистрация</Button>
</Box>
</Dialog >
</Box >
);
}
</Toolbar>
</AppBar>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
}}
>
{menuItems.map((element, index) => (
<NavMenuItem key={index} mode="dark" fullWidth to={element.path}>
{element.title}
</NavMenuItem>
))}
</Box>
<Box
sx={{
mt: "auto",
display: "flex",
justifyContent: "center",
gap: "20px",
px: "16px",
}}
>
<Button
variant="template"
sx={{
p: "9px 31px",
}}
>
Войти
</Button>
<Button
variant="outlined"
sx={{
color: "white",
border: "1px solid white",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
p: "9px 31px",
}}
>
Регистрация
</Button>
</Box>
</Dialog>
</Box>
);
}

186
src/kitUI/Navbars/LandingNavbar/TabletLandingNavbar.tsx Normal file
View File

@ -0,0 +1,186 @@
import { forwardRef, useState } from "react";
import { TransitionProps } from "@mui/material/transitions";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { useTheme } from "@mui/material/styles";
import { AppBar, Dialog, IconButton, Slide, Toolbar } from "@mui/material";
import CloseIcon from "@root/kitUI/Icons/CloseIcon";
import BurgerIcon from "@root/kitUI/Icons/BurgerIcon";
import SectionStyled from "@kitUI/section";
import LogoLight from "@kitUI/img/logo_pena_links_light";
import NavMenuItem from "../NavMenuItem";
interface Props {
menuItems: { path: string; title: string }[];
}
const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
) {
return <Slide direction="left" ref={ref} {...props} />;
});
const logoStyle = { minWidth: "101px", width: "101px", height: "39px" };
export default function TabletLandingNavbar({ menuItems }: Props) {
const themeMUI = useTheme();
const theme = useTheme();
const [isDialogOpen, setIsDialogOpen] = useState(false);
return (
<SectionStyled
tag="header"
mwidth="1200px"
sxsect={{
minHeight: "90px",
position: "absolute",
zIndex: themeMUI.zIndex.header,
background: "none",
top: 0,
borderBottom: "1px solid #434654",
}}
sxcont={{
display: "flex",
alignItems: "center",
}}
>
<LogoLight style={{ minWidth: "150px" }} textColor="white" />
<Box
sx={{
ml: "auto",
display: "flex",
gap: "20px",
}}
>
<Button
variant="outlined"
disableRipple
sx={{
color: "white",
border: "1px solid white",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
p: "9px 31px",
"&:hover": {
borderColor: "#7E2AEA",
bgColor: "#7E2AEA",
},
}}
>
Регистрация
</Button>
<Button
disableRipple
variant="template"
sx={{
p: "9px 31px",
"&:hover": {
border: "1px solid white",
bgcolor: "#7E2AEA",
},
"&:active": {
borderColor: "#7E2AEA",
bgcolor: "#7E2AEA",
color: "white",
},
}}
>
Войти
</Button>
<IconButton
disableRipple
onClick={() => setIsDialogOpen(true)}
sx={{
p: 0,
}}
>
<BurgerIcon sx={{ color: "white" }} />
</IconButton>
<Dialog
fullScreen
open={isDialogOpen}
onClose={() => setIsDialogOpen(false)}
TransitionComponent={Transition}
PaperProps={{
sx: {
p: "20px",
boxShadow: "none",
ml: "auto",
width: "320px",
height: "100%",
display: "flex",
flexDirection: "column",
background: "#252734",
pb: "20px",
gap: "18px",
},
}}
>
<AppBar
sx={{
position: "relative",
boxShadow: "none",
borderRadius: 0,
background: "#252734",
}}
>
<Toolbar
disableGutters
sx={{
display: "flex",
justifyContent: "space-between",
px: "16px",
minHeight: "51px",
[theme.breakpoints.up("sm")]: {
minHeight: "51px",
},
}}
>
<IconButton
disableRipple
onClick={() => setIsDialogOpen(false)}
aria-label="close"
sx={{ p: 0, ml: "auto" }}
>
<CloseIcon sx={{ color: "white" }} />
</IconButton>
</Toolbar>
</AppBar>
<Box
sx={{
display: "flex",
justifyContent: "right",
flexDirection: "column",
alignItems: "end",
}}
>
{menuItems.map((element) => (
<NavMenuItem key={element.title} mode="dark" to={element.path}>
{element.title}
</NavMenuItem>
))}
</Box>
<Box
sx={{
mt: "auto",
ml: "auto",
display: "flex",
justifyContent: "center",
px: "16px",
}}
>
<LogoLight style={logoStyle} textColor="white" />
</Box>
</Dialog>
</Box>
</SectionStyled>
);
}

100
src/kitUI/Navbars/NavMenuItem.tsx
View File

@ -1,52 +1,66 @@
import { MouseEventHandler, ReactNode } from "react";
import { Button, SxProps, Theme } from "@mui/material";
import { Link, useLocation } from "react-router-dom";
import { Button, SxProps, Theme } from "@mui/material";
interface Props {
to: string;
children: ReactNode;
mode?: "light" | "dark";
defaultColor?: string;
sx?: SxProps<Theme>;
onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
fullWidth?: boolean;
to: string;
children: ReactNode;
mode?: "light" | "dark";
defaultColor?: string;
sx?: SxProps<Theme>;
onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
fullWidth?: boolean;
}
export default function NavMenuItem({ children, mode = "light", to, defaultColor, sx, onClick, fullWidth = false }: Props) {
const location = useLocation();
export default function NavMenuItem({
children,
mode = "light",
to,
defaultColor,
sx,
onClick,
fullWidth = false,
}: Props) {
const location = useLocation();
const mainColor = defaultColor ?? (mode === "light" ? "black" : "white");
const color = location.pathname === to ? "#7E2AEA" : mainColor;
const mainColor = defaultColor ?? (mode === "light" ? "black" : "white");
const color = location.pathname === to ? "#7E2AEA" : mainColor;
const fullWidthSx = {
width: "100%",
py: "12px",
pl: "40px",
borderRadius: 0,
justifyContent: "start",
const fullWidthSx = {
width: "100%",
py: "12px",
pl: "40px",
borderRadius: 0,
justifyContent: "start",
"&:hover": {
backgroundColor: mode === "light" ? "#F2F3F7" : "#333647",
},
};
return (
<Button
disableRipple
{...{
to: !onClick ? to : undefined,
component: !onClick ? Link : undefined,
onClick,
}}
variant="text"
sx={{
color,
textTransform: "none",
fontSize: "16px",
lineHeight: "20px",
py: "9px",
...(fullWidth && fullWidthSx),
...sx,
"&:hover": {
backgroundColor: mode === "light" ? "#F2F3F7" : "#333647",
}
};
return (
<Button
{...{
to: !onClick ? to : undefined,
component: !onClick ? Link : undefined,
onClick,
}}
variant="text"
sx={{
color,
textTransform: "none",
fontSize: "16px",
lineHeight: "20px",
py: "9px",
...(fullWidth && fullWidthSx),
...sx,
}}
>{children}</Button>
);
}
color: "#7E2AEA",
background: "none",
},
}}
>
{children}
</Button>
);
}

10
src/kitUI/Navbars/Navbar.tsx
View File

@ -1,12 +1,12 @@
import { useLocation } from "react-router-dom";
import LandingNavbar from "./LandingNavbar/LandingNavbar";
import NavbarLoggedIn from "./NavbarLoggedIn/NavbarLoggedIn";
export default function Navbar() {
const location = useLocation();
const location = useLocation();
if (location.pathname === "/") return <LandingNavbar />;
if (location.pathname === "/") return <LandingNavbar />;
return <NavbarLoggedIn />;
}
return <NavbarLoggedIn />;
}

284
src/kitUI/Navbars/NavbarLoggedIn/DesktopNavbar.tsx
View File

@ -1,124 +1,186 @@
import { Box, IconButton, Popover, Paper } from "@mui/material";
import PenaLogoDark from "../../img/logo_pena_links_dark";
import CustomAvatar from "./Avatar";
import LogoutIcon from "./LogoutIcon";
import { ReactNode, useEffect, useRef, useState } from "react";
import NavMenuItem from "../NavMenuItem";
import { useLocation } from "react-router-dom";
import { Box, IconButton, Popover, Paper } from "@mui/material";
import LogoutIcon from "./LogoutIcon";
import NavMenuItem from "../NavMenuItem";
import CustomAvatar from "./Avatar";
import PenaLogoDark from "../../img/logo_pena_links_dark";
export default function DesktopNavbar() {
const location = useLocation();
const [isPopperOpen, setIsPopperOpen] = useState<boolean>(false);
const navbarRef = useRef<HTMLDivElement>(null);
const location = useLocation();
const [isPopperOpen, setIsPopperOpen] = useState<boolean>(false);
const navbarRef = useRef<HTMLDivElement>(null);
const handleClick = () => {
setIsPopperOpen(prev => !prev);
};
const handleClick = () => {
setIsPopperOpen((prev) => !prev);
};
const handleClose = () => {
setIsPopperOpen(false);
};
const handleClose = () => {
setIsPopperOpen(false);
};
async function handleLogoutClick() {
async function handleLogoutClick() {}
}
useEffect(
function closePopperOnLocationChange() {
setIsPopperOpen(false);
},
[location.pathname]
);
useEffect(function closePopperOnLocationChange() {
setIsPopperOpen(false);
}, [location.pathname]);
return (
<Box
ref={navbarRef}
component="nav"
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
return (
<Box
ref={navbarRef}
component="nav"
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
<PenaLogoDark style={{ minWidth: "124px" }} />
<Box
sx={{
ml: "52px",
display: "flex",
gap: "14px",
overflow: "hidden",
}}
>
<NavMenuItem to="/links">Мои ссылки</NavMenuItem>
<NavMenuItem to="/create" onClick={handleClick}>
Создание ссылки
</NavMenuItem>
<NavMenuItem to="/">Кастомизация ссылки</NavMenuItem>
<NavMenuItem to="/stats">Статистика</NavMenuItem>
<NavMenuItem to="/chart">Пиксель</NavMenuItem>
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<CustomAvatar
sx={{
ml: "27px",
backgroundColor: "#FB5607",
height: "36px",
width: "36px",
"&:hover": {
border: " 2px solid #9A9AAF",
},
"&:active": {
border: "2px solid black",
},
"&:active .buttonPress": {
bgcolor: "#7E2AEA",
fill: "#7E2AEA",
},
}}
/>
<IconButton
disableRipple
onClick={handleLogoutClick}
sx={{
ml: "20px",
bgcolor: "#F2F3F7",
borderRadius: "6px",
height: "36px",
width: "36px",
"&:hover": {
bgcolor: "#9A9AAF",
},
"&:hover path": {
stroke: "white",
},
"&:active": {
bgcolor: "#7E2AEA",
},
}}
>
<PenaLogoDark style={{ minWidth: "124px" }} />
<Box sx={{
ml: "52px",
display: "flex",
gap: "14px",
overflow: "hidden",
}}>
<NavMenuItem to="/links">Мои ссылки</NavMenuItem>
<NavMenuItem to="/create" onClick={handleClick}>Создание ссылки</NavMenuItem>
<NavMenuItem to="/">Кастомизация ссылки</NavMenuItem>
<NavMenuItem to="/stats">Статистика</NavMenuItem>
<NavMenuItem to="/chart">Пиксель</NavMenuItem>
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<CustomAvatar sx={{ ml: "27px", backgroundColor: "#FB5607", height: "36px", width: "36px" }} />
<IconButton
onClick={handleLogoutClick}
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
>
<LogoutIcon />
</IconButton>
</Box>
<Popover
id="nav-popover"
open={isPopperOpen}
anchorEl={isPopperOpen ? navbarRef.current : null}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
marginThreshold={0}
sx={{
"& .MuiPopover-paper": {
width: "100vw",
maxWidth: "100vw",
borderRadius: 0,
}
}}
>
<Paper sx={{
borderRadius: 0,
display: "flex",
flexDirection: "column",
}}>
<MenuSubItem to="/create">Создание ссылки</MenuSubItem>
<MenuSubItem to="/buy">Покупка и настройка custom ссылки</MenuSubItem>
<MenuSubItem to="/">A/B тесты</MenuSubItem>
</Paper>
</Popover>
</Box>
);
<LogoutIcon />
</IconButton>
</Box>
<Popover
id="nav-popover"
open={isPopperOpen}
anchorEl={isPopperOpen ? navbarRef.current : null}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
marginThreshold={0}
sx={{
"& .MuiPopover-paper": {
width: "100vw",
maxWidth: "100vw",
borderRadius: 0,
},
}}
>
<Paper
sx={{
borderRadius: 0,
display: "flex",
flexDirection: "column",
}}
>
<Box
sx={{
"&:hover": {
backgroundColor: "#F2F3F7",
},
}}
>
<MenuSubItem to="/create">Создание ссылки</MenuSubItem>
</Box>
<Box
sx={{
"&:hover": {
backgroundColor: "#F2F3F7",
},
}}
>
<MenuSubItem to="/buy">Покупка и настройка custom ссылки</MenuSubItem>
</Box>
<Box
sx={{
"&:hover": {
backgroundColor: "#F2F3F7",
},
}}
>
<MenuSubItem to="/">A/B тесты</MenuSubItem>
</Box>
</Paper>
</Popover>
</Box>
);
}
function MenuSubItem({ children, to }: {
to: string;
children: ReactNode;
}) {
return (
<NavMenuItem
to={to}
defaultColor="#4D4D4D"
sx={{
fontWeight: 400,
py: "15px",
pl: "200px",
justifyContent: "start",
"&:hover": {
backgroundColor: "#F2F3F7",
}
}}
>{children}</NavMenuItem>
);
}
function MenuSubItem({ children, to }: { to: string; children: ReactNode }) {
return (
<NavMenuItem
to={to}
defaultColor="#4D4D4D"
sx={{
fontWeight: 400,
py: "15px",
pl: "200px",
justifyContent: "start",
"&:hover": {
backgroundColor: "#F2F3F7",
},
}}
>
{children}
</NavMenuItem>
);
}

29
src/kitUI/Navbars/NavbarLoggedIn/LogoutIcon.tsx
View File

@ -1,12 +1,19 @@
export default function LogoutIcon() {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5601 12.3V15.25C12.5601 16.3546 11.6646 17.25 10.5601 17.25H3.69596C2.59139 17.25 1.69596 16.3546 1.69596 15.25V2.75C1.69596 1.64543 2.59139 0.75 3.69596 0.75H10.5601C11.6646 0.75 12.5601 1.64543 12.5601 2.75V5.7" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" />
<path d="M15.067 11.475L16.8532 9.71165C17.2498 9.32011 17.2498 8.6799 16.8532 8.28836L15.067 6.52501" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" />
<path d="M16.7384 9L6.70996 9" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" />
</svg>
);
}
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.5601 12.3V15.25C12.5601 16.3546 11.6646 17.25 10.5601 17.25H3.69596C2.59139 17.25 1.69596 16.3546 1.69596 15.25V2.75C1.69596 1.64543 2.59139 0.75 3.69596 0.75H10.5601C11.6646 0.75 12.5601 1.64543 12.5601 2.75V5.7"
stroke="#9A9AAF"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M15.067 11.475L16.8532 9.71165C17.2498 9.32011 17.2498 8.6799 16.8532 8.28836L15.067 6.52501"
stroke="#9A9AAF"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path d="M16.7384 9L6.70996 9" stroke="#9A9AAF" strokeWidth="1.5" strokeLinecap="round" />
</svg>
);
}

17
src/kitUI/Navbars/NavbarLoggedIn/NavbarLoggedIn.tsx
View File

@ -1,13 +1,16 @@
import { useLocation } from "react-router-dom";
import { useTheme, useMediaQuery } from "@mui/material";
import DesktopNavbar from "./DesktopNavbar";
import MobileNavbar from "./MobileNavbar";
import { useLocation } from "react-router-dom";
import TabletNavbar from "./TabletNavbar";
export default function NavbarLoggedIn() {
const muiTheme = useTheme();
const location = useLocation();
const upLg = useMediaQuery(muiTheme.breakpoints.up("lg"));
const muiTheme = useTheme();
const location = useLocation();
return upLg ? <DesktopNavbar /> : <MobileNavbar key={location.pathname} />;
}
const phablet = useMediaQuery(muiTheme.breakpoints.up(1000));
const isMobile = useMediaQuery(muiTheme.breakpoints.up(600));
return phablet ? <DesktopNavbar /> : isMobile ? <TabletNavbar /> : <MobileNavbar key={location.pathname} />;
}

234
src/kitUI/Navbars/NavbarLoggedIn/TabletNavbar.tsx Normal file
View File

@ -0,0 +1,234 @@
import { ReactNode, forwardRef, useEffect, useRef, useState } from "react";
import { useLocation, Link } from "react-router-dom";
import { Box, IconButton, AppBar, Toolbar, useTheme, Slide, Dialog } from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
import CloseIcon from "@root/kitUI/Icons/CloseIcon";
import LogoLight from "@kitUI/img/logo_pena_links_light";
import BurgerIcon from "@root/kitUI/Icons/BurgerIcon";
import LogoutIcon from "./LogoutIcon";
import NavMenuItem from "../NavMenuItem";
import CustomAvatar from "./Avatar";
import PenaLogoDark from "../../img/logo_pena_links_dark";
const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
) {
return <Slide direction="left" ref={ref} {...props} />;
});
const logoStyle = { minWidth: "101px", width: "101px", height: "39px" };
export default function TabletNavbar() {
const theme = useTheme();
const [isDialogOpen, setIsDialogOpen] = useState(false);
const location = useLocation();
const [isPopperOpen, setIsPopperOpen] = useState<boolean>(false);
const navbarRef = useRef<HTMLDivElement>(null);
const handleClick = () => {
setIsPopperOpen((prev) => !prev);
};
const handleClose = () => {
setIsPopperOpen(false);
};
const dialogClose = () => {
setIsDialogOpen(false);
setIsPopperOpen(false);
};
async function handleLogoutClick() {}
useEffect(
function closePopperOnLocationChange() {
setIsPopperOpen(false);
handleClose();
},
[location.pathname]
);
return (
<Box
ref={navbarRef}
component="nav"
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
<PenaLogoDark style={{ minWidth: "124px" }} />
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
<CustomAvatar
sx={{
ml: "27px",
backgroundColor: "#FB5607",
height: "36px",
width: "36px",
"&:hover": {
border: " 2px solid #9A9AAF",
},
"&:active": {
border: "2px solid black",
},
"&:active .buttonPress": {
bgcolor: "#7E2AEA",
fill: "#7E2AEA",
},
}}
/>
<IconButton
disableRipple
onClick={handleLogoutClick}
sx={{
ml: "20px",
bgcolor: "#F2F3F7",
borderRadius: "6px",
height: "36px",
width: "36px",
"&:hover": {
bgcolor: "#9A9AAF",
},
"&:hover path": {
stroke: "white",
},
"&:active": {
bgcolor: "#7E2AEA",
},
}}
>
<LogoutIcon />
</IconButton>
</Box>
<IconButton onClick={() => setIsDialogOpen(true)} sx={{ p: 0, ml: "40px" }}>
<BurgerIcon sx={{ color: "black" }} />
</IconButton>
<Dialog
fullScreen
open={isDialogOpen}
onClose={dialogClose}
TransitionComponent={Transition}
PaperProps={{
sx: {
border: "1px solid white",
p: "20px",
boxShadow: "none",
ml: "auto",
width: "390px",
height: "100%",
display: "flex",
flexDirection: "column",
backgroundColor: "white",
borderColor: "white",
pb: "20px",
gap: "18px",
overflow: "hidden",
},
}}
>
<AppBar
sx={{
position: "relative",
background: "none",
boxShadow: "none",
borderRadius: 0,
}}
>
<Toolbar
disableGutters
sx={{
display: "flex",
justifyContent: "space-between",
bgcolor: "white",
px: "16px",
minHeight: "51px",
[theme.breakpoints.up("sm")]: {
minHeight: "51px",
},
}}
>
<IconButton
disableRipple
onClick={() => setIsDialogOpen(false)}
aria-label="close"
sx={{ p: 0, ml: "auto" }}
>
<CloseIcon sx={{ color: "black" }} />
</IconButton>
</Toolbar>
</AppBar>
<Box
sx={{
display: "flex",
justifyContent: "right",
flexDirection: "column",
alignItems: "start",
}}
>
<NavMenuItem to="/links">Мои ссылки</NavMenuItem>
<Box sx={{ boxSizing: "border-box", ml: "-20px", width: "110%", bgcolor: isPopperOpen ? "#F2F3F7" : "none" }}>
<NavMenuItem sx={{ pl: "28px" }} to="/create" onClick={handleClick}>
Создание ссылки
</NavMenuItem>
</Box>
{isPopperOpen && (
<Box sx={{ width: "100%", display: "flex", flexDirection: "column", gap: "25px", ml: "40px", mt: "12px" }}>
<MenuSubItem to="/create">Создание ссылки</MenuSubItem>
<MenuSubItem to="/buy">Покупка и настройка custom ссылки</MenuSubItem>
<MenuSubItem to="/">A/B тесты</MenuSubItem>
</Box>
)}
<NavMenuItem to="/">Кастомизация ссылки</NavMenuItem>
<NavMenuItem to="/stats">Статистика</NavMenuItem>
<NavMenuItem to="/chart">Пиксель</NavMenuItem>
</Box>
<Box
sx={{
mt: "auto",
ml: "auto",
display: "flex",
justifyContent: "center",
px: "16px",
}}
>
<LogoLight style={logoStyle} />
</Box>
</Dialog>
</Box>
);
}
function MenuSubItem({ children, to }: { to: string; children: ReactNode }) {
return (
<Box
sx={{
"&:hover .link": {
color: "#7E2AEA",
},
}}
>
<Link className="link" to={to} style={{ color: "#4D4D4D", textDecoration: "none" }}>
{children}
</Link>
</Box>
);
}

149
src/kitUI/footer.tsx
View File

@ -1,71 +1,92 @@
import Box from "@mui/material/Box";
import Logotip from '@kitUI/img/logo_pena_links_light';
import SectionStyled from './section';
import Logotip from "@kitUI/img/logo_pena_links_light";
import SectionStyled from "./section";
import { useTheme } from "@mui/material/styles";
import { Typography, useMediaQuery } from '@mui/material';
import { Typography, useMediaQuery } from "@mui/material";
import NavMenuItem from "./Navbars/NavMenuItem";
export default function Footer() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<SectionStyled tag={'footer'} bg={'#252734'} mwidth={'1200px'}
sxsect={{
justifyContent: 'space-around',
position: "relative",
zIndex: theme.zIndex.content,
py: upMd ? "70px" : "40px",
return (
<SectionStyled
tag={"footer"}
bg={"#252734"}
mwidth={"1200px"}
sxsect={{
justifyContent: "space-around",
position: "relative",
zIndex: theme.zIndex.content,
py: upMd ? "70px" : "40px",
}}
sxcont={{
display: "flex",
alignItems: "start",
flexDirection: "column",
boxSizing: "border-box",
[theme.breakpoints.down("md")]: {
padding: "0 18px",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: upMd ? "row" : "column",
alignItems: "start",
width: "100%",
maxWidth: "702px",
justifyContent: "space-between",
columnGap: "30px",
rowGap: "36px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "10px",
}}
>
<Logotip style={{ minWidth: "124px", width: "124px", height: "48px" }} textColor="white" />
<Typography
sx={{
color: "#727074",
fontSize: "14px",
lineHeight: "20px",
}}
sxcont={{
display: 'flex',
alignItems: 'start',
flexDirection: 'column',
boxSizing: 'border-box',
[theme.breakpoints.down('md')]: {
padding: '0 18px',
},
}}>
<Box sx={{
display: 'flex',
flexDirection: upMd ? "row" : "column",
alignItems: 'start',
width: "100%",
maxWidth: "702px",
justifyContent: "space-between",
columnGap: "30px",
rowGap: "36px",
}}>
<Box sx={{
display: "flex",
flexDirection: "column",
gap: "10px",
}}>
<Logotip style={{ minWidth: "124px", width: "124px", height: "48px" }} />
<Typography sx={{
color: "#727074",
fontSize: "14px",
lineHeight: "20px",
}}>(c) 2023 Examplelink.com</Typography>
</Box>
<Box sx={{
display: 'flex',
flexDirection: upMd ? "column" : "column",
alignItems: "start",
flexWrap: "wrap",
maxHeight: upMd ? "145px" : undefined,
maxWidth: "450px",
flexGrow: 1,
ml: "-8px",
mt: "-6px",
}}>
<NavMenuItem mode="dark" to="/links">Мои ссылки</NavMenuItem>
<NavMenuItem mode="dark" to="/create">Создание ссылки</NavMenuItem>
<NavMenuItem mode="dark" to="/stats">Статистика</NavMenuItem>
<NavMenuItem mode="dark" to="/chart">Пиксель</NavMenuItem>
</Box>
</Box>
</SectionStyled>
);
}
>
(c) 2023 Examplelink.com
</Typography>
</Box>
<Box
sx={{
display: "flex",
flexDirection: upMd ? "column" : "column",
alignItems: "start",
flexWrap: "wrap",
maxHeight: upMd ? "145px" : undefined,
maxWidth: "450px",
flexGrow: 1,
ml: "-8px",
mt: "-6px",
}}
>
<NavMenuItem mode="dark" to="/links">
Мои ссылки
</NavMenuItem>
<NavMenuItem mode="dark" to="/create">
Создание ссылки
</NavMenuItem>
<NavMenuItem mode="dark" to="/stats">
Статистика
</NavMenuItem>
<NavMenuItem mode="dark" to="/chart">
Пиксель
</NavMenuItem>
</Box>
</Box>
</SectionStyled>
);
}

69
src/kitUI/img/logo_pena_links_light.tsx
View File

@ -1,30 +1,49 @@
import { CSSProperties } from "react";
interface Props {
style?: CSSProperties;
blobColor?: string;
style?: CSSProperties;
blobColor?: string;
textColor?: string;
}
export default function PenaLogoLight({ style, blobColor = "#7E2AEA" }: Props) {
return (
<svg width="150" height="58" viewBox="0 0 150 58" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
<g clipPath="url(#clip0_522_519)">
<path fillRule="evenodd" clipRule="evenodd" d="M21.6318 2.77152C15.522 2.06379 11.3068 8.62681 7.38602 13.3709C3.94519 17.5343 1.38319 22.2369 1.08561 27.6324C0.769009 33.3726 1.81028 39.3507 5.72092 43.5607C9.74908 47.8972 15.7831 50.6373 21.6318 49.7514C26.9949 48.9391 29.368 43.0496 33.3608 39.3743C37.6963 35.3835 45.7735 33.5274 45.6615 27.6324C45.5493 21.7283 37.0246 20.5726 32.9228 16.329C28.6741 11.9333 27.7012 3.47456 21.6318 2.77152Z" fill={blobColor} />
<ellipse cx="36.8326" cy="47.51" rx="3.37135" ry="3.37135" fill={blobColor} />
<circle cx="33.4603" cy="10.0988" r="1.28432" fill={blobColor} />
<path d="M54.0021 26.2513C53.6276 22.6105 51.9148 19.2385 49.1956 16.7888C46.4764 14.339 42.9445 12.9861 39.2846 12.9922C38.765 12.9924 38.2457 13.0196 37.7289 13.0736C34.0898 13.4558 30.7211 15.1718 28.2725 17.8909C25.8239 20.61 24.4689 24.1395 24.4688 27.7985V27.7985V48.9505H30.8143V39.9609C33.2953 41.6869 36.2464 42.6098 39.2687 42.6049C39.7884 42.6047 40.3077 42.5775 40.8245 42.5235C42.7582 42.3202 44.6331 41.7381 46.3419 40.8103C48.0507 39.8825 49.56 38.6272 50.7837 37.1161C52.0073 35.605 52.9214 33.8676 53.4736 32.0033C54.0258 30.1389 54.2054 28.184 54.0021 26.2502V26.2513ZM45.8523 33.1257C45.1552 33.9915 44.2933 34.7105 43.3164 35.241C42.3396 35.7715 41.2672 36.1028 40.1614 36.216C39.8648 36.2467 39.5669 36.2623 39.2687 36.2625C37.3497 36.2607 35.4882 35.6066 33.9899 34.4075C32.4916 33.2084 31.4454 31.5355 31.0232 29.6635C30.6009 27.7914 30.8276 25.8315 31.666 24.1052C32.5044 22.379 33.9048 20.9891 35.6373 20.1636C37.3697 19.3382 39.3313 19.1262 41.2002 19.5625C43.069 19.9988 44.7339 21.0575 45.9218 22.5648C47.1096 24.0721 47.7498 25.9384 47.7371 27.8574C47.7245 29.7764 47.0599 31.6342 45.8523 33.1257Z" fill="white" />
<path d="M70.5601 12.9922C70.0405 12.9924 69.5212 13.0196 69.0044 13.0736C65.2337 13.4707 61.7591 15.2992 59.2966 18.1823C56.8341 21.0653 55.5715 24.7831 55.7689 28.5695C55.9663 32.3559 57.6088 35.9223 60.3578 38.5336C63.1068 41.1449 66.7528 42.6021 70.5443 42.6049C71.0639 42.6047 71.5832 42.5775 72.1 42.5234C74.8187 42.234 77.4048 41.1998 79.5733 39.5347C81.7419 37.8696 83.4087 35.6383 84.3903 33.0865H77.1574L77.1278 33.1235C76.2014 34.2687 74.992 35.1521 73.6193 35.6865C72.2466 36.2208 70.7583 36.3875 69.3014 36.1701C67.8445 35.9527 66.4697 35.3587 65.3128 34.4469C64.1559 33.5351 63.2572 32.3371 62.7054 30.9713H85.0207C85.4905 28.8095 85.4707 26.57 84.9628 24.4168C84.4548 22.2637 83.4716 20.2514 82.0851 18.5276C80.6986 16.8037 78.944 15.4119 76.9498 14.4541C74.9556 13.4963 72.7724 12.9968 70.5601 12.9922V12.9922ZM62.7054 24.6257C63.283 23.2039 64.2357 21.9654 65.4617 21.0424C66.6878 20.1193 68.1414 19.5463 69.6675 19.3843C69.9641 19.3535 70.262 19.338 70.5601 19.3378C72.2456 19.3349 73.8932 19.8372 75.2904 20.7798C76.6877 21.7223 77.7704 23.0619 78.399 24.6257H62.7054Z" fill="white" />
<path d="M100.694 12.9922C98.2684 12.9884 95.8892 13.6552 93.8193 14.9191V12.9922H87.4737V42.6049H93.8193V26.2122C93.8193 24.389 94.5436 22.6404 95.8328 21.3512C97.122 20.062 98.8705 19.3378 100.694 19.3378C102.517 19.3378 104.265 20.062 105.555 21.3512C106.844 22.6404 107.568 24.389 107.568 26.2122V42.6049H113.914V26.2122C113.914 22.706 112.521 19.3435 110.042 16.8642C107.562 14.385 104.2 12.9922 100.694 12.9922Z" fill="white" />
<path d="M145.646 29.6906V12.9922H139.301V15.6362C136.82 13.9094 133.869 12.9865 130.846 12.9922C130.327 12.9924 129.807 13.0196 129.291 13.0736C125.52 13.4708 122.045 15.2993 119.583 18.1823C117.12 21.0653 115.858 24.7832 116.055 28.5696C116.253 32.356 117.895 35.9223 120.644 38.5336C123.393 41.1449 127.039 42.6021 130.83 42.6049C131.35 42.6047 131.869 42.5775 132.386 42.5235C136.074 42.146 139.483 40.3891 141.931 37.6046C143.833 40.1489 146.587 41.9238 149.69 42.6049V35.9526C148.485 35.4073 147.464 34.5268 146.747 33.4163C146.03 32.3058 145.648 31.0124 145.646 29.6906ZM137.414 33.1236C136.717 33.9893 135.855 34.7081 134.878 35.2386C133.901 35.769 132.829 36.1005 131.723 36.2138C131.427 36.2446 131.129 36.2602 130.83 36.2604C128.663 36.2603 126.577 35.428 125.005 33.9352C123.433 32.4424 122.494 30.4031 122.381 28.238C122.269 26.073 122.992 23.9474 124.401 22.2999C125.811 20.6525 127.798 19.6088 129.955 19.3843C130.251 19.3535 130.549 19.338 130.846 19.3378C132.444 19.3391 134.008 19.7927 135.359 20.646C136.709 21.4993 137.79 22.7175 138.477 24.1596C139.164 25.6018 139.429 27.2089 139.241 28.7952C139.053 30.3816 138.419 31.8822 137.414 33.1236Z" fill="white" />
<path d="M115.15 55.5195V45.9186H116.991V55.5195H115.15ZM118.883 47.6213V45.9186H120.723V47.6213H118.883ZM118.883 55.5195V48.5644H120.723V55.5195H118.883ZM128.943 55.5195H127.102V51.9699C127.102 51.219 127.063 50.7343 126.984 50.516C126.906 50.2934 126.777 50.1209 126.598 49.9987C126.423 49.8764 126.212 49.8153 125.963 49.8153C125.644 49.8153 125.358 49.9026 125.105 50.0773C124.852 50.2519 124.677 50.4833 124.581 50.7715C124.489 51.0596 124.443 51.5923 124.443 52.3694V55.5195H122.603V48.5644H124.312V49.5861C124.919 48.8002 125.683 48.4072 126.605 48.4072C127.011 48.4072 127.382 48.4815 127.718 48.6299C128.054 48.774 128.307 48.9595 128.478 49.1866C128.652 49.4136 128.772 49.6712 128.838 49.9594C128.908 50.2475 128.943 50.6601 128.943 51.1971V55.5195ZM130.75 55.5195V45.9186H132.59V51.0138L134.745 48.5644H137.011L134.634 51.1055L137.181 55.5195H135.197L133.448 52.3956L132.59 53.2928V55.5195H130.75ZM137.633 53.5352L139.48 53.2536C139.559 53.6116 139.718 53.8844 139.958 54.0722C140.198 54.2556 140.534 54.3472 140.967 54.3472C141.443 54.3472 141.801 54.2599 142.041 54.0853C142.202 53.963 142.283 53.7993 142.283 53.5941C142.283 53.4544 142.239 53.3387 142.152 53.247C142.06 53.1597 141.855 53.0789 141.536 53.0047C140.052 52.6772 139.111 52.3782 138.714 52.1075C138.164 51.732 137.889 51.2102 137.889 50.5422C137.889 49.9397 138.127 49.4333 138.602 49.0229C139.078 48.6124 139.816 48.4072 140.816 48.4072C141.768 48.4072 142.475 48.5622 142.938 48.8722C143.401 49.1822 143.719 49.6406 143.894 50.2475L142.159 50.5684C142.084 50.2977 141.942 50.0903 141.733 49.9463C141.528 49.8022 141.233 49.7302 140.849 49.7302C140.364 49.7302 140.017 49.7978 139.807 49.9332C139.668 50.0292 139.598 50.1537 139.598 50.3065C139.598 50.4375 139.659 50.5488 139.781 50.6405C139.947 50.7627 140.519 50.9352 141.497 51.1578C142.479 51.3805 143.165 51.6534 143.554 51.9765C143.938 52.3039 144.13 52.7602 144.13 53.3452C144.13 53.9827 143.864 54.5306 143.331 54.9891C142.798 55.4475 142.01 55.6767 140.967 55.6767C140.019 55.6767 139.268 55.4846 138.714 55.1004C138.164 54.7162 137.803 54.1944 137.633 53.5352Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_522_519">
<rect width="149.833" height="58" fill="white" />
</clipPath>
</defs>
</svg>
);
}
export default function PenaLogoLight({ style, blobColor = "#7E2AEA", textColor = "black" }: Props) {
return (
<svg width="150" height="58" viewBox="0 0 150 58" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
<g clipPath="url(#clip0_522_519)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.6318 2.77152C15.522 2.06379 11.3068 8.62681 7.38602 13.3709C3.94519 17.5343 1.38319 22.2369 1.08561 27.6324C0.769009 33.3726 1.81028 39.3507 5.72092 43.5607C9.74908 47.8972 15.7831 50.6373 21.6318 49.7514C26.9949 48.9391 29.368 43.0496 33.3608 39.3743C37.6963 35.3835 45.7735 33.5274 45.6615 27.6324C45.5493 21.7283 37.0246 20.5726 32.9228 16.329C28.6741 11.9333 27.7012 3.47456 21.6318 2.77152Z"
fill={blobColor}
/>
<ellipse cx="36.8326" cy="47.51" rx="3.37135" ry="3.37135" fill={blobColor} />
<circle cx="33.4603" cy="10.0988" r="1.28432" fill={blobColor} />
<path
d="M54.0021 26.2513C53.6276 22.6105 51.9148 19.2385 49.1956 16.7888C46.4764 14.339 42.9445 12.9861 39.2846 12.9922C38.765 12.9924 38.2457 13.0196 37.7289 13.0736C34.0898 13.4558 30.7211 15.1718 28.2725 17.8909C25.8239 20.61 24.4689 24.1395 24.4688 27.7985V27.7985V48.9505H30.8143V39.9609C33.2953 41.6869 36.2464 42.6098 39.2687 42.6049C39.7884 42.6047 40.3077 42.5775 40.8245 42.5235C42.7582 42.3202 44.6331 41.7381 46.3419 40.8103C48.0507 39.8825 49.56 38.6272 50.7837 37.1161C52.0073 35.605 52.9214 33.8676 53.4736 32.0033C54.0258 30.1389 54.2054 28.184 54.0021 26.2502V26.2513ZM45.8523 33.1257C45.1552 33.9915 44.2933 34.7105 43.3164 35.241C42.3396 35.7715 41.2672 36.1028 40.1614 36.216C39.8648 36.2467 39.5669 36.2623 39.2687 36.2625C37.3497 36.2607 35.4882 35.6066 33.9899 34.4075C32.4916 33.2084 31.4454 31.5355 31.0232 29.6635C30.6009 27.7914 30.8276 25.8315 31.666 24.1052C32.5044 22.379 33.9048 20.9891 35.6373 20.1636C37.3697 19.3382 39.3313 19.1262 41.2002 19.5625C43.069 19.9988 44.7339 21.0575 45.9218 22.5648C47.1096 24.0721 47.7498 25.9384 47.7371 27.8574C47.7245 29.7764 47.0599 31.6342 45.8523 33.1257Z"
fill={textColor}
/>
<path
d="M70.5601 12.9922C70.0405 12.9924 69.5212 13.0196 69.0044 13.0736C65.2337 13.4707 61.7591 15.2992 59.2966 18.1823C56.8341 21.0653 55.5715 24.7831 55.7689 28.5695C55.9663 32.3559 57.6088 35.9223 60.3578 38.5336C63.1068 41.1449 66.7528 42.6021 70.5443 42.6049C71.0639 42.6047 71.5832 42.5775 72.1 42.5234C74.8187 42.234 77.4048 41.1998 79.5733 39.5347C81.7419 37.8696 83.4087 35.6383 84.3903 33.0865H77.1574L77.1278 33.1235C76.2014 34.2687 74.992 35.1521 73.6193 35.6865C72.2466 36.2208 70.7583 36.3875 69.3014 36.1701C67.8445 35.9527 66.4697 35.3587 65.3128 34.4469C64.1559 33.5351 63.2572 32.3371 62.7054 30.9713H85.0207C85.4905 28.8095 85.4707 26.57 84.9628 24.4168C84.4548 22.2637 83.4716 20.2514 82.0851 18.5276C80.6986 16.8037 78.944 15.4119 76.9498 14.4541C74.9556 13.4963 72.7724 12.9968 70.5601 12.9922V12.9922ZM62.7054 24.6257C63.283 23.2039 64.2357 21.9654 65.4617 21.0424C66.6878 20.1193 68.1414 19.5463 69.6675 19.3843C69.9641 19.3535 70.262 19.338 70.5601 19.3378C72.2456 19.3349 73.8932 19.8372 75.2904 20.7798C76.6877 21.7223 77.7704 23.0619 78.399 24.6257H62.7054Z"
fill={textColor}
/>
<path
d="M100.694 12.9922C98.2684 12.9884 95.8892 13.6552 93.8193 14.9191V12.9922H87.4737V42.6049H93.8193V26.2122C93.8193 24.389 94.5436 22.6404 95.8328 21.3512C97.122 20.062 98.8705 19.3378 100.694 19.3378C102.517 19.3378 104.265 20.062 105.555 21.3512C106.844 22.6404 107.568 24.389 107.568 26.2122V42.6049H113.914V26.2122C113.914 22.706 112.521 19.3435 110.042 16.8642C107.562 14.385 104.2 12.9922 100.694 12.9922Z"
fill={textColor}
/>
<path
d="M145.646 29.6906V12.9922H139.301V15.6362C136.82 13.9094 133.869 12.9865 130.846 12.9922C130.327 12.9924 129.807 13.0196 129.291 13.0736C125.52 13.4708 122.045 15.2993 119.583 18.1823C117.12 21.0653 115.858 24.7832 116.055 28.5696C116.253 32.356 117.895 35.9223 120.644 38.5336C123.393 41.1449 127.039 42.6021 130.83 42.6049C131.35 42.6047 131.869 42.5775 132.386 42.5235C136.074 42.146 139.483 40.3891 141.931 37.6046C143.833 40.1489 146.587 41.9238 149.69 42.6049V35.9526C148.485 35.4073 147.464 34.5268 146.747 33.4163C146.03 32.3058 145.648 31.0124 145.646 29.6906ZM137.414 33.1236C136.717 33.9893 135.855 34.7081 134.878 35.2386C133.901 35.769 132.829 36.1005 131.723 36.2138C131.427 36.2446 131.129 36.2602 130.83 36.2604C128.663 36.2603 126.577 35.428 125.005 33.9352C123.433 32.4424 122.494 30.4031 122.381 28.238C122.269 26.073 122.992 23.9474 124.401 22.2999C125.811 20.6525 127.798 19.6088 129.955 19.3843C130.251 19.3535 130.549 19.338 130.846 19.3378C132.444 19.3391 134.008 19.7927 135.359 20.646C136.709 21.4993 137.79 22.7175 138.477 24.1596C139.164 25.6018 139.429 27.2089 139.241 28.7952C139.053 30.3816 138.419 31.8822 137.414 33.1236Z"
fill={textColor}
/>
<path
d="M115.15 55.5195V45.9186H116.991V55.5195H115.15ZM118.883 47.6213V45.9186H120.723V47.6213H118.883ZM118.883 55.5195V48.5644H120.723V55.5195H118.883ZM128.943 55.5195H127.102V51.9699C127.102 51.219 127.063 50.7343 126.984 50.516C126.906 50.2934 126.777 50.1209 126.598 49.9987C126.423 49.8764 126.212 49.8153 125.963 49.8153C125.644 49.8153 125.358 49.9026 125.105 50.0773C124.852 50.2519 124.677 50.4833 124.581 50.7715C124.489 51.0596 124.443 51.5923 124.443 52.3694V55.5195H122.603V48.5644H124.312V49.5861C124.919 48.8002 125.683 48.4072 126.605 48.4072C127.011 48.4072 127.382 48.4815 127.718 48.6299C128.054 48.774 128.307 48.9595 128.478 49.1866C128.652 49.4136 128.772 49.6712 128.838 49.9594C128.908 50.2475 128.943 50.6601 128.943 51.1971V55.5195ZM130.75 55.5195V45.9186H132.59V51.0138L134.745 48.5644H137.011L134.634 51.1055L137.181 55.5195H135.197L133.448 52.3956L132.59 53.2928V55.5195H130.75ZM137.633 53.5352L139.48 53.2536C139.559 53.6116 139.718 53.8844 139.958 54.0722C140.198 54.2556 140.534 54.3472 140.967 54.3472C141.443 54.3472 141.801 54.2599 142.041 54.0853C142.202 53.963 142.283 53.7993 142.283 53.5941C142.283 53.4544 142.239 53.3387 142.152 53.247C142.06 53.1597 141.855 53.0789 141.536 53.0047C140.052 52.6772 139.111 52.3782 138.714 52.1075C138.164 51.732 137.889 51.2102 137.889 50.5422C137.889 49.9397 138.127 49.4333 138.602 49.0229C139.078 48.6124 139.816 48.4072 140.816 48.4072C141.768 48.4072 142.475 48.5622 142.938 48.8722C143.401 49.1822 143.719 49.6406 143.894 50.2475L142.159 50.5684C142.084 50.2977 141.942 50.0903 141.733 49.9463C141.528 49.8022 141.233 49.7302 140.849 49.7302C140.364 49.7302 140.017 49.7978 139.807 49.9332C139.668 50.0292 139.598 50.1537 139.598 50.3065C139.598 50.4375 139.659 50.5488 139.781 50.6405C139.947 50.7627 140.519 50.9352 141.497 51.1578C142.479 51.3805 143.165 51.6534 143.554 51.9765C143.938 52.3039 144.13 52.7602 144.13 53.3452C144.13 53.9827 143.864 54.5306 143.331 54.9891C142.798 55.4475 142.01 55.6767 140.967 55.6767C140.019 55.6767 139.268 55.4846 138.714 55.1004C138.164 54.7162 137.803 54.1944 137.633 53.5352Z"
fill={textColor}
/>
</g>
<defs>
<clipPath id="clip0_522_519">
<rect width="149.833" height="58" fill="white" />
</clipPath>
</defs>
</svg>
);
}

79
src/pages/Buying/Buying.tsx
View File

@ -1,49 +1,44 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import NumberIcon from "@root/kitUI/Icons/NumberIcon";
import Section from "@root/kitUI/section";
import LinkGenerationCard from "./LinkGenerationCard";
export default function Buying() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<>
<Section
sxsect={{
py: upMd ? "50px" : "40px",
}}
>
<Typography variant="h3" maxWidth={upMd ? undefined : "273px"}>
Покупка коротких ссылок
</Typography>
<Box sx={{
mt: upMd ? "35px" : "30px",
display: "flex",
flexDirection: "column",
gap: upMd ? "30px" : "26px",
}}>
<LinkGenerationCard
id="three-symbols-link"
headerText="Сокращенная трехсимвольная ссылка"
icon={<NumberIcon
number={3}
color="#FB5607"
backgroundColor="#FEDFD0"
sx={{ alignSelf: "start" }}
/>} />
<LinkGenerationCard
id="four-symbols-link"
headerText="Сокращенная четырехсимвольная ссылка"
icon={<NumberIcon
number={4}
color="#FB5607"
backgroundColor="#FEDFD0"
sx={{ alignSelf: "start" }}
/>} />
</Box>
</Section>
</>
);
}
return (
<>
<Section
sxsect={{
py: upMd ? "50px" : "40px",
}}
>
<Typography variant="h3" maxWidth={upMd ? undefined : "273px"}>
Покупка коротких ссылок
</Typography>
<Box
sx={{
mt: upMd ? "35px" : "30px",
display: "flex",
flexDirection: "column",
gap: upMd ? "30px" : "26px",
}}
>
<LinkGenerationCard
id="three-symbols-link"
headerText="Сокращенная трехсимвольная ссылка"
icon={<NumberIcon number={3} color="#FB5607" backgroundColor="#FEDFD0" sx={{ alignSelf: "start" }} />}
/>
<LinkGenerationCard
id="four-symbols-link"
headerText="Сокращенная четырехсимвольная ссылка"
icon={<NumberIcon number={4} color="#FB5607" backgroundColor="#FEDFD0" sx={{ alignSelf: "start" }} />}
/>
</Box>
</Section>
</>
);
}

183
src/pages/Buying/LinkGenerationCard.tsx
View File

@ -1,85 +1,116 @@
import { ReactNode, useState } from "react";
import { Typography, Box, Button, Paper, useMediaQuery, useTheme } from "@mui/material";
import CustomTextField from "@root/kitUI/CustomTextField";
interface Props {
id: string;
icon: ReactNode;
headerText: string;
id: string;
icon: ReactNode;
headerText: string;
}
export default function LinkGenerationCard({ id, headerText, icon }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [linkToShortenField, setLinkToShortenField] = useState<string>("");
const [shortenedLink, setShortenedLink] = useState<string>("");
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [linkToShortenField, setLinkToShortenField] = useState<string>("");
const [shortenedLink, setShortenedLink] = useState<string>("");
return (
<Paper sx={{
width: "100%",
p: "20px",
display: "flex",
flexDirection: "column",
}}>
<Box sx={{
display: "flex",
gap: "14px",
alignItems: "center",
}}>
{icon}
<Typography variant="h4" lineHeight="100% !important">{headerText}</Typography>
</Box>
<CustomTextField
id={`${id}-input`}
label="Ссылка которую вы хотите сократить"
placeholder="Введите ссылку"
backgroundColor="#F2F3F7"
value={linkToShortenField}
onChange={e => setLinkToShortenField(e.target.value)}
sx={{
mt: upMd ? "29px" : "23px",
}}
/>
<CustomTextField
id={`${id}-generated`}
label="Генерация сокращенной ссылки"
placeholder="Здесь будет ваша новая ссылка вида links.ru/xxx"
value={shortenedLink}
disabled
sx={{
mt: upMd ? "23px" : "21px",
}}
/>
<Box sx={{
mt: "30px",
display: "flex",
flexWrap: "wrap",
gap: upMd ? "20px" : "13px",
maxWidth: "412px",
}}>
<Button
variant="template"
sx={{
p: "9px 0",
minWidth: "min-content",
flexGrow: 1,
flexBasis: 0,
}}
>Сгенерировать</Button>
<Button
variant="template"
sx={{
p: "9px 0",
minWidth: "min-content",
flexGrow: 1,
flexBasis: 0,
backgroundColor: "rgb(0 0 0 / 0)",
color: "#9A9AAF",
borderColor: "#9A9AAF",
}}>
Сохранить</Button>
</Box>
</Paper>
);
}
return (
<Paper
sx={{
width: "100%",
p: "20px",
display: "flex",
flexDirection: "column",
}}
>
<Box
sx={{
display: "flex",
gap: "14px",
alignItems: "center",
}}
>
{icon}
<Typography variant="h4" lineHeight="100% !important">
{headerText}
</Typography>
</Box>
<CustomTextField
id={`${id}-input`}
label="Ссылка которую вы хотите сократить"
placeholder="Введите ссылку"
backgroundColor="#F2F3F7"
value={linkToShortenField}
onChange={(e) => setLinkToShortenField(e.target.value)}
sx={{
mt: upMd ? "29px" : "23px",
}}
/>
<CustomTextField
id={`${id}-generated`}
label="Генерация сокращенной ссылки"
placeholder="Здесь будет ваша новая ссылка вида links.ru/xxx"
value={shortenedLink}
disabled
sx={{
mt: upMd ? "23px" : "21px",
}}
/>
<Box
sx={{
mt: "30px",
display: "flex",
flexWrap: "wrap",
gap: upMd ? "20px" : "13px",
maxWidth: "412px",
}}
>
<Button
disableRipple
variant="template"
sx={{
p: "9px 0",
minWidth: "min-content",
flexGrow: 1,
flexBasis: 0,
"&:hover": {
borderColor: "#944FEE",
bgcolor: "#944FEE",
},
"&:active": {
borderColor: "#944FEE",
color: "#944FEE",
bgcolor: "white",
},
}}
>
Сгенерировать
</Button>
<Button
disableRipple
variant="template"
sx={{
p: "9px 0",
minWidth: "min-content",
flexGrow: 1,
flexBasis: 0,
backgroundColor: "rgb(0 0 0 / 0)",
color: "#9A9AAF",
borderColor: "#9A9AAF",
"&:hover": {
bgcolor: "white",
},
"&:active": {
borderColor: "#944FEE",
color: "#944FEE",
bgcolor: "white",
},
}}
>
Сохранить
</Button>
</Box>
</Paper>
);
}

388
src/pages/CreateLink/CreateLink.tsx
View File

@ -1,188 +1,216 @@
import { useState } from "react";
import { useMediaQuery, Typography, useTheme, Box, Paper, Switch, Button } from "@mui/material";
import CustomTextField from "@root/kitUI/CustomTextField";
import Section from "@root/kitUI/section";
import { useState } from "react";
export default function CreateLink() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [isAddUtm, setIsAddUtm] = useState<boolean>(false);
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [isAddUtm, setIsAddUtm] = useState<boolean>(false);
function createLinkHandler() {
function createLinkHandler() {}
}
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
}}
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
}}
>
<Typography variant="h3">Создание ссылки</Typography>
<Paper
sx={{
mt: upMd ? "35px" : "35px",
p: "20px",
backgroundColor: "#7E2AEA",
}}
>
<Typography variant="h4" color="white">
Создать новую ссылку
</Typography>
<CustomTextField
id="link-input1"
backgroundColor="#F2F3F7"
placeholder="Введите ссылку"
sx={{ mt: "30px" }}
/>
</Paper>
<Paper
sx={{
mt: upMd ? "30px" : "25px",
p: "20px",
}}
>
<Typography variant="t1" fontWeight={500}>
Заголовок
</Typography>
<Typography
sx={{
mt: "7px",
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
color: "#9A9AAF",
}}
>
(необязательно)
</Typography>
<CustomTextField id="link-input2" backgroundColor="#F2F3F7" placeholder="Введите текст" sx={{ mt: "9px" }} />
</Paper>
<Box
sx={{
mt: upMd ? "38px" : "32px",
display: "flex",
gap: "8px",
alignItems: "center",
}}
>
<Switch checked={isAddUtm} onChange={(event, checked) => setIsAddUtm(checked)} />
<Typography variant="h4">Добавление UTM</Typography>
</Box>
{isAddUtm && (
<Paper
sx={{
mt: "19px",
p: "20px",
pt: upMd ? undefined : "23px",
}}
>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
rowGap: "28.5px",
columnGap: "80px",
}}
>
<Typography variant="h3">
Создание ссылки
</Typography>
<Paper sx={{
mt: upMd ? "35px" : "35px",
p: "20px",
backgroundColor: "#7E2AEA",
}}>
<Typography variant="h4" color="white">
Создать новую ссылку
</Typography>
<CustomTextField
id="link-input1"
backgroundColor="#F2F3F7"
placeholder="Введите ссылку"
sx={{ mt: "30px" }}
/>
</Paper>
<Paper sx={{
mt: upMd ? "30px" : "25px",
p: "20px",
}}>
<Typography variant="t1" fontWeight={500}>
Заголовок
</Typography>
<Typography sx={{
mt: "7px",
fontWeight: 400,
fontSize: "14px",
lineHeight: "17px",
color: "#9A9AAF",
}}>
(необязательно)
</Typography>
<CustomTextField
id="link-input2"
backgroundColor="#F2F3F7"
placeholder="Введите текст"
sx={{ mt: "9px" }}
/>
</Paper>
<Box sx={{
mt: upMd ? "38px" : "32px",
display: "flex",
gap: "8px",
alignItems: "center",
}}>
<Switch checked={isAddUtm} onChange={(e, checked) => setIsAddUtm(checked)} />
<Typography variant="h4">
Добавление UTM
</Typography>
</Box>
{isAddUtm &&
<Paper sx={{
mt: "19px",
p: "20px",
pt: upMd ? undefined : "23px",
}}>
<Box sx={{
display: "flex",
flexWrap: "wrap",
rowGap: "28.5px",
columnGap: "80px",
}}>
<CustomTextField
id="company"
label="Компания"
placeholder="Компания"
backgroundColor="#F2F3F7"
sx={{
flexBasis: "100%",
}}
/>
<CustomTextField
id="Subdid1"
label="Subdid1"
placeholder="Subdid1"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid2"
label="Subdid2"
placeholder="Subdid2"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid3"
label="Subdid3"
placeholder="Subdid3"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid4"
label="Subdid4"
placeholder="Subdid4"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
</Box>
<Typography variant="t1" fontWeight={500} mt="30px">
Предварительный просмотр тега UTM
</Typography>
<Typography variant="t1" mt="13px">-</Typography>
</Paper>
}
<Typography variant="h4" mt={upMd ? "50px" : "50px"}>
Ваша короткая ссылка
</Typography>
<Button
variant="template"
sx={{
mt: "30px",
backgroundColor: "rgb(0 0 0 / 0)",
borderColor: "#7E2AEA",
color: "#7E2AEA",
p: "9px 31px",
}}
>Сделать ссылку короткой</Button>
<Paper sx={{
mt: "20px",
mb: "160px",
p: "20px",
}}>
<CustomTextField
disabled
id="new-link"
placeholder="Здесь будет ваша новая ссылка"
backgroundColor="#F2F3F7"
/>
</Paper>
<Paper sx={{
position: "fixed",
right: upMd ? "calc((max(100%, 1200px) - 1160px) / 2)" : "16px",
bottom: 0,
p: "20px",
width: upMd ? "max-content" : "min(100% - 32px, 280px)",
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}>
<Button
variant="template"
sx={{
p: "22px 50px",
}}
onClick={createLinkHandler}
>Создать ссылку</Button>
</Paper>
</Section>
</>
);
}
<CustomTextField
id="company"
label="Компания"
placeholder="Компания"
backgroundColor="#F2F3F7"
sx={{
flexBasis: "100%",
}}
/>
<CustomTextField
id="Subdid1"
label="Subdid1"
placeholder="Subdid1"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid2"
label="Subdid2"
placeholder="Subdid2"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid3"
label="Subdid3"
placeholder="Subdid3"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
<CustomTextField
id="Subdid4"
label="Subdid4"
placeholder="Subdid4"
backgroundColor="#F2F3F7"
sx={{
flexBasis: upMd ? "33%" : "100%",
flexGrow: 1,
}}
/>
</Box>
<Typography variant="t1" fontWeight={500} mt="30px">
Предварительный просмотр тега UTM
</Typography>
<Typography variant="t1" mt="13px">
-
</Typography>
</Paper>
)}
<Typography variant="h4" mt={upMd ? "50px" : "50px"}>
Ваша короткая ссылка
</Typography>
<Button
disableRipple
variant="template"
sx={{
mt: "30px",
backgroundColor: "rgb(0 0 0 / 0)",
borderColor: "#7E2AEA",
color: "#7E2AEA",
p: "9px 31px",
"&:hover": {
bgcolor: "background: rgba(0,0,0,.5)",
},
"&:active": {
bgcolor: "#581CA7",
color: "white",
},
}}
>
Сделать ссылку короткой
</Button>
<Paper
sx={{
mt: "20px",
mb: "160px",
p: "20px",
}}
>
<CustomTextField
disabled
id="new-link"
placeholder="Здесь будет ваша новая ссылка"
backgroundColor="#F2F3F7"
/>
</Paper>
<Paper
sx={{
position: "fixed",
right: upMd ? "calc((max(100%, 1200px) - 1160px) / 2)" : "16px",
bottom: 0,
p: "20px",
width: upMd ? "max-content" : "min(100% - 32px, 280px)",
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
}}
>
<Button
disableRipple
variant="template"
sx={{
p: "22px 50px",
"&:hover": {
bgcolor: "#944FEE",
},
"&:active": {
bgcolor: "white",
borderColor: "#944FEE",
color: "#944FEE",
},
}}
onClick={createLinkHandler}
>
Создать ссылку
</Button>
</Paper>
</Section>
</>
);
}

89
src/pages/Landing/AboutProject.tsx
View File

@ -2,48 +2,53 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import PenaLogoLight from "@root/kitUI/img/logo_pena_links_light";
import Section from "@root/kitUI/section";
export default function AboutProject() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Section
bg="#7E2AEA"
sxsect={{
pt: "102px",
pb: upMd? "94px":"98px",
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
}}
return (
<Section
bg="#7E2AEA"
sxsect={{
pt: "102px",
pb: upMd ? "94px" : "98px",
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
}}
>
<Box>
<Typography
variant="h3"
sx={{
color: "white",
maxWidth: "560px",
lineHeight: "118.5%",
}}
>
<Box>
<Typography
variant="h3"
sx={{
color: "white",
maxWidth: "560px",
lineHeight: "118.5%",
}}
>
О нашем проекте
</Typography>
<Typography color="white" variant="t1" maxWidth="560px" mt="23px">
Текст-заполнитель —
это текст, который имеет некоторые,т, который имеет некоторые характеристики реального письменного текста, но является. Текст-заполнитель —
это текст, который имеет некоторые характеристики реального письменного текста, но является
</Typography>
</Box>
{upMd && <PenaLogoLight blobColor="#5A1EA8" style={{
alignSelf: "end",
opacity: 0.5,
height: "62px",
minWidth: "160px",
width: "160px",
marginBottom: "3px",
}} />}
</Section>
);
}
О нашем проекте
</Typography>
<Typography color="white" variant="t1" maxWidth="560px" mt="23px">
Текст-заполнитель — это текст, который имеет некоторые,т, который имеет некоторые характеристики реального
письменного текста, но является. Текст-заполнитель — это текст, который имеет некоторые характеристики
реального письменного текста, но является
</Typography>
</Box>
{upMd && (
<PenaLogoLight
blobColor="#5A1EA8"
style={{
alignSelf: "end",
opacity: 0.5,
height: "62px",
minWidth: "160px",
width: "160px",
marginBottom: "3px",
}}
textColor="white"
/>
)}
</Section>
);
}

213
src/pages/Landing/Advantages/Advantages.tsx
View File

@ -1,110 +1,123 @@
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import PenaLogoLight from "@root/kitUI/img/logo_pena_links_light";
import Section from "@root/kitUI/section";
import BigNumberTextCard from "./BigNumberTextCard";
import LaptopWithTrails1 from "./LaptopWithTrails1";
import LaptopWithTrails2 from "./LaptopWithTrails2";
export default function Advantages() {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Section
bg="#333647"
sxsect={{
pt: "174px",
pb: upMd ? "117px" : "100px",
overflow: "hidden",
}}
return (
<Section
bg="#333647"
sxsect={{
pt: "174px",
pb: upMd ? "117px" : "100px",
overflow: "hidden",
}}
>
<Typography
variant="h3"
sx={{
color: "white",
lineHeight: "36px",
[theme.breakpoints.down("md")]: {
lineHeight: "118.5%",
},
}}
>
Преимущества системы от
<span
style={{
marginLeft: upMd ? "15px" : "12px",
}}
>
<Typography variant="h3" sx={{
color: "white",
lineHeight: "36px",
[theme.breakpoints.down('md')]: {
lineHeight: "118.5%",
}
}}>
Преимущества системы от
<span style={{
marginLeft: upMd ? "15px" : "12px",
}}>
<PenaLogoLight style={{
height: upMd ? "37px" : "31px",
width: upMd ? "96px" : "80px",
minWidth: upMd ? "96px" : "80px",
position: "relative",
verticalAlign: "text-bottom",
}} />
</span>
</Typography>
<Box sx={{
display: "flex",
flexDirection: upLg ? "row" : "column",
mt: upLg ? "143px" : "23px",
}}>
<LaptopWithTrails1 />
<Box sx={{
position: "relative",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: "45px",
flex: "1 1 0",
}}>
<BigNumberTextCard
number="1"
headerText="Удобный интерфейс"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="2"
headerText="Личный кабинет"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="3"
headerText="Гарантии"
text="Текст-заполнитель — это текст, который имеет "
/>
</Box>
</Box>
<Box sx={{
display: "flex",
flexDirection: upLg ? "row" : "column",
mt: upLg ? "210px" : "43px",
}}>
{!upLg && <LaptopWithTrails2 />}
<Box sx={{
position: "relative",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: "45px",
flex: "1 1 0",
}}>
<BigNumberTextCard
number="4"
headerText="Простая кастомизация"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="5"
headerText="Актуальная статистика"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="6"
headerText="Еще преимущество"
text="Текст-заполнитель — это текст, который имеет "
/>
</Box>
{upLg && <LaptopWithTrails2 />}
</Box>
</Section>
);
}
<PenaLogoLight
style={{
height: upMd ? "37px" : "31px",
width: upMd ? "96px" : "80px",
minWidth: upMd ? "96px" : "80px",
position: "relative",
verticalAlign: "text-bottom",
}}
textColor="white"
/>
</span>
</Typography>
<Box
sx={{
display: "flex",
flexDirection: upLg ? "row" : "column",
mt: upLg ? "143px" : "23px",
}}
>
<LaptopWithTrails1 />
<Box
sx={{
position: "relative",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: "45px",
flex: "1 1 0",
}}
>
<BigNumberTextCard
number="1"
headerText="Удобный интерфейс"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="2"
headerText="Личный кабинет"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard number="3" headerText="Гарантии" text="Текст-заполнитель — это текст, который имеет " />
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: upLg ? "row" : "column",
mt: upLg ? "210px" : "43px",
}}
>
{!upLg && <LaptopWithTrails2 />}
<Box
sx={{
position: "relative",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
gap: "45px",
flex: "1 1 0",
}}
>
<BigNumberTextCard
number="4"
headerText="Простая кастомизация"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="5"
headerText="Актуальная статистика"
text="Текст-заполнитель — это текст, который имеет "
/>
<BigNumberTextCard
number="6"
headerText="Еще преимущество"
text="Текст-заполнитель — это текст, который имеет "
/>
</Box>
{upLg && <LaptopWithTrails2 />}
</Box>
</Section>
);
}

61
src/pages/Landing/Advantages/LaptopWithTrails1.tsx
View File

@ -1,36 +1,41 @@
import { Box, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
import macbookImage1 from "@kitUI/img/landing/macbook1.png";
interface Props {
sx?: SxProps<Theme>;
sx?: SxProps<Theme>;
}
export default function LaptopWithTrails1({ sx }: Props) {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const isTablet = useMediaQuery(theme.breakpoints.up(1200));
const isMobile = useMediaQuery(theme.breakpoints.up(600));
return (
<Box sx={{
position: "relative",
transform: upLg ? "scale(1.149) translate(-10.95%, 13.5%)" : "scale(1.2)",
transformOrigin: upLg ? undefined : "50% 0",
maxHeight: upLg ? "350px" : undefined,
display: "flex",
alignItems: "center",
flex: "1.52 1.52 0",
mb: upLg ? undefined : "33px",
...sx,
}}>
<img
alt=""
src={macbookImage1}
style={{
position: "relative",
zIndex: 1,
width: "100%",
}}
/>
</Box>
);
}
return (
<Box
sx={{
position: "relative",
transform: upLg ? "scale(1.149) translate(-10.95%, 13.5%)" : "scale(1.2)",
transformOrigin: upLg ? undefined : "50% 0",
maxHeight: upLg ? "350px" : undefined,
display: "flex",
alignItems: "center",
flex: "1.52 1.52 0",
mb: upLg ? undefined : "33px",
ml: isMobile ? "44px" : "0" || isTablet ? "0" : "44px",
...sx,
}}
>
<img
alt=""
src={macbookImage1}
style={{
position: "relative",
zIndex: 1,
width: "100%",
}}
/>
</Box>
);
}

59
src/pages/Landing/Advantages/LaptopWithTrails2.tsx
View File

@ -1,35 +1,40 @@
import { Box, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
import macbookImage2 from "@kitUI/img/landing/macbook2.png";
interface Props {
sx?: SxProps<Theme>;
sx?: SxProps<Theme>;
}
export default function LaptopWithTrails2({ sx }: Props) {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const isTablet = useMediaQuery(theme.breakpoints.up(1200));
const isMobile = useMediaQuery(theme.breakpoints.up(600));
return (
<Box sx={{
position: "relative",
transform: upLg ? "scale(1.132) translate(10.85%, -3.3%)" : "scale(1.16)",
maxHeight: upLg ? "350px" : undefined,
display: "flex",
alignItems: "center",
mb: upLg ? undefined : "47px",
flex: "1.52 1.52 0" ,
...sx,
}}>
<img
alt=""
src={macbookImage2}
style={{
position: "relative",
zIndex: 1,
width: "100%",
}}
/>
</Box>
);
}
return (
<Box
sx={{
position: "relative",
transform: upLg ? "scale(1.132) translate(10.85%, -3.3%)" : "scale(1.16)",
maxHeight: upLg ? "350px" : undefined,
display: "flex",
alignItems: "center",
mb: upLg ? undefined : "47px",
flex: "1.52 1.52 0",
mr: isMobile ? "44px" : "0" || isTablet ? "0" : "44px",
...sx,
}}
>
<img
alt=""
src={macbookImage2}
style={{
position: "relative",
zIndex: 1,
width: "100%",
}}
/>
</Box>
);
}

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

@ -1,133 +1,149 @@
import { Box, FormControl, IconButton, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
import Section from "@root/kitUI/section";
import { useState } from "react";
import { Box, FormControl, IconButton, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
import ChainLinks from "./ChainLinks";
import StatisticsIcon from "./StatisticsIcon";
import Section from "@root/kitUI/section";
export default function Hero() {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const [linkField, setLinkField] = useState<string>("");
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const isMobile = useMediaQuery(theme.breakpoints.up(600));
const [linkField, setLinkField] = useState<string>("");
return (
<Section
bg="#333647"
sxsect={{
background: "linear-gradient(288.61deg, rgba(0, 0, 0, 0.35) 0.72%, rgba(0, 0, 0, 0) 77.86%), #333647",
pt: upLg ? "217px" : "17px",
pb: upLg ? "171px" : "60px",
}}
sxcont={{
position: "relative",
}}
return (
<Section
bg="#333647"
sxsect={{
background: "linear-gradient(288.61deg, rgba(0, 0, 0, 0.35) 0.72%, rgba(0, 0, 0, 0) 77.86%), #333647",
pt: upLg ? "217px" : "17px",
pb: upLg ? "171px" : "60px",
}}
sxcont={{
position: "relative",
}}
>
{!upLg && (
<Box
sx={{
display: "flex",
justifyContent: "center",
mt: isMobile ? "100px" : "0",
}}
>
{!upLg &&
<Box sx={{
display: "flex",
justifyContent: "center",
}}>
<ChainLinks style={{
width: "100%",
height: "100%",
maxHeight: "274px",
pointerEvents: "none",
}} />
</Box>
}
<Box sx={{
position: "relative",
zIndex: theme.zIndex.content,
mt: upLg ? undefined : "11px",
}}>
<Typography variant="h1" color="white" maxWidth="690px">
Управляйте вашими ссылками
</Typography>
<Typography
variant="t1"
sx={{
color: "white",
maxWidth: "681px",
mt: upLg ? "30px" : "20px",
}}
>
Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного текста, но является
</Typography>
<Box sx={{
mt: upLg ? "85px" : "40px",
display: "flex",
gap: "20px",
alignItems: "end",
maxWidth: "624px",
}}>
<Box sx={{
display: "flex",
flexDirection: "column",
gap: "8px",
flexGrow:1,
}}>
<Typography
variant="t1"
sx={{
color: "#C293FF",
fontWeight: 500,
maxWidth:"85%",
}}
>
Посмотрите статистику по вашей ссылке
</Typography>
<FormControl
variant="standard"
fullWidth
>
<TextField
id="link"
placeholder="Введите ссылку"
value={linkField}
onChange={e => setLinkField(e.target.value)}
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: "10px",
backgroundColor: "#2A2C3A",
color: "white",
"& fieldset": {
border: "1px solid #9A9AAF",
},
"&:hover fieldset": {
borderColor: "#5b5d6e",
},
"&.Mui-focused fieldset": {
borderColor: "#9A9AAF",
},
"& ::placeholder": {
color: "#9A9AAF",
opacity: 1,
},
"& input": {
p: "11px 20px",
}
},
}}
/>
</FormControl>
</Box>
<IconButton sx={{
p: 0,
height: "44px",
width: "44px",
}}>
<StatisticsIcon />
</IconButton>
</Box>
</Box>
{upLg &&
<ChainLinks style={{
position: "absolute",
top: "-12px",
right: "15px",
zIndex: 0,
}} />
}
</Section>
);
}
<ChainLinks
style={{
width: "100%",
height: "100%",
maxHeight: "274px",
pointerEvents: "none",
}}
/>
</Box>
)}
<Box
sx={{
position: "relative",
zIndex: theme.zIndex.content,
mt: upLg ? undefined : "11px",
}}
>
<Typography variant="h1" color="white" maxWidth="690px">
Управляйте вашими ссылками
</Typography>
<Typography
variant="t1"
sx={{
color: "white",
maxWidth: "681px",
mt: upLg ? "30px" : "20px",
}}
>
Текст-заполнитель — это текст, который имеет некоторые характеристики реального письменного текста, но
является
</Typography>
<Box
sx={{
mt: upLg ? "85px" : "40px",
display: "flex",
gap: "20px",
alignItems: "end",
maxWidth: "624px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "8px",
flexGrow: 1,
}}
>
<Typography
variant="t1"
sx={{
color: "#C293FF",
fontWeight: 500,
maxWidth: "85%",
}}
>
Посмотрите статистику по вашей ссылке
</Typography>
<FormControl variant="standard" fullWidth>
<TextField
id="link"
placeholder="Введите ссылку"
value={linkField}
onChange={(e) => setLinkField(e.target.value)}
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: "10px",
backgroundColor: "#2A2C3A",
color: "white",
"& fieldset": {
border: "1px solid #9A9AAF",
},
"&:hover fieldset": {
borderColor: "#5b5d6e",
},
"&.Mui-focused fieldset": {
borderColor: "#944FEE",
},
"& ::placeholder": {
color: "#9A9AAF",
opacity: 1,
},
"& input": {
p: "11px 20px",
},
},
}}
/>
</FormControl>
</Box>
<IconButton
disableRipple
sx={{
p: 0,
height: "44px",
width: "44px",
}}
>
<StatisticsIcon />
</IconButton>
</Box>
</Box>
{upLg && (
<ChainLinks
style={{
position: "absolute",
top: "-12px",
right: "15px",
zIndex: 0,
}}
/>
)}
</Section>
);
}

56
src/pages/Landing/Hero/StatisticsIcon.tsx
View File

@ -1,26 +1,36 @@
import { Box } from "@mui/material";
export default function StatisticsIcon() {
return (
<Box sx={{
backgroundColor: "#7E2AEA",
width: "44px",
height: "44px",
borderRadius: "8px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
}}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 21.333H20.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M18.5 18V2" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M14 18V6" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M9.5 18V10" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M5 14V18" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
backgroundColor: "#7E2AEA",
width: "44px",
height: "44px",
borderRadius: "8px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover": {
bgcolor: "#944FEE",
},
"&:active": {
stroke: "#944FEE",
background: "white",
},
"&:active path": {
stroke: "#944FEE",
},
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 21.333H20.5" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M18.5 18V2" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M14 18V6" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M9.5 18V10" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
<path d="M5 14V18" stroke="white" strokeWidth="1.6" strokeLinecap="round" />
</svg>
</Box>
);
}

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

@ -1,71 +1,73 @@
import { Typography, useMediaQuery, useTheme } from "@mui/material";
import { Box } from "@mui/system";
import { Typography, useMediaQuery, useTheme, Box } from "@mui/material";
import Section from "@root/kitUI/section";
import cardImage1 from "@kitUI/img/landing/card1.png";
import cardImage2 from "@kitUI/img/landing/card2.png";
import cardImage3 from "@kitUI/img/landing/card3.png";
import ImageTextNumberCard from "./ImageTextNumberCard";
import NumberIcon from "@root/kitUI/Icons/NumberIcon";
const cardSx = {
minWidth: "300px",
maxWidth: "360px",
flex: "1 1 0",
};
import ImageTextNumberCard from "./ImageTextNumberCard";
export default function HowItWorks() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.up(1100));
const isMobile = useMediaQuery(theme.breakpoints.up(600));
return (
<Section
bg="#262836"
sxsect={{
pt: upMd ? "101px" : "100px",
mb: "-70px",
}}
>
<Typography
variant="h3"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>
Как работает сервис
</Typography>
<Box
sx={{
mt: upMd ? "60px" : "43px",
display: "flex",
flexWrap: 'wrap',
justifyContent: "space-evenly",
gap: upMd ? "40px" : "31px",
}}
>
<ImageTextNumberCard
icon={<NumberIcon number={1} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage1}
headerText="Создайте короткую ссылку"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
<ImageTextNumberCard
icon={<NumberIcon number={2} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage2}
headerText="Отслеживайте статистику"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
<ImageTextNumberCard
icon={<NumberIcon number={3} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage3}
headerText="Контролируйте процессы онлайн"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
</Box>
</Section>
);
}
const cardSx = {
minWidth: "300px",
maxWidth: isTablet ? "293px" : isMobile ? "0" : "360px",
flex: "1 1 0",
};
return (
<Section
bg="#262836"
sxsect={{
pt: upMd ? "101px" : "100px",
mb: "-70px",
}}
>
<Typography
variant="h3"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>
Как работает сервис
</Typography>
<Box
sx={{
mt: upMd ? "60px" : "43px",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-evenly",
gap: isTablet ? "40px" : "20px",
}}
>
<ImageTextNumberCard
icon={<NumberIcon number={1} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage1}
headerText="Создайте короткую ссылку"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
<ImageTextNumberCard
icon={<NumberIcon number={2} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage2}
headerText="Отслеживайте статистику"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
<ImageTextNumberCard
icon={<NumberIcon number={3} color="#FFFFFF" backgroundColor="#26283580" />}
image={cardImage3}
headerText="Контролируйте процессы онлайн"
text="Текст-заполнитель — это текст, который имеет некоторые характеристики "
sx={cardSx}
/>
</Box>
</Section>
);
}

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

@ -5,21 +5,20 @@ import Advantages from "./Advantages/Advantages";
import Profits from "./Profits/Profits";
import Tariffs from "./Tariffs/Tariffs";
import RegisterNow from "./RegisterNow";
import Footer from "@root/kitUI/footer";
export default function Landing() {
return (
<>
<Hero />
<AboutProject />
<HowItWorks />
<Advantages />
<Profits />
<Tariffs />
<RegisterNow />
<Footer />
</>
);
}
return (
<>
<Hero />
<AboutProject />
<HowItWorks />
<Advantages />
<Profits />
<Tariffs />
<RegisterNow />
<Footer />
</>
);
}

211
src/pages/Landing/Profits/Lights.tsx
View File

@ -1,61 +1,162 @@
import { CSSProperties } from "react";
interface Props {
style?: CSSProperties;
style?: CSSProperties;
}
export default function Lights({ style }: Props) {
return (
<svg width="196" height="175" viewBox="0 0 196 175" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
<path d="M148.919 117.806C148.832 118.245 149.047 118.688 149.446 118.891C149.845 119.094 150.33 119.008 150.634 118.679L194.734 71.0005C194.96 70.7563 195.05 70.4159 194.973 70.0922C194.897 69.7685 194.665 69.5038 194.354 69.3862L169.945 60.15L176.081 29.1944C176.168 28.7554 175.953 28.312 175.554 28.1089C175.155 27.9058 174.67 27.9924 174.366 28.321L130.266 75.9996C130.04 76.2437 129.95 76.5841 130.027 76.9078C130.103 77.2315 130.335 77.4962 130.646 77.6139L155.055 86.85L148.919 117.806Z" fill="url(#paint0_linear_522_580)" stroke="url(#paint1_linear_522_580)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M40.9831 173.858C40.9396 174.077 41.0473 174.299 41.2467 174.4C41.4461 174.502 41.6887 174.459 41.8406 174.294L101.279 110.033C101.392 109.911 101.437 109.741 101.399 109.579C101.36 109.417 101.244 109.285 101.089 109.226L67.5199 96.5232L75.9288 54.0972C75.9723 53.8777 75.8647 53.656 75.6652 53.5545C75.4658 53.4529 75.2232 53.4962 75.0713 53.6605L15.6329 117.922C15.52 118.044 15.4752 118.214 15.5133 118.376C15.5514 118.538 15.6675 118.67 15.823 118.729L49.392 131.432L40.9831 173.858Z" fill="url(#paint2_linear_522_580)" stroke="url(#paint3_linear_522_580)" strokeLinecap="round" strokeLinejoin="round" />
<path d="M98.4966 45.2711C98.4096 45.7101 98.6249 46.1535 99.0237 46.3566C99.4225 46.5597 99.9077 46.4731 100.212 46.1445L131.659 12.1451C131.885 11.901 131.975 11.5606 131.898 11.2369C131.822 10.9132 131.59 10.6485 131.279 10.5308L114.1 4.0305L118.428 -17.8056C118.515 -18.2446 118.3 -18.688 117.901 -18.8911C117.503 -19.0942 117.017 -19.0076 116.713 -18.679L85.2659 15.3204C85.0401 15.5645 84.9504 15.9049 85.0266 16.2286C85.1029 16.5523 85.3351 16.817 85.6461 16.9347L102.825 23.435L98.4966 45.2711Z" fill="url(#paint4_linear_522_580)" stroke="url(#paint5_linear_522_580)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.9188 60.8071C10.8324 61.2467 11.0489 61.6902 11.4487 61.8924C11.8485 62.0946 12.334 62.0062 12.6369 61.676L35.7369 36.4975C35.9609 36.2533 36.0494 35.914 35.9732 35.5915C35.897 35.269 35.666 35.0052 35.3564 34.8871L22.9438 30.1518L26.0812 14.1929C26.1676 13.7533 25.9511 13.3098 25.5513 13.1076C25.1515 12.9054 24.666 12.9938 24.3631 13.324L1.26313 38.5025C1.03912 38.7467 0.950604 39.086 1.02679 39.4085C1.10297 39.731 1.33396 39.9948 1.64356 40.1129L14.0562 44.8482L10.9188 60.8071Z" fill="url(#paint6_linear_522_580)" stroke="url(#paint7_linear_522_580)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M121.409 173.904C121.366 174.124 121.475 174.346 121.675 174.447C121.876 174.547 122.119 174.502 122.27 174.337L138.37 156.658C138.481 156.536 138.525 156.367 138.487 156.206C138.448 156.045 138.334 155.914 138.179 155.855L129.371 152.47L131.591 141.096C131.634 140.876 131.525 140.654 131.325 140.553C131.124 140.453 130.881 140.498 130.73 140.663L114.63 158.342C114.519 158.464 114.475 158.633 114.513 158.794C114.552 158.955 114.666 159.086 114.821 159.145L123.629 162.53L121.409 173.904Z" fill="url(#paint8_linear_522_580)" stroke="url(#paint9_linear_522_580)" strokeLinecap="round" strokeLinejoin="round" />
<defs>
<linearGradient id="paint0_linear_522_580" x1="134.5" y1="118" x2="173.136" y2="33.7566" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" />
</linearGradient>
<linearGradient id="paint1_linear_522_580" x1="134.5" y1="118" x2="173.136" y2="33.7566" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" />
</linearGradient>
<linearGradient id="paint2_linear_522_580" x1="3.5" y1="146" x2="72.7907" y2="60.411" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.38" />
</linearGradient>
<linearGradient id="paint3_linear_522_580" x1="3.5" y1="146" x2="72.7907" y2="60.411" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.38" />
</linearGradient>
<linearGradient id="paint4_linear_522_580" x1="97.3203" y1="59.0215" x2="116.047" y2="-14.6081" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient id="paint5_linear_522_580" x1="97.3203" y1="59.0215" x2="116.047" y2="-14.6081" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient id="paint6_linear_522_580" x1="5" y1="61" x2="35.2289" y2="2.11754" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient id="paint7_linear_522_580" x1="5" y1="61" x2="35.2289" y2="2.11754" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient id="paint8_linear_522_580" x1="111.614" y1="166.31" x2="138.507" y2="132.908" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.17" />
</linearGradient>
<linearGradient id="paint9_linear_522_580" x1="111.614" y1="166.31" x2="138.507" y2="132.908" gradientUnits="userSpaceOnUse">
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.17" />
</linearGradient>
</defs>
</svg>
);
}
return (
<svg width="196" height="175" viewBox="0 0 196 175" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
<path
d="M148.919 117.806C148.832 118.245 149.047 118.688 149.446 118.891C149.845 119.094 150.33 119.008 150.634 118.679L194.734 71.0005C194.96 70.7563 195.05 70.4159 194.973 70.0922C194.897 69.7685 194.665 69.5038 194.354 69.3862L169.945 60.15L176.081 29.1944C176.168 28.7554 175.953 28.312 175.554 28.1089C175.155 27.9058 174.67 27.9924 174.366 28.321L130.266 75.9996C130.04 76.2437 129.95 76.5841 130.027 76.9078C130.103 77.2315 130.335 77.4962 130.646 77.6139L155.055 86.85L148.919 117.806Z"
fill="url(#paint0_linear_522_580)"
stroke="url(#paint1_linear_522_580)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M40.9831 173.858C40.9396 174.077 41.0473 174.299 41.2467 174.4C41.4461 174.502 41.6887 174.459 41.8406 174.294L101.279 110.033C101.392 109.911 101.437 109.741 101.399 109.579C101.36 109.417 101.244 109.285 101.089 109.226L67.5199 96.5232L75.9288 54.0972C75.9723 53.8777 75.8647 53.656 75.6652 53.5545C75.4658 53.4529 75.2232 53.4962 75.0713 53.6605L15.6329 117.922C15.52 118.044 15.4752 118.214 15.5133 118.376C15.5514 118.538 15.6675 118.67 15.823 118.729L49.392 131.432L40.9831 173.858Z"
fill="url(#paint2_linear_522_580)"
stroke="url(#paint3_linear_522_580)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M98.4966 45.2711C98.4096 45.7101 98.6249 46.1535 99.0237 46.3566C99.4225 46.5597 99.9077 46.4731 100.212 46.1445L131.659 12.1451C131.885 11.901 131.975 11.5606 131.898 11.2369C131.822 10.9132 131.59 10.6485 131.279 10.5308L114.1 4.0305L118.428 -17.8056C118.515 -18.2446 118.3 -18.688 117.901 -18.8911C117.503 -19.0942 117.017 -19.0076 116.713 -18.679L85.2659 15.3204C85.0401 15.5645 84.9504 15.9049 85.0266 16.2286C85.1029 16.5523 85.3351 16.817 85.6461 16.9347L102.825 23.435L98.4966 45.2711Z"
fill="url(#paint4_linear_522_580)"
stroke="url(#paint5_linear_522_580)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.9188 60.8071C10.8324 61.2467 11.0489 61.6902 11.4487 61.8924C11.8485 62.0946 12.334 62.0062 12.6369 61.676L35.7369 36.4975C35.9609 36.2533 36.0494 35.914 35.9732 35.5915C35.897 35.269 35.666 35.0052 35.3564 34.8871L22.9438 30.1518L26.0812 14.1929C26.1676 13.7533 25.9511 13.3098 25.5513 13.1076C25.1515 12.9054 24.666 12.9938 24.3631 13.324L1.26313 38.5025C1.03912 38.7467 0.950604 39.086 1.02679 39.4085C1.10297 39.731 1.33396 39.9948 1.64356 40.1129L14.0562 44.8482L10.9188 60.8071Z"
fill="url(#paint6_linear_522_580)"
stroke="url(#paint7_linear_522_580)"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M121.409 173.904C121.366 174.124 121.475 174.346 121.675 174.447C121.876 174.547 122.119 174.502 122.27 174.337L138.37 156.658C138.481 156.536 138.525 156.367 138.487 156.206C138.448 156.045 138.334 155.914 138.179 155.855L129.371 152.47L131.591 141.096C131.634 140.876 131.525 140.654 131.325 140.553C131.124 140.453 130.881 140.498 130.73 140.663L114.63 158.342C114.519 158.464 114.475 158.633 114.513 158.794C114.552 158.955 114.666 159.086 114.821 159.145L123.629 162.53L121.409 173.904Z"
fill="url(#paint8_linear_522_580)"
stroke="url(#paint9_linear_522_580)"
strokeLinecap="round"
strokeLinejoin="round"
/>
<defs>
<linearGradient
id="paint0_linear_522_580"
x1="134.5"
y1="118"
x2="173.136"
y2="33.7566"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" />
</linearGradient>
<linearGradient
id="paint1_linear_522_580"
x1="134.5"
y1="118"
x2="173.136"
y2="33.7566"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" />
</linearGradient>
<linearGradient
id="paint2_linear_522_580"
x1="3.5"
y1="146"
x2="72.7907"
y2="60.411"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.38" />
</linearGradient>
<linearGradient
id="paint3_linear_522_580"
x1="3.5"
y1="146"
x2="72.7907"
y2="60.411"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.38" />
</linearGradient>
<linearGradient
id="paint4_linear_522_580"
x1="97.3203"
y1="59.0215"
x2="116.047"
y2="-14.6081"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient
id="paint5_linear_522_580"
x1="97.3203"
y1="59.0215"
x2="116.047"
y2="-14.6081"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient
id="paint6_linear_522_580"
x1="5"
y1="61"
x2="35.2289"
y2="2.11754"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient
id="paint7_linear_522_580"
x1="5"
y1="61"
x2="35.2289"
y2="2.11754"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#C08EFF" />
</linearGradient>
<linearGradient
id="paint8_linear_522_580"
x1="111.614"
y1="166.31"
x2="138.507"
y2="132.908"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.17" />
</linearGradient>
<linearGradient
id="paint9_linear_522_580"
x1="111.614"
y1="166.31"
x2="138.507"
y2="132.908"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7E2AEA" />
<stop offset="1" stopColor="#A56BF1" stopOpacity="0.17" />
</linearGradient>
</defs>
</svg>
);
}

370
src/pages/Landing/Profits/Profits.tsx
View File

@ -2,193 +2,219 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import Section from "@root/kitUI/section";
import Lights from "./Lights";
const infoBoxSx = {
display: "flex",
alignItems: "end",
textAlign: "center",
width: "100%",
p: "20px",
display: "flex",
alignItems: "end",
textAlign: "center",
width: "100%",
p: "20px",
};
export default function Profits() {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.up(1000));
const infoContainerSx = {
display: "flex",
flexDirection: "column",
justifyContent: "end",
gap: upLg ? "25px" : "15px",
alignItems: "center",
flex: "1 0 0",
};
console.log(upLg);
const infoText1 = <InfoText text="Отслеживание изменений активности" />;
const infoText2 = <InfoText text="Автоматизация процессов аналитики" />;
const infoText3 = <InfoText text="Какая-то еще выгодная выгода" />;
const infoContainerSx = {
display: "flex",
flexDirection: "column",
justifyContent: "end",
gap: upLg ? "25px" : "15px",
alignItems: "center",
flex: "1 0 0",
};
return (
<Section
bg="#262835"
sxsect={{
pb: upMd ? "100px" : "98px",
pt: upMd ? "100px" : "102px",
background: `
const infoText1 = <InfoText text="Отслеживание изменений активности" />;
const infoText2 = <InfoText text="Автоматизация процессов аналитики" />;
const infoText3 = <InfoText text="Какая-то еще выгодная выгода" />;
return (
<Section
bg="#262835"
sxsect={{
pb: upMd ? "100px" : "98px",
pt: upMd ? "100px" : "102px",
background: `
linear-gradient(284.12deg, rgba(0, 0, 0, 0.35) 3.47%, rgba(0, 0, 0, 0) 82.88%),
linear-gradient(0deg, #262835, #262835), #333647;
`,
}}
}}
>
<Typography
variant="h3"
sx={{
maxWidth: "480px",
color: "white",
lineHeight: "118.5%",
[theme.breakpoints.down("md")]: {
lineHeight: "118.5%",
},
}}
>
Выгода для бизнеса по мнению пользователей
</Typography>
<Box
sx={{
mt: upMd ? "75px" : "54px",
display: "flex",
gap: isTablet ? "100px" : "73px",
flexDirection: isTablet ? "row" : "column",
}}
>
<Box
sx={{
flex: "3.9 0 0",
display: "flex",
gap: "20px",
}}
>
<Typography variant="h3" sx={{
maxWidth: "480px",
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
[theme.breakpoints.down('md')]: {
lineHeight: "118.5%",
}
}}>
Выгода для бизнеса по мнению пользователей
}}
>
42%
</Typography>
<Box sx={{
mt: upMd ? "75px" : "54px",
display: "flex",
gap: upLg ? "100px" : "73px",
flexDirection: upLg ? "row" : "column",
}}>
<Box sx={{
flex: "3.9 0 0",
display: "flex",
gap: "20px",
}}>
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>42%</Typography>
<Box sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: upLg ? 0 : "5px",
height: upMd ? "300px" : "147px",
backgroundColor: "#7E2AEA",
position: "relative",
overflow: "hidden",
}}>
<Lights style={{
position: "absolute",
top: "0px",
left: "calc(50% - 2px)",
translate: "-50%",
width: "100%",
}} />
{upLg && infoText1}
</Box>
{!upLg && infoText1}
</Box>
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>32%</Typography>
<Box sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: upLg ? 0 : "5px",
height: upMd ? "230px" : "113px",
backgroundColor: "#515675",
}}>
{upLg && infoText2}
</Box>
{!upLg && infoText2}
</Box>
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>26%</Typography>
<Box sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: upLg ? 0 : "5px",
height: upMd ? "150px" : "73px",
backgroundColor: "#333647",
}}>
{upLg && infoText3}
</Box>
{!upLg && infoText3}
</Box>
</Box>
<Box sx={{
display: "flex",
flexDirection: "column",
flex: "2 0 0",
}}>
<Typography sx={{
color: "white",
fontWeight: 500,
fontSize: "24px",
lineHeight: "28px",
}}>
Заголовок
</Typography>
<Typography color="white" variant="t1" mt="20px" maxWidth={upLg ? "355px" : undefined}>
Текст-заполнитель — это текст, который имеет некоторые,т, который имеет некоторые характеристики реального письменного текста
</Typography>
<Typography
variant="t1"
sx={{
maxWidth: upLg ? "355px" : undefined,
color: "white",
mt: upLg ? "auto" : "40px",
ml: upLg ? undefined : "1.2em",
position: "relative",
"&::before": {
content: '"*"',
position: "absolute",
left: "-1em",
top: "0px",
color: "#C293FF",
}
}}
>
Текст-заполнитель — это текст, который имеет
</Typography>
</Box>
<Box
sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: isTablet ? 0 : "5px",
height: upMd ? "300px" : "147px",
backgroundColor: "#7E2AEA",
position: "relative",
overflow: "hidden",
}}
>
<Lights
style={{
position: "absolute",
top: "0px",
left: "calc(50% - 2px)",
translate: "-50%",
width: "100%",
}}
/>
{isTablet && infoText1}
</Box>
</Section>
);
}
function InfoText({ text }: {
text: string;
}) {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
return (
<Typography
color="white"
{!isTablet && infoText1}
</Box>
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>
32%
</Typography>
<Box
sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: isTablet ? 0 : "5px",
height: upMd ? "230px" : "113px",
backgroundColor: "#515675",
}}
>
{isTablet && infoText2}
</Box>
{!isTablet && infoText2}
</Box>
<Box sx={infoContainerSx}>
<Typography
variant="h4"
sx={{
color: "white",
lineHeight: "118.5%",
}}
>
26%
</Typography>
<Box
sx={{
...infoBoxSx,
borderRadius: upMd ? "16px" : "8px",
mt: isTablet ? 0 : "5px",
height: upMd ? "150px" : "73px",
backgroundColor: "#333647",
}}
>
{isTablet && infoText3}
</Box>
{!isTablet && infoText3}
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
flex: "2 0 0",
}}
>
<Typography
sx={{
color: "white",
fontWeight: 500,
fontSize: "24px",
lineHeight: "28px",
}}
>
Заголовок
</Typography>
<Typography color="white" variant="t1" mt="20px">
Текст-заполнитель — это текст, который имеет некоторые,т, который имеет некоторые характеристики реального
письменного текста
</Typography>
<Typography
variant="t1"
sx={{
fontWeight: "500",
fontSize: upLg ? undefined : "13px",
lineHeight: upLg ? undefined : "15px",
textAlign: "center",
maxWidth: upLg ? undefined : "110px",
maxWidth: isTablet ? "355px" : undefined,
color: "white",
mt: isTablet ? "auto" : "40px",
ml: isTablet ? undefined : "1.2em",
position: "relative",
"&::before": {
content: '"*"',
position: "absolute",
left: "-1em",
top: "0px",
color: "#C293FF",
},
}}
>
{text}
</Typography>
);
}
>
Текст-заполнитель — это текст, который имеет
</Typography>
</Box>
</Box>
</Section>
);
}
function InfoText({ text }: { text: string }) {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
return (
<Typography
color="white"
variant="t1"
sx={{
fontWeight: "500",
fontSize: upLg ? undefined : "13px",
lineHeight: upLg ? undefined : "15px",
textAlign: "center",
maxWidth: upLg ? undefined : "110px",
}}
>
{text}
</Typography>
);
}

89
src/pages/Landing/RegisterNow.tsx
View File

@ -1,44 +1,57 @@
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import Section from "@root/kitUI/section";
export default function RegisterNow() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Section
bg="#7E2AEA"
sxsect={{
py: "100px",
}}
return (
<Section
bg="#7E2AEA"
sxsect={{
py: "100px",
}}
>
<Typography variant="h1" color="white">
Начните управлять своим бизнесом уже сейчас
</Typography>
<Box
sx={{
display: "flex",
gap: "20px",
mt: upMd ? "50px" : "40px",
}}
>
<Button
disableRipple
variant="template"
sx={{
color: "black",
backgroundColor: "white",
p: "9px 31px",
"&:hover": {
bgcolor: "white",
},
}}
>
<Typography variant="h1" color="white">
Начните управлять своим бизнесом уже сейчас
</Typography>
<Box sx={{
display: "flex",
gap: "20px",
mt: upMd ? "50px" : "40px",
}}>
<Button
variant="template"
sx={{
color: "black",
backgroundColor: "white",
p: "9px 31px",
}}
>Войти</Button>
<Button
variant="template"
sx={{
color: "white",
backgroundColor: "none",
p: "9px 31px",
border: "1px solid #FFFFFF",
}}
>Регистрация</Button>
</Box>
</Section>
);
}
Войти
</Button>
<Button
disableRipple
variant="template"
sx={{
color: "white",
backgroundColor: "none",
p: "9px 31px",
border: "1px solid #FFFFFF",
"&:hover": {
bgColor: "#581CA7",
},
}}
>
Регистрация
</Button>
</Box>
</Section>
);
}

450
src/pages/Landing/Tariffs/Tariffs.tsx
View File

@ -1,212 +1,274 @@
import { Typography, Box, Button, List, ListItem, ListItemIcon, ListItemText, SxProps, Theme, useMediaQuery, useTheme } from "@mui/material";
import Section from "@root/kitUI/section";
import { ReactNode } from "react";
import {
Typography,
Box,
Button,
List,
ListItem,
ListItemIcon,
ListItemText,
SxProps,
Theme,
useMediaQuery,
useTheme,
} from "@mui/material";
import Section from "@root/kitUI/section";
import CheckIcon from "./CheckIcon";
import CircleIcon from "./CircleIcon";
import Trails from "./Trails";
const cardContainerSx = {
minWidth: "300px",
maxWidth: "360px",
flex: "1 1 0",
minWidth: "300px",
maxWidth: "360px",
flex: "1 1 0",
};
const cardSx = {
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "500px",
borderRadius: "12px",
p: "20px",
pt: "30px",
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "500px",
borderRadius: "12px",
p: "20px",
pt: "30px",
};
export default function Tariffs() {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("lg"));
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const isTablet = useMediaQuery(theme.breakpoints.up(1000));
return (
<Section
bg="#333647"
sxsect={{
pt: "100px",
pb: upMd ? "100px" : "89px",
}}
return (
<Section
bg="#333647"
sxsect={{
pt: "100px",
pb: upMd ? "100px" : "89px",
}}
>
<Typography
sx={{
color: "white",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}
>
Наши тарифы
</Typography>
<Box
sx={{
mt: upMd ? "75px" : "85px",
display: "flex",
flexWrap: "wrap",
justifyContent: "space-evenly",
gap: isTablet ? "40px" : "20px",
}}
>
<Box
sx={{
...cardContainerSx,
order: upLg ? 1 : 2,
}}
>
<Typography sx={{
color: "white",
fontWeight: 500,
fontSize: '36px',
lineHeight: '43px',
}}>
Наши тарифы
<Box
sx={{
...cardSx,
backgroundColor: "#282937",
border: "1px solid #9A9AAF",
}}
>
<Typography variant="t1" color="white" fontWeight="500">
Платно
</Typography>
<Box sx={{
mt: upMd ? "75px" : "85px",
display: "flex",
flexWrap: 'wrap',
justifyContent: "space-evenly",
gap: upMd ? "40px" : "30px",
}}>
<Box sx={{
...cardContainerSx,
order: upLg ? 1 : 2,
}}>
<Box sx={{
...cardSx,
backgroundColor: "#282937",
border: "1px solid #9A9AAF",
}}>
<Typography variant="t1" color="white" fontWeight="500">Платно</Typography>
<Typography sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}>4 560 руб.</Typography>
<CustomList
sx={{
mt: "70px",
}}
icon={<CheckIcon bgcolor="#7E2AEA" lineColor="white" />}
items={[
"Доступ к полной статистике",
"Делигирование сокращателя на домен ",
"То же, что и в бесплатном тарифе",
]}
/>
<Button
variant="template"
sx={{
p: "9px 51.5px",
mt: "auto",
}}>Выбрать</Button>
</Box>
</Box>
<Box sx={{
...cardContainerSx,
position: "relative",
order: upLg ? 2 : 1,
}}>
<Trails style={{
position: "absolute",
top: "-64px",
left: "34px",
}} />
<Box sx={{
...cardSx,
backgroundColor: "#7E2AEA",
position: "relative",
}}>
<Typography variant="t1" color="white" fontWeight="500">Бесплатно</Typography>
<Typography sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}>0 руб.</Typography>
<CustomList
sx={{
mt: "70px",
}}
icon={<CheckIcon bgcolor="white" lineColor="#7E2AEA" />}
items={[
"Просмотр количества кликов",
"Сокращение, UTM-метки",
"Экспорт статистики",
"Пиксель",
]}
/>
<Button
variant="template"
sx={{
color: "black",
backgroundColor: "white",
p: "9px 51.5px",
mt: "auto",
}}
>Выбрать</Button>
</Box>
</Box>
<Box sx={{
...cardContainerSx,
order: 3,
}}>
<Box sx={{
...cardSx,
height: "auto",
}}>
<Typography variant="t1" color="#9B4FFD" fontWeight="500">Скоро</Typography>
<Typography sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}>В разработке</Typography>
<CustomList
sx={{
mt: "72px",
ml: "5px",
}}
icon={<CircleIcon />}
items={[
"Продажа коротких ссылок",
"Ручная генерация",
"Брендирование",
"Двойная ссылка",
]}
/>
</Box>
</Box>
</Box>
</Section>
);
<Typography
sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}
>
4 560 руб.
</Typography>
<CustomList
sx={{
mt: "70px",
}}
icon={<CheckIcon bgcolor="#7E2AEA" lineColor="white" />}
items={[
"Доступ к полной статистике",
"Делигирование сокращателя на домен ",
"То же, что и в бесплатном тарифе",
]}
/>
<Button
disableRipple
variant="template"
sx={{
p: "9px 51.5px",
mt: "auto",
"&:hover": {
border: "1px solid 944FEE",
bgcolor: "#944FEE",
},
"&:active": {
borderColor: "#944FEE",
bgcolor: "white",
color: "#944FEE",
},
}}
>
Выбрать
</Button>
</Box>
</Box>
<Box
sx={{
...cardContainerSx,
position: "relative",
order: upLg ? 2 : 1,
}}
>
<Trails
style={{
position: "absolute",
top: "-64px",
left: "34px",
}}
/>
<Box
sx={{
...cardSx,
backgroundColor: "#7E2AEA",
position: "relative",
}}
>
<Typography variant="t1" color="white" fontWeight="500">
Бесплатно
</Typography>
<Typography
sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}
>
0 руб.
</Typography>
<CustomList
sx={{
mt: "70px",
}}
icon={<CheckIcon bgcolor="white" lineColor="#7E2AEA" />}
items={["Просмотр количества кликов", "Сокращение, UTM-метки", "Экспорт статистики", "Пиксель"]}
/>
<Button
disableRipple
variant="template"
sx={{
color: "black",
backgroundColor: "white",
p: "9px 51.5px",
mt: "auto",
"&:hover": {
bgcolor: "white",
},
"&:active": {
bgcolor: "white",
},
}}
>
Выбрать
</Button>
</Box>
</Box>
<Box
sx={{
...cardContainerSx,
order: 3,
}}
>
<Box
sx={{
...cardSx,
height: "auto",
}}
>
<Typography variant="t1" color="#9B4FFD" fontWeight="500">
Скоро
</Typography>
<Typography
sx={{
color: "white",
mt: "30px",
fontWeight: 500,
fontSize: "36px",
lineHeight: "43px",
}}
>
В разработке
</Typography>
<CustomList
sx={{
mt: "72px",
ml: "5px",
}}
icon={<CircleIcon />}
items={["Продажа коротких ссылок", "Ручная генерация", "Брендирование", "Двойная ссылка"]}
/>
</Box>
</Box>
</Box>
</Section>
);
}
function CustomList({ items, sx, icon }: {
items: string[];
sx?: SxProps<Theme>;
icon: ReactNode;
}) {
return (
<List sx={{
color: "white",
width: "100%",
function CustomList({ items, sx, icon }: { items: string[]; sx?: SxProps<Theme>; icon: ReactNode }) {
return (
<List
sx={{
color: "white",
width: "100%",
p: 0,
display: "flex",
flexDirection: "column",
gap: "24px",
...sx,
}}
>
{items.map((text, index) => (
<ListItem
key={text}
sx={{
p: 0,
display: "flex",
flexDirection: "column",
gap: "24px",
...sx,
}}>
{items.map((text, index) => (
<ListItem
key={index}
sx={{
p: 0,
}}
>
<ListItemIcon sx={{
minWidth: "30px",
alignSelf: "start",
mt: "3px",
ml: "11px",
}}>
{icon}
</ListItemIcon>
<ListItemText
disableTypography
primary={<Typography variant="t1">{text}</Typography>}
sx={{
m: 0,
}}
/>
</ListItem>
))}
</List>
);
}
}}
>
<ListItemIcon
sx={{
minWidth: "30px",
alignSelf: "start",
mt: "3px",
ml: "11px",
}}
>
{icon}
</ListItemIcon>
<ListItemText
disableTypography
primary={<Typography variant="t1">{text}</Typography>}
sx={{
m: 0,
}}
/>
</ListItem>
))}
</List>
);
}

163
src/pages/MyLinks/LinkCard.tsx
View File

@ -1,89 +1,96 @@
import { MouseEventHandler, useState } from "react";
import { Typography, Button, Paper, SxProps, Theme, Box, IconButton } from "@mui/material";
import CustomTextField from "@root/kitUI/CustomTextField";
import CopyIcon from "@root/kitUI/Icons/CopyIcon";
import StatisticsIcon from "@root/kitUI/Icons/StatisticsIcon";
import { MouseEventHandler, useState } from "react";
interface Props {
link: {
id: string;
name: string;
link: string;
shortenedLink: string;
};
handleCopyClick?: MouseEventHandler<HTMLButtonElement>;
handleStatisticsClick?: MouseEventHandler<HTMLButtonElement>;
sx?: SxProps<Theme>;
link: {
id: string;
name: string;
link: string;
shortenedLink: string;
};
handleCopyClick?: MouseEventHandler<HTMLButtonElement>;
handleStatisticsClick?: MouseEventHandler<HTMLButtonElement>;
sx?: SxProps<Theme>;
}
export default function LinkCard({ link, handleCopyClick, handleStatisticsClick, sx }: Props) {
const [isOpened, setIsOpened] = useState<boolean>(false);
const [isOpened, setIsOpened] = useState<boolean>(false);
return (
<Paper
sx={{
p: "20px",
...sx,
}}
return (
<Paper
sx={{
p: "20px",
...sx,
}}
>
<Typography
variant="t1"
sx={{
fontWeight: 500,
minHeight: "calc(21.33px * 2)",
}}
>
{link.name}
</Typography>
<CustomTextField
multiline
maxRows={3}
disabled
value={link.link}
id={link.id}
inputColor="#4D4D4D"
sx={{ mt: "9px" }}
/>
<Button
disableRipple
variant="underlined"
onClick={() => setIsOpened((p) => !p)}
sx={{
mt: "30px",
mb: "3px",
"&:hover": {
bgcolor: "white",
},
}}
>
{`${isOpened ? "Скрыть" : "Показать"} сокращенную ссылку`}
</Button>
{isOpened && (
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
}}
>
<Typography
variant="t1"
sx={{
fontWeight: 500,
minHeight: "calc(21.33px * 2)",
}}
>
{link.name}
</Typography>
<CustomTextField
multiline
maxRows={3}
disabled
value={link.link}
id={link.id}
inputColor="#4D4D4D"
sx={{ mt: "9px" }}
/>
<Button
variant="underlined"
onClick={() => setIsOpened(p => !p)}
sx={{ mt: "30px", mb: "3px" }}
>
{`${isOpened ? "Скрыть" : "Показать"} сокращенную ссылку`}
</Button>
{isOpened &&
<Box sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
}}>
<Typography
variant="t1"
sx={{
mt: "10px",
overflowWrap: "anywhere",
}}
>{link.shortenedLink}</Typography>
<Box sx={{
alignSelf: "end",
display: "flex",
}}>
<IconButton
onClick={handleCopyClick}
sx={{ p: "5px" }}
>
<CopyIcon />
</IconButton>
<IconButton
onClick={handleStatisticsClick}
sx={{ p: "5px" }}
>
<StatisticsIcon />
</IconButton>
</Box>
</Box>
}
</Paper>
);
}
<Typography
variant="t1"
sx={{
mt: "10px",
overflowWrap: "anywhere",
}}
>
{link.shortenedLink}
</Typography>
<Box
sx={{
alignSelf: "end",
display: "flex",
}}
>
<IconButton disableRipple onClick={handleCopyClick} sx={{ p: "5px" }}>
<CopyIcon />
</IconButton>
<IconButton disableRipple onClick={handleStatisticsClick} sx={{ p: "5px" }}>
<StatisticsIcon />
</IconButton>
</Box>
</Box>
)}
</Paper>
);
}

142
src/pages/MyLinks/MyLinks.tsx
View File

@ -1,84 +1,86 @@
import { Typography, Box, useMediaQuery, useTheme, Pagination } from "@mui/material";
import Section from "@root/kitUI/section";
import { useState } from "react";
import { Typography, Box, useMediaQuery, useTheme, Pagination } from "@mui/material";
import Section from "@root/kitUI/section";
import ColumnLayout from "./ColumnLayout";
import LinkCard from "./LinkCard";
const links = createExampleLinks(12);
export default function MyLinks() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [currentPage, setCurrentPage] = useState<number>(0);
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [currentPage, setCurrentPage] = useState<number>(0);
const pagination = (
<Pagination
shape="rounded"
count={5}
page={currentPage + 1}
onChange={(e, value) => setCurrentPage(value - 1)}
/>
);
const pagination = (
<Pagination
shape="rounded"
count={5}
page={currentPage + 1}
onChange={(event, value) => setCurrentPage(value - 1)}
/>
);
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
pb: upMd ? "115px" : "20px",
}}
>
<Typography variant="h3">
Мои ссылки
</Typography>
{!upMd &&
<Box sx={{
display: "flex",
justifyContent: "center",
mt: "40px",
}}>
{pagination}
</Box>
}
<ColumnLayout sx={{
mt: !upMd ? "30px" : "40px",
}}>
{links.map((link) => (
<LinkCard
link={link}
key={link.id}
/>
))}
</ColumnLayout>
<Box sx={{
display: "flex",
justifyContent: upMd ? "end" : "center",
mt: "32px",
}}>
{pagination}
</Box>
</Section>
</>
);
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
pb: upMd ? "115px" : "20px",
}}
>
<Typography variant="h3">Мои ссылки</Typography>
{!upMd && (
<Box
sx={{
display: "flex",
justifyContent: "center",
mt: "40px",
}}
>
{pagination}
</Box>
)}
<ColumnLayout
sx={{
mt: !upMd ? "30px" : "40px",
}}
>
{links.map((link) => (
<LinkCard link={link} key={link.id} />
))}
</ColumnLayout>
<Box
sx={{
display: "flex",
justifyContent: upMd ? "end" : "center",
mt: "32px",
}}
>
{pagination}
</Box>
</Section>
</>
);
}
function createExampleLinks(amount: number): {
id: string;
name: string;
link: string;
shortenedLink: string;
id: string;
name: string;
link: string;
shortenedLink: string;
}[] {
const links = [];
const names = ["Без названия", "Без названия", "Пена", "ФармКорп", "Очень длинное название ссылки на две строки"];
for (let i = 0; i < amount; i++) {
links.push({
id: `link-field-${i}`,
name: names[Math.floor(Math.random() * names.length)],
link: "https://link.fynrods.ru/?p=cfii5ug6bi7pt6s4ihr0utm_medium=cpc&utm_source=yandex&utm_campaign=Y_Brand_Search_Rus%7C70301404",
shortenedLink: "https://link.fynrods.ru/?p=cfii5ug6bi7pt6s4ihr0utm_medium=cpc",
});
}
const links = [];
const names = ["Без названия", "Без названия", "Пена", "ФармКорп", "Очень длинное название ссылки на две строки"];
for (let index = 0; index < amount; index++) {
links.push({
id: `link-field-${index}`,
name: names[Math.floor(Math.random() * names.length)],
link: "https://link.fynrods.ru/?p=cfii5ug6bi7pt6s4ihr0utm_medium=cpc&utm_source=yandex&utm_campaign=Y_Brand_Search_Rus%7C70301404",
shortenedLink: "https://link.fynrods.ru/?p=cfii5ug6bi7pt6s4ihr0utm_medium=cpc",
});
}
return links;
}
return links;
}

121
src/pages/Stats/ChooseLink.tsx
View File

@ -3,62 +3,75 @@ import CustomTextField from "@root/kitUI/CustomTextField";
import CopyIcon from "@root/kitUI/Icons/CopyIcon";
import { MouseEventHandler } from "react";
interface Props {
sx?: SxProps<Theme>;
onChooseClick: MouseEventHandler<HTMLButtonElement>;
sx?: SxProps<Theme>;
onChooseClick: MouseEventHandler<HTMLButtonElement>;
}
export default function ChooseLink({ sx, onChooseClick }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
return (
<Paper sx={{
p: "20px",
...sx,
}}>
<Typography variant="h4">
Ваша сокращенная ссылка
</Typography>
<Box sx={{
mt: "30px",
display: "flex",
flexWrap: upMd ? undefined : "wrap",
justifyContent: "space-between",
alignItems: "center",
gap: upMd ? "4px" : "15px",
}}>
<CustomTextField
id="shortened-link"
placeholder="Выберите ссылку"
backgroundColor="#F2F3F7"
sx={{
width: "100%",
maxWidth: "670px",
flexGrow: 1,
flexBasis: upMd ? 0 : "100%",
order: 1,
}}
/>
<IconButton sx={{
order: upMd ? 2 : 3,
}}>
<CopyIcon />
</IconButton>
<Button
onClick={onChooseClick}
variant="template"
sx={{
p: "9px 31.5px",
ml: upMd ? "auto" : undefined,
flexGrow: 0,
order: upMd ? 3 : 2,
}}
>
Выбрать ссылку
</Button>
</Box>
</Paper>
);
}
return (
<Paper
sx={{
p: "20px",
...sx,
}}
>
<Typography variant="h4">Ваша сокращенная ссылка</Typography>
<Box
sx={{
mt: "30px",
display: "flex",
flexWrap: upMd ? undefined : "wrap",
justifyContent: "space-between",
alignItems: "center",
gap: upMd ? "4px" : "15px",
}}
>
<CustomTextField
id="shortened-link"
placeholder="Выберите ссылку"
backgroundColor="#F2F3F7"
sx={{
width: "100%",
maxWidth: "670px",
flexGrow: 1,
flexBasis: upMd ? 0 : "100%",
order: 1,
}}
/>
<IconButton
disableRipple
sx={{
order: upMd ? 2 : 3,
}}
>
<CopyIcon />
</IconButton>
<Button
disableRipple
onClick={onChooseClick}
variant="template"
sx={{
p: "9px 31.5px",
ml: upMd ? "auto" : undefined,
flexGrow: 0,
order: upMd ? 3 : 2,
"&:hover": {
bgcolor: "#944FEE",
},
"&:active": {
bgcolor: "white",
borderColor: "#944FEE",
color: "#944FEE",
},
}}
>
Выбрать ссылку
</Button>
</Box>
</Paper>
);
}

83
src/pages/Stats/CustomSelect.tsx
View File

@ -2,42 +2,47 @@ import { Select, SelectChangeEvent } from "@mui/material";
import { ReactNode } from "react";
import SelectArrowIcon from "./SelectArrowIcon";
interface Props {
children: ReactNode;
id: string;
value: string;
onChange: (e: SelectChangeEvent) => void;
children: ReactNode;
id: string;
value: string;
onChange: (e: SelectChangeEvent) => void;
}
export default function CustomSelect({ children, id, onChange, value }: Props) {
return (
<Select
id={id}
variant="outlined"
displayEmpty
value={value}
onChange={onChange}
sx={{
color: "#7E2AEA",
backgroundColor: "white",
borderRadius: "8px",
"& fieldset": {
border: "none",
},
"& .MuiOutlinedInput-input": {
fontSize: "18px",
minHeight: "0 !important",
lineHeight: "24px",
pl: "33px",
pr: "56px !important",
py: "10px",
},
"& .MuiSelect-icon": {
right: "24px",
},
boxShadow: `
return (
<Select
id={id}
variant="outlined"
displayEmpty
value={value}
onChange={onChange}
sx={{
"&:hover": {
bgcolor: "#995BEE",
color: "white",
},
"&:hover path": {
stroke: "white",
},
color: "#7E2AEA",
backgroundColor: "white",
borderRadius: "8px",
"& fieldset": {
border: "none",
},
"& .MuiOutlinedInput-input": {
fontSize: "18px",
minHeight: "0 !important",
lineHeight: "24px",
pl: "33px",
pr: "56px !important",
py: "10px",
},
"& .MuiSelect-icon": {
right: "24px",
},
boxShadow: `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
@ -45,10 +50,10 @@ export default function CustomSelect({ children, id, onChange, value }: Props) {
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`,
}}
IconComponent={props => <SelectArrowIcon {...props} />}
>
{children}
</Select>
);
}
}}
IconComponent={(props) => <SelectArrowIcon {...props} />}
>
{children}
</Select>
);
}

46
src/pages/Stats/EditIcon.tsx
View File

@ -1,20 +1,32 @@
import { Box } from "@mui/material";
export default function EditIcon() {
return (
<Box sx={{
width: "44px",
height: "44px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
}}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M13.5137 3.80583C14.5869 2.73107 16.3274 2.73041 17.4013 3.80435L19.8932 6.29621C20.958 7.36099 20.969 9.08475 19.918 10.1631L10.6849 19.6364C9.97933 20.3603 9.01167 20.7684 8.00124 20.7684L5.24909 20.7683C3.96984 20.7682 2.94823 19.7018 3.00203 18.4228L3.12019 15.6137C3.15968 14.6747 3.54996 13.7847 4.2138 13.1198L13.5137 3.80583ZM16.3415 4.86582C15.8533 4.37766 15.0622 4.37796 14.5744 4.86649L12.9113 6.53209L17.1911 10.8119L18.8446 9.11536C19.3224 8.62519 19.3173 7.84166 18.8333 7.35767L16.3415 4.86582ZM5.27446 14.1805L11.8514 7.59355L16.144 11.8862L9.61148 18.5886C9.18816 19.0229 8.60756 19.2678 8.0013 19.2678L5.24916 19.2677C4.82274 19.2677 4.4822 18.9122 4.50014 18.4859L4.61829 15.6768C4.64199 15.1134 4.87616 14.5794 5.27446 14.1805ZM20.5148 20.6951C20.9289 20.6951 21.2645 20.3592 21.2645 19.9448C21.2645 19.5304 20.9289 19.1945 20.5148 19.1945H14.3931C13.9791 19.1945 13.6434 19.5304 13.6434 19.9448C13.6434 20.3592 13.9791 20.6951 14.3931 20.6951H20.5148Z" fill="#7E2AEA" />
</svg>
</Box>
);
}
return (
<Box
sx={{
width: "44px",
height: "44px",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"&:hover": {
bgcolor: "#995DED",
borderRadius: "8px",
},
"&:hover path": {
fill: "white",
},
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.5137 3.80583C14.5869 2.73107 16.3274 2.73041 17.4013 3.80435L19.8932 6.29621C20.958 7.36099 20.969 9.08475 19.918 10.1631L10.6849 19.6364C9.97933 20.3603 9.01167 20.7684 8.00124 20.7684L5.24909 20.7683C3.96984 20.7682 2.94823 19.7018 3.00203 18.4228L3.12019 15.6137C3.15968 14.6747 3.54996 13.7847 4.2138 13.1198L13.5137 3.80583ZM16.3415 4.86582C15.8533 4.37766 15.0622 4.37796 14.5744 4.86649L12.9113 6.53209L17.1911 10.8119L18.8446 9.11536C19.3224 8.62519 19.3173 7.84166 18.8333 7.35767L16.3415 4.86582ZM5.27446 14.1805L11.8514 7.59355L16.144 11.8862L9.61148 18.5886C9.18816 19.0229 8.60756 19.2678 8.0013 19.2678L5.24916 19.2677C4.82274 19.2677 4.4822 18.9122 4.50014 18.4859L4.61829 15.6768C4.64199 15.1134 4.87616 14.5794 5.27446 14.1805ZM20.5148 20.6951C20.9289 20.6951 21.2645 20.3592 21.2645 19.9448C21.2645 19.5304 20.9289 19.1945 20.5148 19.1945H14.3931C13.9791 19.1945 13.6434 19.5304 13.6434 19.9448C13.6434 20.3592 13.9791 20.6951 14.3931 20.6951H20.5148Z"
fill="#7E2AEA"
/>
</svg>
</Box>
);
}

201
src/pages/Stats/Stats.tsx
View File

@ -9,110 +9,109 @@ import ChooseLink from "./ChooseLink";
import LinkStatTable from "./LinkStatTable";
import FilterIcon from "./FilterIcon";
const showTypeValues = ["Показать все", "Type value 2", "Type value 1", "Type value 3"] as const;
type ShowType = (typeof showTypeValues)[number];
const showTypeValues = [
"Показать все",
"Type value 2",
"Type value 1",
"Type value 3",
] as const;
type ShowType = typeof showTypeValues[number];
const filterValues = [
"Фильтр",
"Filter value 1",
"Filter value 2",
"Filter value 3",
] as const;
type FilterTypes = typeof filterValues[number];
const filterValues = ["Фильтр", "Filter value 1", "Filter value 2", "Filter value 3"] as const;
type FilterTypes = (typeof filterValues)[number];
export default function Stats() {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [startDate, setStartDate] = useState<Dayjs | null>(dayjs("2023-02-09"));
const [endDate, setEndDate] = useState<Dayjs | null>(dayjs("2023-02-10"));
const [showTypeValue, setShowTypeValue] = useState<ShowType>("Показать все");
const [filterValue, setFilterValue] = useState<FilterTypes>("Фильтр");
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const [startDate, setStartDate] = useState<Dayjs | null>(dayjs("2023-02-09"));
const [endDate, setEndDate] = useState<Dayjs | null>(dayjs("2023-02-10"));
const [showTypeValue, setShowTypeValue] = useState<ShowType>("Показать все");
const [filterValue, setFilterValue] = useState<FilterTypes>("Фильтр");
function handleChooseLink() {
function handleChooseLink() {}
}
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
pb: upMd ? "100px" : "20px",
}}
return (
<>
<Section
sxsect={{
pt: upMd ? "50px" : "40px",
pb: upMd ? "100px" : "20px",
}}
>
<Typography variant="h3">Статистика</Typography>
<ChooseLink sx={{ mt: "35px" }} onChooseClick={handleChooseLink} />
<DateRangeSettings
startDate={startDate}
endDate={endDate}
onStartDateChange={(e) => setStartDate(e)}
onEndDateChange={(e) => setEndDate(e)}
sx={{
mt: upMd ? "30px" : "30px",
}}
/>
<Box
sx={{
mt: "40px",
display: "flex",
width: "100%",
gap: "20px",
}}
>
<CustomSelect
id="select-showall"
value={showTypeValue}
onChange={(e) => setShowTypeValue(e.target.value as ShowType)}
>
{showTypeValues.map((value) => (
<MenuItem key={value} value={value}>
{value}
</MenuItem>
))}
</CustomSelect>
{upMd ? (
<CustomSelect
id="select-filter"
value={filterValue}
onChange={(e) => setFilterValue(e.target.value as FilterTypes)}
>
<Typography variant="h3">
Статистика
</Typography>
<ChooseLink sx={{ mt: "35px" }} onChooseClick={handleChooseLink} />
<DateRangeSettings
startDate={startDate}
endDate={endDate}
onStartDateChange={e => setStartDate(e)}
onEndDateChange={e => setEndDate(e)}
sx={{
mt: upMd ? "30px" : "30px",
}}
/>
<Box sx={{
mt: "40px",
display: "flex",
width: "100%",
gap: "20px",
}}>
<CustomSelect
id="select-showall"
value={showTypeValue}
onChange={e => setShowTypeValue(e.target.value as ShowType)}
>
{showTypeValues.map(value =>
<MenuItem key={value} value={value}>{value}</MenuItem>
)}
</CustomSelect>
{upMd ?
<CustomSelect
id="select-filter"
value={filterValue}
onChange={e => setFilterValue(e.target.value as FilterTypes)}
>
{filterValues.map(value =>
<MenuItem key={value} value={value}>{value}</MenuItem>
)}
</CustomSelect>
:
<IconButton
component={Paper}
sx={{
p: 0,
ml: "5px",
borderRadius: "8px",
backgroundColor: "white",
}}
>
<FilterIcon />
</IconButton>
}
<IconButton
component={Paper}
sx={{
ml: "auto",
p: 0,
borderRadius: "8px",
backgroundColor: "white",
}}
>
<EditIcon />
</IconButton>
</Box>
<LinkStatTable sx={{
mt: upMd ? "20px" : "20px",
}} />
</Section>
</>
);
}
{filterValues.map((value) => (
<MenuItem key={value} value={value}>
{value}
</MenuItem>
))}
</CustomSelect>
) : (
<IconButton
disableRipple
component={Paper}
sx={{
p: 0,
ml: "5px",
borderRadius: "8px",
backgroundColor: "white",
"&:hover": {
bgcolor: "#995DED",
},
}}
>
<FilterIcon />
</IconButton>
)}
<IconButton
disableRipple
component={Paper}
sx={{
ml: "auto",
p: 0,
borderRadius: "8px",
backgroundColor: "white",
}}
>
<EditIcon />
</IconButton>
</Box>
<LinkStatTable
sx={{
mt: upMd ? "20px" : "20px",
}}
/>
</Section>
</>
);
}

411
src/theme.ts
View File

@ -1,133 +1,133 @@
import { createTheme } from "@mui/material";
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
template: true;
underlined: true;
}
declare module "@mui/material/Button" {
interface ButtonPropsVariantOverrides {
template: true;
underlined: true;
}
}
declare module '@mui/material/styles/zIndex.d' {
interface ZIndex {
bubbles: number,
content: number,
header: number,
}
declare module "@mui/material/styles/zIndex.d" {
interface ZIndex {
bubbles: number;
content: number;
header: number;
}
}
declare module '@mui/material/Typography' {
interface TypographyPropsVariantOverrides {
t1: true;
}
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
t1: true;
}
}
const theme = createTheme({
palette: {
background: {
default: "#F2F3F7",
}
palette: {
background: {
default: "#F2F3F7",
},
breakpoints: {
values: {
xs: 460,
sm: 600,
md: 680,
lg: 900,
xl: 1000,
}
},
typography: {
fontFamily: 'Rubik',
},
breakpoints: {
values: {
xs: 460,
sm: 600,
md: 680,
lg: 900,
xl: 1000,
},
},
typography: {
fontFamily: "Rubik",
},
components: {
MuiButton: {
variants: [
{
props: {
variant: "template"
},
style: {
background: '#7E2AEA',
border: '1px solid #7E2AEA',
borderRadius: '8px',
padding: '15px 56px',
textTransform: 'none',
color: '#ffffff',
fontWeight: 400,
fontSize: '18px',
lineHeight: '24px'
},
},
{
props: {
variant: "underlined"
},
style: {
color: "#7E2AEA",
padding: 0,
textTransform: "none",
textDecoration: "underline",
textUnderlineOffset: "7px",
fontSize: "16px",
lineHeight: "20px",
}
}
],
components: {
MuiButton: {
variants: [
{
props: {
variant: "template",
},
style: {
background: "#7E2AEA",
border: "1px solid #7E2AEA",
borderRadius: "8px",
padding: "15px 56px",
textTransform: "none",
color: "#ffffff",
fontWeight: 400,
fontSize: "18px",
lineHeight: "24px",
},
},
MuiTypography: {
variants: [
{
props: {
variant: 'h1'
},
style: {
color: '#000000',
fontWeight: 500,
fontSize: '70px',
lineHeight: '100%',
},
},
{
props: {
variant: 'h3'
},
style: {
color: '#000000',
fontWeight: 500,
fontSize: '36px',
lineHeight: '100%',
},
},
{
props: {
variant: 'h4'
},
style: {
color: '#000000',
fontWeight: 500,
fontSize: "24px",
lineHeight: "100%",
},
},
{
props: {
variant: 't1'
},
style: {
display: "block",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
},
},
],
{
props: {
variant: "underlined",
},
style: {
color: "#7E2AEA",
padding: 0,
textTransform: "none",
textDecoration: "underline",
textUnderlineOffset: "7px",
fontSize: "16px",
lineHeight: "20px",
},
},
MuiPaper: {
styleOverrides: {
root: {
backgroundColor: "white",
borderRadius: "12px",
boxShadow: `
],
},
MuiTypography: {
variants: [
{
props: {
variant: "h1",
},
style: {
color: "#000000",
fontWeight: 500,
fontSize: "70px",
lineHeight: "100%",
},
},
{
props: {
variant: "h3",
},
style: {
color: "#000000",
fontWeight: 500,
fontSize: "36px",
lineHeight: "100%",
},
},
{
props: {
variant: "h4",
},
style: {
color: "#000000",
fontWeight: 500,
fontSize: "24px",
lineHeight: "100%",
},
},
{
props: {
variant: "t1",
},
style: {
display: "block",
fontWeight: 400,
fontSize: "18px",
lineHeight: "21.33px",
},
},
],
},
MuiPaper: {
styleOverrides: {
root: {
backgroundColor: "white",
borderRadius: "12px",
boxShadow: `
0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
@ -135,69 +135,70 @@ const theme = createTheme({
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
`,
},
}
},
MuiSwitch: {
styleOverrides: {
root: {
color: "#7E2AEA",
height: "50px",
width: "69px",
"& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": {
backgroundColor: "#7E2AEA",
opacity: 1,
}
},
track: {
height: "12px",
alignSelf: "center",
backgroundColor: "#00000000",
opacity: 1,
border: "1px solid #9A9AAF",
},
thumb: {
height: "32px",
width: "32px",
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
},
},
MuiSwitch: {
styleOverrides: {
root: {
color: "#7E2AEA",
height: "50px",
width: "69px",
"& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": {
backgroundColor: "#7E2AEA",
opacity: 1,
},
},
track: {
height: "12px",
alignSelf: "center",
backgroundColor: "#00000000",
opacity: 1,
border: "1px solid #9A9AAF",
},
thumb: {
height: "32px",
width: "32px",
border: `6px solid #7E2AEA`,
backgroundColor: "white",
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD
`,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
boxShadow: `0px 0px 0px 3px white,
0px 4px 4px 3px #C3C8DD
`,
},
}
}
},
},
MuiPagination: {
styleOverrides: {
root: {
marginRight: "-15px",
marginLeft: "-15px",
"& .MuiPaginationItem-root": {
height: "30px",
width: "30px",
minWidth: "30px",
marginLeft: "5px",
marginRight: "5px",
backgroundColor: "white",
color: "black",
fontSize: "16px",
lineHeight: "20px",
fontWeight: 400,
borderRadius: "5px",
"&.Mui-selected": {
backgroundColor: "white",
color: "#7E2AEA",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "#ffffff55",
},
boxShadow: `
},
},
MuiPagination: {
styleOverrides: {
root: {
marginRight: "-15px",
marginLeft: "-15px",
"& .MuiPaginationItem-root": {
height: "30px",
width: "30px",
minWidth: "30px",
marginLeft: "5px",
marginRight: "5px",
backgroundColor: "white",
color: "black",
fontSize: "16px",
lineHeight: "20px",
fontWeight: 400,
borderRadius: "5px",
"&.Mui-selected": {
backgroundColor: "white",
color: "#7E2AEA",
fontWeight: 500,
},
"&:hover": {
backgroundColor: "#ffffff55",
},
boxShadow: `
0px 77.2727px 238.773px rgba(210, 208, 225, 0.24),
0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525),
0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066),
@ -205,46 +206,46 @@ const theme = createTheme({
0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343),
0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749)
`,
},
"& .MuiPaginationItem-previousNext": {
backgroundColor: "#7E2AEA",
color: "white",
marginLeft: "15px",
marginRight: "15px",
"&:hover": {
backgroundColor: "#5e00d8",
}
},
}
}
}
},
"& .MuiPaginationItem-previousNext": {
backgroundColor: "#7E2AEA",
color: "white",
marginLeft: "15px",
marginRight: "15px",
"&:hover": {
backgroundColor: "#5e00d8",
},
},
},
},
},
zIndex: {
bubbles: 0,
content: 1,
header: 10,
}
},
zIndex: {
bubbles: 0,
content: 1,
header: 10,
},
});
theme.typography.h1 = {
[theme.breakpoints.down('md')]: {
fontSize: "36px",
lineHeight: "100%",
}
[theme.breakpoints.down("md")]: {
fontSize: "36px",
lineHeight: "100%",
},
};
theme.typography.h3 = {
[theme.breakpoints.down('md')]: {
fontSize: "30px",
lineHeight: "100%",
}
[theme.breakpoints.down("md")]: {
fontSize: "30px",
lineHeight: "100%",
},
};
theme.typography.h4 = {
[theme.breakpoints.down('md')]: {
fontSize: "21px",
lineHeight: "100%",
}
[theme.breakpoints.down("md")]: {
fontSize: "21px",
lineHeight: "100%",
},
};
export default theme;
export default theme;

102
yarn.lock
View File

@ -1042,6 +1042,13 @@
dependencies:
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.21.0":
version "7.21.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
dependencies:
regenerator-runtime "^0.13.11"
"@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
version "7.20.7"
resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
@ -1206,18 +1213,11 @@
resolved "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz"
integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
"@date-io/core@^2.15.0", "@date-io/core@^2.16.0":
"@date-io/core@^2.16.0":
version "2.16.0"
resolved "https://registry.npmjs.org/@date-io/core/-/core-2.16.0.tgz"
integrity sha512-DYmSzkr+jToahwWrsiRA2/pzMEtz9Bq1euJwoOuYwuwIYXnZFtHajY2E6a1VNVDc9jP8YUXK1BvnZH9mmT19Zg==
"@date-io/date-fns@^2.15.0":
version "2.16.0"
resolved "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.16.0.tgz"
integrity sha512-bfm5FJjucqlrnQcXDVU5RD+nlGmL3iWgkHTq3uAZWVIuBu6dDmGa3m8a6zo2VQQpu8ambq9H22UyUpn7590joA==
dependencies:
"@date-io/core" "^2.16.0"
"@date-io/dayjs@^2.15.0":
version "2.16.0"
resolved "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.16.0.tgz"
@ -1225,20 +1225,6 @@
dependencies:
"@date-io/core" "^2.16.0"
"@date-io/luxon@^2.15.0":
version "2.16.1"
resolved "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.16.1.tgz"
integrity sha512-aeYp5K9PSHV28946pC+9UKUi/xMMYoaGelrpDibZSgHu2VWHXrr7zWLEr+pMPThSs5vt8Ei365PO+84pCm37WQ==
dependencies:
"@date-io/core" "^2.16.0"
"@date-io/moment@^2.15.0":
version "2.16.1"
resolved "https://registry.npmjs.org/@date-io/moment/-/moment-2.16.1.tgz"
integrity sha512-JkxldQxUqZBfZtsaCcCMkm/dmytdyq5pS1RxshCQ4fHhsvP5A7gSqPD22QbVXMcJydi3d3v1Y8BQdUKEuGACZQ==
dependencies:
"@date-io/core" "^2.16.0"
"@emotion/babel-plugin@^11.10.6":
version "11.10.6"
resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz"
@ -1715,6 +1701,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@kurkle/color@^0.3.0":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
"@leichtgewicht/ip-codec@^2.0.1":
version "2.0.4"
resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
@ -1833,6 +1824,17 @@
prop-types "^15.8.1"
react-is "^18.2.0"
"@mui/utils@^5.12.0":
version "5.12.0"
resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.12.0.tgz#284db48b36ac26f3d34076379072c1dc8aed1ad0"
integrity sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==
dependencies:
"@babel/runtime" "^7.21.0"
"@types/prop-types" "^15.7.5"
"@types/react-is" "^16.7.1 || ^17.0.0"
prop-types "^15.8.1"
react-is "^18.2.0"
"@mui/x-data-grid-generator@^5.17.5":
version "5.17.24"
resolved "https://registry.npmjs.org/@mui/x-data-grid-generator/-/x-data-grid-generator-5.17.24.tgz"
@ -1886,23 +1888,17 @@
prop-types "^15.8.1"
reselect "^4.1.6"
"@mui/x-date-pickers@^5.0.3":
version "5.0.19"
resolved "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.19.tgz"
integrity sha512-D8zFyFgwA6faPCTM//3SG17RqCegczKQS9wF/toemhjsP7Ps4ape/llHqowL/BZLbi14OXV0Ud10tfUyVP7Q/Q==
"@mui/x-date-pickers@^6.0.2":
version "6.3.0"
resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.3.0.tgz#398cfe5bb2cd21ab3900cb3b3708bb2e4af6295c"
integrity sha512-Qux/nRGb0HueZU4L0h1QEqmORCrpgLukWWhG1Im6cFCmLtZbBey/0JuAFRa+OgvIXgGktDt8SY/FYsRkfGt2TQ==
dependencies:
"@babel/runtime" "^7.18.9"
"@date-io/core" "^2.15.0"
"@date-io/date-fns" "^2.15.0"
"@date-io/dayjs" "^2.15.0"
"@date-io/luxon" "^2.15.0"
"@date-io/moment" "^2.15.0"
"@mui/utils" "^5.10.3"
"@babel/runtime" "^7.21.0"
"@mui/utils" "^5.12.0"
"@types/react-transition-group" "^4.4.5"
clsx "^1.2.1"
prop-types "^15.7.2"
prop-types "^15.8.1"
react-transition-group "^4.4.5"
rifm "^0.12.1"
"@mui/x-license-pro@5.17.12":
version "5.17.12"
@ -4029,6 +4025,25 @@ char-regex@^2.0.0:
resolved "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz"
integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
chart.js@^4.2.1:
version "4.3.0"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
dependencies:
"@kurkle/color" "^0.3.0"
chartjs-adapter-dayjs-4@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/chartjs-adapter-dayjs-4/-/chartjs-adapter-dayjs-4-1.0.4.tgz#4e810c99d9f28c07364381317d01f1bc504c5b2e"
integrity sha512-yy9BAYW4aNzPVrCWZetbILegTRb7HokhgospPoC3b5iZ5qdlqNmXts2KdSp6AqnjkPAp/YWyHDxLvIvwt5x81w==
chartjs-plugin-zoom@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.0.1.tgz#3db76f92a4741e46cb148cb966181c1b1a974abc"
integrity sha512-ogOmLu6e+Q7E1XWOCOz9YwybMslz9qNfGV2a+qjfmqJYpsw5ZMoRHZBUyW+NGhkpQ5PwwPA/+rikHpBZb7PZuA==
dependencies:
hammerjs "^2.0.8"
check-types@^11.1.1:
version "11.2.2"
resolved "https://registry.npmjs.org/check-types/-/check-types-11.2.2.tgz"
@ -6310,6 +6325,11 @@ gzip-size@^6.0.0:
dependencies:
duplexer "^0.1.2"
hammerjs@^2.0.8:
version "2.0.8"
resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
integrity sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==
handle-thing@^2.0.0:
version "2.0.1"
resolved "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz"
@ -9603,7 +9623,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -9768,6 +9788,11 @@ react-app-polyfill@^3.0.0:
regenerator-runtime "^0.13.9"
whatwg-fetch "^3.6.2"
react-chartjs-2@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
react-dev-utils@^12.0.1:
version "12.0.1"
resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz"
@ -10221,11 +10246,6 @@ reusify@^1.0.4:
resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
rifm@^0.12.1:
version "0.12.1"
resolved "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz"
integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==
rifm@^0.7.0:
version "0.7.0"
resolved "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz"