Add transactional mail animations

apps/marketing/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "date-fns": "^3.6.0",
     "framer-motion": "^11.0.24",
     "lucide-react": "^0.359.0",
     "next": "14.1.4",

apps/marketing/src/app/page.tsx

@@ -8,6 +8,7 @@ import {
   ChatBubbleOvalLeftEllipsisIcon,
   BellAlertIcon,
 } from "@heroicons/react/24/solid";
+import { formatDate } from "date-fns";
 
 export default function Home() {
   return (
@@ -57,23 +58,86 @@ export default function Home() {
               <li>Get notified of email bounces and complaints.</li>
             </ul>
           </div>
-          <div className="w-1/2">
+          <div className="w-1/2 flex flex-col  border rounded-lg p-8">
-            {/* <Code
+            <div className=" border-l border-dashed flex flex-col gap-8">
-              codeBlocks={[
+              <motion.div
-                {
+                initial={{ opacity: 0, y: 20 }}
-                  language: "js",
+                whileInView={{ opacity: 1, y: 0 }}
-                  code: `const unsend = require("unsend");
+                transition={{
-
+                  duration: 0.3,
-const email = unsend.email();
+                  damping: 15,
-
+                  stiffness: 100,
-email.send({
+                  type: "spring",
-  to: "user@example.com",
+                }}
-  subject: "Hello, World!",
+                viewport={{ once: true }}
-  text: "Hello, World!",
+                className="flex flex-col gap-4"
-});`,
+              >
-                },
+                <div className="flex gap-5 items-start">
-              ]}
+                  <div className=" -ml-2.5">
-            /> */}
+                    <div
+                      className={`flex justify-center items-center p-1.5 bg-gray-600/50 rounded-full`}
+                    >
+                      <div className={`h-2 w-2 rounded-full bg-gray-600`}></div>
+                    </div>
+                  </div>
+                  <div className="-mt-1">
+                    <div className=" capitalize font-medium">
+                      <div
+                        className={` text-center w-[130px] rounded capitalize py-1 text-xs bg-gray-400/10 text-gray-400 border-gray-400/10`}
+                      >
+                        Sent
+                      </div>
+                    </div>
+                    <div className="text-xs text-muted-foreground mt-2">
+                      {formatDate(Date.now() - 100000, "MMM dd, hh:mm a")}
+                    </div>
+                    <div className="mt-1 text-primary/80">
+                      We received your request and sent the email to recipient's
+                      server.
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+              <motion.div
+                initial={{ opacity: 0, y: 25 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{
+                  duration: 0.3,
+                  damping: 15,
+                  stiffness: 100,
+                  type: "spring",
+                  delay: 0.3,
+                }}
+                viewport={{ once: true }}
+              >
+                <div className="flex gap-5 items-start">
+                  <div className=" -ml-2.5">
+                    <div
+                      className={`flex justify-center items-center p-1.5 bg-emerald-500/50 rounded-full`}
+                    >
+                      <div
+                        className={`h-2 w-2 rounded-full bg-emerald-500`}
+                      ></div>
+                    </div>
+                  </div>
+                  <div className="-mt-1">
+                    <div className=" capitalize font-medium">
+                      <div
+                        className={` text-center w-[130px] rounded capitalize py-1 text-xs bg-emerald-500/10 text-emerald-500 border-emerald-600/10`}
+                      >
+                        Delivered
+                      </div>
+                    </div>
+                    <div className="text-xs text-muted-foreground mt-2">
+                      {formatDate(new Date(), "MMM dd, hh:mm a")}
+                    </div>
+                    <div className="mt-1 text-primary/80">
+                      Mail is successfully delivered to the recipient.
+                    </div>
+                  </div>
+                </div>
+              </motion.div>
+            </div>
           </div>
         </div>
         <div className="flex">

pnpm-lock.yaml

@@ -30,6 +30,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.1.3
         version: 2.1.3(react@18.2.0)
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
       framer-motion:
         specifier: ^11.0.24
         version: 11.0.24(react-dom@18.2.0)(react@18.2.0)
@@ -4483,7 +4486,7 @@ packages:
       enhanced-resolve: 5.16.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.3
       is-core-module: 2.13.1