From 4d6366248362217a6c1f6e1fa70a1c7b1529446c Mon Sep 17 00:00:00 2001 From: Efrat-Code Date: Thu, 12 Sep 2024 23:17:20 +0300 Subject: [PATCH] Add Novu Business Offer email template with 60% discount promotion --- .../notifications/novu-2024-discount.tsx | 195 ++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 content-samples/react/emails/notifications/novu-2024-discount.tsx diff --git a/content-samples/react/emails/notifications/novu-2024-discount.tsx b/content-samples/react/emails/notifications/novu-2024-discount.tsx new file mode 100644 index 0000000..c933b58 --- /dev/null +++ b/content-samples/react/emails/notifications/novu-2024-discount.tsx @@ -0,0 +1,195 @@ +import { + Body, + Container, + Head, + Heading, + Html, + Img, + Link, + Preview, + Section, + Text, +} from "@react-email/components"; +import * as React from "react"; + +interface NovuBusinessOfferProps { + offerLink?: string; +} + +export const NovuBusinessOffer = ({ offerLink }: NovuBusinessOfferProps) => ( + + + 2024 | Novu Business with 60% off! + + +
+ Novu Logo + 2024 +
+ + Start 2024 with 60% off! + +
+ + Save on monthly costs with a discounted 12-month plan!
+ Offer ends tomorrow at 3:31 PM! + +
+ +
+ + GET 60% OFF + +
+ +
+ + Unlock more features with Business Novu! + +
    +
  • + 📈 Included Monthly Triggers 250K +
    • +
  • + 📅 1 year Feed Retention +
    • +
  • + 🗂️ 30 days Activity Feed Retention +
    • +
+
+ + + Ready to reach your goals in 2024? + + + Save 60% when you upgrade to Super now. +
+ Limited time offer, ends tomorrow at 3:31 PM! + + +
+ + GET 60% OFF + +
+ + + © 2022 | Novu Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.novu.com + + + + +); + +NovuBusinessOffer.PreviewProps = { + offerLink: "https://novu.co/pricing/", +} as NovuBusinessOfferProps; + +export default NovuBusinessOffer; + +const main = { + backgroundColor: "#ffffff", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', +}; + +const container = { + margin: "0 auto", + padding: "20px 25px 48px", + maxWidth: "600px", + backgroundColor: "#fff", + borderRadius: "8px", +}; + +const heading = { + fontSize: "28px", + fontWeight: "bold", + marginTop: "24px", + color: "#4b4b4b", + textAlign: "center" as const, +}; + +const body = { + margin: "16px 0", + textAlign: "center" as const, +}; + +const subHeading = { + fontSize: "20px", + fontWeight: "600", + marginTop: "24px", + textAlign: "center" as const, +}; + +const paragraph = { + fontSize: "16px", + lineHeight: "26px", + color: "#4b4b4b", +}; + +const boldText = { + fontSize: "16px", + fontWeight: "600", + marginBottom: "4px", +}; + +const button = { + display: "inline-block", + width: "50%", + fontFamily: "Arial, sans-serif", + fontSize: "16px", + fontWeight: "bold", + textAlign: "center" as const, + color: "#ffffff", + backgroundColor: "#3c4dff", + padding: "12px 0", + borderRadius: "12px", + textDecoration: "none", +}; + +const center = { + textAlign: "center" as const, + margin: "24px 0", +}; + +const headerSection = { + backgroundColor: "rgb(26, 3, 61)", + padding: "20px", + textAlign: "center" as const, + borderRadius: "8px 8px 0 0", +}; + +const logo = { + display: "block", + margin: "0 auto", +}; + +const headerText = { + color: "#ffffff", + fontSize: "36px", + fontWeight: "bold", + textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)", + letterSpacing: "2px", + marginTop: "10px", + marginBottom: "0", +}; + +const featuresList = { + listStyleType: "none", + padding: "0", + margin: "20px 0", +}; + +const footer = { + color: "#8898aa", + fontSize: "12px", + textAlign: "center" as const, +};