Add section about

index.html

@@ -280,3 +280,190 @@ layout: default
     </div>
   </div>
 </section>
+
+<section
+  id="about"
+  class="
+    about
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    py-10
+    border-b
+  "
+>
+  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
+    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">
+      About
+    </h2>
+  </div>
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <p class="section__text text-s lg:text-base italic mb-5 l:max-w-md l:mb-8">
+      Our research is designed to remove centralized third parties from our
+      communication. We believe in the right to privacy, security, and autonomy
+      of the individual.
+    </p>
+    <div
+      class="
+        about__cards
+        container
+        s:mx-auto
+        flex flex-col flex-wrap
+        sm:flex-row
+      "
+    >
+      <div
+        class="
+          about__card
+          flex flex-col
+          w-full
+          sm:w-1/2
+          lm:max-w-screen-xscard
+          mb-6
+          lg:mb-10
+          lm:mr-5
+        "
+      >
+        <img
+          src="/assets/img/1.gif"
+          class="about__gif self-center"
+          alt="Gif animation"
+          width="210"
+          height="210"
+        />
+        <p
+          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
+        >
+          Researching All Layers
+        </p>
+        <p class="about__text text-s lg:text-base opacity-75">
+          Concerned with all layers in the stack including underlying
+          transports, p2p overlays and routing, initial trust establishment, and
+          semantics for things like group chat.
+        </p>
+      </div>
+      <div
+        class="
+          about__card
+          flex flex-col
+          w-full
+          sm:w-1/2
+          lm:max-w-screen-xscard
+          sm:pl-5
+          lm:pl-0
+          mb-6
+          lg:mb-10
+        "
+      >
+        <img
+          src="/assets/img/3.gif"
+          class="about__gif self-center"
+          alt="Gif animation"
+          width="210"
+          height="210"
+        />
+        <p
+          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
+        >
+          Peer-to-Peer
+        </p>
+        <p class="about__text text-s lg:text-base opacity-75">
+          The protocols we work on are pure peer-to-peer, and aim to minimize
+          centralization. This too is in opposition to many initiatives in the
+          secure messaging space.
+        </p>
+      </div>
+      <div
+        class="
+          about__card
+          flex flex-col
+          w-full
+          sm:w-1/2
+          lm:max-w-screen-xscard
+          mb-6
+          lg:mb-10
+          lm:mr-5
+        "
+      >
+        <img
+          src="/assets/img/4.gif"
+          class="about__gif self-center"
+          alt="Gif animation"
+          width="210"
+          height="210"
+        />
+        <p
+          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
+        >
+          Security, Privacy, Censorship Resistance
+        </p>
+        <p class="about__text text-s lg:text-base opacity-75">
+          Assumes the basics such as end-to-end encryption, forward secrecy,
+          avoiding MITM-attacks. Vac also places a premium on privacy and
+          censorship resistance from port blocking, traffic analysis, and
+          similar.
+        </p>
+      </div>
+      <div
+        class="
+          about__card
+          flex flex-col
+          w-full
+          sm:w-1/2
+          lm:max-w-screen-xscard
+          sm:pl-5
+          lm:pl-0
+          mb-6
+          lg:mb-10
+        "
+      >
+        <img
+          src="/assets/img/5.gif"
+          class="about__gif self-center"
+          alt="Gif animation"
+          width="210"
+          height="210"
+        />
+        <p
+          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
+        >
+          Modular System
+        </p>
+        <p class="about__text text-s lg:text-base opacity-75">
+          Provide options at each layer in the stack, instead of having a
+          tightly coupled set of protocols. Allowing developers to choose what
+          they use and ensure they know each choice comes with different
+          trade-offs.
+        </p>
+      </div>
+      <div
+        class="
+          about__card
+          flex flex-col
+          w-full
+          sm:w-1/2
+          lm:max-w-screen-xscard lm:mr-5
+        "
+      >
+        <img
+          src="/assets/img/2.gif"
+          class="about__gif self-center"
+          alt="Gif animation"
+          width="210"
+          height="210"
+        />
+        <p
+          class="about__heading mb-4 font-semibold text-s lg:text-sm text-left"
+        >
+          Generalized Messaging
+        </p>
+        <p class="about__text text-s lg:text-base opacity-75">
+          This includes both human to human communication, as well as machine to
+          machine communication. Texting, data transfer, financial transactions,
+          state channels and more.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>

tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
     },
     screens: {
       xxs: "370px",
+      xscard: "436px",
       xs: "450px",
       xm: "480px",
       sm: "570px",
@@ -19,6 +20,7 @@ module.exports = {
       "lg-max": { max: "1024px" },
       lg: "1024px",
       l: "1199px",
+      lm: "1280px",
       xl: "1440px",
     },
     maxHeight: {