2023-03-19 21:23:43 +01:00
|
|
|
|
import { ArrowRight, Flash, Discord, Globe, DesignNib } from 'iconoir-react';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { NextPage } from 'next';
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
import { HeroText } from '.';
|
2023-03-19 21:23:43 +01:00
|
|
|
|
import { HeroTextSecondary } from '.';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { LargeButton } from '../components/Button';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { DISCORD_LINK, SUPPORT_LINK } from '../lib/constants';
|
|
|
|
|
import { Footer } from '../components/Footer';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { Header, HeaderProps } from '../components/Header';
|
2023-03-19 21:23:43 +01:00
|
|
|
|
import { HeaderSecondary } from '../components/HeaderSecondary';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { Layout } from '../components/Layout';
|
2023-01-11 19:08:14 +01:00
|
|
|
|
import { media } from '../lib/responsive';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { SEO } from '../components/SEO';
|
2023-09-25 00:31:45 +02:00
|
|
|
|
import { Body, Heading2, Text18 } from '../components/Typography';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
import { getHeaderProps } from '../lib/getHeaderProps';
|
2023-03-19 21:23:43 +01:00
|
|
|
|
import { Praise } from '../components/Praise';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
|
|
|
|
|
interface SupportProps extends HeaderProps {}
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
|
|
|
|
|
return (
|
|
|
|
|
<Layout>
|
|
|
|
|
<SEO title={'Donate - Our Mission'} />
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<Header {...headerProps} />
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<HeaderSecondary>
|
|
|
|
|
<SupportHead>
|
|
|
|
|
<HeroText>Our Goal</HeroText>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<HeroTextSecondary>
|
|
|
|
|
A free, complete, and open icon library.
|
|
|
|
|
</HeroTextSecondary>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
</SupportHead>
|
|
|
|
|
</HeaderSecondary>
|
2022-08-28 20:12:09 +02:00
|
|
|
|
<PageContainer>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<PillarsContainer>
|
|
|
|
|
<Pillar>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarIcon $R={'140'} $G={'26'} $B={'245'}>
|
|
|
|
|
<Flash />
|
|
|
|
|
</PillarIcon>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<PillarTitle>Free</PillarTitle>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarDescription>
|
|
|
|
|
We want to give to developers and users high-quality free icons.
|
|
|
|
|
Hassle-free.
|
|
|
|
|
</PillarDescription>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
</Pillar>
|
|
|
|
|
<Pillar>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarIcon $R={'72'} $G={'88'} $B={'255'}>
|
|
|
|
|
<DesignNib />
|
|
|
|
|
</PillarIcon>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<PillarTitle>Complete</PillarTitle>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarDescription>
|
|
|
|
|
We’re aiming at having as much unique icons as possible.
|
|
|
|
|
</PillarDescription>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
</Pillar>
|
|
|
|
|
<Pillar>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarIcon $R={'65'} $G={'209'} $B={'255'}>
|
|
|
|
|
<Globe />
|
|
|
|
|
</PillarIcon>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<PillarTitle>Ambitious</PillarTitle>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PillarDescription>
|
|
|
|
|
We want to help and be part of as many projects as possible.
|
|
|
|
|
</PillarDescription>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
</Pillar>
|
|
|
|
|
</PillarsContainer>
|
|
|
|
|
<WideSection>
|
|
|
|
|
<Heading2>Become part of the project.</Heading2>
|
|
|
|
|
<Text18>
|
|
|
|
|
If you consider this library valuable for you and your projects,
|
|
|
|
|
support Iconoir with a donation to help us sustain costs and
|
|
|
|
|
development time.
|
|
|
|
|
</Text18>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<CallToAction as={'a'} href={SUPPORT_LINK} target={'_blank'}>
|
|
|
|
|
<span>Donate</span>
|
|
|
|
|
<ArrowRight />
|
|
|
|
|
</CallToAction>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
</WideSection>
|
|
|
|
|
<PraiseContainer>
|
2023-09-25 00:31:45 +02:00
|
|
|
|
<PraiseTitle>What our friends say</PraiseTitle>
|
|
|
|
|
<Praise />
|
|
|
|
|
</PraiseContainer>
|
2022-08-28 20:12:09 +02:00
|
|
|
|
<DonateContainer>
|
|
|
|
|
<DonateLeft>
|
|
|
|
|
<DonateHeader>Join us on Discord</DonateHeader>
|
|
|
|
|
<Text18>
|
2022-08-28 22:16:46 +02:00
|
|
|
|
Join the community and help us with your suggestions and feedback.
|
2022-08-28 20:12:09 +02:00
|
|
|
|
</Text18>
|
|
|
|
|
</DonateLeft>
|
|
|
|
|
<DonateRight>
|
2022-08-28 22:16:46 +02:00
|
|
|
|
<DonateButton
|
|
|
|
|
as={'a'}
|
|
|
|
|
href={DISCORD_LINK}
|
|
|
|
|
target={'_blank'}
|
|
|
|
|
rel={'noreferrer'}
|
|
|
|
|
>
|
2023-03-19 21:23:43 +01:00
|
|
|
|
<span>Join</span> <Discord />
|
2022-08-28 20:12:09 +02:00
|
|
|
|
</DonateButton>
|
|
|
|
|
</DonateRight>
|
|
|
|
|
</DonateContainer>
|
|
|
|
|
</PageContainer>
|
|
|
|
|
<Footer />
|
|
|
|
|
</Layout>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2023-03-19 21:23:43 +01:00
|
|
|
|
const PillarsContainer = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
${media.md} {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Pillar = styled.div`
|
|
|
|
|
height: fit-content;
|
|
|
|
|
width: 80%;
|
|
|
|
|
border: 1px solid var(--g6);
|
|
|
|
|
background: var(--white);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
display: flex-column;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 60px 10%;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
${media.md} {
|
|
|
|
|
width: 22%;
|
|
|
|
|
height: 180px;
|
|
|
|
|
padding: 60px 5%;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
transition: 0.2s;
|
|
|
|
|
&:hover {
|
|
|
|
|
transform: scale(1.05);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const PillarTitle = styled(Heading2)`
|
2023-09-25 04:43:10 +02:00
|
|
|
|
&&& {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 20px 0 0 0;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const PillarDescription = styled(Body)`
|
2023-09-25 04:43:10 +02:00
|
|
|
|
&&& {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
|
`;
|
|
|
|
|
|
2023-09-25 00:31:45 +02:00
|
|
|
|
const PillarIcon = styled.span<{ $R?: string; $G?: string; $B?: string }>`
|
2023-03-19 21:23:43 +01:00
|
|
|
|
font-size: 18px;
|
|
|
|
|
padding: 20px 11px 6px 11px;
|
|
|
|
|
color: var(--white);
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
2023-09-25 00:31:45 +02:00
|
|
|
|
background: rgb(${({ $R }) => $R}, ${({ $G }) => $G}, ${({ $B }) => $B});
|
|
|
|
|
box-shadow: 2px 6px 20px
|
|
|
|
|
rgba(${({ $R }) => $R}, ${({ $G }) => $G}, ${({ $B }) => $B}, 0.5);
|
2023-03-19 21:23:43 +01:00
|
|
|
|
border-radius: 18px;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export const SupportHead = styled.div`
|
|
|
|
|
margin: 60px auto 40px auto;
|
|
|
|
|
${media.md} {
|
|
|
|
|
margin: 100px auto 80px auto;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
const PageContainer = styled.div`
|
|
|
|
|
max-width: 1336px;
|
|
|
|
|
margin: 75px auto 0 auto;
|
|
|
|
|
${media.lg} {
|
2023-03-19 21:23:43 +01:00
|
|
|
|
margin: 110px auto 0 auto;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
const WideSection = styled.div`
|
|
|
|
|
width: 60%;
|
|
|
|
|
background: var(--g7);
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 4% 20% 10% 20%;
|
|
|
|
|
margin-top: 60px;
|
|
|
|
|
${media.md} {
|
|
|
|
|
padding: 80px 20%;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
}
|
|
|
|
|
`;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
const PraiseTitle = styled(Heading2)`
|
2023-09-25 04:43:10 +02:00
|
|
|
|
&&& {
|
|
|
|
|
margin: 100px 0 80px 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2022-08-28 20:12:09 +02:00
|
|
|
|
`;
|
|
|
|
|
const DonateLeft = styled.div`
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
`;
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
export const DonateRight = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
> :not(:last-child) {
|
2023-09-25 04:43:10 +02:00
|
|
|
|
margin-right: 30px;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
}
|
|
|
|
|
${media.md} {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2023-09-25 04:43:10 +02:00
|
|
|
|
const DonateButton = styled(LargeButton)`
|
|
|
|
|
&&& {
|
|
|
|
|
padding: 0 24px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
}
|
2022-08-28 20:12:09 +02:00
|
|
|
|
`;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
const CallToAction = styled(LargeButton)`
|
2023-09-25 04:43:10 +02:00
|
|
|
|
&&& {
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
padding: 0 35px;
|
|
|
|
|
${media.xs} {
|
|
|
|
|
padding: 0 70px;
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
|
`;
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
|
export const DonateContainer = styled.div`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: stretch;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
border: 1px solid var(--g6);
|
|
|
|
|
border-radius: 20px;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
padding: 30px;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
${media.md} {
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 40px 56px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
export const DonateHeader = styled.div`
|
|
|
|
|
font-size: 18px;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
color: var(--g0);
|
2022-08-28 20:12:09 +02:00
|
|
|
|
letter-spacing: -0.02em;
|
|
|
|
|
font-weight: 700;
|
2023-03-19 21:23:43 +01:00
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
${media.md} {
|
|
|
|
|
font-size: 22px;
|
|
|
|
|
}
|
|
|
|
|
`;
|
2023-10-29 00:33:17 +02:00
|
|
|
|
|
2023-03-19 21:23:43 +01:00
|
|
|
|
const PraiseContainer = styled.div`
|
|
|
|
|
margin: 50px 0 64px 0;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
${media.md} {
|
2023-03-19 21:23:43 +01:00
|
|
|
|
margin: 140px 0 150px 0;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
|
width: 100%;
|
2022-08-28 20:12:09 +02:00
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export default Support;
|
|
|
|
|
|
|
|
|
|
export async function getStaticProps() {
|
|
|
|
|
return {
|
|
|
|
|
props: getHeaderProps(),
|
|
|
|
|
};
|
|
|
|
|
}
|