Housecoins_next/app/process/page.jsx

import Contact from "@/component/Contact"
export default function ProcessPage() {
  return (
<>
  <section
    className="hero-remodel-section ourprocesswraptop"
    style={{ backgroundImage: "url(./assets/images/ourprocessback.png)" }}
  >
    <div className="container">
      <div className="row align-items-end">
        <div className="col-lg-6">
          <div className="hero-remodel-content">
            <span className="hero-remodel-subtitle">Process</span>
            <h1 className="hero-remodel-title">Our Process</h1>
            <p className="hero-remodel-text">
              From initial consultation to final handover, we guide you through
              every step with transparency, expertise, and dedication to
              excellence.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section className="processwrap-section">
    <div className="container">
      <div className="text-center services-top">
        <div style={{ width: "100%" }}>
          <h2 className="processwrap-title">
            A Seamless Path to <span>Exceptional Living</span>
          </h2>
          <p className="processwrap-subtitle">
            From concept to completion, Housecoin delivers a refined,
            transparent journey— where every detail is planned and executed
            flawlessly.
          </p>
        </div>
      </div>
      <div className="processwrap-timeline processdown">
        <div className="bottonarrow" />
        <div className="row align-items-center processwrap-item paddprocesswith">
          <div className="col-md-6 left">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Consultation
              </h5>
              <p>We start by understanding your vision, needs, and budget.</p>
              <span className="number">01</span>
            </div>
          </div>
          <div className="col-md-6" />
        </div>
        <div className="row align-items-center processwrap-item">
          <div className="col-md-6" />
          <div className="col-md-6 right">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Design
              </h5>
              <p>Our team creates detailed plans and 3D visualizations.</p>
              <span className="number">02</span>
            </div>
          </div>
        </div>
        <div className="row align-items-center processwrap-item">
          <div className="col-md-6 left">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Planning
              </h5>
              <p>We finalize materials, timeline, and project scope.</p>
              <span className="number">03</span>
            </div>
          </div>
          <div className="col-md-6" />
        </div>
        <div className="row align-items-center processwrap-item">
          <div className="col-md-6" />
          <div className="col-md-6 right">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Construction
              </h5>
              <p>Skilled craftsmen bring your vision to life.</p>
              <span className="number">04</span>
            </div>
          </div>
        </div>
        <div className="row align-items-center processwrap-item">
          <div className="col-md-6 left">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Quality Check
              </h5>
              <p>Rigorous inspection ensures perfect execution.</p>
              <span className="number">05</span>
            </div>
          </div>
          <div className="col-md-6" />
        </div>
        <div className="row align-items-center processwrap-item">
          <div className="col-md-6" />
          <div className="col-md-6 right">
            <div className="processwrap-card">
              <h5>
                <div className="imagwrap">
                  <img src="assets/images/icons/Master.svg" alt="" />
                </div>
                Deliver
              </h5>
              <p>
                We hand over a finished space ready for you to live and grow.
              </p>
              <span className="number">06</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section className="process-sectionbottom">
    <div className="container">
      {/* Heading */}
      <div className="row ">
        <div className="services-top">
          <div>
            <h2>
              Why Our Process <span>Works</span>
            </h2>
            <p className="text-muted">
              We've refined our approach over years of delivering <br />{" "}
              exceptional results for our clients.
            </p>
          </div>
        </div>
      </div>
      {/* Cards */}
      <div className="row g-4">
        {/* 01 */}
        <div className="col-md-3">
          <div className="process-cardwrap">
            <span className="number">01</span>
            <h5>Transparency</h5>
            <img
              src="assets/images/Transparencyprocess.png"
              className="img-fluid"
            />
            <p>
              Stay informed at every stage with regular updates and open
              dialogue.
            </p>
          </div>
        </div>
        {/* 02 */}
        <div className="col-md-3">
          <div className="process-cardwrap">
            <span className="number">02</span>
            <h5>Expert Craftsmanship</h5>
            <img src="assets/images/expert.png" className="img-fluid" />
            <p>
              Our team of experienced professionals ensures exceptional quality.
            </p>
          </div>
        </div>
        {/* 03 */}
        <div className="col-md-3">
          <div className="process-cardwrap">
            <span className="number">03</span>
            <h5>On-Time Delivery</h5>
            <img src="assets/images/Delivery.png" className="img-fluid" />
            <p>
              We respect your time and deliver projects within agreed timelines.
            </p>
          </div>
        </div>
        {/* 04 */}
        <div className="col-md-3">
          <div className="process-cardwrap">
            <span className="number">04</span>
            <h5>Budget Friendly</h5>
            <img src="assets/images/Budget.png" className="img-fluid" />
            <p>No hidden costs, just honest pricing and great value.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <Contact/>
</>

  );
}