mirror of
https://github.com/documenso/documenso.git
synced 2025-11-18 02:32:00 +10:00
chore: made requested changes
Signed-off-by: Adithya Krishna <adikrish@redhat.com>
This commit is contained in:
@ -16,21 +16,6 @@ export const FasterSmarterBeautifulBento = ({
|
||||
className,
|
||||
...props
|
||||
}: FasterSmarterBeautifulBentoProps) => {
|
||||
const featureCards = [
|
||||
{
|
||||
title: 'Beautiful.',
|
||||
description:
|
||||
'Because signing should be celebrated. That’s why we care about the smallest detail in our product.',
|
||||
image: cardBeautifulFigure,
|
||||
},
|
||||
{
|
||||
title: 'Smart.',
|
||||
description:
|
||||
'Our custom templates come with smart rules that can help you save time and energy.',
|
||||
image: cardSmartFigure,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={cn('relative', className)} {...props}>
|
||||
<div className="absolute inset-0 -z-10 flex items-center justify-center">
|
||||
@ -60,19 +45,32 @@ export const FasterSmarterBeautifulBento = ({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{featureCards.map((card, index) => (
|
||||
<Card key={index} className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">{card.title}</strong>
|
||||
{card.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={card.image} alt="Its fast" className="w-full max-w-[16rem]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Beautiful.</strong>
|
||||
Because signing should be celebrated. That’s why we care about the smallest detail in
|
||||
our product.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardBeautifulFigure} alt="its fast" className="w-full max-w-xs" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Smart.</strong>
|
||||
Our custom templates come with smart rules that can help you save time and energy.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardSmartFigure} alt="its fast" className="w-full max-w-[16rem]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,13 +9,13 @@ import { cn } from '@documenso/ui/lib/utils';
|
||||
|
||||
export type FooterProps = HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const Footer = ({ className, ...props }: FooterProps) => {
|
||||
const socialLinks = [
|
||||
{ href: 'https://twitter.com/documenso', icon: <Twitter className="h-6 w-6" /> },
|
||||
{ href: 'https://github.com/documenso/documenso', icon: <Github className="h-6 w-6" /> },
|
||||
{ href: 'https://documenso.slack.com', icon: <Slack className="h-6 w-6" /> },
|
||||
];
|
||||
const SOCIAL_LINKS = [
|
||||
{ href: 'https://twitter.com/documenso', icon: <Twitter className="h-6 w-6" /> },
|
||||
{ href: 'https://github.com/documenso/documenso', icon: <Github className="h-6 w-6" /> },
|
||||
{ href: 'https://documenso.slack.com', icon: <Slack className="h-6 w-6" /> },
|
||||
];
|
||||
|
||||
export const Footer = ({ className, ...props }: FooterProps) => {
|
||||
const footerLinks = [
|
||||
{ href: '/pricing', text: 'Pricing' },
|
||||
{ href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
|
||||
@ -32,7 +32,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
|
||||
</Link>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4 text-[#8D8D8D]">
|
||||
{socialLinks.map((link, index) => (
|
||||
{SOCIAL_LINKS.map((link, index) => (
|
||||
<Link key={index} href={link.href} target="_blank" className="hover:text-[#6D6D6D]">
|
||||
{link.icon}
|
||||
</Link>
|
||||
|
||||
@ -13,22 +13,6 @@ import cardTemplateFigure from '~/assets/card-template-figure.png';
|
||||
export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
|
||||
|
||||
export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
|
||||
const cardData = [
|
||||
{
|
||||
title: 'Build on top.',
|
||||
description: 'Make it your own through advanced customization and adjustability.',
|
||||
image: cardBuildFigure,
|
||||
imageSize: 'max-w-xs',
|
||||
},
|
||||
{
|
||||
title: 'Template Store (Soon).',
|
||||
description:
|
||||
'Choose a template from the community app store. Or submit your own template for others to use.',
|
||||
image: cardTemplateFigure,
|
||||
imageSize: 'max-w-sm',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={cn('relative', className)} {...props}>
|
||||
<div className="absolute inset-0 -z-10 flex items-center justify-center">
|
||||
@ -58,19 +42,32 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{cardData.map((card, index) => (
|
||||
<Card key={index} className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">{card.title}</strong>
|
||||
{card.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Build on top.</strong>
|
||||
Make it your own through advanced customization and adjustability.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardBuildFigure} alt="its fast" className="w-full max-w-xs" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Template Store (Soon).</strong>
|
||||
Choose a template from the community app store. Or submit your own template for others
|
||||
to use.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardTemplateFigure} alt="its fast" className="w-full max-w-sm" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -17,29 +17,6 @@ export const ShareConnectPaidWidgetBento = ({
|
||||
className,
|
||||
...props
|
||||
}: ShareConnectPaidWidgetBentoProps) => {
|
||||
const cardData = [
|
||||
{
|
||||
title: 'Connections (Soon).',
|
||||
description:
|
||||
'Create connections and automations with Zapier and more to integrate with your favorite tools.',
|
||||
image: cardConnectionsFigure,
|
||||
imageSize: 'max-w-sm',
|
||||
},
|
||||
{
|
||||
title: 'Get paid (Soon).',
|
||||
description: 'Integrated payments with stripe so you don’t have to worry about getting paid.',
|
||||
image: cardPaidFigure,
|
||||
imageSize: 'max-w-[14rem]',
|
||||
},
|
||||
{
|
||||
title: 'React Widget (Soon).',
|
||||
description:
|
||||
'Easily embed Documenso into your product. Simply copy and paste our react widget into your application.',
|
||||
image: cardWidgetFigure,
|
||||
imageSize: 'max-w-xs',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={cn('relative', className)} {...props}>
|
||||
<div className="absolute inset-0 -z-10 flex items-center justify-center">
|
||||
@ -68,19 +45,46 @@ export const ShareConnectPaidWidgetBento = ({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{cardData.map((card, index) => (
|
||||
<Card key={index} className="col-span-2 lg:col-span-1" gradient={index === 0} spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">{card.title}</strong>
|
||||
{card.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Connections (Soon).</strong>
|
||||
Create connections and automations with Zapier and more to integrate with your
|
||||
favorite tools.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardConnectionsFigure} alt="its fast" className="w-full max-w-sm" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">Get paid (Soon).</strong>
|
||||
Integrated payments with stripe so you don’t have to worry about getting paid.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardPaidFigure} alt="its fast" className="w-full max-w-[14rem]" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="col-span-2 lg:col-span-1" spotlight>
|
||||
<CardContent className="grid grid-cols-1 gap-8 p-6">
|
||||
<p className="leading-relaxed text-[#555E67]">
|
||||
<strong className="block">React Widget (Soon).</strong>
|
||||
Easily embed Documenso into your product. Simply copy and paste our react widget into
|
||||
your application.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<Image src={cardWidgetFigure} alt="its fast" className="w-full max-w-xs" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user