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 ( +
+ + } severity="info" onClose={() => setOpen(false)}> + + Reactive Resume is featured on Product Hunt. If you liked this app, please show your + support by upvoting! + + + +
+ ); +}; + +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 (
+ +