Skip to content

Commit

Permalink
Updated contact-us
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prabhatyadav60
Prabhatyadav60 committed Jul 12, 2024
1 parent bcbf546 commit 284e197
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 83 deletions.
Binary file added frontend/src/assets/Contact-us.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/assets/Contact-us1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/assets/Contact-us2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
186 changes: 103 additions & 83 deletions frontend/src/pages/ContactUs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import axios from "axios";
import { useState } from "react";
import { useState, useEffect } from "react";
import toast from "react-hot-toast";
import bgHero from "../assets/bgHero.png";
import formImage1 from "../assets/Contact-us.png";
import formImage2 from "../assets/Contact-us1.png";
import formImage3 from "../assets/Contact-us2.png";

function ContactUs() {
const [name, setName] = useState("");
Expand All @@ -15,12 +18,28 @@ function ContactUs() {
message: "",
});

document.title='Style Share | Reach us 📱'
const images = [formImage1, formImage2, formImage3];
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const [fadeTransition, setFadeTransition] = useState(true);

document.title = 'Style Share | Reach us 📱';

useEffect(() => {
const intervalId = setInterval(() => {
setFadeTransition(false);
setTimeout(() => {
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
setFadeTransition(true);
}, 500);
}, 5000);

return () => clearInterval(intervalId);
}, []);

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(name, email, subject, message);
// Basic validation

if (!name || !email || !subject || !message) {
setError({
...error,
Expand Down Expand Up @@ -67,89 +86,90 @@ function ContactUs() {
toast.error("An unexpected error occurred!");
}
};
return (

<div className="text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<section className="flex justify-center p-12 md:bg-grey-500">
<div className="w-full text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 border-blue-700 dark:border-sky-500"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<div className="max-w-md mx-auto mt-8 p-6 rounded-lg shadow-md">
<h2 className="text-3xl font-bold mb-4 text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Contact Us
</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Name
</label>
<input
type="text"
id="name"
className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
placeholder="Your Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Email
</label>
<input
type="email"
id="email"
className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="subject" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Subject
</label>
<input
type="text"
id="subject"
className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
placeholder="Subject"
value={subject}
onChange={(e) => setSubject(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="message" className="block text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Message
</label>
<textarea
id="message"
className="form-input text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500"
placeholder="Your Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
rows={5}
required
></textarea>
<p className="text-sm font-semibold mb-2 text-red-600">
{error.message}
</p>
</div>
<div className="flex justify-center">
<button
type="submit"
className="bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600"
>
Send Message
</button>
</div>
</form>
</div>
return (
<div className="flex flex-col justify-center items-center min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
<h2 className="text-4xl font-bold mb-8 text-center text-[#000435] bg-white dark:text-white dark:bg-[#000435]">
Contact Us
</h2>
<section className="w-full max-w-4xl flex flex-col md:flex-row text-[#000435] bg-white dark:text-white dark:bg-[#000435] rounded-lg shadow border md:mt-0 border-blue-700 dark:border-sky-500">
<div className="w-full md:w-1/2 p-8 flex flex-col justify-center">
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label htmlFor="name" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
Name
</label>
<input
type="text"
id="name"
className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
placeholder="Your Name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="email" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
Email
</label>
<input
type="email"
id="email"
className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
placeholder="[email protected]"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="subject" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
Subject
</label>
<input
type="text"
id="subject"
className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
placeholder="Subject"
value={subject}
onChange={(e) => setSubject(e.target.value)}
required
/>
</div>
<div className="mb-4">
<label htmlFor="message" className="block text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mb-2">
Message
</label>
<textarea
id="message"
className="form-input text-lg text-[#000435] bg-white dark:text-white dark:bg-[#000435] mt-1 p-2 block w-full rounded-lg border border-blue-500 focus:border-blue-600 focus:ring focus:ring-blue-200"
placeholder="Your Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
rows={5}
required
></textarea>
<p className="text-sm font-semibold mt-2 text-red-600">
{error.message}
</p>
</div>
<div className="flex justify-center">
<button
type="submit"
className="bg-blue-500 text-white py-2 px-6 rounded-md hover:bg-blue-600 transition duration-300"
>
Send Message
</button>
</div>
</form>
</div>
<div className={`w-full md:w-1/2 flex justify-center items-center p-8 transition-opacity duration-1000 ease-in-out ${fadeTransition ? 'opacity-100' : 'opacity-0'}`}>
<img src={images[currentImageIndex]} alt="Contact Us" className="max-w-full h-auto rounded-lg" style={{ width: '90rem', height: 'auto' }} />
</div>
</section>
</div>
)
);
}

export default ContactUs
export default ContactUs;

0 comments on commit 284e197

Please sign in to comment.