refactor: enhance card components with improved styling and structure

- Updated multiple card components (`ContactFormCard`, `DeleteAccountCard`, `UpdateAvatarCard`, `UpdateNameCard`, `UpdatePasswordCard`, and `WaitlistFormCard`) to include `overflow-hidden` for better layout management.
- Improved the structure of card titles and descriptions for better readability.
- Adjusted card footers to include `rounded-none` for consistent styling across components.
- Enhanced overall UI consistency and maintainability by refining component styles.

src/app/[locale]/(dashborad)/settings/billing/page.tsx

@@ -18,7 +18,7 @@ export default function SettingsBillingPage() {
   return (
     <>
       <DashboardHeader breadcrumbs={breadcrumbs} />
-      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+      <div className="flex flex-1 flex-col gap-4 p-4">
         <div className="grid auto-rows-min gap-4 md:grid-cols-3">
           <div className="aspect-video rounded-xl bg-muted/50" />
           <div className="aspect-video rounded-xl bg-muted/50" />

src/components/contact/contact-form-card.tsx

@@ -84,10 +84,14 @@ export function ContactFormCard() {
   };
 
   return (
-    <Card className="mx-auto max-w-lg">
+    <Card className="mx-auto max-w-lg overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-lg font-bold">{t('formTitle')}</CardTitle>
-        <CardDescription>{t('formDescription')}</CardDescription>
+        <CardTitle className="text-lg font-bold">
+          {t('formTitle')}
+        </CardTitle>
+        <CardDescription>
+          {t('formDescription')}
+        </CardDescription>
       </CardHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -147,7 +151,7 @@ export function ContactFormCard() {
 
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? t('submitting') : t('submit')}
             </Button>

src/components/settings/account/delete-account-card.tsx

@@ -74,9 +74,11 @@ export function DeleteAccountCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg border-destructive/50">
+    <Card className="max-w-md md:max-w-lg border-destructive/50 overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-lg font-bold text-destructive">{t('deleteAccount.title')}</CardTitle>
+        <CardTitle className="text-lg font-bold text-destructive">
+          {t('deleteAccount.title')}
+        </CardTitle>
         <CardDescription>
           {t('deleteAccount.description')}
         </CardDescription>
@@ -90,7 +92,7 @@ export function DeleteAccountCard() {
           <FormError message={error} />
         </div>
       </CardContent>
-      <CardFooter className="px-6 py-4 flex justify-end items-center bg-muted">
+      <CardFooter className="px-6 py-4 flex justify-end items-center bg-muted rounded-none">
         <Button
           variant="destructive"
           onClick={() => setShowConfirmation(true)}

src/components/settings/account/update-avatar-card.tsx

@@ -62,9 +62,11 @@ export function UpdateAvatarCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg">
+    <Card className="max-w-md md:max-w-lg overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-lg font-bold">{t('avatar.title')}</CardTitle>
+        <CardTitle className="text-lg font-bold">
+          {t('avatar.title')}
+        </CardTitle>
         <CardDescription>
           {t('avatar.description')}
         </CardDescription>
@@ -90,7 +92,7 @@ export function UpdateAvatarCard() {
           </Button>
         </div>
       </CardContent>
-      <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+      <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
         <p className="text-sm text-muted-foreground">
           {t('avatar.recommendation')}
         </p>

src/components/settings/account/update-name-card.tsx

@@ -108,9 +108,11 @@ export function UpdateNameCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg">
+    <Card className="max-w-md md:max-w-lg overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-lg font-bold">{t('name.title')}</CardTitle>
+        <CardTitle className="text-lg font-bold">
+          {t('name.title')}
+        </CardTitle>
         <CardDescription>
           {t('name.description')}
         </CardDescription>
@@ -135,7 +137,7 @@ export function UpdateNameCard() {
             />
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <p className="text-sm text-muted-foreground">
               {t('name.hint')}
             </p>

src/components/settings/account/update-password-card.tsx

@@ -106,9 +106,11 @@ export function UpdatePasswordCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg">
+    <Card className="max-w-md md:max-w-lg overflow-hidden">
       <CardHeader>
-        <CardTitle className="text-lg font-bold">{t('password.title')}</CardTitle>
+        <CardTitle className="text-lg font-bold">
+          {t('password.title')}
+        </CardTitle>
         <CardDescription>
           {t('password.description')}
         </CardDescription>
@@ -190,7 +192,7 @@ export function UpdatePasswordCard() {
             />
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <p className="text-sm text-muted-foreground">
               {t('password.hint')}
             </p>

src/components/waitlist/waitlist-form-card.tsx

@@ -78,7 +78,7 @@ export function WaitlistFormCard() {
   };
 
   return (
-    <Card className="mx-auto max-w-lg">
+    <Card className="mx-auto max-w-lg overflow-hidden">
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('formTitle')}
@@ -110,7 +110,7 @@ export function WaitlistFormCard() {
 
             <FormError message={error} />
           </CardContent>
-          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
+          <CardFooter className="px-6 py-4 flex justify-between items-center bg-muted rounded-none">
             <Button type="submit" disabled={isSubmitting}>
               {isSubmitting ? t('subscribing') : t('subscribe')}
             </Button>