mirror of
https://github.com/documenso/documenso.git
synced 2025-11-12 07:43:16 +10:00
aa4b6f1723
**Description:** - Updated mobile header with respect to latest designs <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a new `showText` property to the `MenuSwitcher` component to control text visibility. - Added a `textSectionClassName` property to the `AvatarWithText` component for conditional text section styling. - Updated the `CommandDialog` and `DialogContent` components with new positioning and styling properties. - **Style Updates** - Adjusted text size responsiveness in the `Hero` component for various screen sizes. - Modified text truncation and input styling in the `Widget` component. - Changed the width of the `SheetContent` element in `MobileNavigation` and adjusted footer layout. - **Documentation** - Added instructions for certificate placement in `SIGNING.md`. - **Refactor** - Standardized type imports across various components and utilities for improved type checking. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Signed-off-by: Adithya Krishna <adithya@documenso.com> Signed-off-by: Adithya Krishna <aadithya794@gmail.com> Co-authored-by: David Nguyen <davidngu28@gmail.com>
86 lines
3.5 KiB
TypeScript
86 lines
3.5 KiB
TypeScript
import type { HTMLAttributes } from 'react';
|
||
|
||
import Image from 'next/image';
|
||
|
||
import backgroundPattern from '@documenso/assets/images/background-pattern.png';
|
||
import cardBuildFigure from '@documenso/assets/images/card-build-figure.png';
|
||
import cardOpenFigure from '@documenso/assets/images/card-open-figure.png';
|
||
import cardTemplateFigure from '@documenso/assets/images/card-template-figure.png';
|
||
import { cn } from '@documenso/ui/lib/utils';
|
||
import { Card, CardContent } from '@documenso/ui/primitives/card';
|
||
|
||
export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
|
||
|
||
export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
|
||
return (
|
||
<div className={cn('relative', className)} {...props}>
|
||
<div className="absolute inset-0 -z-10 flex items-center justify-center">
|
||
<Image
|
||
src={backgroundPattern}
|
||
alt="background pattern"
|
||
className="h-full scale-125 object-cover dark:contrast-[70%] dark:invert dark:sepia md:scale-150 lg:scale-[175%]"
|
||
/>
|
||
</div>
|
||
<h2 className="px-0 text-[22px] font-semibold md:px-12 md:text-4xl lg:px-24">
|
||
Truly your own.
|
||
<span className="block md:mt-0">Customise and expand.</span>
|
||
</h2>
|
||
|
||
<div className="mt-6 grid grid-cols-2 gap-8 md:mt-8">
|
||
<Card className="col-span-2" degrees={45} gradient>
|
||
<CardContent className="grid grid-cols-12 gap-8 overflow-hidden p-6 lg:aspect-[2.5/1]">
|
||
<p className="text-foreground/80 col-span-12 leading-relaxed lg:col-span-6">
|
||
<strong className="block">Open Source or Hosted.</strong>
|
||
It’s up to you. Either clone our repository or rely on our easy to use hosting
|
||
solution.
|
||
</p>
|
||
|
||
<div className="col-span-12 -my-6 -mr-6 flex items-end justify-end pt-12 lg:col-span-6">
|
||
<Image
|
||
src={cardOpenFigure}
|
||
alt="its fast"
|
||
className="max-w-[80%] dark:contrast-[70%] dark:hue-rotate-180 dark:invert lg:max-w-full"
|
||
/>
|
||
</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="text-foreground/80 leading-relaxed">
|
||
<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 dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
|
||
/>
|
||
</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="text-foreground/80 leading-relaxed">
|
||
<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 dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|