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

Marketing: Homepage design (#128)

Browse Source 
* homepage

* Update page.tsx
This commit is contained in:
Tommy Lundy
2025-03-25 07:13:20 +00:00
committed by GitHub
parent 62b67458b3
commit f8113e64b5
5 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,10 @@ 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";
const inter = Inter({ subsets: ["latin"] });
@@ -42,13 +46,16 @@ export default function RootLayout({
)}
<body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark">
<div className="bg-neutral-950 pb-20 h-full">
<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"
@@ -89,11 +96,13 @@ export default function RootLayout({
</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 pb-10">
<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

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

@@ -11,8 +11,7 @@ import {
ListOrdered,
} from "lucide-react";
import { formatDate } from "date-fns";
import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
import Link from "next/link";
import IntegrationCode from "./IntegrationCode";
import {
GithubStarButton,
@@ -22,10 +21,10 @@ import {
export default function Home() {
return (
<div className="bg-neutral-950 pb-20">
<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">
<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
@@ -46,11 +45,13 @@ export default function Home() {
{/* <BackgroundBeams /> */}
</div>
<div className=" w-full lg:max-w-6xl mx-auto flex flex-col gap-40 mt-40">
<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 text-3xl lg:text-6xl ">Reach your users</p>
<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 px-8 lg:px-0">
<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" />
@@ -62,7 +63,7 @@ export default function Home() {
<li>Get notified of email bounces and complaints.</li>
</ul>
</div>
<div className="lg:w-1/2 flex flex-col border rounded-lg p-8">
<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">
@@ -73,7 +74,7 @@ export default function Home() {
<div className={`h-2 w-2 rounded-full bg-gray-600`}></div>
</div>
</div>
<div className="-mt-1">
<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`}
@@ -96,7 +97,7 @@ export default function Home() {
</div>
<div>
<div className="flex gap-5 items-start">
<div className=" -ml-2.5">
<div className="-ml-2.5">
<div
className={`flex justify-center items-center p-1.5 bg-emerald-500/50 rounded-full`}
>
@@ -128,7 +129,7 @@ export default function Home() {
</div>
</div>
</div>
<div className="flex gap-10 flex-col lg:flex-row px-8 lg:px-0">
<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" />
@@ -148,7 +149,7 @@ export default function Home() {
</ul>
</div>
<div className="lg:w-1/2">
<div className="w-full rounded-lg border">
<div className="w-full rounded-lg border bg-[#0e1217]">
<div className="flex gap-4 justify-between border-b p-4 overflow-auto">
<Heading1 />
<Heading2 />
@@ -172,28 +173,15 @@ export default function Home() {
</div>
</div>
</div>
<div className=" px-8 lg:px-0 mt-20">
<p className="text-center text-3xl lg:text-6xl ">
</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>
{/* <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,
}}
> */}
<div className="mt-10">
<IntegrationCode />
</div>
{/* </motion.div> */}
</div>
</div>
</div>

6
apps/marketing/src/components/landind-page.tsx
View File

@@ -1,8 +1,10 @@
"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
@@ -51,7 +53,7 @@ export function HeroImage() {
type: "spring",
}}
viewport={{ once: true }}
className="p-3 bg-neutral-900 mt-24 rounded-xl mx-2"
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
@@ -59,7 +61,7 @@ export function HeroImage() {
alt="App"
width={1200}
height={800}
className="rounded-lg relative border"
className="rounded-lg relative"
/>
</motion.div>
);

1
package.json
View File

@@ -11,6 +11,7 @@
"start:web:local": "pnpm load-env -- cd apps/web && pnpm start",
"dev": "pnpm load-env -- turbo dev",
"dev:docs": "cd apps/docs && mintlify dev",
"dev:marketing": "cd apps/marketing && turbo dev",
"lint": "turbo lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"db:generate": "pnpm db db:generate",

2
packages/ui/src/code.tsx
View File

@@ -46,7 +46,7 @@ export const Code: React.FC<CodeProps> = ({ codeBlocks, codeClassName }) => {
};
return (
<div className="rounded-xl bg-background border">
<div className="rounded-xl bg-background border shadow-[#1e293b] shadow-lg">
<Tabs
defaultValue={codeBlocks[0]?.language}
onValueChange={(val) => setSelectedTab(val as Language)}