Merge remote-tracking branch 'origin/main' into cloudflare

src/app/[locale]/(marketing)/(pages)/about/page.tsx

@@ -100,7 +100,7 @@ export default async function AboutPage() {
         </div>
 
         {/* image section */}
-        <BlurFadeDemo />
+        {/* <BlurFadeDemo /> */}
       </div>
     </Container>
   );

src/components/blocks/features/features.tsx

@@ -53,7 +53,7 @@ export default function FeaturesSection() {
 
   return (
     <section id="features" className="px-4 py-16">
-      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]" />
+      {/* <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]" /> */}
       <div className="mx-auto max-w-6xl space-y-8 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
         <HeaderSection
           title={t('title')}

src/components/pricing/pricing-card.tsx

@@ -24,6 +24,7 @@ import {
 import { CheckCircleIcon, XCircleIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { LoginWrapper } from '../auth/login-wrapper';
+import { Badge } from '../ui/badge';
 import { CheckoutButton } from './create-checkout-button';
 
 interface PricingCardProps {
@@ -117,22 +118,26 @@ export function PricingCard({
     >
       {/* show popular badge if plan is recommended */}
       {plan.popular && (
-        <span
-          className="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full px-3 py-1 text-xs font-medium border
-        bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200  border-purple-200 dark:border-purple-800 shadow-sm"
-        >
-          {t('popular')}
-        </span>
+        <div className="absolute -top-3.5 left-1/2 transform -translate-x-1/2">
+          <Badge
+            variant="default"
+            className="bg-primary text-primary-foreground"
+          >
+            {t('popular')}
+          </Badge>
+        </div>
       )}
 
       {/* show current plan badge if plan is current plan */}
       {isCurrentPlan && (
-        <span
-          className="absolute inset-x-0 -top-3 mx-auto flex h-6 w-fit items-center rounded-full px-3 py-1 text-xs font-medium border
-        bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 border-blue-200 dark:border-blue-800 shadow-sm"
-        >
-          {t('currentPlan')}
-        </span>
+        <div className="absolute -top-3.5 left-1/2 transform -translate-x-1/2">
+          <Badge
+            variant="default"
+            className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 border-blue-200 dark:border-blue-800"
+          >
+            {t('currentPlan')}
+          </Badge>
+        </div>
       )}
 
       <CardHeader>

src/components/settings/billing/billing-card.tsx

@@ -111,7 +111,6 @@ export default function BillingCard() {
             <Skeleton className="h-6 w-1/5" />
           </div>
           <div className="text-sm text-muted-foreground space-y-2">
-            <Skeleton className="h-6 w-2/5" />
             <Skeleton className="h-6 w-3/5" />
           </div>
         </CardContent>

src/components/settings/credits/credits-balance-card.tsx

@@ -131,7 +131,6 @@ export default function CreditsBalanceCard() {
             <Skeleton className="h-6 w-1/5" />
           </div>
           <div className="text-sm text-muted-foreground space-y-2">
-            <Skeleton className="h-6 w-2/5" />
             <Skeleton className="h-6 w-3/5" />
           </div>
         </CardContent>