gpuedge · kasim393 · Jan 15, 2023
diff --git a/app/assets/dice.png b/app/assets/dice.png
diff --git a/app/assets/linkedin.png b/app/assets/linkedin.png
diff --git a/app/assets/up-right-arrow.png b/app/assets/up-right-arrow.png
diff --git a/app/assets/wechat.png b/app/assets/wechat.png
diff --git a/app/components/ArrowUpIcon.jsx b/app/components/ArrowUpIcon.jsx
@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from "react";
+import { BsFillArrowUpCircleFill } from "react-icons/bs";
+const ArrowUpIcon = () => {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    // window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    const handleVisibility = () => {
+      window.pageYOffset > 400 ? setShowButton(true) : setShowButton(false);
+    };
+    window.addEventListener("scroll", handleVisibility);
+    return () => {
+      window.removeEventListener("scroll", handleVisibility);
+    };
+  }, []);
+  return (
+    <>
+      {showButton && (
+        <div
+          className="arrowUpIcon"
+          onClick={() => {
+            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+          }}
+        >
+          <BsFillArrowUpCircleFill />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ArrowUpIcon;
diff --git a/app/components/article/Article.jsx b/app/components/article/Article.jsx
@@ -1,6 +1,8 @@
 import ANNIE from "~/assets/1647559287559.jpeg";
 import IVAN from "~/assets/1652316097723.jpeg";
 import HENRY from "~/assets/IMG_1906.png";
+import LinkedIn from "~/assets/linkedin.png";
+import WeChat from "~/assets/wechat.png";
 
 const Article = () => {
   return (
@@ -9,39 +11,48 @@ const Article = () => {
       <div className="card-container team-card">
         <div className="card-wrapper">
           <img style={{ borderRadius: "10%" }} width={260} src={ANNIE} alt="" />
-          <p>
-            Annie - Marketing
-            <br /> Meet her in Krakow
+          <div>
+            <p>Annie - Marketing</p>
+            <span>Meet her in Krakow</span>
             <br />
             <a
-              href="https://www.linkedin.com/in/anna-polishchuk-b671401b7"
+              href="httdivs://www.linkedin.com/in/anna-polishchuk-b671401b7"
               target="_blank"
+              rel="noreferrer"
             >
-              LinkedIn
+              <img src={LinkedIn} width="25px" alt="" />
             </a>
-          </p>
+          </div>
         </div>
         <div className="card-wrapper">
           <img style={{ borderRadius: "10%" }} width={260} src={IVAN} alt="" />
-          <p>
-            Ivan - Tech
-            <br /> Meet him in Toronto
+          <div>
+            <p> Ivan - Tech</p>
+            <span>Meet him in Toronto</span>
             <br />
-            <a href="https://www.linkedin.com/in/ivan-svirid/" target="_blank">
-              LinkedIn
+            <a
+              href="https://www.linkedin.com/in/ivan-svirid/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img src={LinkedIn} width="25px" alt="" />
             </a>
-          </p>
+          </div>
         </div>
         <div className="card-wrapper">
           <img style={{ borderRadius: "10%" }} width={260} src={HENRY} alt="" />
-          <p>
-            Henry - Operations
-            <br /> Meet him in Hefei
+          <div>
+            <p> Henry - Operations</p>
+            <span> Meet him in Hefei</span>
             <br />
-            <a href="weixin://dl/chat?henryduolaimifa" target="_blank">
-              WeChat
+            <a
+              href="weixin://dl/chat?henryduolaimifa"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img src={WeChat} width="25px" alt="" />
             </a>
-          </p>
+          </div>
         </div>
       </div>
       {/*<div className="view-article">

diff --git a/app/components/article/article.css b/app/components/article/article.css
@@ -22,25 +22,30 @@
   margin-bottom: -30px;
 }
 .card-container {
-  display: flex;
-  justify-content: space-between;
+  place-items: center;
 }
 .card-wrapper {
-  width: 360px;
+  width: fit-content;
   height: 411px;
   overflow: hidden;
   margin-top: 80px;
   /* cursor: pointer; */
   transition: filter 0.1s ease-in;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  /* align-items: center; */
+}
+.card-wrapper div {
+  display: flex;
+  flex-direction: column;
+}
+.card-wrapper a {
+  width: fit-content;
 }
-
 .card-wrapper p {
-  margin-top: 25px;
+  margin-top: 18px;
   font-weight: 500;
-  text-align: center;
+  /* text-align: center; */
   color: var(--text);
   font-size: 1.5rem;
   letter-spacing: 0.01em;
@@ -86,6 +91,9 @@
   .article_section:before {
     height: 975px;
   }
+  .article_section .heading {
+    margin-bottom: 0px;
+  }
 }
 @media screen and (max-width: 700px) {
   .article_section:before {
@@ -102,10 +110,16 @@
     margin-top: 40px !important;
   }
   .card-wrapper img {
-    height: 230px;
+    /* height: 230px; */
     margin: auto;
     object-fit: cover;
   }
+  .card-wrapper div {
+    text-align: center;
+  }
+  .card-wrapper a {
+    place-self: center;
+  }
   .article_section .heading {
     text-align: center;
     font-size: 24px;

diff --git a/app/components/blog/BlogSection.jsx b/app/components/blog/BlogSection.jsx
@@ -0,0 +1,67 @@
+import React from "react";
+import ai from "../../assets/aii.jpg";
+import livee from "../../assets/livee.jpg";
+import render from "../../assets/3199.jpg";
+import transcoding from "../../assets/transcoding.jpg";
+import { Link } from "@remix-run/react";
+const blogSection = () => {
+  return (
+    <div className="blog web-align">
+      <h1>Blog</h1>
+      <div className="blog_section">
+        <Link className="link blog_card" to="/blog/ai">
+          <div className="blog_card_img">
+            <img src={ai} alt="banner" />
+          </div>
+          <div className="blog_card_content">
+            <span>May 30, 2022</span>
+            <h3>AI with Distributed Learning</h3>
+            <p>
+              When building machine learning models, we often come across tasks
+              that would be more efficient and effective if they could be
+              parallelized.
+            </p>
+          </div>
+        </Link>
+        <Link className="link blog_card" to="/blog/homomorphic_encryption">
+          <div className="blog_card_img">
+            <img src={livee} alt="" />
+          </div>
+          <div className="blog_card_content">
+            <span>June 26, 2022</span>
+            <h3>Homomorphic Encryption for secure training</h3>
+          </div>
+        </Link>
+        <Link className="link blog_card" to="/blog/render">
+          <div className="blog_card_img">
+            <img src={render} alt="" />
+          </div>
+          <div className="blog_card_content">
+            <span>May 23, 2022</span>
+            <h3>0% lost time</h3>
+          </div>
+        </Link>
+        <Link className="link blog_card" to="/blog/transcode">
+          <div className="blog_card_img">
+            <img src={transcoding} alt="" />
+          </div>
+          <div className="blog_card_content">
+            <span>May 16, 2022</span>
+            <h3>Transcoding up to 1080p /w Video Delivery</h3>
+          </div>
+        </Link>
+        <Link className=" link blog_card" to="/blog/live">
+          <div className="blog_card_img">
+            <img src={livee} alt="" />
+          </div>
+          <div className="blog_card_content">
+            <span>May 9, 2022</span>
+            <h3>Live Streaming with OBS+RTMP</h3>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default blogSection;
diff --git a/app/components/blog/blogsection.css b/app/components/blog/blogsection.css
@@ -0,0 +1,105 @@
+.blog {
+  margin-top: 40px;
+}
+.blog h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  color: #252939;
+}
+.blog_section {
+  display: grid;
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2rem;
+}
+.blog_section a:first-child {
+  grid-row: 1/-1;
+  flex-direction: column;
+}
+.blog_section a:first-child .blog_card_img img {
+  height: 200px;
+  width: 100%;
+}
+.blog_section a:first-child h3 {
+  font-size: 32px;
+}
+.blog_section a:first-child span {
+  margin-top: 10px;
+}
+.blog_card {
+  border: 1px solid #e0e5eb;
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  transition: all 0.3s ease-in-out;
+  display: flex;
+  gap: 1.5rem;
+}
+.blog_card:hover {
+  cursor: pointer;
+  border: 1px solid transparent;
+  box-shadow: 0px 2px 10px rgba(20, 26, 31, 0.15);
+}
+.blog_card:hover h3 {
+  color: #0073e6;
+}
+.blog_card_img {
+  flex: 2;
+}
+.blog_card_img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0.5rem;
+}
+.blog_card_content {
+  flex: 4;
+}
+.blog_card_content span {
+  color: #6c7993;
+  font-weight: 400;
+  margin-bottom: 10px;
+  display: block;
+}
+@media screen and (max-width: 1100px) {
+  .blog_section {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .blog_section a:first-child {
+    grid-row: unset;
+    flex-direction: row;
+  }
+  .blog_section a:first-child .blog_card_img img {
+    height: 100px;
+  }
+  .blog_section a:first-child h3 {
+    font-size: 18px;
+  }
+  .blog_card_img {
+    flex: 1;
+  }
+  .blog_card_img img {
+    height: 100px;
+  }
+  .blog_card_content {
+    flex: 3;
+  }
+  .blog_card_content p {
+    display: none;
+  }
+}
+@media screen and (max-width: 630px) {
+  .blog_card {
+    flex-direction: column;
+  }
+  .blog_section a:first-child {
+    flex-direction: column;
+  }
+  .blog_card_content {
+    flex: unset;
+  }
+}
+
+.link {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/app/components/client/client.css b/app/components/client/client.css
@@ -0,0 +1,42 @@
+.client {
+  margin-top: 60px;
+  background: #f6f6f7;
+  padding: 30px 0 40px 0;
+}
+
+.client h1 {
+  text-align: center;
+  color: #252939;
+  margin-bottom: 20px;
+}
+.client-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+.client-card {
+  box-shadow: 0px 2px 10px rgba(20, 26, 31, 0.15);
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: white;
+}
+.client-card__img img {
+  width: 60px;
+}
+.client-card__text {
+  margin: 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+.client-card__footer {
+  display: flex;
+  gap: 10px;
+}
+.client-card__footer a {
+  color: rgb(0, 115, 230);
+  text-decoration: none;
+  line-height: 1;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 14px;
+}