changed box design layout etc

TelenorNorway · Jan 23, 2025 · 40a99d8 · 40a99d8
1 parent 5f30523
commit 40a99d8
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 63 deletions.
diff --git a/src/components/Layout/styles.module.css b/src/components/Layout/styles.module.css
@@ -5,8 +5,9 @@
     grid-template-columns: 1fr;
     gap: 10px;
     min-height: 100vh;
+    background-color: #F9F9FB;
 }
 
 .main h2 {
     text-align: center;
-}
+}
diff --git a/src/components/MainDataPlatformFeatures/index.js b/src/components/MainDataPlatformFeatures/index.js
@@ -9,23 +9,35 @@ const MainDataPlatformFeatures = () => (
     <h2>A Modern Data Platform</h2>
     <div className={styles.flexDisplay}>
       <div className={styles.content}>
-        <img src={dataplatform} alt="Unified data platform illustration" className={styles.img} />
-        <p className={styles.text}>
-          Unified data platform for the Nordics, minimizing data silos and
-          accelerating growth
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src={dataplatform} alt="Unified data platform illustration" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            Unified data platform for the Nordics, minimizing data silos and
+            accelerating growth
+          </p>
+        </div>
       </div>
       <div className={styles.content}>
-        <img src={dataDrivenOrg} alt="Data driven org illustration" className={styles.img} />
-        <p className={styles.text}>
-          Data driven organization with unified data governance and catalog
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src={dataDrivenOrg} alt="Data driven org illustration" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            Data driven organization with unified data governance and catalog
+          </p>
+        </div>
       </div>
       <div className={styles.content}>
-        <img src={dataDemocracy} alt="Data democracy illustration" className={styles.img} />
-        <p className={styles.text}>
-          Data democracy, distributed ownership of data products
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src={dataDemocracy} alt="Data democracy illustration" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            Data democracy, distributed ownership of data products
+          </p>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/components/MainDataPlatformFeatures/styles.module.css b/src/components/MainDataPlatformFeatures/styles.module.css
@@ -1,25 +1,41 @@
 .flexDisplay {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
-    height: 100%;
+    gap: 20px;
+    justify-content: center;
 }
 
 .content {
+    flex: 0 0 320px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 250px;
-    background-color: #E8FDFF;
     border-radius: 10%;
+    overflow: hidden;
+    background-color: #ffffff;
 }
 
-.img {
+.imgcontainer {
+    display: flex;
+    width: 100%;
+    border-bottom: solid #c2d6e9 1px;
+    justify-content: center;
+}
+
+.txtcontainer {
     width: 100%;
 }
 
+.img {
+    box-sizing: border-box;
+    height: 198px;
+    position: relative;
+    justify-content: center;
+}
+
 .text {
     color: #000F3C;
     text-align: center;
-    width: 90%;
+    width: 100%;
+    padding: 10%;
 }
diff --git a/src/components/MainFeatures/MainFeatures.module.css b/src/components/MainFeatures/MainFeatures.module.css
@@ -1,25 +1,42 @@
 .flexDisplay {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
-    height: 100%;
+    gap: 20px;
+    justify-content: center;
 }
 
 .content {
+    flex: 0 0 320px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 250px;
-    background-color: #E8FDFF;
     border-radius: 10%;
+    overflow: hidden;
+    background-color: #ffffff;
+
 }
 
-.img {
+.imgcontainer {
+    display: flex;
+    width: 100%;
+    border-bottom: solid #c2d6e9 1px;
+    justify-content: center;
+}
+
+.txtcontainer {
     width: 100%;
 }
 
+.img {
+    box-sizing: border-box;
+    height: 198px;
+    position: relative;
+    justify-content: center;
+}
+
 .text {
     color: #000F3C;
     text-align: center;
-    width: 90%;
+    width: 100%;
+    padding: 10%;
 }
diff --git a/src/components/MainFeatures/index.js b/src/components/MainFeatures/index.js
@@ -6,24 +6,37 @@ const MainFeatures = () => (
         <h2>Telenor's cloud platform</h2>
         <div className={styles.flexDisplay}>
             <div className={styles.content}>
-                <img src="./clouds.png" alt="cloud platforms" className={styles.img} />
-                <p className={styles.text}>
-                    The Nova platforms runs on Azure and GCP allowing you flexibility
-                    between the different cloud providers
-                </p>
+                <div className={styles.imgcontainer}>
+                    <img src="./clouds.png" alt="cloud platforms" className={styles.img} />
+                </div>
+                <div className={styles.txtcontainer}>
+                    <p className={styles.text}>
+                        The Nova platforms runs on Azure and GCP allowing you flexibility
+                        between the different cloud providers
+                    </p>
+                </div>
             </div>
             <div className={styles.content}>
-                <img src="./nordic.png" alt="nordic countries" className={styles.img} />
-                <p className={styles.text}>
-                    Nova is used in all the nordic countries running thousands of
-                    workloads!
-                </p>
+                <div className={styles.imgcontainer}>
+                    <img src="./nordic.png" alt="nordic countries" className={styles.img} />
+                </div>
+                <div className={styles.txtcontainer}>
+                    <p className={styles.text}>
+                        Nova is used in all the nordic countries running thousands of
+                        workloads!
+                    </p>
+                </div>
             </div>
             <div className={styles.content}>
-                <img src="./sec.png" alt="womp1" className={styles.img} />
-                <p className={styles.text}>
-                    Nova is built on Telenors security principles
-                </p>
+                <div className={styles.imgcontainer}>
+                    <img src="./sec.png" alt="womp1" className={styles.img} />
+                </div>
+                <div className={styles.txtcontainer}>
+                    <p className={styles.text}>
+                        Nova is built on Telenors security principles
+                    </p>
+                </div>
+
             </div>
         </div>
     </div>

diff --git a/src/components/MainTechnologies/MainFeatures.module.css b/src/components/MainTechnologies/MainFeatures.module.css
@@ -1,25 +1,42 @@
 .flexDisplay {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
-    height: 100%;
+    gap: 20px;
+    justify-content: center;
 }
 
 .content {
+    flex: 0 0 320px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 250px;
-    background-color: #E8FDFF;
     border-radius: 10%;
+    overflow: hidden;
+    background-color: #ffffff;
+
 }
 
-.img {
+.imgcontainer {
+    display: flex;
+    width: 100%;
+    border-bottom: solid #c2d6e9 1px;
+    justify-content: center;
+}
+
+.txtcontainer {
     width: 100%;
 }
 
+.img {
+    box-sizing: border-box;
+    height: 198px;
+    position: relative;
+    justify-content: center;
+}
+
 .text {
     color: #000F3C;
     text-align: center;
-    width: 90%;
+    width: 100%;
+    padding: 10%;
 }
diff --git a/src/components/MainTechnologies/index.js b/src/components/MainTechnologies/index.js
@@ -7,27 +7,39 @@ const MainTechnologies = () => (
     <h2>Cutting-edge Technologies</h2>
     <div className={styles.flexDisplay}>
       <div className={styles.content}>
-        <img src={cloudnative} alt="cloud platforms" className={styles.img} />
-        <p className={styles.text}>
-          Nova is a modern platform that leverages the latest in cloud-native
-          technologies to provide a scalable, reliable, and efficient platform.
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src={cloudnative} alt="cloud platforms" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            Nova is a modern platform that leverages the latest in cloud-native
+            technologies to provide a scalable, reliable, and efficient platform.
+          </p>
+        </div>
       </div>
       <div className={styles.content}>
-        <img src="./git.png" alt="nordic countries" className={styles.img} />
-        <p className={styles.text}>
-          The Nova platform embraces GitOps ensuring that our infrastructure and
-          applications are always in sync with our codebase. We maintain popular
-          open source GitOps components and architectures.
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src="./git.png" alt="nordic countries" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            The Nova platform embraces GitOps ensuring that our infrastructure and
+            applications are always in sync with our codebase. We maintain popular
+            open source GitOps components and architectures.
+          </p>
+        </div>
       </div>
       <div className={styles.content}>
-        <img src="./golang.png" alt="womp1" className={styles.img} />
-        <p className={styles.text}>
-          Nova develops several Golang applications as part of the platform
-          offering, taking advantage of its performance, concurrency, and
-          simplicity.
-        </p>
+        <div className={styles.imgcontainer}>
+          <img src="./golang.png" alt="womp1" className={styles.img} />
+        </div>
+        <div className={styles.txtcontainer}>
+          <p className={styles.text}>
+            Nova develops several Golang applications as part of the platform
+            offering, taking advantage of its performance, concurrency, and
+            simplicity.
+          </p>
+        </div>
       </div>
     </div>
   </div>

diff --git a/static/womp1.png b/static/womp1.png