add: hono sponsor

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;

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;

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