diff --git a/iconoir.com/components/Ad.tsx b/iconoir.com/components/Ad.tsx index 9cedf5d1..ba3a6ff5 100644 --- a/iconoir.com/components/Ad.tsx +++ b/iconoir.com/components/Ad.tsx @@ -21,25 +21,30 @@ export function Ad() { } const AdContainer = styled.div` - #carbonads { - a { - text-decoration: none !important; +#carbonads { + margin: 24px 0 0 0; + a { + text-decoration: none !important; + } + .carbon-wrap { + display: flex; + align-items: flex-start; + > :first-child { + margin-right: 12px; } - .carbon-wrap { - display: flex; - align-items: flex-start; - > :first-child { - margin-right: 12px; - } - } - .carbon-text { - color: var(--black-80); - font-size: 14px; - } - .carbon-poweredby { - text-align: center; - font-size: 12px; - color: var(--black-40); + & > a > img { + width:100px; + height:74px; } } + .carbon-text { + color: var(--black-80); + font-size: 14px; + } + .carbon-poweredby { + text-align: center; + font-size: 12px; + color: var(--black-40); + } +} `; diff --git a/iconoir.com/components/CustomizationEditor.tsx b/iconoir.com/components/CustomizationEditor.tsx index e86b76d5..355e19e2 100644 --- a/iconoir.com/components/CustomizationEditor.tsx +++ b/iconoir.com/components/CustomizationEditor.tsx @@ -96,7 +96,7 @@ const CustomizationBox = styled.div` width: 84%; padding: 8%; border-radius: 10px; - margin-bottom: 30px; + margin: 24px 0; display: none; ${media.md} { display: block; diff --git a/iconoir.com/components/Explore.tsx b/iconoir.com/components/Explore.tsx index 9cc5b6ae..4f313aa3 100644 --- a/iconoir.com/components/Explore.tsx +++ b/iconoir.com/components/Explore.tsx @@ -2,6 +2,7 @@ import { IconoirProvider } from 'iconoir-react'; import React from 'react'; import styled from 'styled-components'; import { Ad } from './Ad'; +import { Sponsor } from './Sponsor'; import { CustomizationEditor } from './CustomizationEditor'; import { FiltersEditor } from './FiltersEditor'; import { Icon, IconList, IconListFilters } from './IconList'; @@ -37,11 +38,12 @@ export function Explore({ allIcons }: ExploreProps) { + + - ); diff --git a/iconoir.com/components/Sponsor.tsx b/iconoir.com/components/Sponsor.tsx new file mode 100644 index 00000000..b92428ac --- /dev/null +++ b/iconoir.com/components/Sponsor.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import styled from 'styled-components'; +import { media } from '../lib/responsive'; + +export function Sponsor() { + return + + + + + + Get 3 months free of Framer with Iconoir. + Click the link and use the code “pro-yearly-partner”. + + + + Get the offer + + ; +} + +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` + width: 34px; + height: 34px; + background: url('/framer-spns.png') no-repeat; + background-size: 100%; + border-radius: 12px; + margin-right: 16px; +`; + +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); + } +`; \ No newline at end of file diff --git a/iconoir.com/public/framer-spns.png b/iconoir.com/public/framer-spns.png new file mode 100644 index 00000000..db26fca2 Binary files /dev/null and b/iconoir.com/public/framer-spns.png differ