Merge pull request #10 from akirachix/fix/linkage

Linked the navbar with the sections and fixed responsiveness
Florence-nyokabi · Sep 7, 2023 · 1bf4b92 · 1bf4b92
2 parents 4972b0b + 7a91b07
commit 1bf4b92
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 45 deletions.
diff --git a/sakigake-informational/public/index.html b/sakigake-informational/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>MzaziConnect</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/sakigake-informational/src/components/Mission/styles.css b/sakigake-informational/src/components/Mission/styles.css
@@ -49,6 +49,8 @@
 #blueContainer p {
     font-family:'Jost',san ;
     line-height: 1.8;
+    color: #484848;
+    padding-bottom: 3em;
 }
 
 #icon {

diff --git a/sakigake-informational/src/components/Navbar/index.js b/sakigake-informational/src/components/Navbar/index.js
@@ -11,9 +11,9 @@ const Navbar = () => {
       </span>
       <div className={`nav-items ${isOpen && "open"}`} data-testid="nav-items"> 
         <a href="/home">Home</a>
-        <a href="/about">About</a>
-        <a href="/service"> Our Services</a>
-        <a href="/contact">Contact Us</a>
+        <a href="#mission-section">About</a>
+        <a href="#our-services"> Our Services</a>
+        <a href="#footer-container">Contact Us</a>
       </div>
       <div
         className={`nav-toggle ${isOpen && "open"}`}

diff --git a/sakigake-informational/src/components/Navbar/index.test.js b/sakigake-informational/src/components/Navbar/index.test.js
@@ -27,8 +27,8 @@ describe("Navbar component", () => {
     const contactLink = getByText("Contact Us");
 
     expect(homeLink.getAttribute("href")).toBe("/home");
-    expect(aboutLink.getAttribute("href")).toBe("/about");
-    expect(serviceLink.getAttribute("href")).toBe("/service");
-    expect(contactLink.getAttribute("href")).toBe("/contact");
+    expect(aboutLink.getAttribute("href")).toBe("#mission-section");
+    expect(serviceLink.getAttribute("href")).toBe("#our-services");
+    expect(contactLink.getAttribute("href")).toBe("#footer-container");
   });
 });
diff --git a/sakigake-informational/src/components/ProductDownload/index.js b/sakigake-informational/src/components/ProductDownload/index.js
@@ -13,10 +13,7 @@ Access your <span className="blue"> child's assignments </span>
 and discover <br/> the <span className="blue"> nearest shops </span>  offering 
 the materials needed for <br/> their studies from our App.
 </p>
-<img className="playstore" 
-src="https://res.cloudinary.com/dtu8pkzkp/image/upload/v1693309240/image-removebg-preview_uq2sd5.png"
-alt="download"
-/>
+<img className="playstore" src="./images/playstore.png" alt="playstore"/>
 </div>
 
 <div className="phoneDisplay">

diff --git a/sakigake-informational/src/components/ProductDownload/style.css b/sakigake-informational/src/components/ProductDownload/style.css
@@ -1,21 +1,20 @@
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&family=Hind+Madurai&family=Jost&family=Nunito:wght@300;400&display=swap');
-
 .main{
 background-color: #E7F5FF;
 display: flex;
 font-size:30px;
 }
 .main p{
   font-family: 'Baloo Bhai 2', cursive;
+  padding-top: 3em;
 }
 .words{
     margin-left: 100px;
     margin-top: 100px;
 }
 .playstore{
-    width: 200px;
-    height: 70px;
-    padding-bottom: 25px;
+ width: 7.5em;
+padding-bottom: 25px;
 }
 .blue{
     color: rgb(0, 170, 255);
@@ -48,11 +47,8 @@ font-size:30px;
       width: 120px;
       height: 50px;
       object-fit: contain;
-
     }
     .pic {
         margin: 20px 0;
       }
-  }
-
-
+  }
diff --git a/sakigake-informational/src/components/Welcome/index.js b/sakigake-informational/src/components/Welcome/index.js
@@ -14,7 +14,7 @@ const Welcome = () =>{
                     <br/>
                     child's education journey.
                 </h1>
-                <p>
+                <p className="our-app">
                 Our app simplifies assignment tracking and provides information  on nearby
                 <br/>
                 shops where you can find the necessary

diff --git a/sakigake-informational/src/components/Welcome/style.css b/sakigake-informational/src/components/Welcome/style.css
@@ -1,7 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&family=Hind+Madurai&family=Nunito:wght@300;400&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&family=Hind+Madurai&family=Jost&family=Nunito:wght@300;400&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;500;600;700;800&display=swap');
-
 .home{
     background-image:
     linear-gradient(rgba(255, 255, 255, 0.700), rgba(255, 255, 255, 0.700)),
@@ -21,7 +20,6 @@
 }
 .home-div-one{
     padding-left: 5%;
-    margin-top: 6%;
 }
 .home-div-one .welcome{
     font-size: 50px;
@@ -71,27 +69,24 @@
     background-size: cover;
     margin-top: -3.5em;
 }
-
 .span-dot{
     background-color: #FFDB5B;
-    padding: 1.2em 1.8em;
+    padding: 1px .85em;
     border-radius: 2em;
     margin-left: 5em;
 }
-
 .span-dot-two{
     margin-left: 2em;
     float: right;
 }
-
 .span-dot-two::after{
     content: '';
     background: #72D4F7;
     display: block;
-    height: 2.5em;
-    width: .1em;
-    padding: 1px 20px;
+    height: 1em;
+    width: 1em;
     border-radius: 100%;
+    margin-left: 6em;
 }
 @media only screen and (max-width:1629px){
     .child-background{
@@ -107,8 +102,10 @@
     .child-background{
         margin-right: 2em;
     }
+    .span-dot{
+        display: none;
+    }
 }
-
 @media only screen and (max-width:1597px){
     .child-background{
         height: 495px !important;
@@ -121,8 +118,6 @@
         font-size: 1.15em !important;
     }
 }
-
-
 @media only screen and (max-width:1429px){
     .child-background{
         height: 450px !important;
@@ -132,7 +127,6 @@
         font-size: 2.1em !important;
     }
 }
-
 @media only screen and (max-width:1262px){
     .child-background{
         height: 390px !important;
@@ -144,6 +138,7 @@
     .home-div-one p{
         font-size: 1.038em !important;
     }
+
 }
 @media only screen and (max-width:1250px){
     .child-background{
@@ -165,10 +160,17 @@
     .home-div-one h1{
         font-size: 1.8em !important;
     }
-
     .home-div-one{
         padding-left: 3%;
     }
+    .span-dot-two{
+        margin-left: 0;
+        float: none;
+    }
+
+    .span-dot-two::after{
+        margin-left: 2em;
+    }
 }
 @media only screen and (max-width:1110px){
     .child-background{
@@ -241,7 +243,7 @@
     }
     .home-divs{
         margin-bottom: 10%;
-        padding: 0 0.2em !important;
+        padding: 0 1.5em !important;
         margin-top: -5%;
     }
     .home-divs p{

diff --git a/sakigake-informational/src/components/WhyUs/index.js b/sakigake-informational/src/components/WhyUs/index.js
@@ -4,7 +4,7 @@ import './style.css';
 
 const WhyMzaziConnect = () => {
     return(
-        <div className="section-container">
+        <div className="section-container" id="our-services">
             <div className="section-header">
                 <h1 className="main-heading">WHY MZAZICONNECT?</h1>
             </div>

diff --git a/sakigake-informational/src/components/WhyUs/index.test.js b/sakigake-informational/src/components/WhyUs/index.test.js
@@ -40,7 +40,4 @@ describe('WhyMzaziConnect Component', () => {
             expect(realTimeUpdatesHeading).toBeInTheDocument();
 
         })
-
-
-
     });
diff --git a/sakigake-informational/src/components/WhyUs/style.css b/sakigake-informational/src/components/WhyUs/style.css
@@ -77,28 +77,71 @@
     .section-header .main-heading{
         font-size: 30px;
         font-weight: 300px;
-
     }
     .contents{
         display: grid;
-        /* align-items: center; */
-        /* text-align: center; */
         grid-template-columns: repeat(1,1fr);
         margin-top: -3em;
     }
     .contents-paragraph .headings{
-        /* text-align: center; */
         font-size: 20px;
     }
     .contents-paragraph1 .headings{
 
         margin-left: 4-em;
         font-size: 20px;
     }
-
+    .contents-paragraph1{
+        padding-top: 2em;
+    }
+    .image-container img{
+        width: 320px;
+        height: 320px;
+        align-items: center;
+        margin-left: 3em;
+        padding-top: 4em;
+    }
+    .content-container h2 {
+        font-size:25px;
+        text-align: start;
+        margin-left: 10%;
+        padding: 0;
+    }
+    .content-container p{
+        font-size: 18px;
+        text-align: start;
+        margin-left: 10%;
+    }
+    br{
+        display: none;
+    }
+}
+
+@media only screen and (max-width:1429px){
+    .section-header .main-heading{
+        font-size: 30px;
+        font-weight: 300px;
+    }
+    .contents{
+        grid-template-columns: repeat(1,1fr);
+    }
+    .contents-paragraph .headings{
+        font-size: 20px;
+    }
+    .contents-paragraph1 .headings{
+
+        margin-left: 4-em;
+        font-size: 20px;
+    }
+    .contents-paragraph1{
+        padding-top: 2em;
+    }
     .image-container img{
         width: 320px;
         height: 320px;
+        align-items: center;
+        margin-left: 1.5em;
+        padding-top: 4em;
     }
     .content-container h2 {
         font-size:25px;
@@ -110,7 +153,6 @@
         font-size: 18px;
         text-align: start;
         margin-left: 10%;
-        /* text-align: center; */
     }
     br{
         display: none;