[Migration] Added all Helpdesk pages (Help, FAQ, Contact Us, Support) to NextJS

scruter-nextjs/app/(routes)/contactus/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React from 'react';
+import axios from 'axios';
+import '../../globals.css';
+
+// Define the props interface for the Section component
+interface SectionProps {
+    id: string;
+    icon: string;
+    title: string;
+    children: React.ReactNode;
+}
+
+const ProgressBar = () => {
+  const [scrollPercent, setScrollPercent] = React.useState(0);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      const docHeight = document.body.scrollHeight - window.innerHeight;
+      const percent = (scrollTop / docHeight) * 100;
+      setScrollPercent(percent);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div id="progress-bar" className="fixed top-0 left-0 h-1 bg-blue-600" style={{ width: `${scrollPercent}%` }}></div>
+  );
+};
+
+const Sidebar = () => (
+  <aside className="w-1/4 bg-gradient-to-b from-blue-500 to-purple-600 text-white p-4 sticky top-0 h-screen">
+    <ul className="space-y-4">
+      <li><a href="#contact-info" className="flex items-center"><i className="fas fa-info-circle"></i> Contact Information</a></li>
+      <li><a href="#support" className="flex items-center"><i className="fas fa-phone"></i> Customer Support</a></li>
+      <li><a href="#social-media" className="flex items-center"><i className="fas fa-hashtag"></i> Social Media</a></li>
+      <li><a href="#location" className="flex items-center"><i className="fas fa-map-marker-alt"></i> Our Location</a></li>
+      <li><a href="#contact-form" className="flex items-center"><i className="fas fa-envelope"></i> Send a Message</a></li>
+    </ul>
+  </aside>
+);
+
+const Section: React.FC<SectionProps> = ({ id, icon, title, children }) => (
+    <section id={id} className="mt-8">
+      <h2 className="text-2xl font-semibold text-gray-800 flex items-center border-l-4 border-blue-600 pl-2 mb-4">
+        <i className={`${icon} mr-2 text-purple-600`}></i> {title}
+      </h2>
+      <div className="text-gray-700">{children}</div>
+    </section>
+);
+
+const ContactForm = () => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const data = Object.fromEntries(formData.entries());
+
+    axios.post('/api/contact', data)
+      .then(response => {
+        alert('Message sent successfully!');
+        event.currentTarget.reset();
+      })
+      .catch(error => {
+        console.error('Error sending message:', error);
+      });
+  };
+
+  return (
+    <section id="contact-form" className="mt-8">
+      <h2 className="text-2xl font-semibold text-gray-800 flex items-center border-l-4 border-blue-600 pl-2 mb-4">
+        <i className="fas fa-envelope mr-2 text-purple-600"></i> Send a Message
+      </h2>
+      <form className="contact-form max-w-md mx-auto" onSubmit={handleSubmit}>
+        <label htmlFor="name" className="block mb-1">Name</label>
+        <input type="text" id="name" name="name" required className="border rounded p-2 mb-4 w-full" />
+
+        <label htmlFor="email" className="block mb-1">Email</label>
+        <input type="email" id="email" name="email" required className="border rounded p-2 mb-4 w-full" />
+
+        <label htmlFor="message" className="block mb-1">Message</label>
+        <textarea id="message" name="message" rows={5} required className="border rounded p-2 mb-4 w-full"></textarea>
+
+        <button type="submit" className="bg-blue-600 text-white p-2 rounded">Send Message</button>
+      </form>
+    </section>
+  );
+};
+
+const ContactPage = () => (
+  <div className="flex">
+    <ProgressBar />
+    <Sidebar />
+    <main className="w-3/4 p-8 bg-white shadow-lg">
+      <div className="text-center mb-8">
+        <h1 className="text-4xl text-blue-600 font-bold">Contact Us</h1>
+        <p className="text-gray-600 max-w-2xl mx-auto mt-2">We’d love to hear from you! Reach out with any questions, feedback, or just to say hello.</p>
+      </div>
+
+      <Section id="contact-info" icon="fas fa-info-circle" title="Contact Information">
+        <p>If you have any inquiries, please contact us at:</p>
+        <p>Email: [email protected]</p>
+        <p>Phone: (123) 456-7890</p>
+        <p>Address: 123 Main St, Springfield, USA</p>
+      </Section>
+
+      <Section id="support" icon="fas fa-phone" title="Customer Support">
+        <p>Our customer support team is available Monday through Friday, 9:00 AM - 5:00 PM. For urgent inquiries, please contact us by phone.</p>
+      </Section>
+
+      <Section id="social-media" icon="fas fa-hashtag" title="Social Media">
+        <p>Follow us on social media to stay updated with the latest news:</p>
+        <ul className="list-disc pl-5">
+          <li><a href="https://facebook.com/scruter" target="_blank" rel="noopener noreferrer">Facebook</a></li>
+          <li><a href="https://twitter.com/scruter" target="_blank" rel="noopener noreferrer">Twitter</a></li>
+          <li><a href="https://instagram.com/scruter" target="_blank" rel="noopener noreferrer">Instagram</a></li>
+        </ul>
+      </Section>
+
+      <Section id="location" icon="fas fa-map-marker-alt" title="Our Location">
+        <p>Scruter Headquarters</p>
+        <p>123 Main Street, Suite 100</p>
+        <p>City, State, ZIP Code</p>
+      </Section>
+
+      <ContactForm />
+    </main>
+  </div>
+);
+
+export default ContactPage;

scruter-nextjs/app/(routes)/faq/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React from 'react';
+import '../../globals.css';
+
+// Define the props interface for the Section component
+interface SectionProps {
+    id: string;
+    icon: string;
+    title: string;
+    children: React.ReactNode; // Use ReactNode to allow any valid React child
+}
+
+// Section component for each FAQ
+const Section: React.FC<SectionProps> = ({ id, icon, title, children }) => (
+  <section id={id} className="mt-8">
+    <h2 className="text-2xl font-semibold text-gray-800 flex items-center border-l-4 border-blue-600 pl-2 mb-4 cursor-pointer">
+    <i className={`${icon} mr-2 text-purple-600`}></i> {title}
+    </h2>
+    <p className="faq-answer text-gray-700 hidden">{children}</p>
+  </section>
+);
+
+// Sidebar component
+const Sidebar = () => (
+  <aside className="w-1/4 bg-gradient-to-b from-blue-500 to-purple-600 text-white p-4 sticky top-0 h-screen overflow-y-auto">
+    <ul className="list-none p-0">
+      <li className="mb-3"><a href="#faq1" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> What is Scruter?</a></li>
+      <li className="mb-3"><a href="#faq2" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How do I create an account?</a></li>
+      <li className="mb-3"><a href="#faq3" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How do I post an ad?</a></li>
+      <li className="mb-3"><a href="#faq4" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> What payment methods are accepted?</a></li>
+      <li className="mb-3"><a href="#faq5" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How can I contact support?</a></li>
+      <li className="mb-3"><a href="#faq6" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How do I reset my password?</a></li>
+      <li className="mb-3"><a href="#faq7" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How can I delete my account?</a></li>
+      <li className="mb-3"><a href="#faq8" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> What should I do if I encounter a problem?</a></li>
+      <li className="mb-3"><a href="#faq9" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> Can I edit my ad after posting it?</a></li>
+      <li className="mb-3"><a href="#faq10" className="flex items-center text-white hover:text-gray-200"><i className="fas fa-question-circle mr-2"></i> How do I report a user or an ad?</a></li>
+    </ul>
+  </aside>
+);
+
+// Main FAQ Component
+const FAQPage = () => {
+  // Scroll progress bar functionality
+  const handleScroll = () => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.body.scrollHeight - window.innerHeight;
+    const scrollPercent = (scrollTop / docHeight) * 100;
+    const progressBar = document.getElementById('progress-bar');
+    if (progressBar) { // Check if progressBar is not null
+        progressBar.style.width = scrollPercent + '%';
+    }
+  };
+
+  // Toggle FAQ answers visibility
+  const handleQuestionClick = (event: any) => {
+    const answer = event.currentTarget.nextElementSibling;
+    answer.classList.toggle('hidden');
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    const questions = document.querySelectorAll('section h2');
+    questions.forEach(question => {
+      question.addEventListener('click', handleQuestionClick);
+    });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      questions.forEach(question => {
+        question.removeEventListener('click', handleQuestionClick);
+      });
+    };
+  }, []);
+
+  return (
+    <div className="flex">
+      <div id="progress-bar" className="fixed top-0 left-0 h-1 bg-blue-600"></div>
+      <Sidebar />
+      <main className="main-content w-3/4 p-4 bg-white shadow-lg">
+        <div className="text-center mb-2">
+          <h1 className="text-4xl text-blue-600 font-bold">Frequently Asked Questions</h1>
+          <p className="text-gray-600 max-w-2xl mx-auto mt-2">Find answers to the most common questions about using Scruter.</p>
+        </div>
+
+        <Section id="faq1" icon="fas fa-question-circle" title="What is Scruter?">
+          Scruter is a local classifieds platform where users can buy, sell, and exchange services within their community.
+        </Section>
+
+        <Section id="faq2" icon="fas fa-question-circle" title="How do I create an account?">
+          To create an account, click on the "Sign Up" button and fill out the registration form with your details.
+        </Section>
+
+        <Section id="faq3" icon="fas fa-question-circle" title="How do I post an ad?">
+          Once you are logged in, navigate to the "Post Ad" section, fill in the necessary information, and submit your ad.
+        </Section>
+
+        <Section id="faq4" icon="fas fa-question-circle" title="What payment methods are accepted?">
+          Scruter accepts various payment methods, including credit/debit cards and online payment services.
+        </Section>
+
+        <Section id="faq5" icon="fas fa-question-circle" title="How can I contact support?">
+          You can reach out to our support team via the "Contact Us" section on our website or email us at [email protected].
+        </Section>
+
+        <Section id="faq6" icon="fas fa-question-circle" title="How do I reset my password?">
+          If you forget your password, click on the "Forgot Password?" link on the login page and follow the instructions to reset it.
+        </Section>
+
+        <Section id="faq7" icon="fas fa-question-circle" title="How can I delete my account?">
+          To delete your account, please contact our support team, and they will assist you with the process.
+        </Section>
+
+        <Section id="faq8" icon="fas fa-question-circle" title="What should I do if I encounter a problem?">
+          If you encounter any issues, please refer to the "Help Center" or contact support for assistance.
+        </Section>
+
+        <Section id="faq9" icon="fas fa-question-circle" title="Can I edit my ad after posting it?">
+          Yes, you can edit your ad by going to your account settings and selecting the ad you wish to modify.
+        </Section>
+
+        <Section id="faq10" icon="fas fa-question-circle" title="How do I report a user or an ad?">
+          You can report a user or ad by clicking the "Report" button located next to the ad or user profile.
+        </Section>
+      </main>
+    </div>
+  );
+};
+
+export default FAQPage;

scruter-nextjs/app/(routes)/help/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect } from "react";
+import '../../globals.css'; // Import your Tailwind CSS styles
+
+interface FAQItemProps {
+    question: string;
+    answer: string;
+}
+
+interface SectionProps {
+    id: string;
+    icon: string;
+    title: string;
+    children: React.ReactNode;
+}
+
+const HelpCenterPage = () => {
+  useEffect(() => {
+    const updateProgressBar = () => {
+        const progressBar = document.getElementById('progress-bar');
+        if (progressBar) {
+        const scrollTop = window.scrollY;
+        const docHeight = document.body.scrollHeight - window.innerHeight;
+        const scrollPercent = (scrollTop / docHeight) * 100;
+        progressBar.style.width = scrollPercent + '%';
+        }
+    };
+
+    window.addEventListener('scroll', updateProgressBar);
+
+    return () => {
+        window.removeEventListener('scroll', updateProgressBar);
+    };
+    }, []);
+
+  return (
+    <div>
+      <div id="progress-bar" className="h-1 bg-blue-500"></div>
+      <div className="flex">
+        <Sidebar />
+        <MainContent />
+      </div>
+    </div>
+  );
+};
+
+const Sidebar = () => (
+  <aside className="sidebar w-1/4 bg-gradient-to-b from-blue-500 to-purple-600 text-white p-5 sticky top-0 h-screen">
+    <ul className="list-none p-0">
+      <li><a href="#introduction" className="flex items-center py-2 text-white hover:text-gray-200"><i className="fas fa-info-circle"></i> Introduction</a></li>
+      <li><a href="#getting-started" className="flex items-center py-2 text-white hover:text-gray-200"><i className="fas fa-user-plus"></i> Getting Started</a></li>
+      <li><a href="#faq" className="flex items-center py-2 text-white hover:text-gray-200"><i className="fas fa-question-circle"></i> Frequently Asked Questions</a></li>
+      <li><a href="#contact" className="flex items-center py-2 text-white hover:text-gray-200"><i className="fas fa-envelope"></i> Contact Support</a></li>
+      <li><a href="#feedback" className="flex items-center py-2 text-white hover:text-gray-200"><i className="fas fa-comments"></i> Feedback</a></li>
+    </ul>
+  </aside>
+);
+
+const MainContent = () => (
+  <main className="main-content flex-1 p-4 bg-white shadow-md">
+    <TitleSection />
+    <Section id="introduction" icon="fas fa-info-circle" title="Introduction">
+      <p>This Help Center provides resources to assist you with our services. Whether you have questions about our products or need assistance, you can find useful information here.</p>
+    </Section>
+    <Section id="getting-started" icon="fas fa-user-plus" title="Getting Started">
+      <p>New to our platform? Start by creating an account and exploring features designed to help you easily buy, sell, and find local products and services.</p>
+      <p>Discover how to connect with your community through our ads and listings, and make the most of our guides to learn how to navigate each section effectively for a seamless experience.</p>
+    </Section>
+    <Section id="faq" icon="fas fa-question-circle" title="Frequently Asked Questions">
+      <FAQItem question="What is your return policy?" answer="Our return policy allows you to return products within 30 days of receipt for a full refund." />
+      <FAQItem question="How can I contact customer support?" answer="You can contact customer support via email at [email protected] or call us at 1-800-555-0199." />
+      <FAQItem question="Do you offer technical support?" answer="Yes, we offer technical support for all our products. Please visit our support page for more information." />
+    </Section>
+    <Section id="contact" icon="fas fa-envelope" title="Contact Support">
+      <p>If you have any questions or need further assistance, please reach out to our support team:</p>
+      <ul className="list-disc ml-5">
+        <li>Email: <a href="mailto:[email protected]" className="text-blue-500">[email protected]</a></li>
+        <li>Phone: 1-800-555-0199</li>
+        <li>Chat: Available on our website from 9 AM to 5 PM EST</li>
+      </ul>
+    </Section>
+    <Section id="feedback" icon="fas fa-comments" title="Feedback">
+      <p>Your feedback is important to us! Please let us know how we can improve our services:</p>
+      <a href="/feedback-form" className="inline-block mt-2 bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Give Feedback</a>
+    </Section>
+  </main>
+);
+
+const TitleSection = () => (
+  <div className="title-section mb-8 text-center">
+    <h1 className="text-4xl font-bold text-blue-600">Help Center</h1>
+    <p className="text-lg text-gray-700 mt-2">Welcome to our Help Center! Here you can find answers to your questions and get support for our services.</p>
+  </div>
+);
+
+const Section: React.FC<SectionProps> = ({ id, icon, title, children }) => (
+  <section id={id} className="mt-8">
+    <h2 className="text-2xl font-semibold text-gray-800 flex items-center border-l-4 border-blue-600 pl-2 mb-4">
+    <i className={icon + " mr-2 text-purple-600"}></i> {title}
+    </h2>
+    {children}
+  </section>
+);
+
+const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => (
+  <div className="faq-item mb-4">
+    <div className="faq-question font-semibold">{question}</div>
+    <div className="faq-answer text-gray-700">{answer}</div>
+  </div>
+);
+
+export default HelpCenterPage;