Merge branch 'style/blog-cta-mobile' into xp/2023-08-17-blog-cta

amplication · Aug 18, 2023 · d5bf413 · d5bf413
2 parents 28d16d7 + 6de59e2
commit d5bf413
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/components/Common/CtaBanner/index.jsx b/components/Common/CtaBanner/index.jsx
@@ -19,6 +19,8 @@ const CtaBanner = ({bgVersion, title, subTitle, buttonText, buttonUrl}) => {
   });
 
   const bgStyle = bgVersion === 'version1' ? 'bg-cta-1' : 'bg-cta-2';
+  const bgClasses = `${bgStyle}-small tablet:${bgStyle}`;
+
   const defaultTitle = (
     <>
       Instantly generate <br /> production-ready backend
@@ -30,9 +32,9 @@ const CtaBanner = ({bgVersion, title, subTitle, buttonText, buttonUrl}) => {
 
   return (
     <div
-      className={`w-full px-12 py-16 my-10 rounded-2xl bg-no-repeat bg-cover bg-left-bottom relative laptop:min-h-[300px] border-3 border-white ${bgStyle}`}
+      className={`w-full px-4 py-4 tablet:px-12 tablet:py-16 my-10 rounded-2xl bg-no-repeat bg-cover bg-right-top relative min-h-[450px] tablet:min-h-[300px] border-3 border-white  ${bgClasses} `}
     >
-      <div className="">
+      <div className="max-w-[320px] tablet:max-w-[500px]">
         <div className="font-bold text-white text-[24px] leading-[32px]">
           {title || defaultTitle}
         </div>

diff --git a/public/images/bg/cta-bg-1-small.png b/public/images/bg/cta-bg-1-small.png
diff --git a/public/images/bg/cta-bg-2-small.png b/public/images/bg/cta-bg-2-small.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -146,6 +146,8 @@ module.exports = {
         'form-pattern-2-desktop': "url('/images/decor_2_desktop.svg')",
         'cta-1': "url('/images/bg/cta-bg-1.png')",
         'cta-2': "url('/images/bg/cta-bg-2.png')",
+        'cta-1-small': "url('/images/bg/cta-bg-1-small.png')",
+        'cta-2-small': "url('/images/bg/cta-bg-2-small.png')",
         noise: "url('/images/noise.png')",
         quote: "url('/images/bg/quotes.svg')",
       },