feat(landing): add footer

groupher · Dec 26, 2023 · c3c6bf0 · c3c6bf0
1 parent 4927545
commit c3c6bf0
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 19 deletions.
diff --git a/src/app/Landing/EnjoyDev/HighWay/index.tsx b/src/app/Landing/EnjoyDev/HighWay/index.tsx
@@ -19,7 +19,7 @@ const HighWay: FC = () => {
       <ConnectLine />
       <Block text="上线没人用" type="online" />
       <ConnectLine />
-      <Block text="放弃" type="giveup" />
+      <Block text="扑街" type="giveup" />
     </Wrapper>
   )
 }

diff --git a/src/app/Landing/EnjoyDev/index.tsx b/src/app/Landing/EnjoyDev/index.tsx
@@ -37,7 +37,7 @@ const EnjoyDev: FC = () => {
   return (
     <Wrapper>
       <Slogan>
-        <Tips>Hey, Tips !</Tips>
+        <Tips>Secret Tip !</Tips>
         <Title>
           上线、<GradientText wallpaper={wallpaper}>获取反馈</GradientText>、迭代
         </Title>

diff --git a/src/app/Landing/Footer/index.tsx b/src/app/Landing/Footer/index.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+
+import Button from '@/widgets/Buttons/Button'
+import { Wrapper, Logo, Title, Desc, Highlight, Buttons } from '../styles/footer'
+
+const Footer: FC = () => {
+  return (
+    <Wrapper>
+      <Logo src="groupher-alpha.png" />
+
+      <Title>节省您的宝贵时间</Title>
+      <Desc>
+        你只需专注于产品的<Highlight>核心功能</Highlight>，将周边的「<Highlight>杂活儿</Highlight>
+        」交给 Groupher
+      </Desc>
+      <Buttons>
+        <Button size="medium">创建我的社区</Button>
+        <Button size="medium" ghost>
+          预约演示
+        </Button>
+      </Buttons>
+    </Wrapper>
+  )
+}
+
+export default Footer
diff --git a/src/app/Landing/TechStacks/StackCard.tsx b/src/app/Landing/TechStacks/StackCard.tsx
@@ -31,7 +31,7 @@ const StackCard: FC = () => {
         </Topping>
 
         <Title>我们的主要技术栈</Title>
-        <Desc>现代化的产品体验得益于现代化的技术栈及工具，这里列出部分主要工具，略表敬意。</Desc>
+        <Desc>现代化的产品体验得益于现代化的技术栈及工具，这里列出主要部分，特表敬意。</Desc>
       </Banner>
       <TechsWrapper>
         <TechItem path="elixir.png" name="Elixir" size={34} />

diff --git a/src/app/Landing/TechStacks/index.tsx b/src/app/Landing/TechStacks/index.tsx
@@ -9,7 +9,7 @@ const TeckStacks: FC = () => {
   return (
     <Wrapper>
       <Slogan>
-        <Title>源码开放，诚邀共建</Title>
+        <Title>开源项目，诚邀共建</Title>
         <Desc>由开源技术栈驱动，开放透明，期待您的共同参与</Desc>
       </Slogan>
       <Wall>

diff --git a/src/app/Landing/index.tsx b/src/app/Landing/index.tsx
@@ -27,6 +27,7 @@ import TechStacks from './TechStacks'
 import DashboardIntros from './DashboardIntros'
 import EnjoyDev from './EnjoyDev'
 import UsersWall from './UsersWall'
+import Footer from './Footer'
 
 import {
   Wrapper,
@@ -149,14 +150,14 @@ const LandingPage: FC = () => {
         </MobileOnly>
         <UsersWall wallpaper={wallpaper} />
         <DesktopOnly>
-          <Divider top={60} bottom={60} />
+          <Divider top={60} bottom={80} />
         </DesktopOnly>
-        <MobileOnly>
-          <Divider top={50} bottom={50} />
-        </MobileOnly>
         <FAQWrapper>
           <FaqList layout={DOC_FAQ_LAYOUT.FLAT} large sections={faqs} />
         </FAQWrapper>
+        <Divider top={60} bottom={80} />
+
+        <Footer />
       </Wrapper>
     </ParallaxProvider>
   )

diff --git a/src/app/Landing/styles/articles_intro_tabs/changelog_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/changelog_tab/intro_digest.ts
@@ -14,8 +14,7 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
 `
 export const Digest = styled.div`
   color: ${theme('hint')};
-  opacity: 0.9;
-  line-height: 28px;
+  line-height: 1.68em;
   width: 300px;
   margin-top: -100px;
   margin-bottom: 30px;

diff --git a/src/app/Landing/styles/articles_intro_tabs/discuss_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/discuss_tab/intro_digest.ts
@@ -14,8 +14,7 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
 `
 export const Digest = styled.div`
   color: ${theme('hint')};
-  opacity: 0.9;
-  line-height: 28px;
+  line-height: 1.68em;
   width: 300px;
   margin-top: -40px;
   margin-bottom: 30px;

diff --git a/src/app/Landing/styles/articles_intro_tabs/help_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/help_tab/intro_digest.ts
@@ -20,8 +20,7 @@ export const Wrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
 
 export const Digest = styled.div`
   color: ${theme('hint')};
-  opacity: 0.9;
-  line-height: 28px;
+  line-height: 1.68em;
   width: 300px;
   margin-top: -40px;
   margin-bottom: 16px;

diff --git a/src/app/Landing/styles/articles_intro_tabs/kanban_tab/intro_digest.ts b/src/app/Landing/styles/articles_intro_tabs/kanban_tab/intro_digest.ts
@@ -13,7 +13,6 @@ export const Digest = styled.div`
   font-size: 18px;
   color: ${theme('hint')};
   margin-bottom: 20px;
-  opacity: 0.9;
   margin-top: 10px;
   margin-left: 76px;
 `

diff --git a/src/app/Landing/styles/footer/index.ts b/src/app/Landing/styles/footer/index.ts
@@ -0,0 +1,37 @@
+import styled, { css, theme } from '@/css'
+import Img from '@/Img'
+
+export const Wrapper = styled.div`
+  ${css.column('align-both')};
+  width: 100%;
+`
+export const Logo = styled(Img)`
+  ${css.size(58)};
+  margin-bottom: 18px;
+`
+export const Title = styled.div`
+  color: ${theme('article.title')};
+  font-size: 28px;
+  font-weight: 500;
+
+  text-shadow: rgb(0 0 0 / 8%) 0px 10px 20px;
+  opacity: 0.9;
+`
+export const Desc = styled.div`
+  ${css.row('align-center')};
+  font-size: 18px;
+  color: ${theme('hint')};
+  margin-top: 12px;
+  margin-bottom: 38px;
+`
+export const Highlight = styled.span`
+  color: ${theme('article.title')};
+  margin-left: 1px;
+  margin-right: 1px;
+  font-weight: 500;
+`
+export const Buttons = styled.div`
+  ${css.row('align-center')};
+  gap: 0 18px;
+  margin-bottom: 25px;
+`
diff --git a/src/app/Landing/styles/tech_stacks/github_card.ts b/src/app/Landing/styles/tech_stacks/github_card.ts
@@ -63,8 +63,9 @@ export const Puzzle3Icon = styled(PuzzleFrame)`
   z-index: 2;
   opacity: 0.15;
 `
-
-export const Banner = styled.div``
+export const Banner = styled.div`
+  margin-left: 4px;
+`
 export const Title = styled.div`
   font-size: 20px;
   color: #e0e0e0;
@@ -73,11 +74,13 @@ export const Title = styled.div`
 export const Desc = styled.div`
   color: #ababab;
   font-size: 15px;
+  line-height: 25px;
   margin-top: 3px;
 `
 export const Topping = styled.div`
   ${css.row('align-center')};
   margin-bottom: 5px;
+  margin-left: 1px;
 `
 export const GithubIcon = styled(GithubSVG)<{ wallpaper: string }>`
   ${css.size(15)};

diff --git a/src/app/Landing/styles/tech_stacks/stack_card.ts b/src/app/Landing/styles/tech_stacks/stack_card.ts
@@ -13,9 +13,9 @@ export const Wrapper = styled.div`
   position: relative;
 `
 export const Banner = styled.div`
-  margin-left: 42px;
+  margin-left: 44px;
   margin-top: 38px;
-  width: 86%;
+  width: 84%;
 `
 export const Title = styled.div`
   font-size: 22px;
@@ -26,6 +26,7 @@ export const Title = styled.div`
 export const Desc = styled.div`
   color: ${theme('article.digest')};
   font-size: 16px;
+  line-height: 26px;
   margin-top: 5px;
 `
 export const TechsWrapper = styled.div`