Merge pull request #491 from bugout-dev/marketing-improvements

Marketing improvements

frontend/pages/team/index.js

@@ -14,6 +14,7 @@ import {
 } from "@chakra-ui/react";
 import { DEFAULT_METATAGS, AWS_ASSETS_PATH } from "../../src/core/constants";
 import UIContext from "../../src/core/providers/UIProvider/context";
+import TeamCard from "../../src/components/TeamCard";
 
 const assets = {
   background720: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
@@ -21,6 +22,14 @@ const assets = {
   background2880: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
   background3840: `${AWS_ASSETS_PATH}/blog-background-720x405.png`,
   team: `${AWS_ASSETS_PATH}/Team-page-illustration.png`,
+  dragonfly: `${AWS_ASSETS_PATH}/dragonfly.jpg`,
+  ladybird: `${AWS_ASSETS_PATH}/ladybird.jpg`,
+  locust: `${AWS_ASSETS_PATH}/locust.jpg`,
+  mantis: `${AWS_ASSETS_PATH}/mantis.jpg`,
+  centipede: `${AWS_ASSETS_PATH}/centipede.jpg`,
+  spider: `${AWS_ASSETS_PATH}/spider.jpg`,
+  ant: `${AWS_ASSETS_PATH}/ant.jpg`,
+  firefly: `${AWS_ASSETS_PATH}/firefly.jpg`,
 };
 
 const Product = () => {
@@ -204,62 +213,86 @@ const Product = () => {
         <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
           Our engineering team
         </Heading>
-        <chakra.span pl={2} px={12} py={2}>
-          <UnorderedList w="75%" pl={4} spacing={2}>
-            <ListItem>
-              <b>zomglings{". "}</b> Founder. Number theorist. Loves playing
-              chess while programming. Fan of GO, backgammon, and video games.
-            </ListItem>
-            <ListItem>
-              <b>kompotkot{". "}</b>Keeper of Secrets. Likes information
-              security since childhood, loves mountains and goes hiking from
-              time to time. Had a close call with a wild bear in a forest once.
-            </ListItem>
-            <ListItem>
-              <b>wizarikus{". "}</b>Wizard. Loves mountains, bicycling, and
-              hiking. A practicing Python wizard. Also likes to cook and play
-              the guitar in between data witchcraft.
-            </ListItem>
-            <ListItem>
-              <b>peersky{". "}</b>
-              {`Spectral hopper. Perceives the world as a
-                spectrum interacting with and within the observer's mind. Loves
-                to shift in time domain to spend some of it doing fire
-                performances, surfing, and connecting with nature.`}
-            </ListItem>
-            <ListItem>
-              <b>yhtyyar{". "}</b>
-              {`Wunderkind. Interested in Math, NLP. Loves
-                programming language parsing and Algorithms & Data structures.
-                Implementing his own dialect of LISP programming language for
-                scientific calculations.`}
-            </ListItem>
-          </UnorderedList>
-        </chakra.span>
+        <Stack
+          w="100%"
+          direction={"row"}
+          flexWrap="wrap"
+          spacing={4}
+          justifyContent="space-between"
+          px={12}
+          placeContent={"center"}
+        >
+          <TeamCard
+            avatarURL={assets["ant"]}
+            name={"Neeraj Kashyap"}
+            atName={"@zomglings"}
+            content={` Founder. Number theorist. Loves playing chess while programming. Fan of GO, backgammon, and video games.`}
+          />
+          <TeamCard
+            avatarURL={assets["spider"]}
+            name={"Sergei Sumarokov"}
+            atName={"@kompotkot"}
+            content={`Keeper of Secrets. Likes information
+            security since childhood, loves mountains and goes hiking from
+            time to time. Had a close call with a wild bear in a forest once.`}
+          />
+          <TeamCard
+            avatarURL={assets["locust"]}
+            name={"Andrey Dolgolev"}
+            atName={"@Andrei-Dolgolev"}
+            content={`Wizard. Loves mountains, bicycling, and
+            hiking. A practicing Python wizard. Also likes to cook and play
+            the guitar in between data witchcraft.`}
+          />
+          <TeamCard
+            avatarURL={assets["dragonfly"]}
+            name={"Tim Pechersky"}
+            atName={"@peersky"}
+            content={`Spectral hopper. Hes special ability to precieve world trough spectral domain. Occasionaly
+            shifts in to time domain to spend some in doing flow
+            arts, surfing, and connecting with nature.`}
+          />
+          <TeamCard
+            avatarURL={assets["centipede"]}
+            name={"yhtyyar"}
+            atName={"@Yhtiyar"}
+            content={`Wunderkind. Interested in Math, NLP. Loves
+            programming language parsing and Algorithms & Data structures.
+            Implementing his own dialect of LISP programming language for
+            scientific calculations.`}
+          />
+        </Stack>
       </Stack>
       <Stack mx={margin} mb={12} maxW="1700px" w="100%">
         <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
           Our marketing and growth team
         </Heading>
-        <chakra.span pl={2} px={12} py={2}>
-          <UnorderedList w="75%" pl={4} spacing={2}>
-            <ListItem>
-              <b>pahita{". "}</b> Dreamer. An alien who pretends to be a human.
-              So far so good. Loves ecstatic dance, being alone in nature and
-              dreaming.
-            </ListItem>
-            <ListItem>
-              <b>in_technicolor{". "}</b>Mediator. Loves stand-up comedy and
-              crying at nights. Volunteered at a horse farm once. Portrait
-              artist, puts the pain in painting.
-            </ListItem>
-            <ListItem>
-              <b>nanaland{". "}</b>Progress and Enthusiasm. Traveled to the
-              North Korean border at the age of 19. Half German. Counseling
-              psychologist who switched to tech marketing and sales.
-            </ListItem>
-          </UnorderedList>
-        </chakra.span>
+        <Stack
+          w="100%"
+          direction={"row"}
+          flexWrap="wrap"
+          spacing={4}
+          justifyContent="space-between"
+          px={12}
+          placeContent={"center"}
+        >
+          <TeamCard
+            avatarURL={assets["ladybird"]}
+            name={"Sophia Aryan"}
+            atName={"@pahita"}
+            content={`Dreamer. An alien who pretends to be a human.
+            So far so good. Loves ecstatic dance, being alone in nature and
+            dreaming.`}
+          />
+          <TeamCard
+            avatarURL={assets["mantis"]}
+            name={"Daria Navoloshnikova"}
+            atName={"@in_technicolor"}
+            content={`Mediator. Loves stand-up comedy and
+            crying at nights. Volunteered at a horse farm once. Portrait
+            artist, puts the pain in painting.`}
+          />
+        </Stack>
       </Stack>
     </Flex>
   );

frontend/src/components/TeamCard.js

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  Heading,
+  Avatar,
+  Box,
+  Center,
+  Text,
+  Stack,
+  Badge,
+  useColorModeValue,
+} from "@chakra-ui/react";
+
+export default function SocialProfileSimple({
+  avatarURL,
+  avatarAlt,
+  name,
+  atName,
+  content,
+  badges,
+  isOnline,
+  buttons,
+}) {
+  const badgeBg = useColorModeValue("gray.50", "gray.800");
+  return (
+    <Center py={6}>
+      <Box
+        maxW={"320px"}
+        h="420px"
+        w={"full"}
+        bg={useColorModeValue("white.50", "gray.900")}
+        boxShadow={"2xl"}
+        rounded={"lg"}
+        p={6}
+        textAlign={"center"}
+      >
+        <Avatar
+          size={"xl"}
+          src={avatarURL}
+          alt={avatarAlt}
+          mb={4}
+          pos={"relative"}
+          _after={
+            isOnline && {
+              content: '""',
+              w: 4,
+              h: 4,
+              bg: "green.300",
+              border: "2px solid white",
+              rounded: "full",
+              pos: "absolute",
+              bottom: 0,
+              right: 3,
+            }
+          }
+        />
+        <Heading fontSize={"2xl"} fontFamily={"body"}>
+          {name}
+        </Heading>
+        <Text fontWeight={600} color={"gray.900"} mb={4}>
+          {atName}
+        </Text>
+        <Text
+          textAlign={"center"}
+          color={useColorModeValue("blue.500", "gray.100")}
+          px={3}
+        >
+          {content}
+        </Text>
+
+        <Stack align={"center"} justify={"center"} direction={"row"} mt={6}>
+          {badges &&
+            badges.map((badgeContent, idx) => (
+              <Badge
+                key={`badge-card-${name}-${idx}`}
+                px={2}
+                py={1}
+                bg={badgeBg}
+                fontWeight={"400"}
+              >
+                {badgeContent}
+              </Badge>
+            ))}
+        </Stack>
+
+        <Stack mt={8} direction={"row"} spacing={4}>
+          {buttons}
+        </Stack>
+      </Box>
+    </Center>
+  );
+}