remove banner on mobile/tablet devices

This commit is contained in:
Amruth Pillai
2024-03-25 15:08:39 +01:00
parent 890875ad9d
commit f6c2ae7504
19 changed files with 726 additions and 798 deletions

View File

@ -3,21 +3,20 @@
import { HandHeart } from "@phosphor-icons/react";
import { motion } from "framer-motion";
export const DonationBanner = () => {
return (
<a href="https://opencollective.com/Reactive-Resume" target="_blank" rel="noreferrer">
<motion.div
whileHover={{ height: 48 }}
initial={{ opacity: 0, y: -50, height: 32 }}
animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
className="flex w-screen items-center justify-center gap-x-2 bg-zinc-800 text-xs font-bold leading-relaxed text-zinc-50"
>
<HandHeart weight="bold" size={14} className="shrink-0" />
<span>
If this project has helped you, please consider donating to Reactive Resume as we're
running out of server resources with the increasing number of users.
</span>
</motion.div>
</a>
);
};
export const DonationBanner = () => (
<motion.a
target="_blank"
rel="noreferrer"
href="https://opencollective.com/Reactive-Resume"
whileHover={{ height: 48 }}
initial={{ opacity: 0, y: -50, height: 32 }}
animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
className="hidden w-screen items-center justify-center gap-x-2 bg-zinc-800 text-xs font-bold leading-relaxed text-zinc-50 lg:flex"
>
<HandHeart weight="bold" size={14} className="shrink-0" />
<span>
If this project has helped you, please consider donating to Reactive Resume as we're running
out of server resources with the increasing number of users.
</span>
</motion.a>
);