completed about us component (#75)

* completed about us component * add test and snapshot * upadeted with being responsive * added padding * added padding * added component to folder * updated snapshot test * fixed vercel error Co-authored-by: Allan <[email protected]> Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 6, 2022 · ea48a3b · ea48a3b
1 parent 42ea6a9
commit ea48a3b
Show file tree

Hide file tree

Showing 11 changed files with 211 additions and 9 deletions.
diff --git a/public/aboutus.jpg b/public/aboutus.jpg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import AboutUsComponent from './components/AboutUsComponent/AboutUsComponent';
 import Hero from './components/Hero/Hero';
 import Localize from './Localize';
 import MeetOurTeam from './components/MeetOurTeam/MeetOurTeam';
@@ -101,6 +102,7 @@ function App() {
       <LatestJobs data={data} headers={header} />
       <MeetOurTeam teamMembers={teamMembers} />
       <WyChooseUs />
+      <AboutUsComponent />
       <Experience />
       <Education />
     </div>

diff --git a/src/Components/AboutUsComponent/AboutUsComponent.jsx b/src/Components/AboutUsComponent/AboutUsComponent.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+function AboutUsComponent() {
+  return (
+    <div className="  large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6">
+      <div className="small:text-center medium:text-center large:text-center small:mb-6 medium:pt-4 medium:mb-4">
+        <h1 className="font-semibold text-5xl  ml-56 small:ml-8	medium:ml-8 large:ml-8  text-green-600  ">
+          About <span className="text-secondary  ">Us?</span>
+        </h1>
+      </div>
+
+      <div className="md:flex small:pr-3 small:pl-3  md:p-8 text-center md:text-left space-y-4 pb-12 space-x-19 medium:space-x-19 large:space-x-1     ">
+        <img
+          className="ml-56 large:ml-36 mx-auto md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
+          src="/aboutus.jpg"
+          alt=""
+        />
+
+        <p className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:w-fit medium:ml-3 medium:mr-3 ">
+          Our Mission is to build a bridge those who need a job and the ones who
+          needs someone to do the job for them this platform makes connections
+          easier and faster, in a community where the tech sector is growing
+          rapidly the demand for tech professionals is geowing as well we strive
+          to put job seekers first giving them free access to search for jobs
+          post resumes and research companies. Every day we connect millions of
+          people to new opportunities. but of courde this also allows companies
+          find the right candidate faster putting themselves out there and
+          allowing job seekers to see their open positions.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default AboutUsComponent;
diff --git a/src/Components/AboutUsComponent/AboutUsComponent.test.js b/src/Components/AboutUsComponent/AboutUsComponent.test.js
@@ -0,0 +1,8 @@
+import renderer from 'react-test-renderer';
+
+import AboutUsComponent from './AboutUsComponent';
+
+it('renders correctly when the component matches the snapshot', () => {
+  const tree = renderer.create(<AboutUsComponent />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/Components/AboutUsComponent/__snapshots__/AboutUsComponent.test.js.snap b/src/Components/AboutUsComponent/__snapshots__/AboutUsComponent.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className="  large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6"
+>
+  <div
+    className="small:text-center medium:text-center large:text-center small:mb-6 medium:pt-4 medium:mb-4"
+  >
+    <h1
+      className="font-semibold text-5xl  ml-56 small:ml-8	medium:ml-8 large:ml-8  text-green-600  "
+    >
+      About 
+      <span
+        className="text-secondary  "
+      >
+        Us?
+      </span>
+    </h1>
+  </div>
+  <div
+    className="md:flex small:pr-3 small:pl-3  md:p-8 text-center md:text-left space-y-4 pb-12 space-x-19 medium:space-x-19 large:space-x-1     "
+  >
+    <img
+      alt=""
+      className="ml-56 large:ml-36 mx-auto md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
+      src="/aboutus.jpg"
+    />
+    <p
+      className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:w-fit medium:ml-3 medium:mr-3 "
+    >
+      Our Mission is to build a bridge those who need a job and the ones who needs someone to do the job for them this platform makes connections easier and faster, in a community where the tech sector is growing rapidly the demand for tech professionals is geowing as well we strive to put job seekers first giving them free access to search for jobs post resumes and research companies. Every day we connect millions of people to new opportunities. but of courde this also allows companies find the right candidate faster putting themselves out there and allowing job seekers to see their open positions.
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/AboutUsComponent/AboutUsComponent.jsx b/src/components/AboutUsComponent/AboutUsComponent.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+function AboutUsComponent() {
+  return (
+    <div className="  large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6">
+      <div className="small:text-center medium:text-center large:text-center small:mb-6 medium:pt-4 medium:mb-4">
+        <h1 className="font-semibold text-5xl  ml-56 small:ml-8	medium:ml-8 large:ml-8  text-green-600  ">
+          About <span className="text-secondary  ">Us?</span>
+        </h1>
+      </div>
+
+      <div className="md:flex small:pr-3 small:pl-3  md:p-8 text-center md:text-left space-y-4 pb-12 space-x-19 medium:space-x-19 large:space-x-1     ">
+        <img
+          className="ml-56 large:ml-36 mx-auto md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
+          src="/aboutus.jpg"
+          alt=""
+        />
+
+        <p className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:w-fit medium:ml-3 medium:mr-3 ">
+          Our Mission is to build a bridge those who need a job and the ones who
+          needs someone to do the job for them this platform makes connections
+          easier and faster, in a community where the tech sector is growing
+          rapidly the demand for tech professionals is geowing as well we strive
+          to put job seekers first giving them free access to search for jobs
+          post resumes and research companies. Every day we connect millions of
+          people to new opportunities. but of courde this also allows companies
+          find the right candidate faster putting themselves out there and
+          allowing job seekers to see their open positions.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default AboutUsComponent;
diff --git a/src/components/AboutUsComponent/AboutUsComponent.test.js b/src/components/AboutUsComponent/AboutUsComponent.test.js
@@ -0,0 +1,8 @@
+import renderer from 'react-test-renderer';
+
+import AboutUsComponent from './AboutUsComponent';
+
+it('renders correctly when the component matches the snapshot', () => {
+  const tree = renderer.create(<AboutUsComponent />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/AboutUsComponent/__snapshots__/AboutUsComponent.test.js.snap b/src/components/AboutUsComponent/__snapshots__/AboutUsComponent.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className="  large:space-x-10  medium:space-x-10  pt-8 pb-6 small:pt-6"
+>
+  <div
+    className="small:text-center medium:text-center large:text-center small:mb-6 medium:pt-4 medium:mb-4"
+  >
+    <h1
+      className="font-semibold text-5xl  ml-56 small:ml-8	medium:ml-8 large:ml-8  text-green-600  "
+    >
+      About 
+      <span
+        className="text-secondary  "
+      >
+        Us?
+      </span>
+    </h1>
+  </div>
+  <div
+    className="md:flex small:pr-3 small:pl-3  md:p-8 text-center md:text-left space-y-4 pb-12 space-x-19 medium:space-x-19 large:space-x-1     "
+  >
+    <img
+      alt=""
+      className="ml-56 large:ml-36 mx-auto md:w-96 medium:mb-3    small:ml-0	 medium:ml-0 large:ml-0 medium:justify-start"
+      src="/aboutus.jpg"
+    />
+    <p
+      className="w-3/6 medium:pr-3 text-justify small:justify small:w-fit small:ml-3 small:mr-3	medium:justify medium:w-fit medium:ml-3 medium:mr-3 "
+    >
+      Our Mission is to build a bridge those who need a job and the ones who needs someone to do the job for them this platform makes connections easier and faster, in a community where the tech sector is growing rapidly the demand for tech professionals is geowing as well we strive to put job seekers first giving them free access to search for jobs post resumes and research companies. Every day we connect millions of people to new opportunities. but of courde this also allows companies find the right candidate faster putting themselves out there and allowing job seekers to see their open positions.
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/LatestJob/__tests__/__snapshots__/LatestJobs.test.js.snap b/src/components/LatestJob/__tests__/__snapshots__/LatestJobs.test.js.snap
@@ -110,7 +110,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -140,7 +142,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -170,7 +174,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -200,7 +206,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -230,7 +238,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -260,7 +270,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply
@@ -290,7 +302,9 @@ exports[`renders Latest Jobs correctly 1`] = `
               className="py-4 px-6 small:py-1 small:px-2 w-20"
             >
               <button
-                className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+                className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
                 type="button"
               >
                 Apply

diff --git a/src/components/UI/Button/__tests__/__snapshots__/CustomButton.test.js.snap b/src/components/UI/Button/__tests__/__snapshots__/CustomButton.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`renders Custom button correctly 1`] = `
 <button
-  className="w-25 h-7 bg-white text-accent border-2  border-accent rounded-3xl px-5 small:w-15 small:h-5  small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
+  className="w-25 h-7 bg-white text-accent border-2 
+ border-accent rounded-3xl px-5 small:w-15 small:h-5 
+ small:rounded-xs small:px-2 hover:border-primary hover:text-primary"
   type="button"
 >
   Any

diff --git a/yarn.lock b/yarn.lock
@@ -72,6 +72,7 @@
   integrity sha512-u1dMdBUmA7Z0rBB97xh8pIhviK7oItYOkjbsCxTWMknyvbQRBwX7/gn4JXurRdirWMFh+ZtYARqkA6ydogVZpg==
   dependencies:
     "@babel/types" "^7.20.0"
+
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
@@ -1065,6 +1066,31 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.19.6", "@babel/traverse@^7.20.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.20.0.tgz#538c4c6ce6255f5666eba02252a7b59fc2d5ed98"
+  integrity sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.20.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.20.0"
+    "@babel/types" "^7.20.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.3", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.19.3"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.19.3.tgz"
+  integrity sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.20.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.0.tgz#52c94cf8a7e24e89d2a194c25c35b17a64871479"
@@ -8690,7 +8716,7 @@ react-icons@^4.6.0:
 
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
 react-is@^16.13.1, react-is@^16.7.0: