continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,63 @@
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from "react";
+
+import { encryptText } from "@/components/app/(home)/sections/hero/Title/Title";
+import AnimatedWidth from "@/components/shared/layout/animated-width";
+import Spinner from "@/components/ui/spinner";
+
+export default function HeroScrapingCodeLoading({
+  finished,
+}: {
+  finished: boolean;
+}) {
+  const [scrapingText, setScrapingText] = useState("Scraping...");
+
+  useEffect(() => {
+    if (finished) return;
+
+    let timeout = 0;
+    let tick = 0;
+
+    const animate = () => {
+      tick += 1;
+
+      if (tick % 3 !== 0) {
+        setScrapingText(
+          encryptText("Scraping", 0, {
+            randomizeChance: 0.6 + Math.random() * 0.3,
+          }) + "...",
+        );
+      } else {
+        setScrapingText("Scraping...");
+      }
+
+      const interval = 80;
+      timeout = window.setTimeout(animate, interval);
+    };
+
+    animate();
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [finished]);
+
+  return (
+    <div className="flex gap-6 p-6 pr-0 rounded-full inside-border before:border-border-faint absolute right-20 bottom-20 text-mono-small font-mono text-accent-black">
+      <Spinner finished={finished} />
+
+      <AnimatedWidth initial={{ width: "auto" }}>
+        <AnimatePresence initial={false} mode="popLayout">
+          <motion.div
+            animate={{ opacity: 1, x: 0 }}
+            className="pr-12"
+            exit={{ opacity: 0, x: 10 }}
+            initial={{ opacity: 0, x: -10 }}
+          >
+            {finished ? "Scrape Completed" : scrapingText}
+          </motion.div>
+        </AnimatePresence>
+      </AnimatedWidth>
+    </div>
+  );
+}
@@ -0,0 +1,18 @@
+export default function Check() {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clipRule="evenodd"
+        d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5ZM12.8305 8.59995C13.0928 8.27937 13.0455 7.80685 12.7249 7.54455C12.4043 7.28226 11.9318 7.32951 11.6695 7.65009L8.81932 11.1337L7.90533 10.2197C7.61244 9.9268 7.13756 9.9268 6.84467 10.2197C6.55178 10.5126 6.55178 10.9875 6.84467 11.2804L8.34467 12.7804C8.4945 12.9302 8.70073 13.0096 8.91236 12.9991C9.12399 12.9885 9.32129 12.8889 9.45547 12.725L12.8305 8.59995Z"
+        fill="#FA5D19"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+}