2022-04-25 15:15:17 +02:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Container,
|
|
|
|
createStyles,
|
|
|
|
Group,
|
|
|
|
List,
|
|
|
|
Text,
|
|
|
|
ThemeIcon,
|
|
|
|
Title,
|
|
|
|
} from "@mantine/core";
|
|
|
|
import { NextLink } from "@mantine/next";
|
2022-10-09 22:30:32 +02:00
|
|
|
import getConfig from "next/config";
|
|
|
|
import Image from "next/image";
|
2022-04-25 15:15:17 +02:00
|
|
|
import { useRouter } from "next/router";
|
2022-10-14 11:59:40 +02:00
|
|
|
import { TbCheck } from "react-icons/tb";
|
2022-04-28 15:31:37 +02:00
|
|
|
import Meta from "../components/Meta";
|
2022-10-09 22:30:32 +02:00
|
|
|
import useUser from "../hooks/user.hook";
|
2022-10-10 23:39:07 +02:00
|
|
|
const { publicRuntimeConfig } = getConfig();
|
2022-10-09 22:30:32 +02:00
|
|
|
|
2022-04-25 15:15:17 +02:00
|
|
|
const useStyles = createStyles((theme) => ({
|
|
|
|
inner: {
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "space-between",
|
|
|
|
paddingTop: theme.spacing.xl * 4,
|
|
|
|
paddingBottom: theme.spacing.xl * 4,
|
|
|
|
},
|
|
|
|
|
|
|
|
content: {
|
|
|
|
maxWidth: 480,
|
|
|
|
marginRight: theme.spacing.xl * 3,
|
|
|
|
|
|
|
|
[theme.fn.smallerThan("md")]: {
|
|
|
|
maxWidth: "100%",
|
|
|
|
marginRight: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
title: {
|
|
|
|
color: theme.colorScheme === "dark" ? theme.white : theme.black,
|
|
|
|
fontSize: 44,
|
|
|
|
lineHeight: 1.2,
|
|
|
|
fontWeight: 900,
|
|
|
|
|
|
|
|
[theme.fn.smallerThan("xs")]: {
|
|
|
|
fontSize: 28,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
control: {
|
|
|
|
[theme.fn.smallerThan("xs")]: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
image: {
|
|
|
|
[theme.fn.smallerThan("md")]: {
|
|
|
|
display: "none",
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
highlight: {
|
|
|
|
position: "relative",
|
|
|
|
backgroundColor:
|
|
|
|
theme.colorScheme === "dark"
|
|
|
|
? theme.fn.rgba(theme.colors[theme.primaryColor][6], 0.55)
|
|
|
|
: theme.colors[theme.primaryColor][0],
|
|
|
|
borderRadius: theme.radius.sm,
|
|
|
|
padding: "4px 12px",
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
export default function Home() {
|
2022-10-09 22:30:32 +02:00
|
|
|
const user = useUser();
|
|
|
|
|
2022-04-25 15:15:17 +02:00
|
|
|
const { classes } = useStyles();
|
|
|
|
const router = useRouter();
|
2022-10-09 22:30:32 +02:00
|
|
|
if (user) {
|
2022-04-25 15:15:17 +02:00
|
|
|
router.replace("/upload");
|
2022-10-09 22:30:32 +02:00
|
|
|
} else if (publicRuntimeConfig.SHOW_HOME_PAGE == "false") {
|
2022-05-02 22:42:27 +02:00
|
|
|
router.replace("/auth/signIn");
|
2022-04-25 15:15:17 +02:00
|
|
|
} else {
|
|
|
|
return (
|
2022-04-28 15:31:37 +02:00
|
|
|
<>
|
|
|
|
<Meta title="Home" />
|
2022-04-25 15:15:17 +02:00
|
|
|
<Container>
|
|
|
|
<div className={classes.inner}>
|
|
|
|
<div className={classes.content}>
|
|
|
|
<Title className={classes.title}>
|
|
|
|
A <span className={classes.highlight}>self-hosted</span> <br />{" "}
|
|
|
|
file sharing platform.
|
|
|
|
</Title>
|
|
|
|
<Text color="dimmed" mt="md">
|
|
|
|
Do you really want to give your personal files in the hand of
|
|
|
|
third parties like WeTransfer?
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
<List
|
|
|
|
mt={30}
|
|
|
|
spacing="sm"
|
|
|
|
size="sm"
|
|
|
|
icon={
|
|
|
|
<ThemeIcon size={20} radius="xl">
|
2022-10-14 11:59:40 +02:00
|
|
|
<TbCheck size={12} />
|
2022-04-25 15:15:17 +02:00
|
|
|
</ThemeIcon>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<List.Item>
|
2022-10-10 23:39:07 +02:00
|
|
|
<div>
|
|
|
|
<b>Self-Hosted</b> - Host Pingvin Share on your own machine.
|
|
|
|
</div>
|
2022-04-25 15:15:17 +02:00
|
|
|
</List.Item>
|
|
|
|
<List.Item>
|
2022-10-10 23:39:07 +02:00
|
|
|
<div>
|
|
|
|
<b>Privacy</b> - Your files are your files and should never
|
|
|
|
get into the hands of third parties.
|
|
|
|
</div>
|
2022-04-25 15:15:17 +02:00
|
|
|
</List.Item>
|
|
|
|
<List.Item>
|
2022-10-10 23:39:07 +02:00
|
|
|
<div>
|
|
|
|
<b>No annoying file size limit</b> - Upload as big files as
|
|
|
|
you want. Only your hard drive will be your limit.
|
|
|
|
</div>
|
2022-04-25 15:15:17 +02:00
|
|
|
</List.Item>
|
|
|
|
</List>
|
|
|
|
|
|
|
|
<Group mt={30}>
|
|
|
|
<Button
|
|
|
|
component={NextLink}
|
|
|
|
href="/auth/signUp"
|
|
|
|
radius="xl"
|
|
|
|
size="md"
|
|
|
|
className={classes.control}
|
|
|
|
>
|
|
|
|
Get started
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
component={NextLink}
|
|
|
|
href="https://github.com/stonith404/pingvin-share"
|
|
|
|
target="_blank"
|
|
|
|
variant="default"
|
|
|
|
radius="xl"
|
|
|
|
size="md"
|
|
|
|
className={classes.control}
|
|
|
|
>
|
|
|
|
Source code
|
|
|
|
</Button>
|
|
|
|
</Group>
|
|
|
|
</div>
|
2022-04-28 15:15:30 +02:00
|
|
|
<Group className={classes.image} align="center">
|
|
|
|
<Image
|
2022-04-28 16:28:37 +02:00
|
|
|
src="/img/logo.svg"
|
2022-04-28 15:15:30 +02:00
|
|
|
alt="Pingvin Share Logo"
|
|
|
|
width={200}
|
|
|
|
height={200}
|
|
|
|
/>
|
|
|
|
</Group>
|
2022-04-25 15:15:17 +02:00
|
|
|
</div>
|
|
|
|
</Container>
|
2022-04-28 15:31:37 +02:00
|
|
|
</>
|
2022-04-25 15:15:17 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|