From 2ee44cd703e5218e58b5a96454860730e0c18ce7 Mon Sep 17 00:00:00 2001
From: Grace Zhou <gracezhou@DN0a1e2dde.SUNet>
Date: Sat, 21 Oct 2023 17:47:57 -0700
Subject: [PATCH 1/2] Add announcement

---
 pages/index.tsx | 47 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 2e8359a..f17537c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import Layout from '../components/layout';
 import {
   LinkComponent,
@@ -5,7 +6,9 @@ import {
   Section,
   Title
 } from '../components/section';
-import { Center, SignUpButton } from './puzzleHunt/2023';
+
+import {SignUpButton, Center} from './puzzleHunt/2023';
+import styled from 'styled-components';
 
 function SectionTitle({
   href,
@@ -18,15 +21,43 @@ function SectionTitle({
   );
 }
 
+const Announcement = styled.div`
+  text-align: center;
+  border-radius: 8px;
+  margin: 0 auto;
+  text-align: center;
+  padding: 0.8em 1em 0.1em 1em;
+  font-family: 'Special Elite';
+  font-weight: 400;
+  font-size: 28px;
+  background-color: #FF7377;
+  cursor: pointer;
+  color: white;
+`;
+
+const AnnounceLinkComponent = styled.a`
+  color: black;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.grayLight};
+  }
+`;
+
 export default function About() {
   return (
     <Layout title="About" pageName="about">
-      <Section id="puzzlehunt">
-        <Center>
-          <Title>Puzzle Hunt 2023: Mystery in History</Title>
-          <Paragraph>Puzzle Hunt is on October XX</Paragraph>
-          <SignUpButton>Sign Up</SignUpButton>
-        </Center>
+      <Section>
+        <Announcement>
+        ⚠️{' '}
+          <AnnounceLinkComponent href="https://forms.gle/eqca6sPu56yc6RB96" target="_blank">
+            ANNOUNCEMENT: PUZZLE HUNT 2023 SIGN-UPS NOW OPEN
+          </AnnounceLinkComponent>{' '}⚠️
+        <Paragraph>
+          <AnnounceLinkComponent href="/puzzleHunt/2023" target="_blank">
+          Click <u>here</u> for more information.
+          </AnnounceLinkComponent>
+        </Paragraph>
+        </Announcement>
       </Section>
       <Section id="about">
         <Title>About</Title>
@@ -74,3 +105,5 @@ export default function About() {
     </Layout>
   );
 }
+
+

From d427e6f85c791a51c98295ba7f36c48763ef5749 Mon Sep 17 00:00:00 2001
From: grace00 <grace00@users.noreply.github.com>
Date: Sun, 22 Oct 2023 00:48:24 +0000
Subject: [PATCH 2/2] Prettified Code!

---
 pages/index.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index f17537c..84ea772 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,7 +7,7 @@ import {
   Title
 } from '../components/section';
 
-import {SignUpButton, Center} from './puzzleHunt/2023';
+import { SignUpButton, Center } from './puzzleHunt/2023';
 import styled from 'styled-components';
 
 function SectionTitle({
@@ -30,7 +30,7 @@ const Announcement = styled.div`
   font-family: 'Special Elite';
   font-weight: 400;
   font-size: 28px;
-  background-color: #FF7377;
+  background-color: #ff7377;
   cursor: pointer;
   color: white;
 `;
@@ -48,15 +48,19 @@ export default function About() {
     <Layout title="About" pageName="about">
       <Section>
         <Announcement>
-        ⚠️{' '}
-          <AnnounceLinkComponent href="https://forms.gle/eqca6sPu56yc6RB96" target="_blank">
+          ⚠️{' '}
+          <AnnounceLinkComponent
+            href="https://forms.gle/eqca6sPu56yc6RB96"
+            target="_blank"
+          >
             ANNOUNCEMENT: PUZZLE HUNT 2023 SIGN-UPS NOW OPEN
-          </AnnounceLinkComponent>{' '}⚠️
-        <Paragraph>
-          <AnnounceLinkComponent href="/puzzleHunt/2023" target="_blank">
-          Click <u>here</u> for more information.
-          </AnnounceLinkComponent>
-        </Paragraph>
+          </AnnounceLinkComponent>{' '}
+          ⚠️
+          <Paragraph>
+            <AnnounceLinkComponent href="/puzzleHunt/2023" target="_blank">
+              Click <u>here</u> for more information.
+            </AnnounceLinkComponent>
+          </Paragraph>
         </Announcement>
       </Section>
       <Section id="about">
@@ -105,5 +109,3 @@ export default function About() {
     </Layout>
   );
 }
-
-