From 3c9da35addbc944236307498ce2feb5026ce2a7a Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Mon, 21 Nov 2022 16:17:38 +0500
Subject: [PATCH] added backlight to vector images

---
 .../cloudSolution/cloudSolution.css           | 50 +++++++++++-
 src/components/content/content.tsx            |  4 +-
 src/components/devices/devices.css            | 20 +++++
 src/components/footer/footer.css              |  1 -
 src/components/multiplayer/multiplayer.tsx    |  6 +-
 .../photoComponent/photoComponent.tsx         |  7 +-
 src/components/player/player.tsx              |  7 +-
 .../sliderComponent/sliderComponent.tsx       | 20 ++---
 src/styles/styles.css                         | 80 +++++++++++++++++--
 9 files changed, 166 insertions(+), 29 deletions(-)

diff --git a/src/components/cloudSolution/cloudSolution.css b/src/components/cloudSolution/cloudSolution.css
index e3f9b7a..1817e34 100644
--- a/src/components/cloudSolution/cloudSolution.css
+++ b/src/components/cloudSolution/cloudSolution.css
@@ -4,6 +4,7 @@
 }
 
 .block__container {
+    overflow: hidden;
     background: #141414;
     border-radius: 32px;
     padding: 74px 80px;
@@ -11,8 +12,9 @@
     box-sizing: border-box;
     display: -ms-grid;
     display: grid;
-    -ms-grid-columns: 1fr 2fr;
-    grid-template-columns: 1fr 2fr;
+    -ms-grid-columns: auto 1fr;
+    grid-template-columns: auto 1fr;
+    gap: 66px;
     margin-bottom: 160px;
 }
 
@@ -22,8 +24,32 @@
     margin-bottom: 0;
 }
 
+.image {}
+
 .image__container {
+    z-index: 1;
+    width: 260px;
     position: relative;
+    height: 190px;
+}
+
+.image__container:after {
+    position: absolute;
+    content: "";
+    top: 5vw;
+    left: 0;
+    right: 0;
+    z-index: -1;
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    -webkit-filter: blur(5vw);
+    -moz-filter: blur(5vw);
+    -ms-filter: blur(5vw);
+    filter: blur(5vw);
+    background: radial-gradient(50% 50% at 50% 50%, #212121 0%, rgba(33, 33, 33, 60%) 92.19%);
+    background-size: 200% 200%;
+
 }
 
 
@@ -36,11 +62,18 @@
         width: 300px;
     }
 
+
+    .image__container {
+        width: 300px;
+        height: 228px;
+    }
+
     .block__container {
         padding: 96px 84px;
         -webkit-box-pack: normal;
         -ms-flex-pack: normal;
         justify-content: normal;
+        gap: 80px;
         margin-bottom: 192px;
 
 
@@ -70,10 +103,19 @@
         justify-content: center;
     }
 
-    .image {
-        width: 50%;
+    .image__container {
+        justify-content: flex-start;
+        width: auto;
+        height: 372px;
+
     }
 
+    .image {
+        width: auto;
+        height: 372px;
+    }
+
+
     .block__container {
         display: -webkit-box;
         display: -ms-flexbox;
diff --git a/src/components/content/content.tsx b/src/components/content/content.tsx
index 83f9982..d65e609 100644
--- a/src/components/content/content.tsx
+++ b/src/components/content/content.tsx
@@ -1,6 +1,6 @@
 import "../../styles/styles.css";
 
-export const Content: React.FC<any> = ({ text }) => {
+export const Content: React.FC<any> = ({ text, captionSmall }) => {
     return (
         <div data-aos="fade-up"
             data-aos-delay="400"
@@ -13,7 +13,7 @@ export const Content: React.FC<any> = ({ text }) => {
                 {text.mainBlockCaptionColor}
             </p>
                 : <></>}
-            <p className="main-block__caption multiplayer__caption">
+            <p className={captionSmall ? "main-block__caption  main-block__caption_small" : "main-block__caption"}>
                 {text.mainBlockCaption}
             </p>
         </div>
diff --git a/src/components/devices/devices.css b/src/components/devices/devices.css
index 0deace9..a02c693 100644
--- a/src/components/devices/devices.css
+++ b/src/components/devices/devices.css
@@ -20,6 +20,8 @@
 }
 
 .card {
+  overflow: hidden;
+  z-index: 1;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: relative;
@@ -37,6 +39,24 @@
   gap: 20px;
 }
 
+.card:after {
+  position: absolute;
+  content: "";
+  top: 10vw;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  height: 66%;
+  width: 100%;
+  margin: 0 auto;
+  -webkit-filter: blur(5vw);
+  -moz-filter: blur(5vw);
+  -ms-filter: blur(5vw);
+  filter: blur(5vw);
+  background: radial-gradient(50% 50% at 50% 50%, #212121 0%, rgba(33, 33, 33, 60%) 92.19%);
+  background-size: 200% 200%;
+}
+
 .card__name {
   margin: 0;
   font-style: normal;
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index b19aea4..d8262b8 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -487,7 +487,6 @@
 
 
     .footer__main-block {
-        padding: 60px 10px;
         gap: 42px;
 
 
diff --git a/src/components/multiplayer/multiplayer.tsx b/src/components/multiplayer/multiplayer.tsx
index f295ff2..6ef8a49 100644
--- a/src/components/multiplayer/multiplayer.tsx
+++ b/src/components/multiplayer/multiplayer.tsx
@@ -6,15 +6,17 @@ import photo2 from "./Photo2.png";
 import photo3 from "./Photo3.png";
 import { Button } from "../buttonDemo/buttonDemo"
 import { Content } from "../content/content";
+import { useState } from "react";
 
 export const Multiplayer: React.FC<any> = ({text}) => {
+  const [captionSmall, setCaptionSmall] = useState(true);
   return (
     <div
       data-aos="zoom-in"
       data-aos-duration="400"
       className="multiplayer__container"
     >
-      <Content text={text}></Content>
+      <Content captionSmall={captionSmall} text={text}></Content>
       <div className="multiplayer__photo-container">
         <img alt="device" src={photo1} className="multiplayer__image" />
         <img alt="device" src={photo} className="multiplayer__image" />
@@ -22,7 +24,7 @@ export const Multiplayer: React.FC<any> = ({text}) => {
         <img alt="device" src={photo3} className="multiplayer__image" />
       </div>
       <div className="main-block__subblock-container">
-        <div className="main-block_subblock">
+        <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
           {text.mainBlockSubblock}
           <Button text={text}></Button>
         </div>
diff --git a/src/components/photoComponent/photoComponent.tsx b/src/components/photoComponent/photoComponent.tsx
index 911d1d1..967c4ff 100644
--- a/src/components/photoComponent/photoComponent.tsx
+++ b/src/components/photoComponent/photoComponent.tsx
@@ -4,19 +4,22 @@ import './photoComponent.css'
 import photo1 from './Photo1.png'
 import photo2 from './Photo2.png'
 import { Content } from '../content/content'
+import { useState } from 'react'
 
 
 
 export const PhotoComponent: React.FC<any> = ({ text }) => {
+    const [captionSmall, setCaptionSmall] = useState(true);
+
     return (
         <div className="photo___container">
-            <Content text={text}></Content>
+            <Content captionSmall={captionSmall} text={text}></Content>
             <div className='photo__container_grid'>
                 <img alt='photoImg' data-aos="fade-up" data-aos-delay="100" src={photo1} className='photo__container_image'></img>
                 <img alt='photoImg' data-aos="fade-up" data-aos-delay="200" src={photo2} className='photo__container_image'></img>
 
             </div>
-            <div className="main-block_subblock">
+            <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
                 {text.mainBlockSubblock}
             </div>
 
diff --git a/src/components/player/player.tsx b/src/components/player/player.tsx
index 3506902..6055342 100644
--- a/src/components/player/player.tsx
+++ b/src/components/player/player.tsx
@@ -4,18 +4,21 @@ import "./player.css"
 import { Button } from "../buttonDemo/buttonDemo"
 import { Content } from "../content/content";
 import ReactPlayer from 'react-player'
+import { useState } from "react";
 
 
 
 export const Player: React.FC<any> = ({ text }) => {
+  const [captionSmall, setCaptionSmall] = useState(true);
+
   return (
     <div data-aos="zoom-in" data-aos-duration="500" className="player__container">
-      <Content text={text}></Content>
+      <Content captionSmall={captionSmall} text={text}></Content>
       <div className="video__container">
         <ReactPlayer width={'100%'} height={'100%'} controls={true} url='https://www.youtube.com/watch?v=eDanRHahbGY&ab_channel=GRAFFtech' />
       </div>
       <div className="main-block__subblock-container">
-        <div className="main-block_subblock">
+        <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
           {text.mainBlockSubblock}
           <Button text={text}></Button>
         </div>
diff --git a/src/components/sliderComponent/sliderComponent.tsx b/src/components/sliderComponent/sliderComponent.tsx
index 8286fa9..fa5cb59 100644
--- a/src/components/sliderComponent/sliderComponent.tsx
+++ b/src/components/sliderComponent/sliderComponent.tsx
@@ -7,16 +7,18 @@ export const SliderComponent: React.FC<any> = React.memo(({ text }) => {
   return (
     <div data-aos="zoom-in" data-aos-duration="500" className="slider-container">
       <div className="slider">
-        <div data-aos="fade-up" data-aos-delay="400"
-          className="main-block__container">
-          <div>
-            <p className="main-block__title">Graff.estate </p>
-            <p className="main-block__title_gardient title__gardient_pos">stream</p>
+        <div className="main-block__content_slider">
+          <div data-aos="fade-up" data-aos-delay="400"
+            className="main-block__container_slider main-block__container">
+            <div>
+              <p className="main-block__title">Graff.estate </p>
+              <p className="main-block__title_gardient title__gardient_pos">stream</p>
+            </div>
+            <p className=" main-block__caption_color main-block__caption_color_slider">
+              {text.mainBlockCaptionColor}
+            </p>
+            <p className="main-block__caption_l">{text.mainBlockCaption}</p>
           </div>
-          <p className=" main-block__caption_color">
-            {text.mainBlockCaptionColor}
-          </p>
-          <p className="main-block__caption_l">{text.mainBlockCaption}</p>
         </div>
       </div>
       <Swiper
diff --git a/src/styles/styles.css b/src/styles/styles.css
index fa39a2b..dca5fc7 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -6,7 +6,7 @@
 */
 
 .main-block__container {
-  width: 536px;
+  width: 480px;
   margin: 0 auto 80px;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -21,6 +21,17 @@
   gap: 20px;
 }
 
+.main-block__container_slider {
+  width: 100%;
+
+}
+
+.main-block__content_slider {
+  width: 522px;
+  margin: 0 auto;
+  padding-right: 110px;
+  box-sizing: border-box;
+}
 .main-block__caption_l {
   font-style: normal;
   font-weight: 400;
@@ -224,17 +235,34 @@
 
 .link {
   text-decoration: none;
-
 }
 
+.main-block__caption_small {
+  width: 416px;
+}
+
+
 @media screen and (min-width: 1600px) {
   .main-block__container {
-    width: 640px;
+    width: 576px;
     gap: 24px;
     margin: 0 auto 96px;
 
   }
 
+
+
+  .main-block__content_slider {
+    width: 610px;
+
+  }
+
+  .main-block__container_slider {
+    width: 100%;
+
+  }
+
+
   .main-block__title {
     font-size: 76px;
   }
@@ -249,6 +277,11 @@
     margin-top: 24px;
   }
 
+  .main-block__caption_color_slider {
+    width: 100%;
+  }
+
+
   .main-block__caption_l {
     font-size: 22px;
   }
@@ -266,10 +299,14 @@
   }
 
   .main-block_subblock {
-    width: 640px;
+    width: 576px;
     font-size: 22px;
   }
 
+  .main-block__caption_small {
+    width: 500px;
+  }
+
   .main-block__button {
     width: 196px;
     height: 60px;
@@ -295,11 +332,23 @@
 
 @media screen and (max-width: 1024px) {
 
+
+  
+
   .main-block__container {
-    width: 536px;
+    width: 85%;
     margin: 0 0 60px;
   }
 
+  .main-block__content_slider {
+    width: 526px;
+  }
+
+
+  .main-block__container_slider {
+    width: 100%;
+}
+
 
   .main-block__caption {
     font-size: 2.8vw;
@@ -325,20 +374,21 @@
 
 
   .main-block__title {
-    font-size: 10.6vw;
+    font-size: 64px;
     font-style: normal;
     font-weight: 400;
     line-height: 100%;
   }
 
   .main-block__title_gardient {
-    font-size: 10.6vw;
+    font-size: 64px;
     font-style: normal;
     font-weight: 400;
     line-height: 100%;
   }
 
 
+
   .main-block_subblock {
     font-weight: 400;
     line-height: 140%;
@@ -353,6 +403,8 @@
 
   }
 
+  
+
 
   .main-block__title_gardient_small {
     font-size: 6.25vw;
@@ -371,6 +423,10 @@
     font-size: 3vw
   }
 
+  .main-block__caption_small {
+    width: 75%;
+  }
+
 
 
 }
@@ -381,6 +437,12 @@
     width: 100%;
   }
 
+
+  .main-block__content_slider {
+    padding-right: 0;
+    width: 100%;
+  }
+
   .main-block_subblock {
     gap: 30px;
     width: 100%;
@@ -460,6 +522,10 @@
     font-size: 4.5vw;
   }
 
+  .main-block__caption_small {
+    width: 100%;
+  }
+
 
 
 }
\ No newline at end of file