- Copyright ©2022-2023 learn web development
+
);
diff --git a/src/component/Header.js b/src/component/Header.js
index 038ec68..ee4aafb 100644
--- a/src/component/Header.js
+++ b/src/component/Header.js
@@ -6,80 +6,109 @@ import { useLocation } from "react-router-dom";
const Header = () => {
const location = useLocation();
const [isMenuVisible, setIsMenuVisible] = useState(false);
- // console.log("host", window.location);
+
return (
-
+ Copyright ©2022-2023 Techplus Coding
-
+
+ {/* Logo and Title */}
+
);
};
+
export default Header;
diff --git a/src/component/page/carrer/Carrer.js b/src/component/page/carrer/Carrer.js
index 6d10be4..32ebf13 100644
--- a/src/component/page/carrer/Carrer.js
+++ b/src/component/page/carrer/Carrer.js
@@ -9,5 +9,5 @@ const Carrer = () => {
);
};
-
+
export default Carrer;
diff --git a/src/component/page/contact/Contact.js b/src/component/page/contact/Contact.js
index 3f2ad41..b985a5a 100644
--- a/src/component/page/contact/Contact.js
+++ b/src/component/page/contact/Contact.js
@@ -1,37 +1,79 @@
-import React from "react";
-const Contact = () => {
- return (
-
- 
+
{location.pathname === "/" ? (
-
- {/* desktop/large device Menu */}
-
- Tech Plus Coding
-
+ Tech Plus Coding
) : ( Home )}
+ {/* Desktop Navigation */}
+
-
+
+ {/* Mobile Menu Button */}
+
- {/* Mobile device Menu */}
+
+
+ {/* Mobile Navigation */}
{isMenuVisible && (
-
-
+
+
)}
-
+
+
- Instagram
- - Learn web development - - -
- );
-};
-
-export default Contact;
+import React, { useState } from 'react';
+import emailjs from 'emailjs-com';
+
+
+function ContactForm() {
+ const [formData, setFormData] = useState({
+ firstname: '',
+ lastname: '',
+ email: '',
+ message: ''
+ });
+
+ const [statusMessage, setStatusMessage] = useState(''); // For success or error message
+ const [isSuccess, setIsSuccess] = useState(false); // To differentiate between success and error
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value
+ });
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ emailjs.send('service_9mw46cb', 'template_hqtk9x3', formData, 'n6X9j08c9ku0Jwyas')
+ .then((result) => {
+ console.log('Email sent successfully!', result.text);
+ setIsSuccess(true); // Set success flag
+ setStatusMessage('Your message has been sent successfully!');
+ setFormData({ firstname: '', lastname: '', email: '', message: '' }); // Reset form
+ })
+ .catch((error) => {
+ console.error('Failed to send email.', error.text);
+ setIsSuccess(false); // Set error flag
+ setStatusMessage('Failed to send your message. Please try again.');
+ });
+ };
+
+ return (
+ Email Id:
- - contactlearnwebdevelopment@gmail.com - -Telegram
- - Learn web development - -
+
+
+ {statusMessage && (
+
+ );
+}
+
+export default ContactForm;
diff --git a/src/component/page/ebook/BookList.js b/src/component/page/ebook/BookList.js
index 77fa812..5cd94f8 100644
--- a/src/component/page/ebook/BookList.js
+++ b/src/component/page/ebook/BookList.js
@@ -4,6 +4,7 @@ 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'
+import Book6 from '../../../assets/Books/Book6.png'
const BookList = () => {
const Books = [
{
@@ -56,6 +57,16 @@ const BookList = () => {
currency: "₹",
url: "https://rzp.io/l/LearnReactjs",
},
+ {
+ id: 6,
+ img: Book6,
+ name: "how to earn money from AI ",
+ subName: "step by step Guide",
+ mrp: 420,
+ price: 199,
+ currency: "₹",
+ url: "https://buymeacoffee.com/dreamconsole/liked-my-ebook-ai-se-paise-kaise-kamaye-support-my-journey",
+ },
];
const openUrl = (url) => {
diff --git a/src/component/page/home/Home.js b/src/component/page/home/Home.js
index bedddd2..4444d44 100644
--- a/src/component/page/home/Home.js
+++ b/src/component/page/home/Home.js
@@ -1,55 +1,194 @@
-import React from "react";
-// import SocialMedia from "../../SocialMedia";
-import { TypeAnimation } from "react-type-animation";
+import React, { useState } 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";
+import Book6 from "../../../assets/Books/Book6.png";
import { Link } from "react-router-dom";
-const Home = () => {
- const typingKey = [
- "Web Development",
- 1000,
- "React.js",
- 1000,
- "Javascript, Html, CSS",
- 1000,
- ];
+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",
+ },
+ {
+ id: 6,
+ img: Book6,
+ name: "how to earn money from AI ",
+ subName: "step by step Guide",
+ mrp: 420,
+ price: 199,
+ currency: "₹",
+ url: "https://buymeacoffee.com/dreamconsole/liked-my-ebook-ai-se-paise-kaise-kamaye-support-my-journey",
+ },
+];
+
+// Main Banner Component
+const MainBanner = () => (
+
+ {statusMessage}
+
+ )}
+
+ 
*/}
+
+);
+
+// Header Component
+const Header = () => {
+ const [searchQuery, setSearchQuery] = useState("");
+ // Filter books based on the search query
+ const filteredBooks = books.filter(
+ (book) =>
+ book.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ book.subName.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ const openUrl = (url) => {
+ window.open(url, "_blank", "noopener,noreferrer");
+ };
return (
-
+
+ {/* + Explore what everyone is reading today +
+Our top bestselling Book
+
+
+ Browse Now
+
+
+ View Free PDF
+
+
+
-
-
-
- Learn{" "}
-
- {/*
+
+
- {/*
-
+ {/* - 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.
-
*/}
-
-
- Explore
-
-
- Free PDF
-
-
+ <>
+
+ setSearchQuery(e.target.value)} // Update state on input
+ />
+
+
-
-
+
+
+
+
*/}
+
+
+
+
);
};
-export default Home;
+// App Component
+const App = () => (
+ Our Best Selling Books
+
+ {filteredBooks.length > 0 ? (
+ filteredBooks.map((book, index) => (
+
+
+ 
+
+ ))
+ ) : (
+ {book.name}
+{book.subName}
++ {book?.currency} + {book.price} + + {book?.currency} + {book?.mrp} + +
+ ++ No books found for "{searchQuery}" +
+ )} +
+
+);
+
+export default App;
diff --git a/src/component/utils.js b/src/component/utils.js
index 88c5a65..86dc1c4 100644
--- a/src/component/utils.js
+++ b/src/component/utils.js
@@ -50,6 +50,16 @@ export const Books = [
currency: "₹",
url: "https://rzp.io/l/LearnReactjs",
},
+ {
+ id: 6,
+ img: "https://parsefiles.back4app.com/MN97C5lCE7bi2l9kLmYUf2QaWCCuw2M5VqXprXMa/8160f0f73e7aef5f60b6dfdaf05e744c_AIPaage.png",
+ name: "how to earn money from AI ",
+ subName: "step by step Guide",
+ mrp: 399,
+ price: 199,
+ currency: "₹",
+ url: "https://buymeacoffee.com/dreamconsole/liked-my-ebook-ai-se-paise-kaise-kamaye-support-my-journey",
+ },
];
export const freePdf = [