refactor(landing): intro tabs & feature wall cards enhance (#200)

* refactor(landing): feat cards theme & text size adjust * refactor(landing): design card * refactor(landing): wip * refactor(landing): Mr.tony * refactor(landing): add dot for design * refactor(landing): cursor color for design * refactor(landing): ananlysis card makes good * refactor(landing): wip * refactor(landing): star on dark mode * refactor(landing): header to security * refactor(landing): adjust design token card * refactor(landing): adjust wip * chore(deps): upgrade styled-components to latest * feat(landing): integrate card wip * feat(landing): integrate card done * fix(landing): intro tabs blink
groupher · Dec 22, 2023 · d2d6f00 · d2d6f00
1 parent 0bf5e48
commit d2d6f00
Show file tree

Hide file tree

Showing 69 changed files with 1,424 additions and 863 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
     "sonner": "^1.0.0",
     "store": "^2.0.12",
     "stringz": "^2.0.0",
-    "styled-components": "^6.1.1",
+    "styled-components": "^6.1.2",
     "stylis": "^4.3.0",
     "swr": "^2.2.4",
     "timeago-react": "^3.0.5",

diff --git a/src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroDigest.tsx b/src/app/Landing/ArticlesIntroTabs/ChangelogTab/IntroDigest.tsx
@@ -6,15 +6,15 @@ import IntroItems from './IntroItems'
 import {
   Wrapper,
   Digest,
-  Hightlight,
+  Highlight,
 } from '../../styles/articles_intro_tabs/changelog_tab/intro_digest'
 
 const IntroDigest: FC = () => {
   return (
     <Wrapper>
       <Digest>
-        官方团队发布更新日志，方便<Hightlight>用户</Hightlight>快速获取产品
-        <Hightlight>新功能</Hightlight>以及<Hightlight>Bug 修复</Hightlight>等。
+        官方团队发布，方便<Highlight>用户</Highlight>快速获取产品
+        <Highlight>新功能</Highlight>以及<Highlight>Bug 修复</Highlight>等。
       </Digest>
       <DesktopOnly>
         <IntroItems />

diff --git a/src/app/Landing/ArticlesIntroTabs/ChangelogTab/index.tsx b/src/app/Landing/ArticlesIntroTabs/ChangelogTab/index.tsx
@@ -1,13 +1,14 @@
 import { FC } from 'react'
 
+import { TActive } from '@/spec'
 import IntroDigest from './IntroDigest'
 import ChangelogDemo from './ChangelogDemo'
 
 import { Wrapper } from '../../styles/articles_intro_tabs/changelog_tab'
 
-const ChangelogFeat: FC = () => {
+const ChangelogFeat: FC<TActive> = ({ $active }) => {
   return (
-    <Wrapper>
+    <Wrapper $active={$active}>
       <IntroDigest />
       <ChangelogDemo />
     </Wrapper>

diff --git a/src/app/Landing/ArticlesIntroTabs/Content.tsx b/src/app/Landing/ArticlesIntroTabs/Content.tsx
@@ -14,38 +14,14 @@ type TProps = {
   tab: TThread
 }
 
+/** NOTE: do not use switch case here, otherwise the page will blink when switch between, image will re-request */
 const Content: FC<TProps> = ({ tab }) => {
-  let TabContent = null
-
-  switch (tab) {
-    case THREAD.POST: {
-      TabContent = DiscussTab
-      break
-    }
-
-    case THREAD.KANBAN: {
-      TabContent = KanbanTab
-      break
-    }
-
-    case THREAD.CHANGELOG: {
-      TabContent = ChangelogTab
-      break
-    }
-
-    case THREAD.DOC: {
-      TabContent = HelpTab
-      break
-    }
-
-    default: {
-      TabContent = DiscussTab
-    }
-  }
-
   return (
     <Wrapper tab={tab}>
-      <TabContent />
+      <DiscussTab $active={tab === THREAD.POST} />
+      <KanbanTab $active={tab === THREAD.KANBAN} />
+      <ChangelogTab $active={tab === THREAD.CHANGELOG} />
+      <HelpTab $active={tab === THREAD.DOC} />
     </Wrapper>
   )
 }

diff --git a/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx b/src/app/Landing/ArticlesIntroTabs/DiscussTab/IntroDigest.tsx
@@ -5,15 +5,15 @@ import IntroItems from './IntroItems'
 import {
   Wrapper,
   Digest,
-  Hightlight,
+  Highlight,
 } from '../../styles/articles_intro_tabs/discuss_tab/intro_digest'
 
 const IntroDigest: FC = () => {
   return (
     <Wrapper>
       <Digest>
-        完善简洁的论坛功能，满足<Hightlight>用户与团队</Hightlight>，
-        <Hightlight>用户与用户</Hightlight>间的互动交流。
+        完善的论坛功能，满足<Highlight>用户与团队</Highlight>，
+        <Highlight>用户与用户</Highlight>间的互动交流。
       </Digest>
 
       <IntroItems />

diff --git a/src/app/Landing/ArticlesIntroTabs/DiscussTab/index.tsx b/src/app/Landing/ArticlesIntroTabs/DiscussTab/index.tsx
@@ -1,14 +1,15 @@
 import { FC } from 'react'
 
-import DiscussDemo from './DiscussDemo'
+import { TActive } from '@/spec'
 
+import DiscussDemo from './DiscussDemo'
 import IntroDigest from './IntroDigest'
 
 import { Wrapper } from '../../styles/articles_intro_tabs/discuss_tab'
 
-const DiscussFeat: FC = () => {
+const DiscussFeat: FC<TActive> = ({ $active }) => {
   return (
-    <Wrapper>
+    <Wrapper $active={$active}>
       <IntroDigest />
       <DiscussDemo />
     </Wrapper>

diff --git a/src/app/Landing/ArticlesIntroTabs/HelpTab/IntroDigest.tsx b/src/app/Landing/ArticlesIntroTabs/HelpTab/IntroDigest.tsx
@@ -2,14 +2,14 @@ import { FC } from 'react'
 
 import IntroItems from './IntroItems'
 
-import { Wrapper, Digest, Hightlight } from '../../styles/articles_intro_tabs/help_tab/intro_digest'
+import { Wrapper, Digest, Highlight } from '../../styles/articles_intro_tabs/help_tab/intro_digest'
 
 const IntroDigest: FC = () => {
   return (
     <Wrapper>
       <Digest>
-        沉淀<Hightlight>常见问题</Hightlight>，<Hightlight>公共知识库</Hightlight>以及
-        <Hightlight>操作指南</Hightlight>等，快速解决用户疑惑。
+        沉淀<Highlight>常见问题</Highlight>，<Highlight>公共知识库</Highlight>以及
+        <Highlight>操作指南</Highlight>等，快速解决用户疑惑。
       </Digest>
 
       <IntroItems />

diff --git a/src/app/Landing/ArticlesIntroTabs/HelpTab/index.tsx b/src/app/Landing/ArticlesIntroTabs/HelpTab/index.tsx
@@ -1,17 +1,19 @@
 import { FC } from 'react'
 
+import type { TActive } from '@/spec'
+
 import IntroDigest from './IntroDigest'
 import HelpDemo from './HelpDemo'
 
 import { Wrapper } from '../../styles/articles_intro_tabs/help_tab'
 
-const KanbanFeat: FC = () => {
+const HelpFeat: FC<TActive> = ({ $active }) => {
   return (
-    <Wrapper>
+    <Wrapper $active={$active}>
       <IntroDigest />
       <HelpDemo />
     </Wrapper>
   )
 }
 
-export default KanbanFeat
+export default HelpFeat
diff --git a/src/app/Landing/ArticlesIntroTabs/KanbanTab/index.tsx b/src/app/Landing/ArticlesIntroTabs/KanbanTab/index.tsx
@@ -1,13 +1,14 @@
 import { FC } from 'react'
 
+import { TActive } from '@/spec'
 import IntroDigest from './IntroDigest'
 import IntroImage from './IntroImage'
 
 import { Wrapper } from '../../styles/articles_intro_tabs/kanban_tab'
 
-const KanbanFeat: FC = () => {
+const KanbanFeat: FC<TActive> = ({ $active }) => {
   return (
-    <Wrapper>
+    <Wrapper $active={$active}>
       <IntroDigest />
       <IntroImage />
     </Wrapper>

diff --git a/src/app/Landing/FeatureWall/DarkMode/index.tsx b/src/app/Landing/FeatureWall/DarkMode/index.tsx
@@ -5,15 +5,28 @@ import useHover from '@/hooks/useHover'
 import useTheme from '@/hooks/useTheme'
 
 import Panel from './Panel'
-import { Wrapper, Footer, Title, Desc } from '../../styles/feature_wall/dark_mode'
+
+import {
+  Wrapper,
+  InnerWrapper,
+  StarIcon,
+  StarIcon2,
+  Footer,
+  Title,
+  Desc,
+} from '../../styles/feature_wall/dark_mode'
 
 const DarkMode: FC = () => {
   const { switchTheme } = useTheme()
 
   const [ref, isHovered] = useHover<HTMLDivElement>()
 
   return (
-    <Wrapper ref={ref} onClick={() => switchTheme()} $color={COLOR_NAME.PINK}>
+    <Wrapper ref={ref} onClick={() => switchTheme()} $color={COLOR_NAME.CYAN}>
+      <InnerWrapper $color={COLOR_NAME.CYAN} $hovering={isHovered} />
+      {isHovered && <StarIcon />}
+      {isHovered && <StarIcon2 />}
+
       <Panel hovering={isHovered} />
       <Footer>
         <Title>暗黑模式</Title>

diff --git a/src/app/Landing/FeatureWall/Design/Panel.tsx b/src/app/Landing/FeatureWall/Design/Panel.tsx
@@ -0,0 +1,79 @@
+import { FC } from 'react'
+
+import useWallpaper from '@/hooks/useWallpaper'
+
+import {
+  Wrapper,
+  GridMask,
+  CavansBlock,
+  CursorIcon,
+  CursorText,
+  MainTextGradient,
+  MainText,
+  Line,
+  IndexBar,
+  LeftIndexText,
+  IndexRowBar,
+  IndexText,
+  BottomIndexBar,
+  Column,
+  LocateDot,
+} from '../../styles/feature_wall/design/panel'
+
+type TProps = {
+  hovering: boolean
+}
+
+const Panel: FC<TProps> = ({ hovering }) => {
+  const { wallpaper } = useWallpaper()
+
+  const stickOpacity = hovering ? 1 : 0.4
+  const textOpacity = hovering ? 1 : 0.8
+  const rotate = hovering ? -1 : -4
+
+  return (
+    <Wrapper>
+      <Line top={10} left={0} $hovering={hovering} $rotate={rotate} />
+      <Line top={160} left={0} $hovering={hovering} $rotate={rotate} />
+      <Column top={0} left={10} $hovering={hovering} $rotate={rotate} />
+      <LocateDot top={hovering ? 160 : 18} left={hovering ? 18 : 11} $rotate={rotate} />
+      <LocateDot top={hovering ? 10 : 168} left={hovering ? 15 : 21} $rotate={rotate} />
+
+      <CavansBlock right={-10} top={20} $rotate={rotate}>
+        <CursorIcon top={hovering ? 30 : 15} right={hovering ? 40 : 50} wallpaper={wallpaper} />
+        <CursorText top={hovering ? 48 : 34} right={hovering ? 20 : 30} wallpaper={wallpaper}>
+          Mr. Tony
+        </CursorText>
+
+        <LeftIndexText top={72} left={5} $opacity={textOpacity}>
+          wechat:
+        </LeftIndexText>
+
+        <IndexRowBar top={80} left={38} width={18} $opacity={stickOpacity} />
+
+        <IndexBar top={34} left={70} height={26} $opacity={stickOpacity} />
+        <IndexText top={15} left={58} $opacity={textOpacity}>
+          Xie
+        </IndexText>
+
+        <IndexBar top={48} left={126} height={14} $opacity={stickOpacity} />
+        <IndexText top={28} left={107} $opacity={textOpacity}>
+          Yimian
+        </IndexText>
+
+        {hovering && <MainTextGradient wallpaper={wallpaper}>design</MainTextGradient>}
+        {!hovering && <MainText>design</MainText>}
+
+        <BottomIndexBar bottom={36} $opacity={hovering ? 0.8 : 0.4} />
+
+        <IndexText bottom={31} left={110} $opacity={textOpacity}>
+          1988 px
+        </IndexText>
+
+        <GridMask />
+      </CavansBlock>
+    </Wrapper>
+  )
+}
+
+export default Panel
diff --git a/src/app/Landing/FeatureWall/Design/index.tsx b/src/app/Landing/FeatureWall/Design/index.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react'
+
+import { COLOR_NAME } from '@/constant/colors'
+import useHover from '@/hooks/useHover'
+
+import Panel from './Panel'
+import { Wrapper, Footer, Title, Desc } from '../../styles/feature_wall/design'
+
+const Design: FC = () => {
+  const [cardRef, isCardHovered] = useHover<HTMLDivElement>()
+
+  return (
+    <Wrapper ref={cardRef} $color={COLOR_NAME.BLACK}>
+      <Panel hovering={isCardHovered} />
+      <Footer>
+        <Title>默认好看</Title>
+        <Desc>走心设计团队，丰富自定义细节，为您的产品生态添砖加瓦。</Desc>
+      </Footer>
+    </Wrapper>
+  )
+}
+
+export default Design
diff --git a/src/app/Landing/FeatureWall/Integration/EmbedScript.tsx b/src/app/Landing/FeatureWall/Integration/EmbedScript.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react'
+
+import { COLOR_NAME } from '@/constant/colors'
+import { Brick } from '@/widgets/Common'
+
+import {
+  Codes,
+  TerminalIcon,
+  BlickCursor,
+  Highlight,
+} from '../../styles/feature_wall/integration/embed_script'
+
+const EmbedScript: FC = () => {
+  return (
+    <>
+      <Brick
+        $width={215}
+        $height={20}
+        $radius={4}
+        $opacity={0.1}
+        bottom={10}
+        left={18}
+        $color={COLOR_NAME.ORANGE}
+      />
+
+      <TerminalIcon />
+      <BlickCursor bottom={14} right={29} />
+
+      <Codes bottom={12} left={40}>
+        script: groupher/<Highlight $color={COLOR_NAME.BLACK}>embed</Highlight>?id=
+        <Highlight $color={COLOR_NAME.RED}>your-site</Highlight>
+      </Codes>
+    </>
+  )
+}
+
+export default EmbedScript
diff --git a/src/app/Landing/FeatureWall/Integration/Header.tsx b/src/app/Landing/FeatureWall/Integration/Header.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react'
+
+import { Brick } from '@/widgets/Common'
+import { Wrapper, Dot } from '../../styles/feature_wall/integration/header'
+
+const Header: FC = () => {
+  const top = 6
+
+  return (
+    <Wrapper top={5} left={0}>
+      <Dot left={10} top={top} />
+      <Dot left={20} top={top} />
+      <Dot left={30} top={top} />
+
+      <Brick $opacity={0.08} left={80} $width={90} $height={6} top={top - 1} />
+      <Brick $opacity={0.06} right={15} $width={18} $height={4} top={top} />
+    </Wrapper>
+  )
+}
+
+export default Header