feat: added Framer sponsor

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);
+  }
+}
 `;

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;

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) {
         <FilterContainer>
           <FiltersEditor filters={filters} onChange={setFilters} />
         </FilterContainer>
+        <Sponsor />
+        <Ad />
         <CustomizationEditor
           customizations={customizations}
           onChange={setCustomizations}
         />
-        <Ad />
       </Right>
     </Container>
   );

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 <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`
+  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);
+  }
+`;