WIP: contact form

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@splidejs/react-splide": "^0.6.12",
+    "axios": "^0.27.2",
     "gatsby": "^4.1.0",
     "gatsby-plugin-google-analytics": "^4.1.0",
     "gatsby-plugin-image": "^2.1.0",

src/components/contact-form/contact-form.component.jsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import axios from "axios";
 import "./contact-form.style.scss";
 import Dog from "../../assets/images/main/contact-form/mask.svg";
 import BluePlanet from "../../assets/images/main/contact-form/Planet Blue.svg";
@@ -7,10 +8,40 @@ import YellowPlanet from "../../assets/images/main/contact-form/Planet Yellow.sv
 import FormInput from "../form-input/form-input.component";
 import CustomButton from "../custom-button/custom-button.component";
 
+const postForm = (e, data) => {
+  e.preventDefault();
+  console.log("post form", data);
+  axios
+    .post("http://127.0.0.1:3005/contact", data)
+    .then((res) => console.log(res));
+};
+
 const ContactForm = () => {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+  });
+
+  const setName = (name) => {
+    setFormData({ ...formData, name: name });
+  };
+
+  const setEmail = (email) => {
+    setFormData({ ...formData, email: email });
+  };
+
+  const setPhone = (phone) => {
+    setFormData({ ...formData, phone: phone });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(e);
+  };
+
   return (
     <div className="container contact-form">
-
       <h2>Let’s bring your project to the Moon</h2>
 
       <div className="image">
@@ -18,30 +49,37 @@ const ContactForm = () => {
         <img src={BluePlanet} alt="blue planet" className="planet blue" />
         <img src={YellowPlanet} alt="yellow planet" className="planet yellow" />
       </div>
-      
+
-      <form action="" className="container">
+      <form
-        <FormInput 
+        // action="http://127.0.0.1:3005/contact"
-          name="name" 
+        className="container"
-          type="text" 
+        // method="POST"
+        onSubmit={(e) => postForm(e, formData)}
+      >
+        <FormInput
+          name="name"
+          type="text"
           label="Name"
-          required 
+          onChange={setName}
+          required
         />
-        <FormInput 
+        <FormInput
-          name="email" 
+          name="email"
-          type="email" 
+          type="email"
           label="E-mail"
-          required 
+          onChange={setEmail}
+          required
         />
-        <FormInput 
+        <FormInput
-          name="phone" 
+          name="phone"
-          type="tel" 
+          type="tel"
           label="Phone"
+          onChange={setPhone}
           required
         />
 
-        <CustomButton text="Send"/>
+        <CustomButton text="Send" />
       </form>
-
     </div>
   );
 };

src/components/custom-button/custom-button.component.jsx

@@ -1,12 +1,19 @@
 import React from "react";
 import "./custom-button.style.scss";
 
-const CustomButton = (props) => {
+const CustomButton = ({ text, onSubmit, ...props }) => {
   return (
-    <button className="btn">
+    <button
-      {props.text}
+      className="btn"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      {...props}
+    >
+      {text}
     </button>
-  )
+  );
-}
+};
 
-export default CustomButton
+export default CustomButton;

src/components/custom-button/custom-button.style.scss

@@ -1,8 +1,26 @@
 @use "../../assets/stylesheets/base/colors" as *;
 
+@keyframes example {
+  0% {
+    background-position: -100% -100%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
 button {
-  background: radial-gradient(35.83% 70.83% at 0% 0%, rgba(93, 52, 69, 0.15) 0%, rgba(161, 183, 254, 0) 100%),
+  background: radial-gradient(
-    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), #111;
+      35.83% 70.83% at 0% 0%,
+      rgba(93, 52, 69, 0.15) 0%,
+      rgba(161, 183, 254, 0) 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.05) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #111;
   border-radius: 37.5px;
   color: $color-text-primary;
   text-transform: uppercase;
@@ -20,21 +38,76 @@ button {
     bottom: -2px;
     left: -2px;
     right: -2px;
-    background: linear-gradient(172.29deg, rgba(241, 161, 254, 0.3) 6.23%, rgba(161, 183, 254, 0) 94.36%),
+    background: linear-gradient(
-      linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(170, 170, 170, 0.04) 100%);
+        172.29deg,
+        rgba(241, 161, 254, 0.3) 6.23%,
+        rgba(161, 183, 254, 0) 94.36%
+      ),
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.5) 0%,
+        rgba(170, 170, 170, 0.04) 100%
+      );
     content: "";
     z-index: -1;
     border-radius: 37.5px;
   }
 
   &:hover {
-    background: 
+    background: linear-gradient(
-      linear-gradient(180deg, rgba(194, 64, 118, 0.25) 0%, rgba(0, 40, 170, 0) 100%),
+        180deg,
-      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%), #111;
+        rgba(194, 64, 118, 0.25) 0%,
-      background-clip: padding-box;
+        rgba(0, 40, 170, 0) 100%
+      ),
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.05) 0%,
+        rgba(255, 255, 255, 0) 100%
+      ),
+      #111;
+    background-clip: padding-box;
+    background-size: 100% 100%;
 
     &:after {
       background: none;
     }
   }
 }
+
+// @property --a {
+//   syntax: "<angle>";
+//   inherits: false;
+//   initial-value: 90deg;
+// }
+// @property --l {
+//   syntax: "<percentage>";
+//   inherits: false;
+//   initial-value: 10%;
+// }
+// @property --c {
+//   syntax: "<color>";
+//   inherits: false;
+//   initial-value: red;
+// }
+
+// button {
+//   /*  needed for firefox to have a valid output */
+//   --a: 80deg;
+//   --l: 10%;
+//   --c: red;
+//   /**/
+//   cursor: pointer;
+//   height: 200px;
+//   transition: --a 0.5s 0.1s, --l 0.5s, --c 0.8s;
+//   background: linear-gradient(
+//     var(--a),
+//     var(--c) var(--l),
+//     blue,
+//     var(--c) calc(100% - var(--l))
+//   );
+// }
+// button:hover {
+//   --a: 360deg;
+//   --l: 40%;
+//   --c: green;
+// }

src/components/form-input/form-input.component.jsx

@@ -1,24 +1,31 @@
 import React, { useState } from "react";
 import "./form-input.style.scss";
 
-const FormInput = ({ handleChange, label, ...otherProps }) => {
+const FormInput = ({ handleChange, label, onChange, ...otherProps }) => {
   const [input, setInput] = useState("");
   const [toggleLabel, changeToggleLabel] = useState(false);
 
   return (
     <div className="group">
-
+      <label
-      <label className={`${toggleLabel ? 'shrink' : ''} ${input ? 'shrink' : ''} form-input-label`}>{label}</label>
+        className={`${toggleLabel ? "shrink" : ""} ${
+          input ? "shrink" : ""
+        } form-input-label`}
+      >
+        {label}
+      </label>
       <input
         value={input}
         onChange={(e) => {
           setInput(e.target.value);
+          onChange(e.target.value);
         }}
         onFocus={() => changeToggleLabel(true)}
-        onBlur={() => input ? changeToggleLabel(true) : changeToggleLabel(false)}
+        onBlur={() =>
+          input ? changeToggleLabel(true) : changeToggleLabel(false)
+        }
         {...otherProps}
       />
-
     </div>
   );
 };

src/components/swiper/mid-swiper.component.jsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import "./swiper.style.scss";
-import Inflid from "../../assets/images/main/projects/inflid.png";
+import Inflid from "../../assets/images/main/projects/inflid_full_1.png";
 import CustomPC from "../../assets/images/main/projects/custom-pc4u.png";
 import Mockba from "../../assets/images/main/projects/mockba-modular.png";
 import Pryatki from "../../assets/images/main/projects/pryatki.png";
@@ -12,15 +12,17 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import SwiperCore, { EffectCoverflow, Pagination } from "swiper";
-import { Autoplay, Navigation } from 'swiper';
+import { Autoplay } from "swiper";
 SwiperCore.use([EffectCoverflow, Pagination]);
 
 const ProjectsSwiper = () => {
+  const [activeSlide, setSlide] = useState("");
+
   return (
     <Swiper
       loop={true}
       autoplay={{
-        delay: 1000,
+        delay: 2500,
         disableOnInteraction: true,
       }}
       speed={1200}
@@ -33,43 +35,28 @@ const ProjectsSwiper = () => {
         modifier: 1,
         slideShadows: false,
       }}
-
       centeredSlides={true}
       slideToClickedSlide={true}
-      // slidesPerView={"auto"}
+      onSlideChange={(swiper) => {
-      onSlideChange={() => {
+        setSlide(swiper.realIndex);
-        console.log("slide change");
-
       }}
-
       breakpoints={{
-        0: { // when window >=0px - webflow mobile portriat
+        0: {
           slidesPerView: 1,
-          // spaceBetween: 10,
         },
-        // 767: { // when window >= 767px - webflow tablet
+        1200: {
-        //   slidesPerView: 2,
-        //   // spaceBetween: -16,
-        // },
-        1200: { // when window >= 988px - webflow desktop
           slidesPerView: 2,
-          coverflowEffect: {
+        },
-            // stretch: 500
+      }}
-          }
+      onSwiper={(swiper) => {
-        }
+        console.log(swiper);
       }}
-
-      onSwiper={
-        (swiper) => {
-          console.log(swiper);
-        }
-      }
       modules={[Autoplay]}
+      id={`active-slide-${activeSlide}`}
     >
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-1">
         <h2>Inflid</h2>
         <div className="img-wrap">
-          <img src={BrowserWrap} alt="" className="img-overlay"/>
           <img src={Inflid} alt="inflid" />
         </div>
         <div className="project-info">
@@ -81,10 +68,9 @@ const ProjectsSwiper = () => {
           <p>Smart matching platform for Streamers and Advertisers</p>
         </div>
       </SwiperSlide>
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-2">
         <h2>Custom PC4U</h2>
         <div className="img-wrap">
-          <img src={BrowserWrap} alt="" className="img-overlay" />
           <img src={CustomPC} alt="inflid" />
         </div>
         <div className="project-info">
@@ -96,13 +82,13 @@ const ProjectsSwiper = () => {
           <p>Smart matching platform for Streamers and Advertisers</p>
         </div>
       </SwiperSlide>
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-3">
         <h2>MOCKBA MODULAR</h2>
         <div className="img-wrap">
           <img src={Mockba} alt="inflid" />
         </div>
         <div className="project-info">
-        <div>
+          <div>
             <p>Website</p>
             <p>Platform</p>
             <p>UI / UX</p>
@@ -110,7 +96,7 @@ const ProjectsSwiper = () => {
           <p>Smart matching platform for Streamers and Advertisers</p>
         </div>
       </SwiperSlide>
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-4">
         <h2>PRIYATKI</h2>
         <div className="img-wrap">
           <img src={Pryatki} alt="inflid" />
@@ -124,7 +110,7 @@ const ProjectsSwiper = () => {
           <p>Smart matching platform for Streamers and Advertisers</p>
         </div>
       </SwiperSlide>
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-5">
         <h2>SIZZAPP</h2>
         <div className="img-wrap">
           <img src={Sizzapp} alt="inflid" />
@@ -138,7 +124,7 @@ const ProjectsSwiper = () => {
           <p>Smart matching platform for Streamers and Advertisers</p>
         </div>
       </SwiperSlide>
-      <SwiperSlide>
+      <SwiperSlide id="project-slide-6">
         <h2>TrackPro</h2>
         <div className="img-wrap">
           <img src={Trackpro} alt="inflid" />

src/components/swiper/swiper.style.scss

@@ -4,11 +4,72 @@
 #projects {
   .swiper {
     width: 100%;
-    &::before {
+
+    @include for-mobile {
+      background-size: 150%;
+      background-position: 50%;
+    }
+
+    &#active-slide-0 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(255, 0, 92, 0.4) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+
+    &#active-slide-1 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(255, 0, 0, 0.5) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+    &#active-slide-2 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(255, 196, 105, 0.7) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+    &#active-slide-3 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(37, 192, 255, 0.9) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+    &#active-slide-4 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(0, 231, 10, 0.4) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+    &#active-slide-5 {
+      background: radial-gradient(
+        31.95% 51.75% at 50% 51.75%,
+        rgba(245, 194, 26, 0.4) 0%,
+        rgba(23, 23, 23, 0) 100%
+      );
+    }
+
+    @include for-tablets {
+      &#active-slide-0,
+      &#active-slide-1,
+      &#active-slide-2,
+      &#active-slide-3,
+      &#active-slide-4,
+      &#active-slide-5 {
+        background-size: 150%;
+        background-position: 50%;
+      }
+    }
+
+    &:before {
       content: "";
       width: 100%;
       height: 100%;
-      background-color: #623799;
       position: absolute;
       background: linear-gradient(
         90deg,
@@ -61,13 +122,13 @@
     img {
       margin: 0 auto;
       // width: 66%;
-      background: linear-gradient(
+      // background: linear-gradient(
-        90deg,
+      //   90deg,
-        rgba(0, 0, 0, 0) 0%,
+      //   rgba(0, 0, 0, 0) 0%,
-        rgba(17, 17, 17, 1) 5%,
+      //   rgba(17, 17, 17, 1) 5%,
-        rgba(17, 17, 17, 1) 95%,
+      //   rgba(17, 17, 17, 1) 95%,
-        rgba(0, 0, 0, 0) 100%
+      //   rgba(0, 0, 0, 0) 100%
-      );
+      // );
     }
 
     .project-info {