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,159 @@
+import { useCallback, useEffect, useState } from "react";
+
+import CurvyRect, { Connector } from "@/components/shared/layout/curvy-rect";
+import { encryptText } from "@/components/app/(home)/sections/hero/Title/Title";
+
+import HeroScrapingCodeLoading from "./Loading/Loading";
+import Code from "@/components/ui/code";
+
+const URL = {
+  value: "https://example.com",
+  encrypted: "h=t*A:!/z!aap?A-cZz",
+};
+const MARKDOWN = {
+  value: "# Getting Started...",
+  encrypted: "# ?0z-ang S*a-Z-a0*9",
+};
+const TITLE = {
+  value: "Guide",
+  encrypted: "G!=*?",
+};
+const SCREENSHOT = {
+  value: "https://example.com/hero",
+  encrypted: "ht-=*:/?*Za!zl=-?a9?h0-!",
+};
+
+export default function HeroScrapingCode({ step }: { step: number }) {
+  const [url, setUrl] = useState(URL.encrypted);
+  const [markdown, setMarkdown] = useState(MARKDOWN.encrypted);
+  const [title, setTitle] = useState(TITLE.encrypted);
+  const [screenshot, setScreenshot] = useState(SCREENSHOT.encrypted);
+
+  const reveal = useCallback((value: string, setter: (v: string) => void) => {
+    let progress = 0;
+    let increaseProgress = -10;
+
+    const animate = () => {
+      increaseProgress = (increaseProgress + 1) % 5;
+
+      if (increaseProgress === 4) {
+        progress += 0.2;
+      }
+
+      if (progress > 1) {
+        progress = 1;
+        setter(encryptText(value, progress, { randomizeChance: 0.3 }));
+
+        return;
+      }
+
+      setter(encryptText(value, progress, { randomizeChance: 0.3 }));
+
+      const interval = 70 + progress * 30;
+      setTimeout(animate, interval);
+    };
+
+    animate();
+  }, []);
+
+  useEffect(() => {
+    if (step >= 0 && url === URL.encrypted) reveal(URL.value, setUrl);
+
+    if (step >= 3 && title === TITLE.encrypted) reveal(TITLE.value, setTitle);
+    if (step >= 4 && markdown === MARKDOWN.encrypted)
+      reveal(MARKDOWN.value, setMarkdown);
+
+    if (step >= 5 && screenshot === SCREENSHOT.encrypted)
+      reveal(SCREENSHOT.value, setScreenshot);
+
+    const interval = setInterval(() => {
+      if (step < 0) {
+        URL.encrypted = encryptText(URL.value, 0, { randomizeChance: 0.3 });
+        setUrl(URL.encrypted);
+      }
+
+      if (step < 3) {
+        TITLE.encrypted = encryptText(TITLE.value, 0, { randomizeChance: 0.3 });
+        setTitle(TITLE.encrypted);
+      }
+
+      if (step < 4) {
+        MARKDOWN.encrypted = encryptText(MARKDOWN.value, 0, {
+          randomizeChance: 0.3,
+        });
+        setMarkdown(MARKDOWN.encrypted);
+      }
+
+      if (step < 5) {
+        SCREENSHOT.encrypted = encryptText(SCREENSHOT.value, 0, {
+          randomizeChance: 0.3,
+        });
+        setScreenshot(SCREENSHOT.encrypted);
+      }
+    }, 70);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step, reveal]);
+
+  return (
+    <div className="h-280 lg:h-310 flex z-[1] w-full relative -top-1 bg-background-base">
+      <Connector className="lg:hidden absolute -top-10 -left-[10.5px]" />
+      <Connector className="lg:hidden absolute -top-10 -right-[10.5px]" />
+      <div className="lg:hidden absolute top-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint" />
+
+      <Connector className="lg:hidden absolute -bottom-10 -left-[10.5px]" />
+      <Connector className="lg:hidden absolute -bottom-10 -right-[10.5px]" />
+      <div className="lg:hidden absolute bottom-0 left-[calc(50%-50vw)] w-screen h-1 bg-border-faint" />
+
+      <div className="flex-1 lg-max:min-w-0 h-full relative lg:inside-border before:border-border-faint">
+        <CurvyRect className="overlay" allSides />
+        <CurvyRect
+          className="size-32 absolute bottom-0 -left-31 lg-max:hidden"
+          bottomRight
+        />
+
+        <div className="pl-15 border-b border-border-faint p-13 flex justify-between items-center">
+          <div className="flex gap-10 items-center">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                className="w-12 h-12 rounded-full relative inside-border before:border-border-muted"
+                key={index}
+              />
+            ))}
+          </div>
+
+          <div className="text-mono-x-small font-mono text-black-alpha-20">
+            [ .JSON ]
+          </div>
+        </div>
+
+        <div className="overflow-x-scroll hide-scrollbar lg:contents relative">
+          <Code
+            code={`[
+  {
+    "url": "${url}",
+    "markdown": "${markdown}",
+    "json": { "title": "${title}", "docs": "..." },
+    "screenshot": "${screenshot}.png"
+  }
+]`}
+            language="json"
+          />
+        </div>
+
+        <HeroScrapingCodeLoading finished={step >= 6} />
+      </div>
+
+      <div className="w-28 lg-max:hidden -ml-1 relative">
+        <div className="h-1 w-[calc(100%-1px)] top-0 left-0 absolute bg-border-faint" />
+        <CurvyRect className="overlay" topLeft />
+      </div>
+
+      <div className="h-53 lg-max:hidden -right-37 bottom-0 absolute w-65">
+        <CurvyRect className="overlay" bottom topRight />
+        <div className="overlay border-y border-border-faint" />
+      </div>
+    </div>
+  );
+}
@@ -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>
+  );
+}