update: Index page의 SectionActivities - #10

- 디자인 적용

assets/jss/custom/pages/mainSections/activitiesStyle.js

@@ -0,0 +1,116 @@
+
+const activitiesStyle = theme => ({
+  section: {
+    padding: "50px 0",
+    backgroundColor: "#f5f5f7",
+    textAlign: "center"
+  },
+  container: {
+      padding: "15px"
+  },
+  title: {
+    fontWeight: "500",
+    marginBottom: "1rem",
+    marginTop: "30px",
+    minHeight: "32px",
+    textDecoration: "none",
+  },
+  contentWrapper: {
+    margin: 0,
+    padding: 0,
+    height: "30vw",
+    [theme.breakpoints.down("sm")]: {
+      height: "60vw"
+    }
+  },
+  content: {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  captionWrapper: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  caption: {
+    fontSize: "1.715rem",
+    fontWeight: "400",
+    lineHeight: "normal",
+    color: "#f5f5f7",
+    position: "relative",
+    textTransform: "uppercase",
+    transition: "all .25s",
+  },
+  blurWrapper: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    left: 0,
+    overflow: "hidden",
+    opacity: 0,
+    "&:hover, &:focus": {
+      opacity: 1,
+    }
+  },
+  blur: {
+    width: "100%",
+    height: "100%",
+    filter: "blur(10px)",
+    transition: "all .35s",
+  },
+  overlay: {
+    backgroundColor: "#05b",
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    left: 0,
+    opacity: 0.7,
+    display: "flex",
+    flexDirection: "column",
+    textAlign: "center",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all .55s",
+  },
+  overlayTitle: {
+    fontSize: "1.313rem",
+    fontWeight: "400",
+    lineHeight: "normal",
+    color: "#fff",
+    padding: "1rem 1rem 1.5vw",
+    textTransform: "uppercase",
+  },
+  overlayCaption: {
+    fontSize: "0.851rem",
+    fontWeight: "400",
+    padding: "1.5vw 1rem 1rem",
+    color: "#fff",
+    textTransform: "uppercase",
+  },
+  img: {
+    width: "100%",
+  },
+  textButton: {
+    margin: 0,
+    fontSize: "1.131rem",
+    fontWeight: "600",
+  },
+  space30: {
+    height: "30px",
+    display: "block"
+  },
+  space50: {
+    height: "50px",
+    display: "block"
+  },
+});
+
+export default activitiesStyle;

pages-sections/MainPage-Sections/SectionActivities.js

@@ -0,0 +1,191 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// core components
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+
+import studyImg from "assets/img/main/study.jpg";
+import projectImg from "assets/img/main/project.jpg";
+import competitionImg from "assets/img/main/competition.jpg";
+import supportImg from "assets/img/main/support.jpg";
+
+import styles from "assets/jss/custom/pages/mainSections/activitiesStyle";
+
+const useStyles = makeStyles(styles);
+
+export default function SectionActivities() {
+  const classes = useStyles();
+  return (
+    <div className={classes.section}>
+      <div className={classes.container}>
+        <h2 className={classes.title}>Our Activities</h2>
+        {/* <hr className={classes.titleLine} /> */}
+        <div className={classes.space30} />
+        <br />
+        <GridContainer>
+          <GridItem xs={12} sm={12} md={3} className={classes.contentWrapper}>
+            <div
+              className={classes.content}
+              style={{
+                backgroundImage: "url(" + studyImg + ")",
+                backgroundSize: "cover",
+                backgroundPosition: "top center"
+              }}
+            >
+              <div className={classes.captionWrapper}>
+                <div className={classes.caption}>Study</div>
+              </div>
+
+              <div className={classes.blurWrapper}>
+                <div
+                  className={classes.blur}
+                  style={{
+                    backgroundImage: "url(" + studyImg + ")",
+                    backgroundSize: "cover",
+                    backgroundPosition: "top center"
+                  }}
+                />
+                <div className={classes.overlay}>
+                  <div className={classes.overlayTitle}>
+                    프로그래밍 관련
+                    <br />
+                    <strong>스터디</strong> 및 <strong>세미나</strong>
+                  </div>
+                  <div className={classes.overlayCaption}>
+                    알고리즘 스터디<br/>
+                    웹 / 앱 스터디<br/>
+                    정기 세미나
+                  </div>
+                </div>
+              </div>
+            </div>
+          </GridItem>
+          <GridItem xs={12} sm={12} md={3} className={classes.contentWrapper}>
+            <div
+              className={classes.content}
+              style={{
+                backgroundImage: "url(" + projectImg + ")",
+                backgroundSize: "cover",
+                backgroundPosition: "top center"
+              }}
+            >
+              <div className={classes.captionWrapper}>
+                <div className={classes.caption}>Project</div>
+              </div>
+              <div className={classes.blurWrapper}>
+                <div
+                  className={classes.blur}
+                  style={{
+                    backgroundImage: "url(" + projectImg + ")",
+                    backgroundSize: "cover",
+                    backgroundPosition: "top center"
+                  }}
+                />
+                <div className={classes.overlay}>
+                  <div className={classes.overlayTitle}>
+                    자유로운 <strong>대&middot;내외</strong>
+                    <br />
+                    <strong>프로젝트</strong> 진행
+                  </div>
+                  <div className={classes.overlayCaption}>
+                    실제 아이디어 구현<br/>
+                    실무 능력 & 개발 경험 향상<br/>
+                    팀 활동을 통한 협업경험
+                  </div>
+                </div>
+              </div>
+            </div>
+          </GridItem>
+          <GridItem xs={12} sm={12} md={3} className={classes.contentWrapper}>
+            <div
+              className={classes.content}
+              style={{
+                backgroundImage: "url(" + competitionImg + ")",
+                backgroundSize: "cover",
+                backgroundPosition: "top center"
+              }}
+            >
+              <div className={classes.captionWrapper}>
+                <div className={classes.caption}>Competition</div>
+              </div>
+
+              <div className={classes.blurWrapper}>
+                <div
+                  className={classes.blur}
+                  style={{
+                    backgroundImage: "url(" + competitionImg + ")",
+                    backgroundSize: "cover",
+                    backgroundPosition: "top center"
+                  }}
+                />
+                <div className={classes.overlay}>
+                  <div className={classes.overlayTitle}>
+                    역량 강화를 위한
+                    <br/>
+                    <strong>다양한 대회</strong> 진행
+                  </div>
+                  <div className={classes.overlayCaption}>
+                    단합을 위한 공학 체전<br/>
+                    알고리즘 대회 + 구데기컵<br/>
+                    하반기 정기 해커톤
+                  </div>
+                </div>
+              </div>
+            </div>
+          </GridItem>
+          <GridItem xs={12} sm={12} md={3} className={classes.contentWrapper}>
+            <div
+              className={classes.content}
+              style={{
+                backgroundImage: "url(" + supportImg + ")",
+                backgroundSize: "cover",
+                backgroundPosition: "top center"
+              }}
+            >
+              <div className={classes.captionWrapper}>
+                <div className={classes.caption}>Support</div>
+              </div>
+              <div className={classes.blurWrapper}>
+                <div
+                  className={classes.blur}
+                  style={{
+                    backgroundImage: "url(" + supportImg + ")",
+                    backgroundSize: "cover",
+                    backgroundPosition: "top center"
+                  }}
+                />
+                <div className={classes.overlay}>
+                  <div className={classes.overlayTitle}>
+                    원활한 활동을
+                    <br />
+                    위한 <strong>환경 조성</strong>
+                  </div>
+                  <div className={classes.overlayCaption}>
+                    편안하고 안락한 동아리방<br/>
+                    다양한 정보 제공<br/>
+                    교재 및 학습 도구 제공
+                  </div>
+                </div>
+              </div>
+            </div>
+          </GridItem>
+        </GridContainer>
+        <div className={classes.space50} />
+        <Button
+          className={classes.textButton}
+          style={{
+            color: "#06c"
+          }}
+          simple
+          href={"/activities"}
+          target="_self"
+        >
+          {"더 알아보기"}&nbsp;&nbsp;&nbsp;❯
+        </Button>
+      </div>
+    </div>
+  );
+}