mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +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 styled, { ThemeProvider } from "styled-components";
|
||||
import { lightTheme } from "src/constants/theme";
|
||||
import { Footer } from "../Footer";
|
||||
import { Navbar } from "../Navbar";
|
||||
|
||||
const StyledLayoutWrapper = styled.div`
|
||||
@ -16,6 +17,7 @@ const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
<StyledLayoutWrapper>
|
||||
<Navbar />
|
||||
{children}
|
||||
<Footer />
|
||||
</StyledLayoutWrapper>
|
||||
</ThemeProvider>
|
||||
</MantineProvider>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React from "react";
|
||||
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 styled from "styled-components";
|
||||
import { BiChevronDown } from "react-icons/bi";
|
||||
import useUser from "src/store/useUser";
|
||||
import { JSONCrackLogo } from "../JsonCrackLogo";
|
||||
|
||||
@ -113,65 +112,8 @@ export const Navbar = () => {
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
Embed
|
||||
Docs
|
||||
</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>
|
||||
<Right>
|
||||
{!hasSession && (
|
||||
@ -238,63 +180,6 @@ export const Navbar = () => {
|
||||
>
|
||||
Pricing
|
||||
</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>
|
||||
</Box>
|
||||
</Overlay>
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
Badge,
|
||||
Button,
|
||||
Center,
|
||||
Divider,
|
||||
Flex,
|
||||
Grid,
|
||||
Group,
|
||||
@ -603,8 +602,7 @@ export const HomePage = () => {
|
||||
</Grid>
|
||||
|
||||
<PricingCards />
|
||||
<Divider color="dimmed" my={80} w="70%" mx="auto" />
|
||||
<Center>
|
||||
<Center mt={80}>
|
||||
<Stack align="center">
|
||||
<StyledHeroText>More than an editor.</StyledHeroText>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user