deblan-mirror/iconoir
deblan-mirror/iconoir
1
0
Fork 0
mirror of https://github.com/iconoir-icons/iconoir synced 2024-06-01 13:32:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

website: add new support CTA

Browse source
This commit is contained in:
Luca Burgio 2023-10-21 12:08:03 +02:00
parent b57280ed69
commit 850fafe579
2 changed files with 53 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
iconoir.com/lib/constants.ts
View file

@ -22,9 +22,9 @@ export const LIBRARY_LINKS = {
} as const;
export const SHARE_LINK =
'https://twitter.com/intent/tweet?text=Check%20out%20Iconoir%20by%20%40burgioluca%20and%20the%20amazing%20team%20with%20%40therealsammarks%20%F0%9F%94%A5&url=https%3A%2F%2Ficonoir.com' as const;
'https://twitter.com/intent/tweet?text=Your%20new%20free%20icons%20library.%20No%20premium%20options%20or%20signups%20by%20%40burgioluca%20&url=https%3A%2F%2Ficonoir.com' as const;
export const SUPPORT_LINK =
'https://opencollective.com/iconoir/donate' as const;
'https://opencollective.com/iconoir/donate?interval=month&amount=10' as const;
export const DISCORD_LINK = 'https://discord.gg/c3uzjx6k' as const;
export const FEEDBACK_LINK = 'https://forms.gle/3HvwVYow7D6T8zad7' as const;
export const PRIVACY_LINK =

56
iconoir.com/pages/index.tsx
View file

@ -13,7 +13,7 @@ import { Layout } from '../components/Layout';
import { media } from '../lib/responsive';
import { SEO } from '../components/SEO';
import { Stat, StatsContainer } from '../components/Stats';
import { Text18 } from '../components/Typography';
import { Text18,Text15 } from '../components/Typography';
import { getHeaderProps } from '../lib/getHeaderProps';
import { getAllIcons } from '../lib/getIcons';
import { octokit } from '../lib/octokit';
@ -87,10 +87,16 @@ const Home: NextPage<HomeProps> = ({
>
<span>Donate</span>
</LargeButton>
<Text18>
If you find Iconoir valuable for you, consider making a donation to
help us pursuing even bigger goals.
</Text18>
<Supporters>
<Supporter data-tooltip="Pierre Olivier Marec" as={'a'} href={'https://github.com/pomarec'} src={'https://avatars.githubusercontent.com/u/802933?v=4'}></Supporter>
<Supporter data-tooltip="Tuan Hiep" as={'a'} href={'https://opencollective.com/iconoir/contribute'} src={'https://images.opencollective.com/tuan-hiep/17b1ef2/avatar.png?height=80'}></Supporter>
<Supporter data-tooltip="Justin Kendrick" as={'a'} href={'https://opencollective.com/iconoir/contribute'} src={'https://images.opencollective.com/guest-39c79745/avatar.png?height=80'}></Supporter>
<Supporter data-tooltip="Anon" as={'a'} href={'https://opencollective.com/iconoir/contribute'} src={'https://opencollective.com/static/images/default-guest-logo.svg'}></Supporter>
<Supporter data-tooltip="Luca Burgio" as={'a'} href={'https://twitter.com/burgioluca'} src={'https://lucaburgio.com/images/profile2.png'}></Supporter>
</Supporters>
<Text15>
Join here our monthly supporters and help us continue developing Iconoir.
</Text15>
</SupportContainer>
<Explore allIcons={allIcons} />
</Layout>
@ -99,6 +105,7 @@ const Home: NextPage<HomeProps> = ({
);
};
export const HeroHead = styled.div`
margin: 60px auto 40px auto;
${media.md} {
@ -138,6 +145,45 @@ export const HeroDescription = styled(Text18)<{ topMargin?: number }>`
margin-top: ${(props) => props.topMargin || 0}px;
}
`;
const Supporters = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 8px!important;
`;
const Supporter = styled.div<{ src?: string }>`
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #000;
margin: 0 10px;
background-image: url(${(props) => props.src});
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: 2px solid white;
margin: 0 -4px;
transition: 0.2s;
&:hover {
scale: 1.1;
transition: 0.2s;
&:before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
font-size: 12px;
}
}
`;
const SupportContainer = styled.div`
text-align: center;
> * {