Skip to content

Commit 97f749c

Browse files
gauravshegokar93gauravshegokar93
authored
Merge pull request #15 from rjcodedev/v3
refactor: Enhance eBook Website (v3) with Professional Design Updates
2 parents d4e4ad5 + 1d93549 commit 97f749c

File tree

8 files changed

+703
-122
lines changed

8 files changed

+703
-122
lines changed

‎package-lock.json‎

Lines changed: 385 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@headlessui/react": "^2.2.0",
7+
"@heroicons/react": "^2.2.0",
68
"@testing-library/jest-dom": "^5.16.5",
79
"@testing-library/react": "^13.4.0",
810
"@testing-library/user-event": "^13.5.0",
11+
"emailjs-com": "^3.2.0",
912
"react": "^18.2.0",
1013
"react-dom": "^18.2.0",
1114
"react-ga": "^3.3.1",

‎src/component/About.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22

33
const About = () => {
44
return (
5-
<div>Abou</div>
5+
<div>About</div>
66
)
77
}
88

‎src/component/Footer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React from "react";
33
const Footer = () => {
44
return (
55
<div>
6-
<div className="z-10 w-full bg-gray-800 text-white font-semibold text-xs py-2 text-center">
7-
Copyright ©2022-2023 learn web development
6+
<div className="z-10 w-full bg-gray-800 text-white font-semibold text-xs py-2 text-center bottom-0">
7+
Copyright ©2022-2023 Techplus Coding
88
</div>
99
</div>
1010
);

‎src/component/Header.js‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,80 +6,109 @@ import { useLocation } from "react-router-dom";
66
const Header = () => {
77
const location = useLocation();
88
const [isMenuVisible, setIsMenuVisible] = useState(false);
9-
// console.log("host", window.location);
9+
1010
return (
11-
<div className="bg-blue-500 flex justify-between py-2 px-2">
12-
<div className="flex justify-center items-center gap-4">
11+
<header className="bg-blue-500 flex justify-between items-center py-2 px-4 border-b border-blue-700">
12+
{/* Logo and Title */}
13+
<div className="flex items-center gap-4">
1314
<Link to="/">
14-
<img src={headLogo} alt="img" className="md:w-10 md:h-10 w-10 h-10" />
15+
<img src={headLogo} alt="Logo" className="w-10 h-10" />
1516
</Link>
1617
{location.pathname === "/" ? (
17-
<div className="text-white pr-3 font-bold text-sm md:text-base">
18-
Tech Plus Coding
19-
</div>
18+
<h1 className="text-white font-bold text-base md:text-lg">Tech Plus Coding</h1>
2019
) : (
2120
<Link
2221
to="/"
23-
className="text-white hover:underline pr-3 font-bold text-sm md:text-base"
22+
className="text-white font-bold text-base md:text-lg hover:underline"
2423
>
2524
Home
2625
</Link>
2726
)}
2827
</div>
2928

30-
{/* desktop/large device Menu */}
31-
<div className="hidden md:flex justify-between items-center gap-2 mr-3">
29+
{/* Desktop Navigation */}
30+
<nav className="hidden md:flex gap-4 items-center">
31+
{/* <input
32+
type="text"
33+
placeholder="Search eBooks..."
34+
className="px-10 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
35+
/> */}
36+
<Link
37+
to="/categories"
38+
className="text-white font-medium text-sm md:text-base hover:underline"
39+
>
40+
{/* Categories
41+
</Link>
3242
<Link
3343
to="/source"
34-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
44+
className="text-white font-medium text-sm md:text-base hover:underline"
3545
>
3646
Source Code
3747
</Link>
3848
<Link
3949
to="/ebook"
40-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
41-
>
50+
className="text-white font-medium text-sm md:text-base hover:underline" */}
51+
4252
E-Book
4353
</Link>
4454
<Link
45-
to="contact"
46-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
55+
to="/contact"
56+
className="text-white font-medium text-sm md:text-base hover:underline"
4757
>
4858
Contact
4959
</Link>
50-
</div>
51-
<div
60+
</nav>
61+
62+
{/* Mobile Menu Button */}
63+
<button
5264
onClick={() => setIsMenuVisible(!isMenuVisible)}
53-
className="md:hidden px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
65+
className="md:hidden text-white font-bold text-sm"
5466
>
5567
Menu
56-
</div>
57-
{/* Mobile device Menu */}
68+
</button>
69+
70+
{/* Mobile Navigation */}
5871
{isMenuVisible && (
59-
<div className="absolute right-0 top-14 bg-blue-500 z-40">
60-
<div className="md:hidden flex flex-col justify-between items-center gap-2 mr-3">
72+
<div className="absolute right-4 top-16 bg-blue-500 shadow-lg rounded-md z-50">
73+
<nav className="flex flex-col gap-2 p-4">
74+
<input
75+
type="text"
76+
placeholder="Search eBooks..."
77+
className="px-2 py-1 text-sm rounded border border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-400 mb-2"
78+
/>
79+
<Link
80+
to="/categories"
81+
className="text-white font-medium text-sm hover:underline"
82+
onClick={() => setIsMenuVisible(false)}
83+
>
84+
Categories
85+
</Link>
6186
<Link
6287
to="/source"
63-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
88+
className="text-white font-medium text-sm hover:underline"
89+
onClick={() => setIsMenuVisible(false)}
6490
>
6591
Source Code
6692
</Link>
6793
<Link
6894
to="/ebook"
69-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
95+
className="text-white font-medium text-sm hover:underline"
96+
onClick={() => setIsMenuVisible(false)}
7097
>
7198
E-Book
7299
</Link>
73100
<Link
74101
to="/contact"
75-
className="px-2 py-2 font-bold text-white text-sm md:text-base hover:underline underline-offset-2"
102+
className="text-white font-medium text-sm hover:underline"
103+
onClick={() => setIsMenuVisible(false)}
76104
>
77105
Contact
78106
</Link>
79-
</div>
107+
</nav>
80108
</div>
81109
)}
82-
</div>
110+
</header>
83111
);
84112
};
113+
85114
export default Header;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ const Carrer = () => {
99
</div>
1010
);
1111
};
12-
12+
1313
export default Carrer;

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

Lines changed: 79 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,79 @@
1-
import React from "react";
2-
const Contact = () => {
3-
return (
4-
<div className="h-screen pt-2 md:pl-5 pl-2">
5-
<p className="text-xl font-semibold underline">Email Id:</p>
6-
<a
7-
href={`mailto:contactlearnwebdevelopment@gmail.com?subject=ask%20query`}
8-
target="_blank"
9-
rel="noreferrer"
10-
className="hover:text-blue-500 hover:underline"
11-
>
12-
contactlearnwebdevelopment@gmail.com
13-
</a>
14-
<p className="text-xl font-semibold underline">Telegram</p>
15-
<a
16-
href={`https://telegram.me/codehangout`}
17-
target="_blank"
18-
rel="noreferrer"
19-
className="hover:text-blue-500 hover:underline"
20-
>
21-
Learn web development
22-
</a>
23-
<p className="text-xl font-semibold underline">Instagram</p>
24-
<a
25-
href="https://www.instagram.com/learn_web_development1/?igshid=ZmZhODViOGI%3D"
26-
target="_blank"
27-
rel="noreferrer"
28-
className="hover:text-blue-500 hover:underline"
29-
>
30-
Learn web development
31-
</a>
32-
33-
</div>
34-
);
35-
};
36-
37-
export default Contact;
1+
import React, { useState } from 'react';
2+
import emailjs from 'emailjs-com';
3+
4+
5+
function ContactForm() {
6+
const [formData, setFormData] = useState({
7+
name: '',
8+
lastName: '',
9+
email: '',
10+
message: ''
11+
});
12+
13+
const [statusMessage, setStatusMessage] = useState(''); // For success or error message
14+
const [isSuccess, setIsSuccess] = useState(false); // To differentiate between success and error
15+
16+
const handleChange = (e) => {
17+
const { name, value } = e.target;
18+
setFormData({
19+
...formData,
20+
[name]: value
21+
});
22+
};
23+
24+
const handleSubmit = (e) => {
25+
e.preventDefault();
26+
27+
emailjs.send('service_9mw46cb', 'template_hqtk9x3', formData, 'n6X9j08c9ku0Jwyas')
28+
.then((result) => {
29+
console.log('Email sent successfully!', result.text);
30+
setIsSuccess(true); // Set success flag
31+
setStatusMessage('Your message has been sent successfully!');
32+
setFormData({ name: '', lastName: '', email: '', message: '' }); // Reset form
33+
})
34+
.catch((error) => {
35+
console.error('Failed to send email.', error.text);
36+
setIsSuccess(false); // Set error flag
37+
setStatusMessage('Failed to send your message. Please try again.');
38+
});
39+
};
40+
41+
return (
42+
<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">
43+
<form onSubmit={handleSubmit} className="space-y-6">
44+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
45+
<div>
46+
<label htmlFor="name" className="block text-lg font-semibold text-gray-700">First Name</label>
47+
<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 />
48+
</div>
49+
<div>
50+
<label htmlFor="lastName" className="block text-lg font-semibold text-gray-700">Last Name</label>
51+
<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 />
52+
</div>
53+
</div>
54+
55+
<div>
56+
<label htmlFor="email" className="block text-lg font-semibold text-gray-700">Email ID</label>
57+
<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 />
58+
</div>
59+
60+
<div>
61+
<label htmlFor="message" className="block text-lg font-semibold text-gray-700">Message</label>
62+
<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>
63+
</div>
64+
65+
<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">
66+
Send Message
67+
</button>
68+
</form>
69+
70+
{statusMessage && (
71+
<div className={`mt-6 p-4 text-center rounded-md ${isSuccess ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
72+
{statusMessage}
73+
</div>
74+
)}
75+
</div>
76+
);
77+
}
78+
79+
export default ContactForm;

0 commit comments

Comments
 (0)