gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update landing page

Browse Source
This commit is contained in:
KMKoushik
2024-04-26 10:04:59 +10:00
parent 3b6d2dec25
commit 163aca189b
11 changed files with 354 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/marketing/src/app/layout.tsx
View File

@@ -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"] });

360
apps/marketing/src/app/page.tsx
View File

@@ -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="max-w-4xl mx-auto p-4">
<h1 className="relative z-10 text-neutral-100 text-lg md:text-6xl md:leading-[4.5rem] text-center font-sans font-bold">
<div className="h-screen w-full relative flex flex-col items-center justify-center ">
<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-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="w-1/2">
<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-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="w-1/2">
<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-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>
<div className="flex">
<div className="w-1/2">
<div className="flex flex-col gap-2">
<ChatBubbleOvalLeftEllipsisIcon className="h-10 w-10 text-emerald-500" />
<div className="flex gap-4 items-center">
<p className="text-3xl font-semibold">SMS</p>
<div className="rounded-md border px-2 py-1 text-xs bg-neutral-900">
Coming soon
</div>
<div className="lg:w-1/2">
<motion.div
initial="hidden"
whileInView="visible"
transition={{
duration: 0.3,
type: "spring",
damping: 13,
stiffness: 100,
delayChildren: 0.5,
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>
<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">
<div className="w-1/2">
<div className="flex flex-col gap-2">
<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
<motion.div
className="h-[200px] p-4"
variants={{
hidden: { opacity: 0, scale: 0.95 },
visible: { opacity: 1, scale: 1 },
}}
>
<div className="">
<div className="text-xl text-center">Welcome to unsend!</div>
<p className="text-center mt-8">
Finally an open source alternative for Resend, Mailgun,
Sendgrid and postmark.
</p>
</div>
</div>
</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>
</motion.div>
</motion.div>
</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">

5
apps/marketing/tailwind.config.ts
View File

@@ -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;

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

@@ -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

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

@@ -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>

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

@@ -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:

6
apps/web/src/server/public-api/api/get-domains.ts → apps/web/src/server/public-api/api/domains/get-domains.ts
View File

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

4
apps/web/src/server/public-api/api/send-email.ts → apps/web/src/server/public-api/api/emails/send-email.ts
View File

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

15
apps/web/src/server/public-api/auth.ts
View File

@@ -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;
};

7
apps/web/src/server/public-api/index.ts
View File

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