refactor: replace external SVG images with inline React components in Intro page

src/app/intro/intro-client.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import Button from "@/components/Componentes/button";
@@ -10,6 +9,13 @@ import ReportActionsSheet from "@/components/Componentes/report-actions-sheet";
 import SectionOverlayHost from "@/components/Componentes/section-overlay-host";
 import SliderPage from "@/components/Componentes/slider-page";
 import VideoPlayer from "@/components/Componentes/video-player";
+import {
+  HeavenlyMarriageIllustration,
+  IntroMatchesIcon,
+  IntroMarriagesIcon,
+  IntroPlayButtonIcon,
+  IntroUsersIcon,
+} from "@/components/Componentes/intro-hero-illustration";
 import { useMarriageConfigQuery } from "@/hooks/marriage/use-marriage-config";
 import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
 import { useHabibWebReady } from "@/hooks/use-habib-web-ready";
@@ -133,12 +139,7 @@ export default function IntroClient() {
         />
         <main className="pb-[calc(90px+var(--safe-bottom))]">
           <div className="flex flex-col items-center mt-16">
-            <Image
-              src={"/assets/images/Group 1597880466.svg"}
-              alt={t["heavenly marriage"]}
-              width={168}
-              height={155}
-            />
+            <HeavenlyMarriageIllustration />
             <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
               {t["A Path to Heavenly Marriage"]}
             </h2>
@@ -152,12 +153,7 @@ export default function IntroClient() {
           </div>
           <div className="flex items-center justify-between mt-4">
             <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
-              <Image
-                src={"/assets/images/tabler_user-filled.svg"}
-                alt={t["user profiles"]}
-                width={37}
-                height={37}
-              />
+              <IntroUsersIcon />
               <div className="flex flex-col items-start justify-start -mb-2">
                 <p className="text-[#36363C] group-16 font-bold leading-3">120</p>
                 <p className="text-[#36363C] group-10 font-semibold capitalize">
@@ -166,13 +162,7 @@ export default function IntroClient() {
               </div>
             </div>
             <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
-              <Image
-                src={"/assets/images/icon-park-solid_success.svg"}
-                alt={t["matches"]}
-                width={37}
-                height={37}
-                priority
-              />
+              <IntroMatchesIcon />
               <div className="flex flex-col items-start justify-start -mb-2">
                 <p className="text-[#36363C] group-16 font-bold leading-3">14</p>
                 <p className="text-[#36363C] group-10 font-semibold capitalize">
@@ -181,13 +171,7 @@ export default function IntroClient() {
               </div>
             </div>
             <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
-              <Image
-                src={"/assets/images/typcn_heart-full-outline.svg"}
-                alt={t["marriages"]}
-                width={37}
-                height={37}
-                priority
-              />
+              <IntroMarriagesIcon />
               <div className="flex flex-col items-start justify-start -mb-2">
                 <p className="text-[#36363C] group-16 font-bold leading-3">14</p>
                 <p className="text-[#36363C] group-10 font-semibold capitalize">
@@ -209,13 +193,7 @@ export default function IntroClient() {
               priority
             />
             <div className="absolute inset-0 bg-black/10 transition-colors duration-300 group-hover:bg-black/20" />
-            <Image
-              src={"/assets/images/Frame 1116607280.svg"}
-              alt={t["play"]}
-              width={68}
-              height={68}
-              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover:scale-110 active:scale-95"
-            />
+            <IntroPlayButtonIcon className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover:scale-110 active:scale-95" />
           </div>
 
           <VideoPlayer