Merge pull request #222 from zstenger93/frontend

Frontend
zstenger93 · Jan 9, 2024 · e239b0d · e239b0d
2 parents 14addc4 + b2ac87e
commit e239b0d
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 37 deletions.
diff --git a/frontend/src/images/about/jamshidbek.jpg b/frontend/src/images/about/jamshidbek.jpg
diff --git a/frontend/src/images/about/karlis.png b/frontend/src/images/about/karlis.png
diff --git a/frontend/src/images/about/laszlo.png b/frontend/src/images/about/laszlo.png
diff --git a/frontend/src/images/about/zsolt.jpeg b/frontend/src/images/about/zsolt.jpeg
diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.js
@@ -1,25 +1,30 @@
-import React from "react";
+/* eslint-disable */
+import React, { useEffect } from "react";
 import Slider from "react-slick";
 import { useTranslation } from "react-i18next";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
+import backgroundImage from "../images/welcomebg.jpg";
+import zsolt from "../images/about/zsolt.jpeg";
+import jamshidbek from "../images/about/jamshidbek.jpg";
+import karlis from "../images/about/karlis.png";
+import laszlo from "../images/about/laszlo.png";
 
 function About() {
+  const [selectedCard, setSelectedCard] = React.useState(null);
   const { t } = useTranslation();
   const teamMembers = [
     {
       name: "Zsolt",
       title: "Mr. Git",
       description: t("About zstenger"),
-      image:
-        "https://raw.githubusercontent.com/zstenger93/Transcendence/master/images/transcendence.webp",
+      image: zsolt,
     },
     {
       name: "Jamshidbek",
       title: '"Can I drop the table?"',
       description: t("About jergashe"),
-      image:
-        "https://raw.githubusercontent.com/zstenger93/Transcendence/master/images/transcendence.webp",
+      image: jamshidbek,
     },
     {
       name: "Azer",
@@ -32,56 +37,120 @@ function About() {
       name: "Karlis",
       title: '"I can fix it"',
       description: t("About kvebers"),
-      image:
-        "https://raw.githubusercontent.com/zstenger93/Transcendence/master/images/transcendence.webp",
+      image: karlis,
     },
     {
       name: "Laszlo",
       title: '"Absolutely Proprietary"',
       description: t("About slaszlo"),
-      image:
-        "https://raw.githubusercontent.com/zstenger93/Transcendence/master/images/transcendence.webp",
+      image: laszlo,
     },
   ];
 
+  useEffect(() => {
+    teamMembers.forEach((member) => {
+      const img = new Image();
+      img.src = member.image;
+    });
+  }, []);
+
   const settings = {
     dots: false,
-    infinite: false,
+    infinite: true,
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
   };
 
   return (
-    <div
-      className="flex items-center justify-center h-screen bg-cover 
-	  bg-center bg-no-repeat z-0"
-    >
-      <Slider {...settings} className="max-w-sm">
-        {teamMembers.map((member, index) => (
-          <div
-            key={index}
-            className="max-w-sm rounded overflow-hidden shadow-lg 
+    <div className="flex items-center justify-center h-screen bg-cover bg-center bg-no-repeat z-0">
+      <div className="w-full h-screen flex items-center justify-center lg:hidden">
+        <Slider {...settings} className="max-w-sm flex flex-col">
+          {teamMembers.map((member, index) => (
+            <div
+              key={index}
+              className="flex flex-col min-h-full max-w-sm rounded overflow-hidden shadow-lg 
 			bg-gray-900"
-          >
-            <img className="w-full" src={member.image} alt={member.name} />
-            <div className="px-6 py-4">
-              <div
-                className="font-bold text-white font-nosifer 
+            >
+              <img
+                className="w-auto h-96 block mx-auto mt-3"
+                src={member.image}
+                alt={member.name}
+              />
+              <div className="px-6 py-4">
+                <div
+                  className="font-bold text-white font-nosifer 
 			  	text-center text-xl mb-2"
-              >
-                {member.name}
+                >
+                  {member.name}
+                </div>
+                <div className="text-white font-roboto text-center text-sm mb-2">
+                  {member.title}
+                </div>
+                <p className="text-white text-center text-base">
+                  {member.description}
+                </p>
               </div>
-              <div className="text-white font-roboto text-center text-sm mb-2">
-                {member.title}
-              </div>
-              <p className="text-white text-center text-base">
-                {member.description}
-              </p>
             </div>
-          </div>
-        ))}
-      </Slider>
+          ))}
+        </Slider>
+      </div>
+      <div className="hidden lg:flex lg:items-center lg:justify-center w-full h-screen">
+        <div className="h-192 flex flex-wrap justify-center">
+          {teamMembers.map((member, index) => (
+            <label
+              key={index}
+              htmlFor={`c${index}`}
+              className={`w-20 bg-cover cursor-pointer overflow-hidden rounded-2xl m-2
+			  flex flex-col items-center justify-center transition-all duration-800
+			  ease-in-out transform-gpu shadow-2xl ${selectedCard === index ? "w-96" : ""}`}
+              style={{ backgroundImage: `url(${backgroundImage})` }}
+            >
+              <input
+                type="radio"
+                id={`c${index}`}
+                name="card"
+                className="hidden"
+                onChange={() => setSelectedCard(index)}
+              />
+              <div className="flex flex-col items-center justify-center">
+                <img
+                  src={member.image}
+                  alt={member.name}
+                  className="m-3 p-3 rounded-custom"
+                />
+                <h4
+                  className={`mt-1 mb-1 font-nosifer text-xl text-white text-center
+				  transform
+				  ${selectedCard === index ? "" : "flex flex-col"}`}
+                >
+                  {member.name.split("").map((letter, i) => (
+                    <span key={i}>{letter}</span>
+                  ))}
+                </h4>
+                {selectedCard === index && (
+                  <>
+                    <p
+                      className={`transition-opacity duration-500 ease-in-out overflow-hidden 
+					  text-white text-center mb-3
+					  ${selectedCard === index ? "opacity-100 max-h-full" : "opacity-0 max-h-0"}`}
+                    >
+                      {member.title}
+                    </p>
+                    <p
+                      className={`transition-opacity duration-500 ease-in-out overflow-hidden 
+					  text-white text-center mb-3
+					  ${selectedCard === index ? "opacity-100 max-h-full" : "opacity-0 max-h-0"}`}
+                    >
+                      {member.description}
+                    </p>
+                  </>
+                )}
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
@@ -21,5 +21,11 @@
 }
 
 :root {
-	--svh: calc(100vh - var(--safe-area-inset-bottom) - var(--safe-area-inset-top));
-  }
+  --svh: calc(
+    100vh - var(--safe-area-inset-bottom) - var(--safe-area-inset-top)
+  );
+}
+
+.writing-mode-vertical {
+  writing-mode: vertical-lr;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       height: {
         svh: "var(--svh)",
+		'192': '36rem',
       },
       fontSize: {
         "1.5xl": "1.275rem",
@@ -21,6 +22,9 @@ module.exports = {
         "purple-750-opacity-welcome": "rgba(76, 41, 88, 0.9)",
         "gray-900-opacity": "rgba(31, 41, 55, 0.2)",
         darkred: "#330404",
+      },
+	  borderRadius: {
+        'custom': '6%',
       },
     },
   },