Make landing page slightly cool
This commit is contained in:
KMKoushik
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
@@ -7,7 +7,8 @@ const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Unsend",
|
||||
description: "Open source sending infrastructure",
|
||||
description: "Open source sending infrastructure for developers",
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
@@ -21,27 +21,26 @@ import {
|
||||
ListOrdered,
|
||||
} from "lucide-react";
|
||||
import { formatDate } from "date-fns";
|
||||
import { Code } from "@unsend/ui/src/code"
|
||||
import { hi } from "date-fns/locale";
|
||||
|
||||
import { Code } from "@unsend/ui/src/code";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const jsCode = `const requestOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json",
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": "Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
|
||||
"Authorization": "Bearer us_1a2b3c4d5e6f7f8g"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"to": "koushikmohan1996@gmail.com",
|
||||
"from": "hello@test.splitpro.app",
|
||||
"subject": "Test mail",
|
||||
"html": "<p>Hello this is a test mail</p>"
|
||||
"to": "test@company.com",
|
||||
"from": "hello@unsend.dev",
|
||||
"subject": "Unsend email",
|
||||
"html": "<p>Unsend is the best open source product to send emails</p>"
|
||||
}),
|
||||
redirect: "follow"
|
||||
};
|
||||
|
||||
fetch("http://localhost:3000/api/v1/emails", requestOptions)
|
||||
fetch("http://unsend.dev/api/v1/emails", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.error(error));
|
||||
@@ -50,18 +49,18 @@ fetch("http://localhost:3000/api/v1/emails", requestOptions)
|
||||
const pythonCode = `import requests
|
||||
import json
|
||||
|
||||
url = "http://localhost:3000/api/v1/emails"
|
||||
url = "http://unsend.dev/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>"
|
||||
"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_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
|
||||
'Authorization': 'Bearer us_1a2b3c4d5e6f7f8g'
|
||||
}
|
||||
|
||||
response = requests.request("POST", url, headers=headers, data=payload)
|
||||
@@ -72,36 +71,36 @@ const rubyCode = `require 'uri'
|
||||
require 'net/http'
|
||||
require 'json'
|
||||
|
||||
url = URI("http://localhost:3000/api/v1/emails")
|
||||
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_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
|
||||
request["Authorization"] = 'Bearer us_1a2b3c4d5e6f7f8g'
|
||||
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>"
|
||||
"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://localhost:3000/api/v1/emails";
|
||||
const phpCode = `$url = "http://unsend.dev/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>"
|
||||
"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_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
|
||||
"Authorization: Bearer us_1a2b3c4d5e6f7f8g"
|
||||
);
|
||||
|
||||
$ch = curl_init($url);
|
||||
@@ -117,13 +116,54 @@ if (curl_errno($ch)) {
|
||||
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 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=" 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">
|
||||
<div className=" mx-auto w-full lg:max-w-6xl relative flex flex-col ">
|
||||
<nav className="py-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://twitter.com/unsend_dev">
|
||||
<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 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
|
||||
@@ -148,9 +188,30 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-neutral-900 mt-24 rounded-xl"
|
||||
>
|
||||
<Image
|
||||
src="/app.webp"
|
||||
alt="App"
|
||||
width={1200}
|
||||
height={800}
|
||||
className="rounded-lg relative border "
|
||||
></Image>
|
||||
</motion.div>
|
||||
|
||||
{/* <BackgroundBeams /> */}
|
||||
</div>
|
||||
<div className=" w-full lg: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 mt-40">
|
||||
<div>
|
||||
<p className="text-center text-3xl lg:text-6xl ">Reach your users</p>
|
||||
</div>
|
||||
@@ -176,6 +237,7 @@ export default function Home() {
|
||||
damping: 15,
|
||||
stiffness: 100,
|
||||
type: "spring",
|
||||
delay: 0.3,
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
className="flex flex-col gap-4"
|
||||
@@ -214,7 +276,7 @@ export default function Home() {
|
||||
damping: 15,
|
||||
stiffness: 100,
|
||||
type: "spring",
|
||||
delay: 0.3,
|
||||
delay: 0.6,
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
@@ -278,6 +340,7 @@ export default function Home() {
|
||||
stiffness: 100,
|
||||
delayChildren: 0.5,
|
||||
staggerChildren: 0.05,
|
||||
delay: 0.3,
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
className="w-full rounded-lg border"
|
||||
@@ -393,7 +456,6 @@ export default function Home() {
|
||||
<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
|
||||
@@ -406,6 +468,7 @@ export default function Home() {
|
||||
stiffness: 100,
|
||||
delayChildren: 0.4,
|
||||
staggerChildren: 0.05,
|
||||
delay: 0.3,
|
||||
}}
|
||||
viewport={{ once: true }}
|
||||
variants={{
|
||||
@@ -414,45 +477,53 @@ export default function Home() {
|
||||
}}
|
||||
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>
|
||||
<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
|
||||
<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",
|
||||
duration: 0.4,
|
||||
type: "spring",
|
||||
damping: 13,
|
||||
stiffness: 100,
|
||||
delay: 0.2
|
||||
|
||||
}}>
|
||||
delay: 0.2,
|
||||
}}
|
||||
> */}
|
||||
<div className="mt-10">
|
||||
<Code
|
||||
codeBlocks={[
|
||||
{ language: "js", code: jsCode },
|
||||
{ language: "ruby", code: rubyCode },
|
||||
{ language: "php", code: phpCode },
|
||||
{ language: "python", code: pythonCode },
|
||||
{ language: "curl", code: cUrl },
|
||||
]}
|
||||
codeClassName="h-[55vh]"
|
||||
codeClassName="h-[55vh] "
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
{/* </motion.div> */}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="">
|
||||
<div className="flex justify-center mt-40">
|
||||
@@ -468,6 +539,37 @@ export default function Home() {
|
||||
</motion.a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between mt-20 max-w-5xl mx-auto">
|
||||
<div>
|
||||
Email: <a href="mailto:hello@unsend.dev">hello@unsend.dev</a>
|
||||
</div>
|
||||
<div className="flex gap-8 items-center">
|
||||
<Link href="https://twitter.com/unsend_dev">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user