Contact Data Grid - Copy this React, Tailwind Component to your project

Export const contactInfo = { address: "Obeya Verve, 2nd Floor, L376/A, 14th B Cross, 5th Main road, 6th Sector, HSR Layout, 560102", email: "info@daytonatec.com", socialLinks: { facebook: "https://facebook.com/daytonasystemsindia/", linkedin: "https://linkedin.com/company/daytona systems india/", twitter: "https://twitter.com/daytonaindia/", }, careersEmail: "careers@daytonatec.com", formActionUrl: "http://localhost:8080/api/contact", }; import { contactInfo } from "../model/contactModel"; export const getContactInfo = () => contactInfo; export const submitForm = async (formData, setStatus) => { setStatus({ success: null, message: "Submitting..." }); try { const response = await fetch(contactInfo.formActionUrl, { method: "POST", headers: { 'Accept': 'application/json', "Content Type": "application/json", }, body: JSON.stringify(formData), }); if (response.ok) { setStatus({ success: true, message: "Form submitted successfully!" }); return true; } else { setStatus({ success: false, message: "Failed to submit form." }); return false; } } catch (error) { console.error("Error:", error); setStatus({ success: false, message: "An error occurred" }); return false; } }; "use client"; import React, { useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { getContactInfo, submitForm } from "../controllers/contactController"; const ContactSection = () => { const contactInfo = getContactInfo(); const [status, setStatus] = useState({ success: null, message: "" }); const handleSubmit = async (e) => { e.preventDefault(); const formData = { fullname: e.target.fullname.value, email: e.target.email.value, phone: e.target.phone.value, company: e.target.company.value, message: e.target.message.value, }; await submitForm(formData, setStatus); if (status.success) e.target.reset(); }; return ( <section className="wrap"> <div className="container s"> <div className="wrapper main"> <div className="wrapper"> <h1>Our Hideout</h1> </div> </div> </div> <div className="map main"> <div className="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.896990584373!2d77.62987287358794!3d12.914341716134075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae148ecbd202ed%3A0x5bc33bae81a32920!2sDaytona%20Systems%20(India)%20Pvt.%20Ltd.!5e0!3m2!1sen!2sin!4v1726559615917!5m2!1sen!2sin" width="600" height="450" style={{ border: 0 }} allowFullScreen loading="lazy" referrerPolicy="no referrer when downgrade" ></iframe> </div> </div> <div className="contact info"> <div className="info main"> <div className="info"> <h1 className="color">Contact us</h1> <ul className="list"> <li className="l s n m"> <div className="f left img"> <Link href="#"> <Image alt="Location" src="https://daytonasystems.in/wp content/themes/daytona/images/icons/contact/location.svg" width={24} height={24} /> </Link> </div> <div className="def"> <p className="avenir light"> <Link href="https://www.google.com/maps/place/Obeya+Verve,+VM+Arcade/@12.9145801,77.6301851,17z/data=!3m1!4b1!4m5!3m4!1s0x3bae152f09ddab25:0xf66dcd463c585ce3!8m2!3d12.9145749!4d77.6323738" target="_blank" > Obeya Verve, 2nd Floor, L376/A, 14th B Cross, <br /> 5th Main road, 6th Sector, HSR Layout, 560102 </Link> </p> </div> </li> <li className="l s n m"> <div className="f left img"> <Image alt="Email" src="https://daytonasystems.in/wp content/themes/daytona/images/icons/contact/email.svg" width={24} height={24} /> </div> <div className="def"> <p className="avenir light">info@daytonatec.com</p> </div> </li> </ul> <h1 className="color">Social</h1> <ul className="list"> <li className="l s n m"> <div className="f left img"> <Link href="https://facebook.com/daytonasystemsindia/" target="_blank" > <Image alt="Facebook" src="https://daytonasystems.in/wp content/themes/daytona/images/icons/social/facebook.svg" width={24} height={24} /> </Link> </div> <div className="def"> <p className="avenir light"> <Link href="https://facebook.com/daytonasystemsindia/" target="_blank" > facebook.com/daytonasystemsindia/ </Link> </p> </div> </li> <li className="l s n m"> <div className="f left img"> <Link href="https://linkedin.com/company/daytona systems india/" target="_blank" > <Image alt="LinkedIn" src= "https://daytonasystems.in/wp content/themes/daytona/images/icons/social/linkedin.svg" width={24} height={24} /> </Link> </div> <div className="def"> <p className="avenir light"> <Link href="https://linkedin.com/company/daytona systems india/" target="_blank" > linkedin.com/company/daytona systems india/ </Link> </p> </div> </li> <li className="l s n m"> <div className="f left img"> <Link href="https://twitter.com/daytonaindia/" target="_blank"> <Image alt="Twitter" src="https://daytonasystems.in/wp content/themes/daytona/images/icons/social/twitter.svg" width={24} height={24} /> </Link> </div> <div className="def"> <p className="avenir light"> <Link href="https://twitter.com/daytonaindia/" target="_blank"> twitter.com/daytonaindia/ </Link> </p> </div> </li> </ul> <h1 className="color">Join us</h1> <ul className="list"> <li className="l s n m"> <p className="avenir light s"> Got what it takes? We’d love to hear from you. <br /> You may write to us at{' '} <span className="color p">careers@daytonatec.com</span> </p> </li> </ul> <div className="b t n s l"> <div className="b t n"> <Link href="/pages/career"> <button className="color p m">job openings</button> </Link> </div> </div> </div> </div> </div> <div className="hello"> <div className="holder"> <div className="wraper"> <div className="container s"> <div className="title"> <h1 className="color white"> say hi <br /> we're waving </h1> </div> <div className="form holder"> <div className='form'> <form onSubmit={handleSubmit} method="post"> <span className="fullname"> <input className='required' type="text" name="fullname" size="40" required placeholder="YOUR NAME" /> </span> <br /> <span className="email"> <input className='required' type="email" name="email" size="40" required placeholder="YOUR EMAIL" /> </span> <br /> <span className="phone"> <input className='required' type="tel" name="phone" size="40" required placeholder="PHONE NUMBER" /> </span> <br /> <span className="company"> <input className='required' type="text" name="company" size="40" required placeholder="YOUR COMPANY" /> </span> <br /> <span className="message"> <textarea className='required m' name="message" cols="40" rows="10" required placeholder="MESSAGE" ></textarea> </span> <div className="b t n s l"> <div className="b t n"> <a> <button onClick={console.log('Button clicked!')} className="color p m n"> submit </button> </a> </div> </div> </form> </div> </div> </div> </div> </div> </div> </section> ); }; export default ContactSection; const express = require('express'); const mysql = require('mysql2/promise'); const bodyParser = require('body parser'); const cors = require("cors"); require('dotenv').config(); const app = express(); app.use(bodyParser.urlencoded()); app.use(bodyParser.json()); app.use(cors()); const db = mysql.createPool({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME, }); app.post('/api/contact', async (req, res) => { const { fullname, email, phone, company, message } = req.body; console.log('req', req.body); if (!fullname || !email || !phone || !company || !message) { return res.status(400).json({ error: 'All fields are required' }); } const query = 'INSERT INTO contacts (fullname, email, phone, company, message) VALUES (?, ?, ?, ?, ?)'; try { const [result] = await db.query(query, [fullname, email, phone, company, message]); res.status(200).json({ message: 'Form submitted successfully!' }); } catch (err) { console.error('Error inserting data:', err); res.status(500).json({ error: 'Failed to submit form. Please try again later.' }); } }); const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); create a datadrid for form details