chore: add localization to product detail add to cart button

core/vibes/soul/sections/product-detail/index.tsx

@@ -1,6 +1,7 @@
 import { Price, PriceLabel } from '@/vibes/soul/primitives/price-label';
 import { Rating } from '@/vibes/soul/primitives/rating';
 import { ProductGallery } from '@/vibes/soul/sections/product-detail/product-gallery';
+import { useTranslations } from 'next-intl';
 
 import { ProductDetailForm, ProductDetailFormAction } from './product-detail-form';
 import { Field } from './schema';
@@ -24,6 +25,8 @@ type Props<F extends Field> = {
 };
 
 export function ProductDetail<F extends Field>({ product, action, fields }: Props<F>) {
+  const t = useTranslations('Components.AddToCartButton');
+
   return (
     <section className="@container">
       <div className="mx-auto grid w-full max-w-screen-xl grid-cols-1 items-stretch gap-x-8 gap-y-10 px-4 py-10 @xl:px-6 @xl:py-14 @2xl:grid-cols-2 @4xl:px-8 @4xl:py-20 @5xl:gap-x-16">
@@ -53,7 +56,12 @@ export function ProductDetail<F extends Field>({ product, action, fields }: Prop
             <p className="mb-6 text-contrast-500">{product.description}</p>
           )}
 
-          <ProductDetailForm action={action} fields={fields} productId={product.id} />
+          <ProductDetailForm
+            action={action}
+            fields={fields}
+            productId={product.id}
+            ctaLabel={t('addToCart')}
+          />
         </div>
       </div>
     </section>