add email env

This commit is contained in:
sasha-astiadi 2024-06-19 18:57:02 +02:00
parent 7747054b85
commit 95369a5a45
4 changed files with 69 additions and 15 deletions

6
.gitignore vendored
View File

@ -25,4 +25,8 @@ run*
install* install*
public public
static/css static/css
tailwindcss tailwindcss
# .gitignore
node_modules/
.env

59
server.js Normal file
View File

@ -0,0 +1,59 @@
// server.js
// Load environment variables from .env file
require('dotenv').config();
const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;
// Middleware to parse JSON and urlencoded form data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// POST endpoint to handle form submissions
app.post('/api/contact', async (req, res) => {
try {
// Get form data from request body
const { firstName, lastName, email, phoneNumber, message } = req.body;
// Create transporter for sending emails (replace with your email service details)
const transporter = nodemailer.createTransport({
service: 'Gmail',
auth: {
user: process.env.EMAIL_USER, // Using environment variable for email user
pass: process.env.EMAIL_PASS // Using environment variable for email password
}
});
// Email content
const mailOptions = {
from: process.env.EMAIL_USER, // Replace with your email address
to: 'recipient@example.com', // Replace with recipient email address
subject: 'New Message from Contact Form',
html: `
<p><strong>Name:</strong> ${firstName} ${lastName}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone Number:</strong> ${phoneNumber}</p>
<p><strong>Message:</strong><br>${message}</p>
`
};
// Send email
await transporter.sendMail(mailOptions);
// Response back to client
res.status(200).send('Message sent successfully!');
} catch (error) {
console.error('Error sending email:', error);
res.status(500).send('Error sending message. Please try again later.');
}
});
// Start server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});

View File

@ -14,7 +14,7 @@
--> -->
<div class="relative isolate bg-gray-900"> <div class="relative isolate bg-gray-900">
<div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2"> <div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div class="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48"> <div class="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg"> <div class="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
<div class="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden ring-1 ring-white/5 lg:w-1/2"> <div class="absolute inset-y-0 left-0 -z-10 w-full overflow-hidden ring-1 ring-white/5 lg:w-1/2">
<svg class="absolute inset-0 h-full w-full stroke-gray-700 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true"> <svg class="absolute inset-0 h-full w-full stroke-gray-700 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<h2 class="text-3xl font-bold tracking-tight text-white">Get in touch</h2> <h2 class="text-3xl font-bold tracking-tight text-white">Get in touch</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">Proin volutpat consequat porttitor cras nullam gravida at. Orci molestie a eu arcu. Sed ut tincidunt integer elementum id sem. Arcu sed malesuada et magna.</p> <p class="mt-6 text-lg leading-8 text-gray-300">At OurWorld, we value your feedback and inquiries. Whether you're interested in our ventures, have questions about our technologies, or want to collaborate, we're here to connect. Reach out to us today and let's build a better digital future together.</p>
<dl class="mt-10 space-y-4 text-base leading-7 text-gray-300"> <dl class="mt-10 space-y-4 text-base leading-7 text-gray-300">
<div class="flex gap-x-4"> <div class="flex gap-x-4">
<dt class="flex-none"> <dt class="flex-none">
@ -42,16 +42,7 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
</svg> </svg>
</dt> </dt>
<dd>545 Mavis Island<br>Chicago, IL 99191</dd> <dd>Nexus Global Financial Services Limited,<br>Ebene, Mauritius.</dd>
</div>
<div class="flex gap-x-4">
<dt class="flex-none">
<span class="sr-only">Telephone</span>
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
</svg>
</dt>
<dd><a class="hover:text-white" href="tel:+1 (555) 234-5678">+1 (555) 234-5678</a></dd>
</div> </div>
<div class="flex gap-x-4"> <div class="flex gap-x-4">
<dt class="flex-none"> <dt class="flex-none">
@ -60,7 +51,7 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg> </svg>
</dt> </dt>
<dd><a class="hover:text-white" href="mailto:hello@example.com">hello@example.com</a></dd> <dd><a class="hover:text-white" href="mailto:info@ourworld.tf"><u>info@ourworld.tf</u></a></dd>
</div> </div>
</dl> </dl>
</div> </div>

View File

@ -1,4 +1,4 @@
<div class="max-w-screen-xl px-4 mx-auto text-center lg:py-8 lg:px-6 relative"> <div class="max-w-screen-xl px-4 mx-auto text-center lg:py-24 lg:px-6 relative">
<div class="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/3 transform-gpu overflow-hidden opacity-20 blur-3xl" aria-hidden="true"> <div class="absolute inset-x-0 top-1/2 -z-10 -translate-y-1/3 transform-gpu overflow-hidden opacity-20 blur-3xl" aria-hidden="true">
<div class="ml-[max(50%,38rem)] aspect-[1313/771] w-[82.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div> <div class="ml-[max(50%,38rem)] aspect-[1313/771] w-[82.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div> </div>