doc update hero page

docs/react.extra.d.ts

@@ -0,0 +1,7 @@
+import "react";
+
+declare module "react" {
+  interface CSSProperties {
+    [key: `--${string}`]: string | number;
+  }
+}

docs/src/app/NpmInput.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "pentatrion-design/components/button";
+import { Input } from "pentatrion-design/components/input";
+import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
+
+const text = "npm i maplibre-react-components";
+
+export default function NpmInput() {
+  const [copiedText, copy] = useCopyToClipboard();
+
+  function handleClickCopy() {
+    copy(text);
+  }
+  return (
+    <Input
+      value={text}
+      className="bg-gray-0"
+      readOnly
+      suffix={
+        <>
+          {copiedText === text && <span>copied</span>}
+          <Button
+            onClick={handleClickCopy}
+            withRipple={false}
+            icon
+            variant="text"
+            color="gray"
+          >
+            <i className="fe-copy"></i>
+          </Button>
+        </>
+      }
+    />
+  );
+}

docs/src/app/page.tsx

@@ -1,16 +1,41 @@
 import LandingBackground from "~/components/LandingBackground";
 import LinkButton from "~/components/LinkButton";
 import HomeLogo from "./HomeLogo";
+import NpmInput from "./NpmInput";
+import SpotCard from "~/components/SpotCard";
 
 export default function Home() {
   return (
-    <div className="grid min-h-screen place-content-center">
-      <LandingBackground />
-      <div className="relative">
-        <HomeLogo />
-        <div className="mt-2 flex justify-end gap-2">
-          <LinkButton href="/getting-started">Getting started</LinkButton>
-          <LinkButton href="/tutorial">Tutorial</LinkButton>
+    <div>
+      <div className="grid min-h-[70vh] place-content-center">
+        <LandingBackground />
+        <div className="relative">
+          <HomeLogo />
+          <div className="mt-2 flex justify-end gap-2">
+            <LinkButton href="/getting-started">Getting started</LinkButton>
+            <LinkButton href="/tutorial">Tutorial</LinkButton>
+          </div>
+        </div>
+      </div>
+      <div className="m-auto flex h-[10vh] max-w-[24rem] items-center justify-center">
+        <div className="w-full p-4">
+          <NpmInput />
+        </div>
+      </div>
+
+      <div className="m-auto max-w-[70rem] p-4">
+        <div className="grid mb-4 grid-cols-1 gap-4 lg:grid-cols-3">
+          <SpotCard className="text-center">
+            Lightweight : only 11kB gzipped
+          </SpotCard>
+          <SpotCard className="text-center">
+            MapLibre only compatible, the library is based as much as possible
+            on MapLibre native types. The learning curve is fast.
+          </SpotCard>
+          <SpotCard className="text-center">
+            Focused on performance. The binding between React and MapLibre
+            occurs in the most discreet way possible.
+          </SpotCard>
         </div>
       </div>
     </div>

docs/src/components/SpotCard.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import clsx from "clsx";
+import { useEventListener } from "pentatrion-design/hooks";
+import { CSSProperties, ReactNode, useRef } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+const style: CSSProperties = {
+  "--spotlight-color-stops": "#FFFAC7,#DBA726,transparent",
+  "--spotlight-size": "300px",
+};
+
+export default function SpotCard({ children, className }: Props) {
+  const ref = useRef<HTMLDivElement>(null!);
+
+  useEventListener("mousemove", (event) => {
+    const { top, left } = ref.current.getBoundingClientRect();
+    const x = event.clientX - left;
+    const y = event.clientY - top;
+
+    ref.current.style.setProperty("--x", `${x}px`);
+    ref.current.style.setProperty("--y", `${y}px`);
+  });
+
+  return (
+    <div
+      ref={ref}
+      className="relative mx-auto w-full max-w-2xl transform-gpu overflow-hidden rounded-2xl bg-white/10 p-4 [--radius:theme(borderRadius.2xl)] before:absolute before:inset-0 before:bg-[radial-gradient(var(--spotlight-size)_circle_at_var(--x)_var(--y),var(--spotlight-color-stops))]"
+      style={style}
+    >
+      <div className="absolute inset-px rounded-2xl bg-gray-0"></div>
+      <div
+        className={clsx(
+          "relative flex h-full items-center justify-center",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

docs/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+
+type CopiedValue = string | null;
+
+type CopyFn = (text: string) => Promise<boolean>;
+
+export function useCopyToClipboard(): [CopiedValue, CopyFn] {
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null);
+
+  const copy: CopyFn = useCallback(async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn("Clipboard not supported");
+      return false;
+    }
+
+    // Try to save to clipboard then save it in the state if worked
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn("Copy failed", error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+
+  return [copiedText, copy];
+}

docs/src/style/icons/config.json

@@ -48,6 +48,18 @@
       "code": 59395,
       "src": "entypo"
     },
+    {
+      "uid": "c9bef3dc67fea47e94c4a5030ea64dad",
+      "css": "clipboard",
+      "code": 59397,
+      "src": "elusive"
+    },
+    {
+      "uid": "c8585e1e5b0467f28b70bce765d5840c",
+      "css": "copy",
+      "code": 61637,
+      "src": "fontawesome"
+    },
     {
       "uid": "c4ab4e02333d10843cd478dfb390028f",
       "css": "circle-exclamation",