From 71ea76e94115c0576bce922aba6aec63c7f9ec65 Mon Sep 17 00:00:00 2001
From: Alican Erdurmaz <alicanerdurmaz@gmail.com>
Date: Thu, 16 Jan 2025 15:24:24 +0300
Subject: [PATCH] feat(docs): design updates

---
 .../src/refine-theme/common-header.tsx        |  4 +-
 .../src/refine-theme/landing-footer.tsx       |  2 +-
 .../src/refine-theme/top-announcement.tsx     | 89 ++++++++++---------
 3 files changed, 52 insertions(+), 43 deletions(-)

diff --git a/documentation/src/refine-theme/common-header.tsx b/documentation/src/refine-theme/common-header.tsx
index 3c802d39ac24..de56818d7c0d 100644
--- a/documentation/src/refine-theme/common-header.tsx
+++ b/documentation/src/refine-theme/common-header.tsx
@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { motion, useScroll, useTransform } from "framer-motion";
 import React, { useState } from "react";
 
-import { RefineLogoXmas } from "./icons/refine-logo xmas";
 import { HamburgerIcon } from "./icons/hamburger";
 
 import { openFigma } from "../utils/open-figma";
@@ -14,6 +13,7 @@ import { TopAnnouncement } from "./top-announcement";
 
 import { LandingGithubStarButton } from "./landing-github-star-button";
 import SearchBar from "../theme/SearchBar";
+import { RefineLogoIcon } from "./icons/refine-logo";
 
 type Props = {
   hasSticky?: boolean;
@@ -82,7 +82,7 @@ export const CommonHeader = ({
           >
             <div className={clsx("w-[130px]", "landing-lg:w-[200px]")}>
               <Link to="/" onContextMenu={openFigma}>
-                <RefineLogoXmas className="text-gray-900 dark:text-gray-0" />
+                <RefineLogoIcon className="text-gray-900 dark:text-gray-0" />
               </Link>
             </div>
             <button
diff --git a/documentation/src/refine-theme/landing-footer.tsx b/documentation/src/refine-theme/landing-footer.tsx
index 5768810d101a..ee5f85a5188a 100644
--- a/documentation/src/refine-theme/landing-footer.tsx
+++ b/documentation/src/refine-theme/landing-footer.tsx
@@ -334,7 +334,7 @@ export const LandingFooter = ({ variant = "landing" }: Props) => {
               "font-normal",
             )}
           >
-            {"© 2024, Refine from San Francisco to wherever you're with "}
+            {"© 2025, Refine from San Francisco to wherever you're with "}
             <HeartOutlinedIcon
               className={clsx("ml-1", "text-refine-red", "inline", "leading-5")}
             />
diff --git a/documentation/src/refine-theme/top-announcement.tsx b/documentation/src/refine-theme/top-announcement.tsx
index ea8edf7a0dbb..277b641b675b 100644
--- a/documentation/src/refine-theme/top-announcement.tsx
+++ b/documentation/src/refine-theme/top-announcement.tsx
@@ -1,49 +1,58 @@
 import clsx from "clsx";
-import React, { type SVGProps } from "react";
+import React from "react";
+import { useLocation } from "@docusaurus/router";
 
 export const TopAnnouncement = () => {
-  return (
-    <a
-      href="https://refine.dev/ai"
-      target="_blank"
-      rel="noopener noreferrer"
-      className={clsx(
-        "w-full",
-        "h-[48px]",
-        "relative",
-        "appearance-none",
-        "border-none",
-        "outline-none",
-        "cursor-pointer",
-        "flex items-center justify-center",
-      )}
-    >
-      <video
-        id="refine-ai-banner"
-        autoPlay
-        loop
-        muted
-        className="w-full h-[48px] object-cover"
-        poster="/assets/refine-ai-banner-bg.png"
-      >
-        <source
-          src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/refine-ai-banner.mp4"
-          type="video/mp4"
-        />
-      </video>
+  const location = useLocation();
+
+  if (location.pathname === "/ai") {
+    return null;
+  }
 
-      <img
-        src="/assets/refine-ai-banner-text.png"
-        alt="Refine AI"
+  return (
+    <div className="not-prose">
+      <a
+        href="https://refine.dev/ai"
+        target="_blank"
+        rel="noopener noreferrer"
         className={clsx(
-          "absolute",
+          "w-full",
           "h-[48px]",
-          "left-1/2",
-          "-translate-x-1/2",
-          "top-1/2",
-          "-translate-y-1/2",
+          "relative",
+          "appearance-none",
+          "border-none",
+          "outline-none",
+          "cursor-pointer",
+          "flex items-center justify-center",
         )}
-      />
-    </a>
+      >
+        <video
+          id="refine-ai-banner"
+          autoPlay
+          loop
+          muted
+          className="w-full h-[48px] object-cover"
+          poster="/assets/refine-ai-banner-bg.png"
+        >
+          <source
+            src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/refine-ai-banner.mp4"
+            type="video/mp4"
+          />
+        </video>
+
+        <img
+          src="/assets/refine-ai-banner-text.png"
+          alt="Refine AI"
+          className={clsx(
+            "absolute",
+            "h-[48px]",
+            "left-1/2",
+            "-translate-x-1/2",
+            "top-1/2",
+            "-translate-y-1/2",
+          )}
+        />
+      </a>
+    </div>
   );
 };