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 Script from "next/script";
import Link from "next/link"; import Link from "next/link";
import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy"; 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"] }); const inter = Inter({ subsets: ["latin"] });
@@ -42,13 +46,16 @@ export default function RootLayout({
)} )}
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark"> <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 "> <div className=" mx-auto w-full lg:max-w-6xl relative flex flex-col ">
<nav className="p-4 flex justify-between"> <nav className="p-4 flex justify-between">
<div className="text-2xl font-semibold"> <div className="text-2xl font-semibold">
<Link href="/">Unsend</Link> <Link href="/">Unsend</Link>
</div> </div>
<div className="flex gap-8 items-center"> <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 <Link
href="https://github.com/unsend-dev/unsend" href="https://github.com/unsend-dev/unsend"
target="_blank" target="_blank"
@@ -89,11 +96,13 @@ export default function RootLayout({
</nav> </nav>
</div> </div>
<div className="max-w-6xl mx-auto px-4">{children}</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"> <div className="flex gap-2 items-center">
<TextWithCopyButton value="hello@unsend.dev" /> <TextWithCopyButton value="hello@unsend.dev" />
</div> </div>
<div className="flex gap-8 items-center"> <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="/terms">terms</Link>
<Link href="/privacy">privacy</Link> <Link href="/privacy">privacy</Link>
<Link <Link

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

@@ -11,8 +11,7 @@ import {
ListOrdered, ListOrdered,
} from "lucide-react"; } from "lucide-react";
import { formatDate } from "date-fns"; import { formatDate } from "date-fns";
import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
import Link from "next/link";
import IntegrationCode from "./IntegrationCode"; import IntegrationCode from "./IntegrationCode";
import { import {
GithubStarButton, GithubStarButton,
@@ -22,7 +21,7 @@ import {
export default function Home() { export default function Home() {
return ( 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=" mx-auto w-full lg:max-w-6xl relative flex flex-col ">
<div className="p-4 mt-20"> <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">
@@ -46,11 +45,13 @@ export default function Home() {
{/* <BackgroundBeams /> */} {/* <BackgroundBeams /> */}
</div> </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> <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>
<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="lg:w-1/2">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<EnvelopeIcon className="h-10 w-10 text-fuchsia-500" /> <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> <li>Get notified of email bounces and complaints.</li>
</ul> </ul>
</div> </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=" border-l border-dashed flex flex-col gap-8">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex gap-5 items-start"> <div className="flex gap-5 items-start">
@@ -128,7 +129,7 @@ export default function Home() {
</div> </div>
</div> </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="lg:w-1/2">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<MegaphoneIcon className="h-10 w-10 text-indigo-500" /> <MegaphoneIcon className="h-10 w-10 text-indigo-500" />
@@ -148,7 +149,7 @@ export default function Home() {
</ul> </ul>
</div> </div>
<div className="lg:w-1/2"> <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"> <div className="flex gap-4 justify-between border-b p-4 overflow-auto">
<Heading1 /> <Heading1 />
<Heading2 /> <Heading2 />
@@ -172,28 +173,15 @@ export default function Home() {
</div> </div>
</div> </div>
</div> </div>
</div>
<div className=" px-8 lg:px-0 mt-20"> <div className="mt-20 rounded-lg md:p-8 p-3">
<p className="text-center text-3xl lg:text-6xl "> <p className="text-center font-semibold text-3xl lg:text-6xl ">
Integrate in minutes Integrate in minutes
</p> </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"> <div className="mt-10">
<IntegrationCode /> <IntegrationCode />
</div> </div>
{/* </motion.div> */}
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,8 +1,10 @@
"use client"; "use client";
import { DocumentIcon } from "@heroicons/react/24/solid";
import { RocketLaunchIcon } from "@heroicons/react/24/solid"; import { RocketLaunchIcon } from "@heroicons/react/24/solid";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Image from "next/image"; import Image from "next/image";
export function JoinWaitlist() { export function JoinWaitlist() {
return ( return (
<motion.a <motion.a
@@ -51,7 +53,7 @@ export function HeroImage() {
type: "spring", type: "spring",
}} }}
viewport={{ once: true }} 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 */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img <img
@@ -59,7 +61,7 @@ export function HeroImage() {
alt="App" alt="App"
width={1200} width={1200}
height={800} height={800}
className="rounded-lg relative border" className="rounded-lg relative"
/> />
</motion.div> </motion.div>
); );

1
package.json
View File

@@ -11,6 +11,7 @@
"start:web:local": "pnpm load-env -- cd apps/web && pnpm start", "start:web:local": "pnpm load-env -- cd apps/web && pnpm start",
"dev": "pnpm load-env -- turbo dev", "dev": "pnpm load-env -- turbo dev",
"dev:docs": "cd apps/docs && mintlify dev", "dev:docs": "cd apps/docs && mintlify dev",
"dev:marketing": "cd apps/marketing && turbo dev",
"lint": "turbo lint", "lint": "turbo lint",
"format": "prettier --write \"**/*.{ts,tsx,md}\"", "format": "prettier --write \"**/*.{ts,tsx,md}\"",
"db:generate": "pnpm db db:generate", "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 ( return (
<div className="rounded-xl bg-background border"> <div className="rounded-xl bg-background border shadow-[#1e293b] shadow-lg">
<Tabs <Tabs
defaultValue={codeBlocks[0]?.language} defaultValue={codeBlocks[0]?.language}
onValueChange={(val) => setSelectedTab(val as Language)} onValueChange={(val) => setSelectedTab(val as Language)}