updated

preeti-192 · Jun 15, 2023 · a5992f3 · a5992f3
1 parent b5cecdc
commit a5992f3
Show file tree

Hide file tree

Showing 20 changed files with 151 additions and 210 deletions.
diff --git a/src/App.css b/src/App.css
@@ -78,10 +78,10 @@
 .nav_circle::after {
     position: absolute;
     content: "";
-    height: 1591px;
-    width: 1591px;
-    top: -460px;
-    right: -10%;
+    height: 800px;
+    width: 801px;
+    top: -156px;
+    right: -8%;
     border: 1px solid rgba(255, 255, 255, 0.5);
     background: transparent !important;
     transition: width 0.3s;
@@ -194,7 +194,10 @@
     border-radius: 0 0 100px 0;
 }
 
-.heroOffice_img,
+.heroOffice_img {
+    border-radius: 0 100px 0px 0px;
+}
+
 .heroTeam_img {
     border-radius: 0 100px 100px 0px;
 }
@@ -208,7 +211,7 @@
     border-top-right-radius: 400px;
     border: 2px solid rgba(0, 0, 0, 0.5);
     left: -400px;
-    bottom: -8%;
+    bottom: -7%;
     z-index: 0;
 }
 
@@ -221,7 +224,7 @@
     border-bottom-right-radius: 400px;
     border: 2px solid rgba(255, 255, 255, 0.5);
     left: -400px;
-    top: 0;
+    top: -2px;
     z-index: 0;
 }
 
@@ -235,8 +238,8 @@
 }
 
 .neg_marginLogo {
-    margin-top: -70%;
-    margin-left: -5px;
+    margin-top: -72%;
+    margin-left: 15px;
 }
 
 .true_magic {
@@ -259,7 +262,7 @@
 
 .msg_btn {
     padding: 16px 18px 16px 30px;
-    box-shadow: 0px 88px 35px rgba(191, 4, 4, 0.03), 0px 50px 30px rgba(191, 4, 4, 0.1), 0px 22px 22px rgba(191, 4, 4, 0.17), 0px 6px 12px rgba(191, 4, 4, 0.2), 0px 0px 0px rgba(191, 4, 4, 0.2); 
+    box-shadow: 0px 88px 35px rgba(191, 4, 4, 0.03), 0px 50px 30px rgba(191, 4, 4, 0.1), 0px 22px 22px rgba(191, 4, 4, 0.17), 0px 6px 12px rgba(191, 4, 4, 0.2), 0px 0px 0px rgba(191, 4, 4, 0.2);
     transition: all .3s;
 }
 
@@ -397,36 +400,6 @@
     gap: 22px;
 }
 
-.grid_item1 {
-    grid-row: 2/3;
-    grid-column: 3/4;
-}
-
-.grid_item2 {
-    grid-row: 1/4;
-    grid-column: 4/9;
-}
-
-.grid_item3 {
-    grid-row: 3/5;
-    grid-column: 2/4;
-}
-
-.grid_item4 {
-    grid-row: 5/7;
-    grid-column: 1/4;
-}
-
-.grid_item5 {
-    grid-row: 4/8;
-    grid-column: 4/7;
-}
-
-.grid_item6 {
-    grid-row: 4/6;
-    grid-column: 7/9;
-}
-
 .grid_item img {
     object-fit: cover;
     object-position: center;
@@ -458,12 +431,6 @@
     left: 150%;
 }
 
-.grid_item:hover,
-.grid_item:active {
-    color: #fff;
-    box-shadow: 0px -1px 10px 0 #e80b0b6b;
-}
-
 .mw_1258 {
     max-width: 1258px;
 }
@@ -472,10 +439,6 @@
     max-width: 993px;
 }
 
-.mw_150 {
-    min-width: 150px;
-}
-
 .top_50 {
     top: -50px;
 }
@@ -489,6 +452,16 @@
     transition: .3s;
 }
 
+.slick-dots li button:before {
+    font-size: 13px !important;
+    color: var(--bg-red) !important;
+}
+
+.slick-dots li.slick-active button:before {
+    opacity: .75;
+    color: var(--bg-red);
+}
+
 .truedata_card {
     border: 5px solid #215BC7;
 }
@@ -560,6 +533,10 @@
     width: 20%;
 }
 
+.mw_100 {
+    max-width: 100px;
+}
+
 /* === form === */
 .contact {
     position: relative;
@@ -612,11 +589,12 @@ svg:hover path {
     fill-opacity: 1;
 }
 
-.send_btn:hover{
+.send_btn:hover {
     background: white;
-        color: var(--fc-red);
-        box-shadow: 0px 88px 35px rgba(191, 4, 4, 0.03), 0px 50px 30px rgba(191, 4, 4, 0.1), 0px 22px 22px rgba(191, 4, 4, 0.17), 0px 6px 12px rgba(191, 4, 4, 0.2), 0px 0px 0px rgba(191, 4, 4, 0.2);
+    color: var(--fc-red);
+    box-shadow: 0px 88px 35px rgba(191, 4, 4, 0.03), 0px 50px 30px rgba(191, 4, 4, 0.1), 0px 22px 22px rgba(191, 4, 4, 0.17), 0px 6px 12px rgba(191, 4, 4, 0.2), 0px 0px 0px rgba(191, 4, 4, 0.2);
 }
+
 .touch_btn:hover,
 .msg_btn:hover {
     background: transparent;
@@ -690,10 +668,6 @@ svg:hover path {
     backface-visibility: hidden;
 }
 
-/* .content {
-    transform: translateZ(70px) scale(0.8);
-} */
-
 .front {
     z-index: 2;
 }
@@ -712,7 +686,7 @@ svg:hover path {
 
 .map_bg {
     background: url("./assets/images/png/map.png") no-repeat;
-    background-size: cover;
+    background-size: 100% 100%;
 }
 
 .mw_872 {
@@ -811,6 +785,19 @@ svg:hover path {
     .mt_-160 {
         margin-top: -160px;
     }
+
+    .nav_circle::after {
+        position: absolute;
+        content: "";
+        height: 1591px;
+        width: 1591px;
+        top: -460px;
+        right: -10%;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+        background: transparent !important;
+        transition: width 0.3s;
+        border-radius: 50%;
+    }
 }
 
 @media (min-width:1600px) {
@@ -821,6 +808,7 @@ svg:hover path {
     .black_circle {
         width: 197px;
         height: 197px;
+        padding: 47px;
     }
 
     .productCard_container {
@@ -837,7 +825,10 @@ svg:hover path {
         border-radius: 0 0 50px 0;
     }
 
-    .heroOffice_img,
+    .heroOffice_img {
+        border-radius: 0 50px 0px 0px;
+    }
+
     .heroTeam_img {
         border-radius: 0 50px 50px 0px;
     }
@@ -858,13 +849,21 @@ svg:hover path {
     }
 
     .product_card {
-        height: 570px;
+        height: 617px;
         margin-bottom: 0;
     }
 
     .expert_circle::after {
         display: none;
     }
+
+    .nav_circle::after {
+        display: none;
+    }
+
+    .map_bg {
+        background-size: cover;
+    }
 }
 
 @media (max-width:400px) {

diff --git a/src/App.js b/src/App.js
@@ -25,7 +25,7 @@ function App() {
   }, []);
   return (
     <div className="App overflow-hidden">
-      {/* <LoaderHome /> */}
+      <LoaderHome />
       <BackToTop />
       <EyonaHero />
       <Eyona />

diff --git a/src/assets/images/png/arivu_img.png b/src/assets/images/png/arivu_img.png
diff --git a/src/assets/images/png/gridParty_img.png b/src/assets/images/png/gridParty_img.png
diff --git a/src/assets/images/png/gridTeam_img.png b/src/assets/images/png/gridTeam_img.png
diff --git a/src/assets/images/png/gridTyping_img.png b/src/assets/images/png/gridTyping_img.png
diff --git a/src/assets/images/png/grid_img1.png b/src/assets/images/png/grid_img1.png
diff --git a/src/assets/images/png/grid_laptop_img.png b/src/assets/images/png/grid_laptop_img.png
diff --git a/src/assets/images/png/grid_woman_workingLaptop_img.png b/src/assets/images/png/grid_woman_workingLaptop_img.png
diff --git a/src/assets/images/png/magicGrid_img.png b/src/assets/images/png/magicGrid_img.png
diff --git a/src/components/Experts.jsx b/src/components/Experts.jsx
@@ -84,7 +84,7 @@ const Experts = () => {
               <h4 className="ff_Montserrat fw-bold fs_4xl fc_Slate mt-lg-3">
                 B2B Software
               </h4>
-              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0">
+              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0 lh_40">
                 Our products are at the forefront of industry, creating
                 streamlined processing for your business needs.
               </p>
@@ -102,7 +102,7 @@ const Experts = () => {
               <h4 className="ff_Montserrat fw-bold fs_4xl fc_Slate mt-lg-3">
                 Eco-system Ownership
               </h4>
-              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0">
+              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0 lh_40">
                 We provide ourselves on making our products easy to use and
                 personalised for your business needs.
               </p>
@@ -120,7 +120,7 @@ const Experts = () => {
               <h4 className="ff_Montserrat fw-bold fs_4xl fc_Slate mt-lg-3">
                 Globally Relevant
               </h4>
-              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0">
+              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0 lh_40">
                 All our software if fit for purpose and easy to scale across
                 your organisation in any country.
               </p>
@@ -138,7 +138,7 @@ const Experts = () => {
               <h4 className="ff_Montserrat fw-bold fs_4xl fc_Slate mt-lg-3">
                 Industry Specific
               </h4>
-              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0">
+              <p className="ff_Montserrat fw-normal fs_2xl fc_grey max_width_550 mx-auto mx-lg-0 lh_40">
                 Our products are predominately tailored for a specific vertical
                 or industry. We empower domain experts, to ensure you the best
                 results.

diff --git a/src/components/Eyona.jsx b/src/components/Eyona.jsx
@@ -15,12 +15,12 @@ const Eyona = () => {
             data-aos-duration="2000"
           >
             <Col xs={12} xxl={12} md={10}>
-              <h2 className="ff_Montserrat fw-bold fs_5x5l fc_white mw_1258 position-relative z-2">
+              <h2 className="ff_Montserrat fw-bold fs_5x5l fc_white mw_1258 position-relative z-2 lh_70">
                 It’s our passion. Our business. We love to see our customers
                 reinventing themselves, people discovering their true potential
                 and creating products to enable industries.
               </h2>
-              <p className="ff_Montserrat fw-medium fs_2xl fc_light mw_993 mt-md-5 mt-3">
+              <p className="ff_Montserrat fw-medium fs_2xl fc_light mw_993 mt-md-5 mt-3 lh_40">
                 To us innovation means: Seeing the bigger picture, striving for
                 better insights, always curious, thinking the unthinkable, the
                 impossible and then making it happen. In other words, we support

diff --git a/src/components/EyonaFooter.jsx b/src/components/EyonaFooter.jsx
@@ -7,7 +7,7 @@ const EyonaFooter = () => {
     <>
       <footer className="py-5 bg_Slate footer_circle">
         <div className="mt-5 container">
-          <a href="#hero"> 
+          <a href="#hero">
             <img src={logo} alt="logo" className="mw_324 w-50" />
           </a>
           <Row className="py-5 mb-5 justify-content-lg-between">
@@ -34,12 +34,7 @@ const EyonaFooter = () => {
                     London
                   </h2>
                   <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
-                    77 Farringdon Road
-                  </p>
-                  <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
-                    London
-                  </p>
-                  <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
+                    77 Farringdon Road <br /> London <br />
                     EC1m 3JU
                   </p>
                 </Col>
@@ -48,13 +43,8 @@ const EyonaFooter = () => {
                     Cape Town
                   </h2>
                   <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
-                    4 Alphons way,
-                  </p>
-                  <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
-                    Tokai, Cape Town,
-                  </p>
-                  <p className="ff_inter fc_white fw-normal fs_xsm mb-1 Cursor_Pointer fc_lighter">
-                    Western Cape 7420, ZA
+                    4 Alphons way, <br /> Tokai, Cape Town, <br /> Western Cape
+                    7420, <br /> ZA
                   </p>
                 </Col>
               </Row>