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