background images added to OurWork.js

Nospoko · May 6, 2024 · bd506b3 · bd506b3
1 parent bd5c782
commit bd506b3
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/algrtm/public/heavyIndustry-bg-image.jpeg b/algrtm/public/heavyIndustry-bg-image.jpeg
diff --git a/algrtm/public/labAssistant-bg-image.jpeg b/algrtm/public/labAssistant-bg-image.jpeg
diff --git a/algrtm/public/pianoPlaying-bg-image.jpeg b/algrtm/public/pianoPlaying-bg-image.jpeg
diff --git a/algrtm/src/components/OurWork.js b/algrtm/src/components/OurWork.js
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import React from "react";
 import CustomLink from "./shared/CustomLink";
 import CustomIcon from "./shared/CustomIcon";
@@ -8,8 +7,8 @@ const OurWork = () => {
     <section className="mt-[2.75rem] w-full justify-center items-center text-center max-w-[78.25rem] flex flex-col gap-6 mx-[1rem] md:max-w-[54.875rem] md:mt-[7.75rem md:mx-[4.56rem] xl:m-[5.88rem] bg-neutralLight-neutral100 dark:bg-neutralDark-neutral100">
       <h4 className="h4 lg:h2">Our work</h4>
       <div className="flex flex-col lg:flex-row w-full gap-[1.5rem] md:flex-row xl:gap-[2rem] mt-[2rem]">
-        <div className="rounded-[2rem] bg-neutralLight-neutral10 w-[21.44rem] text-neutralLight-neutral100">
-          <div className="mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem] flex flex-col items-start text-start gap-[1.5rem] mx-[1.5rem] my-[2.75rem] lg:m-[2rem] xl:m-[2.75rem]">
+        <div className="rounded-[2rem] max-w-[20.25rem] text-neutralLight-neutral100 bg-[url('/heavyIndustry-bg-image.jpeg')]">
+          <div className="flex flex-col items-start mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem]   text-start gap-[1.5rem] mx-[1.5rem] mb-[2.75rem] lg:m-[2rem] xl:m-[2.75rem] ">
             <h5 className="h5_small mt-[3rem]">Heavy Industry </h5>
             <p className="p2">Cement Manufacturing Data Laboratory</p>
             <div className="flex items-start">
@@ -23,8 +22,8 @@ const OurWork = () => {
             </div>
           </div>
         </div>
-        <div className="rounded-[2rem] bg-neutralLight-neutral10 w-[21.44rem] text-neutralLight-neutral100">
-          <div className="mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem] flex flex-col items-start text-start gap-[1.5rem] mx-[1.5rem] my-[2.75rem] lg:m-[2rem] xl:m-[2.75rem]">
+        <div className="rounded-[2rem] bg-[url('/labAssistant-bg-image.jpeg')] w-[21.44rem] text-neutralLight-neutral100">
+          <div className="flex flex-col items-start mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem]   text-start gap-[1.5rem] mx-[1.5rem] mb-[2.75rem] lg:m-[2rem] xl:m-[2.75rem]">
             <h5 className="h5_small mt-[3rem]">Med Tech </h5>
             <p className="p2">
               ECG Signal Analysis Engine for Multi-lead Holter Exams
@@ -40,8 +39,8 @@ const OurWork = () => {
             </div>
           </div>
         </div>
-        <div className="rounded-[2rem] bg-neutralLight-neutral10 w-[21.44rem] text-neutralLight-neutral100">
-          <div className="mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem] flex flex-col items-start text-start gap-[1.5rem] mx-[1.5rem] my-[2.75rem] lg:m-[2rem] xl:m-[2.75rem]">
+        <div className="rounded-[2rem] bg-[url('/pianoPlaying-bg-image.jpeg')] w-[21.44rem] text-neutralLight-neutral100">
+          <div className="flex flex-col items-start mt-[9rem] lg:mt-[10.29rem] xl:mt-[8.48rem]   text-start gap-[1.5rem] mx-[1.5rem] mb-[2.75rem] lg:m-[2rem] xl:m-[2.75rem]">
             <h5 className="h5_small mt-[3rem]">Piano for AI</h5>
             <p className="p2">
               We open the door to a mathematical understanding of music

diff --git a/algrtm/tailwind.config.js b/algrtm/tailwind.config.js
@@ -45,6 +45,11 @@ module.exports = {
         lg: "1024px", // Large screens, laptops
         xl: "1440px", // Extra large screens, desktops
       },
+      // backgroundImage: {
+      //   "heavy-industry": "url('/heavyIndustry-bg-image.jpeg')",
+      //   "lab-assistant": "url('/labAssistant-bg-image.jpeg')",
+      //   "piano-playing": "url('/pianoPlaying-bg-image.jpeg')",
+      // },
     },
   },
   plugins: [],