added contact form

package-lock.json

@@ -11,7 +11,8 @@
         "@astrojs/node": "^11.0.2",
         "@astrojs/sitemap": "^3.7.3",
         "astro": "^7.1.4",
-        "dotenv": "^17.4.2"
+        "dotenv": "^17.4.2",
+        "resend": "^6.22.0"
       },
       "engines": {
         "node": ">=22.12.0"
@@ -1903,6 +1904,12 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
+    "node_modules/@stablelib/base64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@stablelib/base64/-/base64-1.0.1.tgz",
+      "integrity": "sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==",
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -2630,6 +2637,12 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "license": "MIT"
     },
+    "node_modules/fast-sha256": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-sha256/-/fast-sha256-1.3.0.tgz",
+      "integrity": "sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==",
+      "license": "Unlicense"
+    },
     "node_modules/fast-string-truncated-width": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/fast-string-truncated-width/-/fast-string-truncated-width-3.0.3.tgz",
@@ -3629,6 +3642,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postal-mime": {
+      "version": "2.7.5",
+      "resolved": "https://registry.npmjs.org/postal-mime/-/postal-mime-2.7.5.tgz",
+      "integrity": "sha512-GNEXKvWFQnbgO5NlrGzVa0FmWzBZ24PersAWErttSg1Hjpf0ATxTwS5DOMGaOpTG6bUh5cTr7xi0jAD942wCJA==",
+      "license": "MIT-0"
+    },
     "node_modules/postcss": {
       "version": "8.5.23",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz",
@@ -3741,6 +3760,27 @@
       "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
       "license": "MIT"
     },
+    "node_modules/resend": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-6.22.0.tgz",
+      "integrity": "sha512-dP1jyl0n1Dx7GYDb0bcsbv9Yx0oBRLhUtSyNFRIOsSzV9MvCVbua/3WP6YUP2JptAU5BciEWGInV+hFjUuYLUw==",
+      "license": "MIT",
+      "dependencies": {
+        "postal-mime": "2.7.5",
+        "standardwebhooks": "1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@react-email/render": "*"
+      },
+      "peerDependenciesMeta": {
+        "@react-email/render": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -4005,6 +4045,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/standardwebhooks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
+      "integrity": "sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@stablelib/base64": "^1.0.0",
+        "fast-sha256": "^1.3.0"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@astrojs/node": "^11.0.2",
     "@astrojs/sitemap": "^3.7.3",
     "astro": "^7.1.4",
-    "dotenv": "^17.4.2"
+    "dotenv": "^17.4.2",
+    "resend": "^6.22.0"
   }
 }

src/components/Header.astro

@@ -34,6 +34,7 @@ const projects = [
         </div>
       </div>
 
+      <a href="/contact" class="nav-link">Contact</a>
       <a href="/about" class="nav-link">About</a>
     </nav>
   </div>

src/pages/about.astro

@@ -10,7 +10,7 @@ import noelleImage2 from '../assets/images/brand-package/noelle-paris2.jpg';
 <Layout title="About Noelle | Noelle Paris Design">
   <main class="about-container">
     <header class="about-header">
-      <h1>About Noelle</h1>
+      <h1>Noelle Paris, MA, Realtor<sup>®</sup></h1>
       <p class="subtitle">Design for Well-Being, Inside & Out</p>
     </header>
 

src/pages/api/send-message.ts

@@ -0,0 +1,39 @@
+import type { APIRoute } from 'astro';
+import { Resend } from 'resend';
+
+const resend = new Resend(import.meta.env.RESEND_API_KEY);
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const data = await request.json();
+    const { name, email, phone, message } = data;
+
+    if (!name || !email || !message) {
+      return new Response(
+        JSON.stringify({ message: 'Missing required fields' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    // Send email via Resend
+    await resend.emails.send({
+      from: 'Noelle Paris Design Contact Form <contactform@noelleparisdesign.com>', // Update to your domain once verified in Resend
+      //to: 'github@juchatz.com',
+      to: 'inquiries@noelleparisdesign.com',
+      replyTo: email,
+      subject: `New Inquiry from ${name}`,
+      text: `Name: ${name}\nEmail: ${email}\nPhone: ${phone || 'N/A'}\n\nMessage:\n${message}`,
+    });
+
+    return new Response(
+      JSON.stringify({ message: 'Message sent successfully' }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
+    );
+  } catch (error) {
+    console.error('Email error:', error);
+    return new Response(
+      JSON.stringify({ message: 'Error sending email' }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+};

src/pages/contact.astro

@@ -0,0 +1,194 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Contact | Noelle Paris Design">
+  <main class="contact-container">
+    <header class="contact-header">
+      <h1>Contact</h1>
+      <p class="subtitle">Let's discuss your project</p>
+    </header>
+
+    <div class="form-wrapper">
+      <form id="contact-form" method="POST">
+        <div class="form-group">
+          <label for="name">Name</label>
+          <input type="text" id="name" name="name" required placeholder="Your full name" />
+        </div>
+
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required placeholder="your.email@example.com" />
+        </div>
+
+        <div class="form-group">
+          <label for="phone">Phone (Optional)</label>
+          <input type="tel" id="phone" name="phone" placeholder="(555) 000-0000" />
+        </div>
+
+        <div class="form-group">
+          <label for="message">Message</label>
+          <textarea id="message" name="message" rows="6" required placeholder="Tell us about your project or inquiry..."></textarea>
+        </div>
+
+        <button type="submit" id="submit-btn" class="submit-button">Send Message</button>
+        <p id="form-status" class="status-message"></p>
+      </form>
+    </div>
+  </main>
+</Layout>
+
+<script>
+  const form = document.getElementById('contact-form') as HTMLFormElement;
+  const statusMsg = document.getElementById('form-status') as HTMLParagraphElement;
+  const submitBtn = document.getElementById('submit-btn') as HTMLButtonElement;
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Sending...';
+    statusMsg.textContent = '';
+    statusMsg.className = 'status-message';
+
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+
+    try {
+      const response = await fetch('/api/send-message', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (response.ok) {
+        statusMsg.textContent = 'Thank you! Your message has been sent successfully.';
+        statusMsg.classList.add('success');
+        form.reset();
+      } else {
+        statusMsg.textContent = 'Something went wrong. Please try again later.';
+        statusMsg.classList.add('error');
+      }
+    } catch (err) {
+      statusMsg.textContent = 'Network error. Please check your connection and try again.';
+      statusMsg.classList.add('error');
+    } finally {
+      submitBtn.disabled = false;
+      submitBtn.textContent = 'Send Message';
+    }
+  });
+</script>
+
+<style>
+  .contact-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 4rem 1.5rem;
+    color: #2b2b2b;
+  }
+
+  .contact-header {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  .contact-header h1 {
+    font-size: 2.5rem;
+    font-weight: 300;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.01em;
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+  }
+
+  .form-wrapper {
+    background: rgba(255, 255, 255, 0.4);
+    padding: 2.5rem;
+    border-radius: 4px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .form-group {
+    margin-bottom: 1.75rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  label {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #444;
+    margin-bottom: 0.5rem;
+  }
+
+  input, textarea {
+    width: 100%;
+    padding: 0.85rem 1rem;
+    border: 1px solid #dcd8d0;
+    background-color: #faf8f5;
+    border-radius: 2px;
+    font-size: 1rem;
+    color: #222;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+  }
+
+  input:focus, textarea:focus {
+    outline: none;
+    border-color: #444;
+    background-color: #ffffff;
+  }
+
+  .submit-button {
+    width: 100%;
+    padding: 1rem;
+    background-color: #222;
+    color: #fff;
+    border: none;
+    border-radius: 2px;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .submit-button:hover {
+    background-color: #444;
+  }
+
+  .submit-button:disabled {
+    background-color: #888;
+    cursor: not-allowed;
+  }
+
+  .status-message {
+    margin-top: 1.5rem;
+    text-align: center;
+    font-size: 0.95rem;
+  }
+
+  .status-message.success {
+    color: #2e7d32;
+  }
+
+  .status-message.error {
+    color: #c62828;
+  }
+
+  @media (max-width: 600px) {
+    .contact-container {
+      padding: 2.5rem 1.25rem;
+    }
+    .form-wrapper {
+      padding: 1.5rem;
+    }
+  }
+</style>