Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -2,8 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import Input from '@/components/form/Input';
 import Link from "next/link";
+import { useState } from 'react';
 
 interface FooterProps {
   brandName?: string;
@@ -32,9 +33,18 @@ const Footer: React.FC<FooterProps> = ({ brandName = "Nexsoft Australia", navIte
   );
 };
 
+
 export default function ContactPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
   const navItems = [
     {name: "Home", id: "home", href: "/"},
+    {name: "About us", id: "about", href: "/about"},
+    {name: "Products", id: "products", href: "/products"},
+    {name: "Achievements", id: "achievements", href: "/portfolio"},
+    {name: "News", id: "news", href: "/portfolio"},
     {name: "Contact us", id: "contact", href: "/contact"}
   ];
 
@@ -43,9 +53,14 @@ export default function ContactPage() {
     button: {text: "Get a Quote", href: "/contact"}
   };
 
-  const handleFormSubmit = (data: Record<string, string>) => {
-    console.log("Form submitted:", data);
-    alert("Thank you for your message! We will get back to you soon.");
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission logic here
+    console.log({ name, email, message });
+    alert('Message sent successfully!');
+    setName('');
+    setEmail('');
+    setMessage('');
   };
 
   return (
@@ -64,25 +79,90 @@ export default function ContactPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay {...navbarProps} />
       </div>
-      <div id="contact-form" data-section="contact-form">
-        <ContactSplitForm
-          title="Get in Touch"
-          description="We'd love to hear from you! Fill out the form below or find us on the map."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "Your Email", required: true }
-          ]}
-          textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
-          buttonText="Send Message"
-          imageSrc="https://picsum.photos/id/1083/800/600?grayscale&blur=2" 
-          imageAlt="Office location map"
-          mediaPosition="right"
-          useInvertedBackground={false}
-          onSubmit={handleFormSubmit}
-          className="pt-24 md:pt-32 pb-16"
-        />
-      </div>
+      <main className="min-h-[calc(100vh-16rem)] flex flex-col items-center p-8 bg-background">
+        <h1 className="text-4xl md:text-6xl font-bold text-center mb-12 text-foreground">Contact Us</h1>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 w-full max-w-6xl">
+          <section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
+            <h2 className="text-3xl font-semibold mb-6 text-foreground">Send us a Message</h2>
+            <form onSubmit={handleSubmit} className="space-y-6 flex-grow flex flex-col">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
+                  Name
+                </label>
+                <Input
+                  id="name"
+                  value={name}
+                  onChange={setName}
+                  placeholder="Your Name"
+                  required
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email
+                </label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="your@example.com"
+                  required
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta"
+                />
+              </div>
+              <div className="flex-grow flex flex-col">
+                <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  value={message}
+                  onChange={(e) => setMessage(e.target.value)}
+                  placeholder="Your message"
+                  rows={6}
+                  required
+                  className="w-full p-3 rounded-md bg-background border border-accent text-foreground focus:ring-primary-cta focus:border-primary-cta flex-grow resize-y"
+                ></textarea>
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-primary-cta text-white font-bold py-3 px-6 rounded-md hover:opacity-90 transition-opacity"
+              >
+                Send Message
+              </button>
+            </form>
+          </section>
+
+          <section className="bg-card p-8 rounded-lg shadow-lg flex flex-col border border-accent">
+            <h2 className="text-3xl font-semibold mb-6 text-foreground">Find Us on the Map</h2>
+            <div className="relative h-96 w-full rounded-md overflow-hidden flex-grow">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.284728033604!2d144.96305731531634!3d-37.81627957975191!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b58897811f%3A0xf63a7f8b9e6e8a0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1678901234567!5m2!1sen!2sau"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                title="Google Maps Location"
+                className="absolute inset-0"
+              ></iframe>
+            </div>
+            <div className="mt-6 text-foreground">
+                <p className="font-semibold">Our Address:</p>
+                <p>123 Business Street, Suite 400</p>
+                <p>Melbourne, VIC 3000</p>
+                <p>Australia</p>
+                <p className="mt-4 font-semibold">Phone: <Link href="tel:+61-3-1234-5678" className="text-primary-cta hover:underline">+61 3 1234 5678</Link></p>
+                <p className="font-semibold">Email: <Link href="mailto:info@nexsoft.com.au" className="text-primary-cta hover:underline">info@nexsoft.com.au</Link></p>
+            </div>
+          </section>
+        </div>
+      </main>
       <Footer brandName="Nexsoft Australia" navItems={navItems} />
     </ThemeProvider>
   );
-}
+}