diff --git a/src/images/footer/success.svg b/src/images/footer/success.svg new file mode 100644 index 0000000000..7cda97e08e --- /dev/null +++ b/src/images/footer/success.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/images/testimonials/azadeh-hawkins.avif b/src/images/testimonials/azadeh-hawkins.avif new file mode 100644 index 0000000000..0735016f5f Binary files /dev/null and b/src/images/testimonials/azadeh-hawkins.avif differ diff --git a/src/images/testimonials/azadeh-hawkins.webp b/src/images/testimonials/azadeh-hawkins.webp new file mode 100644 index 0000000000..e882d25f21 Binary files /dev/null and b/src/images/testimonials/azadeh-hawkins.webp differ diff --git a/src/images/testimonials/michel-grover.avif b/src/images/testimonials/michel-grover.avif new file mode 100644 index 0000000000..b820250a47 Binary files /dev/null and b/src/images/testimonials/michel-grover.avif differ diff --git a/src/images/testimonials/michel-grover.webp b/src/images/testimonials/michel-grover.webp new file mode 100644 index 0000000000..1cbb1c3d5a Binary files /dev/null and b/src/images/testimonials/michel-grover.webp differ diff --git a/src/images/testimonials/tal-gilad.avif b/src/images/testimonials/tal-gilad.avif new file mode 100644 index 0000000000..15d9de50e5 Binary files /dev/null and b/src/images/testimonials/tal-gilad.avif differ diff --git a/src/images/testimonials/tal-gilad.webp b/src/images/testimonials/tal-gilad.webp new file mode 100644 index 0000000000..dc1398e46f Binary files /dev/null and b/src/images/testimonials/tal-gilad.webp differ diff --git a/src/index.html b/src/index.html index cbac885b12..bec5d326a3 100644 --- a/src/index.html +++ b/src/index.html @@ -485,10 +485,20 @@

What people say

- Tal Gilad + + + + Tal Gilad +
AIR’s ideas are refreshing and out of the box. Authentic team @@ -499,10 +509,20 @@

What people say

- Azadeh Hawkins + + + + Azadeh Hawkins +
AIR is an exceptional agency that leads with creative talent, @@ -513,10 +533,20 @@

What people say

- Michel Grover + + + + Michel Grover +
AIR raises the agency bar to stratospheric heights on both @@ -553,6 +583,16 @@

Vision, Passion, Results

class="footer" >
+
Send us a message id="email" type="email" placeholder="Your email" + autocomplete="email" required /> @@ -573,6 +614,7 @@

Send us a message

id="name" type="text" placeholder="Your name" + autocomplete="name" required /> diff --git a/src/scripts/form.js b/src/scripts/form.js new file mode 100644 index 0000000000..c5bda0af30 --- /dev/null +++ b/src/scripts/form.js @@ -0,0 +1,29 @@ +(function () { + function handleFormSubmit(formSelector, alertSelector, timeout = 2000) { + const form = document.querySelector(formSelector); + const alert = document.querySelector(alertSelector); + + if (!form || !alert) { + console.error('Form or alert element not found'); + return; + } + + form.addEventListener('submit', (e) => { + e.preventDefault(); + + const fields = form.querySelectorAll('input, textarea'); + + alert.style.transform = 'translateX(0)'; + + setTimeout(() => { + alert.style.transform = 'translateX(150%)'; + }, timeout); + + fields.forEach((field) => { + field.value = ''; + }); + }); + } + + handleFormSubmit('.footer__form', '.alert', 2000); +})(); diff --git a/src/scripts/main.js b/src/scripts/main.js index 801c5a6e82..f354722d4a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,2 +1,3 @@ import menu from './menu.js' import swiper from './swiper.js' +import form from './form.js' diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss index ce4bd659c3..81384e53ae 100644 --- a/src/styles/components/footer.scss +++ b/src/styles/components/footer.scss @@ -4,9 +4,10 @@ border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; padding: 72px 0 80px; + position: relative; + overflow-x: hidden; @include on-tablet { - position: relative; top: -40px; } @@ -214,4 +215,35 @@ left: 0; } } + + .alert { + position: absolute; + display: flex; + align-items: center; + padding: 15px; + border-radius: 4px; + margin: 15px; + font-size: 20px; + line-height: 1.5; + top: 20px; + transform: translateX(150%); + transition: all 0.5s ease; + right: 0; + + &-success { + background-color: #d4edda; + border: 1px solid #c3e6cb; + color: #155724; + } + + &-icon { + margin-right: 15px; + background-image: url('../images/footer/success.svg'); + background-repeat: no-repeat; + background-size: cover; + width: 32px; + height: 32px; + flex-shrink: 0; + } + } } diff --git a/src/styles/components/services.scss b/src/styles/components/services.scss index 931b1801b8..90f3581bf1 100644 --- a/src/styles/components/services.scss +++ b/src/styles/components/services.scss @@ -86,6 +86,8 @@ padding: 32px; width: 100%; + @include card-hover-effect; + @include on-tablet { width: calc(50% - 24px); diff --git a/src/styles/components/testimonials.scss b/src/styles/components/testimonials.scss index e6b485fca0..d586b5578f 100644 --- a/src/styles/components/testimonials.scss +++ b/src/styles/components/testimonials.scss @@ -1,7 +1,7 @@ .testimonials { font-family: $font-primary; padding-bottom: 120px; - + &__subtitle { font-weight: 700; font-size: 13px; @@ -46,6 +46,8 @@ text-align: center; padding: 32px 37px; + @include card-hover-effect; + img { display: block; max-width: 250px; diff --git a/src/styles/main.scss b/src/styles/main.scss index 9068597a76..e29ffc5352 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -34,3 +34,21 @@ main { .lock-scroll { overflow: hidden; } + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 30px $dark-bg inset !important; + -webkit-text-fill-color: white !important; + background-color: $dark-bg !important; + font-weight: 600; + font-size: 15px; + line-height: 22px; + border-bottom: 2px solid white !important; + transition: all 0.4s; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 8c537ab4d4..cebb955c41 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -99,3 +99,16 @@ background-color: $color-link-bg; } } + +@mixin card-hover-effect { + transition: + transform 0.3s ease, + box-shadow 0.3s ease; + transform: scale(1); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + + &:hover { + transform: scale(1.05); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index 42cfd85b91..8f97c43936 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1,15 +1,15 @@ +$font-primary: 'Poppins', sans-serif; +$font-secondary: 'Open Sans', sans-serif; +$border-radius: 30px; +$big-tablet-min-width: 1024px; +$tablet-min-width: 640px; +$desktop-min-width: 1600px; +$white: #fff; $c-gray: #f2f6fa; $dark-bg: #2c2c2c; -$white: #fff; $main-text-color: #6c788b; $color-text-dark: #334563; $color-title: #253757; $color-link-bg: #2060f6; $aside-menu-bg: #a6aab9; $subtitle-color: #c0cdd7; -$font-primary: 'Poppins', sans-serif; -$font-secondary: 'Open Sans', sans-serif; -$border-radius: 30px; -$big-tablet-min-width: 1024px; -$tablet-min-width: 640px; -$desktop-min-width: 1600px;