Slightly updated the arcade alert (#1263)

* CSmall change, updated cards in team

* Updated the alert in index

components/announcement.js

@@ -1,7 +1,7 @@
-import { Card, Text, Box } from 'theme-ui'
 import { keyframes } from '@emotion/react'
-import Icon from './icon'
 import Image from 'next/image'
+import { Box, Card, Text } from 'theme-ui'
+import Icon from './icon'
 
 const unfold = keyframes({
   from: { transform: 'scaleY(0)' },
@@ -17,6 +17,7 @@ const Announcement = ({
   imgAlt,
   color = 'accent',
   sx = {},
+  width,
   ...props
 }) => (
   <Card
@@ -26,7 +27,7 @@ const Announcement = ({
       variant: 'cards.translucent',
       mx: 'auto',
       maxWidth: 'narrow',
-      width: '100%',
+      width: width ? width : '100%',
       textAlign: 'left',
       textDecoration: 'none',
       lineHeight: 'caption',

components/bio.js

@@ -1,6 +1,6 @@
-import { Box, Flex, Text, Avatar, Card } from 'theme-ui'
 import Icon from '@hackclub/icons'
 import { useState } from 'react'
+import { Avatar, Box, Card, Flex, Text } from 'theme-ui'
 
 export default function Bio({ popup = true, spanTwo = false, ...props }) {
   let { img, name, teamRole, pronouns, text, subrole, email, href, video } =

pages/index.js

@@ -204,6 +204,7 @@ function Page({
             gradient="linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.45))"
           />
 	  <Announcement
+            width="90vw"
             copy="Build in public this summer!"
             caption="Get domains, breadboards & multimeters, and drawing tablets."
             href="/arcade/"