diff --git a/src/app/[locale]/(marketing)/(pages)/about/page.tsx b/src/app/[locale]/(marketing)/(pages)/about/page.tsx
index b427134..5d99b11 100644
--- a/src/app/[locale]/(marketing)/(pages)/about/page.tsx
+++ b/src/app/[locale]/(marketing)/(pages)/about/page.tsx
@@ -33,7 +33,7 @@ export default async function AboutPage() {
   return (
     <div className="max-w-4xl mx-auto space-y-8">
       {/* about section */}
-      <div className="relative max-w-screen-md mx-auto mb-24 mt-8 md:mt-16">
+      <div className="relative max-w-(--breakpoint-md) mx-auto mb-24 mt-8 md:mt-16">
         <div className="mx-auto flex flex-col justify-between">
           <div className="grid gap-8 sm:grid-cols-2">
             {/* avatar and name */}
diff --git a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx b/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
index 54eb92b..5738539 100644
--- a/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
+++ b/src/app/[locale]/(marketing)/blog/[...slug]/page.tsx
@@ -109,7 +109,7 @@ export default async function BlogPostPage(props: NextPageProps) {
           {/* Basic information */}
           <div className="space-y-8">
             {/* blog post image */}
-            <div className="group overflow-hidden relative aspect-[16/9] rounded-lg transition-all border">
+            <div className="group overflow-hidden relative aspect-16/9 rounded-lg transition-all border">
               {post.image && (
                 <Image
                   src={post.image}
@@ -158,7 +158,7 @@ export default async function BlogPostPage(props: NextPageProps) {
             <div className="bg-muted/50 rounded-lg p-6">
               <h2 className="text-lg font-semibold mb-4">{t('author')}</h2>
               <div className="flex items-center gap-4">
-                <div className="relative h-8 w-8 flex-shrink-0">
+                <div className="relative h-8 w-8 shrink-0">
                   {post.author?.avatar && (
                     <Image
                       src={post.author.avatar}
diff --git a/src/app/[locale]/(marketing)/payment/cancel/page.tsx b/src/app/[locale]/(marketing)/payment/cancel/page.tsx
index 545705e..8403a88 100644
--- a/src/app/[locale]/(marketing)/payment/cancel/page.tsx
+++ b/src/app/[locale]/(marketing)/payment/cancel/page.tsx
@@ -33,13 +33,13 @@ export default function PaymentCancelPage() {
           <div className="flex justify-center space-x-4">
             <Link 
               href="/pricing" 
-              className="inline-flex items-center justify-center px-6 py-2 font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              className="inline-flex items-center justify-center px-6 py-2 font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
             >
               Try Again
             </Link>
             <Link 
               href="/contact" 
-              className="inline-flex items-center justify-center px-6 py-2 font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+              className="inline-flex items-center justify-center px-6 py-2 font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
             >
               Get Help
             </Link>
diff --git a/src/components/auth/auth-card.tsx b/src/components/auth/auth-card.tsx
index 9a15312..2a6f3d1 100644
--- a/src/components/auth/auth-card.tsx
+++ b/src/components/auth/auth-card.tsx
@@ -31,7 +31,7 @@ export const AuthCard = ({
   className,
 }: AuthCardProps) => {
   return (
-    <Card className={cn('shadow-sm border border-border', className)}>
+    <Card className={cn('shadow-xs border border-border', className)}>
       <CardHeader className="items-center">
         <LocaleLink href="/" prefetch={false}>
           <Logo className="mb-2" />
diff --git a/src/components/auth/divider-with-text.tsx b/src/components/auth/divider-with-text.tsx
index 77eaa4a..69671d1 100644
--- a/src/components/auth/divider-with-text.tsx
+++ b/src/components/auth/divider-with-text.tsx
@@ -14,11 +14,11 @@ export const DividerWithText = ({
 }: DividerWithTextProps) => {
   return (
     <div className={cn('relative flex items-center', className)}>
-      <div className="flex-grow border-t border-border"></div>
-      <span className="flex-shrink mx-4 text-sm text-muted-foreground">
+      <div className="grow border-t border-border"></div>
+      <span className="shrink mx-4 text-sm text-muted-foreground">
         {text}
       </span>
-      <div className="flex-grow border-t border-border"></div>
+      <div className="grow border-t border-border"></div>
     </div>
   );
 }; 
\ No newline at end of file
diff --git a/src/components/blog/blog-card.tsx b/src/components/blog/blog-card.tsx
index 4a9fc9f..b446b96 100644
--- a/src/components/blog/blog-card.tsx
+++ b/src/components/blog/blog-card.tsx
@@ -19,7 +19,7 @@ export default function BlogCard({ post }: BlogCardProps) {
     <LocaleLink href={`/blog/${slugParts.join('/')}`} className="block h-full">
       <div className="group flex flex-col border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
         {/* Image container - fixed aspect ratio */}
-        <div className="group overflow-hidden relative aspect-[16/9] w-full">
+        <div className="group overflow-hidden relative aspect-16/9 w-full">
           {post.image && (
             <div className="relative w-full h-full">
               <Image
@@ -54,7 +54,7 @@ export default function BlogCard({ post }: BlogCardProps) {
             {/* Post title */}
             <h3 className="text-lg line-clamp-2 font-medium">
               <span
-                className="bg-gradient-to-r from-green-200 to-green-100 
+                className="bg-linear-to-r from-green-200 to-green-100 
                   bg-[length:0px_10px] bg-left-bottom bg-no-repeat
                   transition-[background-size]
                   duration-500
@@ -79,7 +79,7 @@ export default function BlogCard({ post }: BlogCardProps) {
           {/* Author and date */}
           <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between space-x-4 text-muted-foreground">
             <div className="flex items-center gap-2">
-              <div className="relative h-8 w-8 flex-shrink-0">
+              <div className="relative h-8 w-8 shrink-0">
                 {post?.author?.avatar && (
                   <Image
                     src={post?.author?.avatar}
@@ -105,7 +105,7 @@ export default function BlogCard({ post }: BlogCardProps) {
 export function BlogCardSkeleton() {
   return (
     <div className="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden h-full">
-      <div className="overflow-hidden relative aspect-[16/9] w-full">
+      <div className="overflow-hidden relative aspect-16/9 w-full">
         <Skeleton className="w-full h-full" />
       </div>
       <div className="p-4 flex flex-col justify-between flex-1">
diff --git a/src/components/dashboard/dashboard-header.tsx b/src/components/dashboard/dashboard-header.tsx
index b3d56e9..757f72a 100644
--- a/src/components/dashboard/dashboard-header.tsx
+++ b/src/components/dashboard/dashboard-header.tsx
@@ -24,7 +24,7 @@ interface DashboardHeaderProps {
 export function DashboardHeader({ breadcrumbs, actions }: DashboardHeaderProps) {
   return (
     <header className="flex h-16 border-b shrink-0 items-center gap-2 sticky top-0 z-10 bg-background
-      transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+      transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
       <div className="flex items-center gap-2 px-4">
         <SidebarTrigger className="-ml-1" />
         <Separator orientation="vertical" className="mr-2 h-4" />
diff --git a/src/components/dashboard/sidebar-user.tsx b/src/components/dashboard/sidebar-user.tsx
index c392530..939aac7 100644
--- a/src/components/dashboard/sidebar-user.tsx
+++ b/src/components/dashboard/sidebar-user.tsx
@@ -110,7 +110,7 @@ export function SidebarUser() {
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
             side={isMobile ? 'bottom' : 'right'}
             align="end"
             sideOffset={4}
diff --git a/src/components/layout/navbar.tsx b/src/components/layout/navbar.tsx
index a48fc99..22e5193 100644
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@@ -34,7 +34,7 @@ const customNavigationMenuTriggerStyle = cn(
   navigationMenuTriggerStyle(),
   'relative bg-transparent text-muted-foreground',
   'hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground',
-  'data-[active]:font-semibold data-[active]:bg-transparent data-[active]:text-foreground',
+  'data-active:font-semibold data-active:bg-transparent data-active:text-foreground',
   'data-[state=open]:bg-transparent data-[state=open]:text-foreground'
 );
 
@@ -54,7 +54,7 @@ export function Navbar({ scroll }: NavBarProps) {
         'sticky inset-x-0 top-0 z-40 py-4 transition-all duration-300',
         scroll
           ? scrolled
-            ? 'bg-background/80 backdrop-blur-md border-b supports-[backdrop-filter]:bg-background/60'
+            ? 'bg-background/80 backdrop-blur-md border-b supports-backdrop-filter:bg-background/60'
             : 'bg-background'
           : 'border-b bg-background'
       )}
@@ -117,7 +117,7 @@ export function Navbar({ scroll }: NavBarProps) {
                                             : undefined
                                         }
                                         className="group flex select-none flex-row items-center gap-4 rounded-md 
-                                      p-2 leading-none no-underline outline-none transition-colors 
+                                      p-2 leading-none no-underline outline-hidden transition-colors 
                                       hover:bg-accent hover:text-accent-foreground 
                                       focus:bg-accent focus:text-accent-foreground"
                                       >
diff --git a/src/components/payment/pricing-card.tsx b/src/components/payment/pricing-card.tsx
index 3712d6f..b54ef0b 100644
--- a/src/components/payment/pricing-card.tsx
+++ b/src/components/payment/pricing-card.tsx
@@ -115,7 +115,7 @@ export function PricingCard({
         <CardTitle className="text-xl">{plan.name}</CardTitle>
         <CardDescription className="min-h-12">{plan.description}</CardDescription>
       </CardHeader>
-      <CardContent className="flex-grow">
+      <CardContent className="grow">
         <div className="mb-3">
           <span className="text-3xl font-bold">{formattedPrice}</span>
           {priceLabel && (
@@ -136,7 +136,7 @@ export function PricingCard({
         <ul className="space-y-3 mb-6">
           {plan.features.map((feature, i) => (
             <li key={i} className="flex items-start">
-              <Check className="h-5 w-5 text-green-500 mr-2 flex-shrink-0" />
+              <Check className="h-5 w-5 text-green-500 mr-2 shrink-0" />
               <span className="text-sm">{feature}</span>
             </li>
           ))}
diff --git a/src/components/settings/billing/billing-card.tsx b/src/components/settings/billing/billing-card.tsx
index fce5238..636abad 100644
--- a/src/components/settings/billing/billing-card.tsx
+++ b/src/components/settings/billing/billing-card.tsx
@@ -276,7 +276,7 @@ export default function BillingCard() {
                         <CardTitle>{plan.name}</CardTitle>
                         <CardDescription>{plan.description}</CardDescription>
                       </CardHeader>
-                      <CardContent className="flex-grow">
+                      <CardContent className="grow">
                         <div className="mb-4">
                           <span className="text-3xl font-bold">
                             {formatPrice(price.amount, price.currency)}
@@ -303,7 +303,7 @@ export default function BillingCard() {
                           {plan.features.map((feature, index) => (
                             <li key={index} className="flex items-start">
                               <svg
-                                className="h-5 w-5 text-primary flex-shrink-0 mr-2"
+                                className="h-5 w-5 text-primary shrink-0 mr-2"
                                 fill="none"
                                 viewBox="0 0 24 24"
                                 stroke="currentColor"
@@ -354,7 +354,7 @@ export default function BillingCard() {
                         {plan.features.map((feature, index) => (
                           <li key={index} className="flex items-start">
                             <svg
-                              className="h-5 w-5 text-primary flex-shrink-0 mr-2"
+                              className="h-5 w-5 text-primary shrink-0 mr-2"
                               fill="none"
                               viewBox="0 0 24 24"
                               stroke="currentColor"
diff --git a/src/components/shared/mdx-component.tsx b/src/components/shared/mdx-component.tsx
index b38fb55..29ed070 100644
--- a/src/components/shared/mdx-component.tsx
+++ b/src/components/shared/mdx-component.tsx
@@ -185,7 +185,7 @@ const components = {
   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm',
+        'relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm',
         className
       )}
       {...props}
@@ -237,7 +237,7 @@ const components = {
   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn(
-        'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10',
+        'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow-sm transition-colors hover:bg-muted/50 sm:p-10',
         className
       )}
       {...props}