practice

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "react-icons": "^5.5.0",
     "react-router": "^7.9.6"
   },
   "devDependencies": {

src/App.jsx

@@ -1,11 +1,12 @@
 import React from "react";
 import Hero from "./components/hero/Hero";
 import Navbar from "./components/shared/Navbar";  
-
+import Career from "./components/home/career";  
 function App() {
   return (
     <div>
       <Navbar />
+      <Career/>
     </div>
   );
 }

src/components/home/career.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import "../../css/career.css";
+import{ FaRocket } from 'react-icons/fa';
+
+
+
+export default function Career() {
+  return (
+    <div className="career-container">
+      <div className="header-section">
+        <h1>Your Tech Career Starts</h1>
+        <h2 className="header-section2">Right Here, Right Now</h2>
+      </div>
+
+      <h2 className="subtitle">Stop waiting. Stop making excuses. Join Northern Nigeria's most successful tech training program</h2>
+
+      <div className="container">
+        <div className="card">
+          <div className="icon">
+            <FaRocket size={70} color="blue" />  
+          </div>
+          <div className="card-content">
+            <h1>Get Started</h1>
+            <h2>Browse courses, pick your track, start learning today</h2>
+            <div className="btn">
+              <button className="btn_a">Browse courses</button>
+            </div>
+          </div>
+        </div>
+
+        <div className="card">
+          <div className="card_y">
+          <img src="../../../../public/images/message.svg" alt="" />
+            <div className="card-content">
+              <h1>Chat Now</h1>
+              <h2>Get instant answers, discuss payment plans. Start immediately</h2>
+            </div>
+          </div>
+          <div className="btn">
+            <button className="btn_b">Whatsapp Us</button>
+          </div>
+        </div>
+
+        <div className="card">
+           <img src="../../../../public/images/user1.svg" alt="" />
+          <div className="card-content">
+            <h1>Join Now</h1>
+            <h2>Apply today, secure your spot, transform your future</h2>
+            <div className="btn">
+              <button className="btn_c">Apply Now</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container_a">
+        <div className="card_x">
+
+          <div className="card-content">
+            <h1>Don't wait another day</h1>
+            <h2>Every day you wait is another day your competition gets ahead. Start Now</h2>
+            <div className="btn">
+              <button className="btn_d">Start Now</button>
+              <button className="btn_e">View Courses</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/css/career.css

@@ -0,0 +1,120 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    align-items: center;
+    justify-content: space-evenly;
+}
+body{
+    background:linear-gradient(to right bottom,darkblue,lightgreen);
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+}
+
+.card {
+    width: 350px;
+    height: 350px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(213, 59, 59, 0.1);
+    padding: 15px,15px,20px;
+    text-align: center;
+    background: linear-gradient(to right,rgb(138, 138, 238),rgb(108, 247, 108));
+}
+.card_x{
+     width: 500px;
+    height: 300px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    padding: 15px,15px,20px;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 40px;
+    text-align: center; 
+    background: linear-gradient(to right,rgb(221, 131, 131),rgb(166, 166, 250));
+}
+.card_y{
+    height: 230px;
+    margin-top:10px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+.button{
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 30px;
+    width: 80%;
+    cursor: pointer;
+}
+.btn_a{
+    background-color: green;
+    padding: 45px,80px;
+    font-size: 25px;
+    margin-top: 10px;
+    width: 80%;
+    border-radius: 10px;
+}
+.btn_b{
+    background-color: blue;
+    padding: 45px,80px;
+    font-size: 25px;
+    margin-top: 50px;
+    width: 80%;
+    border-radius: 10px;
+}
+.btn_c{
+    background-color: purple;
+    padding: 45px,80px;
+    font-size: 25px;
+    margin-top: 10px;
+    width: 70%;
+    border-radius: 10px;
+}.buttons{
+    color: rgb(236, 180, 180);
+    border: none;
+    padding: 20px 50px;
+    border-radius: 30px;
+    width: 80%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+.btn_d{
+    color: whitesmoke;
+    margin-bottom: 10px;
+    background-color:blueviolet;
+    border-radius: 10px;
+    padding: 20px,30px;
+     font-size: 20px; 
+}
+.btn_e{
+    font-size: 20px;
+    border-radius: 10px;
+    background-color:none;
+
+}
+img{
+    width: 70px;
+    height: 80px;
+    margin-bottom: 30px;
+}
+.header-section{
+    text-align: center;
+    margin-bottom: 40px;
+    color:whitesmoke;
+    font-size: 20px;
+}
+.header-section2{
+    color: blueviolet;
+    margin-top: -10px;
+    font-size: 40px;
+}
+.subtitle{
+    text-align: center;
+    margin-bottom: 40px;
+    color:whitesmoke;
+    font-size: 20px;
+}