web hero videos update

src/app/(main)/web/page.tsx

@@ -1,5 +1,6 @@
-import { InProcess } from '@/components/pages/InProcess';
+import { InProcess } from "@/components/pages/InProcess";
+import WebMain from "@/components/pages/WebPage/WebMain";
 
 export default function WebPage() {
-  return <InProcess />;
+  return <WebMain />;
 }

src/components/icons/3DTourIcon.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+const ThreeDTourIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.705 20.366c1.94 0 3.133-1.462 3.133-3.452s-1.156-2.743-2.337-2.984l1.887-2.186c.2-.232.313-.541.313-.863 0-.689-.502-1.247-1.12-1.247H8.715c-.493 0-.894.445-.894.995s.4.995.894.995h2.525l-1.715 2.09a1.24 1.24 0 0 0-.243 1.024l.006.031c.102.505.505.864.97.864 1.069 0 1.703.482 1.703 1.342 0 .813-.51 1.31-1.23 1.31-.516 0-.942-.153-1.326-.443-.473-.357-1.125-.419-1.521.04-.329.379-.365.98-.013 1.333.7.7 1.622 1.15 2.834 1.15m3.655-2.192c0 1.111.81 2.012 1.809 2.012h1.585c2.735 0 4.624-2.306 4.624-5.275 0-3-1.89-5.276-4.624-5.276H16.17c-.999 0-1.808.901-1.808 2.012zm2.518-.083c-.333 0-.603-.3-.603-.67V12.4c0-.37.27-.67.603-.67h.876c1.566 0 2.623 1.31 2.623 3.18 0 1.899-1.057 3.18-2.623 3.18z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.262 13.659v1.565a11.514 11.514 0 0 0 10.615 11.479L12.5 25.325l1.423-1.423 4.847 4.848h-3.994A13.526 13.526 0 0 1 1.25 15.224v-1.565zm23.476 2.683v-1.566A11.514 11.514 0 0 0 16.123 3.297L17.5 4.675l-1.423 1.423L11.23 1.25h3.994A13.526 13.526 0 0 1 28.75 14.776v1.566z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default ThreeDTourIcon;

src/components/pages/WebPage/PageBlocks/WebHero.tsx

@@ -3,12 +3,12 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import SearchIcon from "@/icons/SearchIcon";
 import GenPlanSearchIcon from "@/components/icons/GenPlanSearchIcon";
-import InfoIcon from "@/components/icons/InfoIcon";
 import TreeIcon from "@/components/icons/TreeIcon";
 import FavoriteIcon from "@/components/icons/FavoriteIcon";
-import ReportIcon from "@/components/icons/ReportIcon";
 import WebHeroControlBtn from "../PageComponents/WebHeroControlBtn";
 import { AnimatePresence, motion } from "framer-motion";
+import ThreeDTourIcon from "@/components/icons/3DTourIcon";
+import InfoIcon from "@/components/icons/InfoIcon";
 
 export default function WebHero() {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -107,8 +107,8 @@ export default function WebHero() {
             progress={currentVideo === 1 ? playbackProgress : 0}
           />
           <WebHeroControlBtn
-            title={"About the Project"}
+            title={"3D tour of the apartment"}
-            icon={<InfoIcon />}
+            icon={<ThreeDTourIcon />}
             className="top-[17.5vw] left-[16.389vw]"
             active={currentVideo === 2}
             callback={() => onControlButtonClick(2)}
@@ -133,8 +133,8 @@ export default function WebHero() {
           />
 
           <WebHeroControlBtn
-            title={"Booking"}
+            title={"About the project"}
-            icon={<ReportIcon />}
+            icon={<InfoIcon />}
             className="top-[14.722vw] right-0"
             active={currentVideo === 5}
             callback={() => onControlButtonClick(5)}