ui-landing-page 6.1.0

package/src/components/LandingPage/common/3DModel/ThreeModel.tsx

@@ -0,0 +1,210 @@
+import { Canvas, extend, useThree } from "@react-three/fiber";
+import {
+  Environment,
+  OrbitControls,
+  Preload,
+  Stats,
+  useGLTF,
+} from "@react-three/drei";
+extend({ OrbitControls });
+import { Suspense, useEffect, useRef, useState } from "react";
+import CanvasLoader from "./Loader";
+import * as THREE from "three";
+import { Box3, Vector3 } from "three";
+import { prodMode } from "@/constant";
+import { useAppStepContext } from "@/hooks/useAppStepContext";
+import { PageSteps } from "@/models/general";
+
+const ThreeAsset = ({
+  assetUrl,
+  isTablet,
+}: {
+  assetUrl: string;
+  isTablet: boolean;
+}) => {
+  const { currentStep } = useAppStepContext();
+  const model = useGLTF(assetUrl);
+  const primitiveRef = useRef<THREE.Object3D>(null);
+  const { scene, gl, camera } = useThree();
+
+  /**
+   * The function calculates a suitable scale factor based on the viewport width and the size of a 3D
+   * object.
+   * @param {number} viewportWidth - The viewportWidth parameter represents the width of the viewport
+   * or the width of the screen where the object will be displayed.
+   * @param object - The `object` parameter is an instance of `THREE.Object3D`, which represents a 3D
+   * object in the Three.js library. It can be any type of 3D object, such as a mesh, group, or sprite.
+   * @returns the scaleFactor.
+   */
+  const findSuitableScale = (
+    viewportWidth: number,
+    object: THREE.Object3D,
+    dividedBy = 15
+  ) => {
+    //bouding box of 3D object
+    const boundingBox = new THREE.Box3().setFromObject(object);
+    const size = new THREE.Vector3();
+    boundingBox.getSize(size);
+
+    const maxDimension = Math.max(size.x, size.y, size.z);
+
+    // 370: height of 3d div section
+    // 0.8 vs 15: to ensure the object is not scaled too large by default, allowing it to fit within the viewport
+    const scaleFactor =
+      (Math.min(viewportWidth, window.innerHeight) * 0.8) /
+      maxDimension /
+      dividedBy;
+
+    return scaleFactor;
+  };
+
+  const findSuitablePosition = (
+    viewportWidth: number,
+    object: THREE.Object3D
+  ) => {
+    const box3 = new Box3().setFromObject(object);
+    const vector = new Vector3();
+    box3.getCenter(vector);
+
+    // const spotLight = new THREE.SpotLight("#ffffff", 1);
+    // spotLight.target = object;
+    // spotLight.position.set(
+    //   camera.position.x + 10,
+    //   camera.position.y + 10,
+    //   camera.position.z + 10
+    // );
+    // scene.add(spotLight);
+
+    gl.toneMapping = THREE.LinearToneMapping;
+    gl.toneMappingExposure = 2;
+    gl.shadowMap.enabled = true;
+
+    object.position.set(0, -vector.y / 2, 0);
+  };
+
+  // https://storage.nomion.io-dev/images/user_id/1688546558-Tình Biển - Phan Quỳnh Hương.glb
+  // https://storage.nomion.io-dev/images/user_id/1688546973-Đùm Bọc - Mai Thanh Thiện.glb
+  // https://storage.nomion.io-dev/images/user_id/1688547178-Đà Nẵng Tình Người - Đỗ Văn Hiệu.glb
+  // https://storage.nomion.io/images/user_id/1693342481-Thầm Lặng.glb
+
+  useEffect(() => {
+    if (model.scene.scale.equals(new THREE.Vector3(1, 1, 1))) {
+      const scale = findSuitableScale(
+        window.innerWidth,
+        model.scene,
+        isTablet ? 40 : 15
+      );
+
+      if (primitiveRef.current) {
+        primitiveRef.current.scale.set(scale, scale, scale);
+      }
+
+      // findSuitablePosition(window.innerWidth, model.scene);
+    }
+
+    if (currentStep !== PageSteps.Normal) return;
+    const animate = () => {
+      requestAnimationFrame(animate);
+
+      // Update cube rotation or other animations here
+
+      // Render the scene
+      gl.render(scene, camera);
+    };
+
+    animate();
+
+    // Zoom-In Effect
+    const zoomInDuration = 2500; // milliseconds
+    const targetZoom = 2; // Target zoom level
+    const startTime = Date.now();
+
+    const updateCameraZoom = () => {
+      const elapsedTime = Date.now() - startTime;
+      const progress = Math.min(elapsedTime / zoomInDuration, 1); // Clamp progress between 0 and 1
+      const currentZoom = camera.position.z;
+
+      // Calculate the new camera position and field of view
+      // camera.position.z = currentZoom + (targetZoom - currentZoom) * progress;
+      camera.zoom = 1 + (17 - 1) * progress; // Adjust the field of view
+
+      camera.updateProjectionMatrix(); // Update the camera's projection matrix
+
+      if (progress < 1) {
+        requestAnimationFrame(updateCameraZoom);
+      }
+    };
+
+    updateCameraZoom();
+    findSuitablePosition(window.innerWidth, model.scene);
+
+    return () => {
+      // Clean up Three.js resources when component unmounts
+      gl.dispose();
+    };
+  }, [model.scene, currentStep]);
+
+  return (
+    <mesh>
+      <Environment preset={"city"} blur={0} />
+      <primitive object={model.scene} rotation={[0, 0, 0]} ref={primitiveRef} />
+      {!prodMode && (
+        <>
+          {/* <axesHelper args={[500]} /> */}
+          {/*<Stats />*/}
+        </>
+      )}
+    </mesh>
+  );
+};
+
+const ThreeModel = ({ assetUrl }: { assetUrl: string }) => {
+  const [isTablet, setIsTablet] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(min-width: 664px)");
+
+    setIsTablet(mediaQuery.matches);
+
+    const handleMediaQueryChange = (event: any) => {
+      setIsTablet(event.matches);
+    };
+
+    mediaQuery.addEventListener("change", handleMediaQueryChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleMediaQueryChange);
+    };
+  }, []);
+
+  return (
+    <Canvas
+      frameloop="demand"
+      shadows
+      orthographic
+      camera={{
+        position: [20, 3, 0],
+        // fov: 100,
+        // zoom: 15
+      }}
+      gl={{
+        preserveDrawingBuffer: true,
+      }}>
+      <Suspense fallback={<CanvasLoader />}>
+        <OrbitControls
+          enableDamping
+          enableZoom={true}
+          enablePan={false}
+          autoRotate
+          // turn on to lock rotation on vertical direction
+          maxPolarAngle={-(Math.PI / 2)}
+          minPolarAngle={Math.PI / 2}
+        />
+        <ThreeAsset assetUrl={assetUrl} isTablet={isTablet} />
+      </Suspense>
+      <Preload all />
+    </Canvas>
+  );
+};
+
+export default ThreeModel;

package/src/components/LandingPage/common/3DModel/index.tsx

@@ -0,0 +1,90 @@
+// @ts-nocheck
+import { detectMobileOperatingSystem } from "@/modules/core/utils/helper";
+import { OS } from "../../models/general";
+import { useEffect, useRef, useState } from "react";
+
+interface ThreeModelProps {
+  asset3DUrl: string;
+  showArButton?: boolean;
+  isHidden?: boolean;
+  poster?: string;
+  buttonAr?: React.ReactNode;
+  props3D?: any;
+}
+
+const ThreeModelViewer = ({
+  asset3DUrl,
+  showArButton,
+  isHidden = false,
+  poster,
+  buttonAr = <></>,
+  props3D,
+}: ThreeModelProps) => {
+  const modelViewerRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadModelViewerScript = async () => {
+      if (
+        typeof document !== "undefined" &&
+        !document.querySelector("script#model-viewer-script")
+      ) {
+        const script = document.createElement("script");
+        script.id = "model-viewer-script";
+        script.src =
+          "https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js";
+
+        script.type = "module";
+        script.async = true;
+        document.body.appendChild(script);
+
+        script.onload = () => {
+          console.log("Model Viewer script loaded successfully.");
+          setLoading(false);
+        };
+
+        script.onerror = (error) => {
+          console.error("Error loading Model Viewer script:", error);
+          setLoading(false);
+        };
+      } else {
+        setLoading(false);
+      }
+    };
+    loadModelViewerScript();
+  }, []);
+
+  // const os = detectMobileOperatingSystem();
+  // if (isHidden) return;
+  // if (os === OS.Android) {
+  //   return <ThreeModel assetUrl={asset3DUrl} />;
+  // }
+  return (
+    <div ref={modelViewerRef} className="w-full h-full">
+      {loading ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          loading...
+        </div>
+      ) : (
+        <model-viewer
+          camera-controls
+          auto-rotate
+          src={asset3DUrl}
+          alt="3D model"
+          ar
+          poster={poster}
+          disable-pan
+          disable-tap
+          {...props3D}
+          // camera-orbit="0deg 75deg auto"
+          // min-camera-orbit="auto 75deg auto"
+          // max-camera-orbit="auto 75deg auto"
+        >
+          <div slot="ar-button">{buttonAr}</div>
+        </model-viewer>
+      )}
+    </div>
+  );
+};
+
+export default ThreeModelViewer;

package/src/components/LandingPage/common/CarouselCustom/index.tsx

@@ -0,0 +1,80 @@
+// import { Mousewheel } from "swiper";
+import { useEffect, useRef } from "react";
+import { Swiper, SwiperProps, SwiperSlide } from "swiper/react";
+import { twMerge } from "tailwind-merge";
+import type { Swiper as SwiperType } from "swiper";
+import { Navigation, Autoplay, Pagination } from "swiper/modules";
+
+interface CarouselCustomProps extends SwiperProps {
+  listItem: React.ReactNode[];
+  hasClickNavigation?: boolean;
+  className?: string;
+  wrapperClassName?: string;
+  setSwiperInstance?: React.Dispatch<React.SetStateAction<SwiperType | null>>;
+}
+
+const CarouselCustom = (props: CarouselCustomProps) => {
+  const {
+    slidesPerView = 1.05,
+    direction = "horizontal",
+    listItem,
+    className = "",
+    hasClickNavigation = true,
+    wrapperClassName = "",
+    setSwiperInstance,
+    ...rest
+  } = props;
+  const swiperRef = useRef<SwiperType>();
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!hasClickNavigation) return;
+    const container = e.currentTarget;
+    const { clientX } = e;
+    const { left, width } = container.getBoundingClientRect();
+    const clickX = clientX - left;
+
+    if (clickX > width / 2) {
+      swiperRef.current?.slideNext();
+    } else {
+      swiperRef.current?.slidePrev();
+    }
+  };
+
+  useEffect(() => {
+    if (!setSwiperInstance || !swiperRef.current) return;
+    setSwiperInstance(swiperRef.current);
+  }, [setSwiperInstance, swiperRef.current]);
+
+  return (
+    <div
+      className={twMerge("h-full w-full relative", wrapperClassName)}
+      onClick={handleClick}
+    >
+      <Swiper
+        onSwiper={(swiper) => (swiperRef.current = swiper)}
+        // loop={true}
+        className={twMerge("w-full", className)}
+        slidesPerView={slidesPerView}
+        spaceBetween={8}
+        pagination={{
+          clickable: true,
+        }}
+        direction={direction}
+        // modules={[Mousewheel]}
+        modules={[Autoplay, Pagination]}
+        {...rest}
+      >
+        {listItem &&
+          listItem.map((item, index) => {
+            return (
+              <SwiperSlide className="w-fit" key={index}>
+                {item}
+              </SwiperSlide>
+            );
+          })}
+      </Swiper>
+    </div>
+  );
+};
+
+export default CarouselCustom;

package/src/components/LandingPage/common/FadeInMotion/index.tsx

@@ -0,0 +1,60 @@
+import { FC, ReactNode } from "react";
+import { motion } from "framer-motion";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const FadeInMotion: FC<{
+  isVisible?: boolean;
+  delay: number;
+  duration?: number;
+  children: ReactNode;
+  className?: string;
+}> = (props) => {
+  const { duration = 0.5, delay = 0.5, children, className } = props;
+  return (
+    <motion.div
+      className={clsx(
+        "flex w-full flex-col gap-[16px]",
+        !!className && className
+      )}
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{ duration, delay }}>
+      {children}
+    </motion.div>
+  );
+};
+
+export const FadeInMotionV2: FC<{
+  isVisible: boolean;
+  delay: number;
+  duration?: number;
+  children: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}> = (props) => {
+  const {
+    duration = 0.5,
+    delay = 0.5,
+    isVisible = true,
+    children,
+    className = "",
+    style = {},
+  } = props;
+  if (!isVisible) return <></>;
+  return (
+    <motion.div
+      style={style}
+      className={twMerge(
+        "flex w-full flex-col gap-[16px]",
+        className,
+        isVisible && "visible",
+        !isVisible && "invisible"
+      )}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration, delay }}>
+      {children}
+    </motion.div>
+  );
+};

package/src/components/LandingPage/common/SectionFullScreen/index.tsx

@@ -0,0 +1,68 @@
+import { useFullScreenContext } from "../../hooks/useFullScreenContext";
+import { DetailedHTMLProps, HTMLAttributes, useEffect, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface Props
+  extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
+  name?: string;
+  showScrollGuide?: boolean;
+  children: React.ReactNode;
+  index?: number;
+  className?: string;
+  isSnapScroll?: boolean;
+}
+
+function SectionFullScreen(props: Props) {
+  const {
+    name,
+    children,
+    index,
+    className,
+    isSnapScroll = true,
+    ...rest
+  } = props;
+  const id = index !== undefined ? `${name}-${index}` : name;
+  const sectionRef = useRef<HTMLElement>(null);
+  const { setCurrentSection } = useFullScreenContext();
+
+  useEffect(() => {
+    const sectionRefCurrent = sectionRef.current;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setCurrentSection(name);
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+
+    if (sectionRefCurrent) {
+      observer.observe(sectionRefCurrent);
+    }
+
+    return () => {
+      if (sectionRefCurrent) {
+        observer.unobserve(sectionRefCurrent);
+      }
+    };
+  }, []);
+
+  return (
+    <section
+      id={id}
+      className={twMerge(
+        "relative m-auto w-full h-full max-w-[600px] snap-none",
+        !!className && className,
+        isSnapScroll ? "snap-center snap-always" : "h-auto"
+      )}
+      ref={sectionRef}
+      {...rest}
+    >
+      {children}
+    </section>
+  );
+}
+
+export default SectionFullScreen;

package/src/components/LandingPage/common/Video/index.tsx

@@ -0,0 +1,90 @@
+import { FC, ReactElement, useEffect, useRef, useState } from "react";
+import PlayIcon from "../icons/PlayIcon";
+
+export type VideoProps = {
+  videoUrl: string;
+  thumbnailUrl?: string;
+  objectFit?: "contain" | "cover" | "fill";
+  width?: string;
+  height?: string;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  autoPlay?: boolean;
+  onLoadEnded?(): void;
+};
+
+const Video: FC<VideoProps> = (props): ReactElement => {
+  const {
+    autoPlay = true,
+    videoUrl,
+    thumbnailUrl,
+    objectFit = "contain",
+    width = "100%",
+    height = "100%",
+    loop = false,
+    controls = false,
+    muted = false,
+    onLoadEnded = () => {},
+  } = props;
+  const [isPlay, setIsPlay] = useState(autoPlay);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (!videoRef.current && !autoPlay) return;
+    const video = videoRef.current as HTMLVideoElement;
+    const callback = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          video.play();
+        } else {
+          video.pause();
+          video.currentTime = 0;
+        }
+      });
+    };
+    const observer = new IntersectionObserver(callback);
+    observer.observe(video);
+
+    return () => observer.unobserve(video);
+  }, [videoRef.current]);
+
+  return (
+    <div className="relative h-full w-full">
+      <video
+        ref={videoRef}
+        autoPlay={autoPlay}
+        loop={loop}
+        playsInline
+        muted={muted}
+        controls={controls}
+        poster={thumbnailUrl}
+        onEnded={onLoadEnded}
+        style={{
+          width,
+          height,
+          objectFit,
+        }}>
+        <source src={videoUrl} className="w-full"></source>
+      </video>
+      {!isPlay && (
+        <div className="cursor absolute top-0 flex h-full w-full items-center justify-center">
+          <div className="relative flex h-full w-full items-center justify-center">
+            <div className="absolute inline-flex h-[55px] w-[55px] animate-ping rounded-full bg-white"></div>
+            <div
+              className="z-50 flex h-[80px] w-[80px] items-center justify-center rounded-full bg-black"
+              onClick={() => {
+                console.log(videoRef.current);
+                videoRef.current?.play();
+                setIsPlay(true);
+              }}>
+              <PlayIcon />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Video;

package/src/components/LandingPage/common/icons/3DCubeScanIcon.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+function ThreeDCubeScanIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="none"
+      viewBox="0 0 32 32"
+    >
+      <path
+        stroke="#BFBFBF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+        d="M2.667 12V9.333c0-4 2.666-6.666 6.666-6.666h13.334c4 0 6.666 2.666 6.666 6.666V12M2.667 20v2.667c0 4 2.666 6.666 6.666 6.666h13.334c4 0 6.666-2.666 6.666-6.666V20"
+      ></path>
+      <path
+        stroke="#BFBFBF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M8.933 12.347L16 16.44l7.013-4.067M16 23.693v-7.266"
+      ></path>
+      <path
+        stroke="#BFBFBF"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M14.347 8.387L10.08 10.76c-.96.533-1.76 1.88-1.76 2.987v4.52c0 1.106.787 2.453 1.76 2.986l4.267 2.374c.906.506 2.4.506 3.32 0l4.266-2.374c.96-.533 1.76-1.88 1.76-2.986v-4.52c0-1.107-.786-2.454-1.76-2.987l-4.266-2.373c-.92-.52-2.414-.52-3.32 0z"
+      ></path>
+    </svg>
+  );
+}
+
+export default ThreeDCubeScanIcon;

package/src/components/LandingPage/common/icons/3DFlipIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+function ThreeDFlipIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="#F0F0F0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M22 15c0 3.87-3.13 7-7 7l1.05-1.75M2 9c0-3.87 3.13-7 7-7L7.95 3.75"
+      ></path>
+      <path
+        fill="#fff"
+        d="M6.832 14.308c.072 0 .148.012.228.036a.966.966 0 01.288.144c.136.104.296.196.48.276.192.08.412.12.66.12.248 0 .48-.06.696-.18.224-.128.408-.304.552-.528.144-.232.216-.508.216-.828 0-.304-.064-.556-.192-.756-.12-.2-.284-.352-.492-.456a1.384 1.384 0 00-.648-.156 1.75 1.75 0 00-.444.048 5.453 5.453 0 00-.336.108 1.273 1.273 0 01-.372.048.526.526 0 01-.432-.192.739.739 0 01-.144-.456c0-.112.02-.212.06-.3.048-.088.116-.184.204-.288l2.112-2.244.324.276H6.64a.651.651 0 01-.48-.192.651.651 0 01-.192-.48c0-.184.064-.336.192-.456a.651.651 0 01.48-.192h3.672c.248 0 .432.068.552.204a.723.723 0 01.108.828 1.295 1.295 0 01-.204.264l-2.124 2.28-.324-.408c.088-.04.208-.076.36-.108.16-.032.292-.048.396-.048.472 0 .88.124 1.224.372.352.24.62.556.804.948.192.384.288.8.288 1.248 0 .592-.132 1.104-.396 1.536a2.6 2.6 0 01-1.116.996c-.48.232-1.04.348-1.68.348-.296 0-.588-.036-.876-.108a2.886 2.886 0 01-.744-.288c-.176-.096-.296-.2-.36-.312a.799.799 0 01-.084-.336.81.81 0 01.192-.516.625.625 0 01.504-.252zM15.434 7.6c.576 0 1.088.108 1.536.324.448.216.824.52 1.128.912.312.384.544.832.696 1.344.16.504.24 1.044.24 1.62 0 .776-.14 1.484-.42 2.124a3.57 3.57 0 01-1.224 1.512c-.528.376-1.18.564-1.956.564h-2.868a.74.74 0 01-.528-.204.74.74 0 01-.204-.528V8.332a.718.718 0 01.732-.732h2.868zm-.12 7.02c.504 0 .916-.128 1.236-.384.32-.264.552-.608.696-1.032.152-.432.228-.9.228-1.404a4.2 4.2 0 00-.132-1.068 2.618 2.618 0 00-.384-.9 1.93 1.93 0 00-.672-.624c-.272-.152-.596-.228-.972-.228h-2.1l.12-.108v5.88l-.072-.132h2.052z"
+      ></path>
+    </svg>
+  );
+}
+
+export default ThreeDFlipIcon;

package/src/components/LandingPage/common/icons/ARExploreIcon.tsx

@@ -0,0 +1,15 @@
+export default function ARExploreIcon() {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M22.25 4.5V8.25C22.25 8.44891 22.171 8.63968 22.0303 8.78033C21.8897 8.92098 21.6989 9 21.5 9C21.3011 9 21.1103 8.92098 20.9697 8.78033C20.829 8.63968 20.75 8.44891 20.75 8.25V5.25H17.75C17.5511 5.25 17.3603 5.17098 17.2197 5.03033C17.079 4.88968 17 4.69891 17 4.5C17 4.30109 17.079 4.11032 17.2197 3.96967C17.3603 3.82902 17.5511 3.75 17.75 3.75H21.5C21.6989 3.75 21.8897 3.82902 22.0303 3.96967C22.171 4.11032 22.25 4.30109 22.25 4.5ZM7.25 18.75H4.25V15.75C4.25 15.5511 4.17098 15.3603 4.03033 15.2197C3.88968 15.079 3.69891 15 3.5 15C3.30109 15 3.11032 15.079 2.96967 15.2197C2.82902 15.3603 2.75 15.5511 2.75 15.75V19.5C2.75 19.6989 2.82902 19.8897 2.96967 20.0303C3.11032 20.171 3.30109 20.25 3.5 20.25H7.25C7.44891 20.25 7.63968 20.171 7.78033 20.0303C7.92098 19.8897 8 19.6989 8 19.5C8 19.3011 7.92098 19.1103 7.78033 18.9697C7.63968 18.829 7.44891 18.75 7.25 18.75ZM21.5 15C21.3011 15 21.1103 15.079 20.9697 15.2197C20.829 15.3603 20.75 15.5511 20.75 15.75V18.75H17.75C17.5511 18.75 17.3603 18.829 17.2197 18.9697C17.079 19.1103 17 19.3011 17 19.5C17 19.6989 17.079 19.8897 17.2197 20.0303C17.3603 20.171 17.5511 20.25 17.75 20.25H21.5C21.6989 20.25 21.8897 20.171 22.0303 20.0303C22.171 19.8897 22.25 19.6989 22.25 19.5V15.75C22.25 15.5511 22.171 15.3603 22.0303 15.2197C21.8897 15.079 21.6989 15 21.5 15ZM3.5 9C3.69891 9 3.88968 8.92098 4.03033 8.78033C4.17098 8.63968 4.25 8.44891 4.25 8.25V5.25H7.25C7.44891 5.25 7.63968 5.17098 7.78033 5.03033C7.92098 4.88968 8 4.69891 8 4.5C8 4.30109 7.92098 4.11032 7.78033 3.96967C7.63968 3.82902 7.44891 3.75 7.25 3.75H3.5C3.30109 3.75 3.11032 3.82902 2.96967 3.96967C2.82902 4.11032 2.75 4.30109 2.75 4.5V8.25C2.75 8.44891 2.82902 8.63968 2.96967 8.78033C3.11032 8.92098 3.30109 9 3.5 9ZM17.18 7.81031L12.875 5.34844C12.7617 5.28365 12.6334 5.24957 12.5028 5.24957C12.3723 5.24957 12.244 5.28365 12.1306 5.34844L7.82 7.81031C7.76139 7.84274 7.71253 7.89028 7.67851 7.94798C7.64449 8.00569 7.62655 8.07145 7.62655 8.13844C7.62655 8.20542 7.64449 8.27119 7.67851 8.32889C7.71253 8.3866 7.76139 8.43413 7.82 8.46656L12.5 11.1366L17.18 8.46187C17.2375 8.4291 17.2853 8.3817 17.3185 8.32448C17.3518 8.26726 17.3693 8.20227 17.3693 8.13609C17.3693 8.06992 17.3518 8.00492 17.3185 7.94771C17.2853 7.89049 17.2375 7.84309 17.18 7.81031ZM6.5 10.0809V15C6.49881 15.1328 6.5329 15.2635 6.59879 15.3788C6.66467 15.4941 6.75999 15.5899 6.875 15.6562L11.1875 18.1191C11.2445 18.152 11.3093 18.1693 11.3751 18.1693C11.441 18.1693 11.5057 18.1519 11.5627 18.1189C11.6198 18.0859 11.6671 18.0385 11.7 17.9814C11.7328 17.9244 11.7501 17.8596 11.75 17.7938V12.435L7.0625 9.75562C7.00545 9.72269 6.94074 9.70536 6.87486 9.70538C6.80899 9.70541 6.74428 9.72278 6.68726 9.75576C6.63024 9.78874 6.58291 9.83616 6.55003 9.89324C6.51716 9.95033 6.4999 10.0151 6.5 10.0809ZM18.5 15V10.0809C18.5001 10.0151 18.4828 9.95033 18.45 9.89324C18.4171 9.83616 18.3698 9.78874 18.3127 9.75576C18.2557 9.72278 18.191 9.70541 18.1251 9.70538C18.0593 9.70536 17.9945 9.72269 17.9375 9.75562L13.25 12.435V17.7891C13.2499 17.8549 13.2672 17.9197 13.3 17.9768C13.3329 18.0338 13.3802 18.0813 13.4373 18.1142C13.4943 18.1472 13.559 18.1646 13.6249 18.1646C13.6907 18.1646 13.7555 18.1473 13.8125 18.1144L18.125 15.6562C18.24 15.5899 18.3353 15.4941 18.4012 15.3788C18.4671 15.2635 18.5012 15.1328 18.5 15Z"
+        fill="black"
+      />
+    </svg>
+  );
+}