V pre0.3_9

README.md

@@ -30,7 +30,8 @@ Talent Team - разработка корпоративных мероприят
 - Добавлен функционал для формы связи.
 - В разделе бизнес игры кнопка "Заказать игру", теперь открывает модальное окно с формой связи.
 - Теперь при нажатии на благодарственные письма они открываются в модальном окне.
-- Оптимизированы картинки в баннере на главной странице.
+- Оптимизированы все изображения на главной странице.
+- В блоках с изображениями (Фассилитации, Тимбилдинг) добавленн разделительные рамки у изображений.
 
 #### V 0.2
 - Добавлен блоки "Связаться с нами" и Футер сайта

src/components/Facilitations/Example/Example.jsx

@@ -9,32 +9,32 @@ const Example = () => {
     query {
         img1: file(relativePath: {eq: "facilitations/1.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
         img2: file(relativePath: {eq: "facilitations/2.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
         img3: file(relativePath: {eq: "facilitations/3.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
         img4: file(relativePath: {eq: "facilitations/4.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
         img5: file(relativePath: {eq: "facilitations/5.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
         img6: file(relativePath: {eq: "facilitations/6.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 100, width: 1000)
             }
         },
     }`);

src/components/Facilitations/Example/Image.jsx

@@ -3,7 +3,7 @@ import { getImage } from 'gatsby-plugin-image';
 
 const Image = ({title, image}) => {
     return (
-        <div className="flex basis-1/3 max-md:basis-1/2 h-80 max-md:h-44 max-lg:h-60 overflow-hidden">
+        <div className="flex basis-1/3 max-md:basis-1/2 h-80 max-md:h-44 max-lg:h-60 overflow-hidden border-2 border-[#0E0808]">
             <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)]">
                 <h3 className='transition uppercase text-white font-medium text-center max-md:text-sm'>{title}</h3>
             </div>

src/components/Teambuilding/Example/Example.jsx

@@ -9,32 +9,32 @@ const Example = () => {
     query {
         hero1: file(relativePath: {eq: "hero1.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
         author: file(relativePath: {eq: "teambuilding/author.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
         goldberg: file(relativePath: {eq: "teambuilding/goldberg.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
         intellectual: file(relativePath: {eq: "teambuilding/intellectual.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
         wool: file(relativePath: {eq: "teambuilding/wool.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
         piramide: file(relativePath: {eq: "teambuilding/piramide.jpg"}) {
             childImageSharp {
-                gatsbyImageData(formats: WEBP, quality: 90)
+                gatsbyImageData(formats: WEBP, quality: 90, width: 800)
             }
         },
     }`);

src/components/Teambuilding/Example/Image.jsx

@@ -3,7 +3,7 @@ import { getImage } from 'gatsby-plugin-image';
 
 const Image = ({title, image}) => {
     return (
-        <div className="flex basis-1/5 max-lg:basis-1/2 h-64 max-md:h-44 max-2xl:h-60 overflow-hidden">
+        <div className="flex basis-1/5 max-lg:basis-1/2 h-64 max-md:h-44 max-2xl:h-60 overflow-hidden border-2 border-[#0E0808]">
             <div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] ">
                 <h3 className='transition uppercase text-white font-medium text-center max-md:text-sm'>{title}</h3>
             </div>