add home page

.github/workflows/preview.yml

@@ -24,7 +24,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           zeit-token: ${{ secrets.ZEIT_TOKEN }}
           zeit-team-id: team_IcdA4KZF7VghnRhAtBMuOr66
-          now-args: '--no-clipboard -c'
+          now-args: '--no-clipboard'
           working-directory: ./packages/website
       - name: deploy website preview success
         uses: foxundermoon/feishu-action@v1

packages/website/components/Copyright.tsx

@@ -18,16 +18,14 @@ export const Copyright: FunctionComponent = () => {
   const classes = useStyles();
   const { t } = useTranslation();
   return (
-    <>
-      <Typography className={classes.root}>
-        &copy; {new Date().getFullYear()}
-        <Tooltip title={t('inc.name')}>
-          <Link className={classes.link} href="https://wefox.tech">
-            wefox.tech
-          </Link>
-        </Tooltip>
-        All Rights Reserved
-      </Typography>
-    </>
+    <Typography component="span" className={classes.root}>
+      &copy; 2016 - {new Date().getFullYear()}
+      <Tooltip title={t('inc.name')}>
+        <Link className={classes.link} href="https://wefox.tech">
+          wefox.tech
+        </Link>
+      </Tooltip>
+      {t('inc.copyright')}
+    </Typography>
   );
 };

packages/website/components/Footer.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
 import { Copyright } from './Copyright';
-import { Container, Theme } from '@material-ui/core';
-import Link from '../src/Link';
+import { Container, Theme, Link, Typography } from '@material-ui/core';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import { Version } from './Version';
+import useTranslation from '../src/hooks/useTranslation';
 
 interface Props {}
 
@@ -19,6 +19,10 @@ export const Footer: FunctionComponent<Props> = () => {
   return (
     <Container maxWidth="sm" className={classes.root}>
       <Copyright />
+
+      <Typography component="span">
+        <Link target="_blank" href="http://www.beian.miit.gov.cn/">{`浙ICP备16033599号-6`}</Link>
+      </Typography>
     </Container>
   );
 };

packages/website/components/Layout.tsx

@@ -20,23 +20,30 @@ import { useRouter } from 'next/router';
 import { LocaleContext } from '../src/context/LocaleContext';
 import { LocaleSwitcher } from './LocaleSwitcher';
 
+import {ContainerProps} from '@material-ui/core'
+
 interface Props {
   title?: string;
   toolbar?: Component;
+  maxWidth?:  ContainerProps["maxWidth"];
 }
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     main: {
       // minHeight: '80vh',
       // background: 'linear-gradient(45deg,#fe5196,#f77062)'
     },
+    grow: {
+      flex: '1 1 auto',
+    },
   })
 );
 
 const Layout: React.FunctionComponent<Props> = ({
   children,
   title = 'This is the default title',
   toolbar = null,
+  maxWidth = 'md',
 }) => {
   const classes = useStyles();
   const { t, locale } = useTranslation();
@@ -57,17 +64,17 @@ const Layout: React.FunctionComponent<Props> = ({
         <Toolbar>
           <Typography>{title}</Typography>
           {toolbar}
+          <div className={classes.grow}></div>
           <LocaleSwitcher />
         </Toolbar>
       </AppBar>
 
       <main className={classes.main}>
-        <Container maxWidth="md">{children}</Container>
+        <Container maxWidth={maxWidth}>{children}</Container>
       </main>
       <footer>
         <Footer />
       </footer>
-      <BottomNav />
     </>
   );
 };

packages/website/components/home/Mission.tsx

@@ -0,0 +1,41 @@
+import useTranslation from '../../src/hooks/useTranslation';
+import { Typography, Box, Container } from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Locale } from '../../src/translations/config';
+import { marginTop, marginBottom } from './spacing';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    mission: {
+      marginTop: theme.spacing(3),
+      marginBottom: theme.spacing(marginBottom),
+    },
+  })
+);
+
+const solgan: { [key in Locale]: string } = {
+  en: '——Our mission is to open up technical possibilities for you.',
+  zh: '——我们专注于为各种领域提供技术咨询服务',
+};
+
+const name: { [key in Locale]: string } = {
+  en: 'WeFox',
+  zh: '微狐',
+};
+
+export const Mission: React.FC = () => {
+  const { t, locale } = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <Container className={classes.mission} maxWidth="md">
+      <Typography variant="h1" component="strong">
+        {name[locale]}
+      </Typography>
+
+      <Typography variant="h2" component="strong">
+        {solgan[locale]}
+      </Typography>
+    </Container>
+  );
+};

packages/website/components/home/TechStack.tsx

@@ -0,0 +1,114 @@
+import useTranslation from '../../src/hooks/useTranslation';
+import { Locale } from '../../src/translations/config';
+import { Typography, Container, Box, Chip } from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { marginTop, marginBottom } from './spacing';
+
+const commonTechNames = [
+  'Blockchain',
+  'bitcoin',
+  'ipfs',
+  'filecoin',
+  'DevOps',
+  'VR',
+  'docker',
+  'k8s',
+  'JAMStack',
+  'TypeScript',
+  'golang',
+  'java',
+  'dart',
+  'swift',
+  'csharp',
+  'javascript',
+  'kotlin',
+  'python',
+  'MySql',
+  'Redis',
+  'Android',
+  'iOS',
+  'MongoDB',
+  'elasticsearch',
+  'spring cloud',
+  'next.js',
+  'react',
+  'flutter',
+  'OpenSource',
+  'GitHub Action',
+];
+
+const techStacks: { [key in Locale]: string[] } = {
+  en: [
+    'AI',
+    'docker',
+    'k8s',
+    'DevOps',
+    'Bigdata',
+    'react',
+    'next.js',
+    'electron',
+    'elasticsearch',
+    'spring cloud',
+    ...commonTechNames,
+  ],
+
+  zh: ['区块链', 'AI人工智能', '大数据', '算法', '搜索', ...commonTechNames],
+};
+
+const techStackTitle: { [key in Locale]: string } = {
+  en: 'Our technology stack',
+  zh: '我们的技术栈',
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      marginTop: theme.spacing(marginTop),
+      marginBottom: theme.spacing(marginBottom),
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    },
+    tag: {
+      marginTop: theme.spacing(1),
+      marginLeft: theme.spacing(1),
+      padding: '10px 10px 10px 10px',
+    },
+  })
+);
+
+const Tag: React.FC = ({ children }) => {
+  const classes = useStyles();
+  return (
+    <Chip
+      variant="default"
+      color="secondary"
+      clickable={true}
+      size="medium"
+      label={children}
+      className={classes.tag}
+    >
+      {/* <Typography className={classes.tag} variant="h3" component="span"> */}
+      {/* {children} */}
+      {/* </Typography> */}
+    </Chip>
+  );
+};
+
+export const TechStacks: React.FC = () => {
+  const { t, locale } = useTranslation();
+  const classes = useStyles();
+
+  return (
+    <Container className={classes.root} maxWidth={false}>
+      <Typography variant="h3">{techStackTitle[locale]}</Typography>
+      <div>
+        {techStacks[locale].map((e, i) => (
+          <Tag key={i}>{e}</Tag>
+        ))}
+      </div>
+    </Container>
+  );
+};

packages/website/components/home/spacing.ts

@@ -0,0 +1,3 @@
+export const marginTop = 16;
+
+export const marginBottom = 3;

packages/website/components/team/Team.tsx

@@ -0,0 +1,90 @@
+import { Avatar, Card, Typography, Container, GridList, Grid, Link } from '@material-ui/core';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { Locale } from '../../src/translations/config';
+import useTranslation from '../../src/hooks/useTranslation';
+import { marginTop, marginBottom } from '../home/spacing';
+
+
+const teamTitle:{ [key in Locale]: string } = {
+  en: 'Our passionate team',
+  zh: '我们的团队'
+}
+
+const fox = {
+  name: 'fox',
+  avatar: 'https://s.fox.mn/avatar/fox.png',
+  weibo: 'weiboid',
+  twitter: 'twiter_id',
+};
+
+const data = new Array(10).fill(null).map(e => fox);
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      marginTop: theme.spacing(marginTop),
+      marginBottom: theme.spacing(marginBottom),
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    },
+    teamTitle:{
+      paddingBottom: theme.spacing(8),
+    },
+    avatar: {
+      height: theme.spacing(16),
+      width: theme.spacing(16),
+      '& :hover': {
+        height: theme.spacing(17),
+        width: theme.spacing(17)
+      }
+    },
+    card: {
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      position: 'relative',
+      paddingTop: theme.spacing(2),
+      paddingLeft: theme.spacing(8),
+      paddingRight: theme.spacing(8),
+      paddingBottom: theme.spacing(3)
+    },
+    geistWrapper: {
+      display: 'flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+);
+export const Team: React.FC = () => {
+  const classes = useStyles();
+  const {t, locale} = useTranslation();
+  return (
+    <Container className={classes.root} maxWidth="md">
+      <Typography className={classes.teamTitle} variant="h3"  component="strong">
+        {teamTitle[locale]}
+      </Typography>
+      <Grid className={classes.geistWrapper} container spacing={3}>
+        {data.map((e, i) => (
+          <Grid key={i} item xs="auto">
+            <Card key={i} className={classes.card}>
+              <Avatar
+                className={classes.avatar}
+                variant="circle"
+                alt={e.name}
+                src={e.avatar}
+              ></Avatar>
+              <Typography>{e.name}</Typography>
+              <Link href={`https://twitter.com/${e.twitter}`}>{ `@${e.twitter}`}</Link>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Container>
+  );
+};

packages/website/pages/[lang]/index.tsx

@@ -1,22 +1,31 @@
 import React from 'react';
 import Layout from '../../components/Layout';
 import useTranslation from '../../src/hooks/useTranslation';
-import { Typography } from '@material-ui/core';
+import { Typography, Divider } from '@material-ui/core';
 import withLocale from '../../src/hocs/withLocale';
 import { GetstaticProps } from '../../src/types/next';
 import locales from '../../src/translations/locales';
 import Link from '../../src/Link';
+import { Mission } from '../../components/home/Mission';
+import { TechStacks } from '../../components/home/TechStack';
+import { Team } from '../../components/team/Team';
 
 const IndexPage: React.FC = () => {
   const { t, locale } = useTranslation();
 
   return (
-    <Layout title={t('l.title')}>
-      <Typography>{t('contactMe')} </Typography>
+    <Layout title={t('l.title')} maxWidth={false}>
+      <Mission />
+      <Divider />
+
+      <TechStacks />
+      {/* <Typography>{t('contactMe')} </Typography>
 
       <Link href="/[lang]/about" as={`/${locale}/about`}>
         {t('aboutLink')}
-      </Link>
+      </Link> */}
+      <Divider />
+      <Team />
     </Layout>
   );
 };