Reorder
This commit is contained in:
parent
69beecb7bb
commit
e23bc2602f
2 changed files with 77 additions and 75 deletions
|
@ -25,80 +25,6 @@ import { useContext, useEffect, useState } from "react";
|
|||
import { Trans } from "react-i18next";
|
||||
import { AppContext } from "./_app";
|
||||
|
||||
const Container = styled("div")`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #000;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const SlideContainer = styled("div")`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const DesktopBox = styled("div")`
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #242424;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const MobileBox = styled("div")`
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 375px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SideBox = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 320px;
|
||||
`;
|
||||
|
||||
const TextContainer = (props: TypographyProps) => (
|
||||
<Typography color={"text.muted"} mt={2} mb={3} {...props} />
|
||||
);
|
||||
|
||||
const FeatureText = (props: TypographyProps) => (
|
||||
<Typography variant="h3" mt={4} {...props} />
|
||||
);
|
||||
|
||||
const Img = styled("img")`
|
||||
height: 250px;
|
||||
object-fit: contain;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
height: 180px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function LandingPage() {
|
||||
const router = useRouter();
|
||||
|
@ -223,6 +149,64 @@ export default function LandingPage() {
|
|||
);
|
||||
}
|
||||
|
||||
const Container = styled("div")`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #000;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
|
||||
const SlideContainer = styled("div")`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const DesktopBox = styled("div")`
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #242424;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const MobileBox = styled("div")`
|
||||
display: none;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
max-width: 375px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const SideBox = styled("div")`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 320px;
|
||||
`;
|
||||
|
||||
const Slideshow: React.FC = () => {
|
||||
return (
|
||||
<CarouselProvider
|
||||
|
@ -276,6 +260,24 @@ const Slideshow: React.FC = () => {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
const TextContainer = (props: TypographyProps) => (
|
||||
<Typography color={"text.muted"} mt={2} mb={3} {...props} />
|
||||
);
|
||||
|
||||
const FeatureText = (props: TypographyProps) => (
|
||||
<Typography variant="h3" mt={4} {...props} />
|
||||
);
|
||||
|
||||
const Img = styled("img")`
|
||||
height: 250px;
|
||||
object-fit: contain;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
height: 180px;
|
||||
}
|
||||
`;
|
||||
|
||||
const CustomDotGroup = styled(DotGroup)`
|
||||
margin-block-start: 2px;
|
||||
margin-block-end: 24px;
|
||||
|
|
|
@ -5,7 +5,7 @@ import { OverflowMenuContext } from "./context";
|
|||
|
||||
interface Iprops {
|
||||
onClick: () => void;
|
||||
color?: "primary" | "secondary" | "critical",
|
||||
color?: "primary" | "secondary" | "critical";
|
||||
startIcon?: React.ReactNode;
|
||||
endIcon?: React.ReactNode;
|
||||
keepOpenAfterClick?: boolean;
|
||||
|
|
Loading…
Reference in a new issue