Initial commit

src/components/AboutUs/AboutUs.astro

@@ -0,0 +1,31 @@
+<section class="about-us-section" id="about">
+  <div class="about-us-panel">
+    <h2>About Us</h2>
+    <p>
+      <strong>UP IECEP</strong> is an academic, non-profit, non-political duly recognized
+      organization of the UP College of Engineering aimed at improving the academic
+      performance of its members and to establish a common ground for BS ECE students
+      in the Electrical and Electronics Engineering Institute.
+    </p>
+  </div>
+  <div class="mission-vision">
+    <div class="mission-statement">
+      <h3>our mission</h3>
+      <p>
+        To uphold academic excellence, foster camaraderie, and promote holistic
+        development among its members.
+      </p>
+      <p>
+        To develop the skills and abilities of the members as future
+        professionals.
+      </p>
+    </div>
+    <div class="vision-statement">
+      <h3>our vision</h3>
+      <p>
+        To be an organization of humane, proficient, competitive and virtuous
+        professionals.
+      </p>
+    </div>
+  </div>
+</section>

src/components/AboutUs/about-us.scss

@@ -0,0 +1,137 @@
+.about-us-section {
+  background-color: $text-light;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-flow: row;
+  padding-block: 8.75rem;
+  height: fit-content;
+  min-height: fit-content;
+  gap: 1.25rem;
+  scroll-margin-top: 3rem;
+
+  .about-us-panel {
+    place-self: center end;
+    display: grid;
+    grid-template-columns: 1fr;
+    border-radius: 4rem;
+    box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
+    padding-inline: 4.75rem;
+    padding-top: 3.44rem;
+    padding-bottom: 3.81rem;
+    width: calc(100% - 12.81rem);
+    text-align: center;
+
+    h2 {
+      color: $primary;
+      text-align: center;
+      font-size: 4.4375rem;
+      font-weight: 900;
+      letter-spacing: 0.08875rem;
+      margin-bottom: 3.25rem;
+    }
+
+    p {
+      text-align: center;
+      font-size: 1.25rem;
+      font-synthesis-weight: 600;
+      line-height: 1.6;
+    }
+  }
+
+  .mission-vision {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-content: center;
+    width: calc(100% - 12.81rem);
+
+    .mission-statement,
+    .vision-statement {
+      display: grid;
+      grid-template-columns: 1fr;
+      place-items: center;
+      h3 {
+        color: $primary;
+        text-align: center;
+        font-size: 3.75rem;
+        font-weight: 500;
+        letter-spacing: 0.075rem;
+        margin-bottom: 3rem;
+      }
+      p {
+        text-align: center;
+        font-size: 1.25rem;
+        line-height: 1.6;
+        font-style: normal;
+        font-weight: 400;
+        width: calc(10 / 12 * 100%);
+      }
+    }
+    .mission-statement {
+      margin-bottom: 1.81rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .about-us-section {
+    padding-block: 6rem;
+    .about-us-panel {
+      width: calc(100% - 6rem);
+      padding-inline: 3rem;
+    }
+    .mission-vision {
+      width: calc(100% - 6rem);
+      .mission-statement,
+      .vision-statement {
+        h3 {
+          margin-bottom: 1rem;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .about-us-section {
+    padding-block: 3rem;
+    .about-us-panel {
+      width: calc(100% - 3rem);
+      padding-inline: 1.5rem;
+    }
+    .mission-vision {
+      width: calc(100% - 3rem);
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .about-us-section {
+    grid-template-columns: repeat(1, 1fr);
+    padding-inline: 2rem;
+    padding-block: 4rem;
+    height: fit-content;
+
+    .about-us-panel {
+      place-self: center;
+      width: 100%;
+      padding-inline: 2rem;
+
+      h2 {
+        font-size: 3rem;
+      }
+    }
+
+    .mission-vision {
+      width: 100%;
+      place-self: center;
+
+      .mission-statement,
+      .vision-statement {
+        h3 {
+          margin-bottom: 1rem;
+          font-size: 2.5rem;
+        }
+      }
+    }
+  }
+}