From ab40b600e0c59fa7dd511669843cd78cada17de4 Mon Sep 17 00:00:00 2001 From: prafullnavkar <87638003+prafullnavkar@users.noreply.github.com> Date: Sun, 19 Feb 2023 19:03:00 +0530 Subject: [PATCH] added carrer , home, error page --- src/App.js | 28 ++++--- src/component/Header.js | 65 ++++++++++++++-- src/component/page/ErrorPage.js | 11 +++ src/component/page/carrer/Carrer.js | 13 ++++ src/component/page/contact/Contact.js | 28 +++++++ src/component/page/ebook/BookList.js | 98 ++++++++++++++++++++++++ src/component/page/ebook/EBookSection.js | 40 ++++++++++ src/component/page/freepdf/FreePdf.js | 11 +++ src/component/page/home/Home.js | 55 +++++++++++++ 9 files changed, 331 insertions(+), 18 deletions(-) create mode 100644 src/component/page/ErrorPage.js create mode 100644 src/component/page/carrer/Carrer.js create mode 100644 src/component/page/contact/Contact.js create mode 100644 src/component/page/ebook/BookList.js create mode 100644 src/component/page/ebook/EBookSection.js create mode 100644 src/component/page/freepdf/FreePdf.js create mode 100644 src/component/page/home/Home.js diff --git a/src/App.js b/src/App.js index 42d66ce..e1a485f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,22 +1,30 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; -import Home from './component/Home'; -import About from './component/About' -import Contact from './component/Contact' -import Header from './component/Header'; -import Footer from './component/Footer'; -import ReactGA from 'react-ga'; - const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID // OUR_TRACKING_ID - ReactGA.initialize(TRACKING_ID); - ReactGA.pageview(window.location.pathname); +import Home from "./component/page/home/Home"; +import About from "./component/About"; +import Contact from "./component/page/contact/Contact"; +import Header from "./component/Header"; +import Footer from "./component/Footer"; +import ReactGA from "react-ga"; +import EBookSection from "./component/page/ebook/EBookSection"; +import Placment from "./component/page/carrer/Carrer"; +import FreePdf from "./component/page/freepdf/FreePdf"; +import ErrorPage from "./component/page/ErrorPage"; +const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID; // OUR_TRACKING_ID +ReactGA.initialize(TRACKING_ID); +ReactGA.pageview(window.location.pathname); function App() { return (
- } /> + } /> } /> } /> + } /> + } /> + } /> + } />
diff --git a/src/component/Header.js b/src/component/Header.js index 693a3d3..c747ea6 100644 --- a/src/component/Header.js +++ b/src/component/Header.js @@ -1,18 +1,23 @@ -import React from "react"; +import React, { useState } from "react"; import { Link } from "react-router-dom"; import headLogo from "../assets/head-logo.png"; import { useLocation } from "react-router-dom"; const Header = () => { const location = useLocation(); - + const [isMenuVisible, setIsMenuVisible] = useState(false); + console.log("host", window.location.host); return ( -
+
img - {location.pathname === "/contact" && ( + {location.pathname === "/" ? ( +
+ {window.location.host} +
+ ) : ( { )}
-
- {/* About */} + + {/* desktop/large device Menu */} + +
+ + Carrer + + + E-Book + Contact - {/*
img
*/}
+
setIsMenuVisible(!isMenuVisible)} + className="md:hidden px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2" + > + Menu +
+ {/* Mobile device Menu */} + {isMenuVisible && ( +
+
+ + Carrer + + + E-Book + + + Contact + +
+
+ )}
); }; diff --git a/src/component/page/ErrorPage.js b/src/component/page/ErrorPage.js new file mode 100644 index 0000000..0cb37d9 --- /dev/null +++ b/src/component/page/ErrorPage.js @@ -0,0 +1,11 @@ +import React from "react"; + +const ErrorPage = () => { + return ( +
+

Page Not Found

+
+ ); +}; + +export default ErrorPage; diff --git a/src/component/page/carrer/Carrer.js b/src/component/page/carrer/Carrer.js new file mode 100644 index 0000000..6d10be4 --- /dev/null +++ b/src/component/page/carrer/Carrer.js @@ -0,0 +1,13 @@ +import React from "react"; + +const Carrer = () => { + return ( +
+

+ Currently we working on it +

+
+ ); +}; + +export default Carrer; diff --git a/src/component/page/contact/Contact.js b/src/component/page/contact/Contact.js new file mode 100644 index 0000000..acdbf18 --- /dev/null +++ b/src/component/page/contact/Contact.js @@ -0,0 +1,28 @@ +import React from "react"; + +const Contact = () => { + return ( +
+

Email Id:

+ + contactlearnwebdevelopment@gmail.com + +

Telegram

+ + Learn web development + +
+ ); +}; + +export default Contact; diff --git a/src/component/page/ebook/BookList.js b/src/component/page/ebook/BookList.js new file mode 100644 index 0000000..2b1c068 --- /dev/null +++ b/src/component/page/ebook/BookList.js @@ -0,0 +1,98 @@ +import React from "react"; +import Book1 from "../../../assets/Books/Book1.png"; +import Book2 from "../../../assets/Books/Book2.png"; +import Book3 from "../../../assets/Books/Book3.png"; +import Book4 from "../../../assets/Books/Book4.jpg"; +import Book5 from '../../../assets/Books/Book5.png' +const BookList = () => { + const Books = [ + { + id: 1, + img: Book1, + name: "Learning the HTML for Beginner", + subName: "step by step Guide", + mrp: 300, + price: 149, + currency: "₹", + url: "https://rzp.io/l/LearnHTML", + }, + { + id: 2, + img: Book2, + name: "Javascript Note for beginner to advanced", + subName: "step by step Guide", + mrp: 398, + price: 199, + currency: "₹", + url: "https://rzp.io/l/LearnJavaScript", + }, + { + id: 3, + img: Book3, + name: "Top 50 + Linux command for Programmer", + subName: "step by step Guide", + mrp: 300, + price: 149, + currency: "₹", + url: "https://rzp.io/l/LearnLinux", + }, + { + id: 4, + img: Book4, + name: "Complete overview of frontend Developer", + subName: "step by step Guide", + mrp: 398, + price: 199, + currency: "₹", + url: "https://rzp.io/l/tGzMyKep", + }, + { + id: 5, + img: Book5, + name: "The road to learn pure react.js for beginner", + subName: "step by step Guide", + mrp: 398, + price: 199, + currency: "₹", + url: "https://rzp.io/l/LearnReactjs", + }, + ]; + + const openUrl = (url) => { + window.open(url, "_blank", "noopener,noreferrer"); + }; + return ( +
+ {Books.map((item) => ( +
+
+ {item.name} +
+
+ {item.name} +
+
+ {item.subName} +
+
+ {item.mrp} + {` ${item.currency} ${item.price} `} + 50% off +
+ +
+ ))} +
+ ); +}; + +export default BookList; diff --git a/src/component/page/ebook/EBookSection.js b/src/component/page/ebook/EBookSection.js new file mode 100644 index 0000000..6e2f179 --- /dev/null +++ b/src/component/page/ebook/EBookSection.js @@ -0,0 +1,40 @@ +import React from "react"; +import Banner from "../../../assets/Banner.jpg"; +import BookList from "./BookList"; +import SocialMedia from "../../SocialMedia"; +import ReactGA from "react-ga"; +const TRACKING_ID = process.env.REACT_APP_G_ANALYTICS_ID; // OUR_TRACKING_ID +ReactGA.initialize(TRACKING_ID); + +const EBookSection = () => { + // w-[200px] h-[200px] md:w-[310px] md:h-[310px] + return ( +
+
+
+ boosks +
+

+ Get All The Books You Need! +

+

+ Enhance your skills +

+
+
+ {/*
Get all the Books
You Need!
*/} +
+
+ Get 50% Off On Every Book Purchased +
+
+ +
+
+ +
+
+ ); +}; + +export default EBookSection; diff --git a/src/component/page/freepdf/FreePdf.js b/src/component/page/freepdf/FreePdf.js new file mode 100644 index 0000000..700add1 --- /dev/null +++ b/src/component/page/freepdf/FreePdf.js @@ -0,0 +1,11 @@ +import React from "react"; + +const FreePdf = () => { + return ( +
+

FreePdf

+
+ ); +}; + +export default FreePdf; diff --git a/src/component/page/home/Home.js b/src/component/page/home/Home.js new file mode 100644 index 0000000..e507a39 --- /dev/null +++ b/src/component/page/home/Home.js @@ -0,0 +1,55 @@ +import React from "react"; +import SocialMedia from "../../SocialMedia"; +import { TypeAnimation } from "react-type-animation"; +import { Link } from "react-router-dom"; + +const Home = () => { + const typingKey = [ + "Web Development", + 1000, + "React.js", + 1000, + "Javascript, Html, CSS", + 1000, + ]; + return ( +
+
+
+

+ Welcome to Tech Plus Coding +

+

+ Learn{" "} + +

+ {/*
+ Confused on which course to take? I have got you covered. Browse + courses and find out the best course for you. Its free! Code With + Harry is my attempt to teach basics and those coding techniques to + people in short time which took me ages to learn. +
*/} +
+ + + Free PDF + +
+
+
+
+ +
+
+ ); +}; + +export default Home;