48 bottom icon alignment (#49)

* feat: bottom icon aligment * feat: Problem with illustration aspect ratio --------- Co-authored-by: SergioAR <[email protected]>
2060-io · Nov 11, 2024 · 2e8a56a · 2e8a56a
1 parent 8123cbc
commit 2e8a56a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 52 deletions.
diff --git a/app/app/components/sections/sectionStandardsBuilt.tsx b/app/app/components/sections/sectionStandardsBuilt.tsx
@@ -30,10 +30,10 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-didcomm.svg'}
                   alt="didcomm"
-                  width={170}
-                  height={45}
+                  width={204}
+                  height={60}
                   priority={false}
-                  className="mx-auto p-4 transform transition duration-300 ease-in-out hover:scale-110"
+                  className="mx-auto p-0 -mb-6 transform transition duration-300 ease-in-out hover:scale-110"
                 />
               </Link>
             </div>
@@ -42,8 +42,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-w3c.svg'}
                   alt="w3c"
-                  width={88}
-                  height={42}
+                  width={105}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -57,8 +57,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-open-wallet.svg'}
                   alt="open wallet"
-                  width={180}
-                  height={46}
+                  width={196}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-4 pr-4 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -69,8 +69,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-credo.svg'}
                   alt="credo"
-                  width={60}
-                  height={42}
+                  width={71}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -81,8 +81,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-credo.svg'}
                   alt="credo"
-                  width={60}
-                  height={42}
+                  width={71}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -93,8 +93,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-dif.png'}
                   alt="dif"
-                  width={124}
-                  height={42}
+                  width={148}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 pl-4 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -107,8 +107,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-trust-over-ip.svg'}
                   alt="trust over ip"
-                  width={110}
-                  height={46}
+                  width={120}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 px-2 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -119,8 +119,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-open-wallet.svg'}
                   alt="open wallet"
-                  width={180}
-                  height={46}
+                  width={196}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-4 pr-4 transition duration-300 ease-in-out hover:scale-110"
                 />
@@ -131,8 +131,8 @@ const SectionStandardsBuilt: React.FC<SectionStandardsBuilt> = ({ translations }
                 <Image
                   src={'images/logo-dif.png'}
                   alt="dif"
-                  width={124}
-                  height={42}
+                  width={148}
+                  height={50}
                   priority={false}
                   className="mx-auto pt-3 pl-4 transition duration-300 ease-in-out hover:scale-110"
                 />

diff --git a/app/app/components/sections/sectionWhatIs.tsx b/app/app/components/sections/sectionWhatIs.tsx
@@ -12,42 +12,42 @@ const SectionWhatIs: React.FC<SectionWhatIs> = ({ translations }) => {
     <section className="container mx-auto 2xl:px-28 xl:px-28 lg:px-28 px-6 mt-8">
       <div className="flex flex-col 2xl:flex-row xl:flex-row lg:flex-row">
         <div className="flex-1 flex items-center justify-center lg:justify-start xl:justify-start 2xl:justify-start order-2 2xl:order-1 xl:order-1 lg:order-1">
-          <Image
-            src={'images/what-is-hologram.png'}
-            alt={'what is hologram'}
-            width={340}
-            height={560}
-            className="w-[340px] h-[560px]"
-            priority={true}
-            id="image-what-is-hologram-light"
-          />
-          <Image
-            src={'images/what-is-hologram-dark.png'}
-            alt={'what is hologram'}
-            width={340}
-            height={560}
-            className="w-[340px] h-[560px]"
-            priority={true}
-            id="image-what-is-hologram-dark"
-          />
+          <div className="w-[340px] h-[560px] relative" id="image-what-is-hologram-light">
+            <Image
+              src={'/images/what-is-hologram.png'}
+              alt={'what is hologram'}
+              layout="fill"
+              objectFit="contain"
+              priority={true}
+            />
+          </div>
+          <div className="w-[340px] h-[560px] relative" id="image-what-is-hologram-dark">
+            <Image
+              src={'/images/what-is-hologram-dark.png'}
+              alt={'what is hologram'}
+              layout="fill"
+              objectFit="contain"
+              priority={true}
+            />
+          </div>
         </div>
         <div className="flex-1 text-justify 2xl:px-20 xl:px-20 lg:px-20 order-1 2xl:order-2 xl:order-2 lg:order-2">
           <p
             className="
-							mb-6
-							2xl:pt-20
-							xl:pt-20
-							lg:pt-20
-							font-semibold
-							text-center
-							2xl:text-left
-							xl:text-left
-							lg:text-left
-							text-hologram-color
-							text-4xl
-							2xl:text-5xl
-							xl:text-5xl
-							lg:text-5xl"
+            mb-6
+            2xl:pt-20
+            xl:pt-20
+            lg:pt-20
+            font-semibold
+            text-center
+            2xl:text-left
+            xl:text-left
+            lg:text-left
+            text-hologram-color
+            text-4xl
+            2xl:text-5xl
+            xl:text-5xl
+            lg:text-5xl"
           >
             {translations?.what_is_title}
           </p>

diff --git a/app/public/images/logo-didcomm.svg b/app/public/images/logo-didcomm.svg