export default function AboutPage() {
    return (
        <>
        <section
          className="hero-remodel-section"
          style={{ backgroundImage: "url(./assets/images/aboutback.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">About Us</span>
                  <h1 className="hero-remodel-title">
                    Building Tomorrow's Homes Today
                  </h1>
                  <p className="hero-remodel-text">
                    Where luxury construction meets intelligent living. We create
                    extraordinary spaces that redefine modern living through
                    innovation and craftsmanship.{" "}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="about-section py-5">
          <div className="container">
            <div className="row align-items-center">
              {/* LEFT CONTENT */}
              <div className="col-lg-6">
                <div>
                  <span className="tag">What this Gives you</span>
                  <h2 style={{ color: "black" }}>
                    About <span>HouseCoin</span>{" "}
                  </h2>
                </div>
                <p className="section-desc">
                  HouseCoin is a premium construction and smart home company dedicated
                  to creating exceptional living spaces that blend luxury with
                  cutting-edge technology. For over 15 years, we've been at the
                  forefront of architectural innovation.
                </p>
                <p className="section-desc marginabout">
                  Our team of expert architects, engineers, and craftsmen work in
                  harmony to transform your vision into reality, ensuring every detail
                  reflects your lifestyle and aspirations.
                </p>
                <div className="features d-flex gap-4 mt-3">
                  <div className="feature-item">
                    <img src="assets/images/tickabout.svg" alt="" /> Premium Quality
                  </div>
                  <div className="feature-item">
                    <img src="assets/images/tickabout.svg" alt="" /> Smart Technology
                  </div>
                </div>
              </div>
              {/* RIGHT IMAGES */}
              <div className="col-lg-6">
                <div className="row g-3 align-items-end">
                  <div className="col-6">
                    <img
                      src="assets/images/Aboutleft.png"
                      className="img-fluid rounded custom-img small-img"
                      alt=""
                    />
                  </div>
                  <div className="col-6">
                    <img
                      src="assets/images/Aboutright.png"
                      className="img-fluid rounded custom-img large-img"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="kitchen-transform-section pillars-section">
          <div className="container">
            {/* Heading */}
            <div className="row">
              <div className="col-12 text-center">
                <div className="services-top">
                  <div style={{ width: "100%" }}>
                    <span className="tag">Values Shape&nbsp;Everything.</span>
                    <h2>
                      Guiding principles that <span> drive our excellence</span>
                    </h2>
                  </div>
                </div>
              </div>
            </div>
            {/* Cards */}
            <div className="row g-4 justify-content-center">
              {/* Card 1 */}
              <div className="col-lg-4 col-md-6">
                <div className="pillar-card">
                  <div className="stepnumber">Mission </div>
                  <div className="icon-box">
                    <img src="assets/images/icons/mission.svg" alt="" />
                  </div>
                  <h5>Focused on Impact</h5>
                  <p>
                    Our mission is to deliver high-quality, transparent, and
                    technology-driven construction solutions that create meaningful
                    living spaces.
                  </p>
                </div>
              </div>
              {/* Card 2 */}
              <div className="col-lg-4 col-md-6">
                <div className="pillar-card">
                  <div className="stepnumber">Vision </div>
                  <div className="icon-box">
                    <img src="assets/images/icons/vision.svg" alt="" />
                  </div>
                  <h5>Future of Smart Living</h5>
                  <p>
                    Our vision is to redefine modern homes through innovation, smart
                    technology, and premium design experiences.
                  </p>
                </div>
              </div>
              {/* Card 3 */}
              <div className="col-lg-4 col-md-6">
                <div className="pillar-card">
                  <div className="stepnumber">Goals</div>
                  <div className="icon-box">
                    <img src="assets/images/icons/goal.svg" alt="" />
                  </div>
                  <h5>Driven by Growth</h5>
                  <p>
                    We aim to scale innovation, deliver consistent quality, and ensure
                    long-term client satisfaction across every project.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="core-values py-5">
          <div className="container text-center">
            <div className="services-top">
              <div style={{ width: "100%" }}>
                <span className="tag">Core Values</span>
                <h2>
                  The foundation of <span>everything we do</span>
                </h2>
              </div>
            </div>
            <div className="row align-items-center">
              {/* LEFT SIDE */}
              <div className="col-lg-4">
                <div className="value-box rightside mb-5">
                  <div className="icon-box">
                    <img src="assets/images/icons/Automated.svg" alt="" />
                  </div>
                  <h5>Quality Assured</h5>
                  <p>
                    We never compromise on quality, ensuring every project meets the
                    highest standards.
                  </p>
                </div>
                <div className="value-box rightside">
                  <div className="icon-box">
                    <img src="assets/images/icons/Automated.svg" alt="" />
                  </div>
                  <h5>Innovation First</h5>
                  <p>
                    Embracing cutting-edge technology and smart home solutions for
                    modern living.
                  </p>
                </div>
              </div>
              {/* CENTER IMAGE */}
              <div className="col-lg-4 mb-4 mb-lg-0">
                <img
                  src="assets/images/Core.png"
                  className="img-fluid rounded main-img"
                  alt=""
                />
              </div>
              {/* RIGHT SIDE */}
              <div className="col-lg-4">
                <div className="value-box rightleft mb-5">
                  <div className="icon-box">
                    <img src="assets/images/icons/Automated.svg" alt="" />
                  </div>
                  <h5>Client Focused</h5>
                  <p>
                    Your vision is our mission. We build relationships alongside
                    structures with trust always.
                  </p>
                </div>
                <div className="value-box rightleft">
                  <div className="icon-box">
                    <img src="assets/images/icons/Automated.svg" alt="" />
                  </div>
                  <h5>Sustainable Growth</h5>
                  <p>
                    Eco-friendly practices and sustainable materials for a better
                    tomorrow future growth vision.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="smart-home">
          <div className="container">
            <div className="row align-items-center">
              {/* LEFT IMAGES */}
              <div className="col-lg-6">
                <div className="row g-3">
                  <div className="col-6">
                    <img
                      src="assets/images/abtleft.png"
                      className="img-fluid rounded smart-img small-img"
                      alt=""
                    />
                  </div>
                  <div className="col-6">
                    <img
                      src="assets/images/abtright.png"
                      className="img-fluid rounded smart-img large-img"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              {/* RIGHT CONTENT */}
              <div className="col-lg-6 wraptrack">
                <h2 className="section-title mb-3">Smart Home Technology</h2>
                <p className="section-desc mb-4">
                  We integrate the latest smart home technology into every project,
                  ensuring your home is not just beautiful, but intelligent and
                  efficient.
                </p>
                <div className="feature-box mb-3">
                  <h6>Energy Management</h6>
                  <p>
                    Advanced systems that optimize energy consumption and reduce
                    costs.
                  </p>
                </div>
                <div className="feature-box mb-3">
                  <h6>Automated Systems</h6>
                  <p>
                    Control lighting, climate, security, and entertainment with ease.
                  </p>
                </div>
                <div className="feature-box">
                  <h6>Advanced Security</h6>
                  <p>State-of-the-art security systems for complete peace of mind.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </>
      
    );
  }