Merge pull request #9 from gdsc-konkuk/main

main

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.5"
   }
 }

src/App.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Main from "./pages/Main";
+
+export default function App() {
+  return (
+    <div>
+      <Main />
+    </div>
+  );
+}

src/components/AboutUs.css

@@ -0,0 +1,47 @@
+.AboutUs {
+    display: flex;
+
+}
+
+  .text-AboutUs {
+    width: 95px;
+    height: 26px;
+    margin: 196px 7px 30px 222px;
+    font-family: Pretendard;
+    font-size: 22px;
+    font-weight: 600;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: left;
+    color: #4285f4;
+  }
+
+  .keycap {
+    width: 282px;
+    height: 282px;
+    margin: 30px 10px 84px 222px;
+    object-fit: contain;
+  }
+
+
+
+
+  .GDSC-Konkuk-Univ- {
+    width: 588px;
+    height: 112px;
+    margin: 115px 246px 169px 102px;
+    font-family: Pretendard;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.56;
+    letter-spacing: normal;
+    text-align: left;
+    color: #171717;
+  }
+  .GDSC-Konkuk-Univ- .text-style-1 {
+    font-weight: 600;
+  }

src/components/AboutUs.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import "./AboutUs.css";
+import keycap from "../assets/images/keycap.png";
+
+export default function AboutUs() {
+  return (
+    <div className="AboutUs">
+      <span className="text-AboutUs">Abous Us</span>
+      <img
+        src={keycap}
+        srcSet="img/keycap@2x.png 2x, img/keycap@3x.png 3x"
+        alt="Keycap"
+        className="keycap"
+      />
+
+      <span className="GDSC-Konkuk-Univ-">
+        <span className="text-style-1">GDSC Konkuk Univ</span>는 함께 성장하는
+        것에 목표를 둔 학생 개발자 커뮤니티입니다! 스스로 공부할 수 있는 환경
+        속에서 서로에게 긍정적인 영향을 주며,{" "}
+        <span className="text-style-2">같이 나아가는 것</span>에 초점을 맞추어
+        다양한 활동들을 진행하고 있습니다.{" "}
+        <span className="text-style-3">배움을 통해 성장</span>하고 이를 통해
+        세상에 <span className="text-style-4">긍정적인 영향력</span>을 주기 위해
+        노력합니다.
+      </span>
+    </div>
+  );
+}

src/components/Footer.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "./Footer.css"; // CSS 스타일시트를 import 합니다.
+
+export default function Footer() {
+  return (
+    <footer className="footer-container">
+      <span className="footer-line"></span>
+      <span className="footer-text">
+        <p>
+          Designed by. Yeowon Kim, Chaerin Kim {"\n"}
+          Developed by. Jeongmin Seon, Jimin Lee {"\n"}
+          {"\n"}
+          @2023-2024 Google Developer Student Clubs Konkuk University. All
+          rights reserved.
+        </p>
+      </span>
+    </footer>
+  );
+}

src/Header.css → src/components/Header.css

@@ -61,3 +61,66 @@
   .nav-bar ul li {
     cursor: pointer;
   }
+
+/* .header-container {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+    
+    
+}
+
+.logo-container {
+    width: 45px;
+    height: 21px;
+    flex-grow: 0;
+    margin: 4px 12px 4px 0;
+  }
+  
+.header-gdsc {
+    width: 67px;
+    height: 29px;
+    flex-grow: 0;
+    margin: 0 8px 0 12px;
+    font-family: Noto sans KR;
+    font-size: 23px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: left;
+    color: #000;
+    padding-left: 177px;
+}
+
+.header-konkuk-univ {
+    color: #7C7C7C;
+    font-family: Pretendard;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.48px;
+    padding-top: 32px;
+    padding-left: 252px;
+    display: flexbox;
+}
+
+.nav-bar ul {
+    color: #000;
+    font-family: Pretendard;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    display: flex;
+    gap: 94px;
+    list-style-type: none;
+    margin-right: 119px;
+
+}
+  
+.nav-bar ul li {
+    cursor: pointer;
+} */

src/components/Header.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import GDSC_Symbol from "../assets/images/GDSC_Symbol.png";
+import "./Header.css";
+
+export default function Header() {
+  return (
+    <header className="header-container">
+      <div className="logo-container">
+        <img
+          src={GDSC_Symbol}
+          alt="GDSC Symbol"
+          style={{
+            marginLeft: "120px",
+            marginTop: "29px",
+            width: "45px",
+            height: "21px",
+            flexShrink: 0,
+          }}
+        />
+        <span className="header-gdsc">GDSC</span>
+
+        <span className="header-konkuk-univ">Konkuk Univ.</span>
+      </div>
+
+      <nav className="nav-bar">
+        <ul>
+          <li>Member</li>
+          <li>Program</li>
+          <li>Recruitment</li>
+          <li>Blog</li>
+          <li>FAQ</li>
+        </ul>
+      </nav>
+    </header>
+  );
+}

src/components/RotatingText.css

@@ -0,0 +1,64 @@
+.RotatingText{
+  margin-top: 10px;
+}
+
+.text ul {
+    color: #171717;
+    font-family: Pretendard;
+    font-size: 60px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100px;
+    margin-left: 222px;
+    list-style-type: none;
+    margin-top: 100px;
+  }
+
+  .Rotation {
+    position: absolute; /* 페이지 우측에 위치하도록 설정 */
+    right: 0;
+    width: 442px;
+    height: 442px;
+    margin-right: 222px;
+
+
+  }
+
+  .Rotation img {
+    position: absolute;
+    top: 0;
+    right: 183px;  
+    transform-origin:  center; 
+    transform: translate(-50%, -50%);
+    max-width: 100%;
+    height: auto;
+}
+
+  .large {
+    animation: spin 10s infinite linear;
+    width: 442px;
+    height: 442px;
+    flex-shrink: 0;
+  }
+
+  .mid {
+    animation: spin 100s infinite linear;
+    width: 244.588px;
+    height: 255.162px;
+    flex-shrink: 0;
+  }
+
+  .gray {
+    width: 85.748px;
+    height: 41.106px;
+    flex-shrink: 0;   
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .Rotation img {
+       animation: spin 4s linear infinite; /* animation applied to the <img> tags */
+    }

src/components/RotatingText.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "./RotatingText.css"; // CSS 스타일시트를 import 합니다.
+import GDSC_Symbol_gray from "../assets/images/GDSC_Symbol_gray.png";
+import TLC_large from "../assets/images/TLC_large.png";
+import TLC_mid from "../assets/images/TLC_mid.png";
+
+export default function RotatingText() {
+  return (
+    <div className="RotatingText">
+      <div className="text">
+        <ul>
+          <li>Together,</li>
+          <li>Learn,</li>
+          <li>Connect</li>
+        </ul>
+      </div>
+
+      <div className="Rotation">
+        <img className="large" src={TLC_large} alt="TLC_large" />
+        <img className="mid" src={TLC_mid} alt="TLC_mid" />
+        <img className="gray" src={GDSC_Symbol_gray} alt="GDSC Symbol Gray" />
+      </div>
+    </div>
+  );
+}