[FEATURE] import component from lodestar-app-element

config-overrides.js

@@ -1,8 +1,11 @@
-const { override, fixBabelImports, addLessLoader } = require('customize-cra')
+const { override, fixBabelImports, addLessLoader, removeModuleScopePlugin, babelInclude } = require('customize-cra')
+const path = require('path')
 const rewireReactHotLoader = require('react-app-rewire-hot-loader')
 const defaultThemeVars = require('./src/theme.json')
 
 module.exports = override(
+  removeModuleScopePlugin(),
+  babelInclude([path.resolve('src'), path.resolve('node_modules/lodestar-app-element/src')]),
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',

package.json

@@ -92,6 +92,7 @@
     "libphonenumber-js": "^1.9.7",
     "lint-staged": "^10.2.11",
     "lodash": "^4.17.15",
+    "lodestar-app-element": "urfit-tech/lodestar-app-element.git#master",
     "moment-timezone": "^0.5.31",
     "mustache": "^4.0.1",
     "node-sass": "^4.14.1",
@@ -145,4 +146,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/components/page/AccordionSection.tsx

@@ -0,0 +1,25 @@
+import Accordion from 'lodestar-app-element/src/components/Accordion'
+import React from 'react'
+import { SectionTitle, StyledSection } from '../../pages/AppPage'
+
+const AccordionSection: React.FC<{
+  options: {
+    title?: string
+    infos?: {
+      title: string
+      description: string
+    }[]
+  }
+}> = ({ options: { title, infos = [] } }) => {
+  return (
+    <StyledSection>
+      <div className="container">
+        <SectionTitle>{title}</SectionTitle>
+
+        <Accordion list={infos} />
+      </div>
+    </StyledSection>
+  )
+}
+
+export default AccordionSection

src/components/page/CTASection.tsx

@@ -0,0 +1,74 @@
+import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection'
+import Button from 'lodestar-app-element/src/components/Button'
+import HeadingSnippet from 'lodestar-app-element/src/components/HeadingSnippet'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styled, { css } from 'styled-components'
+
+const StyledContainer = styled.div<{ row: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${props =>
+    props.row &&
+    css`
+      @media (min-width: 768px) {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+    `}
+`
+
+const StyledDescription = styled.p<{ row: boolean }>`
+  font-family: NotoSansCJKtc;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.38;
+  color: #ffffff;
+  margin-top: 24px;
+  text-align: center;
+
+  ${props =>
+    props.row &&
+    css`
+      @media (min-width: 768px) {
+        text-align: left;
+      }
+    `}
+`
+
+const CTASection: React.FC<{
+  options: {
+    mode?: 'light' | 'dark'
+    direction?: 'row' | 'column'
+    title?: string
+    description?: string
+    link?: {
+      text: string
+      path: string
+    }
+    backgroundUrl?: string
+  }
+}> = ({ options: { mode, direction, title, description, link, backgroundUrl = null } }) => {
+  return (
+    <BackgroundSection background={backgroundUrl || ''} mode={mode}>
+      <StyledContainer className="container" row={direction === 'row'}>
+        <HeadingSnippet direction={direction || 'row'}>
+          {title && <HeadingSnippet.Title row={direction === 'row'}>{title}</HeadingSnippet.Title>}
+          {description && <StyledDescription row={direction === 'row'}>{description}</StyledDescription>}
+        </HeadingSnippet>
+
+        <div>
+          {link && (
+            <Link to={link.path}>
+              <Button>{link.text}</Button>
+            </Link>
+          )}
+        </div>
+      </StyledContainer>
+    </BackgroundSection>
+  )
+}
+
+export default CTASection

src/components/page/DescriptionSection.tsx

@@ -0,0 +1,52 @@
+import Article from 'lodestar-app-element/src/components/Article'
+import React from 'react'
+import styled from 'styled-components'
+import { StyledSection } from '../../pages/AppPage'
+
+const StyledTitle = styled(Article.Title)`
+  font-family: NotoSansCJKtc;
+  font-size: 24px;
+  font-weight: bold;
+  letter-spacing: 0.2px;
+  color: var(--gray-darker);
+`
+
+const StyledContent = styled(Article.Content)`
+  font-family: NotoSansCJKtc;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.69;
+  letter-spacing: 0.2px;
+  text-align: justify;
+  color: var(--gray-darker);
+`
+
+const DescriptionSection: React.FC<{
+  options: {
+    infos?: {
+      title: string
+      description: string
+    }[]
+    imgSrc: string
+  }
+}> = ({ options: { infos, imgSrc } }) => {
+  return (
+    <StyledSection>
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-md-7">
+            {infos?.map(v => (
+              <Article className="my-5">
+                <StyledTitle className="mb-4">{v.title}</StyledTitle>
+                <StyledContent>{v.description}</StyledContent>
+              </Article>
+            ))}
+          </div>
+          <img className="col-12 col-md-5 m-auto" src={imgSrc} alt="feature" />
+        </div>
+      </div>
+    </StyledSection>
+  )
+}
+
+export default DescriptionSection

src/components/page/FAQSection.tsx

@@ -0,0 +1,53 @@
+import Article from 'lodestar-app-element/src/components/Article'
+import React from 'react'
+import styled from 'styled-components'
+import { SectionTitle, StyledSection } from '../../pages/AppPage'
+
+const StyledContainer = styled.div`
+  margin: 0 auto;
+  padding: 0 20px;
+
+  @media (min-width: 768px) {
+    max-width: 768px;
+  }
+`
+
+const StyledBlock = styled.div`
+  column-count: 1;
+
+  @media (min-width: 768px) {
+    column-count: 2;
+    column-gap: 2rem;
+  }
+`
+
+const FAQSection: React.FC<{
+  options: {
+    title?: string
+    infos?: {
+      title: string
+      description: string
+    }[]
+  }
+}> = ({ options: { title, infos = [] } }) => {
+  return (
+    <StyledSection>
+      <StyledContainer>
+        <SectionTitle>{title}</SectionTitle>
+
+        <StyledBlock>
+          {infos?.map(v => (
+            <Article className="mb-4">
+              <Article.Title highlight className="mb-3">
+                {v.title}
+              </Article.Title>
+              <Article.Content>{v.description}</Article.Content>
+            </Article>
+          ))}
+        </StyledBlock>
+      </StyledContainer>
+    </StyledSection>
+  )
+}
+
+export default FAQSection

src/components/page/FeatureDescriptionSection.tsx

@@ -0,0 +1,46 @@
+import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection'
+import Card from 'lodestar-app-element/src/components/Card'
+import React from 'react'
+import styled from 'styled-components'
+import { SectionTitle } from '../../pages/AppPage'
+
+const StyledImage = styled.img`
+  width: 40px;
+  height: auto;
+`
+
+const FeatureDescriptionSection: React.FC<{
+  options: {
+    backgroundUrl?: string
+    title?: string
+    infos?: {
+      iconSrc: string
+      title: string
+      description: string
+    }[]
+  }
+}> = ({ options: { backgroundUrl, title, infos = [] } }) => {
+  return (
+    <BackgroundSection background={backgroundUrl || ''} mode={!!backgroundUrl ? 'dark' : undefined}>
+      <div className="container">
+        <SectionTitle>{title}</SectionTitle>
+
+        <div className="row justify-content-center">
+          {infos.map(v => (
+            <div className="col-12 col-md-4 mb-3">
+              <Card isDark={!!backgroundUrl} direction="column" bordered shadow>
+                <StyledImage src={v.iconSrc} className="mb-3" alt="icon" />
+                <Card.Title isDark={!!backgroundUrl} className="mb-3">
+                  {v.title}
+                </Card.Title>
+                <Card.Content>{v.description}</Card.Content>
+              </Card>
+            </div>
+          ))}
+        </div>
+      </div>
+    </BackgroundSection>
+  )
+}
+
+export default FeatureDescriptionSection

src/components/page/FeatureSection.tsx

@@ -1,58 +1,12 @@
+import BackgroundSection from 'lodestar-app-element/src/components/BackgroundSection'
+import Card from 'lodestar-app-element/src/components/Card'
 import React from 'react'
-import styled, { css } from 'styled-components'
-import { SectionTitle, StyledSection } from '../../pages/AppPage'
+import styled from 'styled-components'
+import { SectionTitle } from '../../pages/AppPage'
 
-const StyleCardTitle = styled.h3<{ isDark: boolean }>`
-  font-family: NotoSansCJKtc;
-  font-size: 16px;
-  font-weight: bold;
-  letter-spacing: 0.2px;
-  color: ${props => (props.isDark ? 'white' : 'var(--gray-darker)')};
-`
-
-const StyledCard = styled.div<{ isDark: boolean }>`
-  padding: 32px;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  width: 100%;
-  ${props =>
-    props.isDark
-      ? css`
-          background-color: rgba(0, 0, 0, 0);
-          border: 1px solid white;
-        `
-      : css`
-          background-color: #ffffff;
-        `}
-  transition: 0.3s;
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  @media (min-width: 768px) {
-    width: 48%;
-  }
-
-  @media (min-width: 1080px) {
-    width: 30%;
-  }
-`
-
-const StyledBriefCard = styled.div<{ isDark: boolean }>`
-  padding: 32px;
-  width: 100%;
-  transition: 0.3s;
-  &:hover {
-    transform: scale(1.1);
-  }
-
-  @media (min-width: 768px) {
-    width: 22%;
-  }
-`
-
-const StyledParagraph = styled.p`
-  font-weight: 500;
+const StyledImage = styled.img`
+  width: 40px;
+  height: auto;
 `
 
 const FeatureSection: React.FC<{
@@ -62,34 +16,26 @@ const FeatureSection: React.FC<{
     infos?: {
       iconSrc: string
       title: string
-      description?: string
     }[]
   }
-}> = ({ options: { backgroundUrl, title, infos = [] } }) => {
+}> = ({ options: { backgroundUrl = null, title, infos = [] } }) => {
   return (
-    <StyledSection isDark={!!backgroundUrl} backgroundUrl={backgroundUrl}>
+    <BackgroundSection background={backgroundUrl || ''} mode={backgroundUrl ? 'dark' : undefined}>
       <div className="container">
         <SectionTitle>{title}</SectionTitle>
-        <div className="d-flex flex-wrap justify-content-center">
-          {infos.map(v =>
-            v.description ? (
-              <StyledCard isDark={!!backgroundUrl} className="m-3">
-                <img src={v.iconSrc} className="mb-3" />
-                <StyleCardTitle isDark={!!backgroundUrl} className="mb-3">
-                  {v.title}
-                </StyleCardTitle>
-                <StyledParagraph>{v.description}</StyledParagraph>
-              </StyledCard>
-            ) : (
-              <StyledBriefCard isDark={!!backgroundUrl} className="d-flex align-items-center m-3">
-                <img src={v.iconSrc} className="mr-3" />
-                <StyleCardTitle isDark={!!backgroundUrl}>{v.title}</StyleCardTitle>
-              </StyledBriefCard>
-            ),
-          )}
+
+        <div className="d-flex flex-column flex-md-row">
+          {infos.map(v => (
+            <Card isDark={!!backgroundUrl} direction="row">
+              <StyledImage src={v.iconSrc} className="mr-3" alt="icon" />
+              <Card.Title isDark={!!backgroundUrl} className="my-auto">
+                {v.title}
+              </Card.Title>
+            </Card>
+          ))}
         </div>
       </div>
-    </StyledSection>
+    </BackgroundSection>
   )
 }