diff --git a/scruter-nextjs/app/(routes)/contactus/page.tsx b/scruter-nextjs/app/(routes)/contactus/page.tsx new file mode 100644 index 00000000..7c40c7f3 --- /dev/null +++ b/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 ( +
+ ); +}; + +const Sidebar = () => ( + +); + +const Section: React.FC = ({ id, icon, title, children }) => ( +
+

+ {title} +

+
{children}
+
+); + +const ContactForm = () => { + const handleSubmit = (event: React.FormEvent) => { + 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 ( +
+

+ Send a Message +

+
+ + + + + + + + + + +
+
+ ); +}; + +const ContactPage = () => ( +
+ + +
+
+

Contact Us

+

We’d love to hear from you! Reach out with any questions, feedback, or just to say hello.

+
+ +
+

If you have any inquiries, please contact us at:

+

Email: support@scruter.com

+

Phone: (123) 456-7890

+

Address: 123 Main St, Springfield, USA

+
+ +
+

Our customer support team is available Monday through Friday, 9:00 AM - 5:00 PM. For urgent inquiries, please contact us by phone.

+
+ +
+

Follow us on social media to stay updated with the latest news:

+ +
+ +
+

Scruter Headquarters

+

123 Main Street, Suite 100

+

City, State, ZIP Code

+
+ + +
+
+); + +export default ContactPage; diff --git a/scruter-nextjs/app/(routes)/faq/page.tsx b/scruter-nextjs/app/(routes)/faq/page.tsx new file mode 100644 index 00000000..9979ed03 --- /dev/null +++ b/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 = ({ id, icon, title, children }) => ( +
+

+ {title} +

+

{children}

+
+); + +// Sidebar component +const Sidebar = () => ( + +); + +// 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 ( +
+
+ +
+
+

Frequently Asked Questions

+

Find answers to the most common questions about using Scruter.

+
+ +
+ Scruter is a local classifieds platform where users can buy, sell, and exchange services within their community. +
+ +
+ To create an account, click on the "Sign Up" button and fill out the registration form with your details. +
+ +
+ Once you are logged in, navigate to the "Post Ad" section, fill in the necessary information, and submit your ad. +
+ +
+ Scruter accepts various payment methods, including credit/debit cards and online payment services. +
+ +
+ You can reach out to our support team via the "Contact Us" section on our website or email us at support@scruter.com. +
+ +
+ If you forget your password, click on the "Forgot Password?" link on the login page and follow the instructions to reset it. +
+ +
+ To delete your account, please contact our support team, and they will assist you with the process. +
+ +
+ If you encounter any issues, please refer to the "Help Center" or contact support for assistance. +
+ +
+ Yes, you can edit your ad by going to your account settings and selecting the ad you wish to modify. +
+ +
+ You can report a user or ad by clicking the "Report" button located next to the ad or user profile. +
+
+
+ ); +}; + +export default FAQPage; diff --git a/scruter-nextjs/app/(routes)/help/page.tsx b/scruter-nextjs/app/(routes)/help/page.tsx new file mode 100644 index 00000000..d1c1bb99 --- /dev/null +++ b/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 ( +
+
+
+ + +
+
+ ); +}; + +const Sidebar = () => ( + +); + +const MainContent = () => ( +
+ +
+

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.

+
+
+

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.

+

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.

+
+
+ + + +
+
+

If you have any questions or need further assistance, please reach out to our support team:

+
    +
  • Email: support@example.com
    • +
  • Phone: 1-800-555-0199
    • +
  • Chat: Available on our website from 9 AM to 5 PM EST
    • +
+
+
+

Your feedback is important to us! Please let us know how we can improve our services:

+ Give Feedback +
+
+); + +const TitleSection = () => ( +
+

Help Center

+

Welcome to our Help Center! Here you can find answers to your questions and get support for our services.

+
+); + +const Section: React.FC = ({ id, icon, title, children }) => ( +
+

+ {title} +

+ {children} +
+); + +const FAQItem: React.FC = ({ question, answer }) => ( +
+
{question}
+
{answer}
+
+); + +export default HelpCenterPage; diff --git a/scruter-nextjs/app/(routes)/policy/page.tsx b/scruter-nextjs/app/(routes)/policy/page.tsx new file mode 100644 index 00000000..985817f0 --- /dev/null +++ b/scruter-nextjs/app/(routes)/policy/page.tsx @@ -0,0 +1,84 @@ +"use client"; + +import '../../globals.css'; // Make sure to import your Tailwind styles + +const PolicyPage: React.FC = () => { + return ( +
+ + +
+ ); +}; + +const Sidebar: React.FC = () => ( + +); + +const MainContent: React.FC = () => ( +
+ +
+

Welcome to our Privacy Policy page. We are committed to protecting your personal data and your right to privacy. This policy outlines how we handle your information when you visit our website, engage with our services, and make use of our products.

+
+
+

We may collect personal information such as your name, email address, phone number, and payment information when you use our services. Additionally, we gather data on your usage of our website, including your IP address, browser type, and access times, to help us improve our services.

+

We also collect data through cookies and similar technologies to enhance your user experience.

+
+
+

Your information helps us to provide better services, including:

+
    +
  • Enhancing user experience through personalized content.
    • +
  • Improving our website's functionality and services based on user feedback.
    • +
  • Communicating with you about updates, promotions, and news related to our services.
    • +
  • Processing transactions and sending you related information, including purchase confirmations and invoices.
    • +
+
+
+

We take appropriate security measures to protect your personal information from unauthorized access, alteration, disclosure, or destruction. We regularly review our practices to ensure data security and compliance with applicable laws and regulations.

+

We limit access to your personal information to those employees, agents, contractors, and other third parties who have a business need to know. They will only process your personal data on our instructions and are subject to a duty of confidentiality.

+
+
+

You have the right to request access to the personal information we hold about you. You may also request correction or deletion of your personal data in certain circumstances. Additionally, you have the right to object to or restrict the processing of your data.

+

If you wish to exercise any of these rights, please contact us using the details provided below.

+
+
+

Our website uses cookies to enhance your browsing experience. Cookies are small files placed on your device to help us recognize your browser and capture certain information. You can choose to accept or decline cookies through your browser settings.

+

By using our website, you consent to our use of cookies in accordance with this policy.

+
+
+

We may employ third-party companies and services to facilitate our services or to provide our services on our behalf. These third parties may have access to your personal data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.

+
+
+

We may update our privacy policy from time to time. We will notify you of any changes by posting the new policy on this page. You are advised to review this privacy policy periodically for any changes.

+

Changes to this privacy policy are effective when they are posted on this page.

+
+
+); + +const TitleSection: React.FC = () => ( +
+

Privacy Policy

+

Your privacy is important to us. This privacy policy explains how we collect, use, and protect your information.

+
+); + +const Section: React.FC<{ id: string; icon: string; title: string; children: React.ReactNode }> = ({ id, icon, title, children }) => ( +
+

{title}

+ {children} +
+); + +export default PolicyPage; diff --git a/scruter-nextjs/app/(routes)/support/page.tsx b/scruter-nextjs/app/(routes)/support/page.tsx new file mode 100644 index 00000000..8796942e --- /dev/null +++ b/scruter-nextjs/app/(routes)/support/page.tsx @@ -0,0 +1,110 @@ +"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; +} + +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 ( +
+ ); +}; + +const Sidebar = () => ( + +); + +const Section: React.FC = ({ id, icon, title, children }) => ( +
+

+ {title} +

+
{children}
+
+); + +const SupportPage = () => ( +
+ + +
+
+

Support Page

+

We're here to help! Browse our resources or reach out for assistance.

+
+ +
+

Here are some common questions we receive from users:

+
+
How do I reset my password?
+
To reset your password, go to the login page and click on "Forgot Password." Follow the instructions to reset your password.
+
Where can I find my order history?
+
You can find your order history in your account dashboard under "Order History."
+ {/* Add more FAQs as needed */} +
+
+ +
+

If you need further assistance, please contact our support team:

+
Support Email:
+
support@example.com
+
+ +
+

Your feedback is important to us! Please let us know how we can improve our services.

+ Send Feedback +
+ +
+

Explore our resources to help you navigate our services:

+ +
+ +
+

If you're experiencing issues, check our troubleshooting guide:

+
    +
  • Clear your browser's cache and cookies.
    • +
  • Ensure your browser is updated to the latest version.
    • +
  • Disable any browser extensions that may interfere with the website.
    • +
+
+
+
+); + +export default SupportPage; diff --git a/scruter-nextjs/components/common/footer.tsx b/scruter-nextjs/components/common/footer.tsx index e9a1b979..169768df 100644 --- a/scruter-nextjs/components/common/footer.tsx +++ b/scruter-nextjs/components/common/footer.tsx @@ -19,10 +19,10 @@ const Links = [ ]; const Helpdesk = [ - { name: 'HelpCenter', id: 1, href: '/HelpCenter' }, - { name: 'FAQ', id: 2, href: '/FAQ' }, - { name: 'ContactUs', id: 3, href: '/ContactUs' }, - { name: 'Support', id: 4, href: '/Support' }, + { name: 'HelpCenter', id: 1, href: '/help' }, + { name: 'FAQ', id: 2, href: '/faq' }, + { name: 'ContactUs', id: 3, href: '/contactus' }, + { name: 'Support', id: 4, href: '/support' }, ]; const Footer = () => {