first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,77 @@
+'use client'
+
+
+
+import Image from "next/image";
+import React from "react";
+import CountUp from "react-countup";
+import VisibilitySensor from "react-visibility-sensor";
+
+const counterUpContent = [
+  {
+    startCount: "0",
+    endCount: "13",
+    meta: "Projects",
+    colorClass: "color-one",
+  },
+  {
+    startCount: "0",
+    endCount: "3",
+    meta: "Workers",
+    colorClass: "color-two",
+  },
+  {
+    startCount: "0",
+    endCount: "123",
+    meta: "Offices",
+    colorClass: "color-three",
+  },
+];
+
+const CounterOne = () => {
+  const [focus, setFocus] = React.useState(false);
+  return (
+    <div className="counter-info-classic">
+      {counterUpContent.map((val, i) => (
+        <div className={`counter-box-one ${val.colorClass}`} key={i}>
+          <h2 className="number font-rubik">
+            <span className="timer">
+              {" "}
+              <CountUp
+                start={focus ? val.startCount : null}
+                end={val.endCount}
+                duration={1}
+                redraw={true}
+              >
+                {({ countUpRef }) => (
+                  <VisibilitySensor
+                    onChange={(isVisible) => {
+                      if (isVisible) {
+                        setFocus(true);
+                      }
+                    }}
+                  >
+                    <span ref={countUpRef} />
+                  </VisibilitySensor>
+                )}
+              </CountUp>{" "}
+            </span>{" "}
+            k
+          </h2>
+          <p className="font-rubik">{val.meta}</p>
+        </div>
+      ))}
+
+      <div className="bubble-one"></div>
+      <div className="bubble-two"></div>
+      <div className="bubble-three"></div>
+      <div className="bubble-four"></div>
+      <div className="bubble-five"></div>
+      <div className="bubble-six"></div>
+      <div className="bubble-seven"></div>
+      <Image width="242" height="387" src="/images/shape/8.svg" alt="image" className="cs-screen dot-shape" />
+    </div>
+  );
+};
+
+export default CounterOne;