From c4d3dd89d77c0edb6534a0dec2f6fbc69436284e Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Fri, 24 Nov 2023 01:07:02 +0100
Subject: [PATCH] feat: add product hunt banner to landing page

---
 apps/client/src/libs/dayjs.ts                 |  4 +++
 .../src/pages/home/components/header.tsx      |  7 +++--
 .../home/components/product-hunt-banner.tsx   | 31 +++++++++++++++++++
 .../src/pages/home/sections/hero/index.tsx    |  4 +--
 4 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 apps/client/src/pages/home/components/product-hunt-banner.tsx

diff --git a/apps/client/src/libs/dayjs.ts b/apps/client/src/libs/dayjs.ts
index 441ac7f7..6978b9ea 100644
--- a/apps/client/src/libs/dayjs.ts
+++ b/apps/client/src/libs/dayjs.ts
@@ -1,9 +1,13 @@
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 
 dayjs.extend(localizedFormat);
 dayjs.extend(relativeTime);
+dayjs.extend(timezone);
+dayjs.extend(utc);
 
 export const dayjsLocales: Record<string, () => Promise<ILocale>> = {
   "af-ZA": () => import("dayjs/locale/af"),
diff --git a/apps/client/src/pages/home/components/header.tsx b/apps/client/src/pages/home/components/header.tsx
index 93f74f6e..60dcc9c2 100644
--- a/apps/client/src/pages/home/components/header.tsx
+++ b/apps/client/src/pages/home/components/header.tsx
@@ -3,13 +3,16 @@ import { Link } from "react-router-dom";
 
 import { Logo } from "@/client/components/logo";
 
+import { ProductHuntBanner } from "./product-hunt-banner";
+
 export const Header = () => (
   <motion.header
     className="fixed inset-x-0 top-0 z-20"
     initial={{ opacity: 0, y: -50 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ delay: 0.3, duration: 0.3 }}
+    animate={{ opacity: 1, y: 0, transition: { delay: 0.3, duration: 0.3 } }}
   >
+    <ProductHuntBanner />
+
     <div className="bg-gradient-to-b from-background to-transparent py-3">
       <div className="container flex items-center justify-between">
         <Link to="/">
diff --git a/apps/client/src/pages/home/components/product-hunt-banner.tsx b/apps/client/src/pages/home/components/product-hunt-banner.tsx
new file mode 100644
index 00000000..0fa0035d
--- /dev/null
+++ b/apps/client/src/pages/home/components/product-hunt-banner.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable lingui/no-unlocalized-strings */
+
+import { RocketLaunch } from "@phosphor-icons/react";
+import dayjs from "dayjs";
+import { motion } from "framer-motion";
+
+export const ProductHuntBanner = () => {
+  const timezonePST = "America/Los_Angeles";
+
+  const startTime = dayjs.tz("2023-11-24 00:01", timezonePST);
+  const endTime = dayjs.tz("2023-11-25 00:00", timezonePST);
+  const currentTime = dayjs().tz(timezonePST);
+
+  const isLaunchDay = currentTime.isAfter(startTime) && currentTime.isBefore(endTime);
+
+  if (!isLaunchDay) return null;
+
+  return (
+    <a href="https://www.producthunt.com/posts/reactive-resume-v4" target="_blank" rel="noreferrer">
+      <motion.div
+        initial={{ opacity: 0, y: -50, height: 32 }}
+        animate={{ opacity: 1, y: 0, transition: { delay: 0.9, duration: 0.3 } }}
+        whileHover={{ height: 48 }}
+        className="flex w-screen items-center justify-center gap-x-1.5 bg-orange-600 text-xs font-bold leading-relaxed text-orange-50"
+      >
+        <RocketLaunch weight="bold" size={12} />
+        <span>Support Reactive Resume on Product Hunt today!</span>
+      </motion.div>
+    </a>
+  );
+};
diff --git a/apps/client/src/pages/home/sections/hero/index.tsx b/apps/client/src/pages/home/sections/hero/index.tsx
index 4bbbf704..0dc7415f 100644
--- a/apps/client/src/pages/home/sections/hero/index.tsx
+++ b/apps/client/src/pages/home/sections/hero/index.tsx
@@ -17,12 +17,12 @@ export const HeroSection = () => (
 
     <div className="mx-auto max-w-7xl px-6 lg:flex lg:h-screen lg:items-center lg:px-12">
       <motion.div
-        className="mx-auto max-w-3xl shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8"
+        className="mx-auto mt-32 max-w-3xl shrink-0 lg:mx-0 lg:mt-0 lg:max-w-xl lg:pt-8"
         viewport={{ once: true }}
         initial={{ opacity: 0, x: -100 }}
         whileInView={{ opacity: 1, x: 0 }}
       >
-        <div className="mt-24 flex items-center gap-x-4 sm:mt-32 lg:mt-0">
+        <div className="hidden items-center gap-x-4 sm:flex">
           <Badge>{t`Version 4`}</Badge>
 
           <a