From 5ecef04bc4ab8f0f16e43000805b5f6120356120 Mon Sep 17 00:00:00 2001
From: Nathan Zhang <70558078+nathanzzhang@users.noreply.github.com>
Date: Sun, 3 Sep 2023 11:52:27 -0700
Subject: [PATCH] Nathan/home announcement (#407)

* Initial announcement card

* Added animation

* Added query for blog post, need to update with title

* minor naming changes

* Added pulse on click

* query for new blog post

* Changed colors
---
 src/components/HomePage/Announcement.js | 111 ++++++++++++++++++++++++
 src/components/HomePage/HomePage.js     |   2 +
 2 files changed, 113 insertions(+)
 create mode 100644 src/components/HomePage/Announcement.js

diff --git a/src/components/HomePage/Announcement.js b/src/components/HomePage/Announcement.js
new file mode 100644
index 000000000..eea9c17a4
--- /dev/null
+++ b/src/components/HomePage/Announcement.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Card, CardActionArea, CardContent, Grid, Typography } from '@material-ui/core';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForwardIos';
+
+import LinkNoStyle from '../LinkNoStyle/LinkNoStyle';
+import { graphql, useStaticQuery } from 'gatsby';
+
+const styles = theme => ({
+	container: {
+		backgroundColor: '#FFFFFF',
+		padding: theme.spacing(3),
+		justifyContent: 'center'
+	},
+	card: {
+		width: '100%',
+		borderRadius: '20px',
+		borderColor: 'rgba(201, 96, 255, 0.3)',
+		boxShadow: '0 1px 20px rgba(201, 96, 255, 0.6)',
+		background: 'linear-gradient(90deg, #CA32FF, #FF5F96, #CA32FF, #FF5F96)',
+		position: 'relative',
+		animation: `$swipe 3s linear infinite`
+	},
+	'@keyframes swipe': {
+		'0%': {
+			backgroundSize: '300%',
+			backgroundPosition: '100% 0'
+		},
+		'100%': {
+			backgroundSize: '300%',
+			backgroundPosition: '0 0'
+		}
+	},
+	content: {
+		textAlign: 'center',
+		color: 'white',
+		paddingTop: theme.spacing(2.5),
+		'&:last-child': {
+			paddingBottom: theme.spacing(2.5)
+		}
+	},
+	forwardArrow: {
+		fontSize: theme.typography.fontSize,
+		marginLeft: theme.spacing(2),
+		marginTop: theme.spacing(0.5),
+		fontWeight: 700
+	},
+	grid: {
+		direction: 'row',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	item: {
+		[theme.breakpoints.down('xs')]: {
+			width: '75%'
+		}
+	},
+	text: {
+		fontWeight: 700
+	}
+});
+
+
+function Announcement({ classes }) {
+	const data = useStaticQuery(graphql`
+	query getInternBlogPost {
+		allMarkdownRemark(
+			filter: {fields: {slug: {regex: "/.*hey-future-interns.*/"}}}
+		) {
+		  nodes {
+			fields {
+			  slug
+			}
+			id
+		  }
+		}
+	  }
+	`);
+
+	const url = data.allMarkdownRemark.nodes[0].fields.slug;
+
+	return (
+		<Grid container className={classes.container}>
+			<Card className={classes.card} variant='outlined'>
+				<CardActionArea>
+					<LinkNoStyle to={url}>
+						<CardContent className={classes.content}>
+							<Grid container className={classes.grid}>
+								<Grid item className={classes.item}>
+									<Typography variant='body1' className={classes.text}>
+										Want to learn more about our internship program? Check out this blog post!
+									</Typography>
+								</Grid>
+								<Grid item justifyContent='center'>
+									<ArrowForwardIcon className={classes.forwardArrow}/>
+								</Grid>
+							</Grid>
+						</CardContent>
+					</LinkNoStyle>
+				</CardActionArea>
+			</Card>
+		</Grid>
+	);
+}
+
+Announcement.propTypes = {
+	classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(Announcement);
diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js
index 4d0cc62a0..359a4f2b4 100644
--- a/src/components/HomePage/HomePage.js
+++ b/src/components/HomePage/HomePage.js
@@ -7,6 +7,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForwardIos';
 import EventAvailableIcon from '@material-ui/icons/EventAvailableTwoTone';
 
 import LinkNoStyle from '../LinkNoStyle/LinkNoStyle';
+import Announcement from './Announcement';
 import Banner from './Banner';
 import HackDescription from './HackDescription';
 import BlogList from './BlogList';
@@ -82,6 +83,7 @@ function HomePageComponent({ classes }) {
 	return <React.Fragment>
 		<Banner />
 		<Container1>
+			<Announcement />
 			<HackDescription />
 			<StayConnectedBanner />
 		</Container1>