Update landing page

apps/marketing/src/app/layout.tsx

@@ -1,6 +1,6 @@
+import "@unsend/ui/styles/globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "@unsend/ui/styles/globals.css";
 import { ThemeProvider } from "@unsend/ui/theme-provider";
 
 const inter = Inter({ subsets: ["latin"] });

apps/marketing/src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import { motion } from "framer-motion";
 import {
@@ -7,15 +7,123 @@ import {
   MegaphoneIcon,
   ChatBubbleOvalLeftEllipsisIcon,
   BellAlertIcon,
+  DevicePhoneMobileIcon,
 } from "@heroicons/react/24/solid";
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  AlignLeft,
+  AlignRight,
+  AlignCenter,
+  Bold,
+  Italic,
+  ListOrdered,
+} from "lucide-react";
 import { formatDate } from "date-fns";
+import { Code } from "@unsend/ui/src/code"
+import { hi } from "date-fns/locale";
+
+
+const jsCode = `const requestOptions = {
+  method: "POST",
+  headers: {
+    "Accept": "application/json",
+    "Content-Type": "application/json",
+    "Authorization": "Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
+  },
+  body: JSON.stringify({
+    "to": "koushikmohan1996@gmail.com",
+    "from": "hello@test.splitpro.app",
+    "subject": "Test mail",
+    "html": "<p>Hello this is a test mail</p>"
+  }),
+  redirect: "follow"
+};
+
+fetch("http://localhost:3000/api/v1/emails", requestOptions)
+  .then(response => response.text())
+  .then(result => console.log(result))
+  .catch(error => console.error(error));
+`;
+
+const pythonCode = `import requests
+import json
+
+url = "http://localhost:3000/api/v1/emails"
+
+payload = json.dumps({
+  "to": "koushikmohan1996@gmail.com",
+  "from": "hello@test.splitpro.app",
+  "subject": "Test mail",
+  "html": "<p>Hello this is a test mail</p>"
+})
+headers = {
+  'Accept': 'application/json',
+  'Content-Type': 'application/json',
+  'Authorization': 'Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
+}
+
+response = requests.request("POST", url, headers=headers, data=payload)
+
+print(response.text)`;
+
+const rubyCode = `require 'uri'
+require 'net/http'
+require 'json'
+
+url = URI("http://localhost:3000/api/v1/emails")
+
+http = Net::HTTP.new(url.host, url.port)
+request = Net::HTTP::Post.new(url)
+request["Accept"] = 'application/json'
+request["Content-Type"] = 'application/json'
+request["Authorization"] = 'Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
+request.body = JSON.dump({
+  "to" => "koushikmohan1996@gmail.com",
+  "from" => "hello@test.splitpro.app",
+  "subject" => "Test mail",
+  "html" => "<p>Hello this is a test mail</p>"
+})
+
+response = http.request(request)
+puts response.read_body`;
+
+const phpCode = `$url = "http://localhost:3000/api/v1/emails";
+
+$payload = json_encode(array(
+  "to" => "koushikmohan1996@gmail.com",
+  "from" => "hello@test.splitpro.app",
+  "subject" => "Test mail",
+  "html" => "<p>Hello this is a test mail</p>"
+));
+
+$headers = array(
+  "Accept: application/json",
+  "Content-Type: application/json",
+  "Authorization: Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
+);
+
+$ch = curl_init($url);
+curl_setopt($ch, CURLOPT_POST, true);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+
+$response = curl_exec($ch);
+if (curl_errno($ch)) {
+    echo 'Error:' . curl_error($ch);
+} else {
+    echo $response;
+}`;
+
 
 export default function Home() {
   return (
     <div className="bg-neutral-950 pb-20">
-      <div className="h-screen w-full relative flex flex-col items-center justify-center ">
+      <div className="h-screen w-full relative flex flex-col items-center   justify-center ">
-        <div className="max-w-4xl mx-auto p-4">
+        <div className=" w-full lg:max-w-4xl mx-auto p-4 -mt-40 lg:mt-0">
-          <h1 className="relative z-10 text-neutral-100 text-lg md:text-6xl md:leading-[4.5rem]    text-center font-sans font-bold">
+          <h1 className="relative z-10 text-neutral-100 text-2xl md:text-6xl md:leading-[4.5rem]    text-center font-sans font-bold">
             Open source sending infrastructure for{" "}
             <span className="bg-clip-text text-transparent bg-gradient-to-r  from-[#06b6d4] to-[#10b981]">
               developers
@@ -42,12 +150,12 @@ export default function Home() {
 
         {/* <BackgroundBeams /> */}
       </div>
-      <div className=" max-w-5xl mx-auto flex flex-col gap-40">
+      <div className=" w-full lg:max-w-5xl mx-auto flex flex-col gap-40">
         <div>
-          <p className="text-center text-6xl ">Reach your users</p>
+          <p className="text-center text-3xl lg:text-6xl ">Reach your users</p>
         </div>
-        <div className="flex">
+        <div className="flex gap-10 flex-col lg:flex-row px-8 lg:px-0">
-          <div className="w-1/2">
+          <div className="lg:w-1/2">
             <div className="flex flex-col gap-2">
               <EnvelopeIcon className="h-10 w-10 text-fuchsia-500" />
               <p className="text-3xl font-semibold">Transactional Mail</p>
@@ -58,7 +166,7 @@ export default function Home() {
               <li>Get notified of email bounces and complaints.</li>
             </ul>
           </div>
-          <div className="w-1/2 flex flex-col  border rounded-lg p-8">
+          <div className="lg:w-1/2 flex flex-col  border rounded-lg p-8">
             <div className=" border-l border-dashed flex flex-col gap-8">
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
@@ -140,61 +248,211 @@ export default function Home() {
             </div>
           </div>
         </div>
-        <div className="flex">
+        <div className="flex gap-10 flex-col lg:flex-row px-8 lg:px-0">
-          <div className="w-1/2">
+          <div className="lg:w-1/2">
             <div className="flex flex-col gap-2">
               <MegaphoneIcon className="h-10 w-10 text-indigo-500" />
               <p className="text-3xl font-semibold">Marketing Mail</p>
             </div>
             <ul className="flex flex-col gap-4 mt-8">
               <li>Manage newsletters, changelogs, and broadcasts easily.</li>
-              <li>Use our no-code email builder and templates.</li>
+              <li>
+                Use our no-code email builder and templates that works on all
+                email clients.
+              </li>
               <li>Measure engagement using click and open tracking.</li>
-              <li>We will manage subscriptions for you.</li>
+              <li>
+                Focus on the content and we will handle the subscription for
+                you.
+              </li>
             </ul>
           </div>
-          <div className="w-1/2"></div>
+          <div className="lg:w-1/2">
-        </div>
+            <motion.div
-        <div className="flex">
+              initial="hidden"
-          <div className="w-1/2">
+              whileInView="visible"
-            <div className="flex flex-col gap-2">
+              transition={{
-              <ChatBubbleOvalLeftEllipsisIcon className="h-10 w-10 text-emerald-500" />
+                duration: 0.3,
-              <div className="flex gap-4 items-center">
+                type: "spring",
-                <p className="text-3xl font-semibold">SMS</p>
+                damping: 13,
-                <div className="rounded-md border px-2 py-1 text-xs bg-neutral-900">
+                stiffness: 100,
-                  Coming soon
+                delayChildren: 0.5,
-                </div>
+                staggerChildren: 0.05,
+              }}
+              viewport={{ once: true }}
+              className="w-full  rounded-lg border"
+              variants={{
+                hidden: { opacity: 0, scale: 0.5 },
+                visible: { opacity: 1, scale: 1 },
+              }}
+            >
+              <div className="flex gap-4 justify-between border-b p-4">
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <Heading1 />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <Heading2 />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <Heading3 />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <AlignLeft />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <AlignCenter />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <AlignRight />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <Bold />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <Italic />
+                </motion.div>
+                <motion.div
+                  className=""
+                  variants={{
+                    hidden: { opacity: 0, scale: 0.8 },
+                    visible: { opacity: 1, scale: 1 },
+                  }}
+                >
+                  <ListOrdered />
+                </motion.div>
               </div>
-            </div>
+              <motion.div
-            <ul className="flex flex-col gap-4 mt-8">
+                className="h-[200px]  p-4"
-              <li>Manage newsletters, changelogs, and broadcasts easily.</li>
+                variants={{
-              <li>Use our no-code email builder and templates.</li>
+                  hidden: { opacity: 0, scale: 0.95 },
-              <li>Measure engagement using click and open tracking.</li>
+                  visible: { opacity: 1, scale: 1 },
-              <li>We will manage subscriptions for you.</li>
+                }}
-            </ul>
+              >
-          </div>
+                <div className="">
-          <div className="w-1/2"></div>
+                  <div className="text-xl text-center">Welcome to unsend!</div>
-        </div>
+                  <p className="text-center mt-8">
-        <div className="flex">
+                    Finally an open source alternative for Resend, Mailgun,
-          <div className="w-1/2">
+                    Sendgrid and postmark.
-            <div className="flex flex-col gap-2">
+                  </p>
-              <BellAlertIcon className="h-10 w-10 text-cyan-500" />
-              <div className="flex gap-4 items-center">
-                <p className="text-3xl font-semibold">Push notification</p>
-                <div className="rounded-md border px-2 py-1 text-xs bg-neutral-900">
-                  Coming soon
                 </div>
-              </div>
+              </motion.div>
-            </div>
+            </motion.div>
-            <ul className="flex flex-col gap-4 mt-8">
-              <li>Manage newsletters, changelogs, and broadcasts easily.</li>
-              <li>Use our no-code email builder and templates.</li>
-              <li>Measure engagement using click and open tracking.</li>
-              <li>We will manage subscriptions for you.</li>
-            </ul>
           </div>
-          <div className="w-1/2"></div>
         </div>
+        <div className="flex gap-10 flex-col lg:flex-row px-8 lg:px-0">
+          <div className="lg:w-1/2">
+            <div className="flex flex-col gap-3">
+              <DevicePhoneMobileIcon className="h-10 w-10 text-emerald-500" />
+              <p className="text-3xl font-semibold">SMS & Push notification</p>
+            </div>
+
+          </div>
+          <div className="lg:w-1/2">
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              transition={{
+                duration: 0.4,
+                type: "spring",
+                damping: 13,
+                stiffness: 100,
+                delayChildren: 0.4,
+                staggerChildren: 0.05,
+              }}
+              viewport={{ once: true }}
+              variants={{
+                hidden: { opacity: 0, scale: 0.7 },
+                visible: { opacity: 1, scale: 1 },
+              }}
+              className="w-full h-[15rem]  rounded-lg border flex justify-center items-center"
+            >
+              <div className="text-3xl">{'Coming soon!'.split('').map((l, i) => (
+                <motion.span
+                  key={i}
+                  variants={{
+                    hidden: { opacity: 0, },
+                    visible: { opacity: 1 },
+                  }}
+                >{l}</motion.span>
+              ))}</div>
+            </motion.div>
+          </div>
+        </div>
+        <div className=" px-8 lg:px-0 mt-20">
+          <p className="text-center text-3xl lg:text-6xl  ">Integrate in minutes</p>
+          <motion.div
+            className="mt-10"
+            initial={{ opacity: 0, scale: 0.7 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            transition={{
+              duration: 0.4, type: "spring",
+              damping: 13,
+              stiffness: 100,
+              delay: 0.2
+
+            }}>
+            <Code
+              codeBlocks={[
+                { language: "js", code: jsCode },
+                { language: "ruby", code: rubyCode },
+                { language: "php", code: phpCode },
+                { language: "python", code: pythonCode },
+              ]}
+              codeClassName="h-[55vh]"
+            />
+          </motion.div>
+        </div>
+
+
       </div>
       <div className="">
         <div className="flex justify-center mt-40">

apps/marketing/tailwind.config.ts

@@ -4,5 +4,8 @@ import path from "path";
 
 export default {
   ...sharedConfig,
-  content: ["./src/**/*.tsx"],
+  content: [
+    "./src/**/*.tsx",
+    `${path.join(require.resolve("@unsend/ui"), "..")}/**/*.{ts,tsx}`,
+  ],
 } satisfies Config;

apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx

@@ -151,6 +151,7 @@ export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
             { language: "php", code: phpCode },
             { language: "python", code: pythonCode },
           ]}
+          codeClassName="max-w-[38rem] h-[20rem]"
         />
         <div className="flex justify-end w-full">
           <Button

apps/web/src/app/(dashboard)/emails/email-details.tsx

@@ -57,7 +57,7 @@ export default function EmailDetails({ emailId }: { emailId: string }) {
                     <div className=" -ml-2.5">
                       <EmailStatusIcon status={evt.status} />
                     </div>
-                    <div className="-mt-1">
+                    <div className="-mt-[0.125rem]">
                       <div className=" capitalize font-medium">
                         <EmailStatusBadge status={evt.status} />
                       </div>

apps/web/src/app/(dashboard)/emails/email-status-badge.tsx

@@ -12,7 +12,7 @@ export const EmailStatusBadge: React.FC<{ status: EmailStatus }> = ({
       badgeColor = "bg-emerald-500/10 text-emerald-500 border-emerald-600/10";
       break;
     case "BOUNCED":
-      badgeColor = "bg-red-500/10 text-red-800 border-red-600/10";
+      badgeColor = "bg-red-500/10 text-red-600 border-red-600/10";
       break;
     case "CLICKED":
       badgeColor = "bg-cyan-500/10 text-cyan-600 border-cyan-600/10";
@@ -47,27 +47,27 @@ export const EmailStatusIcon: React.FC<{ status: EmailStatus }> = ({
 
   switch (status) {
     case "DELIVERED":
-      outsideColor = "bg-emerald-500/40";
+      outsideColor = "bg-emerald-500/30";
       insideColor = "bg-emerald-500";
       break;
     case "BOUNCED":
-      outsideColor = "bg-red-500/40";
+      outsideColor = "bg-red-500/30";
       insideColor = "bg-red-500";
       break;
     case "CLICKED":
-      outsideColor = "bg-cyan-500/40";
+      outsideColor = "bg-cyan-500/30";
       insideColor = "bg-cyan-500";
       break;
     case "OPENED":
-      outsideColor = "bg-indigo-500/40";
+      outsideColor = "bg-indigo-500/30";
       insideColor = "bg-indigo-500";
       break;
     case "DELIVERY_DELAYED":
-      outsideColor = "bg-yellow-500/40";
+      outsideColor = "bg-yellow-500/30";
       insideColor = "bg-yellow-500";
       break;
     case "COMPLAINED":
-      outsideColor = "bg-yellow-500/40";
+      outsideColor = "bg-yellow-500/30";
       insideColor = "bg-yellow-500";
       break;
     default:

apps/web/src/server/public-api/api/domains/get-domains.ts

@@ -1,8 +1,8 @@
 import { createRoute, z } from "@hono/zod-openapi";
 import { DomainSchema } from "~/lib/zod/domain-schema";
-import { PublicAPIApp } from "../hono";
+import { PublicAPIApp } from "~/server/public-api/hono";
-import { db } from "../../db";
+import { db } from "~/server/db";
-import { getTeamFromToken } from "../auth";
+import { getTeamFromToken } from "~/server/public-api/auth";
 
 const route = createRoute({
   method: "get",

apps/web/src/server/public-api/api/emails/send-email.ts

@@ -1,6 +1,6 @@
 import { createRoute, z } from "@hono/zod-openapi";
-import { PublicAPIApp } from "../hono";
+import { PublicAPIApp } from "~/server/public-api/hono";
-import { getTeamFromToken } from "../auth";
+import { getTeamFromToken } from "~/server/public-api/auth";
 import { sendEmail } from "~/server/service/email-service";
 
 const route = createRoute({

apps/web/src/server/public-api/auth.ts

@@ -3,6 +3,9 @@ import { hashToken } from "../auth";
 import { db } from "../db";
 import { UnsendApiError } from "./api-error";
 
+/**
+ * Gets the team from the token. Also will check if the token is valid.
+ */
 export const getTeamFromToken = async (c: Context) => {
   const authHeader = c.req.header("Authorization");
   if (!authHeader) {
@@ -11,7 +14,7 @@ export const getTeamFromToken = async (c: Context) => {
       message: "No Authorization header provided",
     });
   }
-  const token = authHeader.split(" ")[1]; // Assuming the Authorization header is in the format "Bearer <token>"
+  const token = authHeader.split(" ")[1];
   if (!token) {
     throw new UnsendApiError({
       code: "UNAUTHORIZED",
@@ -38,5 +41,15 @@ export const getTeamFromToken = async (c: Context) => {
     });
   }
 
+  // No await so it won't block the request. Need to be moved to a queue in future
+  db.apiKey.update({
+    where: {
+      tokenHash: hashedToken,
+    },
+    data: {
+      lastUsed: new Date(),
+    },
+  });
+
   return team;
 };

apps/web/src/server/public-api/index.ts

@@ -1,10 +1,13 @@
 import { getApp } from "./hono";
-import getDomains from "./api/get-domains";
+import getDomains from "./api/domains/get-domains";
-import sendEmail from "./api/send-email";
+import sendEmail from "./api/emails/send-email";
 
 export const app = getApp();
 
+/**Domain related APIs */
 getDomains(app);
+
+/**Email related APIs */
 sendEmail(app);
 
 export default app;

packages/ui/src/code.tsx

@@ -9,6 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 import { Button } from "./button";
 import { ClipboardCopy, Check } from "lucide-react";
 import { useState } from "react";
+import { cn } from "../lib/utils";
 
 type Language = "js" | "ruby" | "php" | "python";
 
@@ -17,6 +18,7 @@ type CodeProps = {
     language: Language;
     code: string;
   }[];
+  codeClassName?: string;
 };
 
 SyntaxHighlighter.registerLanguage("js", js);
@@ -24,7 +26,7 @@ SyntaxHighlighter.registerLanguage("ruby", ruby);
 SyntaxHighlighter.registerLanguage("php", php);
 SyntaxHighlighter.registerLanguage("python", python);
 
-export const Code: React.FC<CodeProps> = ({ codeBlocks }) => {
+export const Code: React.FC<CodeProps> = ({ codeBlocks, codeClassName }) => {
   const [selectedTab, setSelectedTab] = useState(
     codeBlocks[0]?.language ?? "js"
   );
@@ -41,7 +43,7 @@ export const Code: React.FC<CodeProps> = ({ codeBlocks }) => {
   };
 
   return (
-    <div className="rounded-md bg-background border">
+    <div className="rounded-xl bg-background border">
       <Tabs
         defaultValue={codeBlocks[0]?.language}
         onValueChange={(val) => setSelectedTab(val as Language)}
@@ -53,7 +55,7 @@ export const Code: React.FC<CodeProps> = ({ codeBlocks }) => {
                 <TabsTrigger
                   key={block.language}
                   value={block.language}
-                  className="data-[state=active]:bg-accent py-0.5 px-4"
+                  className="data-[state=active]:bg-accent py-0.5 px-4 "
                 >
                   {block.language}
                 </TabsTrigger>
@@ -81,9 +83,9 @@ export const Code: React.FC<CodeProps> = ({ codeBlocks }) => {
           <TabsContent
             key={block.language}
             value={block.language}
-            className="py-2"
+            className="mt-0"
           >
-            <div className="overflow-auto max-w-[38rem] h-[20rem]">
+            <div className={cn("overflow-auto", codeClassName)}>
               <SyntaxHighlighter language={block.language} style={codeTheme}>
                 {block.code}
               </SyntaxHighlighter>