feat: update landing page design

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/blog/2025-11-17-supabase-tutorial.md

@@ -190,7 +190,10 @@ If you see `ERROR: 42P01: relation "public.employees" does not exist`:
   :::
 
 :::tip No results or NULL department values?
-`LEFT JOIN` will keep employees visible even when `department_id` isn’t set yet. To see department names, edit the employee and paste the UUID of the correct department into `department_id`.
+
+`LEFT JOIN` will keep employees visible even when `department_id` isn’t set yet. To see department names, edit the employee and paste the UUID of the
+correct department into `department_id`.
+
 :::
 
 ## This flexibility means you can build relational structures that Refine AI (or any frontend) can use directly.

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/assets/integration-icons/entrefine.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import * as React from "react";
 import type { SVGProps } from "react";
 
@@ -9,22 +10,20 @@ const SvgEntRefine = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 48 48"
     fill="none"
     {...props}
+    className={clsx("text-gray-1000 dark:text-gray-0", props.className)}
   >
     <path
       fill="currentColor"
-      className="text-gray-1000 dark:text-gray-0"
       d="M31.086 8.457v8.624h-1.08V9.537H1.08v28.926h28.926V30.92h1.08v8.624H0V8.457h31.086Z"
     />
     <path
       fill="currentColor"
-      className="text-gray-1000 dark:text-gray-0"
       fillRule="evenodd"
       d="M11.165 28.876c.708.742 1.627 1.113 2.756 1.113 1.395 0 2.442-.536 3.14-1.608l-.87-.678c-.261.338-.566.61-.915.817-.349.204-.775.306-1.28.306-.708 0-1.291-.253-1.75-.757-.46-.507-.7-1.17-.718-1.99h5.64v-.592c0-1.33-.3-2.352-.898-3.065-.602-.713-1.444-1.069-2.526-1.069a3.34 3.34 0 0 0-1.844.549 3.697 3.697 0 0 0-1.325 1.526c-.315.647-.473 1.384-.473 2.21v.262c0 1.242.355 2.234 1.063 2.976Zm1.132-5.726a1.896 1.896 0 0 1 1.447-.627c.595 0 1.067.199 1.416.596.349.397.544.957.586 1.68v.108h-4.174c.092-.753.334-1.338.725-1.757Z"
       clipRule="evenodd"
     />
     <path
       fill="currentColor"
-      className="text-gray-1000 dark:text-gray-0"
       d="M20.163 21.505h-1.35v8.33h1.426V23.9c.195-.402.468-.725.817-.971a2.059 2.059 0 0 1 1.217-.37c.57 0 .989.145 1.258.433.269.286.405.73.41 1.33v5.511h1.425V24.33c-.015-1.984-.903-2.976-2.665-2.976-1.025 0-1.857.4-2.494 1.198l-.044-1.046ZM29.445 19.49H28.02v2.015h-1.516v1.103h1.516v5.165c0 .708.162 1.254.486 1.639.323.385.803.577 1.438.577.355 0 .72-.052 1.094-.155V28.68c-.288.061-.514.092-.678.092-.332 0-.568-.083-.707-.25-.138-.167-.208-.417-.208-.75v-5.164H31v-1.104h-1.555V19.49ZM34.985 25.979l2.904 3.855h1.67l-3.619-4.849 3.241-3.48h-1.73l-2.595 2.742-.763.915v-7.15H32.67v11.822h1.422V26.91l.892-.93ZM42.199 29.834v-8.33h-1.425v8.33h1.425ZM40.871 18.711a.848.848 0 0 0-.214.587c0 .23.071.423.214.577.141.153.35.23.628.23.275 0 .485-.077.63-.23a.813.813 0 0 0 .215-.578.848.848 0 0 0-.215-.586c-.145-.16-.355-.24-.63-.24-.278 0-.487.08-.628.24ZM46.408 19.49h-1.425v2.015h-1.517v1.103h1.517v5.165c0 .708.162 1.254.485 1.639.324.385.804.577 1.441.577.353 0 .717-.052 1.091-.155V28.68c-.286.061-.512.092-.678.092-.332 0-.567-.083-.706-.25-.139-.167-.208-.417-.208-.75v-5.164h1.554v-1.104h-1.554V19.49Z"
     />
   </svg>

documentation/src/assets/integration-icons/headless.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import * as React from "react";
 import type { SVGProps } from "react";
 
@@ -12,9 +13,12 @@ const SvgHeadless = ({
     viewBox="0 0 48 48"
     fill="none"
     {...props}
+    className={clsx(
+      withBrandColor ? "text-gray-800 dark:text-gray-0" : "inherit",
+      props.className,
+    )}
   >
     <path
-      className={withBrandColor ? "text-gray-800 dark:text-gray-0" : "inherit"}
       fill="currentColor"
       d="M35.828 9.723a5.008 5.008 0 0 1-.818 4.29l.006.003-8.426 12.441a10.947 10.947 0 0 0-6.803-3.925l6.57-13.51.006.003a5.026 5.026 0 0 1 9.465.698ZM18.826 26.295a6.482 6.482 0 0 1 4.983 2.874c.531.801.892 1.74 1.017 2.78a6.43 6.43 0 0 1-3.861 6.683L13.073 42l-1.027-8.513a6.43 6.43 0 0 1 3.862-6.683 6.406 6.406 0 0 1 2.918-.51ZM38.586 16.586a2 2 0 0 0 0 2.828L43.172 24l-4.586 4.586a2 2 0 1 0 2.828 2.828l6-6a2 2 0 0 0 0-2.828l-6-6a2 2 0 0 0-2.828 0ZM9.414 19.414a2 2 0 1 0-2.828-2.828l-6 6a2 2 0 0 0 0 2.828l6 6a2 2 0 1 0 2.828-2.828L4.828 24l4.586-4.586Z"
     />

documentation/src/assets/integration-icons/rest-without-text.tsx

@@ -13,7 +13,7 @@ const SvgRestWithoutText = ({
     viewBox="0 0 16 14"
     fill="none"
     {...props}
-    className={clsx("dark:text-gray-100 text-[#273646]", className)}
+    className={clsx("text-zinc-500 dark:text-white", className)}
   >
     <path
       fill="currentColor"

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

@@ -9,15 +9,18 @@ import {
   LinkedinShareButton,
   RedditShareButton,
   TwitterShareButton,
-  RedditIcon,
-  LinkedinIcon,
 } from "react-share";
 import clsx from "clsx";
 
 import { Date, ReadingTime } from "@site/src/components/blog/common";
 import { BannerRandom } from "@site/src/components/banner/banner-random";
 
-import { ChevronLeft, Twitter } from "../icons";
+import {
+  ChevronLeftCircle,
+  RedditIcon,
+  TwitterIcon,
+  LinkedinIcon,
+} from "../icons";
 
 export const BlogPostPageView = ({ children }) => {
   const { metadata, isBlogPostPage } = useBlogPost();
@@ -62,18 +65,20 @@ export const BlogPostPageView = ({ children }) => {
         <Link
           to="/blog"
           className={clsx(
-            "text-refine-react-5 dark:text-refine-react-4",
-            "text-sm no-underline",
+            "text-zinc-400",
+            "hover:text-white",
+            "no-underline",
             "flex",
             "items-center",
             "gap-2",
           )}
         >
-          <ChevronLeft /> Back to blog
+          <ChevronLeftCircle />
+          <span className={clsx("text-xs", "font-medium")}>Back to blog</span>
         </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">
-            Share on
+        <div className="flex items-center gap-2 px-2 py-1 not-prose">
+          <span className="text-zinc-400 text-xs tracking-[-0.06em] font-medium mr-2">
+            Share on:
           </span>
           <TwitterShareButton
             windowWidth={750}
@@ -83,7 +88,20 @@ export const BlogPostPageView = ({ children }) => {
             title={title}
             hashtags={tags.map((tag) => tag.label)}
           >
-            <Twitter width={24} height={24} />
+            <div
+              className={clsx(
+                "w-8",
+                "h-8",
+                "bg-zinc-800",
+                "rounded-[0.25rem]",
+                "flex",
+                "items-center",
+                "justify-center",
+                "hover:bg-zinc-700",
+              )}
+            >
+              <TwitterIcon />
+            </div>
           </TwitterShareButton>
           <RedditShareButton
             className="flex"
@@ -92,7 +110,20 @@ export const BlogPostPageView = ({ children }) => {
             url={url + permalink}
             title={title}
           >
-            <RedditIcon size={24} round />
+            <div
+              className={clsx(
+                "w-8",
+                "h-8",
+                "bg-zinc-800",
+                "rounded-[0.25rem]",
+                "flex",
+                "items-center",
+                "justify-center",
+                "hover:bg-zinc-700",
+              )}
+            >
+              <RedditIcon />
+            </div>
           </RedditShareButton>
           <LinkedinShareButton
             url={url + permalink}
@@ -101,7 +132,20 @@ export const BlogPostPageView = ({ children }) => {
             summary={description}
             className="flex"
           >
-            <LinkedinIcon size={24} round />
+            <div
+              className={clsx(
+                "w-8",
+                "h-8",
+                "bg-zinc-800",
+                "rounded-[0.25rem]",
+                "flex",
+                "items-center",
+                "justify-center",
+                "hover:bg-zinc-700",
+              )}
+            >
+              <LinkedinIcon size={24} round />
+            </div>
           </LinkedinShareButton>
         </div>
       </div>
@@ -119,14 +163,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-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-400 " />
                 <ReadingTime readingTime={readingTime} />
               </>
             )}

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

@@ -19,11 +19,11 @@ export const FeaturedBlogPostItem = () => {
   } = metadata;
 
   return (
-    <BlogPostItemContainer>
+    <BlogPostItemContainer className={clsx("bg-zinc-800", "p-4", "rounded-xl")}>
       <Link
         itemProp="url"
         to={permalink}
-        className={clsx("block", "w-full h-auto", "aspect-[592/334]")}
+        className={clsx("block", "w-full h-auto", "aspect-[363/208]")}
       >
         <div
           className={clsx(
@@ -38,30 +38,42 @@ export const FeaturedBlogPostItem = () => {
             )}?h=668`}
             alt={title}
             className={clsx(
-              "absolute inset-0 mt-0 h-full w-full rounded-[10px] object-cover",
+              "absolute inset-0 mt-0 h-full w-full rounded-[0.25rem] object-cover",
             )}
             loading="lazy"
           />
         </div>
       </Link>
-      <div className="px-4 py-4 md:px-6  md:py-6">
-        <div className={clsx("flex flex-wrap items-center", "mb-6", "gap-3")}>
-          {tags.map((tag) => (
-            <Link
-              className={clsx(
-                "text-xs",
-                "bg-refine-react-3 dark:bg-refine-react-7",
-                "text-refine-react-8 dark:text-refine-react-3",
-                "no-underline",
-                "rounded-full",
-                "px-2 py-1",
-              )}
-              href={tag.permalink}
-              key={tag.permalink}
-            >
-              {tag.label}
-            </Link>
-          ))}
+      <div className="px-4 py-4">
+        <div className={clsx("flex flex-wrap items-center", "mb-6", "gap-2")}>
+          {tags.map((tag) => {
+            const shouldUppercase = tag.label.length <= 3;
+            const isRefineTag =
+              tag.label.toLowerCase() === "refine" ||
+              tag.label.toLowerCase() === "refine-core" ||
+              "refine core";
+
+            return (
+              <Link
+                className={clsx(
+                  shouldUppercase && "uppercase",
+                  isRefineTag && "capitalize",
+                  "text-xs",
+                  "font-medium",
+                  "text-white",
+                  "bg-zinc-700",
+                  "no-underline",
+                  "rounded-sm",
+                  "px-1.5 py-1",
+                  "tracking-[-0.06em]",
+                )}
+                href={tag.permalink}
+                key={tag.permalink}
+              >
+                {tag.label}
+              </Link>
+            );
+          })}
         </div>
         <div className="mb-4">
           <Link
@@ -73,10 +85,10 @@ export const FeaturedBlogPostItem = () => {
             <div
               className={clsx(
                 "mb-4",
-                "text-gray-700 dark:text-refine-react-3",
-                "text-xl",
-                "font-lg",
-                "font-bold",
+                "text-white",
+                "text-base",
+                "font-medium",
+                "tracking-[-0.04em]",
               )}
             >
               {title}
@@ -85,8 +97,9 @@ export const FeaturedBlogPostItem = () => {
           <div
             className={clsx(
               "line-clamp-3",
-              "text-gray-700 dark:text-refine-react-4",
+              "text-zinc-400",
               "text-sm",
+              "tracking-[-0.07em]",
             )}
           >
             {description}
@@ -96,7 +109,7 @@ export const FeaturedBlogPostItem = () => {
         <div className="flex items-center gap-2">
           <span
             className={clsx(
-              "text-gray-600 dark:text-refine-react-5",
+              "text-zinc-400",
               "text-xs",
               "leading-6",
               "no-underline",