rjcodedev · rjcodedev · Feb 19, 2023 · Feb 19, 2023
diff --git 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 (
     <BrowserRouter>
       <div className="relative">
         <Header />
         <Routes>
-          <Route path='/' element={<Home />} />
+          <Route path="/" element={<Home />} />
           <Route path="about" element={<About />} />
           <Route path="contact" element={<Contact />} />
+          <Route path="ebook" element={<EBookSection />} />
+          <Route path="carrer" element={<Placment />} />
+          <Route path="freepdf" element={<FreePdf />} />
+          <Route path="*" element={<ErrorPage />} />
         </Routes>
         <Footer />
       </div>

diff --git 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 (
-    <div className="bg-black flex justify-between py-2 px-2">
+    <div className="bg-blue-500 flex justify-between py-2 px-2">
       <div className="flex justify-center items-center gap-4">
         <Link to="/">
           <img src={headLogo} alt="img" className="md:w-10 md:h-10 w-10 h-10" />
         </Link>
-        {location.pathname === "/contact" && (
+        {location.pathname === "/" ? (
+          <div className="text-white pr-3 font-bold text-sm md:text-base">
+            {window.location.host}
+          </div>
+        ) : (
           <Link
             to="/"
             className="text-white hover:underline pr-3 font-bold text-sm md:text-base"
@@ -21,16 +26,60 @@ const Header = () => {
           </Link>
         )}
       </div>
-      <div className="flex justify-between items-center">
-        {/* <Link to='about' className='pr-3 font-bold'>About</Link> */}
+
+      {/* desktop/large device Menu */}
+
+      <div className="hidden md:flex justify-between items-center gap-2 mr-3">
+        <Link
+          to="/carrer"
+          className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+        >
+          Carrer
+        </Link>
+        <Link
+          to="/ebook"
+          className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+        >
+          E-Book
+        </Link>
         <Link
           to="contact"
-          className="pr-3 font-bold text-white text-sm md:text-base"
+          className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
         >
           Contact
         </Link>
-        {/* <div className='pr-3 font-bold'><img src={cartLogo} alt='img'className='md:w-10 md:w-10 w-10 h-10'/></div> */}
       </div>
+      <div
+        onClick={() => setIsMenuVisible(!isMenuVisible)}
+        className="md:hidden px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+      >
+        Menu
+      </div>
+      {/* Mobile device Menu */}
+      {isMenuVisible && (
+        <div className="absolute right-0 top-14 bg-black z-40">
+          <div className="md:hidden flex flex-col justify-between items-center gap-2 mr-3">
+            <Link
+              to="/carrer"
+              className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+            >
+              Carrer
+            </Link>
+            <Link
+              to="/ebook"
+              className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+            >
+              E-Book
+            </Link>
+            <Link
+              to="contact"
+              className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
+            >
+              Contact
+            </Link>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/component/page/ErrorPage.js b/src/component/page/ErrorPage.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const ErrorPage = () => {
+  return (
+    <div className=" h-screen w-full flex justify-center items-center ">
+      <h3 className="text-2xl md:text-5xl font-medium text-gray-400">Page Not Found</h3>
+    </div>
+  );
+};
+
+export default ErrorPage;
diff --git a/src/component/page/carrer/Carrer.js b/src/component/page/carrer/Carrer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const Carrer = () => {
+  return (
+    <div className="h-screen w-full flex justify-center items-center ">
+      <h3 className="text-xl md:text-4xl font-medium text-gray-400">
+        Currently we working on it
+      </h3>
+    </div>
+  );
+};
+
+export default Carrer;
diff --git a/src/component/page/contact/Contact.js b/src/component/page/contact/Contact.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+const Contact = () => {
+  return (
+    <div className="h-screen pt-2 pl-5">
+      <p className="text-xl font-semibold underline">Email Id:</p>
+      <a
+        href={`mailto:contactlearnwebdevelopment@gmail.com?subject=ask%20query`}
+        target="_blank"
+        rel="noreferrer"
+        className="hover:text-blue-500 hover:underline"
+      >
+        contactlearnwebdevelopment@gmail.com
+      </a>
+      <p className="text-xl font-semibold underline">Telegram</p>
+      <a
+        href={`https://telegram.me/codehangout`}
+        target="_blank"
+        rel="noreferrer"
+        className="hover:text-blue-500 hover:underline"
+      >
+        Learn web development
+      </a>
+    </div>
+  );
+};
+
+export default Contact;
diff --git a/src/component/page/ebook/BookList.js 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 (
+    <div className="flex flex-wrap gap-x-5 gap-y-2 justify-center mx-auto">
+      {Books.map((item) => (
+        <div
+          key={item.id}
+          className="p-2 w-[200px] h-[350px] bg-white shadow-black shadow-lg rounded-lg flex flex-col items-center m-2 pt-1"
+        >
+          <div className="w-[150px] h-[203px] rounded-lg overflow-hidden border-[1px] border-black">
+            <img src={item.img} alt={item.name} className="w-full h-full" />
+          </div>
+          <div className="text-center text-sm font-medium mt-2">
+            {item.name}
+          </div>
+          <div className="text-center text-[10px] font-medium">
+            {item.subName}
+          </div>
+          <div className="text-base text-center font-bold my-2">
+            <span className="text-gray-500 line-through">{item.mrp}</span>
+            <span>{` ${item.currency} ${item.price} `}</span>
+            <span className="text-[12px] text-green-600">50% off</span>
+          </div>
+          <button
+            onClick={() => openUrl(item.url)}
+            target="_blank"
+            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"
+          >
+            Buy Now
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BookList;
diff --git a/src/component/page/ebook/EBookSection.js 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 (
+    <div className=" min-h-screen">
+      <div className="flex flex-row justify-around items-center bg-slate-300">
+        <div className="w-full h-[300px] relative">
+          <img src={Banner} alt="boosks" className="w-full h-full " />
+          <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">
+            <p className="font-semibold text-2xl lg:text-4xl">
+              Get All The Books You Need!
+            </p>
+            <p className="font-semibold text-lg lg:text-xl bg-transparent">
+              Enhance your skills
+            </p>
+          </div>
+        </div>
+        {/* <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> */}
+      </div>
+      <div className="bg-red-500 w-full text-center text-white font-medium">
+        Get 50% Off On Every Book Purchased
+      </div>
+      <div className="my-10">
+        <BookList />
+      </div>
+      <div>
+        <SocialMedia />
+      </div>
+    </div>
+  );
+};
+
+export default EBookSection;
diff --git a/src/component/page/freepdf/FreePdf.js b/src/component/page/freepdf/FreePdf.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const FreePdf = () => {
+  return (
+    <div className=" min-h-screen w-full">
+      <h1>FreePdf</h1>
+    </div>
+  );
+};
+
+export default FreePdf;
diff --git a/src/component/page/home/Home.js 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 (
+    <div className=" min-h-screen w-full">
+      <section className="text-center p-10">
+        <div>
+          <h2 className="text-3xl py-2 text-black font-medium md:text-5xl">
+            Welcome to Tech <span className="text-blue-400">Plus</span> Coding
+          </h2>
+          <h4 className="text-xl py-2 text-black font-medium md:text-3xl">
+            Learn{" "}
+            <TypeAnimation
+              sequence={typingKey}
+              wrapper="span"
+              cursor={true}
+              repeat={Infinity}
+              className="text-xl py-2 text-red-500 font-medium md:text-3xl"
+            />
+          </h4>
+          {/* <div className="text-sm py-2 text-black font-medium md:text-base px-2 md:px-10">
+            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.
+          </div> */}
+          <div className="py-2">
+            <button className="bg-black text-white font-mediumx px-4 py-2 rounded-md text-sm hover:text-gray-300">
+              Explore
+            </button>
+            <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">
+              Free PDF
+            </Link>
+          </div>
+        </div>
+      </section>
+      <section>
+        <SocialMedia />
+      </section>
+    </div>
+  );
+};
+
+export default Home;