rebrand to useSend (#210)
This commit is contained in:
KM Koushik
GitHub
@@ -1,120 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Code } from "@unsend/ui/src/code";
|
||||
|
||||
const jsCode = `const requestOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "Bearer us_1a2b3c4d5e6f7f8g"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"to": "test@company.com",
|
||||
"from": "hello@unsend.dev",
|
||||
"subject": "Unsend email",
|
||||
"html": "<p>Unsend is the best open source product to send emails</p>"
|
||||
}),
|
||||
};
|
||||
|
||||
fetch("http://unsend.dev/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://unsend.dev/api/v1/emails"
|
||||
|
||||
payload = json.dumps({
|
||||
"to": "test@company.com",
|
||||
"from": "hello@unsend.dev",
|
||||
"subject": "Unsend email",
|
||||
"html": "<p>Unsend is the best open source product to send emails</p>"
|
||||
})
|
||||
headers = {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer us_1a2b3c4d5e6f7f8g'
|
||||
}
|
||||
|
||||
response = requests.request("POST", url, headers=headers, data=payload)
|
||||
|
||||
print(response.text)`;
|
||||
|
||||
const rubyCode = `require 'uri'
|
||||
require 'net/http'
|
||||
require 'json'
|
||||
|
||||
url = URI("http://unsend.dev/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_1a2b3c4d5e6f7f8g'
|
||||
request.body = JSON.dump({
|
||||
"to" => "test@company.com",
|
||||
"from" => "hello@unsend.dev",
|
||||
"subject" => "Unsend email",
|
||||
"html" => "<p>Unsend is the best open source product to send emails</p>"
|
||||
})
|
||||
|
||||
response = http.request(request)
|
||||
puts response.read_body`;
|
||||
|
||||
const phpCode = `$url = "http://unsend.dev/api/v1/emails";
|
||||
|
||||
$payload = json_encode(array(
|
||||
"to" => "test@company.com",
|
||||
"from" => "hello@unsend.dev",
|
||||
"subject" => "Unsend email",
|
||||
"html" => "<p>Unsend is the best open source product to send emails</p>"
|
||||
));
|
||||
|
||||
$headers = array(
|
||||
"Accept: application/json",
|
||||
"Content-Type: application/json",
|
||||
"Authorization: Bearer us_1a2b3c4d5e6f7f8g"
|
||||
);
|
||||
|
||||
$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;
|
||||
}`;
|
||||
|
||||
const cUrl = `curl --location 'https://unsend.dev/v1/emails' \\
|
||||
--header 'Accept: application/json' \\
|
||||
--header 'Content-Type: application/json' \\
|
||||
--header 'Authorization: Bearer us_44c1071bd30058322f89a09805522d7341a47b5e' \\
|
||||
--data-raw '{
|
||||
"to": "test@company.com",
|
||||
"from": "hello@unsend.dev",
|
||||
"subject": "Unsend email",
|
||||
"html": "<p>Unsend is the best open source product to send emails</p>",
|
||||
}'`;
|
||||
|
||||
export default function IntegrationCode() {
|
||||
return (
|
||||
<Code
|
||||
codeBlocks={[
|
||||
{ language: "js", code: jsCode },
|
||||
{ language: "ruby", code: rubyCode },
|
||||
{ language: "php", code: phpCode },
|
||||
{ language: "python", code: pythonCode },
|
||||
{ language: "curl", code: cUrl },
|
||||
]}
|
||||
codeClassName="h-[500px] "
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Editor } from "@unsend/email-editor";
|
||||
import { Button } from "@unsend/ui/src/button";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function EditorPage() {
|
||||
const [json, setJson] = useState<Record<string, any>>({
|
||||
type: "doc",
|
||||
content: [],
|
||||
});
|
||||
|
||||
const onConvertToHtml = async () => {
|
||||
console.log(json)
|
||||
const resp = await fetch("http://localhost:3000/api/to-html", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(json),
|
||||
});
|
||||
|
||||
const respJson = await resp.json();
|
||||
console.log(respJson);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" max-w-2xl mx-auto">
|
||||
<h1 className="text-center text-2xl py-8">
|
||||
Try out unsend's email editor
|
||||
</h1>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Button className="w-[200px]" onClick={onConvertToHtml}>
|
||||
Convert to HTML
|
||||
</Button>
|
||||
|
||||
<Editor onUpdate={(editor) => setJson(editor.getJSON())} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@@ -1,149 +1,38 @@
|
||||
import "@unsend/ui/styles/globals.css";
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { ThemeProvider } from "@unsend/ui";
|
||||
import Script from "next/script";
|
||||
import Link from "next/link";
|
||||
import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
|
||||
import Image from "next/image";
|
||||
import { DocumentChartBarIcon } from "@heroicons/react/24/solid";
|
||||
import { Book } from "lucide-react";
|
||||
import { Separator } from "@unsend/ui/src/separator";
|
||||
import "@usesend/ui/styles/globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
import { Inter } from "next/font/google";
|
||||
import { JetBrains_Mono } from "next/font/google";
|
||||
import type { Metadata } from "next";
|
||||
import { ThemeProvider } from "@usesend/ui";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Unsend",
|
||||
description: "Open source sending infrastructure for developers",
|
||||
title: "useSend - Open source email platform",
|
||||
description: "Open source email platform for everyone",
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
site: "https://unsend.dev",
|
||||
title: "Unsend",
|
||||
description: "Open source sending infrastructure for developers",
|
||||
images: "https://unsend.dev/og_banner.png",
|
||||
creator: "@KM_Koushik_",
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
title: "Unsend",
|
||||
description: "Open source sending infrastructure for developers",
|
||||
siteName: "Unsend",
|
||||
url: "https://unsend.dev",
|
||||
images: "https://unsend.dev/og_banner.png",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
{process.env.NODE_ENV === "production" && (
|
||||
<Script src="https://scripts.simpleanalyticscdn.com/latest.js" />
|
||||
)}
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider attribute="class" defaultTheme="dark">
|
||||
<div className="bg-[#0c0e12] pb-20 h-full">
|
||||
<div className=" mx-auto w-full lg:max-w-6xl relative flex flex-col ">
|
||||
<nav className="p-4 flex justify-between">
|
||||
<div className="text-2xl font-semibold">
|
||||
<Link href="/">Unsend</Link>
|
||||
</div>
|
||||
<div className="flex gap-8 items-center">
|
||||
<Link href="https://docs.unsend.dev" target="_blank" className="flex items-center gap-1 bg-border/70 text-white px-3 py-1 rounded-full">
|
||||
<Book className="h-6 w-6 fill-white stroke-border" /> Docs
|
||||
</Link>
|
||||
<Link
|
||||
href="https://github.com/unsend-dev/unsend"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
>
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="https://twitter.com/unsend_dev" target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
target="_blank"
|
||||
>
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://discord.gg/BU8n8pJv8S"
|
||||
target="_blank"
|
||||
className="flex gap-2 items-center"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
>
|
||||
<path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z" />
|
||||
</svg>
|
||||
</Link>
|
||||
{/* <Link href="https://github.com/unsendhq">GitHub</Link> */}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="max-w-6xl mx-auto px-4">{children}</div>
|
||||
<div className="flex justify-between mt-20 max-w-6xl mx-auto px-4 md:px-0 pb-10">
|
||||
<div className="flex gap-2 items-center">
|
||||
<TextWithCopyButton value="hello@unsend.dev" />
|
||||
</div>
|
||||
<div className="flex gap-8 items-center">
|
||||
<Link href="https://docs.unsend.dev">docs</Link>
|
||||
<Separator orientation="vertical" />
|
||||
<Link href="/terms">terms</Link>
|
||||
<Link href="/privacy">privacy</Link>
|
||||
<Link
|
||||
href="https://github.com/unsend-dev/unsend"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
>
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link href="https://twitter.com/unsend_dev" target="_blank">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
target="_blank"
|
||||
>
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
href="https://discord.gg/BU8n8pJv8S"
|
||||
target="_blank"
|
||||
className="flex gap-2 items-center"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
>
|
||||
<path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z" />
|
||||
</svg>
|
||||
</Link>
|
||||
{/* <Link href="https://github.com/unsendhq">GitHub</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<html lang="en" suppressHydrationWarning className="bg-sidebar-background">
|
||||
<body
|
||||
className={`font-sans ${inter.variable} ${jetbrainsMono.variable} bg-sidebar-background`}
|
||||
>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,189 +1,27 @@
|
||||
import { EnvelopeIcon, MegaphoneIcon } from "@heroicons/react/24/solid";
|
||||
import {
|
||||
Heading1,
|
||||
Heading2,
|
||||
Heading3,
|
||||
AlignLeft,
|
||||
AlignRight,
|
||||
AlignCenter,
|
||||
Bold,
|
||||
Italic,
|
||||
ListOrdered,
|
||||
} from "lucide-react";
|
||||
import { formatDate } from "date-fns";
|
||||
import Image from "next/image";
|
||||
import { GitHubStarsButton } from "~/components/GitHubStarsButton";
|
||||
|
||||
import IntegrationCode from "./IntegrationCode";
|
||||
import {
|
||||
GitHubStarButton,
|
||||
HeroImage,
|
||||
JoinWaitlist,
|
||||
} from "~/components/landind-page";
|
||||
|
||||
export default function Home() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="pb-20">
|
||||
<div className=" mx-auto w-full lg:max-w-6xl relative flex flex-col ">
|
||||
<div className="p-4 mt-20">
|
||||
<h1 className="relative z-10 text-neutral-100 text-2xl lg:max-w-4xl mx-auto 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
|
||||
</span>
|
||||
</h1>
|
||||
<p></p>
|
||||
<p className="text-neutral-100 text-lg max-w-lg mx-auto my-4 text-center relative z-10">
|
||||
Send transactional, marketing emails, SMSes and push notifications
|
||||
effortlessly.
|
||||
</p>
|
||||
<div className="flex flex-col items-center lg:flex-row justify-center mt-16 gap-8">
|
||||
<JoinWaitlist />
|
||||
<GitHubStarButton />
|
||||
</div>
|
||||
|
||||
<HeroImage />
|
||||
<main className="min-h-screen flex items-center justify-center p-6">
|
||||
<div className="max-w-2xl text-center space-y-4">
|
||||
<div className="flex justify-center">
|
||||
<Image
|
||||
src="/logo-squircle.png"
|
||||
alt="useSend logo"
|
||||
width={64}
|
||||
height={64}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <BackgroundBeams /> */}
|
||||
</div>
|
||||
<div className="w-full lg:max-w-6xl mx-auto flex flex-col gap-40 mt-40 md:px-6 px-0">
|
||||
<div className="space-y-12">
|
||||
<div>
|
||||
<p className="text-center font-semibold text-3xl lg:text-6xl">
|
||||
Reach your users</p>
|
||||
</div>
|
||||
<div className="flex gap-10 flex-col lg:flex-row md:p-8 p-3 bg-[#0c0e12] rounded-lg">
|
||||
<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>
|
||||
</div>
|
||||
<ul className="flex flex-col gap-4 mt-8">
|
||||
<li>Simple to use! No wasted time on configuration.</li>
|
||||
<li>Send emails that reach the inbox, not spam.</li>
|
||||
<li>Get notified of email bounces and complaints.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="lg:w-1/2 flex flex-col bg-[#0e1217] border rounded-lg p-8">
|
||||
<div className=" border-l border-dashed flex flex-col gap-8">
|
||||
<div 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"
|
||||
suppressHydrationWarning
|
||||
>
|
||||
{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>
|
||||
</div>
|
||||
<div>
|
||||
<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"
|
||||
suppressHydrationWarning
|
||||
>
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-10 flex-col lg:flex-row md:p-8 p-3 bg-[#0c0e12] rounded-lg">
|
||||
<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 that works on all
|
||||
email clients.
|
||||
</li>
|
||||
<li>Measure engagement using click and open tracking.</li>
|
||||
<li>
|
||||
Focus on the content and we will handle the subscription for
|
||||
you.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="lg:w-1/2">
|
||||
<div className="w-full rounded-lg border bg-[#0e1217]">
|
||||
<div className="flex gap-4 justify-between border-b p-4 overflow-auto">
|
||||
<Heading1 />
|
||||
<Heading2 />
|
||||
<Heading3 />
|
||||
<AlignLeft />
|
||||
<AlignCenter />
|
||||
<AlignRight />
|
||||
<Bold />
|
||||
<Italic />
|
||||
<ListOrdered />
|
||||
</div>
|
||||
<div className="h-[200px] p-4">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-20 rounded-lg md:p-8 p-3">
|
||||
<p className="text-center font-semibold text-3xl lg:text-6xl ">
|
||||
Integrate in minutes
|
||||
</p>
|
||||
|
||||
<div className="mt-10">
|
||||
<IntegrationCode />
|
||||
</div>
|
||||
<h1 className="text-xl font-mono font-medium text-blue">useSend</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Open source email platform for everyone
|
||||
</p>
|
||||
<div className="mt-6 flex items-center justify-center gap-3">
|
||||
<GitHubStarsButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const PrivacyPolicy = () => {
|
||||
return (
|
||||
<div className="mx-auto mt-20">
|
||||
<div className="flex flex-col gap-12">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Privacy Policy</h1>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
Last Updated: Aug 22, 2024
|
||||
</p>
|
||||
|
||||
<p className="mb-4 text-primary">
|
||||
Unsend is committed to protecting your privacy. This Privacy Policy
|
||||
outlines how we collect, use, and disclose your information when you
|
||||
use Unsend.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
1. Information We Collect
|
||||
</h2>
|
||||
|
||||
<h3 className="text-lg font-semibold mt-4 mb-2">
|
||||
Personal Information
|
||||
</h3>
|
||||
<p className="mb-4 opacity-90 ">
|
||||
When you create an account, we collect your email address and name.
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg font-semibold mt-4 mb-2">Usage Data</h3>
|
||||
<p className="mb-4 opacity-90 ">
|
||||
We automatically collect information about how you interact with the
|
||||
Service, such as pages visited and features used.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
2. How We Use Your Information
|
||||
</h2>
|
||||
<p className="mb-4 opacity-90 ">
|
||||
We use your information for the following purposes:
|
||||
</p>
|
||||
<ul className="list-disc list-inside mb-4 opacity-90">
|
||||
<li>To provide and maintain the Service</li>
|
||||
<li>To improve and personalize your experience with the Service</li>
|
||||
<li>
|
||||
To communicate with you about updates, promotions, and customer
|
||||
support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
3. Sharing Your Information
|
||||
</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
We do not sell, rent or your personal information with third
|
||||
parties.
|
||||
</p>
|
||||
<p className="mb-4 opacity-90">
|
||||
We are using following third party services to run this service.
|
||||
</p>
|
||||
<ul className="list-disc list-inside mb-4 opacity-90 gap-2 flex flex-col mt-2">
|
||||
<li>
|
||||
<a
|
||||
href="https://railway.app/"
|
||||
className=" underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Railway
|
||||
</a>
|
||||
: this is where unsend is hosted. currently in US region
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://aws.amazon.com/ses/"
|
||||
className=" underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
AWS
|
||||
</a>
|
||||
: unsend uses AWS SES to process your mails
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">4. Data Security</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
We take reasonable steps to protect your information from
|
||||
unauthorized access, use, or disclosure. However, no method of
|
||||
transmission or storage is completely secure, and we cannot
|
||||
guarantee the absolute security of your information.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">5. Data Retention</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
We retain your personal information for as long as necessary to
|
||||
provide the Service, comply with legal obligations, resolve
|
||||
disputes, and enforce our agreements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">6. Your Rights</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
You may access, update, or request the deletion of your personal
|
||||
information by contacting us at hello@unsend.dev.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">7. Children's Privacy</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
The Service is not intended for users under 13 years old. We do not
|
||||
knowingly collect personal information from children under 13. If
|
||||
you are a parent or guardian and believe your child has provided us
|
||||
with personal information, please contact us at hello@unsend.dev.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
8. Changes to This Policy
|
||||
</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
We may update this Policy from time to time. We will notify you of
|
||||
any changes by posting the updated Policy on this page. By
|
||||
continuing to use the Service, you agree to be bound by the updated
|
||||
Policy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold mb-4">9. Contact</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
If you have any questions or concerns regarding this Privacy Policy,
|
||||
please contact us at hello@unsend.dev.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrivacyPolicy;
|
||||
@@ -1,97 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const TermsOfService = () => {
|
||||
return (
|
||||
<div className="mx-auto mt-20">
|
||||
<div className="flex flex-col gap-12">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Terms of Service</h1>
|
||||
<p className="mb-4 text-muted-foreground">
|
||||
Last Updated: Apr 22, 2024
|
||||
</p>
|
||||
|
||||
<p className="mb-4 text-primary">
|
||||
By using Unsend, you agree to these Terms of Service. Unsend
|
||||
reserves the right to modify these Terms at any time. By continuing
|
||||
to use the Service, you agree to the updated Terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">1. Agreement</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
By using Unsend, you agree to these Terms of Service. Unsend
|
||||
reserves the right to modify these Terms at any time. By continuing
|
||||
to use the Service, you agree to the updated Terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">2. Eligibility</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
You must be at least 13 years old to use the Service. By using the
|
||||
Service, you represent that you meet this age requirement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">3. Acceptable Use</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
You agree not to use the Service for any illegal or harmful
|
||||
activities. We reserve the right to terminate your access to the
|
||||
Service if you violate this provision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">4. Termination</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
We reserve the right to suspend or terminate your access to the
|
||||
Service at any time, with or without notice, for any reason.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
5. Disclaimers and Limitation of Liability
|
||||
</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
The Service is provided "as is" and "as available," without
|
||||
warranties of any kind. We disclaim all liability for any damages or
|
||||
losses arising from your use of the Service.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">6. Governing Law</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
These Terms shall be governed by the laws of US. Any disputes
|
||||
arising from these Terms shall be resolved in the courts located in
|
||||
US.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">7. Privacy</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
Please read our{" "}
|
||||
<a className="underline" href="/privacy">
|
||||
privacy policy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold mb-4">8. Contact</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
If you have any questions or concerns regarding these Terms, please
|
||||
contact us at hello@unsend.dev.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermsOfService;
|
||||
73
apps/marketing/src/components/GitHubStarsButton.tsx
Normal file
73
apps/marketing/src/components/GitHubStarsButton.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@usesend/ui/src/button";
|
||||
|
||||
const REPO = "unsend-dev/unsend";
|
||||
const REPO_URL = `https://github.com/${REPO}`;
|
||||
const API_URL = `https://api.github.com/repos/${REPO}`;
|
||||
|
||||
export function GitHubStarsButton() {
|
||||
const [stars, setStars] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetch(API_URL, {
|
||||
headers: {
|
||||
Accept: "application/vnd.github+json",
|
||||
"X-GitHub-Api-Version": "2022-11-28",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
if (!cancelled && typeof json.stargazers_count === "number") {
|
||||
setStars(json.stargazers_count);
|
||||
}
|
||||
} catch (err) {
|
||||
// ignore network errors; keep placeholder
|
||||
}
|
||||
}
|
||||
load();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const formatted = stars?.toLocaleString() ?? "—";
|
||||
|
||||
return (
|
||||
<Button variant="outline" size="lg" className="px-4 gap-2">
|
||||
<a
|
||||
href={REPO_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Star this repo on GitHub"
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<GitHubIcon className="h-4 w-4" />
|
||||
<span>Star on GitHub</span>
|
||||
</a>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function GitHubIcon({ className = "" }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className={className}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.486 2 12.021c0 4.424 2.865 8.175 6.839 9.5.5.093.682-.217.682-.483 0-.237-.009-.864-.014-1.696-2.782.605-3.369-1.343-3.369-1.343-.454-1.155-1.11-1.463-1.11-1.463-.907-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.833.091-.647.35-1.088.636-1.338-2.221-.253-4.555-1.113-4.555-4.952 0-1.093.39-1.987 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.027A9.564 9.564 0 0 1 12 6.844a9.56 9.56 0 0 1 2.504.337c1.909-1.297 2.748-1.027 2.748-1.027.545 1.378.202 2.397.1 2.65.64.701 1.028 1.595 1.028 2.688 0 3.848-2.337 4.697-4.565 4.945.36.31.68.921.68 1.856 0 1.339-.012 2.418-.012 2.747 0 .268.18.581.688.482C19.138 20.193 22 16.443 22 12.02 22 6.486 17.523 2 12 2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
"use client";
|
||||
import { DocumentIcon } from "@heroicons/react/24/solid";
|
||||
import { RocketLaunchIcon } from "@heroicons/react/24/solid";
|
||||
import { motion } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
export function JoinWaitlist() {
|
||||
return (
|
||||
<motion.a
|
||||
className="bg-white text-black py-2 px-6 rounded-full cursor-pointer flex justify-center gap-2 w-[220px]"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
href="https://app.youform.io/forms/caja89vr"
|
||||
target="_blank"
|
||||
>
|
||||
<RocketLaunchIcon className="h-6 w-6" />
|
||||
Join the waitlist
|
||||
</motion.a>
|
||||
);
|
||||
}
|
||||
|
||||
export function GitHubStarButton() {
|
||||
return (
|
||||
<motion.a
|
||||
className="border-white border py-2 px-6 rounded-full justify-center cursor-pointer flex gap-2 w-[220px]"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
href="https://github.com/unsend-dev/unsend"
|
||||
target="_blank"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
className="h-6 w-6 stroke-white fill-white"
|
||||
>
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
|
||||
</svg>
|
||||
Star us on github
|
||||
</motion.a>
|
||||
);
|
||||
}
|
||||
|
||||
export function HeroImage() {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
damping: 15,
|
||||
stiffness: 100,
|
||||
type: "spring",
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
className="p-3 bg-[#0c0e12] mt-24 rounded-xl mx-2 shadow-[#1e293b]/70 shadow-md border-2 border-border/70"
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src="/app.webp"
|
||||
alt="App"
|
||||
width={1200}
|
||||
height={800}
|
||||
className="rounded-lg relative"
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -1,149 +0,0 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
|
||||
export const BackgroundBeams = React.memo(
|
||||
({ className }: { className?: string }) => {
|
||||
const paths = [
|
||||
"M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875",
|
||||
"M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867",
|
||||
"M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859",
|
||||
"M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851",
|
||||
"M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843",
|
||||
"M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835",
|
||||
"M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827",
|
||||
"M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819",
|
||||
"M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811",
|
||||
"M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803",
|
||||
"M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795",
|
||||
"M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787",
|
||||
"M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779",
|
||||
"M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771",
|
||||
"M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763",
|
||||
"M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755",
|
||||
"M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747",
|
||||
"M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739",
|
||||
"M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731",
|
||||
"M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723",
|
||||
"M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715",
|
||||
"M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707",
|
||||
"M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699",
|
||||
"M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691",
|
||||
"M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683",
|
||||
"M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675",
|
||||
"M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667",
|
||||
"M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659",
|
||||
"M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651",
|
||||
"M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643",
|
||||
"M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635",
|
||||
"M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627",
|
||||
"M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619",
|
||||
"M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611",
|
||||
"M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603",
|
||||
"M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595",
|
||||
"M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587",
|
||||
"M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579",
|
||||
"M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571",
|
||||
"M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563",
|
||||
"M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555",
|
||||
"M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547",
|
||||
"M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539",
|
||||
"M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531",
|
||||
"M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523",
|
||||
"M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515",
|
||||
"M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507",
|
||||
"M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499",
|
||||
"M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491",
|
||||
"M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483",
|
||||
];
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute h-full w-full inset-0 [mask-size:40px] [mask-repeat:no-repeat] flex items-center justify-center",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
className=" z-0 h-full w-full pointer-events-none absolute "
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 696 316"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483M-30 -589C-30 -589 38 -184 502 -57C966 70 1034 475 1034 475M-23 -597C-23 -597 45 -192 509 -65C973 62 1041 467 1041 467M-16 -605C-16 -605 52 -200 516 -73C980 54 1048 459 1048 459M-9 -613C-9 -613 59 -208 523 -81C987 46 1055 451 1055 451M-2 -621C-2 -621 66 -216 530 -89C994 38 1062 443 1062 443M5 -629C5 -629 73 -224 537 -97C1001 30 1069 435 1069 435M12 -637C12 -637 80 -232 544 -105C1008 22 1076 427 1076 427M19 -645C19 -645 87 -240 551 -113C1015 14 1083 419 1083 419"
|
||||
stroke="url(#paint0_radial_242_278)"
|
||||
strokeOpacity="0.05"
|
||||
strokeWidth="0.5"
|
||||
></path>
|
||||
|
||||
{paths.map((path, index) => (
|
||||
<motion.path
|
||||
key={`path-` + index}
|
||||
d={path}
|
||||
stroke={`url(#linearGradient-${index})`}
|
||||
strokeOpacity="0.4"
|
||||
strokeWidth="0.5"
|
||||
></motion.path>
|
||||
))}
|
||||
<defs>
|
||||
{paths.map((path, index) => (
|
||||
<motion.linearGradient
|
||||
id={`linearGradient-${index}`}
|
||||
key={`gradient-${index}`}
|
||||
initial={{
|
||||
x1: "0%",
|
||||
x2: "0%",
|
||||
y1: "0%",
|
||||
y2: "0%",
|
||||
}}
|
||||
animate={{
|
||||
x1: ["0%", "100%"],
|
||||
x2: ["0%", "95%"],
|
||||
y1: ["0%", "100%"],
|
||||
y2: ["0%", `${93 + Math.random() * 8}%`],
|
||||
}}
|
||||
transition={{
|
||||
duration: Math.random() * 10 + 10,
|
||||
ease: "easeInOut",
|
||||
repeat: Infinity,
|
||||
delay: Math.random() * 10,
|
||||
}}
|
||||
>
|
||||
<stop stopColor="#18CCFC" stopOpacity="0"></stop>
|
||||
<stop stopColor="#18CCFC"></stop>
|
||||
<stop offset="32.5%" stopColor="#06b6d4"></stop>
|
||||
<stop offset="100%" stopColor="#10b981" stopOpacity="0"></stop>
|
||||
</motion.linearGradient>
|
||||
))}
|
||||
|
||||
<radialGradient
|
||||
id="paint0_radial_242_278"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(352 34) rotate(90) scale(555 1560.62)"
|
||||
>
|
||||
<stop
|
||||
offset="0.066667"
|
||||
stopColor="#18CCFC"
|
||||
stopOpacity="1"
|
||||
></stop>
|
||||
<stop
|
||||
offset="0.243243"
|
||||
stopColor="#18CCFC"
|
||||
stopOpacity="0.5"
|
||||
></stop>
|
||||
<stop offset="0.43594" stopColor="white" stopOpacity="0.1"></stop>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
BackgroundBeams.displayName = "BackgroundBeams";
|
||||
@@ -1,61 +0,0 @@
|
||||
// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
|
||||
"use client";
|
||||
import * as React from "react";
|
||||
import { cn } from "@unsend/ui/lib/utils";
|
||||
import { useMotionTemplate, useMotionValue, motion } from "framer-motion";
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const StyledInput = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
const radius = 100; // change this to increase the rdaius of the hover effect
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
|
||||
let mouseX = useMotionValue(0);
|
||||
let mouseY = useMotionValue(0);
|
||||
|
||||
function handleMouseMove({ currentTarget, clientX, clientY }: any) {
|
||||
let { left, top } = currentTarget.getBoundingClientRect();
|
||||
|
||||
mouseX.set(clientX - left);
|
||||
mouseY.set(clientY - top);
|
||||
}
|
||||
return (
|
||||
<motion.div
|
||||
style={{
|
||||
background: useMotionTemplate`
|
||||
radial-gradient(
|
||||
${visible ? radius + "px" : "0px"} circle at ${mouseX}px ${mouseY}px,
|
||||
#06b6d4,
|
||||
transparent 80%
|
||||
)
|
||||
`,
|
||||
}}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setVisible(true)}
|
||||
onMouseLeave={() => setVisible(false)}
|
||||
className="p-[2px] rounded-lg transition duration-300 group/input"
|
||||
>
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
`flex h-10 w-full border-none bg-gray-50 dark:bg-zinc-800 text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
|
||||
file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
|
||||
focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
|
||||
disabled:cursor-not-allowed disabled:opacity-50
|
||||
dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
|
||||
group-hover/input:shadow-none transition duration-400
|
||||
`,
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
);
|
||||
StyledInput.displayName = "Input";
|
||||
|
||||
export { StyledInput };
|
||||
Reference in New Issue
Block a user