-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improved UI of contact us page and fixes bug
- Loading branch information
1 parent
6ab5299
commit 0616f23
Showing
5 changed files
with
121 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useLocation } from 'react-router-dom'; | ||
|
|
||
| function ScrollToTop() { | ||
| const { pathname } = useLocation(); | ||
|
|
||
| useEffect(() => { | ||
| window.scrollTo(0, 0); | ||
| }, [pathname]); | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| export default ScrollToTop; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,6 @@ | ||
| import React, { useState } from 'react'; | ||
| import { motion } from 'framer-motion'; | ||
| import { FaEnvelope, FaPhone, FaMapMarkerAlt, FaPaperPlane } from 'react-icons/fa'; | ||
|
|
||
| const ContactUs = () => { | ||
| const [formData, setFormData] = useState({ | ||
|
|
@@ -22,72 +24,99 @@ const ContactUs = () => { | |
| }; | ||
|
|
||
| return ( | ||
| <div className="container mx-auto px-4 py-8"> | ||
| <h1 className="text-3xl font-bold mb-6">Contact Us</h1> | ||
| <div className="bg-light min-h-screen py-12 px-4 sm:px-6 lg:px-8"> | ||
| <div className="max-w-7xl mx-auto"> | ||
| <motion.h1 | ||
| className="text-4xl font-bold text-primary text-center mb-12" | ||
| initial={{ opacity: 0, y: -20 }} | ||
| animate={{ opacity: 1, y: 0 }} | ||
| transition={{ duration: 0.5 }} | ||
| > | ||
| Contact Us | ||
| </motion.h1> | ||
|
|
||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | ||
| {/* Contact Information Cards */} | ||
| <div className="card bg-white p-6 shadow-md rounded-lg"> | ||
| <h2 className="text-xl font-semibold mb-2">Email</h2> | ||
| <p className="text-gray-700">[email protected]</p> | ||
| </div> | ||
| <div className="card bg-white p-6 shadow-md rounded-lg"> | ||
| <h2 className="text-xl font-semibold mb-2">Phone</h2> | ||
| <p className="text-gray-700">+1 (555) 123-4567</p> | ||
| </div> | ||
| <div className="card bg-white p-6 shadow-md rounded-lg"> | ||
| <h2 className="text-xl font-semibold mb-2">Address</h2> | ||
| <p className="text-gray-700">123 Healthcare Street, Medical City, HC 12345</p> | ||
| </div> | ||
| </div> | ||
| <div className="grid grid-cols-1 md:grid-cols-2 gap-12"> | ||
| {/* Contact Information */} | ||
| <motion.div | ||
| className="bg-white p-8 rounded-lg shadow-lg" | ||
| initial={{ opacity: 0, x: -50 }} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.2 }} | ||
| > | ||
| <h2 className="text-2xl font-semibold text-primary mb-6">Get in Touch</h2> | ||
| <div className="space-y-4"> | ||
| <div className="flex items-center"> | ||
| <FaEnvelope className="text-accent mr-4 text-xl" /> | ||
| <p>[email protected]</p> | ||
| </div> | ||
| <div className="flex items-center"> | ||
| <FaPhone className="text-accent mr-4 text-xl" /> | ||
| <p>+1 (555) 123-4567</p> | ||
| </div> | ||
| <div className="flex items-center"> | ||
| <FaMapMarkerAlt className="text-accent mr-4 text-xl" /> | ||
| <p>123 Healthcare Street, Medical City, HC 12345</p> | ||
| </div> | ||
| </div> | ||
| </motion.div> | ||
|
|
||
| {/* Contact Form */} | ||
| <div className="bg-white p-8 shadow-md rounded-lg"> | ||
| <h2 className="text-2xl font-semibold mb-4">Get in Touch</h2> | ||
| <form onSubmit={handleSubmit} className="space-y-6"> | ||
| <div> | ||
| <label htmlFor="name" className="block text-lg font-medium mb-1">Name</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| value={formData.name} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500" | ||
| required | ||
| /> | ||
| </div> | ||
| <div> | ||
| <label htmlFor="email" className="block text-lg font-medium mb-1">Email</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| value={formData.email} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500" | ||
| required | ||
| /> | ||
| </div> | ||
| <div> | ||
| <label htmlFor="message" className="block text-lg font-medium mb-1">Message</label> | ||
| <textarea | ||
| id="message" | ||
| name="message" | ||
| value={formData.message} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500" | ||
| rows="4" | ||
| required | ||
| ></textarea> | ||
| </div> | ||
| <button | ||
| type="submit" | ||
| className="w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" | ||
| {/* Contact Form */} | ||
| <motion.div | ||
| className="bg-white p-8 rounded-lg shadow-lg" | ||
| initial={{ opacity: 0, x: 50 }} | ||
| animate={{ opacity: 1, x: 0 }} | ||
| transition={{ duration: 0.5, delay: 0.4 }} | ||
| > | ||
| Send Message | ||
| </button> | ||
| </form> | ||
| <h2 className="text-2xl font-semibold text-primary mb-6">Send Us a Message</h2> | ||
| <form onSubmit={handleSubmit} className="space-y-4"> | ||
| <div> | ||
| <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Name</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| value={formData.name} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent" | ||
| required | ||
| /> | ||
| </div> | ||
| <div> | ||
| <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email</label> | ||
| <input | ||
| type="email" | ||
| id="email" | ||
| name="email" | ||
| value={formData.email} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent" | ||
| required | ||
| /> | ||
| </div> | ||
| <div> | ||
| <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</label> | ||
| <textarea | ||
| id="message" | ||
| name="message" | ||
| value={formData.message} | ||
| onChange={handleChange} | ||
| className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent" | ||
| rows="4" | ||
| required | ||
| ></textarea> | ||
| </div> | ||
| <motion.button | ||
| type="submit" | ||
| className="w-full py-2 px-4 bg-accent text-primary font-semibold rounded-md hover:bg-primary hover:text-accent transition duration-300 flex items-center justify-center" | ||
| whileHover={{ scale: 1.05 }} | ||
| whileTap={{ scale: 0.95 }} | ||
| > | ||
| <FaPaperPlane className="mr-2" /> | ||
| Send Message | ||
| </motion.button> | ||
| </form> | ||
| </motion.div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||