From ee5b145ed0427d781faca18afdf761390dc43417 Mon Sep 17 00:00:00 2001
From: yevhen-kotliarchuk <evgenkotliarchuk@gmail.com>
Date: Sun, 4 May 2025 18:26:56 +0200
Subject: [PATCH] update ui responsiveness

---
 src/components/servicepage/Hero.js | 7 +++----
 src/pages/AIwarp/index.js          | 6 +++---
 src/pages/Composer/index.js        | 7 +++----
 src/pages/Database/index.js        | 7 +++----
 src/pages/Stackables/index.js      | 7 +++----
 src/pages/caching/index.js         | 7 +++----
 6 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/servicepage/Hero.js b/src/components/servicepage/Hero.js
index 5f36bda29d..6ac2595c1a 100644
--- a/src/components/servicepage/Hero.js
+++ b/src/components/servicepage/Hero.js
@@ -33,7 +33,7 @@ const Hero = ({ blok }) => {
             <span className="text-[#FFFFFFB2] w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]">
               {render(blok.Hero[0].hero_subtitle)}
             </span>
-            <div className="flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]">
+            <div className="flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]">
               {blok.Hero[0].cta_buttons.map((cta) => (
                 <a
                   key={cta._uid}
@@ -58,10 +58,9 @@ const Hero = ({ blok }) => {
             </div>
           </div>
         </div>
-        <div>
+        <div className="w-[90%] max-w-[560px] aspect-video mx-auto">
           <iframe
-            width="560"
-            height="315"
+            className="w-full h-full max-h-[315px]"
             src={blok.Hero[0].hero_embed.url}
             title="YouTube video player"
             frameBorder="0"
diff --git a/src/pages/AIwarp/index.js b/src/pages/AIwarp/index.js
index cf316284af..9e67f4458d 100644
--- a/src/pages/AIwarp/index.js
+++ b/src/pages/AIwarp/index.js
@@ -60,7 +60,7 @@ function PageHeader ({ blok }) {
             <span className='text-[#FFFFFFB2] w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]'>
               {render(blok.hero[0].hero_subtitle2)}
             </span>
-            <div className='flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]'>
+            <div className='flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]'>
               {blok.hero[0].cta_buttons.map((cta) => (
                 <a
                   key={cta._uid}
@@ -85,8 +85,8 @@ function PageHeader ({ blok }) {
             </div>
           </div>
         </div>
-        <div className=''>
-          <img src={blok.hero[0].hero_image} alt='hero_image' />
+        <div className='w-[95%] max-w-[560px] aspect-video mx-auto'>
+          <img className='w-full h-full max-h-[315px]' src={blok.hero[0].hero_image} alt='hero_image' />
         </div>
       </div>
     </header>
diff --git a/src/pages/Composer/index.js b/src/pages/Composer/index.js
index 25e64e834c..be39828173 100644
--- a/src/pages/Composer/index.js
+++ b/src/pages/Composer/index.js
@@ -55,7 +55,7 @@ function PageHeader({ blok }) {
             <span className="text-[#FFFFFFB2] md:w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]">
               {render(blok.hero[0].hero_subtitle)}
             </span>
-            <div className="flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]">
+            <div className="flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]">
               {blok.hero[0].cta_buttons.map((cta) => (
                 <a
                   key={cta._uid}
@@ -80,10 +80,9 @@ function PageHeader({ blok }) {
             </div>
           </div>
         </div>
-        <div className="">
+        <div className="w-[90%] max-w-[560px] aspect-video mx-auto">
           <iframe
-            width="560"
-            height="315"
+            className="w-full h-full max-h-[315px]"
             src={blok.hero[0].hero_embed.url}
             title="YouTube video player"
             frameBorder="0"
diff --git a/src/pages/Database/index.js b/src/pages/Database/index.js
index 8ea06faa7a..09ce3be040 100644
--- a/src/pages/Database/index.js
+++ b/src/pages/Database/index.js
@@ -55,7 +55,7 @@ function PageHeader({ blok }) {
             <span className="text-[#FFFFFFB2] w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]">
               {render(blok.hero[0].hero_subtitle)}
             </span>
-            <div className="flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]">
+            <div className="flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]">
               {blok.hero[0].cta_buttons.map((cta) => (
                 <a
                   key={cta._uid}
@@ -80,10 +80,9 @@ function PageHeader({ blok }) {
             </div>
           </div>
         </div>
-        <div className="">
+        <div className="w-[90%] max-w-[560px] aspect-video mx-auto">
           <iframe
-            width="560"
-            height="315"
+            className="w-full h-full max-h-[315px]"
             src={blok.hero[0].hero_embed.url}
             title="YouTube video player"
             frameBorder="0"
diff --git a/src/pages/Stackables/index.js b/src/pages/Stackables/index.js
index c259cb7b78..750a43e623 100644
--- a/src/pages/Stackables/index.js
+++ b/src/pages/Stackables/index.js
@@ -61,7 +61,7 @@ function PageHeader({ blok }) {
             <span className="text-[#FFFFFFB2] w-[100%] lg:w-auto text-[1rem] lg:text-[1.2rem] font-[400]">
               {render(blok.hero[0].hero_subtitle2)}
             </span>
-            <div className="flex lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem]">
+            <div className="flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]">
               {blok.hero[0].cta_buttons.map((cta) => (
                 <a
                   key={cta._uid}
@@ -86,10 +86,9 @@ function PageHeader({ blok }) {
             </div>
           </div>
         </div>
-        <div className="">
+        <div className="w-[90%] max-w-[560px] aspect-video mx-auto">
           <iframe
-            width="560"
-            height="315"
+            className="w-full h-full max-h-[315px]"
             src={blok.hero[0].hero_embed.url}
             title="YouTube video player"
             frameBorder="0"
diff --git a/src/pages/caching/index.js b/src/pages/caching/index.js
index 6a9951f1f7..2afe99925c 100644
--- a/src/pages/caching/index.js
+++ b/src/pages/caching/index.js
@@ -66,7 +66,7 @@ function PageHeader({ blok }) {
                   {blok.cache_hero[0].hero_subtitle}
                 </p>
 
-                <div className="mt-8 flex gap-4">
+                <div className="flex lg:justify-start justify-center lg:items-center gap-3 lg:gap-4 mt-[2rem] lg:mt-[3.5rem] mb-[2rem] lg:mb-[0rem]">
                   {blok.cache_hero[0].cta_buttons.map((cta) => (
                     <a
                       key={cta._uid}
@@ -91,10 +91,9 @@ function PageHeader({ blok }) {
                 </div>
               </div>
 
-              <div className="flex items-center justify-center">
+              <div className="w-[90%] max-w-[560px] aspect-video mx-auto">
                 <iframe
-                  width="560"
-                  height="315"
+                  className="w-full h-full max-h-[315px]"
                   src={blok.cache_hero[0].hero_embed.url}
                   title="YouTube video player"
                   frameBorder="0"