diff --git a/public/images/blog/blog.png b/public/images/blog/blog.png new file mode 100644 index 0000000..9407804 Binary files /dev/null and b/public/images/blog/blog.png differ diff --git a/public/images/careers/curiosity.png b/public/images/careers/curiosity.png index 5f7d98a..fb21f53 100644 Binary files a/public/images/careers/curiosity.png and b/public/images/careers/curiosity.png differ diff --git a/public/images/careers/elegance.png b/public/images/careers/elegance.png index 1dd9b9e..0d8318d 100644 Binary files a/public/images/careers/elegance.png and b/public/images/careers/elegance.png differ diff --git a/public/images/careers/precision.png b/public/images/careers/precision.png index c488510..3a0a2c8 100644 Binary files a/public/images/careers/precision.png and b/public/images/careers/precision.png differ diff --git a/public/images/careers/self.png b/public/images/careers/self.png index 599c0a2..75b411f 100644 Binary files a/public/images/careers/self.png and b/public/images/careers/self.png differ diff --git a/public/images/partners/partners.png b/public/images/partners/partners.png new file mode 100644 index 0000000..5f0fa6d Binary files /dev/null and b/public/images/partners/partners.png differ diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss index 5b7d8c1..48a4d9f 100644 --- a/src/components/sections/about/related/related.module.scss +++ b/src/components/sections/about/related/related.module.scss @@ -124,9 +124,9 @@ margin-left: 0; background: linear-gradient( 180deg, - rgb(229 229 229 / 0) 0%, + rgb(4 4 4) 0%, rgb(241 241 241 / 0.5) 48.91%, - rgb(241 241 241 / 0) 89.23% + rgb(4 4 4) 89.23% ); opacity: 0.4; width: 100%; diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss index 87a1242..9bd7b75 100644 --- a/src/components/sections/blog/hero/hero.module.scss +++ b/src/components/sections/blog/hero/hero.module.scss @@ -20,9 +20,58 @@ min-height: auto; } + .hero__container { + @include respond-to('mobile') { + min-height: unset; + } + + display: flex; + place-content: center; + min-height: tovw(590px, 'default', 290px); + + .hero { + @include respond-to('mobile') { + display: none; + } + + margin: auto; + margin-top: tovw(-190px, 'default', -190px); + width: tovw(1580px, 'default', 700px); + mix-blend-mode: screen; + + &__mobile { + @include respond-to('mobile') { + display: none; + + // display: flex; + // margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; + // width: 130%; + // mix-blend-mode: screen; + // place-self: center; + // mask-image: linear-gradient( + // 0deg, + // rgb(255 255 255 / 0) 0%, + // rgb(0 0 0) 25% + // ); + } + + display: none; + } + } + } + .container { + @include respond-to('mobile') { + margin-top: unset; + } + z-index: 10; padding-top: tovw(178px, 'default', 88px); + margin-top: tovw(-300px, 'default', -1450px); + + h1 { + padding-bottom: tovw(120px, 'default', 80px); + } @media screen and (max-width: 800px) { padding-left: 0; diff --git a/src/components/sections/blog/hero/index.tsx b/src/components/sections/blog/hero/index.tsx index 156ab18..ed29c5a 100644 --- a/src/components/sections/blog/hero/index.tsx +++ b/src/components/sections/blog/hero/index.tsx @@ -13,10 +13,24 @@ interface HeroProps { const Hero = ({ featuredPost }: HeroProps) => { return (
- - Blog - +
+ hero + hero +
+ + Blog +
diff --git a/src/components/sections/contact/form/form.module.scss b/src/components/sections/contact/form/form.module.scss index d129d01..8f856f3 100644 --- a/src/components/sections/contact/form/form.module.scss +++ b/src/components/sections/contact/form/form.module.scss @@ -75,6 +75,7 @@ textarea, select { appearance: none; + width: 100%; font-size: tovw(24px, 'default', 18px); padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px); margin-top: tovw(20px, 'default', 16px); @@ -88,6 +89,10 @@ transition: all 250ms; } + &::placeholder { + color: var(--color-grey-light); + } + option { background-color: black; opacity: 50%; @@ -145,9 +150,9 @@ margin-left: 0; background: linear-gradient( 180deg, - rgb(229 229 229 / 0) 0%, + var(--color-black) 0%, rgb(241 241 241 / 0.5) 48.91%, - rgb(241 241 241 / 0) 100% + var(--color-black) 100% ); opacity: 0.4; width: 100%; diff --git a/src/components/sections/partners/contact/contact.module.scss b/src/components/sections/partners/contact/contact.module.scss index d80b6b9..c766848 100644 --- a/src/components/sections/partners/contact/contact.module.scss +++ b/src/components/sections/partners/contact/contact.module.scss @@ -102,6 +102,7 @@ } span { + text-transform: uppercase; padding-top: tovw(35px, 'default', 14px); color: var(--color-grey-light); font-family: var(--font-dm-mono), sans-serif; @@ -137,6 +138,7 @@ textarea, select { appearance: none; + width: 100%; font-size: tovw(24px, 'default', 18px); padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px); margin-top: tovw(20px, 'default', 16px); @@ -150,20 +152,20 @@ transition: all 250ms; } + &::placeholder { + color: var(--color-grey-light); + } + option { background-color: black; opacity: 50%; border: none; color: var(--color-white); - - &:first-child { - color: red; - } } } select { - background: url('/images/dropdown.svg') no-repeat 95% 50%; + background: url('/images/dropdown.svg') no-repeat 95% 52%; background-color: rgb(142 142 142 / 0.1); background-size: tovw(20px, 'default', 16px); diff --git a/src/components/sections/partners/hero/hero.module.scss b/src/components/sections/partners/hero/hero.module.scss index 388d6ab..ea63470 100644 --- a/src/components/sections/partners/hero/hero.module.scss +++ b/src/components/sections/partners/hero/hero.module.scss @@ -21,56 +21,42 @@ } } - .video_container { - align-self: center; - position: relative; - margin-top: tovw(-165px, 'default'); - margin-bottom: tovw(-140px, 'default'); - padding-top: tovw(30px, 'default', 20px); - width: 82%; - mix-blend-mode: lighten; + .hero__container { + @include respond-to('mobile') { + min-height: unset; + } - video { + display: flex; + place-content: center; + min-height: tovw(650px, 'default', 320px); + + .hero { @include respond-to('mobile') { display: none; } - width: 100%; - } - - &::after { - position: absolute; - top: 0; - left: 0; - z-index: 1; - background: radial-gradient( - ellipse, - rgb(3 3 3 / 0) 60%, - rgb(3 3 3 / 1) 75%, - rgb(3 3 3 / 1) 100% - ); - width: 100%; - height: 100%; - content: ''; - } - } - - .hero__mobile { - @include respond-to('mobile') { - display: flex; - margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) - tovw(16px, 'mobile', 20px); - width: 200%; + margin: auto; + margin-top: tovw(-35px, 'default', -35px); + width: tovw(1470px, 'default', 700px); mix-blend-mode: screen; - place-self: center; - mask-image: linear-gradient( - 0deg, - rgb(255 255 255 / 0) 0%, - rgb(0 0 0) 25% - ); - } - display: none; + &__mobile { + @include respond-to('mobile') { + display: flex; + margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; + width: 130%; + mix-blend-mode: screen; + place-self: center; + mask-image: linear-gradient( + 0deg, + rgb(255 255 255 / 0) 0%, + rgb(0 0 0) 25% + ); + } + + display: none; + } + } } .body { diff --git a/src/components/sections/partners/opportunities/opportunities.module.scss b/src/components/sections/partners/opportunities/opportunities.module.scss index 2bb08d8..04f564a 100644 --- a/src/components/sections/partners/opportunities/opportunities.module.scss +++ b/src/components/sections/partners/opportunities/opportunities.module.scss @@ -17,13 +17,17 @@ } position: relative; + width: tovw(1076px, 'default', 400px); .block { + display: grid; + grid-template-columns: tovw(300px, 'default', 50px) auto; + gap: tovw(20px, 'default', 16px); padding-top: tovw(86px, 'default', 30px); border-top: tovw(1px, 'default', 1px) solid var(--color-grey-light); &:not(:first-child) { - margin-top: tovw(120px, 'default', 60px); + margin-top: tovw(86px, 'default', 30px); } &:last-child { @@ -36,6 +40,11 @@ border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light); } + img { + width: 100%; + mix-blend-mode: screen; + } + .header { @include respond-to('mobile') { align-items: flex-end; @@ -43,7 +52,7 @@ display: flex; justify-content: space-between; - padding-bottom: tovw(76px, 'default', 35px); + padding-bottom: tovw(36px, 'default', 35px); > h2 { text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); @@ -75,33 +84,24 @@ } margin: 0; - width: tovw(520px, 'default', 300px); font-size: tovw(24px, 'default', 16px); } - - .arrow { - @include respond-to('mobile') { - display: none; - } - - flex-shrink: 0; - width: tovw(23px, 'default', 14px); - height: fit-content; - } } ul { @include respond-to('mobile') { - padding: 0; flex-direction: column; gap: tovw(20px, 'mobile'); } display: flex; + flex-wrap: wrap; list-style: none; - padding-left: tovw(104px, 'default', 52px); + gap: tovw(30px, 'default', 25px); + padding-left: 0; margin: 0; - margin-top: tovw(90px, 'default', 30px); + margin-top: tovw(70px, 'default', 30px); + padding-right: tovw(15px, 'default', 15px); li { a { @@ -116,8 +116,6 @@ @include respond-to('mobile') { margin: 0; } - - margin-left: tovw(35px, 'default', 35px); } } }