Skip to content

refactor: Enhance eBook Website (v3) with Professional Design Updates #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gauravshegokar93 merged 1 commit into from
Dec 21, 2024
Merged

refactor: Enhance eBook Website (v3) with Professional Design Updates #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
391 changes: 385 additions & 6 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"emailjs-com": "^3.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-ga": "^3.3.1",
Expand Down
2 changes: 1 addition & 1 deletion src/component/About.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'

const About = () => {
return (
<div>Abou</div>
<div>About</div>
)
}

Expand Down
4 changes: 2 additions & 2 deletions src/component/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import React from "react";
const Footer = () => {
return (
<div>
<div className="z-10 w-full bg-gray-800 text-white font-semibold text-xs py-2 text-center">
Copyright ©2022-2023 learn web development
<div className="z-10 w-full bg-gray-800 text-white font-semibold text-xs py-2 text-center bottom-0">
Copyright ©2022-2023 Techplus Coding
</div>
</div>
);
Expand Down
83 changes: 56 additions & 27 deletions src/component/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="bg-blue-500 flex justify-between py-2 px-2">
<div className="flex justify-center items-center gap-4">
<header className="bg-blue-500 flex justify-between items-center py-2 px-4 border-b border-blue-700">
{/* Logo and Title */}
<div className="flex items-center gap-4">
<Link to="/">
<img src={headLogo} alt="img" className="md:w-10 md:h-10 w-10 h-10" />
<img src={headLogo} alt="Logo" className="w-10 h-10" />
</Link>
{location.pathname === "/" ? (
<div className="text-white pr-3 font-bold text-sm md:text-base">
Tech Plus Coding
</div>
<h1 className="text-white font-bold text-base md:text-lg">Tech Plus Coding</h1>
) : (
<Link
to="/"
className="text-white hover:underline pr-3 font-bold text-sm md:text-base"
className="text-white font-bold text-base md:text-lg hover:underline"
>
Home
</Link>
)}
</div>

{/* desktop/large device Menu */}
<div className="hidden md:flex justify-between items-center gap-2 mr-3">
{/* Desktop Navigation */}
<nav className="hidden md:flex gap-4 items-center">
{/* <input
type="text"
placeholder="Search eBooks..."
className="px-10 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
/> */}
<Link
to="/categories"
className="text-white font-medium text-sm md:text-base hover:underline"
>
{/* Categories
</Link>
<Link
to="/source"
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
className="text-white font-medium text-sm md:text-base hover:underline"
>
Source Code
</Link>
<Link
to="/ebook"
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
>
className="text-white font-medium text-sm md:text-base hover:underline" */}
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"
to="/contact"
className="text-white font-medium text-sm md:text-base hover:underline"
>
Contact
</Link>
</div>
<div
</nav>

{/* Mobile Menu Button */}
<button
onClick={() => setIsMenuVisible(!isMenuVisible)}
className="md:hidden px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
className="md:hidden text-white font-bold text-sm"
>
Menu
</div>
{/* Mobile device Menu */}
</button>

{/* Mobile Navigation */}
{isMenuVisible && (
<div className="absolute right-0 top-14 bg-blue-500 z-40">
<div className="md:hidden flex flex-col justify-between items-center gap-2 mr-3">
<div className="absolute right-4 top-16 bg-blue-500 shadow-lg rounded-md z-50">
<nav className="flex flex-col gap-2 p-4">
<input
type="text"
placeholder="Search eBooks..."
className="px-2 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400 mb-2"
/>
<Link
to="/categories"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Categories
</Link>
<Link
to="/source"
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Source Code
</Link>
<Link
to="/ebook"
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
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"
className="text-white font-medium text-sm hover:underline"
onClick={() => setIsMenuVisible(false)}
>
Contact
</Link>
</div>
</nav>
</div>
)}
</div>
</header>
);
};

export default Header;
2 changes: 1 addition & 1 deletion src/component/page/carrer/Carrer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ const Carrer = () => {
</div>
);
};

export default Carrer;
116 changes: 79 additions & 37 deletions src/component/page/contact/Contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,79 @@
import React from "react";
const Contact = () => {
return (
<div className="h-screen pt-2 md:pl-5 pl-2">
<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>
<p className="text-xl font-semibold underline">Instagram</p>
<a
href="https://www.instagram.com/learn_web_development1/?igshid=ZmZhODViOGI%3D"
target="_blank"
rel="noreferrer"
className="hover:text-blue-500 hover:underline"
>
Learn web development
</a>

</div>
);
};

export default Contact;
import React, { useState } from 'react';
import emailjs from 'emailjs-com';


function ContactForm() {
const [formData, setFormData] = useState({
name: '',
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({ name: '', 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 (
<div className="max-w-lg mx-auto p-6 bg-gray-100 rounded-lg shadow-lg space-y-6 sm:p-8 md:p-10 lg:p-12 xl:p-16">
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label htmlFor="name" className="block text-lg font-semibold text-gray-700">First Name</label>
<input type="text" id="name" name="name" value={formData.name} onChange={handleChange} className="mt-1 block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-500" required />
</div>
<div>
<label htmlFor="lastName" className="block text-lg font-semibold text-gray-700">Last Name</label>
<input type="text" id="lastName" name="lastName" value={formData.lastName} onChange={handleChange} className="mt-1 block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-500" required />
</div>
</div>

<div>
<label htmlFor="email" className="block text-lg font-semibold text-gray-700">Email ID</label>
<input type="email" id="email" name="email" value={formData.email} onChange={handleChange} className="mt-1 block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-500" required />
</div>

<div>
<label htmlFor="message" className="block text-lg font-semibold text-gray-700">Message</label>
<textarea id="message" name="message" value={formData.message} onChange={handleChange} rows="5" className="mt-1 block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-500" required></textarea>
</div>

<button type="submit" className="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-800 text-white font-semibold rounded-md transition duration-300 ease-in-out">
Send Message
</button>
</form>

{statusMessage && (
<div className={`mt-6 p-4 text-center rounded-md ${isSuccess ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
{statusMessage}
</div>
)}
</div>
);
}

export default ContactForm;
Loading