mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-05-19 06:47:02 +02:00
2720cccb2b
* add: website redesign and optimization * fix: additional improvements in home, support, and doc * fix: typography and spacing * fix: moved praise to support page * fix: redesigned support page * feat: added new pillars and paragraphs * fix: changed table colors * fix: shortened home * fix: small improvements to support page * fix: optimized mobile version * feat: added Ad on mobile * Remove outdated color prop from CurrentVersion * Small format fixes * fix: removed prefixes in Slider.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed prefixes in Button.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed unused const Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: correctly renamed const Overlay Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: applied same button style to the Copy button Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed unnecessary prefix properties, fixed transition Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added non prefixed property in Stats.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added transition effect on mouse out as well Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed a repeated property in Input.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed home title Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed icons to icon Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> --------- Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
230 lines
6.1 KiB
TypeScript
230 lines
6.1 KiB
TypeScript
import { ArrowRight, Flash, Discord, Globe, DesignNib } from 'iconoir-react';
|
||
import { NextPage } from 'next';
|
||
import styled from 'styled-components';
|
||
import { HeroText } from '.';
|
||
import { HeroTextSecondary } from '.';
|
||
import { LargeButton } from '../components/Button';
|
||
import { DISCORD_LINK, SUPPORT_LINK } from '../lib/constants';
|
||
import { Footer } from '../components/Footer';
|
||
import { Header, HeaderProps } from '../components/Header';
|
||
import { HeaderSecondary } from '../components/HeaderSecondary';
|
||
import { Layout } from '../components/Layout';
|
||
import { media } from '../lib/responsive';
|
||
import { SEO } from '../components/SEO';
|
||
import { Body, Code, Heading2, Text18 } from '../components/Typography';
|
||
import { getHeaderProps } from '../lib/getHeaderProps';
|
||
import { Praise } from '../components/Praise';
|
||
|
||
interface SupportProps extends HeaderProps {}
|
||
const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
|
||
return (
|
||
<Layout>
|
||
<SEO title={'Donate - Our Mission'} />
|
||
<Header {...headerProps}/>
|
||
<HeaderSecondary>
|
||
<SupportHead>
|
||
<HeroText>Our Goal</HeroText>
|
||
<HeroTextSecondary>A free, complete, and open icon library.</HeroTextSecondary>
|
||
</SupportHead>
|
||
</HeaderSecondary>
|
||
<PageContainer>
|
||
<PillarsContainer>
|
||
<Pillar>
|
||
<PillarIcon R={"140"} G={"26"} B={"245"}><Flash /></PillarIcon>
|
||
<PillarTitle>Free</PillarTitle>
|
||
<PillarDescription>We want to give to developers and users high-quality free icons. Hassle-free.</PillarDescription>
|
||
</Pillar>
|
||
<Pillar>
|
||
<PillarIcon R={"72"} G={"88"} B={"255"}><DesignNib /></PillarIcon>
|
||
<PillarTitle>Complete</PillarTitle>
|
||
<PillarDescription>We’re aiming at having as much unique icons as possible.</PillarDescription>
|
||
</Pillar>
|
||
<Pillar>
|
||
<PillarIcon R={"65"} G={"209"} B={"255"}><Globe /></PillarIcon>
|
||
<PillarTitle>Ambitious</PillarTitle>
|
||
<PillarDescription>We want to help and be part of as many projects as possible.</PillarDescription>
|
||
</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>
|
||
<CallToAction as={'a'} href={SUPPORT_LINK} target={'_blank'}><span>Donate</span><ArrowRight /></CallToAction>
|
||
</WideSection>
|
||
<PraiseContainer>
|
||
<PraiseTitle>What our friends say</PraiseTitle>
|
||
<Praise />
|
||
</PraiseContainer>
|
||
<DonateContainer>
|
||
<DonateLeft>
|
||
<DonateHeader>Join us on Discord</DonateHeader>
|
||
<Text18>
|
||
Join the community and help us with your suggestions and feedback.
|
||
</Text18>
|
||
</DonateLeft>
|
||
<DonateRight>
|
||
<DonateButton
|
||
as={'a'}
|
||
href={DISCORD_LINK}
|
||
target={'_blank'}
|
||
rel={'noreferrer'}
|
||
>
|
||
<span>Join</span> <Discord />
|
||
</DonateButton>
|
||
</DonateRight>
|
||
</DonateContainer>
|
||
</PageContainer>
|
||
<Footer />
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
|
||
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)`
|
||
width: 100%;
|
||
margin: 20px 0 0 0;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
`;
|
||
|
||
const PillarDescription = styled(Body)`
|
||
margin: 0;
|
||
`;
|
||
|
||
const PillarIcon = styled.span<{ R?: string, G?: string, B?: string }>`
|
||
font-size: 18px;
|
||
padding: 20px 11px 6px 11px;
|
||
color: var(--white);
|
||
width: 100px;
|
||
height: 100px;
|
||
background: rgb(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B});
|
||
box-shadow: 2px 6px 20px rgba(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B}, 0.5);
|
||
border-radius: 18px;
|
||
`;
|
||
|
||
export const SupportHead = styled.div`
|
||
margin: 60px auto 40px auto;
|
||
${media.md} {
|
||
margin: 100px auto 80px auto;
|
||
}
|
||
`;
|
||
|
||
const PageContainer = styled.div`
|
||
max-width: 1336px;
|
||
margin: 75px auto 0 auto;
|
||
${media.lg} {
|
||
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%;
|
||
}
|
||
`;
|
||
const PraiseTitle = styled(Heading2)`
|
||
margin: 100px 0 80px 0;
|
||
text-align: center;
|
||
`;
|
||
const DonateLeft = styled.div`
|
||
max-width: 800px;
|
||
`;
|
||
export const DonateRight = styled.div`
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
> :not(:last-child) {
|
||
margin-right: 30px !important;
|
||
}
|
||
${media.md} {
|
||
margin-top: 0;
|
||
margin-left: 30px;
|
||
}
|
||
`;
|
||
export const DonateButton = styled(LargeButton)`
|
||
padding: 0 24px;
|
||
height: 50px;
|
||
`;
|
||
const CallToAction = styled(LargeButton)`
|
||
margin-top: 40px;
|
||
`;
|
||
export const DonateContainer = styled.div`
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
border: 1px solid var(--g6);
|
||
border-radius: 20px;
|
||
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;
|
||
color: var(--g0);
|
||
letter-spacing: -0.02em;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
${media.md} {
|
||
font-size: 22px;
|
||
}
|
||
`;
|
||
const PraiseContainer = styled.div`
|
||
margin: 50px 0 64px 0;
|
||
${media.md} {
|
||
margin: 140px 0 150px 0;
|
||
}
|
||
width: 100%;
|
||
`;
|
||
|
||
export default Support;
|
||
|
||
export async function getStaticProps() {
|
||
return {
|
||
props: getHeaderProps(),
|
||
};
|
||
}
|