From 390f392ea56b38fd0ed078aa64b7830ae7461a22 Mon Sep 17 00:00:00 2001
From: Luca Burgio <burgio.luca@gmail.com>
Date: Sun, 18 Feb 2024 15:05:51 +0100
Subject: [PATCH] add: hono sponsor

---
 .../components/CustomizationEditor.tsx        |   2 +-
 iconoir.com/components/Explore.tsx            |   4 +-
 iconoir.com/components/Hono.tsx               |  62 ++++++++++++++++++
 iconoir.com/public/hono-ad.png                | Bin 0 -> 1518 bytes
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 iconoir.com/components/Hono.tsx
 create mode 100644 iconoir.com/public/hono-ad.png

diff --git a/iconoir.com/components/CustomizationEditor.tsx b/iconoir.com/components/CustomizationEditor.tsx
index a1ba2de0..a2a884b2 100644
--- a/iconoir.com/components/CustomizationEditor.tsx
+++ b/iconoir.com/components/CustomizationEditor.tsx
@@ -112,7 +112,7 @@ const Header = styled.div`
   padding-bottom: 10px;
 `;
 const Field = styled.div`
-  margin-bottom: 24px;
+  margin-bottom: 18px;
 `;
 const HorizontalField = styled(Field)`
   display: flex;
diff --git a/iconoir.com/components/Explore.tsx b/iconoir.com/components/Explore.tsx
index 52f09355..c30ee060 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 { Streamline } from './Streamline';
+import { Hono } from './Hono';
 import { CustomizationEditor } from './CustomizationEditor';
 import { FiltersEditor } from './FiltersEditor';
 import { Icon, IconList, IconListFilters } from './IconList';
@@ -39,6 +40,7 @@ export function Explore({ allIcons }: ExploreProps) {
           <FiltersEditor filters={filters} onChange={setFilters} />
         </FilterContainer>
         <Streamline />
+        <Hono />
         <CustomizationEditor
           customizations={customizations}
           onChange={setCustomizations}
@@ -66,7 +68,7 @@ const Left = styled.div`
 `;
 const Right = styled.div`
   position: sticky;
-  top: 50px;
+  top: 20px;
   width: 275px;
   display: block;
   z-index: -1;
diff --git a/iconoir.com/components/Hono.tsx b/iconoir.com/components/Hono.tsx
new file mode 100644
index 00000000..4b8b5603
--- /dev/null
+++ b/iconoir.com/components/Hono.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export function Hono() {
+  return (
+    <a
+      href="https://wearehono.com/?utm_source=iconoir&utm_medium=sidebar"
+      style={{ textDecoration: 'none' }}
+    >
+      <PromoContainer>
+        <PromoContent>
+          <PromoInfo>
+            <PromoTitle>Buy high-quality logos</PromoTitle>
+            <PromoSub>with Hono.</PromoSub>
+            <PromoImage src="./hono-ad.png" />
+            <SponsorLabel>Our sponsor</SponsorLabel>
+          </PromoInfo>
+        </PromoContent>
+      </PromoContainer>
+    </a>
+  );
+}
+
+const PromoContainer = styled.div`
+  border-radius: 12px;
+  border: 1px solid var(--g6);
+  text-align: center;
+  margin-top: 24px;
+  text-decoration: none;
+  &:hover {
+    background-color: var(--g7);
+  }
+`;
+const SponsorLabel = styled.div`
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--g4);
+  margin: 10px 0;
+`;
+
+const PromoContent = styled.div`
+  // Your content styles here, similar to SponsorText
+`;
+
+const PromoImage = styled.img`
+  width: 70%;
+`;
+
+const PromoInfo = styled.div`
+  // Styles for the text container, similar to SponsorRight
+`;
+
+const PromoTitle = styled.h2`
+  font-size: 16px;
+  font-weight: 600;
+  margin: 16px auto 0 auto;
+`;
+
+const PromoSub = styled.h2`
+  font-size: 14px;
+  margin: 0 auto 10px auto;
+`;
diff --git a/iconoir.com/public/hono-ad.png b/iconoir.com/public/hono-ad.png
new file mode 100644
index 0000000000000000000000000000000000000000..db5e897dced7c8b44514be4911fd518058e1a735
GIT binary patch
literal 1518
zcmbW1`#Tc~7{^D{GMh<Bl3UX%L>*nmaT!B%Su3I>mpl;;W4gJ{o#nEbCYNc_@i@pf
zrE`oiciV{(Ic}4arU>o0Uyq&D^Yjm#_j#Z9^L@VW5ARRkmx#sKgB8>j0000OeGzp9
z0Fc2;bq;Wsbk5vtdoD#B*2&dY%KukfE|<k(d3$>k2n2~lqOGkBg+eDLCVYH+=ybYR
zEVi<;ijR-S;c!eQv$waGL?Rg*8)LCpGMO9}7A8GfQc@!98I6}JmAh9kE&%ZaRNJaI
zES}CJlYF=(EF7Vwz6A#W$Sa~zNY{s6bHif}ZC3m3KA58iR6;J}R=Y)gNuSpU$RivU
zHA?3K7dRW8prz`Y+kWa^#yu6UIB;uB<J{bh`J2?yJ8rLLTh6bX3pd;h`Hh|KAMEW)
zXs@Y>m}l(heyWZw)K{(9YN%=r8L3pQVYT{a1wo&^zNPncs<!)a#+^YWM4tb#MiJ1z
z_`Y(n;p?Pp!yabohgbfvPzQ}7<y?#=33_nEMGT%y6Yb)6M2XQ1syUpZe?%C23I8mA
zJk|;J1f6tn4d#x>+|iLD|K-8TY1pMCZ&M2A_jOS~XRK~y?80Eit#lziE5GrAGpB}!
zGSW37T2GZI{fVTMzwNq+uV~yn2;vVAB~w8}k);eJR|5u*jGCS>#}GvdGm&bI#}{iz
zFy?GlZ1i}DhFmFtBen_-_2*zRb;OdyDz~rU`J4NO0^O`5cGxciSC9*Uy(fAG>~#p>
zbx?L{vT#|r`CzRlg_h_=%CO#9Hi<IJB1=;1@+FZK>yAAs+srr^nnzcCuJwi`(^pAS
z(;*lz9)nNX`t5djlw;N~luFhr=53UxIJvLd!9`r-YT?{kud+@HaO0=`P_Ax6^wMP>
z9op6r$$6^sf=nk(6jzzuPb1U2ZI6b^TLq%_ZoK+LbvEvgkS?9y@oosV+JvBukxX?W
zLaekD{v_rf3rIm1YCFHnPRu{0*-WV>dj`Uoox920kle9j1~k}+zsD8!1}jNu-{}-I
zqn6x+@u4!ag)%PY%h~seM0ba1hE2E9OgccNAts9uz}PH8;A&?PTzjad!aerPA-0V6
zFO-R~N^0?k_lcYsE0+yJh^X<@Vi~2OK)bN)5TTd`M{+V{5soaVkxDQe$5q<?3Kz*Z
z8s<Sn2ICGcE$<u!_P0%)7(5TL@ns+0NlV3rRQYBnP1D@8!=09!$1~qzH>2vk@D@3{
zqmwnV^5Y>(wjTo-CKYPUA31&aH6!N;q<GLl0GB1CYpisGm-<tBu+!+1aS0u46{^1P
zY#(}%LXzKjnECU8=-apwlNYV<zR^;}GMfGJ+kY)P%lsE_Am3{qEiavRQ!!}niz&nv
z^b>OQ-Ja+7jJoo`a8eB46f^#YkJCdeAbqvupm>s79)HZ9uO$y%Oqk#2R2o>!2{@eB
zRztMq8CESQGKP3&Zs}WoDQt4U)kil^e;MKhhI91>9kNZ;*uyTOYula~)Q|>;Y>a~P
z<efSP{EJm+04B%p`WMFOV<`tdn<4}io2VW2KKrW_KkVtH2vKcqN1g4{!PW`v2}C=4
z;{^WajLgU);bNSU4TGvNDcs(V=+<en5d@q+FY@50U8fb%b&cxJv~z3((dYtC{Yb54
z4{NUD`zq4#Owc-~UbeZ4Xf)y}Oq^tHaoQiA`*?fwY&k9XsAVBtRuPqCF6%=C?(*aX
zKO%$J-&!I8ekX`+T1c25d;@MZR+Ia%GKPMfd}f+!4cwzEM{ABQWF}DU{=!itKo}gs
zN8%|-BG?{2`g_E+e;7Y9FEyV1J#K?thLi@aLMBT;9YMJ-KuURA1YL(O0;Cg#5&^yb
zAOokA3*q1IQGTUa7!0j~Gz}!$UMliax?1kqCH8eRt;2!br)oQMB7n}gMT<}+$9{OE
p)?&YMRKI&!@7Zk}NJmgT-2uMvYuQ#YSNQF10?@V?6vNsl@jv=G(QN<#

literal 0
HcmV?d00001