Merge pull request #1084 from near/feat/add-new-hzn-banner

feat: add new Horizon banner
near · Mar 26, 2024 · 497805f · 497805f
2 parents a21b7a1 + df1bf0b
commit 497805f
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 27 deletions.
diff --git a/src/components/banner/Horizon.tsx b/src/components/banner/Horizon.tsx
@@ -0,0 +1,133 @@
+import styled from 'styled-components';
+
+import { Button } from '@/components/lib/Button';
+import { Text } from '@/components/lib/Text';
+import { useBanner } from '@/hooks/useBanner';
+
+type Props = {
+  inline?: boolean;
+};
+
+type FlexProps = {
+  gap?: string;
+  alignItems?: string;
+  justifyContent?: string;
+  direction?: string;
+  wrap?: string;
+};
+
+const Wrapper = styled.div<{
+  inline?: boolean;
+}>`
+  --bs-gutter-x: 1.5rem;
+  padding: 8px calc(var(--bs-gutter-x) * 0.5);
+  background: #00ec97;
+  border-radius: ${(p) => (p.inline ? '5px' : 0)};
+
+  .banner-text {
+    @media (max-width: 600px) {
+      font-size: 12px;
+    }
+  }
+
+  .banner-button {
+    font-size: 14px;
+
+    @media (max-width: 600px) {
+      font-size: 12px;
+    }
+
+    &.desktop-button {
+      @media (max-width: 600px) {
+        display: none !important;
+      }
+    }
+    &.mobile-button {
+      display: none;
+      @media (max-width: 600px) {
+        display: inline-flex !important;
+      }
+    }
+  }
+  .close-button {
+    all: unset;
+    width: 14px;
+    height: 14px;
+    line-height: 14px;
+    color: #664d04;
+    background: transparent;
+    outline: none;
+    border: none;
+    transition: color 0.2s;
+    cursor: pointer;
+
+    &:hover {
+      border: none;
+      background: transparent;
+    }
+  }
+`;
+
+const Flex = styled.div<FlexProps>`
+  display: flex;
+  gap: ${(p) => p.gap};
+  align-items: ${(p) => p.alignItems};
+  justify-content: ${(p) => p.justifyContent};
+  flex-direction: ${(p) => p.direction ?? 'row'};
+  flex-wrap: ${(p) => p.wrap ?? 'nowrap'};
+
+  @media (max-width: 576px) {
+    gap: 10px;
+  }
+`;
+
+export const HorizonBanner = (props: Props) => {
+  const [isBannerVisible, setBanners] = useBanner();
+
+  const closeBanner = () => {
+    setBanners(!isBannerVisible);
+  };
+
+  if (!isBannerVisible) return null;
+
+  return (
+    <Wrapper inline={props.inline}>
+      <Flex gap="14px" alignItems="center" justifyContent="center">
+        <Text className="banner-text" weight="500">
+          Are you an early-stage founder? Apply to our equity-free accelerator program. Applications are now live!
+        </Text>
+        <Button
+          href="https://airtable.com/appFoIqAoY0ikoVIb/shrst8Tt4PUtYTSvD"
+          target="_blank"
+          label="Apply Now"
+          iconRight="ph-bold ph-arrow-up-right"
+          variant="primary"
+          fill="outline"
+          size="small"
+          className="banner-button desktop-button"
+        />
+
+        <Button
+          href="https://airtable.com/appFoIqAoY0ikoVIb/shrst8Tt4PUtYTSvD"
+          target="_blank"
+          label="Apply"
+          iconRight="ph-bold ph-arrow-up-right"
+          variant="primary"
+          fill="outline"
+          size="small"
+          className="banner-button mobile-button"
+        />
+
+        <Button
+          type="button"
+          onClick={closeBanner}
+          label="Close"
+          icon="ph-fill ph-x-circle"
+          size="small"
+          className="close-button"
+          fill="ghost"
+        />
+      </Flex>
+    </Wrapper>
+  );
+};
diff --git a/src/components/lib/Button/Button.tsx b/src/components/lib/Button/Button.tsx
@@ -10,6 +10,7 @@ type Props = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {
   disabled?: boolean;
   fill?: Fill;
   href?: string;
+  target?: string;
   icon?: string;
   iconLeft?: string;
   iconRight?: string;
@@ -264,7 +265,7 @@ const StyledButton = styled.button<StyledProps>`
         border-color: var(--sand3);
         color: var(--sand8);
         pointer-events: none;
-    
+
         i {
           color: var(--sand8) !important;
         }

diff --git a/src/components/marketing-navigation/desktop/DesktopNavigation.tsx b/src/components/marketing-navigation/desktop/DesktopNavigation.tsx
@@ -5,6 +5,7 @@ import type { FormEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
+import { HorizonBanner } from '@/components/banner/Horizon';
 import { Button } from '@/components/lib/Button';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
@@ -170,6 +171,7 @@ export const DesktopNavigation = () => {
 
   return (
     <>
+      <HorizonBanner />
       <Wrapper scrolled={scrolled}>
         <Container className="container-xl">
           <Link href="/" passHref legacyBehavior>

diff --git a/src/components/marketing-navigation/mobile/MobileNavigation.tsx b/src/components/marketing-navigation/mobile/MobileNavigation.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import styled from 'styled-components';
 
+import { HorizonBanner } from '@/components/banner/Horizon';
 import { Button } from '@/components/lib/Button';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
@@ -108,31 +109,34 @@ export const MobileNavigation = () => {
   };
 
   return (
-    <Wrapper>
-      <Navigation>
-        <Link href="/" passHref legacyBehavior>
-          <Logo onClick={closeMenu}>
-            <Image src={NearIcon} alt="NEAR" />
-          </Logo>
-        </Link>
-
-        <Actions onClick={closeMenu}>
-          {signedIn ? (
-            <>
-              <NotificationButton mobileView />
-              <UserDropdownMenu />
-            </>
-          ) : (
-            <Button label="Create Account" variant="primary" onClick={handleCreateAccount} />
-          )}
-        </Actions>
-
-        <MenuButton aria-label="Menu" onClick={toggleMenu}>
-          {menuIsVisible ? <i className="ph ph-x" /> : <i className="ph ph-list" />}
-        </MenuButton>
-      </Navigation>
-
-      <Menu isVisible={menuIsVisible} onCloseMenu={closeMenu} />
-    </Wrapper>
+    <>
+      <HorizonBanner />
+      <Wrapper>
+        <Navigation>
+          <Link href="/" passHref legacyBehavior>
+            <Logo onClick={closeMenu}>
+              <Image src={NearIcon} alt="NEAR" />
+            </Logo>
+          </Link>
+
+          <Actions onClick={closeMenu}>
+            {signedIn ? (
+              <>
+                <NotificationButton mobileView />
+                <UserDropdownMenu />
+              </>
+            ) : (
+              <Button label="Create Account" variant="primary" onClick={handleCreateAccount} />
+            )}
+          </Actions>
+
+          <MenuButton aria-label="Menu" onClick={toggleMenu}>
+            {menuIsVisible ? <i className="ph ph-x" /> : <i className="ph ph-list" />}
+          </MenuButton>
+        </Navigation>
+
+        <Menu isVisible={menuIsVisible} onCloseMenu={closeMenu} />
+      </Wrapper>
+    </>
   );
 };