added trailer thumb + buttons

src/components/Info/index.js

@@ -13,15 +13,17 @@ import {
   Title,
   InfoContent,
   PositionedCross as CrossSvg,
-  TopContent,
+  Row,
+  ActionButton as Button,
+  Img,
+  Trailer,
 } from './styles'
 
 import intro from '../../data/intro.md'
 import credits from '../../data/credits.md'
-import Button from '../Button'
-import PlaySvg from '../Svg/Play'
 import { colours } from '../../assets/theme'
 import config from '../../data/config'
+import trailerThumb from '../../assets/img/main_thumb.png'
 
 const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
   const [trailerActive, setTrailerActive] = useState(false)
@@ -63,10 +65,25 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
             <H1>The Para-Real:</H1>
             <H1>Finding the Future in Unexpected Places</H1>
             <Markdown withLinebreaks>{intro}</Markdown>
-            <Button onClick={toggleTrailerActive}>
+
-              <PlaySvg colour={colours.midnightDarker} size="20" />
+            <Trailer imgSrc={trailerThumb} onClick={toggleTrailerActive} />
-              Watch the trailer
+
-            </Button>
+            <Row>
+              <a
+                href="https://discord.gg/Xu9D3qVana"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button>Join the Discord</Button>
+              </a>
+              <a
+                href="https://ndc.substack.com/subscribe"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Button>Subscribe to the mailing list</Button>
+              </a>
+            </Row>
           </InfoContent>
           {currentVideo && (
             <Fragment>

src/components/Info/styles.js

@@ -6,6 +6,7 @@ import config from '../../data/config'
 import Logo from '../Logo'
 import translations from '../../data/strings'
 import CrossSvg from '../Svg/Cross'
+import PlaySvg from '../Svg/Play'
 
 import { P, H1, H2, Span, Label } from '../Text'
 import Link from '../Link'
@@ -36,6 +37,64 @@ export const Wrapper = styled.div`
   }
 `
 
+export const TrailerContainer = styled.div`
+  background: url(${props => props.imgSrc});
+  /* width: 100%; */
+  height: 20em;
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid ${colours.midnightDarker};
+  cursor: pointer;
+  margin-bottom: 16px;
+
+  div {
+    padding: 1em 2em;
+    background-color: #ffffffba;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  label {
+    color: ${colours.midnightDarker};
+    margin-left: 8px;
+    font-size: 20px;
+  }
+
+  :hover div {
+    background-color: #ffffff;
+  }
+`
+
+export const Trailer = props => (
+  <TrailerContainer {...props}>
+    <div>
+      <PlaySvg colour={colours.midnightDarker} size="20" />
+      <Label>{translations.en.watchTrailer}</Label>
+    </div>
+  </TrailerContainer>
+)
+
+export const ActionButton = styled(Button)`
+  font-size: 18px;
+`
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 32px;
+
+  a {
+    display: block;
+    width: 50%;
+    &:not(:last-of-type) {
+      margin-right: 16px;
+    }
+  }
+`
+
 export const InfoContent = styled.div`
   max-width: 600px;
   margin: 0 0 0em 2px;

src/data/strings.js

@@ -7,9 +7,8 @@ export default {
     underscoreTagline: ['LEAVE THE', 'SURVEILLANCE ECONOMY', '— TOGETHER.'],
     streamDateFuture: 'Going live at: ',
     streamDatePast: 'First broadcast: ',
-    subEvent: 'Subscribe to this event',
+    subEvent: 'Add to calendar',
     watchEpisode: 'Watch Episode',
-    main_text:
+    watchTrailer: 'Watch the trailer',
-      "[NEW DESIGN CONGRESS](https://newdesigncongress.org) x [RECLAIMFUTURES](https://reclaimfutures.org) present *The Para-Real: Finding the Future in Unexpected Places,* a Spring/Summer livestream series about economic subcultures and emergent technology use. Over 12 episodes streamed weekly, we meet filmmakers who have never met their actors, artists building their own networks of value, documentarians exploring digital identity, and members of resilient subcultures. All of these people share a commonality: they have an innate understanding of the *Para-Real,* and have seized upon it to better their surroundings. \nBetween the digital realm and our physical world is a third space, equally material but poorly understood. The *Para-Real* is a tangible place where class structures, economics and the outcomes of hardware and infrastructure design collide. The Para-Real manifests in many ways — It can be the desire for play that turns young Minecraft players into network administrators, the drive that fosters the resilience of subculture-driven mutually-supportive marketplaces, or the tension of class structures inherent in Virtual Reality's encroachment on living room space.\n\nWe shape our tools, and thereafter our tools shape us.* The Para-Real is everywhere. Whether attending a Furcon at the height of pandemic, organising community for resilience, or navigating a commissioned open world, we must consider ourselves as inhabiting not a real or online world, but a bridge between the two, one whose rules are not yet settled. *The future is not a Zoom call*. The digital systems we are confined to today merge protocol with platform to prey on isolation and extract value from labour. That we grapple with this incarnation of the digital realm indicates a dominant cartel in decline. In its place is a vacuum. We must resist the immature groupthink of the 90s’ vision of what the Internet can be — the Para-Real is a contested space*. Never trust someone who says the Internet is boring.* Thanks to the Para-Real, the Internet has never been weirder.",
   },
 }