feat: add arrow and change the svg

src/components/header/PracticeSection.tsx

@@ -38,20 +38,22 @@ const PracticeSection = ({ title }: { title: string }) => {
           </div>
 
           <div className="grid grid-cols-4 relative">
-            <div className="flex justify-center ">
+            <div className="flex justify-center rotate-180">
               <Line />
             </div>
             <div className="flex justify-center ">
               <Line />
             </div>
-            <div className="flex justify-center ">
+            <div className="flex justify-center  rotate-180">
               <Line />
             </div>
             <div className="flex justify-center ">
               <Line />
             </div>
-
-            <div className="h-[10px] w-full bg-[#dc2626] absolute top-1/2"></div>
+            <div className="flex items-center border-4 absolute w-full top-[45%]">
+              <div className="h-[10px] w-full bg-[#dc2626] absolute"></div>
+              <div className="-right-4 absolute w-0 h-0 border-y-[15px] border-l-[30px] border-y-transparent border-l-[#dc2626] "></div>
+            </div>
           </div>
           <div className="flex justify-between items-start w-fit- gap-x-4-">
             <p className="text-center text-xs max-w-52 leading-tight">

src/components/icons/Line.tsx

@@ -1,22 +1,14 @@
 export default function Line() {
   return (
     <svg
-      width="80px"
-      height="80px"
-      viewBox="0 0 24 24"
+      width="85"
+      height="80"
+      viewBox="0 0 85 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g id="Interface / Line_L">
-        <path
-          id="Vector"
-          d="M12 19V5"
-          stroke="#dc2626"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
+      <path d="M62.5 63.3333V16.6666" stroke="#DC2626" stroke-width="3.33333" />
+      <circle cx="62.5" cy="15.5" r="3.5" fill="#DC2626" />
     </svg>
   );
 }