mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-05-17 22:06:42 +02:00
114 lines
2.2 KiB
TypeScript
114 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { media } from '../lib/responsive';
|
|
|
|
export function Sponsor() {
|
|
return (
|
|
<SponsorContainer>
|
|
<SponsorText>
|
|
<SponsorLeft>
|
|
<SponsorLogo />
|
|
</SponsorLeft>
|
|
<SponsorRight>
|
|
<SponsorTitle>Get 3 months free of Framer with Iconoir.</SponsorTitle>
|
|
<SponsorDescr>
|
|
Click the link and use the code “pro-yearly-partner”.
|
|
</SponsorDescr>
|
|
</SponsorRight>
|
|
</SponsorText>
|
|
<a href="https://www.framer.com?via=iconoir">
|
|
<SponsorCTA>Get the offer</SponsorCTA>
|
|
</a>
|
|
</SponsorContainer>
|
|
);
|
|
}
|
|
|
|
const SponsorContainer = styled.div`
|
|
border: 1px solid var(--g7);
|
|
background-color: var(--g7);
|
|
border-radius: 10px;
|
|
width: 96%;
|
|
font-size: 14px;
|
|
color: var(--g1);
|
|
padding: 2%;
|
|
margin-top: 24px;
|
|
& > a {
|
|
text-decoration: none;
|
|
}
|
|
display: none;
|
|
${media.md} {
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
const SponsorText = styled.div`
|
|
display: flex;
|
|
padding 8px;
|
|
`;
|
|
|
|
const SponsorRight = styled.div``;
|
|
|
|
const SponsorLeft = styled.div``;
|
|
|
|
const SponsorLogo = styled.div`
|
|
@keyframes my-animation {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
45% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.2) rotate(-15deg);
|
|
}
|
|
55% {
|
|
transform: scale(1);
|
|
}
|
|
90% {
|
|
transform: scale(1);
|
|
}
|
|
95% {
|
|
transform: scale(1.6) rotate(15deg);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
width: 34px;
|
|
height: 34px;
|
|
background: url('/framer-spns.png') no-repeat;
|
|
background-size: 100%;
|
|
border-radius: 12px;
|
|
margin-right: 16px;
|
|
|
|
animation-name: my-animation;
|
|
animation-duration: 5s;
|
|
animation-timing-function: ease;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 5s;
|
|
`;
|
|
|
|
const SponsorTitle = styled.div`
|
|
color: var(--g0);
|
|
font-weight: 600;
|
|
`;
|
|
|
|
const SponsorDescr = styled.div`
|
|
margin: 8px 0 16px 0;
|
|
`;
|
|
|
|
const SponsorCTA = styled.div`
|
|
background-color: var(--g6);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
&:hover {
|
|
background-color: var(--g0);
|
|
color: var(--white);
|
|
}
|
|
`;
|