From b515fc36e7f282db92e8eb509b6c5004a944fa95 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Sat, 12 Mar 2022 15:19:19 +0100
Subject: [PATCH] feat(client): add product hunt announcement banner

---
 .../shared/Announcement.module.scss           |  7 +++++
 client/components/shared/Announcement.tsx     | 26 +++++++++++++++++++
 client/constants/index.ts                     |  1 +
 client/pages/index.tsx                        |  3 +++
 4 files changed, 37 insertions(+)
 create mode 100644 client/components/shared/Announcement.module.scss
 create mode 100644 client/components/shared/Announcement.tsx

diff --git a/client/components/shared/Announcement.module.scss b/client/components/shared/Announcement.module.scss
new file mode 100644
index 00000000..c0120889
--- /dev/null
+++ b/client/components/shared/Announcement.module.scss
@@ -0,0 +1,7 @@
+.container {
+  @apply z-10 fixed top-0 left-0 right-0;
+
+  strong {
+    @apply font-semibold;
+  }
+}
diff --git a/client/components/shared/Announcement.tsx b/client/components/shared/Announcement.tsx
new file mode 100644
index 00000000..24516922
--- /dev/null
+++ b/client/components/shared/Announcement.tsx
@@ -0,0 +1,26 @@
+import { AnnouncementOutlined } from '@mui/icons-material';
+import { Alert, Collapse } from '@mui/material';
+import { useState } from 'react';
+
+import { PRODUCT_HUNT_URL } from '@/constants/index';
+
+import styles from './Announcement.module.scss';
+
+const Announcement = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div className={styles.container}>
+      <Collapse in={open}>
+        <Alert icon={<AnnouncementOutlined />} severity="info" onClose={() => setOpen(false)}>
+          <a href={PRODUCT_HUNT_URL} target="_blank" rel="noreferrer">
+            <strong>Reactive Resume is featured on Product Hunt.</strong> If you liked this app, please show your
+            support by <strong>upvoting</strong>!
+          </a>
+        </Alert>
+      </Collapse>
+    </div>
+  );
+};
+
+export default Announcement;
diff --git a/client/constants/index.ts b/client/constants/index.ts
index 94a9a709..8cadbca4 100644
--- a/client/constants/index.ts
+++ b/client/constants/index.ts
@@ -11,4 +11,5 @@ export const FILENAME_TIMESTAMP = 'DDMMYYYYHHmmss';
 // Links
 export const DONATION_URL = 'https://www.buymeacoffee.com/AmruthPillai';
 export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume';
+export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3';
 export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose';
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 45747181..c66898dd 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -8,6 +8,7 @@ import { Trans, useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import Testimony from '@/components/landing/Testimony';
+import Announcement from '@/components/shared/Announcement';
 import Footer from '@/components/shared/Footer';
 import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
 import Logo from '@/components/shared/Logo';
@@ -44,6 +45,8 @@ const Home: NextPage = () => {
 
   return (
     <main className={styles.container}>
+      <Announcement />
+
       <div className={styles.header}>
         <div className={styles.logo}>
           <Logo size={256} />