feat(landing): hover logo node glowing (#973)

apps/docs/theme/components/logo/index.less

@@ -15,8 +15,9 @@
     top: 0;
     right: 0;
     width: 100%;
-    height: 200px;
+    height: 300px;
     margin-bottom: 20px;
+    pointer-events: none;
   }
 
   // Tablet responsive: adjust size and position
@@ -74,3 +75,30 @@
 .gedit-playground-scroll-bottom-block {
   display: none;
 }
+
+
+.flowgram-logo-node {
+  width: 60px;
+  min-height: 150px;
+  height: auto;
+  border-radius: 16px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+  padding: 12px;
+  cursor: move;
+  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
+
+  &:hover {
+    box-shadow:
+      0 2px 6px 0 rgba(0, 0, 0, 0.04),
+      0 4px 12px 0 rgba(0, 0, 0, 0.02),
+      0 0 16px 2px rgba(var(--glow-color, 59, 130, 246), 0.6),
+      0 0 32px 6px rgba(var(--glow-color, 59, 130, 246), 0.4),
+      0 0 48px 12px rgba(var(--glow-color, 59, 130, 246), 0.25),
+      0 0 64px 16px rgba(var(--glow-color, 59, 130, 246), 0.15);
+    transform: scale(1.05);
+  }
+}

apps/docs/theme/components/logo/node-color.ts

@@ -11,8 +11,15 @@ export const NodeColorMap: Record<string, string> = {
 };
 
 export const NodeBorderColorMap: Record<string, string> = {
-  '1': '#294685',
-  '2': '#365f99',
-  '3': '#39959c',
-  '4': '#599e99',
+  '1': '#355397',
+  '2': '#426ca7',
+  '3': '#46a6ac',
+  '4': '#7cbab6',
+};
+
+export const NodeGlowColorMap: Record<string, string> = {
+  '1': '141, 178, 254',
+  '2': '145, 190, 254',
+  '3': '155, 248, 254',
+  '4': '191, 255, 250',
 };

apps/docs/theme/components/logo/node-render.tsx

@@ -12,29 +12,24 @@ import {
 } from '@flowgram.ai/free-layout-editor';
 
 import { PortRender } from './port';
-import { NodeBorderColorMap, NodeColorMap } from './node-color';
+import { NodeBorderColorMap, NodeColorMap, NodeGlowColorMap } from './node-color';
 
 export const NodeRender = (props: WorkflowNodeProps) => {
   const { selected, node, ports } = useNodeRender();
   const nodeColor = NodeColorMap[node.id] ?? '#fff';
   const borderColor = NodeBorderColorMap[node.id] ?? '#fff';
+  const glowColor = NodeGlowColorMap[node.id] ?? '59, 130, 246';
+
   return (
     <WorkflowNodeRenderer
-      style={{
-        width: 60,
-        minHeight: 150,
-        height: 'auto',
-        background: nodeColor,
-        border: selected ? `2px solid ${borderColor}` : `2px solid ${nodeColor}`,
-        borderRadius: 16,
-        boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02)',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        position: 'relative',
-        padding: 12,
-        cursor: 'move',
-      }}
+      className="flowgram-logo-node"
+      style={
+        {
+          background: nodeColor,
+          border: selected ? `2px solid ${borderColor}` : `2px solid ${nodeColor}`,
+          '--glow-color': glowColor,
+        } as React.CSSProperties & { '--glow-color': string }
+      }
       portStyle={{
         display: 'none',
       }}

apps/docs/theme/components/logo/position-groups.ts

@@ -72,7 +72,7 @@ export const positionGroups: PositionGroup[] = [
   // 弧形形态
   {
     '1': {
-      x: 50,
+      x: 40,
       y: -30,
     },
     '2': {
@@ -80,11 +80,11 @@ export const positionGroups: PositionGroup[] = [
       y: -50,
     },
     '3': {
-      x: 190,
+      x: 200,
       y: -50,
     },
     '4': {
-      x: 260,
+      x: 280,
       y: -30,
     },
   },

apps/docs/theme/index.tsx

@@ -14,6 +14,7 @@ import { Background } from './components/background';
 
 import './theme.css';
 import { FlowGramLogo } from './components/logo';
+import { useIsMobile } from './use-is-mobile';
 
 function getCustomMDXComponent() {
   const { h1: H1, ...components } = basicGetCustomMDXComponent();
@@ -35,12 +36,13 @@ function getCustomMDXComponent() {
 
 function HomeLayout(props: Parameters<typeof BaseHomeLayout>[0]) {
   const isDark = useDark();
+  const isMobile = useIsMobile();
 
   return (
     <>
       <div className="home-layout-container">
         <NoSSR>
-          {isDark && <Background />}
+          {isDark && !isMobile && <Background />}
           <FlowGramLogo />
         </NoSSR>
         <BaseHomeLayout {...props} afterHero={null} afterHeroActions={null} />

apps/docs/theme/use-is-mobile.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useState, useEffect } from 'react';
+
+export const useIsMobile = (): boolean => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const checkIsMobile = (): boolean =>
+      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+    setIsMobile(checkIsMobile());
+  }, []);
+
+  return isMobile;
+};