feat: New design and optimization

resources/js/components/pages/Home/Swiper.tsx

@@ -1,4 +1,6 @@
 import { Button } from '@/components/ui/button';
+import index from '@/routes/index/index';
+import { useTranslations } from '@/utils/i18n';
 import { Link } from '@inertiajs/react';
 import { MoveRightIcon } from 'lucide-react';
 import 'swiper/css';
@@ -10,6 +12,7 @@ export default function SwiperCarousel({
 }: {
     item: [{ image_url: string; alt: string }];
 }) {
+    const { t } = useTranslations();
     return (
         <>
             <div
@@ -39,20 +42,22 @@ export default function SwiperCarousel({
                 </Swiper>
                 <div className="absolute bottom-7 left-12 z-50 flex w-md flex-col gap-6 rounded-lg bg-[#FFF5F1]/80 px-12 py-6 font-serif">
                     <div className="flex flex-col gap-1">
-                        <h1 className="text-4xl font-medium">
-                            Feel More Like Home
+                        <h1 className="text-3xl font-medium max-sm:text-lg">
+                            {t('pages.home.banner.title')}
+                            {/* A Beautiful Home
+                            Deserves A Beautiful Carpet */}
                         </h1>
-                        <p className="text-xl leading-tight">
-                            Carpets that are made with care from ground up
+                        <p className="text-xl leading-tight max-sm:text-sm">
+                            {t('pages.home.banner.subTitle')}
                         </p>
                     </div>
-                    <Link href="">
+                    <Link href={index.product().url}>
                         <Button
                             variant={'secondary'}
                             size={'lg'}
                             className="cursor-pointer border border-primary bg-transparent text-lg ring-primary"
                         >
-                            Discover More <MoveRightIcon />
+                            {t('pages.home.banner.button')} <MoveRightIcon />
                         </Button>
                     </Link>
                 </div>