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

rebrand to useSend (#210)

Browse Source
This commit is contained in:
KM Koushik
2025-09-03 08:21:55 +10:00
committed by GitHub
parent b1a59d2705
commit 07c53d3f58
219 changed files with 1349 additions and 2835 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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