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>
+  );
+}