💡[FEATURE]: Contact Information Section

[Swapnilden]

Is your feature request related to a problem? Please describe.

I'm always frustrated when users have difficulty finding our contact information on the "About" page. This often leads to confusion and reduces user engagement as users are unsure how to reach out for support or inquiries. The current layout does not highlight your contact details prominently, making it inconvenient for users to get in touch.

Describe the solution you'd like

I would like to add a dedicated Contact Information section towards the bottom of the "About" page. This section will clearly display your contact email and phone number, styled consistently with the rest of the page. The contact details should be easily accessible, ensuring that users can quickly find how to reach you. The email address should be a mailto link, and the phone number should be a tel link, allowing users to interact with these details seamlessly.

Describe alternatives you've considered

• Placing Contact Information in the Footer: Instead of adding a dedicated section on the "About" page, placing contact details in the footer of every page. However, this could clutter the footer and might not be as prominently visible as a dedicated section.

• Using a Contact Form: Implementing a contact form on the "About" page where users can directly submit their inquiries. This adds complexity and requires more maintenance compared to displaying simple contact details.

• Including Contact Info in a Sidebar: Adding a sidebar with contact information on the "About" page. This could impact the page layout and user experience, especially on mobile devices.

Additional context

Adding a Contact Information section will not only improve user experience but also enhance the professionalism of your website. Users will appreciate the easy access to support and inquiries, potentially increasing engagement and satisfaction.

Example Layout:

import React from 'react';
import { Nav } from "@/components/Nav";
import Footer from '@/components/Footer';

const About: React.FC = () => {
  return (
    <div className="relative">
      <Nav />
      <div className="container mx-auto p-6 max-w-[48rem]"> {/* Added max-w-lg for reducing the box size */}
        <h1 className="text-4xl font-bold mb-6 text-center">About <span className="bg-[#8abf83] rounded px-2">Us</span></h1>

        <h2 className="text-2xl text-center font-semibold mb-4">Welcome to ScrapQuest!</h2>
        <p className="mb-6">
          At ScrapQuest, we make data extraction from websites effortless and efficient. Our cutting-edge solution is designed to help you quickly gather valuable information from any website without the usual hassle and complications.
        </p>

        <h2 className="text-2xl text-center font-semibold mb-4">Our Mission</h2>
        <p className="mb-6">
          Our mission is to simplify the process of web scraping, making it accessible and straightforward for everyone. Whether you're a business looking to gain insights, a researcher needing data for your projects, or a developer seeking to integrate web data into your applications, ScrapQuest is here to help.
        </p>

        <h2 className="text-2xl text-center font-semibold mb-4">What We Do</h2>
        <p className="mb-6">
          ScrapQuest offers a powerful and intuitive platform for web scraping. Our solution allows users to easily and quickly collect data from any website. We focus on providing a seamless experience that minimizes the technical complexities of data extraction, enabling users to obtain the information they need with ease.
        </p>

        <h2 className="text-center text-2xl font-semibold mb-4">Contact Us</h2>
        <p className="mb-6">
          Have questions or need support? Feel free to reach out to our team. We're here to help you get the most out of ScrapQuest.
        </p>

        <div className="text-center">
          <p>Email: <a href="mailto:[email protected]" className="text-blue-600">[email protected]</a></p>
          <p>Phone: <a href="tel:+123456789" className="text-blue-600">+1 234 567 89</a></p>
        </div>

        {/* Optional: Footer Component */}
        <Footer />
      </div>
    </div>
  );
}

export default About;