mirror of
https://github.com/documenso/documenso.git
synced 2025-11-19 19:21:39 +10:00
wip: refresh design
This commit is contained in:
Mythie
173
apps/marketing/src/app/(marketing)/claimed/page.tsx
Normal file
173
apps/marketing/src/app/(marketing)/claimed/page.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
import { Caveat } from 'next/font/google';
|
||||
import Link from 'next/link';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
import { redis } from '@documenso/lib/server-only/redis';
|
||||
import { stripe } from '@documenso/lib/server-only/stripe';
|
||||
import { prisma } from '@documenso/prisma';
|
||||
import { cn } from '@documenso/ui/lib/utils';
|
||||
import { Button } from '@documenso/ui/primitives/button';
|
||||
|
||||
import { PasswordReveal } from '~/components/(marketing)/password-reveal';
|
||||
|
||||
const fontCaveat = Caveat({
|
||||
weight: ['500'],
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
});
|
||||
|
||||
export type ClaimedPlanPageProps = {
|
||||
searchParams?: {
|
||||
sessionId?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlanPageProps) {
|
||||
const { sessionId } = searchParams;
|
||||
|
||||
const session = await stripe.checkout.sessions.retrieve(sessionId as string);
|
||||
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
id: Number(session.client_reference_id),
|
||||
},
|
||||
});
|
||||
|
||||
if (!user) {
|
||||
redirect('/');
|
||||
}
|
||||
|
||||
const signatureText = session.metadata?.signatureText || user.name;
|
||||
let signatureDataUrl = '';
|
||||
|
||||
if (session.metadata?.signatureDataUrl) {
|
||||
const result = await redis.get<string>(`signature:${session.metadata.signatureDataUrl}`);
|
||||
|
||||
if (result) {
|
||||
signatureDataUrl = result;
|
||||
}
|
||||
}
|
||||
|
||||
const password = await redis.get<string>(`user:${user.id}:temp-password`);
|
||||
|
||||
return (
|
||||
<div className="mt-12">
|
||||
<h1 className="text-3xl font-bold text-slate-900 md:text-4xl">
|
||||
Welcome to the <span className="text-primary">open signing</span> revolution{' '}
|
||||
<u>{user.name}</u>
|
||||
</h1>
|
||||
|
||||
<p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
|
||||
It's not every day you get to be part of a revolution.
|
||||
</p>
|
||||
|
||||
<p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
|
||||
But today is that day, by signing up to Documenso, you're joining a movement of people who
|
||||
want to make the world a better place.
|
||||
</p>
|
||||
|
||||
<p className="mt-4 max-w-prose text-base text-slate-500 md:text-lg">
|
||||
We're going to change the way people sign documents. We're going to make it easier, faster,
|
||||
and more secure. And we're going to do it together.
|
||||
</p>
|
||||
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Let's do it together</h2>
|
||||
|
||||
<div className="-mx-4 mt-8 flex md:-mx-8">
|
||||
<div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
|
||||
<p
|
||||
className={cn(
|
||||
'text-4xl font-semibold text-slate-900 md:text-5xl',
|
||||
fontCaveat.className,
|
||||
)}
|
||||
>
|
||||
Timur
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-slate-500 md:text-lg">
|
||||
Timur Ercan
|
||||
<span className="block lg:hidden" />
|
||||
<span className="hidden lg:inline"> - </span>
|
||||
Co Founder
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
|
||||
<p
|
||||
className={cn(
|
||||
'text-4xl font-semibold text-slate-900 md:text-5xl',
|
||||
fontCaveat.className,
|
||||
)}
|
||||
>
|
||||
Lucas
|
||||
</p>
|
||||
|
||||
<p className="text-sm text-slate-500 md:text-lg">
|
||||
Lucas Smith
|
||||
<span className="block lg:hidden" />
|
||||
<span className="hidden lg:inline"> - </span>
|
||||
Co Founder
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col justify-end gap-y-4 border-r px-4 last:border-r-0 md:px-8 lg:flex-none">
|
||||
{signatureDataUrl && (
|
||||
<img src={signatureDataUrl} alt="your-signature" className="max-w-[172px]" />
|
||||
)}
|
||||
{!signatureDataUrl && (
|
||||
<p
|
||||
className={cn(
|
||||
'text-4xl font-semibold text-slate-900 md:text-5xl',
|
||||
fontCaveat.className,
|
||||
)}
|
||||
>
|
||||
{signatureText}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-slate-500 md:text-lg">
|
||||
{user.name}
|
||||
<span className="block lg:hidden" />
|
||||
<span className="hidden lg:inline"> - </span>
|
||||
Our new favourite customer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-bold text-slate-900">Your sign in details</h2>
|
||||
|
||||
<div className="mt-4">
|
||||
<p className="text-lg text-slate-500">
|
||||
<span className="font-bold">Email:</span> {user.email}
|
||||
</p>
|
||||
|
||||
<p className="mt-2 text-lg text-slate-500">
|
||||
<span className="font-bold">Password:</span>{' '}
|
||||
<PasswordReveal password={password ?? 'password'} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm italic text-slate-500">
|
||||
This is a temporary password. Please change it as soon as possible.
|
||||
</p>
|
||||
|
||||
<Link
|
||||
// eslint-disable-next-line turbo/no-undeclared-env-vars
|
||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/login`}
|
||||
target="_blank"
|
||||
className="mt-4 block"
|
||||
>
|
||||
<Button size="lg" className="text-base">
|
||||
Let's get started!
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
apps/marketing/src/app/(marketing)/layout.tsx
Normal file
22
apps/marketing/src/app/(marketing)/layout.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Footer } from '~/components/(marketing)/footer';
|
||||
import { Header } from '~/components/(marketing)/header';
|
||||
|
||||
export type MarketingLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function MarketingLayout({ children }: MarketingLayoutProps) {
|
||||
return (
|
||||
<div className="relative max-w-[100vw] overflow-y-auto overflow-x-hidden pt-20 md:pt-28">
|
||||
<div className="fixed left-0 top-0 z-50 w-full bg-white/50 backdrop-blur-md">
|
||||
<Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
|
||||
|
||||
<Footer className="mt-24 bg-transparent backdrop-blur-[2px]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
apps/marketing/src/app/(marketing)/page.tsx
Normal file
31
apps/marketing/src/app/(marketing)/page.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
/* eslint-disable no-unused-vars, @typescript-eslint/no-unused-vars */
|
||||
import { Caveat } from 'next/font/google';
|
||||
|
||||
import { cn } from '@documenso/ui/lib/utils';
|
||||
|
||||
import { Callout } from '~/components/(marketing)/callout';
|
||||
import { FasterSmarterBeautifulBento } from '~/components/(marketing)/faster-smarter-beautiful-bento';
|
||||
import { Hero } from '~/components/(marketing)/hero';
|
||||
import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-template-bento';
|
||||
import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
|
||||
|
||||
const fontCaveat = Caveat({
|
||||
weight: ['500'],
|
||||
subsets: ['latin'],
|
||||
display: 'swap',
|
||||
variable: '--font-caveat',
|
||||
});
|
||||
|
||||
export default async function IndexPage() {
|
||||
return (
|
||||
<div className={cn('mt-12', fontCaveat.variable)}>
|
||||
<Hero />
|
||||
|
||||
<FasterSmarterBeautifulBento className="my-48" />
|
||||
<ShareConnectPaidWidgetBento className="my-48" />
|
||||
<OpenBuildTemplateBento className="my-48" />
|
||||
|
||||
<Callout />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
163
apps/marketing/src/app/(marketing)/pricing/page.tsx
Normal file
163
apps/marketing/src/app/(marketing)/pricing/page.tsx
Normal file
@ -0,0 +1,163 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@documenso/ui/primitives/accordion';
|
||||
|
||||
import { PricingTable } from '~/components/(marketing)/pricing-table';
|
||||
|
||||
export type PricingPageProps = {
|
||||
searchParams?: {
|
||||
planId?: string;
|
||||
email?: string;
|
||||
name?: string;
|
||||
cancelled?: string;
|
||||
};
|
||||
};
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<div className="mt-12">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold lg:text-5xl">Pricing</h1>
|
||||
|
||||
<p className="mt-4 text-lg leading-normal text-[#31373D]">
|
||||
Designed for every stage of your journey.
|
||||
</p>
|
||||
<p className="text-lg leading-normal text-[#31373D]">Get started today.</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12">
|
||||
<PricingTable />
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-36 max-w-2xl">
|
||||
{/* FAQ Section */}
|
||||
|
||||
<h2 className="text-4xl font-semibold">FAQs</h2>
|
||||
|
||||
<Accordion type="multiple" className="mt-8">
|
||||
<AccordionItem value="plan-differences">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
What is the difference between the plans?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
You can self-host Documenso for free or use our ready-to-use hosted version. The
|
||||
hosted version comes with additional support, painless scalability and more. Early
|
||||
adopters of the community plan will get access to all features we build this year, for
|
||||
no additional cost! Forever! Yes, that includes multiple users per account later. If
|
||||
you want Documenso for your enterprise, we are happy to talk about your needs.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="data-handling">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
How do you handle my data?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
Securely. Our data centers are located in Frankfurt (Germany), giving us the best
|
||||
local privacy laws. We are very aware of the sensitive nature of our data and follow
|
||||
best practices to ensure the security and integrity of the data entrusted to us.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="should-use-cloud">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
Why should I use your hosting service?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
Using our hosted version is the easiest way to get started, you can simply subscribe
|
||||
and start signing your documents. We take care of the infrastructure, so you can focus
|
||||
on your business. Additionally, when using our hosted version you benefit from our
|
||||
trusted signing certificates which helps you to build trust with your customers.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="how-to-contribute">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
How can I contribute?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
That's awesome. You can take a look at the current{' '}
|
||||
<Link
|
||||
className="text-documenso-700 font-bold"
|
||||
href="https://github.com/documenso/documenso/milestones"
|
||||
target="_blank"
|
||||
>
|
||||
Issues
|
||||
</Link>{' '}
|
||||
and join our{' '}
|
||||
<Link
|
||||
className="text-documenso-700 font-bold"
|
||||
href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
|
||||
target="_blank"
|
||||
>
|
||||
Slack Community
|
||||
</Link>{' '}
|
||||
to keep up to date, on what the current priorities are. In any case, we are an open
|
||||
community and welcome all input, technical and non-technical ❤️
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="can-i-use-documenso-commercially">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
Can I use Documenso commercially?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
Yes! Documenso is offered under the GNU AGPL V3 open source license. This means you
|
||||
can use it for free and even modify it to fit your needs, as long as you publish your
|
||||
changes under the same license.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="why-prefer-documenso">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
Why should I prefer Documenso over DocuSign or some other signing tool?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
Documenso is a community effort to create an open and vibrant ecosystem around a tool,
|
||||
everybody is free to use and adapt. By being truly open we want to create trusted
|
||||
infrastructure for the future of the internet.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="where-can-i-get-support">
|
||||
<AccordionTrigger className="text-left text-lg font-semibold">
|
||||
Where can I get support?
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
|
||||
We are happy to assist you at{' '}
|
||||
<Link
|
||||
className="text-documenso-700 font-bold"
|
||||
target="_blank"
|
||||
href="mailto:support@documenso.com"
|
||||
>
|
||||
support@documenso.com
|
||||
</Link>{' '}
|
||||
or{' '}
|
||||
<a
|
||||
className="text-documenso-700 font-bold"
|
||||
href="https://join.slack.com/t/documenso/shared_invite/zt-1vibm8txi-DqsDFtdp44Hn2H5lc~RpPQ"
|
||||
target="_blank"
|
||||
>
|
||||
in our Slack-Support-Channel
|
||||
</a>{' '}
|
||||
please message either Lucas or Timur to get added to the channel if you are not
|
||||
already a member.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user