feat: new website (#261)

* add: website redesign and optimization * fix: additional improvements in home, support, and doc * fix: typography and spacing * fix: moved praise to support page * fix: redesigned support page * feat: added new pillars and paragraphs * fix: changed table colors * fix: shortened home * fix: small improvements to support page * fix: optimized mobile version * feat: added Ad on mobile * Remove outdated color prop from CurrentVersion * Small format fixes * fix: removed prefixes in Slider.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed prefixes in Button.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed unused const Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: correctly renamed const Overlay Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: applied same button style to the Copy button Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed unnecessary prefix properties, fixed transition Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added non prefixed property in Stats.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added transition effect on mouse out as well Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed a repeated property in Input.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed home title Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed icons to icon Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> --------- Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
2024-05-06 00:23:18 +02:00 · 2023-03-19 21:23:43 +01:00 · 2023-03-19 21:23:43 +01:00 · 2720cccb2b
parent c3a359f554
commit 2720cccb2b
30 changed files with 454 additions and 239 deletions
--- a/iconoir.com/components/AvailableFor.tsx
+++ b/iconoir.com/components/AvailableFor.tsx
@ -108,7 +108,7 @@ const AvailableForOuter = styled.div`
  padding: 0 30px;
  overflow: hidden;
  ${media.lg} {
-    margin: 120px auto;
+    margin: 80px auto;
    padding: 0;
  }
 `;
--- a/iconoir.com/components/Button.tsx
+++ b/iconoir.com/components/Button.tsx
@ -12,13 +12,18 @@ export const ResetButton = styled.button`
 `;

 export const LargeButton = styled(ResetButton)`
-  background: var(--black);
+  background: var(--white);
  height: 75px;
+  border-radius: 10px 50px 50px 50px;
+  border: solid 2px var(--g0);
+
+  box-shadow: 0px 8px 0px 0px var(--g0);
+
  display: inline-flex;
  align-items: center;
  text-decoration: none;
-  color: var(--white);
-  padding: 0 43px;
+  color: var(--g0);
+  padding: 0 70px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
@ -31,15 +36,10 @@ export const LargeButton = styled(ResetButton)`
  * {
    font-weight: 700;
  }
-  &::after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    inset: 0;
-    border: solid 3px var(--black);
-    opacity: 0;
-    transition: inset 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s linear;
-    z-index: 10;
+  transition: 0.2s;
+  &:hover {
+    box-shadow: 0px 3px 0px 0px var(--g0);
+    transform: translateY(5px);
  }
  &:focus::after,
  &:hover::after {
@ -64,3 +64,16 @@ export const Button = styled(LargeButton)`
    background: var(--darker-gray);
  }
 `;
+
+export const CopyButton = styled(Button)`
+  text-transform: uppercase;
+  background: var(--white);
+  height: 30px;
+  padding: 0 12px;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  line-height: 17.6px;
+  font-weight: 700;
+  color: var(--black);
+  font-family: var(--font-family) !important;
+`;
--- a/iconoir.com/components/CategoryRow.tsx
+++ b/iconoir.com/components/CategoryRow.tsx
@ -43,13 +43,13 @@ const Container = styled.div`
 `;
 const Title = styled(Text15)`
  font-weight: 700;
-  color: var(--black);
-  background-color: var(--light-gray);
+  color: var(--g0);
+  background-color: var(--g6);
  border-radius: 8px;
  padding: 6px 10px;
 `;
 const Separator = styled.div`
  height: 1px;
  flex: 1;
-  background: var(--light-gray);
+  background: var(--g6);
 `;
--- a/iconoir.com/components/ChangelogEntry.tsx
+++ b/iconoir.com/components/ChangelogEntry.tsx
@ -5,7 +5,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { MDXRemote } from './MDXRemote';
 import { media } from '../lib/responsive';
-import { Code, CopyButton, Text15, Text18 } from './Typography';
+import { Code, Text15, Text18 } from './Typography';
+import { CopyButton } from './Button';

 const EXPAND_HEIGHT = 400;

@ -121,7 +122,7 @@ const EntryBody = styled(Code)<{ expanded?: boolean }>`
  }
  code {
    display: inline-block;
-    background: var(--gray) !important;
+    background: var(--g5) !important;
    color: var(--black);
    font-family: var(--font-family) !important;
    padding: 0 4px;
--- a/iconoir.com/components/CurrentVersion.tsx
+++ b/iconoir.com/components/CurrentVersion.tsx
@ -4,12 +4,11 @@ import { Text13 } from './Typography';

 export interface CurrentVersionProps {
  version: string;
-  color?: string;
 }
-export function CurrentVersion({ version, color }: CurrentVersionProps) {
+export function CurrentVersion({ version }: CurrentVersionProps) {
  return (
    <Link href={'/docs/changelog'} passHref legacyBehavior>
-      <Container as={'a'} style={color ? { background: color } : undefined}>
+      <Container as={'a'}>
        {version}
      </Container>
    </Link>
@ -17,9 +16,9 @@ export function CurrentVersion({ version, color }: CurrentVersionProps) {
 }

 const Container = styled(Text13)`
-  color: var(--black);
+  color: var(--g1);
  font-weight: 700;
-  background: var(--pink);
+  background: var(--g5);
  line-height: 1;
  padding: 7px 16px;
  border-radius: 200px;
--- a/iconoir.com/components/CustomizationEditor.tsx
+++ b/iconoir.com/components/CustomizationEditor.tsx
@ -5,6 +5,7 @@ import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
 import { ColorButton, ColorInput } from './Input';
 import { Slider } from './Slider';
 import { Text13, Text15 } from './Typography';
+import { media } from '../lib/responsive';

 export interface CustomizationEditorProps {
  customizations: IconListCustomizations;
@ -91,18 +92,22 @@ export function CustomizationEditor({
 }

 const CustomizationBox = styled.div`
-  background-color:var(--gray-200);
+  background-color:var(--g7);
  width: 84%;
  padding: 8%;
  border-radius: 10px;
  margin-bottom: 30px;
+  display: none;
+  ${media.md} {
+    display: block;
+  }
 `;
 const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
-  border-bottom: solid 1px var(--light-gray);
+  border-bottom: solid 1px var(--g6);
  padding-bottom: 10px;
 `;
 const Field = styled.div`
--- a/iconoir.com/components/DocumentationNavigation.tsx
+++ b/iconoir.com/components/DocumentationNavigation.tsx
@ -113,11 +113,9 @@ const ChildrenContainer = styled.div<{ expanded?: boolean }>`
 `;
 const HeaderItem = styled.div`
  padding: 10px 30px;
-  text-transform: uppercase;
-  font-size: 12px;
+  font-size: 15px;
  line-height: 19px;
-  color: var(--black);
-  letter-spacing: 0.12em;
+  color: var(--g0);
  font-weight: 700;
  display: flex;
  align-items: baseline;
@ -138,7 +136,7 @@ const NavigationItem = styled.div<{ active?: boolean }>`
  font-size: 16px;
  line-height: 14.5px;
  letter-spacing: -0.02em;
-  color: var(--black-60);
+  color: var(--g1);
  display: flex;
  align-items: center;
  text-decoration: none;
@ -150,8 +148,8 @@ const NavigationItem = styled.div<{ active?: boolean }>`
  }
  &:hover,
  ${(props) => (props.active ? '&' : '&.noop')} {
-    background: var(--light-gray);
-    color: var(--black);
+    color: var(--g0);
+    text-decoration: underline;
  }
  ${(props) => (props.active ? 'span' : '&.noop')} {
    font-weight: 700;
@ -164,12 +162,13 @@ const NavigationItemLabel = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 0 4px;
+  padding: 2px 6px;
+  border-radius: 4px;
  font-size: 11px;
  line-height: 17.6px;
-  font-weight: 700;
+  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
-  color: var(--white);
-  background: var(--black);
+  color: var(--g1);
+  background: var(--g5);
 `;
--- a/iconoir.com/components/Explore.tsx
+++ b/iconoir.com/components/Explore.tsx
@ -49,21 +49,29 @@ export function Explore({ allIcons }: ExploreProps) {

 const Container = styled.div`
  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
+  flex-direction: column-reverse;
+  ${media.md} {
+    align-items: flex-start;
+    flex-direction: row;
+  }
 `;
 const Left = styled.div`
  flex: 1;
  min-height: calc(100vh - 100px);
+  background: white;
+  ${media.md} {
+    background: none;
+  }
 `;
 const Right = styled.div`
  position: sticky;
  top: 50px;
  width: 275px;
  margin-left: 68px;
-  display: none;
+  display: block;
+  z-index: -1;
  ${media.md} {
-    display: block;
+    z-index: 1;
  }
 `;
 const FilterContainer = styled.div<{ isMobile?: boolean }>`
@ -72,6 +80,7 @@ const FilterContainer = styled.div<{ isMobile?: boolean }>`
  position: sticky;
  top: 20px;
  z-index: 100;
+  width: 100%;
  ${media.md} {
    position: relative;
    top: 0;
--- a/iconoir.com/components/Footer.tsx
+++ b/iconoir.com/components/Footer.tsx
@ -65,14 +65,14 @@ const Container = styled.div`
  padding-top: 30px;
  margin: 100px -50px -50px -50px; /* not ideal. To fix removing padding from body.*/
  padding: 84px 12%;
-  background-color: var(--gray-200);
+  background-color: var(--g7);
  align-items: center;
  > :not(:last-child) {
    margin-right: 50px;
  }
 `;
 const FooterEnd = styled.div`
-  border-top: 1px solid var(--gray-100);
+  border-top: 1px solid var(--g5);
  padding-top: 20px;
  margin-top: 74px;
  width: 100%;
@ -92,6 +92,7 @@ const FooterCategoryTitle = styled(Text17)`
  margin-bottom: 24px;
  font-weight: 600;
  display: block;
+  color: var(--g0);
 `;
 const FooterCategoryLinks = styled.div`

@ -99,12 +100,12 @@ const FooterCategoryLinks = styled.div`
 const FooterCategoryLink = styled.a`
  display: block;
  font-size: 17px;
-  color: #424258;
+  color: var(--g1);
  width: fit-content;
  margin-bottom: 12px;
  text-decoration: none;
  &:hover{
    text-decoration: underline;
-    color: var(--black);
+    color: var(--g0);
  }
 `;
--- a/iconoir.com/components/Header.tsx
+++ b/iconoir.com/components/Header.tsx
@ -12,9 +12,8 @@ import { Text15 } from './Typography';

 export interface HeaderProps {
  currentVersion: string;
-  currentVersionColor?: string;
 }
-export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
+export function Header({ currentVersion }: HeaderProps) {
  const [menuVisible, setMenuVisible] = React.useState(false);
  return (
    <Container>
@ -27,7 +26,7 @@ export function Header({ currentVersion, currentVersionColor }: HeaderProps) {
            <Logo src={'/iconoir-logo.svg'} alt={'Iconoir Logo'} />
          </LogoContainer>
        </Link>
-        <CurrentVersion version={currentVersion} color={currentVersionColor} />
+        <CurrentVersion version={currentVersion} />
      </HeaderLeft>
      <HeaderCenter>
        <MobileMenuContainer visible={menuVisible}>
@ -149,6 +148,7 @@ const HeaderRight = styled(HeaderItem)`
 `;
 export const Logo = styled.img`
  height: 24px;
+  margin-top: -4px;
  color: var(--black);
  margin-right: 16px !important;
  z-index: 101;
--- a/iconoir.com/components/HeaderBackground.tsx
+++ b/iconoir.com/components/HeaderBackground.tsx
@ -1,17 +1,43 @@
 import React from 'react';
 import styled from 'styled-components';
 import { media } from '../lib/responsive';
+import {useRef, useEffect} from 'react';

 export interface HeaderBackgroundProps {
  children: React.ReactElement;
-  src: string;
 }
-export function HeaderBackground({ children, src }: HeaderBackgroundProps) {
+export function HeaderBackground({ children }: HeaderBackgroundProps) {
+  const parallaxRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!parallaxRef.current) return;
+
+    const parallaxElements = parallaxRef.current.querySelectorAll('[data-parallax-factor]');
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const x = event.clientX / window.innerWidth;
+      const y = event.clientY / window.innerHeight;
+      parallaxElements.forEach((el) => {
+        const factor = parseFloat(el.getAttribute('data-parallax-factor') || '1');
+        (el as HTMLElement).style.transform = `translate3d(${x * factor * 40}px, ${y * factor * 80}px, 0)`;
+      });
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+  
+  
  return (
-    <HeaderContainer>
-      <ImageContainer>
-        <BackgroundImage src={src} />
-      </ImageContainer>
+    <HeaderContainer ref={parallaxRef}>
+      <FloatingIconCellar data-parallax-factor="0.75"/>
+      <FloatingIconPay data-parallax-factor="1.5"/>
+      <FloatingFaceID data-parallax-factor="0.5"/>
+      <FloatingCommand data-parallax-factor="1.25"/>
+      <FloatingFill data-parallax-factor="2"/>
      {children}
    </HeaderContainer>
  );
@ -19,28 +45,78 @@ export function HeaderBackground({ children, src }: HeaderBackgroundProps) {

 const HeaderContainer = styled.div`
  position: relative;
+  width: fit-content;
+  margin: auto;
 `;
-const ImageContainer = styled.div`
+const FloatingIcon = styled.div`
  position: absolute;
-  top: -100px;
-  bottom: -100px;
-  left: -30px;
-  right: -30px;
-  ${media.lg} {
-    left: -100px;
-    right: -100px;
-  }
+  display: none;
+  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
-  display: flex;
  align-items: center;
  justify-content: center;
-`;
-const BackgroundImage = styled.img`
-  width: 90%;
-  max-width: calc(min(1100px, 90vw));
-  max-height: 60%;
  ${media.md} {
-    max-height: 100%;
+    display: flex;
+  }
+`;
+const FloatingIconCellar = styled(FloatingIcon)`
+  -webkit-transform: rotate(6deg);
+    -moz-transform: rotate(6deg);
+  top: -120px;
+  right: 0px;
+  width:200px;
+  height:200px;
+  background-image: url(/cellar.gif);
+  background-size:70%;
+  ${media.lg} {
+  }
+`;
+const FloatingIconPay = styled(FloatingIcon)`
+  -webkit-transform: rotate(18deg);
+    -moz-transform: rotate(18deg);
+  top: -50px;
+  right: -100px;
+  width:130px;
+  height:130px;
+  background-image: url(/pay-bitcoin.gif);
+  background-size:70%;
+  ${media.lg} {
+  }
+`;
+const FloatingFaceID = styled(FloatingIcon)`
+  -webkit-transform: rotate(6deg);
+    -moz-transform: rotate(6deg);
+  top: -130px;
+  right: 380px;
+  width:110px;
+  height:110px;
+  background-image: url(/face-id.gif);
+  background-size:70%;
+  ${media.lg} {
+  }
+`;
+const FloatingCommand = styled(FloatingIcon)`
+  -webkit-transform: rotate(-7deg);
+    -moz-transform: rotate(-7deg);
+  top: -94px;
+  left: 150px;
+  width:110px;
+  height:110px;
+  background-image: url(/command.gif);
+  background-size:70%;
+  ${media.lg} {
+  }
+`;
+const FloatingFill = styled(FloatingIcon)`
+  -webkit-transform: rotate(-14deg);
+    -moz-transform: rotate(-14deg);
+  top: -64px;
+  left: -75px;
+  width:110px;
+  height:110px;
+  background-image: url(/fill.gif);
+  background-size:70%;
+  ${media.lg} {
  }
 `;
--- a/iconoir.com/components/HeaderSecondary.tsx
+++ b/iconoir.com/components/HeaderSecondary.tsx
@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import { media } from '../lib/responsive';
+import {useRef, useEffect} from 'react';
+
+export interface HeaderSecondaryProps {
+  children: React.ReactElement;
+}
+export function HeaderSecondary({ children }: HeaderSecondaryProps) {
+  
+  return (
+    <HeaderContainer>
+      {children}
+    </HeaderContainer>
+  );
+}
+
+const HeaderContainer = styled.div`
+  position: relative;
+  width: fit-content;
+  margin: auto;
+`;
--- a/iconoir.com/components/Icon.tsx
+++ b/iconoir.com/components/Icon.tsx
@ -76,6 +76,10 @@ export function Icon({ iconWidth, icon }: IconProps) {
        </IconContainer>
        {supportsClipboard ? (
          <HoverContainer>
+            <CornerBR/>
+            <CornerTR/>
+            <CornerBL/>
+            <CornerTL/>
            <HoverButton
              onClick={() => {
                if (htmlContentsRef.current) {
@ -111,6 +115,31 @@ export function Icon({ iconWidth, icon }: IconProps) {
  );
 }

+const Overlay = styled.div`
+  position: absolute;
+  border-radius: 50%;
+  border: solid 2px var(--g0);
+  background: var(--white);
+  width: 8px;
+  height: 8px;
+`;
+const CornerBR = styled(Overlay)`
+bottom: -6px;
+right: -6px;
+z-index: 999;
+`;
+const CornerTR = styled(Overlay)`
+top: -6px;
+right: -6px;
+`;
+const CornerBL = styled(Overlay)`
+bottom: -6px;
+left: -6px;
+`;
+const CornerTL = styled(Overlay)`
+top: -6px;
+left: -6px;
+`;
 const HoverContainer = styled.div<{ supportsCopy?: boolean }>`
  position: absolute;
  display: ${(props) => (props.supportsCopy ? 'block' : 'none')};
@ -119,8 +148,7 @@ const HoverContainer = styled.div<{ supportsCopy?: boolean }>`
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
-  border-radius: 12px;
-  overflow: hidden;
+  
  transform: translateZ(0px); // Safari Fix
  transition: opacity 0.1s linear;
  opacity: 0;
@ -130,10 +158,10 @@ const HoverButton = styled(ResetButton)`
  display: flex;
  align-items: center;
  justify-content: center;
-  background: var(--light-gray);
-  border-radius: 0 !important;
+  background: var(--white);
+  border-radius: 0px !important;
  transition: background 0.1s linear;
-  color: var(--black);
+  color: var(--g0);
  font-size: 14px;
  line-height: 23px;
  font-weight: 700;
@ -143,7 +171,8 @@ const HoverButton = styled(ResetButton)`
  text-decoration: none;
  &:hover,
  &:active {
-    background: var(--gray);
+    background: var(--g0);
+    color: var(--white);
  }
 `;
 const BorderContainer = styled.div<{ iconWidth: number }>`
@ -151,13 +180,14 @@ const BorderContainer = styled.div<{ iconWidth: number }>`
  box-sizing: border-box;
  padding-bottom: 100%;
  position: relative;
-  border: solid 1px var(--light-gray);
+  border: solid 1px var(--g6);
  border-radius: 12px;
  margin-bottom: 10px;
  @media (hover: hover) {
    &:hover ${HoverContainer} {
      opacity: 1;
      pointer-events: all;
+      border: solid 2px var(--g0);
    }
  }
 `;
--- a/iconoir.com/components/IconList.tsx
+++ b/iconoir.com/components/IconList.tsx
@ -172,7 +172,7 @@ const Container = styled.div`
  width: 100%;
  margin-top: -${HEADER_TOP_PADDING}px;
  > :first-child {
-    overflow: visible;
+    overflow: visible !important;
    > :first-child {
      -webkit-overflow-scrolling: touch;
    }
--- a/iconoir.com/components/Input.tsx
+++ b/iconoir.com/components/Input.tsx
@ -30,13 +30,13 @@ export const Input = styled(ResetInput)`
  line-height: 21px;
  font-weight: 500;
  color: var(--black);
-  border: solid 1px var(--light-gray);
+  border: solid 1px var(--g6);
  
  &:hover{
-    border: solid 1px var(--dark-gray);
+    border: solid 2px var(--g0);
  }
  &:focus{
-    border: solid 1px var(--dark-gray);
+    border: solid 2px var(--g0);
  }
 `;

@ -50,8 +50,9 @@ export const LargeInput = styled(Input)`
  width: 100%;
  box-sizing: border-box;
  outline: none;
+  transition: 0.2s;
  &:hover{
-    transition: 0.4s;
+    transform: scale(1.02);
  }
 `;

--- a/iconoir.com/components/NavigationItem.tsx
+++ b/iconoir.com/components/NavigationItem.tsx
@ -51,7 +51,7 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
    line-height: 20px;
    font-weight: 500;
    padding: 0;
-    color: var(--black);
+    color: var(--g0);
    width: auto;
    border-bottom: none !important;
      
@ -69,7 +69,7 @@ export const NavigationItemContainer = styled(Text15)<{ isActive?: boolean }>`
      transition: background 0.1s linear;
    }
    &:hover::before {
-      background: var(--light-gray);
+      background: var(--g6);
      transition: 0.2s;
      top: -16px;
      bottom: -16px;
--- a/iconoir.com/components/Slider.tsx
+++ b/iconoir.com/components/Slider.tsx
@ -72,7 +72,7 @@ function Thumb({ state, trackRef, index }: ThumbProps) {
          backgroundColor: isFocusVisible
            ? 'var(--accent)'
            : state.isThumbDragging(index)
-            ? 'var(--black)'
+            ? 'var(--g6)'
            : 'var(--white)',
          scale: isFocusVisible
            ? '1.0'
@ -120,15 +120,13 @@ const TrackBackground = styled.div`
 `;
 const ThumbContainer = styled.div`
  position: absolute;
-  top: 4px;
  transform: translateX(-50%);
 `;
 const ThumbInner = styled.div`
  width: 24px;
  height: 24px;
-  outline: solid 2px var(--white);
-  -webkit-box-shadow: inset 0px 0px 0px 2px #000000; 
-  box-shadow: inset 0px 0px 0px 2px #000000;
+  border: solid 2px var(--black);
+  box-shadow: 0px 3px 0px 0px var(--g0);
  border-radius: 50%;
  cursor: pointer;
  &:hover{
--- a/iconoir.com/components/Stats.tsx
+++ b/iconoir.com/components/Stats.tsx
@ -19,10 +19,12 @@ const StatText = styled.div`
  font-size: 38px;
  font-weight: 700;
  line-height: 62px;
-  color: var(--black);
+  color: var(--g0);
  ${media.md} {
    font-size: 50px;
    line-height: 82px;
+    -webkit-text-stroke: 1.5px;
+    text-stroke: 1.5px;
  }
 `;
 const StatContainer = styled.div`
@ -46,6 +48,6 @@ export const StatsContainer = styled.div`
  }

  ${media.md} {
-    margin: 64px auto 120px auto;
+    margin: 60px auto;
  }
 `;
--- a/iconoir.com/components/Table.tsx
+++ b/iconoir.com/components/Table.tsx
@ -7,23 +7,23 @@ export const Table = styled.table`
  margin: 24px 0;
  td,
  th {
-    border: solid 2px var(--light-gray);
+    border: solid 2px var(--g6);
    font-size: 16px;
    line-height: 25.6px;
    padding: 12px 20px;
-    color: var(--black-60);
+    color: var(--g1);
    ${media.lg} {
      padding: 12px 30px 12px 60px;
    }
  }
  thead td,
  thead th {
-    color: var(--black);
-    background: var(--lighter-gray);
+    color: var(--g0);
+    background: var(--g7);
    font-weight: 700;
    text-align: left;
  }
  tbody tr:nth-child(even) td {
-    background: var(--lighter-gray);
+    background: var(--g7);
  }
 `;
--- a/iconoir.com/components/Typography.tsx
+++ b/iconoir.com/components/Typography.tsx
@ -1,24 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 import { showNotification } from '../lib/showNotification';
-import { Button } from './Button';
+import { CopyButton } from './Button';
 import { media } from '../lib/responsive';

 export const Text15 = styled.div`
  font-size: 15px;
  line-height: 24px;
-  color: var(--black-60);
+  color: var(--g1);
 `;

 export const Text14 = styled.div`
  font-size: 14px;
  line-height: 22px;
-  color: var(--black);
+  color: var(--g1);
 `;

 export const Text13 = styled.div`
  font-size: 13px;
-  color: var(--dark-gray);
+  color: var(--g1);
  line-height: 21px;
  font-weight: 500;
 `;
@ -30,7 +30,7 @@ export const Text17 = styled.div`
 export const Text18 = styled.div`
  font-size: 16px;
  line-height: 25px;
-  color: var(--black-60);
+  color: var(--g1);

  ${media.md} {
    font-size: 18px;
@ -41,17 +41,18 @@ export const Text18 = styled.div`
 export const Heading2 = styled.h2`
  font-size: 24px;
  line-height: 40px;
-  color: var(--black);
+  color: var(--g0);
  letter-spacing: -0.02em;
  margin: 24px 0;
  font-weight: 700;
 `;

 export const Code = styled.div`
-  background: var(--light-gray) !important;
-  border-radius: 0 !important;
+  background: var(--g7) !important;
+  border: solid 1px var(--g6);
+  border-radius: 6px !important;
  padding: 26px 32px;
-  color: var(--black-60);
+  color: var(--g1);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
@ -78,13 +79,13 @@ export const Code = styled.div`

 export const H1 = styled.h1`
  font-size: 50px;
-  font-weight: 700;
+  font-weight: 500;
  line-height: 49px;
  letter-spacing: -0.02em;
-  color: var(--black);
+  color: var(--g0);
  margin-bottom: 40px;
  ${media.lg} {
-    font-size: 90px;
+    font-size: 60px;
    line-height: 81px;
    letter-spacing: -0.05em;
  }
@ -93,26 +94,26 @@ export const H2 = styled.h2`
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
-  color: var(--black);
+  color: var(--g0);
  margin: 24px 0;
 `;
 export const H3 = styled.h3`
  font-size: 20px;
  line-height: 36px;
  font-weight: 700;
-  color: var(--black);
+  color: var(--g0);
  margin: 24px 0;
 `;
 export const Body = styled.p`
  font-size: 18px;
-  color: var(--black-60);
+  color: var(--g1);
  line-height: 30px;
  margin: 24px 0;
 `;
 export const CodeElement = styled.code`
  display: inline-block;
  padding: 0 4px;
-  color: var(--black);
+  color: var(--g0);
 `;

 const PreContainer = styled(Code)`
@ -132,23 +133,7 @@ const CopyContainer = styled.div`
  top: 16px;
  right: 23px;
 `;
-export const CopyButton = styled(Button)`
-  text-transform: uppercase;
-  background: var(--gray);
-  height: 30px;
-  padding: 0 12px;
-  font-size: 11px;
-  letter-spacing: 0.12em;
-  line-height: 17.6px;
-  font-weight: 700;
-  color: var(--black);
-  transition: background 0.1s linear, color 0.1s linear;
-  font-family: var(--font-family) !important;
-  &:hover {
-    background: var(--black) !important;
-    color: var(--white);
-  }
-`;
+
 export function Pre({ children, ...props }: React.PropsWithChildren<any>) {
  const containerRef = React.useRef<HTMLPreElement>(null);
  const [supportsClipboard, setSupportsClipboard] = React.useState(false);
--- a/iconoir.com/pages/docs/[...slug].tsx
+++ b/iconoir.com/pages/docs/[...slug].tsx
@ -35,7 +35,7 @@ export default function DocumentationPage({
  return (
    <Layout>
      <SEO title={title} />
-      <Header {...headerProps} currentVersionColor={'var(--green)'} />
+      <Header {...headerProps} />
      <Container>
        <NavigationContainer>
          <DocumentationNavigation {...navigationProps} />
@ -67,9 +67,9 @@ export const Container = styled.div`
 `;
 export const NavigationContainer = styled.div`
  ${media.lg} {
-    width: 286px;
+    width: 250px;
    margin-right: 30px;
-    border-right: solid 2px var(--light-gray);
+    border-right: solid 1px var(--g6);
  }
 `;
 export const ContentContainer = styled.div`
@ -77,7 +77,7 @@ export const ContentContainer = styled.div`
 `;
 export const InnerContentContainer = styled.div`
  margin: 0 30px;
-  max-width: 1168px;
+  max-width: 800px;
  ${media.lg} {
    margin: 0 auto;
  }
--- a/iconoir.com/pages/docs/changelog.tsx
+++ b/iconoir.com/pages/docs/changelog.tsx
@ -37,7 +37,7 @@ export default function Changelog({
  return (
    <Layout>
      <SEO title={'Changelog'} />
-      <Header {...headerProps} currentVersionColor={'var(--green)'} />
+      <Header {...headerProps} />
      <Container>
        <NavigationContainer>
          <DocumentationNavigation {...documentationProps} />
--- a/iconoir.com/pages/index.tsx
+++ b/iconoir.com/pages/index.tsx
@ -1,5 +1,4 @@
 import { downloads as npmDownloads } from '@nodesecure/npm-registry-sdk';
-import { PeaceHand } from 'iconoir-react';
 import type { NextPage } from 'next';
 import styled from 'styled-components';
 import { AvailableFor } from '../components/AvailableFor';
@ -11,7 +10,6 @@ import { Header } from '../components/Header';
 import { HeaderBackground } from '../components/HeaderBackground';
 import { Icon } from '../components/IconList';
 import { Layout } from '../components/Layout';
-import { Praise } from '../components/Praise';
 import { media } from '../lib/responsive';
 import { SEO } from '../components/SEO';
 import { Stat, StatsContainer } from '../components/Stats';
@ -36,8 +34,11 @@ const Home: NextPage<HomeProps> = ({
    <Layout>
      <SEO />
      <Header currentVersion={currentVersion} />
-      <HeaderBackground src={'/home-background.svg'}>
-        <HeroText>Your new default library.</HeroText>
+      <HeaderBackground>
+        <HeroHead>
+        <HeroText>Say hello</HeroText>
+        <HeroTextSecondary>to your new icon library.</HeroTextSecondary>
+        </HeroHead>
      </HeaderBackground>
      <HeroDescription>
        A high-quality selection of free icons. No premium options or sign-ups. Your new alternative to Noun Project, Flaticon, and all Figma resources. Available in SVG, 
@ -81,38 +82,48 @@ const Home: NextPage<HomeProps> = ({
          target={'_blank'}
          rel={'noreferrer'}
        >
-          <PeaceHand width={'1em'} height={'1em'} />
-          <span>Support the project</span>
+          <span>Donate</span>
        </LargeButton>
        <Text18>
-          Iconoir is an open source project built with consistent passion and
-          dedication. If you consider this library valuable for you and your
-          projects, support Iconoir with a donation to help us sustain costs and
-          development time.
+          If you find Iconoir valuable for you, consider making a donation to help us pursuing even bigger goals.
        </Text18>
      </SupportContainer>
-      <PraiseContainer>
-        <Praise />
-      </PraiseContainer>
      <Explore allIcons={allIcons} />
      <Footer />
    </Layout>
  );
 };

+export const HeroHead = styled.div`
+  margin: 60px auto 40px auto;
+  ${media.md} {
+    margin: 160px auto 80px auto;
+  }
+`;
 export const HeroText = styled.h1`
  font-size: 50px;
  font-weight: 700;
-  letter-spacing: -0.05em;
-  line-height: 52px;
+  color: var(--g0);
+  margin: 0 auto;
+  letter-spacing: -0.035em;
+  line-height: 1;
  text-align: center;
-  margin: 60px auto 40px auto;
-
+  transition: 0.3s;
  ${media.md} {
    font-size: 90px;
-    line-height: 1;
-    margin: 200px auto 80px auto;
+    padding: 0 20px;
+    letter-spacing: -0.045em;
+    -webkit-text-stroke: 2.5px;
  }
+  &:hover {
+    transform:scale(1.04);
+    transition:0.3s;
+  }
+  
+`;
+export const HeroTextSecondary = styled(HeroText)`
+  color: var(--g4);
+  max-width: 1000px;
 `;
 export const HeroDescription = styled(Text18)<{ topMargin?: number }>`
  display: block;
@ -134,16 +145,10 @@ const SupportContainer = styled.div`
  }
  margin-bottom: 50px;
  ${media.sm} {
-    margin-bottom: 150px;
+    margin-bottom: 110px;
  }
 `;
-const PraiseContainer = styled.div`
-  margin: 50px 0 64px 0;
-  ${media.md} {
-    margin: 140px 0 150px 0;
-  }
-  width: 100%;
-`;
+

 export default Home;

@ -171,4 +176,5 @@ export async function getStaticProps() {
      numDownloads,
    },
  };
+  
 }
--- a/iconoir.com/pages/support.tsx
+++ b/iconoir.com/pages/support.tsx
@ -1,79 +1,63 @@
-import { ArrowRight } from 'iconoir-react';
+import { ArrowRight, Flash, Discord, Globe, DesignNib } from 'iconoir-react';
 import { NextPage } from 'next';
-import Image from 'next/image';
 import styled from 'styled-components';
 import { HeroText } from '.';
+import { HeroTextSecondary } from '.';
 import { LargeButton } from '../components/Button';
 import { DISCORD_LINK, SUPPORT_LINK } from '../lib/constants';
 import { Footer } from '../components/Footer';
 import { Header, HeaderProps } from '../components/Header';
-import { HeaderBackground } from '../components/HeaderBackground';
+import { HeaderSecondary } from '../components/HeaderSecondary';
 import { Layout } from '../components/Layout';
 import { media } from '../lib/responsive';
 import { SEO } from '../components/SEO';
-import { Code, Heading2, Text18 } from '../components/Typography';
+import { Body, Code, Heading2, Text18 } from '../components/Typography';
 import { getHeaderProps } from '../lib/getHeaderProps';
+import { Praise } from '../components/Praise';

 interface SupportProps extends HeaderProps {}
 const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
  return (
    <Layout>
      <SEO title={'Donate - Our Mission'} />
-      <Header {...headerProps} currentVersionColor={'var(--blue)'} />
-      <HeaderBackground src={'/support-background.svg'}>
-        <HeroText>Support our open library.</HeroText>
-      </HeaderBackground>
+      <Header {...headerProps}/>
+      <HeaderSecondary>
+        <SupportHead>
+          <HeroText>Our Goal</HeroText>
+          <HeroTextSecondary>A free, complete, and open icon library.</HeroTextSecondary>
+        </SupportHead>
+      </HeaderSecondary>
      <PageContainer>
-        <Text18>
-          Iconoir is an open source project built with consistent passion and
-          dedication. There are no pro subscriptions, forced sign-ups, free
-          trials or limitations. <br />
-          Building an open library is what makes us happy.
-        </Text18>
-        <Heading2>Our mission pillars</Heading2>
-        <Code>
-          <strong>Free forever.</strong> We want to give to developers and users
-          high-quality free icons. Hassle-free.
-        </Code>
-        <Code>
-          <strong>Full coverage.</strong> We're aiming at having as many unique
-          icons as possible.
-        </Code>
-        <Code>
-          <strong>Used everywhere.</strong> We'd like to see Iconoir as a point
-          of reference for any new and exciting project out there.
-        </Code>
-        <Text18>
-          If you consider this library valuable for you and your projects,
-          support Iconoir with a donation to help us sustain costs and
-          development time.
-        </Text18>
-        <DonateSeparator />
-        <DonateContainer>
-          <DonateLeft>
-            <DonateHeader>Donate with OpenCollective</DonateHeader>
-            <Text18>We collect donations with transparency.</Text18>
-          </DonateLeft>
-          <DonateRight>
-            <DonateImage>
-              <Image
-                src={'/opencollective.png'}
-                alt={'OpenCollective Logo'}
-                width={65}
-                height={65}
-                style={{ mixBlendMode: 'multiply' }}
-              />
-            </DonateImage>
-            <DonateButton
-              as={'a'}
-              href={SUPPORT_LINK}
-              target={'_blank'}
-              rel={'noreferrer'}
-            >
-              <span>Donate</span> <ArrowRight />
-            </DonateButton>
-          </DonateRight>
-        </DonateContainer>
+        <PillarsContainer>
+          <Pillar>
+            <PillarIcon R={"140"} G={"26"} B={"245"}><Flash /></PillarIcon>
+            <PillarTitle>Free</PillarTitle>
+            <PillarDescription>We want to give to developers and users high-quality free icons. Hassle-free.</PillarDescription>
+          </Pillar>
+          <Pillar>
+            <PillarIcon R={"72"} G={"88"} B={"255"}><DesignNib /></PillarIcon>
+            <PillarTitle>Complete</PillarTitle>
+            <PillarDescription>We’re aiming at having as much unique icons as possible.</PillarDescription>
+          </Pillar>
+          <Pillar>
+            <PillarIcon R={"65"} G={"209"} B={"255"}><Globe /></PillarIcon>
+            <PillarTitle>Ambitious</PillarTitle>
+            <PillarDescription>We want to help and be part of as many projects as possible.</PillarDescription>
+          </Pillar>
+        </PillarsContainer>
+        <WideSection>
+          <Heading2>Become part of the project.</Heading2>
+          <Text18>
+            If you consider this library valuable for you and your projects,
+            support Iconoir with a donation to help us sustain costs and
+            development time.
+          </Text18>
+          <CallToAction as={'a'} href={SUPPORT_LINK} target={'_blank'}><span>Donate</span><ArrowRight /></CallToAction>
+        </WideSection>
+        <PraiseContainer>
+        <PraiseTitle>What our friends say</PraiseTitle>
+        <Praise />
+      </PraiseContainer>
        <DonateContainer>
          <DonateLeft>
            <DonateHeader>Join us on Discord</DonateHeader>
@ -88,7 +72,7 @@ const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
              target={'_blank'}
              rel={'noreferrer'}
            >
-              <span>Join</span> <ArrowRight />
+              <span>Join</span> <Discord />
            </DonateButton>
          </DonateRight>
        </DonateContainer>
@ -98,25 +82,92 @@ const Support: NextPage<SupportProps> = ({ ...headerProps }) => {
  );
 };

+
+const PillarsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  ${media.md} {
+    flex-direction: row;
+  }
+`;
+
+const Pillar = styled.div`
+  height: fit-content;
+  width: 80%;
+  border: 1px solid var(--g6);
+  background: var(--white);
+  border-radius: 12px;
+  display: flex-column;
+  text-align: center;
+  padding: 60px 10%;
+  margin-bottom: 20px;
+  ${media.md} {
+    width: 22%;
+    height: 180px;
+    padding: 60px 5%;
+    margin-bottom: 0;
+    transition: 0.2s;
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+`;
+
+const PillarTitle = styled(Heading2)`
+  width: 100%;
+  margin: 20px 0 0 0;
+  font-weight: 500;
+  font-size: 20px;
+`;
+
+const PillarDescription = styled(Body)`
+  margin: 0;
+`;
+
+const PillarIcon = styled.span<{ R?: string, G?: string, B?: string  }>`
+  font-size: 18px;
+  padding: 20px 11px 6px 11px;
+  color: var(--white);
+  width: 100px;
+  height: 100px;
+  background: rgb(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B});
+  box-shadow: 2px 6px 20px rgba(${({ R }) => R}, ${({ G }) => G}, ${({ B }) => B}, 0.5);
+  border-radius: 18px;
+`;
+
+export const SupportHead = styled.div`
+  margin: 60px auto 40px auto;
+  ${media.md} {
+    margin: 100px auto 80px auto;
+  }
+`;
+
 const PageContainer = styled.div`
  max-width: 1336px;
  margin: 75px auto 0 auto;
  ${media.lg} {
-    margin: 150px auto 0 auto;
+    margin: 110px auto 0 auto;
  }
 `;
-const DonateSeparator = styled.div`
-  margin-top: 88px;
+const WideSection = styled.div`
+  width: 60%;
+  background: var(--g7);
+  border-radius: 12px;
+  text-align: center;
+  padding: 4% 20% 10% 20%;
+  margin-top: 60px;
+  ${media.md} {
+    padding: 80px 20%;
+  }
+`;
+const PraiseTitle = styled(Heading2)`
+  margin: 100px 0 80px 0;
+  text-align: center;
 `;
 const DonateLeft = styled.div`
  max-width: 800px;
 `;
-const DonateImage = styled.div`
-  display: none;
-  ${media.lg} {
-    display: block;
-  }
-`;
 export const DonateRight = styled.div`
  display: flex;
  align-items: center;
@ -133,11 +184,15 @@ export const DonateButton = styled(LargeButton)`
  padding: 0 24px;
  height: 50px;
 `;
+const CallToAction = styled(LargeButton)`
+  margin-top: 40px;
+`;
 export const DonateContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
-  background: var(--lighter-gray);
+  border: 1px solid var(--g6);
+  border-radius: 20px;
  padding: 30px;
  margin-bottom: 24px;
  ${media.md} {
@ -149,14 +204,21 @@ export const DonateContainer = styled.div`
 `;
 export const DonateHeader = styled.div`
  font-size: 18px;
-  line-height: 27px;
+  color: var(--g0);
  letter-spacing: -0.02em;
  font-weight: 700;
-  margin-bottom: 16px;
+  margin-bottom: 4px;
  ${media.md} {
-    font-size: 30px;
+    font-size: 22px;
  }
 `;
+const PraiseContainer = styled.div`
+  margin: 50px 0 64px 0;
+  ${media.md} {
+    margin: 140px 0 150px 0;
+  }
+  width: 100%;
+`;

 export default Support;

--- a/iconoir.com/public/cellar.gif
+++ b/iconoir.com/public/cellar.gif
--- a/iconoir.com/public/command.gif
+++ b/iconoir.com/public/command.gif
--- a/iconoir.com/public/face-id.gif
+++ b/iconoir.com/public/face-id.gif
--- a/iconoir.com/public/fill.gif
+++ b/iconoir.com/public/fill.gif
--- a/iconoir.com/public/pay-bitcoin.gif
+++ b/iconoir.com/public/pay-bitcoin.gif
--- a/iconoir.com/styles/theme.css
+++ b/iconoir.com/styles/theme.css
@ -13,6 +13,12 @@
  --gray: #E7E7E7;
  --gray-100: #CDCDD3;
  --gray-200: #F9F9FA;
+  --g0: #1C2226;
+  --g1: #4F5D69;
+  --g4: #BCC9D2;
+  --g5: #E0E6EB;
+  --g6: #ECF0F4;
+  --g7: #F8FAFD;
  --light-gray: #F2F2F2;
  --lighter-gray: #F9F9F9;
  --super-light-gray: #FBFBFB;
@ -28,12 +34,12 @@
 body {
  margin: 0;
  padding: 50px 30px;
-  background: #FFFFFF;
+  background: var(--white);
  overflow-x: hidden;
 }

 a {
-  color: var(--black);
+  color: var(--g0);
  text-decoration: underline;
 }

@ -66,7 +72,7 @@ a {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
-  background: var(--black);
+  background: var(--g0);
  color: var(--white);
  border-radius: 10px;
  padding: 15px 30px;
@ -82,20 +88,20 @@ a {
 }

 ::placeholder {
-  color: var(--dark-gray);
+  color: var(--g1);
  opacity: 1; /* Firefox */
 }

 :-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: var(--dark-gray);
+ color: var(--g1);
 }

 ::-ms-input-placeholder { /* Microsoft Edge */
- color: var(--dark-gray);
+ color: var(--g1);
 }

@media (min-width: 1100px) {
  body {
-    padding: 50px;
+    padding: 30px 50px 50px 50px;
  }
 }