From 13df5adecd0c043401e83949c3987b2d45fcde4c Mon Sep 17 00:00:00 2001
From: David Sun <dvsuner@protonmail.com>
Date: Fri, 15 Feb 2019 13:24:28 -0500
Subject: [PATCH] added announcement component

---
 .../website/ts/components/announcement.tsx    | 31 +++++++++++++++++++
 packages/website/ts/components/hero.tsx       |  5 ++-
 .../ts/components/sections/landing/hero.tsx   |  6 ++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/ts/components/announcement.tsx

diff --git a/packages/website/ts/components/announcement.tsx b/packages/website/ts/components/announcement.tsx
new file mode 100644
index 0000000000..c16d489ec8
--- /dev/null
+++ b/packages/website/ts/components/announcement.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors } from '../style/colors';
+
+import { Link } from './link';
+import { Paragraph } from './text';
+
+export interface AnnouncementProps {
+    headline: string;
+    href: string;
+}
+
+const BrandColorSpan = styled.span`
+    color: ${colors.white};
+    padding-right: 12px;
+`;
+
+const Wrap = styled.div`
+    padding: 20px 0;
+    color: ${colors.brandLight};
+`;
+
+export const Announcement: React.StatelessComponent<AnnouncementProps> = (props: AnnouncementProps) => {
+    return (<Wrap>
+        <Link href={props.href}>
+            <BrandColorSpan>{'New!'}</BrandColorSpan>
+            {props.headline}
+        </Link>
+    </Wrap>);
+};
diff --git a/packages/website/ts/components/hero.tsx b/packages/website/ts/components/hero.tsx
index c326e0292f..5b9c898562 100644
--- a/packages/website/ts/components/hero.tsx
+++ b/packages/website/ts/components/hero.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
 import { addFadeInAnimation } from 'ts/constants/animations';
 
+import { Announcement, AnnouncementProps } from './announcement';
+
 interface Props {
     title: string;
     maxWidth?: string;
@@ -13,6 +14,7 @@ interface Props {
     description: string;
     figure?: React.ReactNode;
     actions?: React.ReactNode;
+    announcement?: AnnouncementProps;
 }
 
 const Section = styled.section`
@@ -126,6 +128,7 @@ export const Hero: React.StatelessComponent<Props> = (props: Props) => (
             {props.figure && <Content width="400px">{props.figure}</Content>}
 
             <Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
+                {!!props.announcement && <Announcement {...props.announcement} />}
                 <Title isLarge={props.isLargeTitle} maxWidth={props.maxWidthHeading}>
                     {props.title}
                 </Title>
diff --git a/packages/website/ts/components/sections/landing/hero.tsx b/packages/website/ts/components/sections/landing/hero.tsx
index 4897572863..5667aea246 100644
--- a/packages/website/ts/components/sections/landing/hero.tsx
+++ b/packages/website/ts/components/sections/landing/hero.tsx
@@ -7,6 +7,11 @@ import { LandingAnimation } from 'ts/components/heroImage';
 import { HeroAnimation } from 'ts/components/heroAnimation';
 import { WebsitePaths } from 'ts/types';
 
+const announcement = {
+    headline: 'Vote on ZEIP-23 MultiAssetProxy',
+    href: '/vote',
+};
+
 export const SectionLandingHero = () => (
     <Hero
         title="Powering Decentralized Exchange"
@@ -15,6 +20,7 @@ export const SectionLandingHero = () => (
         description="0x is an open protocol that enables the peer-to-peer exchange of assets on the Ethereum blockchain."
         figure={<LandingAnimation image={<HeroAnimation />} />}
         actions={<HeroActions />}
+        announcement={announcement}
     />
 );