Refactor card styles and layout across multiple insurance routes for consistency; update sitemap with new routes and priorities; enhance typography with Outfit font; improve accessibility and responsiveness in tables and cards.

app.config.ts

@@ -3,12 +3,21 @@ import tsConfigPaths from "vite-tsconfig-paths";
 import { sitemap } from "./src/utils/sitemap";
 import { generateSitemap } from "tanstack-router-sitemap";
 
-
 export default defineConfig({
   server: {
+    
     preset: "netlify",
     prerender: {
-      routes: ["/", "/seguros", "/formulario"],
+      routes: [
+        "/",
+        "/seguros",
+        "/formulario",
+        "/seguros/vehiculos",
+        "/seguros/hogar",
+        "/seguros/vida",
+        "/seguros/salud",
+        "/seguros/decesos",
+      ],
       crawlLinks: true,
     },
   },
@@ -20,7 +29,7 @@ export default defineConfig({
       tsConfigPaths({
         projects: ["./tsconfig.json"],
       }),
-      generateSitemap(sitemap)
+      generateSitemap(sitemap),
     ],
   },
 });

package.json

@@ -65,15 +65,15 @@
     "@tanstack/react-start": "^1.114.22",
     "@tanstack/zod-adapter": "^1.114.34",
     "axios": "^1.8.3",
-    "framer-motion": "^11.18.2",
+    "framer-motion": "^12.23.16",
     "react": "^19.0.0",
     "react-cookie": "^8.0.1",
     "react-dom": "^19.0.0",
     "redaxios": "^0.5.1",
     "sonner": "^2.0.1",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.3.1",
-    "vinxi": "0.5.3",
+    "vinxi": "0.5.8",
-    "zod": "^3.24.2"
+    "zod": "^4.1.11"
   },
   "devDependencies": {
     "@types/node": "^22.5.4",

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

public/sitemap.xml

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://victoriaseguros.com/seguros/decesos</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/seguros/salud</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/seguros/mascotas</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/seguros/vehiculos</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/seguros/vida</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/seguros/hogar</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.com/formulario</loc><changefreq>daily</changefreq><priority>1.0</priority></url></urlset>
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://victoriaseguros.es/</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/inicio</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/vida</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/hogar</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/salud</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/decesos</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/vehiculos/coche</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/mascotas</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/mascotas/perros</loc><changefreq>daily</changefreq><priority>1.0</priority></url><url><loc>https://victoriaseguros.es/seguros/mascotas/caballo</loc><changefreq>daily</changefreq><priority>1.0</priority></url></urlset>

src/components/Cookies.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
 
 export default function CookieConsent() {
-  const [cookies, setCookie, removeCookie] = useCookies(["cookieConsent"]);
+  const [cookies, setCookie] = useCookies(["cookieConsent"]);
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -20,11 +20,6 @@ export default function CookieConsent() {
     setVisible(false);
   };
 
-  // const rejectCookies = () => {
-  //   removeCookie("cookieConsent", { path: "/" });
-  //   setVisible(false);
-  // };
-
   if (!visible) return null;
 
   return (
@@ -36,21 +31,19 @@ export default function CookieConsent() {
           política de cookies
         </a>
         <a className="px-2">/</a>
-          
+        <a
-          <a href="/formulario/politicas-formulario" className="text-blue-600 underline">
+          href="/formulario/politicas-formulario"
+          className="text-blue-600 underline"
+        >
           política de privacidad
         </a>
         .
       </p>
       <div className="mt-4">
         <div className="flex gap-4 mt-4">
-          <Button onPress={acceptCookies} color="primary">Aceptar</Button>
+          <Button onPress={acceptCookies} color="primary">
-          {/* <button
+            Aceptar
-            onClick={rejectCookies}
+          </Button>
-            className="px-4 py-2 bg-gray-400 text-white text-sm font-medium rounded hover:bg-gray-500 transition"
-          >
-            Rechazar
-          </button> */}
         </div>
       </div>
     </div>

src/components/Footer.tsx

@@ -9,12 +9,11 @@ export const Footer = () => {
         <div className="flex items-center flex-wrap sm:flex-row flex-col gap-2">
           <div className="flex title-font font-medium items-center md:justify-start justify-center">
             <Image
-              src="/victoria segurosLogo.svg"
+              src="/helvetialogo.svg"
               alt="Logo Seguros"
               width={100}
               height={30}
               className="px-2 p-1"
-              fallbackSrc="/victoria segurosLogo.svg"
             />
             <span className="ml-3 text-sm">Victoria Seguros</span>
           </div>

src/components/NavBarComponents.tsx

@@ -8,53 +8,53 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@heroui/navbar";
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@heroui/dropdown";
 
 import React from "react";
-// import { Link } from "@heroui/link";
+import { Link, useNavigate } from "@tanstack/react-router";
-import {
-  Link,
-  useMatch,
-  useMatchRoute,
-  useNavigate,
-} from "@tanstack/react-router";
 import { Button } from "@heroui/button";
 import { cn } from "@heroui/theme";
-import { Divider } from "@heroui/divider";
-import ButtonCall from "./ButtonCall";
 import { Chip } from "@heroui/chip";
 
-// import {Icon} from "@iconify/react";
+const menuItems: {
-
+  icon: string;
-const menuItems = [
+  text: string;
+  link: string;
+}[] = [
   {
-    icon: "",
     text: "Decesos",
     link: "/seguros/decesos/",
+    icon: "iconify solar--leaf-line-duotone size-8",
   },
   {
-    icon: "",
     text: "Salud",
     link: "/seguros/salud/",
+    icon: "iconify solar--heart-pulse-2-line-duotone size-8",
   },
   {
-    icon: "",
     text: "Hogar",
     link: "/seguros/hogar/",
+    icon: "iconify solar--key-line-duotone size-8",
   },
   {
-    icon: "",
     text: "Mascotas",
     link: "/seguros/mascotas/",
+    icon: "iconify solar--paw-line-duotone size-8",
   },
   {
-    icon: "",
     text: "Vehículos",
     link: "/seguros/vehiculos/",
+    icon: "iconify solar--wheel-angle-line-duotone size-8",
   },
   {
-    icon: "",
     text: "Vida",
     link: "/seguros/vida/",
+    icon: "iconify solar--hand-heart-line-duotone size-8",
   },
 ];
 
@@ -63,7 +63,6 @@ const activeLinkProps = {
 };
 
 const navLinks = [
-  { to: "/", label: "Inicio", className: "text-lg" },
   { to: "/seguros/decesos", label: "Decesos" },
   { to: "/seguros/hogar", label: "Hogar" },
   { to: "/seguros/salud", label: "Salud" },
@@ -118,19 +117,67 @@ const BasicNavbar = React.forwardRef<HTMLElement, NavbarProps>(
               Victoria<span className="text-gray-500">Seguros</span>
             </span>
           </Button>
+          <Button
+            href="tel:+34633620767"
+            isIconOnly
+            size="sm"
+            variant="ghost"
+            radius="full"
+            color="success"
+            className="md:hidden ml-5 p-0"
+            startContent={
+              <span className="iconify size-6 text-default-700 solar--phone-calling-rounded-broken" />
+            }
+          />
         </NavbarBrand>
 
         {/* Center Content */}
-        <NavbarContent>
+        <NavbarContent className="hidden md:flex">
-          {navLinks.map(({ to, label, className }) => (
+          <Button
-            <Link key={to} to={to} viewTransition activeProps={activeLinkProps}>
+            variant="light"
-              {() => (
+            className="text-lg"
-                <NavbarItem className={` text-lg ${className}`}>
+            onPress={() => {
-                  {label}
+              navigate({
-                </NavbarItem>
+                to: "/",
-              )}
+                viewTransition: true,
-            </Link>
+              });
-          ))}
+            }}
+          >
+            Inicio
+          </Button>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button
+                variant="light"
+                className="text-lg"
+                endContent={
+                  <span className="iconify size-4 solar--alt-arrow-down-broken text-default-700" />
+                }
+              >
+                Nuestros Seguros
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="Static Actions">
+              {menuItems.map((mi) => (
+                <DropdownItem
+                  key={mi.text}
+                  className="py-2"
+                  classNames={{
+                  title: "ml-2"
+                  }}
+                  onPress={() => {
+                    navigate({
+                      to: mi.link,
+                      viewTransition: true,
+                    });
+                  }}
+                  startContent={<span className={mi.icon} />}
+                >
+                  <p className="text-lg">{mi.text}</p>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
 
           <NavbarItem>
             <Chip
@@ -140,6 +187,7 @@ const BasicNavbar = React.forwardRef<HTMLElement, NavbarProps>(
               startContent={
                 <span className="iconify size-5 text-default-500 solar--phone-calling-rounded-bold-duotone" />
               }
+              size="lg"
               classNames={{
                 content: "mx-1 items-center font-semibold",
               }}
@@ -215,6 +263,7 @@ const BasicNavbar = React.forwardRef<HTMLElement, NavbarProps>(
                 >
                   {mi.text}
                 </Link>
+
                 <span className="iconify size-6 solar--alt-arrow-right-line-duotone text-secondary/80" />
               </div>
             </NavbarMenuItem>

src/components/NotFound.tsx

@@ -4,7 +4,7 @@ import { Link } from "@tanstack/react-router";
 export function NotFound({ children }: { children?: any }) {
   return (
     <div className="flex justify-center w-full">
-    <Card className="w-full max-w-5xl min-h-[200px]">
+    <Card className="w-full max-w-5xl px-2 md:px-3  min-h-[200px]">
       <CardBody className="p-2 flex justify-center flex-col items-center gap-5">
         <div className="text-gray-600 dark:text-gray-400 my-2 flex gap-2 items-center font-semibold">
           <span className="iconify size-6 solar--magnifer-zoom-out-bold-duotone " />

src/routes/__root.tsx

@@ -15,12 +15,9 @@ import BasicNavbar from "~/components/NavBarComponents";
 import { NotFound } from "~/components/NotFound";
 import appCss from "~/styles/app.css?url";
 import { seo } from "~/utils/seo";
-import { CookiesProvider, useCookies } from "react-cookie";
+import { CookiesProvider } from "react-cookie";
 import Clarity from "@microsoft/clarity";
-// import { createServerFn } from "@tanstack/react-start";
-// import { getCookie } from "@tanstack/react-start/server";
 import CookieConsent from "~/components/Cookies";
-// const cookieValue = createServerFn().s(() => getCookie("cookie-vs"));
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
@@ -29,6 +26,7 @@ export const Route = createRootRouteWithContext<{
     meta: [
       {
         charSet: "utf-8",
+        lang: "es",
       },
       {
         name: "viewport",
@@ -47,12 +45,6 @@ export const Route = createRootRouteWithContext<{
       { rel: "icon", href: "/favicon.ico" },
     ],
   }),
-  // beforeLoad: async () => {
-  //   const cookieV = await cookieValue();
-  //   return {
-  //     haveCookies: cookieV,
-  //   };
-  // },
   errorComponent: (props) => {
     return (
       <RootDocument>
@@ -76,21 +68,22 @@ function RootComponent() {
 }
 
 function RootDocument({ children }: { children: React.ReactNode }) {
-  const projectId = "qxxlp3g93r";
-  Clarity.init(projectId);
-  // const { haveCookies } = Route.useRouteContext();
-  // console.log(haveCookies);
   // if (haveCookies === "false") {
   //   Clarity.consent(false);
   // }
 
+  // if(process.env.NODE_ENV === "production") {
+  //   const projectId = "qxxlp3g93r";
+  //   Clarity.init(projectId);
+  // }
+
   return (
     <html>
       <head>
         <HeadContent />
       </head>
       <body>
-        <div className="flex flex-col min-h-screen">
+        <div className="flex flex-col min-h-screen font-outfit">
           <div className="flex-1">
             <BasicNavbar />
             {children}

src/routes/formulario/index.tsx

@@ -85,7 +85,7 @@ function RouteComponent() {
         to: "/",
         viewTransition: true,
         replace: true,
-      })
+      });
     },
     onError: () => {
       toast.error("Error al enviar petición", { id: "email-toast" });
@@ -95,7 +95,6 @@ function RouteComponent() {
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.currentTarget);
-
     const name = formData.get("nombre") as string;
     const time = formData.get("horario") as string;
     const description = formData.get("descripcion") as string;

src/routes/index.tsx

@@ -1,13 +1,16 @@
-import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
+import {
+  createFileRoute,
+  Link,
+  Outlet,
+  redirect,
+} from "@tanstack/react-router";
+import { seo } from "~/utils/seo";
+import appCss from "~/styles/app.css?url";
 import { Card, CardBody, CardFooter, CardHeader } from "@heroui/card";
 import { Button } from "@heroui/button";
 import { Image } from "@heroui/image";
 import { indexCards } from "~/content/hogar";
-import { seo } from "~/utils/seo";
+import RotatingText from "~/TextAnimations/RotatingText/RotatingText";
-import appCss from "~/styles/app.css?url";
-import RotatingText from "../TextAnimations/RotatingText/RotatingText";
-import CountUp from "~/TextAnimations/CountUp/CountUp";
-import { motion } from "framer-motion";
 import { Chip } from "@heroui/chip";
 
 export const Route = createFileRoute("/")({
@@ -33,7 +36,7 @@ export const Route = createFileRoute("/")({
       { rel: "icon", href: "/favicon.ico" },
     ],
   }),
-  component: MainComponent,
+  component: RouteComponent,
 });
 
 const insuranceCard = [
@@ -70,23 +73,41 @@ const insuranceCard = [
   },
 ];
 
-export function MainComponent() {
+const opiniones = [
-  const waUrl = `https://wa.me/${+34633620767}`;
+  {
+    nombre: "María López",
+    comentario:
+      "      Servicio excepcional, genial trato humano y gran profesionalidad.Muy agradecido de contar con el equipo.",
+    rating: 5,
+  },
+  {
+    nombre: "Carlos Hernández",
+    comentario: `En Helvetia seguros las chicas son muy atentas, siempre están disponibles para cualquier cosa que necesito.
+Las recomiendo totalmente`,
+    rating: 4,
+  },
+  {
+    nombre: "Laura Fernández",
+    comentario:
+      "La atención ha sido directa y rápida sobre la duda o caso a definir.Gracias.",
+    rating: 5,
+  },
+];
+
+function RouteComponent() {
   const navigate = Route.useNavigate();
+  const waUrl = `https://wa.me/${+34633620767}`;
   return (
     <main className="px-2 md:px-8 lg:px-14 min-h-dvh ">
       <div className="main-lay rounded py-10">
         <div className="min-h-80 rounded-xl w-full flex justify-center items-center ">
           <Card
-            className="bg-inherit rounded-lg w-full max-w-7xl"
+            className="bg-inherit rounded-lg w-full max-w-7xl "
             shadow="none"
           >
             <CardBody className="overflow-hidden">
               <h1 className="text-4xl font-bold text-center py-6 flex flex-wrap items-center gap-2 justify-center">
                 Victoria{" "}
-                {/* <span className="text-default-100 bg-primary px-2 py-2 rounded-lg">
-                  seguros
-                </span> */}
                 <RotatingText
                   texts={["Seguros", "Vida", "Salud"]}
                   mainClassName="sm:px-2 min-w-40 overflow-hidden justify-center rounded-lg py-2 text-default-100 bg-primary-500 font-semibold text-white"
@@ -115,6 +136,8 @@ export function MainComponent() {
                   }
                   as={Link}
                   to={waUrl}
+                  color="success"
+                  variant="flat"
                 >
                   Whatsapp
                 </Button>
@@ -133,7 +156,8 @@ export function MainComponent() {
                   Calcular precio
                 </Button>
               </div>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mt-5">
+
+              <div className="grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mt-5 grid">
                 {insuranceCard.map((v) => (
                   <Card className="px-0" key={v.name}>
                     <CardHeader className="justify-center">
@@ -165,181 +189,245 @@ export function MainComponent() {
         </div>
       </div>
 
-      <div className="w-full py-8">
+      <div className="w-full py-8 justify-center flex flex-col">
-        <div className="flex justify-center flex-col items-center gap-4">
+        <div className="flex justify-center flex-col 2xl:flex-row place-content-center w-full gap-4">
-          <Card className="max-w-5xl overflow-y-hidden" shadow="none">
+          <div className="flex flex-col gap-5 w-full">
+            <Card
+              className="max-w-5xl px-2 md:px-3  overflow-y-hidden  h-fit w-full"
+              shadow="none"
+            >
+              <CardBody>
+                <div className="grid md:grid-cols-2 gap-4 items-start">
+                  
+
+                  <div>
+                    <div className="flex flex-col gap-3 mb-2">
+                      <h1 className="font-semibold text-2xl">
+                        💙 Cercanas, claras y decididas.{" "}
+                      </h1>
+                      <p>
+                        En Victoria Seguros creemos que la confianza se
+                        demuestra con hechos. Por eso, cuando nos necesitas,
+                        respondemos sin rodeos.{" "}
+                        <span className="font-semibold">
+                          Nada de esperas eternas ni mensajes automáticos: te
+                          escuchamos, analizamos tu caso y encontramos la
+                          solución más rápida y efectiva.
+                        </span>{" "}
+                        Somos un equipo comprometido, que combina trato humano
+                        con decisión y resultados.
+                      </p>
+                      <p>
+                        Sabemos que detrás de cada seguro hay una historia, una
+                        familia, una tranquilidad que proteger… y actuamos con
+                        la misma energía con la que cuidaríamos la nuestra.{" "}
+                      </p>
+                      <p className="text-default-700">
+                        Aquí no hay burocracia ni excusas, solo personas que
+                        resuelven, acompañan y se implican. Y si prefieres
+                        hablar cara a cara, te esperamos con un café en nuestras
+                        oficinas —porque para nosotras, las mejores soluciones
+                        empiezan con una buena conversación.
+                      </p>
+                    </div>
+     <div className="flex w-full justify-end mt-5">
+                              <Button
+                                className="max-w-md font-semibold"
+                                color="primary"
+                                endContent={
+                                  <span className="iconify size-5 solar--alt-arrow-right-linear" />
+                                }
+                                onPress={() =>
+                                  navigate({
+                                    to: "/formulario",
+                                    viewTransition: true,
+                                  })
+                                }
+                                variant="flat"
+                              >
+                                Quiero una llamada
+                              </Button>
+                            </div>
+                  </div>
+                  <div className="flex justify-center min-h-[380px] flex-col gap-2 relative ">
+                    <Image
+                      className="border-3"
+                      width={350}
+                      height={350}
+                      src="/conocenos.webp"
+                      alt="victoria seguros-mayores"
+                      fallbackSrc="/conocenos.webp"
+                    />
+                    <Chip
+                      className="absolute bottom-24 left-4 z-20"
+                      color="primary"
+                      size="sm"
+                    >
+                      Número de mediadora:{" "}
+                      <a
+                        href="https://dgsfp.mineco.gob.es/"
+                        className="cursor-pointer underline font-semibold"
+                      >
+                        C015723313192R
+                      </a>
+                      <span className="iconify size-4 solar--link-minimalistic-2-bold-duotone" />
+                    </Chip>
+                    <div className="grid grid-cols-2 gap-2">
+
+                       <Card shadow="none">
+                          <CardBody>
+                            <div className="flex gap-2">
+                              <div className="block">
+                                <p className="font-semibold text-xl">+8000</p>{" "}
+                                clientes nos han elegido
+                              </div>
+                            </div>
+                          </CardBody>
+                        </Card>
+                        <Card shadow="none">
+                          <CardBody>
+                            <div className="flex gap-2">
+                              <div>
+                                <p className="font-semibold text-xl">+400</p>{" "}
+                                seguros cerrados al mes
+                              </div>
+                            </div>
+                          </CardBody>
+                        </Card>
+                    </div>
+
+                  </div>
+                </div>
+              </CardBody>
+            </Card>
+            <Card className="max-w-5xl px-2 md:px-3  w-full" shadow="none">
+              <CardHeader>
+                <h1 className="text-2xl font-semibold mb-3 flex gap-2 items-center">
+                  Opiniones de nuestros clientes
+                </h1>
+              </CardHeader>
+
+              <CardBody className="space-y-4">
+                {opiniones.map((opinion, i) => (
+                  <div key={i} className=" pb-3">
+                    <div className="flex items-center justify-between">
+                      <p className="font-semibold text-lg">{opinion.nombre}</p>
+                      <div className="flex gap-1 text-yellow-400">
+                        {Array.from({ length: 5 }).map((_, j) => (
+                          <span
+                            key={j}
+                            className={`iconify size-4 solar--star-bold ${
+                              j < opinion.rating ? "opacity-100" : "opacity-30"
+                            }`}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                    <p className="text-default-600 mt-1">
+                      {opinion.comentario}
+                    </p>
+                  </div>
+                ))}
+              </CardBody>
+            </Card>
+          </div>
+
+          <Card className="max-w-5xl px-2 md:px-3  w-full" shadow="none">
             <CardBody>
-              <div className="grid md:grid-cols-2 gap-4">
+              <div className="grid gap-2">
-                <div className="flex items-center justify-center min-h-[380px]">
+                <div>
+                  <div className="flex gap-2 w-full flex-wrap">
+                    <div className="grid grid-cols-2 xl:grid-cols-4 overflow-hidden gap-2 w-full my-5">
+                      {indexCards?.map((pc) => (
+                        <Card className=" w-fit" shadow="none" key={pc?.title}>
+                          <CardBody className="justify-center items-center flex gap-4 overflow-hidden">
+                            <span
+                              className={`${pc?.icon} size-5 md:size-6 text-primary-400`}
+                            />
+                            <Chip
+                            variant="flat"
+                              color="primary"
+                              className="text-sm"
+                            >
+                              <div>{pc?.title}</div>
+                            </Chip>
+                          </CardBody>
+                        </Card>
+                      ))}
+                    </div>
+                    <h1 className="text-2xl font-semibold mb-4">
+                      Pago mensual hasta 80 años
+                    </h1>
+                    <div className="flex flex-col gap-2 flex-wrap w-full">
+                      <p>
+                        ​Entendemos que cada etapa de la vida presenta
+                        necesidades únicas. Por ello, en Victoria Seguros,
+                        ofrecemos un plan de{" "}
+                        <span className="text-default-700">
+                          pago mensual especialmente diseñado para personas
+                          mayores de 60 años, con posibilidad de contratación
+                          !hasta los 80!
+                        </span>
+                      </p>
+                      <p>
+                        Este plan te permite disfrutar de la cobertura esencial
+                        que necesitas sin sorpresas ni cargas económicas,
+                        manteniendo tus finanzas equilibradas. Además, contarás
+                        con el respaldo y la confianza que caracterizan a
+                        nuestra aseguradora.
+                      </p>
+                      <p>
+                        Tu tranquilidad y seguridad son nuestra prioridad, sin
+                        importar la edad.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+             
+              </div>
+              <div className="grid md:grid-cols-2 gap-4 items-center mt-6">
+                <div className="grid gap-2">
+                  <h1 className="text-xl font-semibold">
+                    Ahora con tu seguro de decesos también puedes incluir la
+                    Responsabilidad Civil para perros
+                  </h1>
+                  <p className="text-">
+                    Con la Asistencia a Mascotas también podrás contratar la
+                    cobertura de Responsabilidad Civil para perros peligrosos y
+                    no peligrosos, obligatorio con la nueva Ley de Bienestar
+                    Animal.
+                  </p>
+                </div>
+                <div className="grid place-content-center">
                   <Image
+                    isZoomed
                     width={400}
-                    height={380}
+                    src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                    src="/conocenos.webp"
+                    alt="prueba"
-                    alt="victoria seguros-mayores"
-                    fallbackSrc="/conocenos.webp"
                   />
                 </div>
-
+              </div>
-                <div>
+                 <div className="flex flex-col gap-3">
                   <h1 className="text-lg font-semibold mb-3 flex gap-2 items-center">
                     <p className="text-2xl font-semibold">
                       ¿Por qué nos contratan?
                     </p>
                   </h1>
-                  <div className="flex flex-col gap-2">
+                  <p>
-                    <p>
+                    En nuestra aseguradora, apostamos por un trato
-                      En nuestra aseguradora, apostamos por un trato
+                    verdaderamente personalizado. Contamos con agentes asignados
-                      verdaderamente personalizado. Contamos con agentes
+                    y cercanos que te acompañan con experiencia y compromiso.
-                      asignados y cercanos que te acompañan con experiencia y
+                    Además, si lo necesitas, también estamos disponibles en
-                      compromiso. Además, si lo necesitas, también estamos
+                    nuestras oficinas físicas en Alicante. Una llamada es
-                      disponibles en nuestras oficinas físicas en Alicante. Una
+                    suficiente para conocernos.
-                      llamada es suficiente para conocernos.
+                  </p>
-                    </p>
+                  <p className="font-semibold">
-                    <p className="font-semibold">
+                    Ofrecemos una atención a medida, sin intermediarios. Creemos
-                      Ofrecemos una atención a medida, sin intermediarios.
+                    que un trato personal es la única manera de comprender a la
-                      Creemos que un trato personal es la única manera de
+                    perfección las necesidades de cada cliente.
-                      comprender a la perfección las necesidades de cada
+                  </p>
-                      cliente.
-                    </p>
-                    <p>Número de mediadora: <a href="https://dgsfp.mineco.gob.es/" className="cursor-pointer">C015723313192R</a></p>
-                    <Chip className="flex items-center gap-2 text-md"  variant="light">
-                      Más de{" "}
-                      <span className="text-secondary-500 font-black text-lg">
-                        <CountUp
-                          from={0}
-                          to={8000}
-                          separator=","
-                          direction="up"
-                          duration={1}
-                          className="count-up-text"
-                        />{" "}
-                      </span>
-                      clientes confian en nosotras
-                    </Chip>
-                    <Chip className="flex items-center gap-2 text-md" variant="light">
-                      Más de{" "}
-                      <span className="text-secondary-500 font-black text-lg">
-                        <CountUp
-                          from={0}
-                          to={400}
-                          separator=","
-                          direction="up"
-                          duration={1}
-                          className="count-up-text"
-                        />{" "}
-                      </span>
-                      seguros cerrados al mes
-                    </Chip>
-                  </div>
                 </div>
-              </div>
             </CardBody>
-            <CardFooter>
-              <div className="flex w-full justify-end">
-                <Button
-                  className="max-w-md  bg-primary-300 font-semibold"
-                  endContent={
-                    <span className="iconify size-5 solar--alt-arrow-right-linear" />
-                  }
-                  onPress={() =>
-                    navigate({
-                      to: "/formulario",
-                      viewTransition: true,
-                    })
-                  }
-                >
-                  Quiero una llamada
-                </Button>
-              </div>
-            </CardFooter>
-          </Card>
-
-          <Card className="max-w-5xl" shadow="none">
-            <CardHeader></CardHeader>
-            <CardBody>
-              <div className="grid md:grid-cols-2 gap-4">
-                <div className="flex items-center justify-center overflow-hidden">
-                  <div className="w-full min-h-[280px] relative">
-                    <motion.div
-                      initial={{ opacity: 0, y: 50, position: "absolute" }}
-                      whileInView={{ opacity: 1, y: 0, position: "static" }}
-                      transition={{ duration: 0.8, ease: "easeOut" }}
-                      viewport={{ once: true, amount: 0.2 }}
-                      className="w-full"
-                    >
-                      <Image
-                        width={400}
-                        height={280}
-                        className="overflow-y-hidden"
-                        src="https://images.unsplash.com/photo-1554331292-735256644d5f?q=80&w=2076&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                        alt="victoria seguros-mayores"
-                      />
-                    </motion.div>
-                  </div>
-                </div>
-
-                <div>
-                  <h1 className="text-2xl font-semibold mb-4">
-                    Pago mensual hasta 80 años
-                  </h1>
-                  <div className="flex flex-col gap-2">
-                    <p>
-                      ​Entendemos que cada etapa de la vida presenta necesidades
-                      únicas. Por ello, en Victoria Seguros, ofrecemos un plan
-                      de pago mensual especialmente diseñado para personas
-                      mayores de 60 años, con posibilidad de contratación
-                      <span className="font-bold">¡hasta los 80!</span>
-                    </p>
-                    <p>
-                      Este plan te permite disfrutar de la cobertura esencial
-                      que necesitas sin sorpresas ni cargas económicas,
-                      manteniendo tus finanzas equilibradas. Además, contarás
-                      con el respaldo y la confianza que caracterizan a nuestra
-                      aseguradora.
-                    </p>
-                    <p>
-                      Tu tranquilidad y seguridad son nuestra prioridad, sin
-                      importar la edad.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="flex justify-center my-4">
-                <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 max-w-6xl w-full">
-                  {indexCards?.map((pc) => (
-                    <Card className="border-none" shadow="none" key={pc.title}>
-                      <CardBody className="justify-center items-center flex flex-row md:flex-col gap-4">
-                        <span
-                          className={`${pc.icon} size-5 md:size-12 text-secondary/50 justify-start`}
-                        />
-                        <h3 className="md:text-lg font-semibold text-sm">
-                          {pc.title}
-                        </h3>
-                      </CardBody>
-                    </Card>
-                  ))}
-                </div>
-              </div>
-            </CardBody>
-            <CardFooter className="flex flex-col gap-4">
-              <div className="flex w-full justify-end">
-                <Button
-                  className="max-w-md bg-primary-300 font-semibold"
-                  endContent={
-                    <span className="iconify size-5 solar--alt-arrow-right-linear" />
-                  }
-                  onPress={() =>
-                    navigate({
-                      to: "/formulario",
-                      viewTransition: true,
-                    })
-                  }
-                >
-                  Quiero está oferta
-                </Button>
-              </div>
-              <div className="max-w-[100%]"></div>
-            </CardFooter>
           </Card>
         </div>
       </div>

src/routes/seguros/decesos.tsx

@@ -42,7 +42,7 @@ export const Route = createFileRoute("/seguros/decesos")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Decesos</h1>
         </CardHeader>
@@ -170,25 +170,27 @@ function RouteComponent() {
                 />
               </div>
             </CardBody>
+            <CardFooter className="flex-col">
+              <h1 className="text-xl mb-6 font-semibold text-purple-700 text-center">
+                Tu mascota es uno más de la familia
+              </h1>
+              <div className="grid md:grid-cols-4 gap-4">
+                {petsCards?.map((pc) => (
+                  <Card className="border-none" shadow="none">
+                    <CardHeader className="items-center">
+                      <h3 className="text-lg font-semibold">{pc.title}</h3>
+                      <span
+                        className={`${pc.icon} size-20 absolute top-0 right-5 text-purple-500/15`}
+                      />
+                    </CardHeader>
+                    <CardBody>
+                      <p className="text-sm">{pc.description}</p>
+                    </CardBody>
+                  </Card>
+                ))}
+              </div>
+            </CardFooter>
           </Card>
-          <h1 className="text-xl mb-6 font-semibold text-purple-700 text-center">
-            Tu mascota es uno más de la familia
-          </h1>
-          <div className="grid md:grid-cols-4 gap-4">
-            {petsCards?.map((pc) => (
-              <Card className="border-none" shadow="none">
-                <CardHeader className="items-center">
-                  <h3 className="text-lg font-semibold">{pc.title}</h3>
-                  <span
-                    className={`${pc.icon} size-20 absolute top-0 right-5 text-purple-500/15`}
-                  />
-                </CardHeader>
-                <CardBody>
-                  <p className="text-sm">{pc.description}</p>
-                </CardBody>
-              </Card>
-            ))}
-          </div>
         </CardFooter>
       </Card>
     </div>

src/routes/seguros/hogar.tsx

@@ -14,7 +14,10 @@ import {
 } from "@heroui/table";
 import { homeCards, indexCards } from "~/content/hogar";
 import appCss from "~/styles/app.css?url";
-import { dataChipHome, accordionfrequentlyaskedquestions } from "~/content/hogar";
+import {
+  dataChipHome,
+  accordionfrequentlyaskedquestions,
+} from "~/content/hogar";
 import ButtonCall from "~/components/ButtonCall";
 import { seo } from "~/utils/seo";
 type CellValue = React.ReactNode | string;
@@ -25,7 +28,6 @@ interface RowData {
   values: CellValue[];
 }
 
-
 const iconCheck = (
   <span className="iconify solar--shield-check-bold-duotone size-6 text-green-500" />
 );
@@ -33,34 +35,97 @@ const iconCross = (
   <span className="iconify solar--shield-cross-bold-duotone size-6 text-red-500" />
 );
 
-
 const columns = [
-  { key: "a", label: "" },
+  { key: "demo", label: "" },
   { key: "basico", label: "Básico" },
   { key: "estandar", label: "Estándar" },
   { key: "premium", label: "Premium" },
 ];
 
 const rows: RowData[] = [
-  { key: "incendio", label: "Incendio", values: [iconCheck, iconCheck, iconCheck] },
+  {
-  { key: "servicio-asistencia", label: "Servicio de asistencia", values: [iconCheck, iconCheck, iconCheck] },
+    key: "incendio",
-  { key: "responsabilidad-civil", label: "Responsabilidad civil", values: ["Solo incendio", iconCheck, iconCheck] },
+    label: "Incendio",
-  { key: "alimento-refrigerados", label: "Alimentos refrigerados", values: [iconCross, iconCheck, iconCheck] },
+    values: [iconCheck, iconCheck, iconCheck],
-  { key: "daños-por-agua", label: "Daños por agua", values: [iconCross, iconCheck, iconCheck] },
+  },
-  { key: "roturas", label: "Roturas", values: [iconCross, iconCheck, iconCheck] },
+  {
-  { key: "robo-y-vandalismo", label: "Robo y vandalismo", values: [iconCross, iconCheck, iconCheck] },
+    key: "servicio-asistencia",
-  { key: "coberturas-consecuenciales", label: "Coberturas consecuenciales", values: [iconCross, iconCheck, iconCheck] },
+    label: "Servicio de asistencia",
-  { key: "defensa-jurídica", label: "Defensa jurídica", values: [iconCross, iconCheck, iconCheck] },
+    values: [iconCheck, iconCheck, iconCheck],
-  { key: "robo-integral", label: "Robo Integral", values: [iconCross, iconCross, iconCheck] },
+  },
-  { key: "daños-eléctricos", label: "Daños eléctricos", values: [iconCross, iconCross, iconCheck] },
+  {
-  { key: "bricohogar", label: "Bricohogar", values: [iconCross, iconCross, iconCheck] },
+    key: "responsabilidad-civil",
+    label: "Responsabilidad civil",
+    values: ["Solo incendio", iconCheck, iconCheck],
+  },
+  {
+    key: "alimento-refrigerados",
+    label: "Alimentos refrigerados",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "daños-por-agua",
+    label: "Daños por agua",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "roturas",
+    label: "Roturas",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "robo-y-vandalismo",
+    label: "Robo y vandalismo",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "coberturas-consecuenciales",
+    label: "Coberturas consecuenciales",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "defensa-jurídica",
+    label: "Defensa jurídica",
+    values: [iconCross, iconCheck, iconCheck],
+  },
+  {
+    key: "robo-integral",
+    label: "Robo Integral",
+    values: [iconCross, iconCross, iconCheck],
+  },
+  {
+    key: "daños-eléctricos",
+    label: "Daños eléctricos",
+    values: [iconCross, iconCross, iconCheck],
+  },
+  {
+    key: "bricohogar",
+    label: "Bricohogar",
+    values: [iconCross, iconCross, iconCheck],
+  },
 ];
 
 const optionalRows: RowData[] = [
-  { key: "accidentes", label: "Accidentes", values: [iconCross, "Opcional", "Opcional"] },
+  {
-  { key: "mascotas", label: "Mascotas", values: [iconCross, "Opcional", "Opcional"] },
+    key: "accidentes",
-  { key: "vehículos-y-motos-en-garaje", label: "Vehículos y motos en garaje", values: [iconCross, "Opcional", "Opcional"] },
+    label: "Accidentes",
-  { key: "robo-objetos-valor-especial", label: "Robo de objetos de valor especial", values: [iconCross, iconCross, "Opcional"] },
+    values: [iconCross, "Opcional", "Opcional"],
+  },
+  {
+    key: "mascotas",
+    label: "Mascotas",
+    values: [iconCross, "Opcional", "Opcional"],
+  },
+  {
+    key: "vehículos-y-motos-en-garaje",
+    label: "Vehículos y motos en garaje",
+    values: [iconCross, "Opcional", "Opcional"],
+  },
+  {
+    key: "robo-objetos-valor-especial",
+    label: "Robo de objetos de valor especial",
+    values: [iconCross, iconCross, "Opcional"],
+  },
 ];
 
 function renderRows(rowsData: RowData[]) {
@@ -79,27 +144,29 @@ function MobileTable({ rowsData }: { rowsData: RowData[] }) {
   return (
     <div className="space-y-4">
       {rowsData.map(({ key, label, values }) => (
-      <div
+        <div
-  key={key}
+          key={key}
-  role="table"
+          role="table"
-  aria-label={label}
+          aria-label={label}
-  className="border border-gray-300 rounded-lg p-4 shadow-sm bg-white"
+          className="  rounded-lg p-4  bg-white"
->
+        >
-  <div className="font-semibold mb-4 text-gray-800 text-lg border-b border-gray-200 pb-2">
+          <div className="font-semibold mb-4 text-gray-800 text-lg border-b pb-2">
-    {label}
+            {label}
-  </div>
+          </div>
-  <div className="grid grid-cols-3 gap-4 text-center text-sm">
+          <div className="grid grid-cols-3 gap-4 text-center text-sm">
-    {columns.slice(1).map((col, i) => (
+            {columns.slice(1).map((col, i) => (
-      <div
+              <div
-        key={col.key}
+                key={col.key}
-        className="flex flex-col items-center bg-gray-50 rounded-md p-3 hover:bg-gray-100 transition"
+                className="flex flex-col items-center bg-gray-50 rounded-md p-3 hover:bg-gray-100 transition"
-      >
+              >
-        <span className="font-semibold mb-2 text-gray-700">{col.label}</span>
+                <span className="font-semibold mb-2 text-gray-700">
-        <span className="text-gray-900">{values[i]}</span>
+                  {col.label}
-      </div>
+                </span>
-    ))}
+                <span className="text-gray-900">{values[i]}</span>
-  </div>
+              </div>
-</div>
+            ))}
+          </div>
+        </div>
       ))}
     </div>
   );
@@ -119,7 +186,7 @@ function RouteComponent() {
 
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Hogar</h1>
           <div className="flex flex-wrap gap-2 my-4">
@@ -150,18 +217,16 @@ function RouteComponent() {
           <div className="mx-4">
             <Tabs aria-label="Options" className="flex justify-center">
               <Tab title="Coberturas">
-                {isMobile ? (
+                  <Table removeWrapper className="w-full" aria-label="Tabla de coberturas">
-                  <MobileTable rowsData={rows} />
-                ) : (
-                  <Table aria-label="Tabla de coberturas">
                     <TableHeader>
                       {columns.map((column) => (
-                        <TableColumn key={column.key}>{column.label}</TableColumn>
+                        <TableColumn key={column.key}>
+                          {column.label}
+                        </TableColumn>
                       ))}
                     </TableHeader>
                     <TableBody>{renderRows(rows)}</TableBody>
                   </Table>
-                )}
               </Tab>
 
               <Tab title="Coberturas Opcionales">
@@ -171,7 +236,9 @@ function RouteComponent() {
                   <Table aria-label="Tabla de coberturas opcionales">
                     <TableHeader>
                       {columns.map((column) => (
-                        <TableColumn key={column.key}>{column.label}</TableColumn>
+                        <TableColumn key={column.key}>
+                          {column.label}
+                        </TableColumn>
                       ))}
                     </TableHeader>
                     <TableBody>{renderRows(optionalRows)}</TableBody>

src/routes/seguros/mascotas/caballos.tsx

@@ -37,7 +37,7 @@ export const Route = createFileRoute("/seguros/mascotas/caballos")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Caballos</h1>
           <div className="flex gap-2 flex-wrap my-4">

src/routes/seguros/mascotas/index.tsx

@@ -32,25 +32,37 @@ export const Route = createFileRoute("/seguros/mascotas/")({
 });
 
 function RouteComponent() {
+  const navigate = Route.useNavigate();
   return (
     <div className="flex justify-center items-center">
-      <div className="grid max-w-5xl md:grid-cols-2 gap-4 my-5 mx-4">
+      <div className="grid max-w-5xl px-2 md:px-3  md:grid-cols-2 gap-4 my-5 mx-4">
-        <Card className="border-none" radius="lg">
+        <Card
+          className="border-none"
+          radius="lg"
+          isPressable
+          onPress={() =>
+            navigate({ to: "/seguros/mascotas/perros", viewTransition: true })
+          }
+        >
           <Image
             alt="Woman listing to music"
             className="object-cover"
             height={300}
-            src="https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            src="https://images.unsplash.com/photo-1453487977089-77350a275ec5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1173"
             width={300}
           />
           <CardFooter className="justify-between bg-white border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
             <p className="font-semibold">Seguros de Perros</p>
-            <Button as={Link} color="secondary" to="perros" viewTransition>
-              Ver más
-            </Button>
           </CardFooter>
         </Card>
-        <Card className="border-none" radius="lg">
+        <Card
+          className="border-none"
+          radius="lg"
+          isPressable
+          onPress={() =>
+            navigate({ to: "/seguros/mascotas/caballos", viewTransition: true })
+          }
+        >
           <Image
             alt="Woman listing to music"
             className="object-cover"
@@ -60,12 +72,8 @@ function RouteComponent() {
           />
           <CardFooter className="justify-between bg-white border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
             <p className="font-semibold">Seguro de Caballos</p>
-            <Button as={Link} color="secondary" to="caballos" viewTransition>
-              Ver más
-            </Button>
           </CardFooter>
         </Card>
-        
       </div>
     </div>
   );

src/routes/seguros/mascotas/perros.tsx

@@ -39,7 +39,7 @@ export const Route = createFileRoute("/seguros/mascotas/perros")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Perros</h1>
           <div className="flex gap-2 flex-wrap my-4">

src/routes/seguros/salud.tsx

@@ -38,7 +38,7 @@ export const Route = createFileRoute("/seguros/salud")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl  m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3   m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Salud</h1>
           <div className="flex gap-2 flex-wrap my-4">
@@ -55,16 +55,15 @@ function RouteComponent() {
         </CardHeader>
         <CardBody className="flex flex-col">
           <div className="mb-5">
-            <p className="font-semibold mx-4">
-              Hay cosas que cuando llegan, te cambian la vida, como el seguro de
-              Salud Integral de Helvetia. Un seguro de Salud COMPLETO y SIN COPAGOS
-              hasta el 11º uso.
-            </p>
             <div className="flex gap-2 justify-center mb-5">
               <ButtonCall secure="salud" />
             </div>
           </div>
-
+          <p className=" mx-4">
+            Hay cosas que cuando llegan, te cambian la vida, como el seguro de
+            Salud Integral de Helvetia. Un seguro de Salud COMPLETO y SIN
+            COPAGOS hasta el 11º uso.
+          </p>
           <div className="grid md:grid-cols-4 gap-4 my-4">
             {dataCardDemo?.map((pc) => (
               <Card className="border-none" shadow="none">
@@ -98,17 +97,17 @@ function RouteComponent() {
                     }}
                   >
                     <ul className="">
-                      <li>- Medicina general</li>
+                      <li>〰️ Medicina general</li>
-                      <li>- Urgencias hospitalarias </li>
+                      <li>〰️ Urgencias hospitalarias </li>
-                      <li>- Urgencias domiciliarias</li>
+                      <li>〰️ Urgencias domiciliarias</li>
-                      <li>- Especialidades médicas</li>
+                      <li>〰️ Especialidades médicas</li>
-                      <li>- Asistencia médica 24 horas</li>
+                      <li>〰️ Asistencia médica 24 horas</li>
-                      <li>- Pruebas diagnósticas</li>
+                      <li>〰️ Pruebas diagnósticas</li>
-                      <li>- Asistencia médica en el extranjero</li>
+                      <li>〰️ Asistencia médica en el extranjero</li>
-                      <li>- Hospitalización</li>
+                      <li>〰️ Hospitalización</li>
-                      <li>- Segunda opinión médica</li>
+                      <li>〰️ Segunda opinión médica</li>
-                      <li>- Complemento bucodental</li>
+                      <li>〰️ Complemento bucodental</li>
-                      <li>- Prótesis internas</li>
+                      <li>〰️ Prótesis internas</li>
                     </ul>
                   </AccordionItem>
                   <AccordionItem
@@ -125,28 +124,28 @@ function RouteComponent() {
                     }}
                   >
                     <ul className="">
-                      <li>- Psicología </li>
+                      <li>〰️ Psicología </li>
-                      <li>- Podología </li>
+                      <li>〰️ Podología </li>
                       <li>
-                        - Otros tratamientos especiales (oxigenoterapia,
+                        〰️ Otros tratamientos especiales (oxigenoterapia,
                         laserterapia, litroticia extracorpórea renal, diálisis,
                         quimioterapia, radioterapia...)
                       </li>
                       <li>
-                        - Dermatoscopia digital - detección precoz del melanoma
+                        〰️ Dermatoscopia digital - detección precoz del melanoma
                       </li>
-                      <li>- Dianas terapéuticas - tratamiento oncológico</li>
+                      <li>〰️ Dianas terapéuticas - tratamiento oncológico</li>
                       <li>
-                        - Cirugía robotizada en intervenciones de cáncer de
+                        〰️ Cirugía robotizada en intervenciones de cáncer de
                         próstata con el sistema Da Vinci
                       </li>
-                      <li>- Cirugía de la mama sana</li>
+                      <li>〰️ Cirugía de la mama sana</li>
-                      <li>- Cirugía esófago de Barret</li>
+                      <li>〰️ Cirugía esófago de Barret</li>
-                      <li>- Rehabilitación cardiaca tras infarto</li>
+                      <li>〰️ Rehabilitación cardiaca tras infarto</li>
-                      <li>- Estudio biomecánico de la pisada</li>
+                      <li>〰️ Estudio biomecánico de la pisada</li>
-                      <li>- Rehabilitación del suelo pélvico </li>
+                      <li>〰️ Rehabilitación del suelo pélvico </li>
                       <li>
-                        - Rehabilitación vestibular para patología de oído
+                        〰️ Rehabilitación vestibular para patología de oído
                         interno
                       </li>
                     </ul>
@@ -163,11 +162,11 @@ function RouteComponent() {
                     }}
                   >
                     <ul className="">
-                      <li>- Diagnóstico y tratamiento de la infertilidad</li>{" "}
+                      <li>〰️ Diagnóstico y tratamiento de la infertilidad</li>{" "}
-                      <li>- Programa de preparación al parto</li>{" "}
+                      <li>〰️ Programa de preparación al parto</li>{" "}
-                      <li>- Test de cribado prenatal no invasivo </li>
+                      <li>〰️ Test de cribado prenatal no invasivo </li>
-                      <li>- Cuidados posparto</li>{" "}
+                      <li>〰️ Cuidados posparto</li>{" "}
-                      <li>- Planificación familiar</li>
+                      <li>〰️ Planificación familiar</li>
                     </ul>
                   </AccordionItem>
                   <AccordionItem
@@ -184,12 +183,12 @@ function RouteComponent() {
                     }}
                   >
                     <ul className="">
-                      <li>- Llamadas, videollamadas, chat médico online </li>
+                      <li>〰️ Llamadas, videollamadas, chat médico online </li>
-                      <li>- Sin copagos y sin límite de consultas </li>
+                      <li>〰️ Sin copagos y sin límite de consultas </li>
-                      <li>- Medicina general y 29 especialidades </li>
+                      <li>〰️ Medicina general y 29 especialidades </li>
-                      <li>- Prescripciones para pruebas y medicamentos</li>
+                      <li>〰️ Prescripciones para pruebas y medicamentos</li>
                       <li>
-                        - Selfie health: medidor de indicadores de salud desde
+                        〰️ Selfie health: medidor de indicadores de salud desde
                         tu móvil (tensión, frecuencia cardiaca, estrés...)
                       </li>
                     </ul>

src/routes/seguros/vehiculos/coche.tsx

@@ -43,7 +43,7 @@ export const Route = createFileRoute("/seguros/vehiculos/coche")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de coches</h1>
         </CardHeader>

src/routes/seguros/vehiculos/index.tsx

@@ -8,11 +8,19 @@ export const Route = createFileRoute("/seguros/vehiculos/")({
 });
 
 function RouteComponent() {
+  const navigate = Route.useNavigate();
   return (
     <>
       <div className="flex justify-center">
-        <div className="grid max-w-5xl sm:grid-cols-2 gap-4 my-5 mx-4">
+        <div className="grid max-w-5xl px-2 md:px-3  sm:grid-cols-2 gap-4 my-5 mx-4">
-          <Card className="border-none" radius="lg">
+          <Card
+            className="border-none"
+            radius="lg"
+            isPressable
+            onPress={() =>
+              navigate({ to: "/seguros/vehiculos/coche", viewTransition: true })
+            }
+          >
             <Image
               alt="Woman listing to music"
               className="object-cover"
@@ -22,12 +30,16 @@ function RouteComponent() {
             />
             <CardFooter className="justify-between bg-white border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
               <p className="font-semibold">Seguros de Coche</p>
-              <Button as={Link} color="secondary" to="coche" viewTransition>
-                Ver más
-              </Button>
             </CardFooter>
           </Card>
-          <Card className="border-none" radius="lg">
+          <Card
+            className="border-none"
+            radius="lg"
+            isPressable
+            onPress={() =>
+              navigate({ to: "/seguros/vehiculos/moto", viewTransition: true })
+            }
+          >
             <Image
               alt="Woman listing to music"
               className="object-cover"
@@ -37,9 +49,6 @@ function RouteComponent() {
             />
             <CardFooter className="justify-between bg-white border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
               <p className="font-semibold">Seguro de Motos</p>
-              <Button as={Link} color="secondary" to="moto" viewTransition>
-                Ver más
-              </Button>
             </CardFooter>
           </Card>
         </div>

src/routes/seguros/vehiculos/moto.tsx

@@ -33,7 +33,7 @@ export const Route = createFileRoute("/seguros/vehiculos/moto")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de motos</h1>
         </CardHeader>

src/routes/seguros/vida.tsx

@@ -67,7 +67,7 @@ export const Route = createFileRoute("/seguros/vida")({
 function RouteComponent() {
   return (
     <div className="flex justify-center">
-      <Card className="w-full max-w-5xl m-2 md:m-4 overflow-hidden">
+      <Card className="w-full max-w-5xl px-2 md:px-3  m-2 md:m-4 overflow-hidden">
         <CardHeader className="block">
           <h1 className="text-2xl font-bold">Seguro de Vida</h1>
           <div className="flex gap-2 flex-wrap my-4">
@@ -97,7 +97,7 @@ function RouteComponent() {
           <div className="mx-4">
             <Tabs aria-label="Options" className="flex justify-center">
               <Tab title="Coberturas">
-                <Table aria-label="Example table with dynamic content">
+                <Table removeWrapper aria-label="Coberturas de seguros de vida" className="w-full">
                   <TableHeader>
                     {columns.map((column) => (
                       <TableColumn key={column.key}>{column.label}</TableColumn>
@@ -239,7 +239,7 @@ function RouteComponent() {
                   isZoomed
                   width={400}
                   height={300}
-                  src="https://images.unsplash.com/photo-1522125670776-3c7abb882bc2?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                  src="https://images.unsplash.com/photo-1586769852836-bc069f19e1b6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1170"
                   alt="prueba"
                 />
               </div>

src/styles/app.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -21,6 +22,10 @@
   }
 }
 
+.font-outfit {
+  font-family: 'Outfit', sans-serif;
+}
+
 .main-lay {
   background-image: url("https://images.unsplash.com/photo-1475503572774-15a45e5d60b9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
 }

src/utils/sitemap.ts

@@ -1,17 +1,53 @@
-import { type FileRouteTypes } from "@/routeTree.gen";
+import type { Sitemap } from "tanstack-router-sitemap";
-import { Sitemap } from "tanstack-router-sitemap";
 
-// This will become a string literal union of all your routes
+type MyRoutes = string;
-export type TRoutes = FileRouteTypes["fullPaths"];
+export const sitemap: Sitemap<MyRoutes> = {
-
-// Define your sitemap
-export const sitemap: Sitemap<TRoutes> = {
   siteUrl: "https://victoriaseguros.es",
   defaultPriority: 0.5,
   routes: {
+    "/": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/inicio": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
     "/seguros": {
       priority: 1,
       changeFrequency: "daily",
     },
+    "/seguros/vida": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/hogar": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/salud": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/decesos": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/vehiculos/coche": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/mascotas": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/mascotas/perros": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
+    "/seguros/mascotas/caballo": {
+      priority: 1,
+      changeFrequency: "daily",
+    },
   },
-};
+};