Finished the Contact Us Form.

src/homePage/Homepage.css

@@ -6,6 +6,9 @@
 
 .white-section {
     background-color: #ffffff;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    padding-left: 18%;
 }
 
 #title .container-fluid {
@@ -22,7 +25,9 @@
 
 
 .housesIntro{
-    padding: 4% 5%;
+    width: 1200px;
+    height: 800px;
+    
 }
 
 .contactIntro{
@@ -31,13 +36,9 @@
     padding-bottom: 80px;
 }
 
-.carouselSection {
-    margin: 2% 8%;
-}
-
 .headerImg{
-    width: 2000px;
-    height: 600px;
+    width: 1200px;
+    height: 800px;
 }
 
 .heading-1{

src/homePage/Homepage.js

@@ -4,6 +4,7 @@ import house1 from "../images/house1.jpg";
 import house2 from "../images/house2.jpg";
 import house3 from "../images/house3.jpg";
 import Carousel from "react-bootstrap/Carousel";
+import axios from 'axios'
 
 class Homepage extends Component {
   constructor(props) {
@@ -120,7 +121,26 @@ class Homepage extends Component {
     this.setState({ message: event.target.value });
   }
 
-  handleSubmit(event) {}
+  handleSubmit(event) {
+    event.preventDefault();
+
+    axios({
+      method: "POST",
+      url: "http://localhost:3002/send",
+      data: this.state
+    }).then((response) => {
+      if (response.data.status === 'success') {
+        alert("Message Sent.");
+        this.resetForm()
+      } else if (response.data.status === 'fail') {
+        alert("Message failed to send.")
+      }
+    })
+  }
+
+  resetForm() {
+    this.setState({ firstname: '', lastname: '', email: '', message: '' })
+  }
 }
 
 export default Homepage;

src/homePage/index.js

@@ -1 +1,59 @@
+var express = require('express');
+var router = express.Router();
+var nodemailer = require('nodemailer');
+var cors = require('cors');
+const creds = require('./config');
+
+var transport = {
+    host: 'smtp.mailtrap.io', // Don’t forget to replace with the SMTP host of your provider
+    port: 2525,
+    auth: {
+        user: creds.USER,
+        pass: creds.PASS
+    }
+}
+
+var transporter = nodemailer.createTransport(transport)
+
+transporter.verify((error, success) => {
+    if (error) {
+        console.log(error);
+    } else {
+        console.log('Server is ready to take messages');
+    }
+});
+
+router.post('/send', (req, res, next) => {
+    var firstname = req.body.firstname
+    var lastname = req.body.lastname
+    var email = req.body.email
+    var message = req.body.message
+    var content = `firstname: ${firstname} \n lastname: ${lastname} \n email: ${email} \n message: ${message} `
+
+    var mail = {
+        from: email,
+        to: 'kenes@cribs.com',  // Change to email address that you want to receive messages on
+        subject: 'New Message from Contact Form',
+        text: content
+    }
+
+    transporter.sendMail(mail, (err, data) => {
+        if (err) {
+            res.json({
+                status: 'fail'
+            })
+        } else {
+            res.json({
+                status: 'success'
+            })
+        }
+    })
+})
+
+const app = express()
+app.use(cors())
+app.use(express.json())
+app.use('/', router)
+app.listen(3002)
+
 export { default } from "./homePage";