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

Add some marketing content

Browse Source
This commit is contained in:
KMKoushik
2024-04-21 20:50:24 +10:00
parent abd1f6bb5b
commit e7a0376519
6 changed files with 149 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
apps/marketing/.eslintrc.js → apps/marketing/.eslintrc.cjs
View File

1
apps/marketing/package.json
View File

@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^2.1.3",
"framer-motion": "^11.0.24",
"lucide-react": "^0.359.0",
"next": "14.1.4",

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

@@ -1,45 +1,155 @@
import { ArrowRight, MoveRight, SendHorizonal } from "lucide-react";
import Image from "next/image";
import { BackgroundBeams } from "~/components/ui/background-beams";
import { StyledInput } from "~/components/ui/styled-input";
"use client";
import { motion } from "framer-motion";
import { Mail, Rocket } from "lucide-react";
import {
RocketLaunchIcon,
EnvelopeIcon,
MegaphoneIcon,
ChatBubbleOvalLeftEllipsisIcon,
BellAlertIcon,
} from "@heroicons/react/24/solid";
import { Code } from "@unsend/ui/src/code";
export default function Home() {
return (
<div className="bg-neutral-950">
<div className="h-[100vh] w-full rounded-md relative flex flex-col items-center justify-center antialiased">
<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-lg md:text-6xl md:leading-[4.5rem] text-center font-sans font-bold">
<h1 className="relative z-10 text-neutral-100 text-lg 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-300 max-w-lg mx-auto my-4 text-center relative z-10">
<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>
<p className="text-neutral-300 max-w-lg mx-auto text-xl my-4 text-center relative z-10 mt-10">
Join the waitlist!
</p>
<div className="flex z-10 justify-center items-stretch bg-neutral-800 relative border border-gray-500 focus-within:border-[#06b6d45a] rounded-lg w-[400px] mx-auto mt-2">
<input
type="text"
className="flex-1 bg-transparent placeholder:text-neutral-600 outline-none relative z-10 px-4 p-2"
placeholder="ada@lovelace.com"
/>
<button className=" text-white rounded-lg w-10 bg-slate-100 flex items-center justify-center bg-gradient-to-r from-[#06b6d4ba] to-[#10b981ba]">
<ArrowRight className="text-neutral-700" />
</button>
<div className="flex justify-center mt-16">
<motion.a
className="bg-white text-black py-2 px-6 rounded-full cursor-pointer flex gap-2"
whileHover={{ scale: 1.2 }}
onHoverStart={(e) => {}}
onHoverEnd={(e) => {}}
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>
</div>
</div>
<BackgroundBeams />
{/* <BackgroundBeams /> */}
</div>
<div className="h-[100vh] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
<div className="max-w-2xl mx-auto p-4">
<h1 className="relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold">
<div className=" max-w-5xl mx-auto flex flex-col gap-40">
<div>
<p className="text-center text-6xl ">Reach your users</p>
</div>
<div className="flex">
<div className="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="w-1/2">
{/* <Code
codeBlocks={[
{
language: "js",
code: `const unsend = require("unsend");
const email = unsend.email();
email.send({
to: "user@example.com",
subject: "Hello, World!",
text: "Hello, World!",
});`,
},
]}
/> */}
</div>
</div>
<div className="flex">
<div className="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>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">
<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>
</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
</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>
<div className="">
<div className="flex justify-center mt-40">
<motion.a
className="bg-white text-black py-2 px-6 rounded-full cursor-pointer flex gap-2"
whileHover={{ scale: 1.2 }}
onHoverStart={(e) => {}}
onHoverEnd={(e) => {}}
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
</h1>
</motion.a>
</div>
</div>
</div>