Skip to content

Commit ab40b60

Browse files
rjcodedevrjcodedev
authored
added carrer , home, error page
1 parent ed977c3 commit ab40b60

File tree

9 files changed

+331
-18
lines changed

9 files changed

+331
-18
lines changed

‎src/App.js‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
import { BrowserRouter, Route, Routes } from "react-router-dom";
2-
import Home from './component/Home';
3-
import About from './component/About'
4-
import Contact from './component/Contact'
5-
import Header from './component/Header';
6-
import Footer from './component/Footer';
7-
import ReactGA from 'react-ga';
8-
const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID // OUR_TRACKING_ID
9-
ReactGA.initialize(TRACKING_ID);
10-
ReactGA.pageview(window.location.pathname);
2+
import Home from "./component/page/home/Home";
3+
import About from "./component/About";
4+
import Contact from "./component/page/contact/Contact";
5+
import Header from "./component/Header";
6+
import Footer from "./component/Footer";
7+
import ReactGA from "react-ga";
8+
import EBookSection from "./component/page/ebook/EBookSection";
9+
import Placment from "./component/page/carrer/Carrer";
10+
import FreePdf from "./component/page/freepdf/FreePdf";
11+
import ErrorPage from "./component/page/ErrorPage";
12+
const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID; // OUR_TRACKING_ID
13+
ReactGA.initialize(TRACKING_ID);
14+
ReactGA.pageview(window.location.pathname);
1115
function App() {
1216
return (
1317
<BrowserRouter>
1418
<div className="relative">
1519
<Header />
1620
<Routes>
17-
<Route path='/' element={<Home />} />
21+
<Route path="/" element={<Home />} />
1822
<Route path="about" element={<About />} />
1923
<Route path="contact" element={<Contact />} />
24+
<Route path="ebook" element={<EBookSection />} />
25+
<Route path="carrer" element={<Placment />} />
26+
<Route path="freepdf" element={<FreePdf />} />
27+
<Route path="*" element={<ErrorPage />} />
2028
</Routes>
2129
<Footer />
2230
</div>

‎src/component/Header.js‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import { Link } from "react-router-dom";
33
import headLogo from "../assets/head-logo.png";
44
import { useLocation } from "react-router-dom";
55

66
const Header = () => {
77
const location = useLocation();
8-
8+
const [isMenuVisible, setIsMenuVisible] = useState(false);
9+
console.log("host", window.location.host);
910
return (
10-
<div className="bg-black flex justify-between py-2 px-2">
11+
<div className="bg-blue-500 flex justify-between py-2 px-2">
1112
<div className="flex justify-center items-center gap-4">
1213
<Link to="/">
1314
<img src={headLogo} alt="img" className="md:w-10 md:h-10 w-10 h-10" />
1415
</Link>
15-
{location.pathname === "/contact" && (
16+
{location.pathname === "/" ? (
17+
<div className="text-white pr-3 font-bold text-sm md:text-base">
18+
{window.location.host}
19+
</div>
20+
) : (
1621
<Link
1722
to="/"
1823
className="text-white hover:underline pr-3 font-bold text-sm md:text-base"
@@ -21,16 +26,60 @@ const Header = () => {
2126
</Link>
2227
)}
2328
</div>
24-
<div className="flex justify-between items-center">
25-
{/* <Link to='about' className='pr-3 font-bold'>About</Link> */}
29+
30+
{/* desktop/large device Menu */}
31+
32+
<div className="hidden md:flex justify-between items-center gap-2 mr-3">
33+
<Link
34+
to="/carrer"
35+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
36+
>
37+
Carrer
38+
</Link>
39+
<Link
40+
to="/ebook"
41+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
42+
>
43+
E-Book
44+
</Link>
2645
<Link
2746
to="contact"
28-
className="pr-3 font-bold text-white text-sm md:text-base"
47+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
2948
>
3049
Contact
3150
</Link>
32-
{/* <div className='pr-3 font-bold'><img src={cartLogo} alt='img'className='md:w-10 md:w-10 w-10 h-10'/></div> */}
3351
</div>
52+
<div
53+
onClick={() => setIsMenuVisible(!isMenuVisible)}
54+
className="md:hidden px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
55+
>
56+
Menu
57+
</div>
58+
{/* Mobile device Menu */}
59+
{isMenuVisible && (
60+
<div className="absolute right-0 top-14 bg-black z-40">
61+
<div className="md:hidden flex flex-col justify-between items-center gap-2 mr-3">
62+
<Link
63+
to="/carrer"
64+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
65+
>
66+
Carrer
67+
</Link>
68+
<Link
69+
to="/ebook"
70+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
71+
>
72+
E-Book
73+
</Link>
74+
<Link
75+
to="contact"
76+
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
77+
>
78+
Contact
79+
</Link>
80+
</div>
81+
</div>
82+
)}
3483
</div>
3584
);
3685
};

‎src/component/page/ErrorPage.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
3+
const ErrorPage = () => {
4+
return (
5+
<div className=" h-screen w-full flex justify-center items-center ">
6+
<h3 className="text-2xl md:text-5xl font-medium text-gray-400">Page Not Found</h3>
7+
</div>
8+
);
9+
};
10+
11+
export default ErrorPage;

‎src/component/page/carrer/Carrer.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
3+
const Carrer = () => {
4+
return (
5+
<div className="h-screen w-full flex justify-center items-center ">
6+
<h3 className="text-xl md:text-4xl font-medium text-gray-400">
7+
Currently we working on it
8+
</h3>
9+
</div>
10+
);
11+
};
12+
13+
export default Carrer;

‎src/component/page/contact/Contact.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from "react";
2+
3+
const Contact = () => {
4+
return (
5+
<div className="h-screen pt-2 pl-5">
6+
<p className="text-xl font-semibold underline">Email Id:</p>
7+
<a
8+
href={`mailto:contactlearnwebdevelopment@gmail.com?subject=ask%20query`}
9+
target="_blank"
10+
rel="noreferrer"
11+
className="hover:text-blue-500 hover:underline"
12+
>
13+
contactlearnwebdevelopment@gmail.com
14+
</a>
15+
<p className="text-xl font-semibold underline">Telegram</p>
16+
<a
17+
href={`https://telegram.me/codehangout`}
18+
target="_blank"
19+
rel="noreferrer"
20+
className="hover:text-blue-500 hover:underline"
21+
>
22+
Learn web development
23+
</a>
24+
</div>
25+
);
26+
};
27+
28+
export default Contact;

‎src/component/page/ebook/BookList.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from "react";
2+
import Book1 from "../../../assets/Books/Book1.png";
3+
import Book2 from "../../../assets/Books/Book2.png";
4+
import Book3 from "../../../assets/Books/Book3.png";
5+
import Book4 from "../../../assets/Books/Book4.jpg";
6+
import Book5 from '../../../assets/Books/Book5.png'
7+
const BookList = () => {
8+
const Books = [
9+
{
10+
id: 1,
11+
img: Book1,
12+
name: "Learning the HTML for Beginner",
13+
subName: "step by step Guide",
14+
mrp: 300,
15+
price: 149,
16+
currency: "₹",
17+
url: "https://rzp.io/l/LearnHTML",
18+
},
19+
{
20+
id: 2,
21+
img: Book2,
22+
name: "Javascript Note for beginner to advanced",
23+
subName: "step by step Guide",
24+
mrp: 398,
25+
price: 199,
26+
currency: "₹",
27+
url: "https://rzp.io/l/LearnJavaScript",
28+
},
29+
{
30+
id: 3,
31+
img: Book3,
32+
name: "Top 50 + Linux command for Programmer",
33+
subName: "step by step Guide",
34+
mrp: 300,
35+
price: 149,
36+
currency: "₹",
37+
url: "https://rzp.io/l/LearnLinux",
38+
},
39+
{
40+
id: 4,
41+
img: Book4,
42+
name: "Complete overview of frontend Developer",
43+
subName: "step by step Guide",
44+
mrp: 398,
45+
price: 199,
46+
currency: "₹",
47+
url: "https://rzp.io/l/tGzMyKep",
48+
},
49+
{
50+
id: 5,
51+
img: Book5,
52+
name: "The road to learn pure react.js for beginner",
53+
subName: "step by step Guide",
54+
mrp: 398,
55+
price: 199,
56+
currency: "₹",
57+
url: "https://rzp.io/l/LearnReactjs",
58+
},
59+
];
60+
61+
const openUrl = (url) => {
62+
window.open(url, "_blank", "noopener,noreferrer");
63+
};
64+
return (
65+
<div className="flex flex-wrap gap-x-5 gap-y-2 justify-center mx-auto">
66+
{Books.map((item) => (
67+
<div
68+
key={item.id}
69+
className="p-2 w-[200px] h-[350px] bg-white shadow-black shadow-lg rounded-lg flex flex-col items-center m-2 pt-1"
70+
>
71+
<div className="w-[150px] h-[203px] rounded-lg overflow-hidden border-[1px] border-black">
72+
<img src={item.img} alt={item.name} className="w-full h-full" />
73+
</div>
74+
<div className="text-center text-sm font-medium mt-2">
75+
{item.name}
76+
</div>
77+
<div className="text-center text-[10px] font-medium">
78+
{item.subName}
79+
</div>
80+
<div className="text-base text-center font-bold my-2">
81+
<span className="text-gray-500 line-through">{item.mrp}</span>
82+
<span>{` ${item.currency} ${item.price} `}</span>
83+
<span className="text-[12px] text-green-600">50% off</span>
84+
</div>
85+
<button
86+
onClick={() => openUrl(item.url)}
87+
target="_blank"
88+
className="hover:bg-orange-500 mx-6 text-sm font-medium text-center border-2 border-orange-600 bg-orange-600 rounded-full py-1 px-2.5 text-white"
89+
>
90+
Buy Now
91+
</button>
92+
</div>
93+
))}
94+
</div>
95+
);
96+
};
97+
98+
export default BookList;

‎src/component/page/ebook/EBookSection.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import Banner from "../../../assets/Banner.jpg";
3+
import BookList from "./BookList";
4+
import SocialMedia from "../../SocialMedia";
5+
import ReactGA from "react-ga";
6+
const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID; // OUR_TRACKING_ID
7+
ReactGA.initialize(TRACKING_ID);
8+
9+
const EBookSection = () => {
10+
// w-[200px] h-[200px] md:w-[310px] md:h-[310px]
11+
return (
12+
<div className=" min-h-screen">
13+
<div className="flex flex-row justify-around items-center bg-slate-300">
14+
<div className="w-full h-[300px] relative">
15+
<img src={Banner} alt="boosks" className="w-full h-full " />
16+
<div className="absolute text-white flex flex-col items-center justify-center w-full h-[300px] bg-black top-0 left-0 bg-opacity-60">
17+
<p className="font-semibold text-2xl lg:text-4xl">
18+
Get All The Books You Need!
19+
</p>
20+
<p className="font-semibold text-lg lg:text-xl bg-transparent">
21+
Enhance your skills
22+
</p>
23+
</div>
24+
</div>
25+
{/* <div className='ml-2 lg:ml-0'><div className='font-bold text-xl md:text-3xl'>Get all the Books </div><div className='font-bold text-xl md:text-3xl'>You Need!</div></div> */}
26+
</div>
27+
<div className="bg-red-500 w-full text-center text-white font-medium">
28+
Get 50% Off On Every Book Purchased
29+
</div>
30+
<div className="my-10">
31+
<BookList />
32+
</div>
33+
<div>
34+
<SocialMedia />
35+
</div>
36+
</div>
37+
);
38+
};
39+
40+
export default EBookSection;

‎src/component/page/freepdf/FreePdf.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
3+
const FreePdf = () => {
4+
return (
5+
<div className=" min-h-screen w-full">
6+
<h1>FreePdf</h1>
7+
</div>
8+
);
9+
};
10+
11+
export default FreePdf;

‎src/component/page/home/Home.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react";
2+
import SocialMedia from "../../SocialMedia";
3+
import { TypeAnimation } from "react-type-animation";
4+
import { Link } from "react-router-dom";
5+
6+
const Home = () => {
7+
const typingKey = [
8+
"Web Development",
9+
1000,
10+
"React.js",
11+
1000,
12+
"Javascript, Html, CSS",
13+
1000,
14+
];
15+
return (
16+
<div className=" min-h-screen w-full">
17+
<section className="text-center p-10">
18+
<div>
19+
<h2 className="text-3xl py-2 text-black font-medium md:text-5xl">
20+
Welcome to Tech <span className="text-blue-400">Plus</span> Coding
21+
</h2>
22+
<h4 className="text-xl py-2 text-black font-medium md:text-3xl">
23+
Learn{" "}
24+
<TypeAnimation
25+
sequence={typingKey}
26+
wrapper="span"
27+
cursor={true}
28+
repeat={Infinity}
29+
className="text-xl py-2 text-red-500 font-medium md:text-3xl"
30+
/>
31+
</h4>
32+
{/* <div className="text-sm py-2 text-black font-medium md:text-base px-2 md:px-10">
33+
Confused on which course to take? I have got you covered. Browse
34+
courses and find out the best course for you. Its free! Code With
35+
Harry is my attempt to teach basics and those coding techniques to
36+
people in short time which took me ages to learn.
37+
</div> */}
38+
<div className="py-2">
39+
<button className="bg-black text-white font-mediumx px-4 py-2 rounded-md text-sm hover:text-gray-300">
40+
Explore
41+
</button>
42+
<Link to='/freepdf' className="ml-3 bg-gray-200 text-black font-medium px-4 py-2.5 rounded-md text-sm hover:bg-gray-300">
43+
Free PDF
44+
</Link>
45+
</div>
46+
</div>
47+
</section>
48+
<section>
49+
<SocialMedia />
50+
</section>
51+
</div>
52+
);
53+
};
54+
55+
export default Home;

0 commit comments

Comments
 (0)