Skip to content

Commit

Permalink
feat: add product hunt banner to landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
AmruthPillai committed Nov 24, 2023
1 parent bdcae32 commit c4d3dd8
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 4 deletions.
4 changes: 4 additions & 0 deletions apps/client/src/libs/dayjs.ts
Original file line number Diff line number Diff line change
@@ -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"),
Expand Down
7 changes: 5 additions & 2 deletions apps/client/src/pages/home/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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="/">
Expand Down
31 changes: 31 additions & 0 deletions apps/client/src/pages/home/components/product-hunt-banner.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
4 changes: 2 additions & 2 deletions apps/client/src/pages/home/sections/hero/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit c4d3dd8

Please sign in to comment.