<repo_name>official-frandly/frandly-market-landing<file_sep>/src/components/header/PlainHeader.js
import React from "react";
import styled from "styled-components";

function PlainHeader(props) {
  return <div>PlainHeader</div>;
}

export default PlainHeader;
<file_sep>/src/components/cards/EducationCard.js
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import styled from "styled-components";

const useStyles = makeStyles({
  media: {
    height: 240,
  },
});

export default function MediaCard(props) {
  const classes = useStyles();

  return (
    <Styled.MediaCard>
      <Card className="card__item">
        <CardActionArea>
          <CardMedia
            className={classes.media}
            image={props.image || ""}
            title="Contemplative Reptile"
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {props.title}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              {props.subtitle}
            </Typography>
          </CardContent>
        </CardActionArea>
        <CardActions>
          {/* <Button size="small" color="primary">
            Share
          </Button> */}
          <Button size="small" color="primary">
            더 보기
          </Button>
        </CardActions>
      </Card>
    </Styled.MediaCard>
  );
}

const Styled = {
  MediaCard: styled.div`
    .card__item {
      /* float: left; */
      /* max-width: 360px; */
      width: 100%;
      margin-right: 10px;
      margin-bottom: 15px;
      /* &:last-child {
        margin-right: 0;
      } */
    }
  `,
};
<file_sep>/next.config.js
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const nextConfiguration = {
  target: "serverless", //will output independent pages that don't require a monolithic server. It's only compatible with next start or Serverless deployment platforms (like ZEIT Now) — you cannot use the custom server API.
};

module.exports = withPlugins([optimizedImages], nextConfiguration);
<file_sep>/src/components/cards/index.js
export { default as EducationCard } from "./EducationCard";
<file_sep>/src/components/modal/index.js
export { default as EducationModal } from "./EducationModal";
export { default as QuestionModal } from "./QuestionModal";
<file_sep>/src/components/modal/EducationModal.js
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import Fade from "@material-ui/core/Fade";
import styled, { createGlobalStyle } from "styled-components";
import { EducationCard } from "components/cards";

const useStyles = makeStyles((theme) => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  paper: {
    width: "90%",
    height: "90%",
    overflow: "auto",
    backgroundColor: theme.palette.background.paper,
    border: "2px solid #000",
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

const educationItems = [
  {
    id: 1,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 12,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 13,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 14,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 15,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 16,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 17,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 18,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 19,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 10,
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
  {
    id: 21,
    href:
      "https://www.hanwhawm.com/main/common/common_file/fileView.cmd?category=2&depth3_id=anls5&key1=51501&key2=1&bldid=bbs10031",
    image: "https://t1.daumcdn.net/cfile/tistory/994BEF355CD0313D05",
    title: "프랜들리 입점 프로세스",
    subtitle:
      "프랜들리 입점 신청은 1분이면 끝입니다. 쉽고 간단한 프랜들리 입점 방법을 확인해보세요! 입점 프로세스 프랜들리 입점을... ",
  },
];
export default function EducationModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Styled.EducationModal className="education__modal">
      <button
        type="button"
        onClick={handleOpen}
        className="educationModal__btn"
      >
        모두 보기
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <h2 id="transition-modal-title" className="education__modal_title">
              교육 자료
            </h2>
            <div id="transition-modal-description">
              <div className="education__card_box">
                {educationItems.map((item) => {
                  return (
                    <div className="education__card_col" key={item.id}>
                      <a href={item.href} target="_blank">
                        <EducationCard
                          className="education__card"
                          image={item.image}
                          title={item.title}
                          subtitle={item.subtitle}
                        />
                      </a>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Fade>
      </Modal>
      <ModalStyle />
    </Styled.EducationModal>
  );
}

const ModalStyle = createGlobalStyle`
    .education__modal_title{
      font-size:25px;
      font-weight:bold;
      border-bottom:1px solid #ececec;
      margin-bottom:20px;
    }
    .education__card_box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      max-width:1400px;
      margin:auto;
      &:after {
        display: block;
        clear: both;
        content: "";
      }
    }
    .education__card_col{
      
      flex-basis: 33% ;
      padding:10px;
      max-width:360px;
    }
    .education__card{
      
      
      
    }
`;
const Styled = {
  EducationModal: styled.div`
    text-align: right;

    .educationModal__btn {
      background: transparent;
      color: #4f96ff;
      border-radius: 5px;
      border: 0;
      &:hover {
        color: #2e7cf1;
      }
    }
  `,
};
<file_sep>/src/lib/config.js
export const setting = {
  importPointNumber: "02-651-5513",
  importPointAddress: "https://www.google.com",
  questionEmail: "<EMAIL>",
  brandName_en: "frandly",
  brandName_ko: "프랜들리",
  partnerNickname: "프랜더",
};
<file_sep>/src/components/sections/faq.js
import React from "react";
import { Box, Container, Flex, Text, Heading } from "theme-ui";
import { Link } from "components/link";
import BlockTitle from "components/block-title";
import Accordion from "components/accordion/accordion";
import styled from "styled-components";
import { QuestionModal } from "components/modal";
import { data } from "lib/config";
const accordionData = [
  {
    isExpanded: false,
    title: "입점 신청을 하려면 어떻게 해야하나요?",
    contents: (
      <div>
        For our recent trip to S.A. I booked several accommodation thru SA
        Places. I just wanted to tell you that everything worked out perfectly
        with all the bookings and also your booking was very quick and
        professional. I hope I have the opportunity to re-visit South Africa
        soon, I will then make my bookings with your company again. I will also
        recommend
      </div>
    ),
  },
  {
    isExpanded: true,
    title:
      "저희 상점도 프랜들리에 올라가는 사진들 처럼 이쁘게 찍고싶은데 어떻게 해야하나요?",
    contents: (
      <div>
        For our recent trip to S.A. I booked several accommodation thru SA
        Places. I just wanted to tell you that everything worked out perfectly
        with all the bookings and also your booking was very quick and
        professional. I hope I have the opportunity to re-visit South Africa
        soon, I will then make my bookings with your company again. I will also
        recommend
      </div>
    ),
  },
  {
    isExpanded: false,
    title: "입점할 때 주의 사항이 있나요?",
    contents: (
      <div>
        For our recent trip to S.A. I booked several accommodation thru SA
        Places. I just wanted to tell you that everything worked out perfectly
        with all the bookings and also your booking was very quick and
        professional. I hope I have the opportunity to re-visit South Africa
        soon, I will then make my bookings with your company again. I will also
        recommend
      </div>
    ),
  },
  {
    isExpanded: false,
    title: "프랜들리 박스를 구매하고싶은데 어떻게 해야하나요?",
    contents: (
      <div>
        For our recent trip to S.A. I booked several accommodation thru SA
        Places. I just wanted to tell you that everything worked out perfectly
        with all the bookings and also your booking was very quick and
        professional. I hope I have the opportunity to re-visit South Africa
        soon, I will then make my bookings with your company again. I will also
        recommend
      </div>
    ),
  },
  {
    isExpanded: false,
    title: "상점 결산은 어디서 하나요?",
    contents: (
      <div>
        For our recent trip to S.A. I booked several accommodation thru SA
        Places. I just wanted to tell you that everything worked out perfectly
        with all the bookings and also your booking was very quick and
        professional. I hope I have the opportunity to re-visit South Africa
        soon, I will then make my bookings with your company again. I will also
        recommend
      </div>
    ),
  },
];

const FAQ = () => {
  return (
    <Styled.FAQ id="faq">
      <Box as="section">
        <Container>
          <BlockTitle title="자주묻는 질문" text="Ask your question and meet" />
          <Flex sx={styles.flex}>
            <Box sx={styles.faqWrapper}>
              <Accordion items={accordionData} />
            </Box>
            <Box sx={styles.content}>
              <Heading as="h3">
                추가적인 질문이 더 남았나요? <br /> 문의하기 버튼을 눌러 질문을
                남겨주세요.
              </Heading>
              <Text as="p" className="faq__subtitle">
                If your question is not list here, please feel free to make a
                manual support.
              </Text>
              {/* <Link sx={styles.askButton} path="#">
                문의하기
              </Link> */}
              <QuestionModal />
            </Box>
          </Flex>
        </Container>
      </Box>
    </Styled.FAQ>
  );
};

export default FAQ;

const Styled = {
  FAQ: styled.div`
    padding-top: 61px;
    .faq__subtitle {
      margin-bottom: 30px;
    }
  `,
};
const styles = {
  flex: {
    flexWrap: "wrap",
    flexDirection: ["column", null, null, null, null, "row-reverse"],
    pb: ["70px", null, null, null, "90px", null, "130px"],
  },
  content: {
    flex: ["0 0 100%", null, null, null, "0 0 33.333%"],
    maxWidth: ["100%", null, null, "450px", "100%"],
    mx: ["auto", null, null, null, "0"],
    mb: ["0px", null, null, null, "0"],
    textAlign: ["center", null, null, null, null, "left"],
    mt: ["40px", null, null, null, null, "0"],
    h3: {
      fontSize: ["23px", null, null, null, "24px"],
      lineHeight: [1.5, null, null, null, 1.67],
      color: "black",
      fontWeight: 700,
      letterSpacing: "-1.5px",
      mt: "-5px",
      pr: ["0", null, null, null, null, "30px"],
    },
    p: {
      fontSize: "16px",
      lineHeight: 1.87,
      color: "#343D48",
      opacity: 0.7,
      mt: "10px",
      pr: ["0", null, null, null, null, "80px"],
    },
  },
  askButton: {
    display: "inline-block",
    verticalAlign: "middle",
    backgroundColor: "#02073E",
    color: "#fff",
    borderRadius: "5px",
    fontSize: "16px",
    fontWeight: 700,
    p: "6.5px 19px",
    letterSpacing: "-0.16px",
    mt: "25px",
    transition: "all 500ms ease",
    "&:hover": {
      opacity: 0.8,
    },
  },
  faqWrapper: {
    flex: ["0 0 100%", null, null, null, "0 0 66.666%"],
  },
};
<file_sep>/src/components/sections/contact.js
import React from "react";
import { Button, Input, Box, Container, Heading, Text } from "theme-ui";
import styled from "styled-components";
import { setting } from "lib/config";
const Contact = () => {
  return (
    <Styled.Contact>
      <Box as="section" sx={styles.subscribe}>
        <Container>
          <Heading as="h3">{setting.brandName_ko}를 구독하세요!</Heading>
          <Text as="p">
            구독하기를 통해 {setting.brandName_ko}의 최신 이벤트와 정보를 받아볼
            수 있습니다.
          </Text>

          {/* <Box as="form" sx={styles.form}>
            <Box as="label" htmlFor="subscribeEmail" variant="styles.srOnly">
              Email
            </Box>
            <Input
              placeholder="Enter your email"
              type="email"
              id="subscribeEmail"
              className="contact__email"
              // sx={styles.input}
              value="<EMAIL>"
              readOnly
            />
          </Box> */}

          <Box as="form" sx={styles.form}>
            <Box as="label" htmlFor="subscribeEmail" variant="styles.srOnly">
              Email
            </Box>
            <Input
              placeholder="Enter your email"
              type="email"
              id="subscribeEmail"
              sx={styles.input}
            />
            <Button type="submit" sx={styles.button}>
              구독하기
            </Button>
          </Box>
        </Container>
      </Box>
    </Styled.Contact>
  );
};

export default Contact;

const Styled = {
  Contact: styled.div`
    .contact__email {
      text-align: center;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.8);
    }
  `,
};

const styles = {
  subscribe: {
    py: ["80px", null, null, null, "80px", "100px", "140px"],
    backgroundColor: "#020718",
    h3: {
      textAlign: "center",
      fontSize: ["23px", null, null, null, null, "30px", "36px"],
      lineHeight: [1.5, null, null, "1"],
      color: "#fff",
      letterSpacing: ["-0.5px"],
      mb: ["0px", null, null, "15px"],
      width: ["70%", null, null, "auto"],
      mx: ["auto", null, null, "0"],
    },
    p: {
      fontSize: ["16px"],
      color: "#fff",
      opacity: ".6",
      letterSpacing: ["-0.5px"],
      textAlign: "center",
      width: ["70%", null, null, "auto"],
      mx: ["auto", null, null, "0"],
      mt: ["10px", null, null, "0"],
    },
  },
  form: {
    width: ["100%"],
    maxWidth: ["555px"],
    mx: ["auto"],
    display: ["flex"],
    flexWrap: ["wrap"],
    mt: ["30px", null, null, null, "60px"],
  },
  input: {
    width: ["100%"],
    maxWidth: ["100%", null, "370px", "380px"],
    borderRadius: "5px",
    border: "none",
    backgroundColor: "rgba(255,255,255, .08)",
    outline: "none",
    color: "rgba(255,255,255, .8)",
    fontSize: "16px",
    pl: ["0px", null, null, "30px"],
    height: ["50px", null, null, "60px"],
    mr: ["0px", null, null, "15px"],
    textAlign: ["center", null, null, "left"],
  },
  button: {
    backgroundColor: "#fff",
    borderRadius: "5px",
    fontWeight: "500",
    fontSize: ["18px"],
    color: "#020718",
    letterSpacing: "-0.5px",
    outline: "none",
    padding: ["0px 30.75px"],
    minHeight: ["50px", null, null, "60px"],
    width: ["100%", null, null, "auto"],
    mt: ["10px", null, null, "0"],
    mx: ["auto", null, null, "0"],
    "&:hover": {
      backgroundColor: "#fff",
      opacity: "0.8",
    },
  },
};
<file_sep>/src/components/header/header.js
/** @jsx jsx */
import { jsx, Container, Flex, Image } from "theme-ui";
import { Link } from "components/link";
import { Link as ScrollLink } from "react-scroll";
import Logo from "components/logo";
import logoImage from "assets/banner-logo.png";
import { DrawerProvider } from "contexts/drawer/drawer.provider";
import MobileDrawer from "./mobileDrawer";
import menuItems from "./header.data";
import logoDark from "assets/logo-dark.svg";
import styled from "styled-components";
import { setting } from "lib/config";
import { capitalize } from "lib/utils";

export default function Header({ className }) {
  return (
    <DrawerProvider>
      <Styled.Header sx={styles.header} className={className}>
        {/* <header > */}
        <Container sx={styles.container}>
          {/* <Logo image={logoDark} /> */}

          <ScrollLink
            activeClass="active"
            sx={styles.nav.navLink}
            to={"banner"}
            spy={true}
            smooth={true}
            offset={-70}
            duration={500}
          >
            <div>
              <span className="title__logo">
                <Image className="logo" src={logoImage} alt="logo image" />
                {capitalize(setting.brandName_en)} market
              </span>
              {/* <h2>Frandly</h2> */}
            </div>
          </ScrollLink>
          <Flex as="nav" sx={styles.nav}>
            {menuItems.map(({ path, label }, i) => (
              <ScrollLink
                activeClass="active"
                sx={styles.nav.navLink}
                to={path}
                spy={true}
                smooth={true}
                offset={-70}
                duration={500}
                key={i}
              >
                {label}
              </ScrollLink>
            ))}
            {/* <Link path="/" ml={2} label="서비스" sx={styles.nav.navLink} /> */}
            {/* <Link
              path="/education"
              ml={2}
              label="교육자료"
              sx={styles.nav.navLink}
            /> */}
            {/* <Link path="/news" ml={2} label="뉴스" sx={styles.nav.navLink} /> */}
          </Flex>
          <span className="qa__number">
            입점 문의 {setting.importPointNumber}
          </span>
          {/* <Link
            path="/"
            ml={2}
            label="입점 신청하기"
            sx={styles.headerBtn}
            variant="buttons.primary"
          /> */}
          <a
            href={setting.importPointAddress}
            target="_blank"
            sx={styles.headerBtn}
          >
            입점 신청하기
          </a>
          <MobileDrawer />
        </Container>
        {/* </header> */}
      </Styled.Header>
    </DrawerProvider>
  );
}
const Styled = {
  Header: styled.header`
    .title__logo {
      position: relative;
      font-size: 30px;
      font-weight: bold;
      top: 2px;
    }
    .qa__number {
      display: inline-block;
      margin-right: 10px;
      color: #103d4b;
      font-size: 14px;
    }
    .logo {
      position: relative;
      width: 40px;
      top: -3px;
      margin-right: 7px;
    }
  `,
};

const styles = {
  headerBtn: {
    backgroundColor: "black",
    fontSize: "16px",
    fontWeight: "bold",
    letterSpacing: "-0.16px",
    borderRadius: "5px",
    color: "#ffffff",
    padding: "6.5px 24px",
    display: ["none", null, null, null, "inline-block"],
    ml: ["0", null, null, "auto", "0"],
    mr: ["0", null, null, "20px", "0"],
    "&:hover": {
      color: "#fff",
    },
  },
  header: {
    color: "text_white",
    fontWeight: "normal",
    py: "25px",
    width: "100%",
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "transparent",
    transition: "all 0.4s ease",

    "&.sticky": {
      backgroundColor: "background",
      color: "text",
      py: "15px",
      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)",
    },
  },
  container: {
    display: "flex",
    alignItems: "center",
    width: [null, null, null, null, null, null, "1420px"],
    "@media screen and (max-width: 960px)": {
      justifyContent: "space-between",
    },
  },
  nav: {
    mx: "auto",
    "@media screen and (max-width: 960px)": {
      display: "none",
    },
    navLink: {
      fontSize: "16px",
      color: "#02073E",
      fontWeight: "400",
      cursor: "pointer",
      lineHeight: "1.2",
      mr: "48px",
      transition: "500ms",
      ":last-child": {
        mr: "0",
      },
      "&:hover": {
        color: "#0066C5",
      },
      // "&:hover, &.active": {
      //   color: "#0066C5",
      // },
    },
  },
};
