chore: made requested changes

Signed-off-by: Adithya Krishna <adikrish@redhat.com>

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -34,23 +34,22 @@ export default async function DashboardPage() {
     }),
   ]);
 
-  const cardData = [
-    { icon: FileCheck, title: 'Completed', status: stats.COMPLETED },
-    { icon: File, title: 'Drafts', status: stats.DRAFT },
-    { icon: Clock, title: 'Pending', status: stats.PENDING },
-  ];
-
   return (
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <h1 className="text-4xl font-semibold">Dashboard</h1>
+
       <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
-        {cardData.map((card) => (
-          <Link key={card.status} href={`/documents?status=${card.status}`} passHref>
-            <CardMetric icon={card.icon} title={card.title} value={card.status} />
+        <Link href={'/documents?status=COMPLETED'} passHref>
+          <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
+        </Link>
+        <Link href={'/documents?status=DRAFT'} passHref>
+          <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
+        </Link>
+        <Link href={'/documents?status=PENDING'} passHref>
+          <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
         </Link>
-        ))}
       </div>
-      ;
+
       <div className="mt-12">
         <UploadDocument />
 

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -82,17 +82,13 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
         </div>
       )}
 
-      <p
-        className={`
-          ${
-            !field.inserted
-              ? 'group-hover:text-primary text-muted-foreground text-lg duration-200'
-              : 'text-muted-foreground text-sm duration-200'
-          }
-        `}
-      >
-        {field.inserted ? field.customText : 'Date'}
-      </p>
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
+      )}
     </SigningFieldContainer>
   );
 };

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -60,16 +60,18 @@ export const SigningFieldContainer = ({
             'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
           )}
         >
+          {!field.inserted && !loading && (
+            <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
+          )}
+
+          {field.inserted && !loading && (
             <button
-            type="submit"
-            className={`
-              absolute inset-0 z-10 ${field.inserted ? 'text-destructive bg-background/40' : ''}
-            `}
-            onClick={field.inserted ? onRemoveSignedFieldClick : onSignFieldClick}
-            disabled={loading}
+              className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+              onClick={onRemoveSignedFieldClick}
             >
-            {field.inserted ? 'Remove' : ''}
+              Remove
             </button>
+          )}
           {children}
         </CardContent>
       </Card>

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

@@ -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>
+        <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">{card.title}</strong>
-                {card.description}
+              <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={card.image} alt="Its fast" className="w-full max-w-[16rem]" />
+              <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>
   );

apps/web/src/components/(marketing)/footer.tsx

@@ -9,13 +9,13 @@ import { cn } from '@documenso/ui/lib/utils';
 
 export type FooterProps = HTMLAttributes<HTMLDivElement>;
 
-export const Footer = ({ className, ...props }: FooterProps) => {
-  const socialLinks = [
+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>

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

@@ -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>
+        <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">{card.title}</strong>
-                {card.description}
+              <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={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
+              <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>
   );

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

@@ -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>
+        <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">{card.title}</strong>
-                {card.description}
+              <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={card.image} alt="Its fast" className={`w-full ${card.imageSize}`} />
+              <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>
   );