Skip to content

Commit

Permalink
Merge pull request #934 from Shariq2003/ContactRevamp
Browse files Browse the repository at this point in the history 
Contact Page Revamped | Issue #826
  • Loading branch information
@manikumarreddyu
manikumarreddyu authored Nov 9, 2024
2 parents 4e8a9b0 + d5e07e3 commit 9f66c0f
Showing 1 changed file with 123 additions and 124 deletions.
247 changes: 123 additions & 124 deletions frontend/src/pages/Contact.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import bgHero from "../assets/bgHero.png";
import { FaGithub, FaDiscord, FaTwitter, FaLinkedin, FaEnvelope, FaPhoneAlt, FaChevronDown, FaChevronUp } from 'react-icons/fa';
import { FaXTwitter } from 'react-icons/fa6';
import Contactus from "../assets/contactus.png";
import Contactus from "../assets/contactus.png";
import "../styles/Contact.css";

const Contact = () => {
Expand Down Expand Up @@ -31,7 +31,7 @@ const Contact = () => {
answer: "AgroTech AI primarily serves the agricultural industry, helping farmers and researchers make data-driven decisions.",
},
];

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [subject, setSubject] = useState('');
Expand Down Expand Up @@ -123,12 +123,12 @@ const Contact = () => {
setMessage('');
setTimeout(() => {
setResponseMessage('');
}, 9000);
}, 9000);
} else {
setError(data.message || 'Failed to submit form');
setTimeout(() => {
setError('');
}, 9000);
}, 9000);
}
} catch (error) {
console.error('Error:', error);
Expand All @@ -150,139 +150,138 @@ const Contact = () => {
<h2 className="text-5xl font-bold text-center text-green-500 mb-4">Contact Us</h2>

{/* contact us section */}
<div className="mb-10 max-w-2xl mx-auto p-6 bg-green-100 bg-opacity-60 rounded shadow-lg">
<h3 className="text-2xl font-bold text-green-600 mb-4">Get in Touch</h3>
<div className='flex w-full'>
<div className="w-full max-w-4xl mb-10 mx-auto p-6 bg-green-100 bg-opacity-60 rounded shadow-lg">
<h3 className="text-2xl font-bold text-green-600 mb-4">Get in Touch</h3>

<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700 mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.name ? 'border-red-500' : ''}`}
placeholder="Your Name"
/>
{errors.name && <p className="text-red-500 text-xs italic">{errors.name}</p>}
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Email</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.email ? 'border-red-500' : ''}`}
placeholder="Your Email"
/>
{errors.email && <p className="text-red-500 text-xs italic">{errors.email}</p>}
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Subject</label>
<input
type="text"
value={subject}
onChange={(e) => setSubject(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.subject ? 'border-red-500' : ''}`}
placeholder="Subject"
/>
{errors.subject && <p className="text-red-500 text-xs italic">{errors.subject}</p>}
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Message</label>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.message ? 'border-red-500' : ''}`}
placeholder="Your Message"
rows="4"
></textarea>
{errors.message && <p className="text-red-500 text-xs italic">{errors.message}</p>}
</div>

{responseMessage && <p className="text-green-500">{responseMessage}</p>}
{error && <p className="text-red-500">{error}</p>}

<button
type="submit"
className={`bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-600 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={loading}
>
{loading ? 'Sending...' : 'Send Message'}
</button>
</form>
</div>
<div>
<div className="bg-white p-6 rounded-lg shadow-md max-w-4xl mx-auto mb-10">
<h3 className="text-3xl font-bold text-gray-800 mb-4">Our Services</h3>
<ul className="list-disc list-inside space-y-2">
<li>Crop Prediction and Analysis</li>
<li>Soil Health Monitoring</li>
<li>Climate Impact Forecasting</li>
<li>Custom AI Solutions for Farm Management</li>
</ul>
</div>

<form onSubmit={handleSubmit}>
<div className="mb-4">
<label className="block text-gray-700 mb-2">Name</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.name ? 'border-red-500' : ''}`}
placeholder="Your Name"
/>
{errors.name && <p className="text-red-500 text-xs italic">{errors.name}</p>}
{/* Testimonials */}
<div className="bg-green-100 p-6 rounded-lg shadow-md max-w-4xl mx-auto mb-10">
<h3 className="text-3xl font-bold text-gray-800 mb-4">What Our Customers Say</h3>
<p>"AgroTech AI has revolutionized our farming processes! Their predictive models help us optimize crop yield and reduce wastage." - Farmer John</p>
<p>"The insights provided by AgroTech are invaluable for making data-driven decisions on the field." - Dr. Smith, Agronomist</p>
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Email</label>
{/* Newsletter Signup */}
<div className="bg-gray-800 p-6 rounded-lg shadow-md max-w-4xl mx-auto mb-10 text-white">
<h3 className="text-3xl font-bold text-white mb-4">Stay Updated</h3>
<p>Subscribe to our newsletter for the latest updates and AI innovations in agriculture.</p>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.email ? 'border-red-500' : ''}`}
placeholder="Your Email"
className="mt-4 p-2 w-full rounded"
/>
{errors.email && <p className="text-red-500 text-xs italic">{errors.email}</p>}
<button className="mt-2 bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-600">Subscribe</button>
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Subject</label>
<input
type="text"
value={subject}
onChange={(e) => setSubject(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.subject ? 'border-red-500' : ''}`}
placeholder="Subject"
/>
{errors.subject && <p className="text-red-500 text-xs italic">{errors.subject}</p>}
</div>

<div className="mb-4">
<label className="block text-gray-700 mb-2">Message</label>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
className={`border rounded w-full py-2 px-3 text-gray-700 ${errors.message ? 'border-red-500' : ''}`}
placeholder="Your Message"
rows="4"
></textarea>
{errors.message && <p className="text-red-500 text-xs italic">{errors.message}</p>}
</div>

{responseMessage && <p className="text-green-500">{responseMessage}</p>}
{error && <p className="text-red-500">{error}</p>}

<button
type="submit"
className={`bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-600 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={loading}
>
{loading ? 'Sending...' : 'Send Message'}
</button>
</form>
</div>
<div className="flex justify-center space-x-4 mb-10">
<a
href="mailto:info@agrotech.com"
className="flex items-center border-b-2 border-blue-500 text-blue-500 font-bold py-2 px-4 hover:border-blue-600 hover:text-blue-600 transition"
>
<FaEnvelope className="mr-2" />
info@agrotech.com
</a>
<a
href="tel:+911234567890"
className="flex items-center border-b-2 border-green-500 text-green-500 font-bold py-2 px-4 hover:border-green-600 hover:text-green-600 transition"
>
<FaPhoneAlt className="mr-2" />
+91 1234567890
</a>
</div>
</div>
<div className="grid md:grid-cols-2 gap-8 mb-10">
<div>
<h3 className="text-2xl font-bold text-green-600 mb-4">FAQs</h3>
<div className="space-y-4">
{faqs.map((faq, index) => (
<div key={index} className="border-b-2 border-gray-300">
{/* Question */}
<div
onClick={() => toggleAccordion(index)}
className="flex justify-between items-center cursor-pointer p-4 bg-green-100 hover:bg-green-200 rounded-md"
>
<h4 className="text-lg font-semibold text-green-700">{faq.question}</h4>
<span className="text-green-600">
{activeIndex === index ? <FaChevronUp /> : <FaChevronDown />}
</span>
</div>

{/* Answer */}
{activeIndex === index && (
<div className="p-4 text-gray-600 bg-white">
<p>{faq.answer}</p>
</div>
)}
</div>
))}
</div>
<div className='flex flex-col'>
<div className="flex justify-center space-x-4 mb-10">
<a
href="mailto:info@agrotech.com"
className="flex items-center border-b-2 border-blue-500 text-blue-500 font-bold py-2 px-4 hover:border-blue-600 hover:text-blue-600 transition"
>
<FaEnvelope className="mr-2" />
info@agrotech.com
</a>
<a
href="tel:+911234567890"
className="flex items-center border-b-2 border-green-500 text-green-500 font-bold py-2 px-4 hover:border-green-600 hover:text-green-600 transition"
>
<FaPhoneAlt className="mr-2" />
+91 1234567890
</a>
</div>

{/* Our Location */}
<div>
<h3 className="text-2xl font-bold text-gray-800 mb-4">Our Location</h3>
<p>1-14 AgroTech AI Lane, Farming City, Madhapur,Hyderabad 533417</p>
<div className="h-64 w-full mt-4">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13527.487707281556!2d78.3738297750517!3d17.449315703489304!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9158f201b205%3A0x11bbe7be7792411b!2sMadhapur%2C%20Hyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1728457656915!5m2!1sen!2sin"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
title="AgroTech-AI Company Location"
/>


<div className="grid w-full max-w-4xl gap-8 mb-10 mx-auto">

<div>
<h3 className="text-2xl font-bold text-gray-800 mb-4">Our Location</h3>
<p>1-14 AgroTech AI Lane, Farming City, Madhapur,Hyderabad 533417</p>
<div className="h-64 w-full mt-4">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13527.487707281556!2d78.3738297750517!3d17.449315703489304!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9158f201b205%3A0x11bbe7be7792411b!2sMadhapur%2C%20Hyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1728457656915!5m2!1sen!2sin"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen=""
loading="lazy"
title="AgroTech-AI Company Location"
/>
</div>
</div>
</div>
</div>



{/* FAQs Section */}
{/* Email and phone number */}

</div>
);
};
Expand Down

0 comments on commit 9f66c0f

Please sign in to comment.