feat: add Refine AI landing page (#6744)

Co-authored-by: Batuhan Wilhelm <batuhanwilhelm@gmail.com>

Author: alicanerdurmaz

.cursorignore

@@ -7,7 +7,6 @@ documentation/.docusaurus/
 documentation/build/
 documentation/node_modules/
 documentation/plugins/
-documentation/src/
 documentation/static/
 documentation/test/
 documentation/versioned_docs/

.github/workflows/documentation.yml

@@ -37,7 +37,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: ${{ github.ref == 'refs/heads/main' && 500 || 1 }}
       - uses: pnpm/action-setup@v3
         with:
           version: 9

documentation/src/components/banner/banner-examples.tsx

@@ -14,11 +14,11 @@ type Props = {
 };
 
 export const BannerExamples: FC<Props> = ({
-  title = "Open-source Retool alternative for enterprise",
-  description = "Build React-based internal tools, dashboards & B2B apps with unmatched flexibility",
+  title = "Refine AI is in closed beta!",
+  description = "The next-gen approach to build enterprise-ready React-based internal tools apps with the power of GenAI.",
   button = {
-    text: "Discover Refine",
-    href: "https://s.refine.dev/blog-retool?ref=banner-retool-alternative",
+    text: "Explore Refine AI",
+    href: "https://s.refine.dev/blog-banner-no-image?ref=banner-examples",
     onClick: undefined,
   },
 }) => {

documentation/src/components/banner/banner-image-with-text.tsx

@@ -29,7 +29,7 @@ export const BannerImageWithText: FC<Props> = ({
   variant = "purple",
   button = {
     text: "Learn more",
-    href: "https://refine.dev/",
+    href: "https://s.refine.dev/banner-with-image?ref=banner-image-with-text",
     onClick: undefined,
   },
   bannerName,

documentation/src/components/banner/banner-random.tsx

@@ -6,17 +6,17 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 const data = [
   {
     description:
-      "Refine is a React Framework used by over monthly 15K developers for building enterprise internal tools, dashboards, and B2B apps",
+      "The next-gen approach to build enterprise-ready React-based internal tools, admin panels, dashboards & B2B apps with the power of GenAI.",
     image: {
-      src: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/banner-tweet.jpg",
-      alt: "X tweet about Refine",
-      href: "https://s.refine.dev/blog-twitter?ref=banner-twitter",
+      src: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/banner-refine-ai.png",
+      alt: "Refine AI Image",
+      href: "https://s.refine.dev/banner-with-image?ref=refine-ai-banner",
     },
     button: {
-      text: "Learn more",
-      href: "https://s.refine.dev/blog-twitter?ref=banner-twitter",
+      text: "Join the waitlist",
+      href: "https://s.refine.dev/banner-join-waitlist?ref=banner-refine-ai-banner",
     },
-    bannerName: "banner-twitter",
+    bannerName: "banner-refine-ai",
   },
   /*    {
         title: "Save developer hours!",

documentation/src/components/banner/banner-sidebar.tsx

@@ -4,11 +4,11 @@ import { LandingRainbowButton } from "@site/src/refine-theme/landing-rainbow-but
 import clsx from "clsx";
 import React from "react";
 
-const text = "Struggling with internal tools?";
+const text = "Explore Refine AI";
 const description =
-  "Explore refine’s limitless possibilities in crafting CRUD apps, CRM solutions, HR dashboards, and more!";
+  "The next-gen approach to build enterprise-ready React-based internal tools with the power of GenAI.";
 const image =
-  "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/app-crm.png";
+  "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/banner-sidebar-refine-ai.png";
 
 export const BannerSidebar = ({ shouldShowBanner }) => {
   React.useEffect(() => {
@@ -40,7 +40,7 @@ export const BannerSidebar = ({ shouldShowBanner }) => {
       )}
     >
       <Link
-        to={"https://s.refine.dev/blog-sidebar?ref=banner-sidebar"}
+        to={"https://s.refine.dev/blog-sidebar-ai?ref=banner-sidebar"}
         target="_blank"
         rel="noopener noreferrer"
         className={clsx(
@@ -60,12 +60,12 @@ export const BannerSidebar = ({ shouldShowBanner }) => {
       <LandingRainbowButton
         className={clsx("w-max")}
         buttonClassname={clsx("!px-4", "!py-2")}
-        href={"https://s.refine.dev/blog-sidebar?ref=banner-sidebar"}
+        href={"https://s.refine.dev/blog-sidebar-ai?ref=banner-sidebar"}
         target="_blank"
         rel="noopener noreferrer"
       >
         <div className={clsx("text-gray-900", "text-base", "font-bold")}>
-          Try online
+          Learn more
         </div>
         <ArrowRightIcon className={clsx("ml-2", "w-4", "h-4")} />
       </LandingRainbowButton>

documentation/src/hooks/use-is-mobile.ts

@@ -1,14 +1,20 @@
 import { useEffect, useState } from "react";
 
-const getIsMobile = () =>
-  typeof window !== "undefined" ? window.innerWidth <= 768 : false;
+const getIsMobile = (breakpoint: number) =>
+  typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
 
-export default function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(getIsMobile());
+type UseIsMobileProps = {
+  breakpoint?: number;
+};
+
+export default function useIsMobile({
+  breakpoint = 768,
+}: UseIsMobileProps = {}) {
+  const [isMobile, setIsMobile] = useState(getIsMobile(breakpoint));
 
   useEffect(() => {
     const onResize = () => {
-      setIsMobile(getIsMobile());
+      setIsMobile(getIsMobile(breakpoint));
     };
 
     if (typeof window !== "undefined") {

documentation/src/hooks/use-tw-breakpoints.ts

@@ -2,27 +2,32 @@ import React from "react";
 
 /**
  * tailwindcss breakpoints
+ * xs: 360px
  * sm: 640px
  * md: 768px
  * lg: 1024px
  * xl: 1280px
  *
  * landing breakpoints
+ * xs: 360px
  * sm: 720px
  * md: 960px
  * lg: 1296px
  * xl: 1440px
  */
 const breakpoints = {
-  landing: [720, 960, 1296, 1440, 1584],
-  tw: [640, 768, 1024, 1280, 1536],
+  landing: [375, 720, 960, 1296, 1440, 1584],
+  tw: [360, 640, 768, 1024, 1280, 1536],
 };
 
 /**
  * check tailwindcss breakpoints with matchMedia and addEventListener
  */
 
-export type TWBreakpoints = Record<"sm" | "md" | "lg" | "xl" | "xxl", boolean>;
+export type TWBreakpoints = Record<
+  "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
+  boolean
+>;
 
 type Props = {
   variant: "landing" | "tw";
@@ -33,6 +38,7 @@ export const useTWBreakpoints = (
     variant: "tw",
   },
 ): TWBreakpoints => {
+  const [xs, setXs] = React.useState(true);
   const [sm, setSm] = React.useState(true);
   const [md, setMd] = React.useState(true);
   const [lg, setLg] = React.useState(true);
@@ -41,10 +47,14 @@ export const useTWBreakpoints = (
 
   React.useEffect(() => {
     if (typeof window !== "undefined") {
-      const [smQuery, mdQuery, lgQuery, xlQuery, xxlQuery] = breakpoints[
-        props.variant
-      ].map((bp) => window.matchMedia(`(min-width: ${bp}px)`));
+      const [xsQuery, smQuery, mdQuery, lgQuery, xlQuery, xxlQuery] =
+        breakpoints[props.variant].map((bp) =>
+          window.matchMedia(`(min-width: ${bp}px)`),
+        );
 
+      const xsHandler = (e: MediaQueryListEvent) => {
+        setXs(e.matches);
+      };
       const smHandler = (e: MediaQueryListEvent) => {
         setSm(e.matches);
       };
@@ -61,12 +71,14 @@ export const useTWBreakpoints = (
         setXxl(e.matches);
       };
 
+      xsQuery.addEventListener("change", xsHandler);
       smQuery.addEventListener("change", smHandler);
       mdQuery.addEventListener("change", mdHandler);
       lgQuery.addEventListener("change", lgHandler);
       xlQuery.addEventListener("change", xlHandler);
       xxlQuery.addEventListener("change", xxlHandler);
 
+      setXs(xsQuery.matches);
       setSm(smQuery.matches);
       setMd(mdQuery.matches);
       setLg(lgQuery.matches);
@@ -84,6 +96,7 @@ export const useTWBreakpoints = (
   }, []);
 
   return {
+    xs,
     sm,
     md,
     lg,