Added rendering of the image depending on the version in DescriptionI…

…mageComponent
Nospoko · May 6, 2024 · bd5c782 · bd5c782
1 parent 7c4b000
commit bd5c782
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 15 deletions.
diff --git a/algrtm/public/heavyIndustry.png → algrtm/public/heavyIndustry-image.png b/algrtm/public/heavyIndustry.png → algrtm/public/heavyIndustry-image.png
diff --git a/algrtm/public/labAssistant-image.png b/algrtm/public/labAssistant-image.png
diff --git a/algrtm/src/app/heavyIndustry/page.js b/algrtm/src/app/heavyIndustry/page.js
@@ -1,6 +1,5 @@
 import DescriptionImageComponent from "@/components/DescriptionImageComponent";
 import OpportunitiesIndustrySection from "@/components/OpportunitiesIndustrySection";
-import OpportunitiesSection from "@/components/OpportunitiesSection";
 import RoundedTextComponent from "@/components/RoundedTextComponent";
 import SolutionsSection from "@/components/SolutionsSection";
 import TechnologiesSection from "@/components/TechnologiesSection";
@@ -11,7 +10,12 @@ const HeavyIndustry = () => {
   return (
     <main className="flex flex-col items-center justify-center">
       <div className="w-full flex flex-col items-center justify-center px-4 md:mx-[2.75rem]">
-        <DescriptionImageComponent version="version1" />
+        <DescriptionImageComponent
+          version="version1"
+          image="/heavyIndustry-image.png"
+          imageWidth={580}
+          imageHeight={478}
+        />
         <OpportunitiesIndustrySection />
         <RoundedTextComponent
           version="version4"

diff --git a/algrtm/src/app/medTech/page.js b/algrtm/src/app/medTech/page.js
@@ -10,7 +10,12 @@ const MedTech = () => {
   return (
     <main className="flex flex-col items-center justify-center">
       <div className="w-full flex flex-col items-center justify-center px-4 md:mx-[2.75rem]">
-        <DescriptionImageComponent version="version2" />
+        <DescriptionImageComponent
+          version="version2"
+          image="/labAssistant-image.png"
+          imageWidth={580}
+          imageHeight={478}
+        />
         <OpportunitiesSection />
         <RoundedTextComponent
           version="version4"

diff --git a/algrtm/src/components/DescriptionImageComponent.js b/algrtm/src/components/DescriptionImageComponent.js
@@ -1,33 +1,50 @@
 import React from "react";
 
-import Image from "next/image";
-
 import descriptionComponentTexts from "@/data/descriptionComponentTexts";
+import Image from "next/image";
 
-const DescriptionImageComponent = ({ version }) => {
+const DescriptionImageComponent = ({
+  version,
+  image,
+  imageWidth,
+  imageHeight,
+}) => {
   const { title, subtitle, description } = descriptionComponentTexts[version];
   return (
     <section className="flex flex-col lg:flex-row gap-[1.5rem] xl:gap-16 py-[2.75rem] xl:px-[2.75rem] xl:py-[5.88rem] text-neutralLight-neutral10 dark:text-neutralDark-neutral10 items-center">
-      <div className="flex flex-col items-stretch max-w-[24.53rem]">
-        <h2 className="h2 lg:h1SB xl:h1 ">{title}</h2>
+      <div className="flex flex-col items-stretch max-w-[24.03rem]">
+        <h2 className="h1 lg:h1SB xl:h1 ">{title}</h2>
         <div className="mt-6 text-[1.5rem] leading-[1.86rem] font-medium lg:h5_small xl:h5_500">
           {subtitle}
         </div>
         <div className="mt-4 h6_400 xl:h6">{description}</div>
       </div>
 
-      <div className="flex shrink-0">
+      {/* <div className="flex shrink-0 w-[26.35rem]">
+        <Image
+          src="/labAssistant-image.png"
+          alt="Image of Lab Assistant during work"
+          width={580}
+          height={478}
+          sizes="100vw"
+          style={{
+            width: "100%",
+            height: "auto",
+          }}
+        />
+              </div> */}
+      <div className="flex shrink-0 max-w-[36.25rem]">
         <Image
-          src="/womanPlaying-image.png"
-          alt="Woman playing the piano"
-          width={343}
-          height={355}
+          src={image}
+          alt="Image"
+          width={imageWidth}
+          height={imageHeight}
           sizes="100vw"
           style={{
             width: "100%",
             height: "auto",
           }}
-        />{" "}
+        />
       </div>
     </section>
   );

diff --git a/algrtm/src/components/OpportunitiesSection.js b/algrtm/src/components/OpportunitiesSection.js
@@ -14,7 +14,7 @@ const OpportunitiesSection = () => {
           <div className=" h5_small_bold md:h4SB lg:h4 text-neutralLight-neutral10 dark:text-neutralDark-neutral10 flex justify-start max-w-[25.1875rem] w-full">
             <Image
               src="/med-image.png"
-              alt="Image of the factory inside"
+              alt="Medical analysis image"
               width={440}
               height={360}
               sizes="100vw"

diff --git a/algrtm/src/styles/typography.css b/algrtm/src/styles/typography.css
@@ -5,6 +5,8 @@
   .h1 {
     font-size: 5.375rem;
     font-weight: 600;
+    line-height: 6.02rem;
+    letter-spacing: -0.215rem;
   }
   .h1SB {
     font-size: 4.5rem;