Contact skills (#109)

* testing the contact * testt-contact * test * Contact and skills done * Add location And Skills * updated failing snapshot * changed data * changed app.js Co-authored-by: allan <[email protected]> Co-authored-by: ayaali333 <[email protected]>
ReCoded-Org · Nov 12, 2022 · a62732f · a62732f
1 parent 6e30562
commit a62732f
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 4 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,7 @@ import AboutHero from "./components/aboutHero/AboutHero";
 import Localize from "./Localize";
 import MeetOurTeam from "./components/MeetOurTeam/MeetOurTeam";
 import { teamMembers } from "./data/teamData";
+import Contact from "./components/contact/Contact";
 import WyChooseUs from "./components/whyChooseUs/WhyChooseUs";
 import CompanyShowcaseComponent from "./components/companyShowcaseComponent/CompanyShowcaseComponent";
 import { showCaseData } from "./data/showCaseData";
@@ -101,6 +102,7 @@ function App() {
       <FilterResults filterData={filterData}/>
       <RoadMaps />
       <Hero />
+      <Contact />
       <AboutHero />
       <JobsFinder />
       <OurCollaborators showCaseData={showCaseData} />

diff --git a/src/components/contact/Contact.js b/src/components/contact/Contact.js
@@ -0,0 +1,66 @@
+import React from "react";
+
+export default function Contact() {
+  return (
+    <div className=" bg-[#f8f8f8] flex justify-around items-center pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
+      <div className="flex justify-start flex-col">
+        <h1 className="text-3xl text-dark-gray small:text-xl">Contact</h1>
+        <div className="flex  justify-center  flex-col pt-4 ">
+          <div className="pb-3 flex">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="w-6 h-6 text-dark-gray small:w-4"
+            >
+              <path
+                fillRule="evenodd"
+                d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="pl-3">Erbil</span>
+          </div>
+          <div className="pb-3 flex ">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="w-6 h-6 text-dark-gray small:w-4  "
+            >
+              <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+              <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+            </svg>
+            <span className="pl-3">[email protected]</span>
+          </div>
+          <div className=" flex">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="w-6 h-6 text-dark-gray small:w-4"
+            >
+              <path
+                fillRule="evenodd"
+                d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="pl-3">+964-750-444-4444</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h1 className="text-3xl text-dark-gray pb-3 small:text-xl">Skills</h1>
+        <div>
+          <ul>
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>JS</li>
+            <li>React</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/contact/__Test__/Contact.test.js b/src/components/contact/__Test__/Contact.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+import React from "react";
+import Contact from "../Contact";
+
+it("renders Contact", () => {
+  const tree = renderer.create(<Contact />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/contact/__Test__/__snapshots__/Contact.test.js.snap b/src/components/contact/__Test__/__snapshots__/Contact.test.js.snap
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Contact 1`] = `
+<div
+  className=" bg-[#f8f8f8] flex justify-around items-center pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18"
+>
+  <div
+    className="flex justify-start flex-col"
+  >
+    <h1
+      className="text-3xl text-dark-gray small:text-xl"
+    >
+      Contact
+    </h1>
+    <div
+      className="flex  justify-center  flex-col pt-4 "
+    >
+      <div
+        className="pb-3 flex"
+      >
+        <svg
+          className="w-6 h-6 text-dark-gray small:w-4"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
+            fillRule="evenodd"
+          />
+        </svg>
+        <span
+          className="pl-3"
+        >
+          Erbil
+        </span>
+      </div>
+      <div
+        className="pb-3 flex "
+      >
+        <svg
+          className="w-6 h-6 text-dark-gray small:w-4  "
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"
+          />
+          <path
+            d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"
+          />
+        </svg>
+        <span
+          className="pl-3"
+        >
+          [email protected]
+        </span>
+      </div>
+      <div
+        className=" flex"
+      >
+        <svg
+          className="w-6 h-6 text-dark-gray small:w-4"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
+            fillRule="evenodd"
+          />
+        </svg>
+        <span
+          className="pl-3"
+        >
+          +964-750-444-4444
+        </span>
+      </div>
+    </div>
+  </div>
+  <div>
+    <h1
+      className="text-3xl text-dark-gray pb-3 small:text-xl"
+    >
+      Skills
+    </h1>
+    <div>
+      <ul>
+        <li>
+          HTML
+        </li>
+        <li>
+          CSS
+        </li>
+        <li>
+          JS
+        </li>
+        <li>
+          React
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -9657,11 +9657,7 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-<<<<<<< HEAD
-tailwindcss@^3.0.2, tailwindcss@^3.1.8:
-=======
 tailwindcss@^3.0.2, tailwindcss@^3.2.1:
->>>>>>> e22fe1c860f62d1caee9ec233fe33d559abd033a
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"
   integrity sha512-c2GtSdqg+harR4QeoTmex0Ngfg8IIHNeLQH5yr2B9uZbZR1Xt1rYbjWOWTcj3YLTZhrmZnPowoQDbSRFyZHQ5Q==