Merge pull request #1846 from 0xProject/feature/website/starkdex-announcement

Added StarkDEX announcement to homepage

packages/website/ts/components/announcement.tsx

@@ -8,6 +8,7 @@ import { Button } from './button';
 export interface AnnouncementProps {
     headline: string;
     href: string;
+    shouldOpenInNewTab?: boolean;
 }
 
 const BrandColorSpan = styled.span`
@@ -31,7 +32,12 @@ const AnnouncementLink = styled(Button)`
 export const Announcement: React.StatelessComponent<AnnouncementProps> = (props: AnnouncementProps) => {
     return (
         <Wrap>
-            <AnnouncementLink isWithArrow={true} isAccentColor={true} href={props.href}>
+            <AnnouncementLink
+                isWithArrow={true}
+                isAccentColor={true}
+                href={props.href}
+                target={props.shouldOpenInNewTab ? '_blank' : ''}
+            >
                 <BrandColorSpan>{'New!'}</BrandColorSpan>
                 {props.headline}
             </AnnouncementLink>

packages/website/ts/components/sections/landing/hero.tsx

@@ -7,10 +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',
-// };
+const announcement = {
+    headline: 'StarkDEX: Bringing STARKs to Ethereum',
+    href: 'https://www.starkdex.io',
+    shouldOpenInNewTab: true,
+};
 
 export const SectionLandingHero = () => (
     <Hero
@@ -20,6 +21,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}
     />
 );