Align Contact page

package.json

@@ -31,6 +31,6 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
-    "vite": "^6.0.1"
+    "vite": "^6.0.6"
   }
 }

src/components/Contact/Contact.css

@@ -0,0 +1,64 @@
+/* src/components/Contact/Contact.css */
+.contact-section {
+  width: 100%;
+}
+
+.contact-container {
+  max-width: 1200px;
+  margin: 20px auto;
+}
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10rem;
+}
+
+.contact-form-container {
+  width: 536px;
+  height: 536px;
+  top: 4038px;
+  left: 57px;
+  margin: 0 auto;
+  color: #004457;
+}
+
+/* Style form inputs to match dark theme */
+input, textarea {
+  background-color: #0A192F;
+  border: 1px solid #00C8FF;
+  color: #00C8FF;
+  padding: 0.5rem;
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+/* Ensure form labels are visible */
+label {
+  color: #00C8FF;
+}
+
+.contact-title {
+  color: #00C8FF;
+  font-size: 90px;
+  font-weight: 700;
+  margin-bottom: 3rem;
+  font-family: Inter;
+  line-height: 108.92px;
+}
+
+.social-icons-container {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .contact-grid {
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+  }
+}

src/components/Contact/Contact.jsx

@@ -0,0 +1,27 @@
+// import React from 'react';
+import AnimatedIcons from '../SocialMediaIconsComponent/AnimatedIcons';  // Reusing AnimatedIcons instead of SocialMediaIcons
+import ContactUs from '../ContactUs/ContactUs';
+import './Contact.css';
+
+const Contact = () => {
+  return (
+    <section className="contact-section">
+      <div className="contact-container">
+        <div className="contact-grid">
+          {/* Left side - Contact Form */}
+          <div className="contact-form-container">
+            <h2 className="contact-title">Contact Us</h2>
+            <ContactUs />
+          </div>
+
+          {/* Right side - Social Media Icons (using AnimatedIcons now) */}
+          <div className="social-icons-container">
+            <AnimatedIcons />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;

src/components/ContactUs/ContactUs.css

@@ -0,0 +1,54 @@
+/* src/components/ContactUs/ContactUs.css */
+.contact-form {
+  width: 100%;
+}
+
+.form-group {
+  margin-bottom: 2rem;
+}
+
+.form-label {
+  display: block;
+  color: white;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 250;
+  font-family: Inter;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem 0;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.form-input:focus {
+  outline: none;
+  border-bottom-color: white;
+}
+
+textarea.form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.submit-button {
+  width: 100%;
+  padding: 1rem;
+  background-color: #004457;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-button:hover {
+  background-color: #004457;
+}

src/components/ContactUs/ContactUs.jsx

@@ -0,0 +1,70 @@
+// src/components/ContactUs/ContactUs.jsx
+import React, { useState } from 'react';
+import './ContactUs.css';
+
+const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    message: ''
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prevState => ({
+      ...prevState,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+  };
+
+  return (
+    <form className="contact-form" onSubmit={handleSubmit}>
+      <div className="form-group">
+        <label className="form-label">Full Name</label>
+        <input
+          type="text"
+          name="fullName"
+          value={formData.fullName}
+          onChange={handleChange}
+          required
+          className="form-input"
+        />
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">E-mail</label>
+        <input
+          type="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          className="form-input"
+        />
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Message</label>
+        <textarea
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          required
+          className="form-input"
+          rows="4"
+        />
+      </div>
+
+      <button type="submit" className="submit-button">
+        Send
+      </button>
+    </form>
+  );
+};
+
+export default ContactUs;