diff --git a/src/components/banner/Horizon.tsx b/src/components/banner/Horizon.tsx new file mode 100644 index 000000000..0aae0084a --- /dev/null +++ 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` + 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 ( + + + + Are you an early-stage founder? Apply to our equity-free accelerator program. Applications are now live! + +