first commit

styles/pages/productOverview/_controlPanel.scss

@@ -0,0 +1,91 @@
+.controlPanel {
+  margin-top: 10rem;
+  padding-bottom: 300px;
+
+  .controlPanel_des {
+    position: absolute;
+    top: -170px;
+    left: 80px;
+  }
+
+  .bgControlpanel {
+    min-height: 100vh;
+    background-color: #ececec;
+    border-radius: 157px;
+    position: relative;
+
+    .bgControlpaneltabs {
+      position: absolute;
+      top: 100px;
+      right: 0;
+
+      .nav-link:focus-visible,
+      .nav-item:focus-visible {
+        outline: none !important;
+      }
+
+      .nav-tabs {
+        border-bottom: 1px solid;
+        margin-bottom: 2rem;
+      }
+
+      .nav-item {
+        position: relative;
+        border: none;
+      }
+
+      .nav-tabs .nav-link {
+        position: relative;
+        color: black;
+        font-weight: 500;
+      }
+
+      .nav-tabs .nav-link.active {
+        border: none;
+        background-color: transparent;
+      }
+
+      .nav-tabs .nav-link.active::before {
+        display: block;
+      }
+
+      .nav-item .nav-link::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 5px;
+        bottom: -2px;
+        right: 0;
+        display: none;
+        background-color: black;
+      }
+    }
+  }
+}
+
+@media (max-width:768px) {
+  .controlPanel {
+    padding-bottom: 100px;
+
+    .bgControlpanel {
+      min-height: 50vh;
+    }
+
+  }
+}
+
+@media (max-width:600px) {
+
+  .controlPanel {
+
+    .controlPanel_des {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      left: 50%;
+    }
+
+  }
+}

styles/pages/productOverview/_designedpro.scss

@@ -0,0 +1,46 @@
+.proSection{
+    .designedProLaptop_title > .designedProLaptop_title_text{
+        font-size: 6rem;
+    }
+
+    .designedProLaptopList{
+        > li{
+            font-size: 2.5rem;
+        }
+    }
+}
+@media (max-width:1200px) {
+    .proSection{
+        .designedProLaptopList{
+            > li{
+                font-size: 1.5rem;
+            }
+        }
+    }
+   
+}
+
+
+@media (max-width:768px){
+    .proSection{
+        padding: 1rem;
+        .designedProLaptop_title > .designedProLaptop_title_text{
+            font-size: 4rem;
+        }
+
+        .designedProLaptopList  {
+            width: 100%;
+            padding: 1rem;
+        }
+    }
+}
+
+@media (max-width:576px) {
+    .proSection{
+        .designedProLaptop_title > .designedProLaptop_title_text{
+            font-size: 2.5rem;
+          
+        }
+    }
+   
+}

styles/pages/productOverview/_dragondisplay.scss

@@ -0,0 +1,62 @@
+.dragondisplay {
+    position: relative;
+    background: rgb(255, 255, 255);
+    background: linear-gradient(184deg,
+            rgba(255, 255, 255, 1) 4%,
+            rgba(235, 255, 133, 1) 100%);
+    overflow: hidden;
+
+    .dragondisplay_heading {
+        position: absolute;
+        bottom: 0;
+        margin: auto;
+        width: 100%;
+
+        >h1 {
+            font-size: 8rem;
+            text-align: center;
+        }
+    }
+
+    .dragondisplay_des {
+        max-width: 600px;
+        position: absolute;
+        right: 0;
+        top: 13%;
+        padding: 4rem;
+    }
+}
+
+@media (max-width:1200px) {
+    .dragondisplay{
+        .dragondisplay_heading{
+            >h1 {
+                font-size: 4rem;
+                text-align: center;
+            }
+        }
+    }
+}
+
+
+@media (max-width:768px) {
+    .dragondisplay{
+        .dragondisplay_heading{
+            >h1 {
+                font-size: 3rem;
+                text-align: center;
+            }
+        }
+    }
+}
+
+@media (max-width:576px) {
+    .dragondisplay{
+        .dragondisplay_heading{
+            >h1 {
+                font-size: 1.5rem;
+                text-align: center;
+            }
+        }
+    }
+}

styles/pages/productOverview/_lens.scss

@@ -0,0 +1,88 @@
+.lensAnwi {
+    .box_lens {
+        .anwi_BoxLen {
+            border-radius: 40px;
+            -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
+            -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
+            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.171) inset;
+        }
+
+        .box_lens_img {
+            width: 45%;
+        }
+
+        .screenpadLens {
+            font-size: 1.2rem;
+        }
+
+        .lenHeading{
+            font-size: 2rem;
+        }
+
+        .anwi_BoxLen {
+            gap: 10px;
+        }
+    }
+}
+
+@media (max-width:1400px) {
+    .lensAnwi {
+        .box_lens {
+            .lenHeading{
+                font-size: 1rem;
+            }
+            .screenpadLens {
+                font-size: 0.7rem;
+            }
+    
+        }
+       
+    }
+}
+
+@media (max-width:1200px) {
+    .lensAnwi {
+        .row_lensAnwi {
+            padding: 2rem;
+        }
+        .box_lens {
+            .lenHeading{
+                font-size: 0.7rem;
+            }
+            .screenpadLens {
+                font-size: 0.5rem;
+            }
+    
+        }
+       
+    }
+}
+
+
+@media (max-width:768px) {
+    .lensAnwi {}
+}
+
+@media (max-width:576px) {
+
+   
+
+    .lensAnwi {
+        .box_lens {
+            .box_lens_img {
+                width: 25%;
+            }
+    
+        }
+       
+    }
+
+    .dragondisplay {
+        .dragondisplay_heading {
+            >h1 {
+                font-size: 1.5rem;
+                text-align: center;
+            }
+        }
+    }
+}

styles/pages/productOverview/_osPlusSoftware.scss

@@ -0,0 +1,76 @@
+.osPlusSoftware {
+   position: relative;
+   padding-top: 10rem;
+   .osContianer{
+    position: absolute;
+    top: 5rem;
+  
+    left: 50%;
+    transform: translateX(-50%);
+   }
+
+   .osContianer_des_font{
+    font-size: 1.5rem;
+   }
+  }
+  
+
+  @media (max-width:1200px) {
+    .osPlusSoftware {
+        position: relative;
+       
+        .osContianer{
+       
+        }
+
+        .osContianerHeading{
+            >h1{
+                font-size: 5rem;
+            }
+        }
+     
+        .osContianer_des_font{
+         font-size: 1.5rem;
+        }
+       }
+  }
+
+
+  @media (max-width:1000px){
+    .osPlusSoftware{
+        padding-top: 1rem;
+        .osContianer{
+            top: 1rem;
+        }
+        .osContianerHeading{
+            >h1{
+                font-size: 2rem;
+                text-align: center;
+            }
+        }
+
+        .osContianer_des_font{
+            font-size: 1rem;
+           }
+    }
+  }
+
+  @media (max-width:768px){
+    .osPlusSoftware{
+        .osContianer{
+            top: -1rem;
+        }
+       
+        .osContianerHeading{
+            >h1{
+                font-size: 2rem;
+                text-align: center;
+            }
+        }
+
+        .osContianer_des_font{
+            font-size: 0.7rem;
+            text-align: center;
+           }
+    }
+  }

styles/pages/productOverview/_popupkeyboard.scss

@@ -0,0 +1,77 @@
+// pop up keyboard
+.popupKeyboard {
+    position: relative;
+    overflow-x: hidden;
+    padding-top: 11rem;
+    .popupKeyboard_hParent {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .popupKeyboard_heading {
+        >h1{
+            font-size: 9rem;
+        }
+    }
+
+
+}
+
+@media (max-width:1200px) {
+    .popupKeyboard {
+        .popupKeyboard_heading {
+            >h1{
+                font-size: 5rem;
+            }
+        }
+    }
+
+}
+
+
+@media (max-width:768px) {
+    .controlPanel{
+        padding-bottom: 100px;
+    }
+    .popupKeyboard {
+       
+        .popupKeyboard_heading {
+            padding: 1rem;
+            >h1{
+              
+                font-size: 3rem;
+            }
+            
+        }
+        .popupKeyboard_des {
+            padding: 1rem;
+            font-size: 1rem;
+        }
+
+        .popupKeyboard_hParent {
+            padding: 1rem;
+        }
+    }
+}
+
+@media (max-width:576px) {
+    .popupKeyboard {
+       
+        .popupKeyboard_heading {
+            padding: 1rem;
+            >h1{
+              
+                font-size: 2rem;
+            }
+            
+        }
+
+        .popupKeyboard_des {
+            padding: 2rem;
+            padding-top: 0;
+            font-size: 0.8rem;
+        }
+    }
+
+}

styles/pages/productOverview/_proConnectivity.scss

@@ -0,0 +1,49 @@
+.proConnectivity{
+   
+}
+
+
+@media (max-width:1200px) {
+   
+    .proConnectivity{
+        h1{
+            font-size: 2.5rem;
+        }
+
+        .font_p_Dual{
+            font-size: 1rem;
+        }
+    
+    }
+}
+
+@media (max-width:768px) {
+    .proConnectivity{
+        h1{
+            font-size: 2rem;
+        }
+
+        .font_p_Dual{
+            font-size: 0.7rem;
+        }
+    
+    }
+}
+
+@media (max-width:600px) {
+    .proConnectivity{
+        // h1{
+        //     font-size: 2rem;
+        // }
+     
+        .connectivityPso_des{
+            padding: 2rem;
+        }
+
+        .font_p_Dual{
+           
+           
+        }
+    
+    }
+}

styles/pages/productOverview/_professinalGrade.scss

@@ -0,0 +1,54 @@
+.professinalGrade {
+    .professinalGradeImgContainer {
+        background-image: url("./../../dist/assets/imgs/productoverview/promask.png");
+        background-color: white;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .professinalGradeImg {
+        @include absCenter;
+        width: 50%;
+    }
+}
+
+@media (max-width:1400px) {
+.professinalGrade{
+
+}
+}
+
+@media (max-width:1200px) {
+    .professinalGrade{
+        h1{
+            font-size: 3rem;
+        }
+    }
+}
+
+
+@media (max-width:768px) {
+    .professinalGrade{
+        h1{
+            font-size: 2rem;
+        }
+
+        .font_p_Dual{
+            font-size: 1rem;
+        }
+    }
+}
+
+@media (max-width:576px) {
+    .professinalGrade{
+      p{
+        padding-left: 1rem;
+      }
+
+      .professinalGradeImg {
+    
+        width: 80%;
+    }
+    }
+}

styles/pages/productOverview/_stunningsound.scss

@@ -0,0 +1,129 @@
+.stunningSound {
+    position: relative;
+    padding-top: 15rem;
+    overflow-x: hidden;
+    .stunningSound_heading {
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+
+        >h1 {
+            font-size: 10rem;
+        }
+    }
+
+    .stunningSound_des {
+        position: absolute;
+        right: 0;
+        top: 30%;
+        transform: translate(0%, 0%);
+
+
+        max-width: 400px;
+    }
+
+
+}
+
+// @media (max-width:1400px) {}
+
+@media (max-width:1200px) {
+    .stunningSound {
+
+
+        .stunningSound_heading {
+
+
+            >h1 {
+                font-size: 7rem;
+            }
+        }
+
+        .stunningSound_des{
+
+        padding-right: 1rem;
+         max-width: 300px;
+        }
+    }
+
+}
+
+
+@media (max-width:1000px) {
+    .stunningSound {
+
+
+        .stunningSound_heading {
+
+            top: 20%;
+
+            >h1 {
+                font-size: 5rem;
+            }
+        }
+
+        .stunningSound_des {
+
+            top: 40%;
+            right:0;
+        }
+
+    }
+
+}
+
+
+
+
+@media (max-width:768px) {
+    .stunningSound {
+
+
+        .stunningSound_heading {
+
+          
+            >h1 {
+                font-size: 4rem;
+            }
+        }
+
+        .stunningSound_des {
+            max-width: 270px;
+            top: 50%;
+            right: 0;
+            p{
+                font-size: 1rem;
+            }
+        }
+
+    }
+}
+
+@media (max-width:576px) {
+    .stunningSound {
+        padding-top: 1rem;
+
+        .stunningSound_heading {
+
+            top: 15%;
+            >h1 {
+                font-size: 2rem;
+                padding: 2rem;
+            }
+        }
+
+        .stunningSound_des {
+            padding: 2rem;
+            top: 25%;
+            max-width: 100%;
+            left: 0;
+            // top: 50%;
+            // right: -19%;
+            // p{
+            //     font-size: 1rem;
+            // }
+        }
+
+    }
+}

styles/pages/productOverview/_tablesection.scss

@@ -0,0 +1,43 @@
+.circleTableLaptop_Heading {
+    top: 20%;
+}
+
+.circleTableLaptop_text{
+    bottom: 25%;
+    >div{
+        padding: 0px 22%;
+    }
+  
+}
+
+@media (max-width:1300px) {
+    .circleTableLaptop_text {
+        bottom: 18%;
+        >div{
+            font-size: 1rem;
+        }
+    }
+}
+
+@media (max-width:1000px) {
+    .circleTableLaptop_Heading {
+        h1{
+            font-size: 1.5rem;
+        }
+    }
+    .circleTableLaptop_text {
+         bottom: 25%;
+        >div{
+            font-size: 0.7rem;
+        }
+    }
+}
+
+@media (max-width:600px) {
+    .circleTableLaptop_Heading {
+        top: 0;
+        h1{
+            font-size: 1.5rem;
+        }
+    }
+}

styles/pages/productOverview/_wifisection.scss

@@ -0,0 +1,73 @@
+
+.wifiSection {
+    overflow-x: hidden;
+    position: relative;
+  
+    // .wifiSectionImg {
+    //   width: 100vw;
+    //   height: 100vh;
+    //   margin: 10rem 0;
+    //   background-image: url("./../../dist/assets/imgs/productoverview/wifilap.png");
+    //   background-color: white;
+    //   background-size: cover;
+    //   background-repeat: no-repeat;
+    //   background-position: center;
+    // }
+        .wifiSectionDes{
+            display: none;
+        }
+    .textWifiContainer {
+      position: relative;
+  
+      .wifiSection_des {
+        max-width: 500px;
+        position: absolute;
+        right: 0;
+        top: -48%;
+        width: 100%;
+        height: 100%;
+      }
+  
+      .textWifiContainerHeading {
+        >h1 {
+          font-size: 5rem;
+        }
+      }
+    }
+  }
+
+
+
+  @media (max-width:1200px) {
+        .wifiSection{
+            .textWifiContainer {
+                .textWifiContainerHeading {
+                    >h1 {
+                      font-size: 5rem;
+                    }
+                  }
+            }
+            
+        }
+  }
+
+  @media (max-width:1000px) {
+    .wifiSection{
+        .textWifiContainer {
+            display: none;
+
+        }
+
+        .wifiSectionDes{
+            padding: 2rem;
+            display: block;
+            .wifiSection_des {
+                >p{
+                    font-size: 1rem;
+                }
+            }
+           
+        }
+        
+    }
+}