diff --git a/package-lock.json b/package-lock.json index 9319473..098754f 100644 --- a/package-lock.json +++ b/package-lock.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": { @@ -1464,6 +1465,15 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", diff --git a/package.json b/package.json index 6a348b9..0e666e1 100644 --- a/package.json +++ b/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": { diff --git a/public/images/message.svg b/public/images/message.svg new file mode 100644 index 0000000..08901bd --- /dev/null +++ b/public/images/message.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/user1.svg b/public/images/user1.svg new file mode 100644 index 0000000..f7a8809 --- /dev/null +++ b/public/images/user1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index a2916a5..253f160 100644 --- a/src/App.jsx +++ b/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 (
+
); } diff --git a/src/components/home/career.jsx b/src/components/home/career.jsx new file mode 100644 index 0000000..8c3385e --- /dev/null +++ b/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 ( +
+
+

Your Tech Career Starts

+

Right Here, Right Now

+
+ +

Stop waiting. Stop making excuses. Join Northern Nigeria's most successful tech training program

+ +
+
+
+ +
+
+

Get Started

+

Browse courses, pick your track, start learning today

+
+ +
+
+
+ +
+
+ +
+

Chat Now

+

Get instant answers, discuss payment plans. Start immediately

+
+
+
+ +
+
+ +
+ +
+

Join Now

+

Apply today, secure your spot, transform your future

+
+ +
+
+
+
+ +
+
+ +
+

Don't wait another day

+

Every day you wait is another day your competition gets ahead. Start Now

+
+ + +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/css/career.css b/src/css/career.css new file mode 100644 index 0000000..e0753e3 --- /dev/null +++ b/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; +} \ No newline at end of file