Completed Hero section (#67)

* Completed Hero section

* Done with snapshot testing

* added a missing dependency for snapshot testing

Co-authored-by: allan <[email protected]>

package.json

@@ -14,6 +14,7 @@
     "react-redux": "^8.0.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
+    "react-test-renderer": "^18.2.0",
     "web-vitals": "^2.1.0",
     "yup": "^0.32.11"
   },
@@ -53,6 +54,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^29.2.2",
     "postcss": "^8.4.17",
     "prettier": "2.7.1",
     "tailwindcss": "^3.1.8"

src/App.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 // import { Routes, Route } from "react-router-dom";
-
+import Hero from './components/Hero/Hero';
 import './App.css';
 
 function App() {
-    return ( <div className = "App" >
-        <h1>Hello</h1>
-        </div>
-    );
+  return (
+    <div className="App">
+      <Hero />
+      <h1>Hello</h1>
+    </div>
+  );
 }
 
-export default App;
+export default App;

src/components/Hero/Hero.jsx

@@ -0,0 +1,37 @@
+function Hero() {
+  return (
+    <div className="bg-dark-gray flex justify-around items-center px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
+      <div className="text-left">
+        <h1 className="text-white text-5xl leading-snug font-semibold font-inter small:text-lg medium:text-3xl large:text-4xl">
+          10,254 Jobs <br /> Are Listed Here!
+        </h1>
+        <h3 className="text-xl text-white medium:text-yellow-30 font-inter small:text-xs medium:text-lg large:xl">
+          Find your dream job now
+        </h3>{' '}
+        <div className=" mt-5 w-48 small:w-36 medium:w-56 large:w-72">
+          <input
+            type="search"
+            className="rounded-3xl px-6 py-2 outline-none absolute w-72 small:w-32 small:py-1.5 small:px-3 small:text-xs medium:w-52"
+            placeholder="Type to search"
+          />
+          <button
+            type="submit"
+            className="py-2 bg-accent px-5 rounded-3xl text-white relative  left-52 hover:bg-red-500 small:py-1.5 small:px-3 small:text-xs small:left-24 medium:left-36 "
+          >
+            Search
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <img
+          src="/assets/jobsearch.png"
+          alt="a girl searching for job"
+          className="w-500 small:w-300 ml-7"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Hero;

src/components/Hero/Hero.test.js

@@ -0,0 +1,8 @@
+import renderer from 'react-test-renderer';
+
+import Hero from './Hero';
+
+it('renders correctly when the component matches the snapshot', () => {
+  const tree = renderer.create(<Hero />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Hero/__snapshots__/Hero.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when the component matches the snapshot 1`] = `
+<div
+  className="bg-dark-gray flex justify-around items-center px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18"
+>
+  <div
+    className="text-left"
+  >
+    <h1
+      className="text-white text-5xl leading-snug font-semibold font-inter small:text-lg medium:text-3xl large:text-4xl"
+    >
+      10,254 Jobs 
+      <br />
+       Are Listed Here!
+    </h1>
+    <h3
+      className="text-xl text-white medium:text-yellow-30 font-inter small:text-xs medium:text-lg large:xl"
+    >
+      Find your dream job now
+    </h3>
+     
+    <div
+      className=" mt-5 w-48 small:w-36 medium:w-56 large:w-72"
+    >
+      <input
+        className="rounded-3xl px-6 py-2 outline-none absolute w-72 small:w-32 small:py-1.5 small:px-3 small:text-xs medium:w-52"
+        placeholder="Type to search"
+        type="search"
+      />
+      <button
+        className="py-2 bg-accent px-5 rounded-3xl text-white relative  left-52 hover:bg-red-500 small:py-1.5 small:px-3 small:text-xs small:left-24 medium:left-36 "
+        type="submit"
+      >
+        Search
+      </button>
+    </div>
+  </div>
+  <div>
+    <img
+      alt="a girl searching for job"
+      className="w-500 small:w-300 ml-7"
+      src="/assets/jobsearch.png"
+    />
+  </div>
+</div>
+`;

tailwind.config.js

@@ -3,15 +3,24 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
-      colors :{
-        "primary": "var(--primary)",
-        "secondary": "var(--secondary)",
-        "accent": "var(--accent)",
-        "dark-gray": "var(--dark-gray)",
+      colors: {
+        primary: 'var(--primary)',
+        secondary: 'var(--secondary)',
+        accent: 'var(--accent)',
+        'dark-gray': 'var(--dark-gray)',
+      },
+      fontFamily: {
+        inter: ['Inter'],
+      },
+      width: {
+        500: '500px',
+        300: '300px',
+      },
+      screens: {
+        small: { min: '360px', max: '650px' },
+        medium: { min: '651px', max: '1023px' },
+        large: { min: '1024px', max: '1279px' },
       },
-      fontFamily : {
-        'inter':['Inter']
-      }
     },
   },
   plugins: [],