fix: contact page

src/app/api/contact/route.ts

@@ -1,6 +1,8 @@
 import { NextResponse } from 'next/server';
 import mailer from '@/lib/mailer';
 
+const senderEmail = process.env.SENDER_EMAIL;
+const receiverEmail = process.env.CONTACT_FORM_RECEIVER_EMAIL
 export async function POST(request: Request) {
     try {
         const { name, email, reason, message } = await request.json();
@@ -11,8 +13,8 @@ export async function POST(request: Request) {
 
         // Send the email using Nodemailer
         await mailer.sendMail({
-            from: process.env.SENDER_EMAIL,
-            to: process.env.CONTACT_FORM_RECEIVER_EMAIL,
+            from: `Contact Form <${senderEmail}>`,
+            to: receiverEmail,
             subject: `Contact Form: ${reason}`,
             html: `
                 <div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">

src/app/contactform/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { useState, ChangeEvent, FormEvent } from 'react';
 import styles from './ContactForm.module.css';
 import {toast} from "sonner";
@@ -36,7 +37,8 @@ export default function ContactForm() {
             });
 
             if (res.ok) {
-                toast.success("Thank you for contacting us! Your message has been sent.");
+                console.log(res);
+                toast.success("Thank you for contacting us! Your message has been sent." ,);
                 setFormData({ name: '', email: '', reason: '', message: '' });
             } else {
                 toast.error("There was a problem sending the message. Please try again");

src/components/Faq.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 import styles from "../components/ui/Faq.module.css";
 import Chat from "/public/chat.svg";
 import Link from "next/link";
-import Page from "@/app/contactform/page";
 
 const Faq: React.FC = () => {
     const [faqs, setFaqs] = useState([