feat: update landing page design

.github/workflows/scripts/check-existing-doc-links.js

@@ -4,11 +4,30 @@ const getUrlToCheck = (currentUrl, deploymentUrl) => {
   return url.toString();
 };
 
-const checkUrl = async (url) => {
-  const { status } = await fetch(url, {
-    method: "GET",
-  });
-  return [status, new URL(url).pathname];
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const checkUrl = async (url, retries = 3) => {
+  for (let i = 0; i < retries; i++) {
+    try {
+      const { status } = await fetch(url, {
+        method: "GET",
+        headers: {
+          "User-Agent": "refine-link-checker",
+        },
+      });
+      return [status, new URL(url).pathname];
+    } catch (error) {
+      if (i === retries - 1) {
+        console.error(
+          `Failed to fetch ${new URL(url).pathname} after ${retries} attempts:`,
+          error.message,
+        );
+        return [500, new URL(url).pathname];
+      }
+      // Wait before retrying
+      await sleep(1000 * (i + 1));
+    }
+  }
 };
 
 const toChunks = (array, chunkSize) => {
@@ -19,23 +38,19 @@ const toChunks = (array, chunkSize) => {
   return chunks;
 };
 
-const checkChunk = (chunk, deploymentUrl, success, fail) => {
-  return new Promise((resolve) => {
-    const promises = chunk.map((url) => {
-      return checkUrl(getUrlToCheck(url, deploymentUrl));
-    });
-
-    Promise.all(promises).then((results) => {
-      results.forEach(([status, url]) => {
-        if (status === 200) {
-          success.push(url);
-        } else {
-          fail.push(url);
-        }
-      });
-      resolve();
-    });
-  });
+const checkChunk = async (chunk, deploymentUrl, success, fail) => {
+  for (const url of chunk) {
+    const [status, pathname] = await checkUrl(
+      getUrlToCheck(url, deploymentUrl),
+    );
+    if (status === 200) {
+      success.push(pathname);
+    } else {
+      fail.push(pathname);
+    }
+    // Small delay between requests to avoid overwhelming the server
+    await sleep(100);
+  }
 };
 
 const checkExistingLinks = async (sitemapUrl, deploymentUrl) => {
@@ -50,17 +65,24 @@ const checkExistingLinks = async (sitemapUrl, deploymentUrl) => {
 
   console.log("Checking for existing urls in:", sitemapUrl);
   console.log("Deployment url:", deploymentUrl);
+  console.log(`Total URLs to check: ${urls.length}`);
 
-  const chunks = toChunks(urls, 10);
+  const chunks = toChunks(urls, 50);
 
   let done = 0;
 
   for (const chunk of chunks) {
-    console.log(`Checking chunk ${done + 1}/${chunks.length}`);
     done++;
+    console.log(
+      `Checking chunk ${done}/${chunks.length} (${
+        success.length + fail.length
+      }/${urls.length} URLs processed)`,
+    );
     await checkChunk(chunk, deploymentUrl, success, fail);
   }
 
+  console.log(`\nResults: ${success.length} successful, ${fail.length} failed`);
+
   if (fail.length > 0) {
     console.log("Broken links:");
     fail.forEach((link) => {

documentation/blog/2025-09-18-refine-v5-blog.md

@@ -1,6 +1,6 @@
 ---
-title: Refine v5 is here!
-description: Refine v5 brings React 19 support, TanStack Query v5, cleaner APIs, and automatic migration with codemods.
+title: Refine CORE v5 is here!
+description: Refine CORE v5 brings React 19 support, TanStack Query v5, cleaner APIs, and automatic migration with codemods.
 slug: refine-v5-announcement
 authors: ozgur
 tags: [refine, react, announcement]

documentation/docs/advanced-tutorials/auth/auth0.md

@@ -97,7 +97,7 @@ export const Login: React.FC = () => {
 
 After clicking the `Login` button, you will be directed to the auth0 login screen.
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/auth0/auth0-login-min.gif" className="border border-gray-200 rounded" alt="auth0-login" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/auth0/auth0-login-min.gif" className="border border-zinc-200 rounded" alt="auth0-login" />
 
 ## Auth Provider
 

documentation/docs/advanced-tutorials/web3/ethereum-signin.md

@@ -194,7 +194,7 @@ export const Login: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/login-min.gif" alt="ethereum-login" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/login-min.gif" alt="ethereum-login" className="border border-zinc-200 rounded" />
 
 ## Create Dashboard
 
@@ -258,7 +258,7 @@ export const DashboardPage: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/dashboard.jpg" alt="refine-dashboard" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/dashboard.jpg" alt="refine-dashboard" className="border border-zinc-200 rounded" />
 
 Now lets customize **Refine** dashboard. Send your test ethereum via **Refine** dashboard and Metamask.
 
@@ -411,11 +411,11 @@ export const DashboardPage: React.FC = () => {
 </p>
 </details>
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/customize.jpg" alt="refine-customize" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/customize.jpg" alt="refine-customize" className="border border-zinc-200 rounded" />
 
 We can now request to send ethereum through our **Refine** dashboard and also view your account details on [Etherscan Ropsten Test Network](https://ropsten.etherscan.io/)
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/overview-min.gif" alt="refine-overview" className="border border-gray-200 rounded" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/web3/overview-min.gif" alt="refine-overview" className="border border-zinc-200 rounded" />
 
 ## Example
 

documentation/docs/data/packages/supabase/index.md

@@ -1370,7 +1370,7 @@ You will find the Google Auth option in the Auth providers section; enable it an
 
 Here is the result:
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/social-login-min.gif" className="border border-gray-200 rounded" alt="socialLogin" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/social-login-min.gif" className="border border-zinc-200 rounded" alt="socialLogin" />
 
 ## Let's recap what we have done so far
 
@@ -1423,7 +1423,7 @@ For live features to work automatically, we set `liveMode: "auto"` in the option
 
 ### Let see how real-time feature works in the app
 
-<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/real-time-min.gif" className="border border-gray-200 rounded" alt="realTime" />
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/guides-and-concepts/data-provider/supabase/real-time-min.gif" className="border border-zinc-200 rounded" alt="realTime" />
 
 :::tip
 

documentation/docs/getting-started/quickstart.md

@@ -20,7 +20,7 @@ npm create refine-app@latest
 ```
 
 <figure>
-   <img className="w-full rounded-lg border border-solid border-gray-200 dark:border-gray-700" src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/refine-vite-mui-rest-auth-screenshot.webp" alt="Example result" />
+   <img className="w-full rounded-lg border border-solid border-zinc-200 dark:border-zinc-700" src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/refine-vite-mui-rest-auth-screenshot.webp" alt="Example result" />
     <figcaption className="text-center">A Refine app created with CLI using Vite + Material UI + REST API + Custom Auth Provider</figcaption>
 </figure>
 

documentation/sidebars.js

@@ -36,7 +36,7 @@ module.exports = {
     {
       type: "link",
       href: "/docs/migration-guide/4x-to-5x/",
-      label: "Refine v5 is here! 🎉",
+      label: "Refine CORE v5 is here!",
       className: "enterprise-badge",
     },
     {

documentation/src/components/blog/blog-post-page/index.js

@@ -62,7 +62,7 @@ export const BlogPostPageView = ({ children }) => {
         <Link
           to="/blog"
           className={clsx(
-            "text-refine-react-5 dark:text-refine-react-4",
+            "text-zinc-600 dark:text-zinc-400",
             "text-sm no-underline",
             "flex",
             "items-center",
@@ -72,7 +72,7 @@ export const BlogPostPageView = ({ children }) => {
           <ChevronLeft /> Back to blog
         </Link>
         <div className="flex items-center gap-3 px-2 py-1 not-prose">
-          <span className="text-refine-react-5 dark:text-refine-react-4 text-sm">
+          <span className="text-zinc-600 dark:text-zinc-400 text-sm">
             Share on
           </span>
           <TwitterShareButton
@@ -119,14 +119,14 @@ export const BlogPostPageView = ({ children }) => {
         <div className="mt-6 blog-lg:mt-10 mb-6 text-sm">
           <div
             className={clsx(
-              "flex items-center gap-2 text-refine-reac-5 dark:text-refine-react-4 not-prose",
+              "flex items-center gap-2 text-zinc-600 dark:text-zinc-400 not-prose",
               "ml-4 blog-md:ml-0",
             )}
           >
             <Date date={date} formattedDate={formattedDate} />
             {typeof readingTime !== "undefined" && (
               <>
-                <span className="w-[4px] h-[4px] rounded-full bg-refine-reac-5 dark:bg-refine-react-4 " />
+                <span className="w-[4px] h-[4px] rounded-full bg-zinc-600 dark:bg-zinc-400 " />
                 <ReadingTime readingTime={readingTime} />
               </>
             )}

documentation/src/components/blog/featured-blog-post-item/index.js

@@ -50,8 +50,8 @@ export const FeaturedBlogPostItem = () => {
             <Link
               className={clsx(
                 "text-xs",
-                "bg-refine-react-3 dark:bg-refine-react-7",
-                "text-refine-react-8 dark:text-refine-react-3",
+                "bg-zinc-200 dark:bg-zinc-700",
+                "text-zinc-900 dark:text-zinc-300",
                 "no-underline",
                 "rounded-full",
                 "px-2 py-1",
@@ -73,7 +73,7 @@ export const FeaturedBlogPostItem = () => {
             <div
               className={clsx(
                 "mb-4",
-                "text-gray-700 dark:text-refine-react-3",
+                "text-zinc-700 dark:text-zinc-300",
                 "text-xl",
                 "font-lg",
                 "font-bold",
@@ -85,7 +85,7 @@ export const FeaturedBlogPostItem = () => {
           <div
             className={clsx(
               "line-clamp-3",
-              "text-gray-700 dark:text-refine-react-4",
+              "text-zinc-700 dark:text-zinc-400",
               "text-sm",
             )}
           >
@@ -96,7 +96,7 @@ export const FeaturedBlogPostItem = () => {
         <div className="flex items-center gap-2">
           <span
             className={clsx(
-              "text-gray-600 dark:text-refine-react-5",
+              "text-zinc-600 dark:text-zinc-500",
               "text-xs",
               "leading-6",
               "no-underline",

documentation/src/components/blog/featured-blog-post-items/index.js

@@ -6,12 +6,7 @@ import clsx from "clsx";
 
 export const FeaturedBlogPostItems = ({ items }) => {
   return (
-    <div
-      className={clsx(
-        "w-screen",
-        "bg-refine-react-1 dark:bg-refine-react-dark-code",
-      )}
-    >
+    <div className={clsx("w-screen", "bg-zinc-100 dark:bg-zinc-900")}>
       <div
         className={clsx(
           "blog-sm:max-w-[592px]",

documentation/src/components/blog/icons.tsx

@@ -74,7 +74,7 @@ export const Twitter = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
       height={24}
       fill="currentColor"
       rx={12}
-      className={clsx("text-refine-react-1 dark:text-black", props.className)}
+      className={clsx("text-zinc-100 dark:text-black", props.className)}
     />
     <path
       fill="currentColor"

documentation/src/components/blog/post-paginator/index.js

@@ -22,7 +22,7 @@ export const PostPaginator = ({ posts, title }) => {
       )}
     >
       <div className="blog-sm:px-6 w-full px-4">
-        <h2 className="m-0 mb-4 p-0 pl-4 text-2xl font-semibold text-refine-react-8 dark:text-refine-react-1">
+        <h2 className="m-0 mb-4 p-0 pl-4 text-2xl font-semibold text-zinc-900 dark:text-zinc-100">
           {title}
         </h2>
         <div className="flex flex-col not-prose">
@@ -38,9 +38,9 @@ export const PostPaginator = ({ posts, title }) => {
                 "p-5",
                 "mb-5",
                 "rounded-lg",
-                "border border-refine-react-3 dark:border-refine-react-6",
-                "bg-white dark:bg-refine-react-8",
-                "hover:bg-gray-100 dark:hover:bg-refine-react-7",
+                "border border-zinc-200 dark:border-zinc-700",
+                "bg-white dark:bg-zinc-800",
+                "hover:bg-zinc-100 dark:hover:bg-zinc-700",
                 "not-prose",
                 "no-underline",
               )}
@@ -50,26 +50,23 @@ export const PostPaginator = ({ posts, title }) => {
                 rel="dofollow"
                 className={clsx(
                   "font-bold",
-                  "text-refine-react-8 dark:text-refine-react-1",
+                  "text-zinc-900 dark:text-zinc-100",
                   "no-underline",
-                  "hover:text-gray-800 hover:no-underline dark:hover:text-gray-200",
+                  "hover:text-zinc-800 hover:no-underline dark:hover:text-zinc-200",
                 )}
               >
                 {post.title}
               </div>
 
               <p
-                className={clsx(
-                  "font-sm",
-                  "text-refine-react-5 dark:text-refine-react-4",
-                )}
+                className={clsx("font-sm", "text-zinc-600 dark:text-zinc-400")}
               >
                 {post.description}
               </p>
 
               <div
                 id="post-info"
-                className="flex items-center gap-2 text-sm text-refine-react-4 dark:text-refine-react-5"
+                className="flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400"
               >
                 <Date date={post.date} formattedDate={post.formattedDate} />
               </div>

documentation/src/components/blog/tags/index.js

@@ -17,8 +17,8 @@ export const Tags = () => {
             "rounded-full",
             "py-1",
             "px-3",
-            "text-refine-react-8 dark:text-refine-react-3",
-            "bg-refine-react-3 dark:bg-refine-react-7",
+            "text-zinc-900 dark:text-zinc-300",
+            "bg-zinc-200 dark:bg-zinc-700",
             "whitespace-nowrap",
           )}
           key={tag.permalink}