"use client";
import Link from "next/link";

function PackageOne() {
  return (
    <div>
      <section className="package-one">
        <div className="about-six-shape-1" />
        <div className="about-six-shape-2" />
        <div className="container">
          <div className="package-one-title-box">
            <div
              className="section-four-title text-center wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="section-four-title-title">
                <h2>Choose The Best Package For SEO Camping</h2>
              </div>
            </div>
            <div
              className="section-four-details text-center wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>
                Digital marketing &amp; advertising approach focuses on
                capturing the essential
              </p>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div
                className="package-one-single wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="500ms"
              >
                <div className="package-one-single-icon">
                  <i className="icon-data-research1" />
                </div>
                <div className="package-one-single-title">
                  <h3>Basic Plan</h3>
                </div>
                <div className="package-one-single-detail">
                  <p>At vero eot accusae dignissimos ducimus blanditiis</p>
                </div>
                <ul className="package-one-single-list">
                  <li>
                    <i className="icon-plus" />
                    <p>Get The Basic Essentials</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Advanced security</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Unlimited unposted sites</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Quality Performance</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Live support</p>
                  </li>
                </ul>
                <div className="package-one-single-price">
                  <h2>
                    $25<span>/ Per month</span>
                  </h2>
                </div>
                <div className="package-one-single-btn">
                  <Link href="/package" className="main-btn-four thm-btn">
                    Choose Package
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div
                className="package-one-single wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <div className="package-one-single-icon">
                  <i className="icon-mission1" />
                </div>
                <div className="package-one-single-title">
                  <h3>Standard Plan</h3>
                </div>
                <div className="package-one-single-detail">
                  <p>At vero eot accusae dignissimos ducimus blanditiis</p>
                </div>
                <ul className="package-one-single-list">
                  <li>
                    <i className="icon-plus" />
                    <p>Get The Basic Essentials</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Advanced security</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Unlimited unposted sites</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Quality Performance</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Live support</p>
                  </li>
                </ul>
                <div className="package-one-single-price">
                  <h2>
                    $39<span>/ Per month</span>
                  </h2>
                </div>
                <div className="package-one-single-btn">
                  <Link href="/package" className="main-btn-four thm-btn">
                    Choose Package
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-12 col-sm-12">
              <div
                className="package-one-single wow fadeInLeft animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <div className="package-one-single-icon">
                  <i className="icon-diamond1-1" />
                </div>
                <div className="package-one-single-title">
                  <h3>Premium Plan</h3>
                </div>
                <div className="package-one-single-detail">
                  <p>At vero eot accusae dignissimos ducimus blanditiis</p>
                </div>
                <ul className="package-one-single-list">
                  <li>
                    <i className="icon-plus" />
                    <p>Get The Basic Essentials</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Advanced security</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Unlimited unposted sites</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Quality Performance</p>
                  </li>
                  <li>
                    <i className="icon-plus" />
                    <p>Live support</p>
                  </li>
                </ul>
                <div className="package-one-single-price">
                  <h2>
                    $98<span>/ Per month</span>
                  </h2>
                </div>
                <div className="package-one-single-btn">
                  <Link href="/package" className="main-btn-four thm-btn">
                    Choose Package
                    <i className="icon-right-arrow" />
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default PackageOne;
