mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-02-04 01:32:54 +08:00
feat: create footer
This commit is contained in:
AykutSarac
parent
0f11d7e337
commit
48eb47b852
92
src/layout/Footer/index.tsx
Normal file
92
src/layout/Footer/index.tsx
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa";
|
||||||
|
import { FaXTwitter } from "react-icons/fa6";
|
||||||
|
import { JSONCrackLogo } from "../JsonCrackLogo";
|
||||||
|
|
||||||
|
export const Footer = () => {
|
||||||
|
return (
|
||||||
|
<Container mt={100}>
|
||||||
|
<Divider my={60} />
|
||||||
|
<Flex justify="space-between">
|
||||||
|
<Stack gap={4} visibleFrom="sm">
|
||||||
|
<JSONCrackLogo />
|
||||||
|
<Anchor href="mailto:contact@jsoncrack.com" fz="xs" c="dimmed">
|
||||||
|
contact@jsoncrack.com
|
||||||
|
</Anchor>
|
||||||
|
</Stack>
|
||||||
|
<Flex gap={60} visibleFrom="sm">
|
||||||
|
<Stack gap="xs">
|
||||||
|
<Text fz="sm" c="dimmed">
|
||||||
|
Product
|
||||||
|
</Text>
|
||||||
|
<Anchor
|
||||||
|
fz="sm"
|
||||||
|
c="dark"
|
||||||
|
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
|
||||||
|
>
|
||||||
|
VS Code
|
||||||
|
</Anchor>
|
||||||
|
<Anchor fz="sm" c="dark" href="/pricing">
|
||||||
|
Pricing
|
||||||
|
</Anchor>
|
||||||
|
<Anchor fz="sm" c="dark" href="/docs">
|
||||||
|
Docs
|
||||||
|
</Anchor>
|
||||||
|
</Stack>
|
||||||
|
<Stack gap="xs">
|
||||||
|
<Text fz="sm" c="dimmed">
|
||||||
|
Social
|
||||||
|
</Text>
|
||||||
|
<Flex gap="xs">
|
||||||
|
<Anchor
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
fz="sm"
|
||||||
|
href="https://www.linkedin.com/company/herowand"
|
||||||
|
>
|
||||||
|
<ThemeIcon variant="transparent" color="dark">
|
||||||
|
<FaLinkedin size={20} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</Anchor>
|
||||||
|
<Anchor aria-label="X" fz="sm" href="https://twitter.com/jsoncrack">
|
||||||
|
<ThemeIcon variant="transparent" color="dark">
|
||||||
|
<FaXTwitter size={20} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</Anchor>
|
||||||
|
<Anchor
|
||||||
|
aria-label="GitHub"
|
||||||
|
fz="sm"
|
||||||
|
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||||
|
>
|
||||||
|
<ThemeIcon variant="transparent" color="dark">
|
||||||
|
<FaGithub size={20} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</Anchor>
|
||||||
|
<Anchor aria-label="Discord" fz="sm" href="https://discord.com/invite/yVyTtCRueq">
|
||||||
|
<ThemeIcon variant="transparent" color="dark">
|
||||||
|
<FaDiscord size={20} />
|
||||||
|
</ThemeIcon>
|
||||||
|
</Anchor>
|
||||||
|
</Flex>
|
||||||
|
</Stack>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
<Flex gap="xl">
|
||||||
|
<Text fz="sm" c="dimmed">
|
||||||
|
© {dayjs().get("year")} JSON Crack.
|
||||||
|
</Text>
|
||||||
|
<Anchor fz="sm" c="dimmed" href="/legal/privacy">
|
||||||
|
<Text fz="sm" c="dimmed">
|
||||||
|
Privacy Policy
|
||||||
|
</Text>
|
||||||
|
</Anchor>
|
||||||
|
<Anchor fz="sm" c="dimmed" href="/legal/terms">
|
||||||
|
<Text fz="sm" c="dimmed">
|
||||||
|
Terms of Service
|
||||||
|
</Text>
|
||||||
|
</Anchor>
|
||||||
|
</Flex>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -2,6 +2,7 @@ import React from "react";
|
|||||||
import { MantineProvider } from "@mantine/core";
|
import { MantineProvider } from "@mantine/core";
|
||||||
import styled, { ThemeProvider } from "styled-components";
|
import styled, { ThemeProvider } from "styled-components";
|
||||||
import { lightTheme } from "src/constants/theme";
|
import { lightTheme } from "src/constants/theme";
|
||||||
|
import { Footer } from "../Footer";
|
||||||
import { Navbar } from "../Navbar";
|
import { Navbar } from "../Navbar";
|
||||||
|
|
||||||
const StyledLayoutWrapper = styled.div`
|
const StyledLayoutWrapper = styled.div`
|
||||||
@ -16,6 +17,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|||||||
<StyledLayoutWrapper>
|
<StyledLayoutWrapper>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
|
<Footer />
|
||||||
</StyledLayoutWrapper>
|
</StyledLayoutWrapper>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</MantineProvider>
|
</MantineProvider>
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Box, Burger, Button, Flex, Menu, Overlay } from "@mantine/core";
|
import { Box, Burger, Button, Flex, Overlay } from "@mantine/core";
|
||||||
import { useDisclosure } from "@mantine/hooks";
|
import { useDisclosure } from "@mantine/hooks";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { BiChevronDown } from "react-icons/bi";
|
|
||||||
import useUser from "src/store/useUser";
|
import useUser from "src/store/useUser";
|
||||||
import { JSONCrackLogo } from "../JsonCrackLogo";
|
import { JSONCrackLogo } from "../JsonCrackLogo";
|
||||||
|
|
||||||
@ -113,65 +112,8 @@ export const Navbar = () => {
|
|||||||
visibleFrom="sm"
|
visibleFrom="sm"
|
||||||
size="md"
|
size="md"
|
||||||
>
|
>
|
||||||
Embed
|
Docs
|
||||||
</Button>
|
</Button>
|
||||||
<Menu trigger="hover" offset={15} withArrow shadow="md">
|
|
||||||
<Menu.Target>
|
|
||||||
<Button
|
|
||||||
variant="subtle"
|
|
||||||
color="gray"
|
|
||||||
radius="md"
|
|
||||||
rightSection={<BiChevronDown size="18" />}
|
|
||||||
visibleFrom="sm"
|
|
||||||
size="md"
|
|
||||||
>
|
|
||||||
Legal
|
|
||||||
</Button>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Item component={Link} href="/legal/privacy" prefetch={false}>
|
|
||||||
Privacy Policy
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component={Link} href="/legal/terms" prefetch={false}>
|
|
||||||
Terms and Conditions
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component={Link} href="/legal/subscription-refund" prefetch={false}>
|
|
||||||
Subscription
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider />
|
|
||||||
<Menu.Item component="a" href="mailto:contact@jsoncrack.com">
|
|
||||||
contact@jsoncrack.com
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
<Menu trigger="hover" offset={15} withArrow shadow="md">
|
|
||||||
<Menu.Target>
|
|
||||||
<Button
|
|
||||||
variant="subtle"
|
|
||||||
color="gray"
|
|
||||||
radius="md"
|
|
||||||
rightSection={<BiChevronDown size="18" />}
|
|
||||||
visibleFrom="sm"
|
|
||||||
size="md"
|
|
||||||
>
|
|
||||||
Social
|
|
||||||
</Button>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Item component="a" href="https://twitter.com/jsoncrack">
|
|
||||||
𝕏 (Twitter)
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://discord.gg/yVyTtCRueq">
|
|
||||||
Discord
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://www.linkedin.com/company/herowand">
|
|
||||||
LinkedIn
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://github.com/AykutSarac/jsoncrack.com">
|
|
||||||
GitHub
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
</Left>
|
</Left>
|
||||||
<Right>
|
<Right>
|
||||||
{!hasSession && (
|
{!hasSession && (
|
||||||
@ -238,63 +180,6 @@ export const Navbar = () => {
|
|||||||
>
|
>
|
||||||
Pricing
|
Pricing
|
||||||
</Button>
|
</Button>
|
||||||
<Menu trigger="click" offset={15} withArrow shadow="md">
|
|
||||||
<Menu.Target>
|
|
||||||
<Button
|
|
||||||
variant="transparent"
|
|
||||||
color="dark"
|
|
||||||
radius="md"
|
|
||||||
rightSection={<BiChevronDown size="18" />}
|
|
||||||
>
|
|
||||||
Legal
|
|
||||||
</Button>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Item component={Link} href="/legal/privacy" prefetch={false}>
|
|
||||||
Privacy Policy
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component={Link} href="/legal/terms" prefetch={false}>
|
|
||||||
Terms and Conditions
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
component={Link}
|
|
||||||
href="/legal/subscription-refund"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
Subscription
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider />
|
|
||||||
<Menu.Item component="a" href="mailto:contact@jsoncrack.com">
|
|
||||||
contact@jsoncrack.com
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
<Menu trigger="click" offset={15} withArrow shadow="md">
|
|
||||||
<Menu.Target>
|
|
||||||
<Button
|
|
||||||
variant="transparent"
|
|
||||||
color="dark"
|
|
||||||
radius="md"
|
|
||||||
rightSection={<BiChevronDown size="18" />}
|
|
||||||
>
|
|
||||||
Social
|
|
||||||
</Button>
|
|
||||||
</Menu.Target>
|
|
||||||
<Menu.Dropdown>
|
|
||||||
<Menu.Item component="a" href="https://twitter.com/jsoncrack">
|
|
||||||
𝕏 (Twitter)
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://discord.gg/yVyTtCRueq">
|
|
||||||
Discord
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://www.linkedin.com/company/herowand">
|
|
||||||
LinkedIn
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item component="a" href="https://github.com/AykutSarac/jsoncrack.com">
|
|
||||||
GitHub
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Dropdown>
|
|
||||||
</Menu>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</Box>
|
</Box>
|
||||||
</Overlay>
|
</Overlay>
|
||||||
|
|||||||
@ -6,7 +6,6 @@ import {
|
|||||||
Badge,
|
Badge,
|
||||||
Button,
|
Button,
|
||||||
Center,
|
Center,
|
||||||
Divider,
|
|
||||||
Flex,
|
Flex,
|
||||||
Grid,
|
Grid,
|
||||||
Group,
|
Group,
|
||||||
@ -603,8 +602,7 @@ export const HomePage = () => {
|
|||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<PricingCards />
|
<PricingCards />
|
||||||
<Divider color="dimmed" my={80} w="70%" mx="auto" />
|
<Center mt={80}>
|
||||||
<Center>
|
|
||||||
<Stack align="center">
|
<Stack align="center">
|
||||||
<StyledHeroText>More than an editor.</StyledHeroText>
|
<StyledHeroText>More than an editor.</StyledHeroText>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user