import Footer3 from "@/components/footers/Footer3";
import Header4 from "@/components/headers/Header4";
import About from "@/components/otherPages/About";
import React from "react";
import Link from "next/link";

export const metadata = {
  title: "About || Keystone Solutions",
  description:
    "Keystone Solutions - Your trusted BPO partner for global excellence and specialized data solutions",
};

export default function AboutPage() {
  return (
    <>
      <div className="primary-3">
        <div className="wrap-page-header">
          <Header4 />

          {/* Page Title Section */}
          <section className="page-title tf-spacing-47 bg-color-1">
            <div className="tf-container">
              <div className="row">
                <div className="col-12">
                  {/* Breadcrumb */}
                  <div className="breadcrumb-trail mb-3">
                    <Link href="/" className="home-link text-body-2 text-dark">
                      Home
                    </Link>
                    <span className="separator text-body-2 mx-2">&gt;</span>
                    <span className="current-page text-body-2 text-primary">About Us</span>
                  </div>

                  {/* Page Title */}
                  <div className="page-title-content">
                    <h1 className="page-title-main display-4 mb-3">
                      About Keystone Solutions
                    </h1>
                    <p className="page-subtitle text-body-1 mb-0">
                      Discover our journey, mission, and commitment to delivering
                      world-class business process outsourcing solutions.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <div className="main-content style-1">
          <About />
        </div>
      </div>
      
      <Footer3 />
    </>
  );
}