feat: darker dark theme

This commit is contained in:
Mythie
2023-09-24 14:45:50 +10:00
parent 986bab2ba4
commit 60ae674984
39 changed files with 498 additions and 438 deletions

View File

@ -39,21 +39,21 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
const MDXContent = useMDXComponent(post.body.code);
return (
<article className="prose prose-slate mx-auto py-8">
<article className="prose dark:prose-invert mx-auto py-8">
<div className="mb-6 text-center">
<time dateTime={post.date} className="mb-1 text-xs text-gray-600">
<time dateTime={post.date} className="text-muted-foreground mb-1 text-xs">
{new Date(post.date).toLocaleDateString()}
</time>
<h1 className="text-3xl font-bold">{post.title}</h1>
<div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
<div className="h-10 w-10 rounded-full bg-gray-50">
<div className="bg-foreground h-10 w-10 rounded-full">
{post.authorImage && (
<img
src={post.authorImage}
alt={`Image of ${post.authorName}`}
className="h-10 w-10 rounded-full bg-gray-50"
className="bg-foreground/10 h-10 w-10 rounded-full"
/>
)}
</div>

View File

@ -13,13 +13,13 @@ export default function BlogPage() {
<div className="text-center">
<h1 className="text-3xl font-bold lg:text-5xl">From the blog</h1>
<p className="mx-auto mt-4 max-w-xl text-center text-lg leading-normal text-[#31373D]">
<p className="text-muted-foreground mx-auto mt-4 max-w-xl text-center text-lg leading-normal">
Get the latest news from Documenso, including product updates, team announcements and
more!
</p>
</div>
<div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
<div className="divide-muted-foreground/20 border-muted-foreground/20 mt-10 divide-y border-t">
{blogPosts.map((post, i) => (
<article
key={`blog-${i}`}
@ -57,12 +57,12 @@ export default function BlogPage() {
</div>
<div className="relative mt-4 flex items-center gap-x-4">
<div className="h-10 w-10 rounded-full bg-slate-50">
<div className="bg-foreground/5 h-10 w-10 rounded-full">
{post.authorImage && (
<img
src={post.authorImage}
alt={`Image of ${post.authorName}`}
className="h-10 w-10 rounded-full bg-slate-50"
className="bg-foreground/5 h-10 w-10 rounded-full"
/>
)}
</div>

View File

@ -58,40 +58,40 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
return (
<div className="mt-12">
<h1 className="text-3xl font-bold text-slate-900 md:text-4xl">
<h1 className="text-foreground text-3xl font-bold 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">
<p className="text-muted-foreground mt-4 max-w-prose text-base 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">
<p className="text-muted-foreground mt-4 max-w-prose text-base 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">
<p className="text-muted-foreground mt-4 max-w-prose text-base 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>
<h2 className="text-foreground text-2xl font-bold">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',
'text-foreground text-4xl font-semibold md:text-5xl',
fontCaveat.className,
)}
>
Timur
</p>
<p className="text-sm text-slate-500 md:text-lg">
<p className="text-muted-foreground text-sm md:text-lg">
Timur Ercan
<span className="block lg:hidden" />
<span className="hidden lg:inline"> - </span>
@ -102,14 +102,14 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
<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',
'text-foreground text-4xl font-semibold md:text-5xl',
fontCaveat.className,
)}
>
Lucas
</p>
<p className="text-sm text-slate-500 md:text-lg">
<p className="text-muted-foreground text-sm md:text-lg">
Lucas Smith
<span className="block lg:hidden" />
<span className="hidden lg:inline"> - </span>
@ -119,12 +119,16 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
<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]" />
<img
src={signatureDataUrl}
alt="your-signature"
className="max-w-[172px] dark:invert"
/>
)}
{!signatureDataUrl && (
<p
className={cn(
'text-4xl font-semibold text-slate-900 md:text-5xl',
'text-foreground text-4xl font-semibold md:text-5xl',
fontCaveat.className,
)}
>
@ -132,7 +136,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
</p>
)}
<p className="text-sm text-slate-500 md:text-lg">
<p className="text-muted-foreground text-sm md:text-lg">
{user.name}
<span className="block lg:hidden" />
<span className="hidden lg:inline"> - </span>
@ -143,20 +147,20 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
</div>
<div className="mt-12">
<h2 className="text-2xl font-bold text-slate-900">Your sign in details</h2>
<h2 className="text-foreground text-2xl font-bold">Your sign in details</h2>
<div className="mt-4">
<p className="text-lg text-slate-500">
<p className="text-muted-foreground text-lg">
<span className="font-bold">Email:</span> {user.email}
</p>
<p className="mt-2 text-lg text-slate-500">
<p className="text-muted-foreground mt-2 text-lg">
<span className="font-bold">Password:</span>{' '}
<PasswordReveal password={password ?? 'password'} />
</p>
</div>
<p className="mt-4 text-sm italic text-slate-500">
<p className="text-muted-foreground mt-4 text-sm italic">
This is a temporary password. Please change it as soon as possible.
</p>

View File

@ -10,7 +10,7 @@ export type MarketingLayoutProps = {
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">
<div className="bg-background/50 fixed left-0 top-0 z-50 w-full backdrop-blur-md">
<Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
</div>

View File

@ -0,0 +1,84 @@
'use client';
import Link from 'next/link';
import { Variants, motion } from 'framer-motion';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
import { TOSSFriendsSchema } from './schema';
const ContainerVariants: Variants = {
initial: {
opacity: 0,
},
animate: {
opacity: 1,
transition: {
staggerChildren: 0.075,
},
},
};
const CardVariants: Variants = {
initial: {
opacity: 0,
y: 50,
},
animate: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
},
},
};
const randomDegrees = () => {
const degrees = [45, 120, -140, -45];
return degrees[Math.floor(Math.random() * degrees.length)];
};
export type OSSFriendsContainerProps = {
className?: string;
ossFriends: TOSSFriendsSchema;
};
export const OSSFriendsContainer = ({ className, ossFriends }: OSSFriendsContainerProps) => {
return (
<motion.div
className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3', className)}
variants={ContainerVariants}
initial="initial"
animate="animate"
>
{ossFriends.map((friend, index) => (
<motion.div key={index} className="h-full w-full" variants={CardVariants}>
<Card
className="h-full"
degrees={randomDegrees()}
gradient={index % 2 === 0}
spotlight={index % 2 !== 0}
>
<CardContent className="flex h-full flex-col p-6">
<CardTitle>
<Link href={friend.href}>{friend.name}</Link>
</CardTitle>
<p className="text-foreground mt-4 flex-1 text-sm">{friend.description}</p>
<div className="mt-8">
<Link target="_blank" href={friend.href}>
<Button>Learn more</Button>
</Link>
</div>
</CardContent>
</Card>
</motion.div>
))}
</motion.div>
);
};

View File

@ -1,152 +1,23 @@
'use client';
import Image from 'next/image';
import Link from 'next/link';
import { Variants, motion } from 'framer-motion';
import { Button } from '@documenso/ui/primitives/button';
import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
import { z } from 'zod';
import backgroundPattern from '~/assets/background-pattern.png';
const OSSFriends = [
{
name: 'BoxyHQ',
description:
'BoxyHQs suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
href: 'https://boxyhq.com',
},
{
name: 'Cal.com',
description:
'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
href: 'https://cal.com',
},
{
name: 'Crowd.dev',
description:
'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
href: 'https://www.crowd.dev',
},
{
name: 'Documenso',
description:
'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
href: 'https://documenso.com',
},
{
name: 'Erxes',
description:
'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences that work for all types of business.',
href: 'https://erxes.io',
},
{
name: 'Formbricks',
description:
'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
href: 'https://formbricks.com',
},
{
name: 'Forward Email',
description:
'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
href: 'https://forwardemail.net',
},
{
name: 'GitWonk',
description:
'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
href: 'https://gitwonk.com',
},
{
name: 'Hanko',
description:
'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
href: 'https://www.hanko.io',
},
{
name: 'HTMX',
description:
'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
href: 'https://htmx.org',
},
{
name: 'Infisical',
description:
'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
href: 'https://infisical.com',
},
{
name: 'Novu',
description:
'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
href: 'https://novu.co',
},
{
name: 'OpenBB',
description:
'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
href: 'https://openbb.co',
},
{
name: 'Sniffnet',
description:
'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
href: 'https://www.sniffnet.net',
},
{
name: 'Typebot',
description:
'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
href: 'https://typebot.io',
},
{
name: 'Webiny',
description:
'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
href: 'https://www.webiny.com',
},
{
name: 'Webstudio',
description: 'Webstudio is an open source alternative to Webflow',
href: 'https://webstudio.is',
},
];
import { OSSFriendsContainer } from './container';
import { TOSSFriendsSchema, ZOSSFriendsSchema } from './schema';
const ContainerVariants: Variants = {
initial: {
opacity: 0,
},
animate: {
opacity: 1,
transition: {
staggerChildren: 0.075,
export default async function OSSFriendsPage() {
const ossFriends: TOSSFriendsSchema = await fetch('https://formbricks.com/api/oss-friends', {
next: {
revalidate: 3600,
},
},
};
})
.then(async (res) => res.json())
.then(async (data) => z.object({ data: ZOSSFriendsSchema }).parseAsync(data))
.then(({ data }) => data)
.catch(() => []);
const CardVariants: Variants = {
initial: {
opacity: 0,
y: 50,
},
animate: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
},
},
};
const randomDegrees = () => {
const degrees = [45, 120, -140, -45];
return degrees[Math.floor(Math.random() * degrees.length)];
};
export default function OSSFriendsPage() {
return (
<div className="relative mt-12">
<div className="text-center">
@ -154,49 +25,19 @@ export default function OSSFriendsPage() {
Our <span title="Open Source Software">OSS</span> Friends
</h1>
<p className="mx-auto mt-4 max-w-[55ch] text-lg leading-normal text-[#31373D]">
<p className="text-foreground mx-auto mt-4 max-w-[55ch] text-lg leading-normal">
We love open source and so should you, below you can find a list of our friends who are
just as passionate about open source as we are.
</p>
</div>
<motion.div
className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
variants={ContainerVariants}
initial="initial"
animate="animate"
>
{OSSFriends.map((friend, index) => (
<motion.div key={index} className="h-full w-full" variants={CardVariants}>
<Card
className="h-full"
degrees={randomDegrees()}
gradient={index % 2 === 0}
spotlight={index % 2 !== 0}
>
<CardContent className="flex h-full flex-col p-6">
<CardTitle>
<Link href={friend.href}>{friend.name}</Link>
</CardTitle>
<p className="mt-4 flex-1 text-sm text-slate-700">{friend.description}</p>
<div className="mt-8">
<Link target="_blank" href={friend.href}>
<Button>Learn more</Button>
</Link>
</div>
</CardContent>
</Card>
</motion.div>
))}
</motion.div>
<OSSFriendsContainer className="mt-12" ossFriends={ossFriends} />
<div className="absolute inset-0 -z-10 flex items-start justify-center">
<Image
src={backgroundPattern}
alt="background pattern"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover dark:invert dark:sepia md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
/>
</div>
</div>

View File

@ -0,0 +1,11 @@
import { z } from 'zod';
export const ZOSSFriendsSchema = z.array(
z.object({
name: z.string(),
href: z.string().url(),
description: z.string(),
}),
);
export type TOSSFriendsSchema = z.infer<typeof ZOSSFriendsSchema>;

View File

@ -24,10 +24,10 @@ export default function PricingPage() {
<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]">
<p className="text-foreground mt-4 text-lg leading-normal">
Designed for every stage of your journey.
</p>
<p className="text-lg leading-normal text-[#31373D]">Get started today.</p>
<p className="text-foreground text-lg leading-normal">Get started today.</p>
</div>
<div className="mt-12">
@ -45,7 +45,7 @@ export default function PricingPage() {
What is the difference between the plans?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
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 will get access to all features we build this year, for no additional cost!
@ -59,7 +59,7 @@ export default function PricingPage() {
How do you handle my data?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
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.
@ -71,7 +71,7 @@ export default function PricingPage() {
Why should I use your hosting service?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
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
@ -84,7 +84,7 @@ export default function PricingPage() {
How can I contribute?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
That's awesome. You can take a look at the current{' '}
<Link
className="text-documenso-700 font-bold"
@ -111,7 +111,7 @@ export default function PricingPage() {
Can I use Documenso commercially?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
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.
@ -123,7 +123,7 @@ export default function PricingPage() {
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">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
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.
@ -135,7 +135,7 @@ export default function PricingPage() {
Where can I get support?
</AccordionTrigger>
<AccordionContent className="max-w-prose text-sm leading-relaxed text-slate-500">
<AccordionContent className="text-muted-foreground max-w-prose text-sm leading-relaxed">
We are happy to assist you at{' '}
<Link
className="text-documenso-700 font-bold"