Skip to content

Commit b5170c6

Browse files
gauravsingh1281gauravsingh1281
authored
Redesigned Contact US Section (#708)
2 parents 2fb3c98 + 1ce867e commit b5170c6

File tree

4 files changed

+149
-143
lines changed

4 files changed

+149
-143
lines changed

‎src/components/Contact-section/Contact-section.css‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
1-
1+
/* Contact-section.css */
22
#ContactUs {
3-
margin-bottom: 0; /* Further reduced margin-bottom to minimize the space */
4-
}
5-
6-
main {
7-
margin-top: 0; /* Remove any top margin between the Contact Us header and Contact Text Information */
8-
padding-top: 0; /* Remove extra padding if present */
3+
margin-bottom: 0;
4+
}
5+
6+
main {
7+
margin-top: 0;
98
margin-bottom: 5rem;
10-
9+
background-color: #ffffff; /* Clean white background */
10+
border-radius: 12px; /* Modern rounded corners */
11+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
12+
padding: 2rem; /* Increased padding for a more spacious feel */
13+
transition: box-shadow 0.3s ease;
14+
}
15+
16+
main:hover {
17+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
18+
}
1119

12-
13-
background: linear-gradient(to right,#4bc2f5, #8c8cb2, #ee9898,#ef0381); /* Gradient from blue to red */
14-
border: 2px solid #000000; /* Border color */
15-
border-radius: 8px; /* Rounded corners */
16-
padding: 10px; /* Spacing inside the section */
17-
padding: 10px 5px; /* Top and bottom padding: 10px, left and right padding: 5px */
18-
}
19-
20-
#text{
20+
/* Optional text adjustments if #text is used within your components */
21+
#text {
2122
display: flex;
23+
justify-content: center;
2224
text-align: center;
23-
margin-left: 98px;
24-
font-style: bold;
25-
}
26-
25+
font-weight: 600;
26+
margin: 0 auto;
27+
color: #333333; /* Darker text for improved readability */
28+
}
29+

‎src/components/Contact-section/Contact.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Contact = () => {
2222
Contact Us
2323
</h1>
2424
</header>
25-
<main className=" mt-0 flex flex-wrap lg:gap-[5%] gap-[20px] justify-center items-center">
25+
<main className="mt-0 flex flex-wrap justify-center items-start lg:space-x-[150px] space-y-10 lg:space-y-0">
2626
<ContactText />
2727
<ContactForm />
2828
</main>

‎src/components/Contact-section/ContactForm.jsx‎

Lines changed: 69 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useForm } from "react-hook-form";
2-
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav"; // Importing the sound file
2+
import clickSound from "../../assets/mixkit-mouse-click-close-1113.wav";
33

44
const ContactForm = () => {
55
const {
@@ -11,89 +11,85 @@ const ContactForm = () => {
1111

1212
const playSound = () => {
1313
const audio = new Audio(clickSound);
14-
audio.play(); // Play the sound
14+
audio.play();
1515
};
1616

1717
const onSubmit = (data) => {
18-
playSound(); // Play sound on submit
18+
playSound();
1919
alert("Message sent successfully");
2020
console.log(data);
21-
reset(); // reset form fields after submission
21+
reset();
2222
};
2323

2424
return (
25-
<>
26-
<section className="flex flex-col my-20 md:flex-row gap-y-10">
27-
<article className="flex justify-center flex-1 p-5 md:p-0 md:mr-24">
28-
<form onSubmit={handleSubmit(onSubmit)} className="w-full gap-x-5">
29-
<div className="flex flex-col justify-between mb-6 md:flex-row">
30-
<div className="flex flex-col md:w-6/12">
31-
<input
32-
{...register("firstName", {
33-
required: "First name is required",
34-
})}
35-
className="h-16 p-2 mb-6 border-2 rounded-lg border-green text-green-dark md:mb-0 placeholder-textBlack"
36-
placeholder="First name"
37-
style={{ marginRight: "5px" }}
38-
/>
39-
<span className="pl-4 text-[#ff0000] text-sm">
40-
{errors.firstName && errors.firstName.message}
41-
</span>
42-
</div>
43-
<div className="flex flex-col md:w-6/12">
44-
<input
45-
{...register("lastName", {
46-
required: "Last name is required",
47-
})}
48-
className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
49-
placeholder="Last name"
50-
/>
51-
<span className="pl-4 text-[#ff0000] text-sm">
52-
{errors.lastName && errors.lastName.message}
53-
</span>
54-
</div>
55-
</div>
56-
<div className="flex flex-col justify-between mb-6 md:flex-row">
57-
<div className="flex flex-col w-full">
58-
<input
59-
{...register("email", {
60-
required: "Email is required",
61-
pattern: {
62-
value: /\S+@\S+\.\S+/,
63-
message: "Email is not valid",
64-
},
65-
})}
66-
className="h-16 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
67-
placeholder="Email"
68-
/>
69-
<span className="pl-4 text-[#ff0000] text-sm">
70-
{errors.email && errors.email.message}
71-
</span>
72-
</div>
25+
<section className="bg-light-blue shadow-lg rounded-lg p-8">
26+
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
27+
<div className="flex flex-col md:flex-row gap-6">
28+
<div className="flex-1">
29+
<input
30+
{...register("firstName", { required: "First name is required" })}
31+
className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
32+
placeholder="First Name"
33+
/>
34+
<div className="min-h-[1.5rem]">
35+
{errors.firstName && (
36+
<span className="text-customRed text-sm">{errors.firstName.message}</span>
37+
)}
7338
</div>
74-
75-
<textarea
76-
{...register("message", {
77-
required: "Message is required",
78-
})}
79-
className="w-full h-40 p-2 border-2 rounded-lg border-green text-green-dark placeholder-textBlack"
80-
placeholder="Your message here"
39+
</div>
40+
<div className="flex-1">
41+
<input
42+
{...register("lastName", { required: "Last name is required" })}
43+
className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
44+
placeholder="Last Name"
8145
/>
82-
<span className="pl-4 text-[#ff0000] text-sm">
83-
{errors.message && errors.message.message}
84-
</span>
85-
<div className="flex justify-center md:justify-start">
86-
<button
87-
className="relative flex cursor-pointer items-center justify-center mt-5 bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"
88-
type="submit"
89-
>
90-
Submit
91-
</button>
46+
<div className="min-h-[1.5rem]">
47+
{errors.lastName && (
48+
<span className="text-customRed text-sm">{errors.lastName.message}</span>
49+
)}
9250
</div>
93-
</form>
94-
</article>
95-
</section>
96-
</>
51+
</div>
52+
</div>
53+
<div>
54+
<input
55+
{...register("email", {
56+
required: "Email is required",
57+
pattern: {
58+
value: /\S+@\S+\.\S+/,
59+
message: "Email is not valid",
60+
},
61+
})}
62+
className="w-full h-12 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
63+
placeholder="Email"
64+
/>
65+
<div className="min-h-[1.5rem]">
66+
{errors.email && (
67+
<span className="text-customRed text-sm">{errors.email.message}</span>
68+
)}
69+
</div>
70+
</div>
71+
<div>
72+
<textarea
73+
{...register("message", { required: "Message is required" })}
74+
className="w-full h-32 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primaryGreen transition duration-200 ease-in-out"
75+
placeholder="Your Message"
76+
/>
77+
<div className="min-h-[1.5rem]">
78+
{errors.message && (
79+
<span className="text-customRed text-sm">{errors.message.message}</span>
80+
)}
81+
</div>
82+
</div>
83+
<div className="flex justify-center">
84+
<button
85+
type="submit"
86+
className="w-40 py-3 bg-primaryGreen text-textWhite rounded-full transition-all duration-300 hover:bg-customRed focus:outline-none focus:ring-2 focus:ring-black"
87+
>
88+
Submit
89+
</button>
90+
</div>
91+
</form>
92+
</section>
9793
);
9894
};
9995

‎src/components/Contact-section/ContactText.jsx‎

Lines changed: 55 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,78 @@
1-
import React from "react";
2-
import { useEffect } from "react";
3-
import AOS from 'aos';
4-
import 'aos/dist/aos.css';
1+
import React, { useEffect } from "react";
2+
import AOS from "aos";
3+
import "aos/dist/aos.css";
4+
import { FaEnvelope, FaPhone, FaComments, FaMapMarkerAlt } from "react-icons/fa";
5+
56
export const ContactText = () => {
67
useEffect(() => {
7-
8-
AOS.init({duration:1000});
9-
8+
AOS.init({ duration: 1000 });
109
}, []);
11-
return (
12-
<section className="mt-0 bg-gray-100 rounded-lg shadow-lg flex flex-col gap-6 justify-center p-1 lg:w-[35%] w-full">
13-
<div className="text-gray-800" data-aos = "fade-right">
14-
<h2 className="text-xl font-bold mb-4">Hey Rentalog Users,</h2>
15-
<p className="leading-relaxed">
16-
We are always looking forward to hearing from you. Please feel free to
17-
reach out to us for any queries, suggestions, or feedback. <br />
18-
We would love to hear from you.
19-
</p>
2010

21-
<div className="mt-4">
22-
<p className="font-semibold">Contact us:</p>
23-
<p>
11+
return (
12+
<section
13+
className="mt-0 bg-gray-50 rounded-lg shadow-lg p-6 lg:w-[35%] w-full"
14+
data-aos="fade-right"
15+
>
16+
<h2 className="text-2xl font-bold text-gray-900 mb-4">
17+
Hey Rentalog Users,
18+
</h2>
19+
<p className="text-base text-gray-800 leading-relaxed mb-6">
20+
We are always excited to hear from you! Whether it's a query, suggestion,
21+
or feedback, your thoughts matter to us. Reach out and let's create something
22+
amazing together.
23+
</p>
24+
<div className="space-y-4 mb-6">
25+
<div className="flex items-center gap-2">
26+
<FaEnvelope className="text-primaryGreen" />
27+
<span className="text-gray-900 font-medium">
2428
Email:{" "}
2529
<a
2630
href="mailto:support@rentalog.in"
27-
className="ml-1 font text-gray-800 underline"
31+
className="underline text-blue-600"
2832
>
29-
{" "}
30-
support@rentalog.in{" "}
33+
support@rentalog.in
3134
</a>
32-
</p>
33-
<p>
35+
</span>
36+
</div>
37+
<div className="flex items-center gap-2">
38+
<FaPhone className="text-customRed" />
39+
<span className="text-gray-900 font-medium">
3440
Phone:{" "}
3541
<a
3642
href="tel:+916201577047"
37-
className="ml-1 font text-gray-800 underline"
43+
className="underline text-blue-600"
3844
>
39-
{" "}
40-
+91 62015 77047{" "}
45+
+91 62015 77047
4146
</a>
42-
</p>
43-
44-
<p>
47+
</span>
48+
</div>
49+
<div className="flex items-center gap-2">
50+
<FaComments className="text-black" />
51+
<span className="text-gray-900 font-medium">
4552
Chat With Us:{" "}
4653
<a
47-
href="https://wa.me/+91 6201577047?"
48-
className="ml-1 font text-gray-800 underline"
54+
href="https://wa.me/+916201577047"
55+
className="underline text-blue-600"
4956
>
50-
{" "}
51-
Click for chat{" "}
57+
Click for chat
5258
</a>
53-
</p>
54-
55-
56-
<p>Address: Shaktinagar, Sonebhadra, UP, 231222</p>
59+
</span>
60+
</div>
61+
<div className="flex items-center gap-2">
62+
<FaMapMarkerAlt className="text-customRed" />
63+
<span className="text-gray-900 font-medium">
64+
Address: Shaktinagar, Sonebhadra, UP, 231222
65+
</span>
5766
</div>
58-
59-
<p className="mt-4 leading-relaxed">
60-
We welcome your input to improve your Rentalog experience. <br />
61-
Thank you for choosing Rentalog!
62-
</p>
63-
<p className="mt-2">
64-
Best regards,
65-
<br />
66-
The Rentalog Team
67-
</p>
6867
</div>
68+
<p className="text-base text-gray-800 leading-relaxed">
69+
We welcome your input to improve your Rentalog experience. Thank you for choosing Rentalog!
70+
</p>
71+
<p className="mt-4 text-base text-gray-900 font-medium">
72+
Best regards,
73+
<br />
74+
The Rentalog Team
75+
</p>
6976
</section>
7077
);
7178
};

0 commit comments

Comments
 (0)