first

2024-03-06 12:52:30 +05:00
commit e1ca746710
56 changed files with 1042 additions and 0 deletions
@@ -0,0 +1,428 @@
+import {
+  Body,
+  Button,
+  Container,
+  Column,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import { Tailwind } from "@react-email/tailwind";
+import * as React from "react";
+
+const baseUrl = "https://files.graff.tech/mail2";
+
+function GraffEmail() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Интерактивный инструмент продаж для застройщиков</Preview>
+      <Tailwind>
+        <Body className="bg-white my-auto mx-auto font-sans">
+          <Container className="mx-auto max-w-[600px]">
+            <Section className="p-4 pb-0 mb-10">
+              <Button href="https://graff.tech" target="_blank">
+                <Img
+                  src={`${baseUrl}/logo.png`}
+                  alt=""
+                  width={104}
+                  className="mb-10"
+                />
+              </Button>
+              <Text className="text-[#798FFF] font-semibold text-[32px] text-wrap leading-[32px]">
+                Интерактивный инструмент продаж для застройщиков
+              </Text>
+              <Text className="mb-10 leading-snug">
+                Помогаем бизнесу эффективно демонстрировать свой объект.
+                <br />
+                Продавать больше и быстрее.
+              </Text>
+              <Button
+                href="tel:+78007700076"
+                className="w-full bg-[#798FFF] rounded-full flex justify-center items-center text-white py-[8px] font-semibold sm:w-fit sm:px-[24px]"
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                Связаться
+              </Button>
+            </Section>
+
+            <Section className="mb-16 px-4 rounded rounded-2 border overflow-hidden">
+              <Img
+                src={`${baseUrl}/image1.gif`}
+                alt=""
+                width={"100%"}
+                className="rounded-[8px]"
+              />
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] font-semibold text-[24px] leading-[24px] mt-0">
+                Функциональные <br /> возможности
+              </Text>
+              <Text className="leading-snug mb-10">
+                Интерактивная презентация увлекает покупателей и предоставляет
+                актуальную информацию о жилом комплексе.
+                <br />
+                Отвечает на интересующие вопросы, показывает особенности
+                и преимущества объекта.
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/1.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Вся инфраструктура на одном экране
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/2.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Виртуальный тур по жилому комплексу
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/3.gif`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Конфигуратор интерьера
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/4.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Параметрический поиск квартир
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/5.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Интеграция с CRM-системой
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/6.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Любой рендер за несколько секунд
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/7.gif`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Формирование вишлиста
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/8.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Отправка коммерческого предложения
+              </Text>
+
+              <Img
+                src={`${baseUrl}/features/9.jpg`}
+                alt=""
+                className="mb-3 rounded-[8px]"
+                width={"100%"}
+              />
+              <Text className="font-bold mb-3 text-[14px]">
+                Экскурсия в виртуальной реальности
+              </Text>
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] font-semibold text-[24px] leading-[24px]">
+                Эффективность инструмента продаж в цифрах
+              </Text>
+              <Text className="mb-10 leading-snug">
+                За 10 лет работы с застройщиками, реализовали 21 проект
+                <br />и собрали подробную статистику
+              </Text>
+              <Hr className="mb-6 border-[#F0F2F8]" />
+              <Text className="text-[#798FFF] text-[64px]">18%</Text>
+              <Text className="leading-snug">
+                увеличения конверсии
+                <br />
+                из консультации в бронирование
+              </Text>
+
+              <Hr className="mb-6 border-[#F0F2F8]" />
+              <Text className="text-[#798FFF] text-[64px]">12%</Text>
+              <Text className="leading-snug">
+                увеличения конверсии
+                <br />
+                из бронирования в продажу
+              </Text>
+
+              <Hr className="mb-6 border-[#F0F2F8]" />
+              <Text className="text-[#798FFF] text-[64px]">x2</Text>
+              <Text className="leading-snug">
+                сокращает время
+                <br />
+                реализации проекта
+              </Text>
+            </Section>
+            <Section className="px-4">
+              <Text className="text-[#798FFF] text-[24px] font-semibold">
+                Graff.estate stream – демонстрация жилого комплекса в браузере
+              </Text>
+              <Text className="leading-snug">
+                Высокий уровень графики и полное погружение покупателя в процесс
+                выбора квартиры. Местоположение и устройство значения не имеют.
+                <br />
+                Нужен только интернет.
+              </Text>
+            </Section>
+
+            <Img
+              src={`${baseUrl}/image2.png`}
+              alt=""
+              className="mb-4 -mt-8"
+              width={"100%"}
+            />
+
+            <Section className="p-4 mb-16">
+              <Button
+                href="https://stream.graff.tech"
+                target="_blank"
+                className="w-full bg-[#798FFF] rounded-full flex justify-center items-center text-white py-[12px] font-normal sm:w-fit sm:px-[32px]"
+              >
+                Посмотреть демо
+              </Button>
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] text-[24px] font-bold">
+                Победители BuildUP 2023 в номинации IT
+              </Text>
+              <Img
+                src="/static/images/winners_buildUp_image.png"
+                alt=""
+                className="mb-3"
+                width={"100%"}
+              />
+              <Text className="leading-snug">
+                в 2023 году наш продукт для застройщиков graff.estate был
+                признан лучшим в категории IT на Акселераторе технологических
+                стартапов от лидеров в строительстве и девелопменте Build UP от
+                Фонда «Сколково»
+              </Text>
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] text-[24px] font-semibold">
+                Реализованные проекты
+              </Text>
+              <Button href="https://www.youtube.com/watch?v=qyj3QICSq_I">
+                <Img
+                  src={`/static/images/projects/aivaz.png`}
+                  alt=""
+                  className="mb-3"
+                  width={"100%"}
+                />
+              </Button>
+              <Text className="text-[14px] font-bold m-0">
+                ЖК «Айвазовский City»
+              </Text>
+              <Text className="text-[#6C7493] m-0 text-[12px] mb-8">
+                Россия, Тюмень
+              </Text>
+              <Button href="https://www.youtube.com/watch?v=xXgPV0P6U0U">
+                <Img
+                  src={`/static/images/projects/revolution.png`}
+                  alt=""
+                  className="mb-3"
+                  width={"100%"}
+                />
+              </Button>
+              <Text className="text-lg font-bold m-0 text-[14px]">
+                МФК «Re:volution towers»
+              </Text>
+              <Text className="text-[#6C7493] m-0 text-[12px]">
+                Россия, Екатеринбург
+              </Text>
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] text-[24px] font-semibold">
+                Отзывы наших клиентов
+              </Text>
+              <Button href="https://www.youtube.com/watch?si=IbpH9rwxrQq8TDc9&v=j-7wAmdZ1rE&feature=youtu.be">
+                <Img
+                  src={`/static/images/reviews/1.png`}
+                  alt=""
+                  width={"100%"}
+                  className="mb-3"
+                />
+              </Button>
+              <Text className="text-lg font-bold m-0 text-[14px]">
+                ЖК «Авторский квартал Машаров»
+              </Text>
+              <Text className="text-[#6C7493] m-0 mb-3 text-[12px]">
+                Россия, Тюмень
+              </Text>
+
+              <Button href="https://www.youtube.com/watch?v=lAWF91CPOdY">
+                <Img
+                  src={`/static/images/reviews/2.png`}
+                  alt=""
+                  width={"100%"}
+                  className="mb-3"
+                />
+              </Button>
+              <Text className="text-lg font-bold m-0 text-[14px]">
+                ЖК «Айвазовский City»
+              </Text>
+              <Text className="text-[#6C7493] m-0 text-[12px]">
+                Россия, Тюмень
+              </Text>
+            </Section>
+
+            <Section className="px-6 mb-16">
+              <Text className="text-[#798FFF] text-[24px] font-semibold">
+                География проектов
+              </Text>
+
+              <Text className="text-lg font-semibold m-0">Россия</Text>
+              <Img
+                src={`/static/images/geography/russia.png`}
+                alt=""
+                width={"100%"}
+                className="mb-10"
+              />
+              <Text className="text-lg font-semibold m-0">ОАЭ, Абу-Даби </Text>
+              <Img
+                src={`/static/images/geography/abu_dhabi.png`}
+                alt=""
+                width={161}
+              />
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Text className="text-[#798FFF] text-[24px] font-semibold">
+                Наши клиенты в девелопменте
+              </Text>
+              <Section>
+                <Column className="flex flex-row gap-2 border flex-wrap justify-center items-center">
+                  {Array.from({ length: 30 }).map((_, index) => (
+                    <Img
+                      key={index}
+                      src={`/static/images/clients/${index + 1}.png`}
+                      alt=""
+                      width={140}
+                    />
+                  ))}
+                </Column>
+              </Section>
+            </Section>
+
+            <Section className="px-4 mb-16">
+              <Column className="flex flex-col sm:flex-row sm:gap-6">
+                <Section style={{ borderRight: "1px solid #F0F2F8" }}>
+                  <Text className="text-lg font-semibold my-2">Контакты</Text>
+                  <Text className="m-0">
+                    <Link
+                      href="mailto:info@graff.tech"
+                      className="text-[#35363C]"
+                    >
+                      info@graff.tech
+                    </Link>
+                  </Text>
+                  <Text className="mt-0 mb-4">
+                    <Link href="tel:+78007700076" className="text-[#35363C]">
+                      8 800 770 00 76
+                    </Link>
+                  </Text>
+                  <Text className="mt-0 mb-4">
+                    <Link
+                      href="https://graff.estate/"
+                      className="text-[#35363C]"
+                    >
+                      graff.estate
+                    </Link>
+                  </Text>
+                </Section>
+                <Hr className="border-[#F0F2F8] mb-6 sm:hidden" />
+                <Section style={{ borderRight: "1px solid #F0F2F8" }}>
+                  <Text className="text-lg font-semibold">Социальные сети</Text>
+                  <Text className="m-0">
+                    <Link
+                      href="https://t.me/GRAFFinteractive"
+                      className="text-[#35363C]"
+                    >
+                      Telegram
+                    </Link>
+                  </Text>
+                  <Text className="mt-0 mb-0">
+                    <Link
+                      href="https://vk.com/graff.interactive"
+                      className="text-[#35363C]"
+                    >
+                      VK
+                    </Link>
+                  </Text>
+                  <Text className="mt-0">
+                    <Link
+                      href="https://www.youtube.com/@GRAFFtech"
+                      className="text-[#35363C]"
+                    >
+                      YouTube
+                    </Link>
+                  </Text>
+                </Section>
+                <Hr className="border-[#F0F2F8] sm:hidden" />
+              </Column>
+            </Section>
+          </Container>
+          <Section className="bg-[#F0F2F9] px-4 py-8 sm:px-14">
+            <Button href="https://graff.tech" target="_blank">
+              <Img src={`${baseUrl}/logo.png`} alt="" width={120} height={46} />
+            </Button>
+
+            <Text className="text-[#C1C7E8] leading-snug mb-0">
+              © 2023 GRAFF interactive.
+              <br />
+              Все права защищены
+            </Text>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+export default GraffEmail;
@@ -0,0 +1,150 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+interface NotionMagicLinkEmailProps {
+  loginCode?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "";
+
+export const NotionMagicLinkEmail = ({
+  loginCode,
+}: NotionMagicLinkEmailProps) => (
+  <Html>
+    <Head />
+    <Preview>Log in with this magic link</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Heading style={h1}>Login</Heading>
+        <Link
+          href="https://notion.so"
+          target="_blank"
+          style={{
+            ...link,
+            display: "block",
+            marginBottom: "16px",
+          }}
+        >
+          Click here to log in with this magic link
+        </Link>
+        <Text style={{ ...text, marginBottom: "14px" }}>
+          Or, copy and paste this temporary login code:
+        </Text>
+        <code style={code}>{loginCode}</code>
+        <Text
+          style={{
+            ...text,
+            color: "#ababab",
+            marginTop: "14px",
+            marginBottom: "16px",
+          }}
+        >
+          If you didn&apos;t try to login, you can safely ignore this email.
+        </Text>
+        <Text
+          style={{
+            ...text,
+            color: "#ababab",
+            marginTop: "12px",
+            marginBottom: "38px",
+          }}
+        >
+          Hint: You can set a permanent password in Settings & members → My
+          account.
+        </Text>
+        <Img
+          src={`${baseUrl}/static/notion-logo.png`}
+          width="32"
+          height="32"
+          alt="Notion's Logo"
+        />
+        <Text style={footer}>
+          <Link
+            href="https://notion.so"
+            target="_blank"
+            style={{ ...link, color: "#898989" }}
+          >
+            Notion.so
+          </Link>
+          , the all-in-one-workspace
+          <br />
+          for your notes, tasks, wikis, and databases.
+        </Text>
+      </Container>
+    </Body>
+  </Html>
+);
+
+NotionMagicLinkEmail.PreviewProps = {
+  loginCode: "sparo-ndigo-amurt-secan",
+} as NotionMagicLinkEmailProps;
+
+export default NotionMagicLinkEmail;
+
+const main = {
+  backgroundColor: "#ffffff",
+};
+
+const container = {
+  paddingLeft: "12px",
+  paddingRight: "12px",
+  margin: "0 auto",
+};
+
+const h1 = {
+  color: "#333",
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: "24px",
+  fontWeight: "bold",
+  margin: "40px 0",
+  padding: "0",
+};
+
+const link = {
+  color: "#2754C5",
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: "14px",
+  textDecoration: "underline",
+};
+
+const text = {
+  color: "#333",
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: "14px",
+  margin: "24px 0",
+};
+
+const footer = {
+  color: "#898989",
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: "12px",
+  lineHeight: "22px",
+  marginTop: "12px",
+  marginBottom: "24px",
+};
+
+const code = {
+  display: "inline-block",
+  padding: "16px 4.5%",
+  width: "90.5%",
+  backgroundColor: "#f4f4f4",
+  borderRadius: "5px",
+  border: "1px solid #eee",
+  color: "#333",
+};
@@ -0,0 +1,158 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Link,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+interface PlaidVerifyIdentityEmailProps {
+  validationCode?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "";
+
+export const PlaidVerifyIdentityEmail = ({
+  validationCode,
+}: PlaidVerifyIdentityEmailProps) => (
+  <Html>
+    <Head />
+    <Body style={main}>
+      <Container style={container}>
+        <Img
+          src={`${baseUrl}/static/plaid-logo.png`}
+          width="212"
+          height="88"
+          alt="Plaid"
+          style={logo}
+        />
+        <Text style={tertiary}>Verify Your Identity</Text>
+        <Heading style={secondary}>
+          Enter the following code to finish linking Venmo.
+        </Heading>
+        <Section style={codeContainer}>
+          <Text style={code}>{validationCode}</Text>
+        </Section>
+        <Text style={paragraph}>Not expecting this email?</Text>
+        <Text style={paragraph}>
+          Contact{" "}
+          <Link href="mailto:login@plaid.com" style={link}>
+            login@plaid.com
+          </Link>{" "}
+          if you did not request this code.
+        </Text>
+      </Container>
+      <Text style={footer}>Securely powered by Plaid.</Text>
+    </Body>
+  </Html>
+);
+
+PlaidVerifyIdentityEmail.PreviewProps = {
+  validationCode: "144833",
+} as PlaidVerifyIdentityEmailProps;
+
+export default PlaidVerifyIdentityEmail;
+
+const main = {
+  backgroundColor: "#ffffff",
+  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
+};
+
+const container = {
+  backgroundColor: "#ffffff",
+  border: "1px solid #eee",
+  borderRadius: "5px",
+  boxShadow: "0 5px 10px rgba(20,50,70,.2)",
+  marginTop: "20px",
+  maxWidth: "360px",
+  margin: "0 auto",
+  padding: "68px 0 130px",
+};
+
+const logo = {
+  margin: "0 auto",
+};
+
+const tertiary = {
+  color: "#0a85ea",
+  fontSize: "11px",
+  fontWeight: 700,
+  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
+  height: "16px",
+  letterSpacing: "0",
+  lineHeight: "16px",
+  margin: "16px 8px 8px 8px",
+  textTransform: "uppercase" as const,
+  textAlign: "center" as const,
+};
+
+const secondary = {
+  color: "#000",
+  display: "inline-block",
+  fontFamily: "HelveticaNeue-Medium,Helvetica,Arial,sans-serif",
+  fontSize: "20px",
+  fontWeight: 500,
+  lineHeight: "24px",
+  marginBottom: "0",
+  marginTop: "0",
+  textAlign: "center" as const,
+};
+
+const codeContainer = {
+  background: "rgba(0,0,0,.05)",
+  borderRadius: "4px",
+  margin: "16px auto 14px",
+  verticalAlign: "middle",
+  width: "280px",
+};
+
+const code = {
+  color: "#000",
+  display: "inline-block",
+  fontFamily: "HelveticaNeue-Bold",
+  fontSize: "32px",
+  fontWeight: 700,
+  letterSpacing: "6px",
+  lineHeight: "40px",
+  paddingBottom: "8px",
+  paddingTop: "8px",
+  margin: "0 auto",
+  width: "100%",
+  textAlign: "center" as const,
+};
+
+const paragraph = {
+  color: "#444",
+  fontSize: "15px",
+  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
+  letterSpacing: "0",
+  lineHeight: "23px",
+  padding: "0 40px",
+  margin: "0",
+  textAlign: "center" as const,
+};
+
+const link = {
+  color: "#444",
+  textDecoration: "underline",
+};
+
+const footer = {
+  color: "#000",
+  fontSize: "12px",
+  fontWeight: 800,
+  letterSpacing: "0",
+  lineHeight: "23px",
+  margin: "0",
+  marginTop: "20px",
+  fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
+  textAlign: "center" as const,
+  textTransform: "uppercase" as const,
+};
@@ -0,0 +1,152 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "";
+
+export const StripeWelcomeEmail = () => (
+  <Html>
+    <Head />
+    <Preview>You're now ready to make live transactions with Stripe!</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Section style={box}>
+          <Img
+            src={`${baseUrl}/static/stripe-logo.png`}
+            width="49"
+            height="21"
+            alt="Stripe"
+          />
+          <Hr style={hr} />
+          <Text style={paragraph}>
+            Thanks for submitting your account information. You're now ready to
+            make live transactions with Stripe!
+          </Text>
+          <Text style={paragraph}>
+            You can view your payments and a variety of other information about
+            your account right from your dashboard.
+          </Text>
+          <Button style={button} href="https://dashboard.stripe.com/login">
+            View your Stripe Dashboard
+          </Button>
+          <Hr style={hr} />
+          <Text style={paragraph}>
+            If you haven't finished your integration, you might find our{" "}
+            <Link style={anchor} href="https://stripe.com/docs">
+              docs
+            </Link>{" "}
+            handy.
+          </Text>
+          <Text style={paragraph}>
+            Once you're ready to start accepting payments, you'll just need to
+            use your live{" "}
+            <Link
+              style={anchor}
+              href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+            >
+              API keys
+            </Link>{" "}
+            instead of your test API keys. Your account can simultaneously be
+            used for both test and live requests, so you can continue testing
+            while accepting live payments. Check out our{" "}
+            <Link style={anchor} href="https://stripe.com/docs/dashboard">
+              tutorial about account basics
+            </Link>
+            .
+          </Text>
+          <Text style={paragraph}>
+            Finally, we've put together a{" "}
+            <Link
+              style={anchor}
+              href="https://stripe.com/docs/checklist/website"
+            >
+              quick checklist
+            </Link>{" "}
+            to ensure your website conforms to card network standards.
+          </Text>
+          <Text style={paragraph}>
+            We'll be here to help you with any step along the way. You can find
+            answers to most questions and get in touch with us on our{" "}
+            <Link style={anchor} href="https://support.stripe.com/">
+              support site
+            </Link>
+            .
+          </Text>
+          <Text style={paragraph}>— The Stripe team</Text>
+          <Hr style={hr} />
+          <Text style={footer}>
+            Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
+          </Text>
+        </Section>
+      </Container>
+    </Body>
+  </Html>
+);
+
+export default StripeWelcomeEmail;
+
+const main = {
+  backgroundColor: "#f6f9fc",
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+  backgroundColor: "#ffffff",
+  margin: "0 auto",
+  padding: "20px 0 48px",
+  marginBottom: "64px",
+};
+
+const box = {
+  padding: "0 48px",
+};
+
+const hr = {
+  borderColor: "#e6ebf1",
+  margin: "20px 0",
+};
+
+const paragraph = {
+  color: "#525f7f",
+
+  fontSize: "16px",
+  lineHeight: "24px",
+  textAlign: "left" as const,
+};
+
+const anchor = {
+  color: "#556cd6",
+};
+
+const button = {
+  backgroundColor: "#656ee8",
+  borderRadius: "5px",
+  color: "#fff",
+  fontSize: "16px",
+  fontWeight: "bold",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  display: "block",
+  width: "100%",
+  padding: "10px",
+};
+
+const footer = {
+  color: "#8898aa",
+  fontSize: "12px",
+  lineHeight: "16px",
+};
@@ -0,0 +1,154 @@
+import {
+  Body,
+  Button,
+  Container,
+  Column,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import { Tailwind } from "@react-email/tailwind";
+import * as React from "react";
+
+interface VercelInviteUserEmailProps {
+  username?: string;
+  userImage?: string;
+  invitedByUsername?: string;
+  invitedByEmail?: string;
+  teamName?: string;
+  teamImage?: string;
+  inviteLink?: string;
+  inviteFromIp?: string;
+  inviteFromLocation?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+  ? `https://${process.env.VERCEL_URL}`
+  : "";
+
+export const VercelInviteUserEmail = ({
+  username,
+  userImage,
+  invitedByUsername,
+  invitedByEmail,
+  teamName,
+  teamImage,
+  inviteLink,
+  inviteFromIp,
+  inviteFromLocation,
+}: VercelInviteUserEmailProps) => {
+  const previewText = `Join ${invitedByUsername} on Vercel`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="bg-white my-auto mx-auto font-sans px-2">
+          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
+            <Section className="mt-[32px]">
+              <Img
+                src={`${baseUrl}/static/vercel-logo.png`}
+                width="40"
+                height="37"
+                alt="Vercel"
+                className="my-0 mx-auto"
+              />
+            </Section>
+            <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
+              Join <strong>{teamName}</strong> on <strong>Vercel</strong>
+            </Heading>
+            <Text className="text-black text-[14px] leading-[24px]">
+              Hello {username},
+            </Text>
+            <Text className="text-black text-[14px] leading-[24px]">
+              <strong>{invitedByUsername}</strong> (
+              <Link
+                href={`mailto:${invitedByEmail}`}
+                className="text-blue-600 no-underline"
+              >
+                {invitedByEmail}
+              </Link>
+              ) has invited you to the <strong>{teamName}</strong> team on{" "}
+              <strong>Vercel</strong>.
+            </Text>
+            <Section>
+              <Row>
+                <Column align="right">
+                  <Img
+                    className="rounded-full"
+                    src={userImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+                <Column align="center">
+                  <Img
+                    src={`${baseUrl}/static/vercel-arrow.png`}
+                    width="12"
+                    height="9"
+                    alt="invited you to"
+                  />
+                </Column>
+                <Column align="left">
+                  <Img
+                    className="rounded-full"
+                    src={teamImage}
+                    width="64"
+                    height="64"
+                  />
+                </Column>
+              </Row>
+            </Section>
+            <Section className="text-center mt-[32px] mb-[32px]">
+              <Button
+                className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
+                href={inviteLink}
+              >
+                Join the team
+              </Button>
+            </Section>
+            <Text className="text-black text-[14px] leading-[24px]">
+              or copy and paste this URL into your browser:{" "}
+              <Link href={inviteLink} className="text-blue-600 no-underline">
+                {inviteLink}
+              </Link>
+            </Text>
+            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+            <Text className="text-[#666666] text-[12px] leading-[24px]">
+              This invitation was intended for{" "}
+              <span className="text-black">{username}</span>. This invite was
+              sent from <span className="text-black">{inviteFromIp}</span>{" "}
+              located in{" "}
+              <span className="text-black">{inviteFromLocation}</span>. If you
+              were not expecting this invitation, you can ignore this email. If
+              you are concerned about your account's safety, please reply to
+              this email to get in touch with us.
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+VercelInviteUserEmail.PreviewProps = {
+  username: "alanturing",
+  userImage: `${baseUrl}/static/vercel-user.png`,
+  invitedByUsername: "Alan",
+  invitedByEmail: "alan.turing@example.com",
+  teamName: "Enigma",
+  teamImage: `${baseUrl}/static/vercel-team.png`,
+  inviteLink: "https://vercel.com/teams/invite/foo",
+  inviteFromIp: "204.13.186.218",
+  inviteFromLocation: "São Paulo, Brazil",
+} as VercelInviteUserEmailProps;
+
+export default VercelInviteUserEmail;