Add photos

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Author: Josh-Cena

src/pages/index.js

@@ -137,11 +137,38 @@ function Home() {
                 </h2>
               </div>
             </div>
-            <div className="row">
-              <div className="col">
-                <Translate id="frontpage.sec2.item1">
-                  我们的主页正式上线了！
-                </Translate>
+            <div style={{ textAlign: 'center' }} className="row">
+              <div className="col col--6">
+                <div className={styles.card}>
+                  <h3 className={styles.header}>
+                    <Translate id="frontpage.sec2.item1">
+                      2021 届圆满落幕 🥳
+                    </Translate>
+                  </h3>
+                  <div>
+                    <img
+                      style={{ maxWidth: '400px', width: '100%' }}
+                      alt="all club members"
+                      src="/img/club_photo.jpeg"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="col col--6">
+                <div className={styles.card}>
+                  <h3 className={styles.header}>
+                    <Translate id="frontpage.sec2.item2">
+                      C 社 2022 届开始招新，欢迎你的加入！
+                    </Translate>
+                  </h3>
+                  <div>
+                    <img
+                      style={{ maxWidth: '400px', width: '100%' }}
+                      alt="poster"
+                      src="/img/poster.png"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>

src/pages/styles.module.css

@@ -62,3 +62,29 @@ html[data-theme='dark'] #getStarted {
 html[data-theme='dark'] .caption {
   color: #aaaaaa;
 }
+
+.card {
+  margin: 20px;
+  padding: 20px;
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+}
+
+html[data-theme='dark'] .card {
+  background: rgba(255, 255, 255, 0.09);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
+}
+
+.card .header {
+  width: auto;
+  height: auto;
+  padding: 30px 20px 10px 20px;
+  display: block;
+  text-align: center;
+  flex-grow: 2;
+}