Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated rendeing of items using map

Browse Source 
Signed-off-by: Adithya Krishna <adikrish@redhat.com>
This commit is contained in:
Adithya Krishna
2023-08-27 07:24:39 +05:30
committed by Mythie
parent cf799e63ca
commit a23e3c6068
3 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/web/src/components/(marketing)/faster-smarter-beautiful-bento.tsx
View File

@ -16,6 +16,21 @@ 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">
@ -45,32 +60,19 @@ export const FasterSmarterBeautifulBento = ({
</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>
{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>
))}
</div>
</div>
);

55
apps/web/src/components/(marketing)/open-build-template-bento.tsx
View File

@ -13,6 +13,22 @@ 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">
@ -42,32 +58,19 @@ export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplat
</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>
{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>
))}
</div>
</div>
);

76
apps/web/src/components/(marketing)/share-connect-paid-widget-bento.tsx
View File

@ -17,6 +17,29 @@ 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">
@ -45,46 +68,19 @@ export const ShareConnectPaidWidgetBento = ({
</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>
{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>
))}
</div>
</div>
);