import Layout from "@/components/layout/Layout"
import dynamic from 'next/dynamic'
import Link from "next/link"
import { useState } from "react"
const CounterUp = dynamic(() => import('@/components/elements/CounterUp'), {
    ssr: false,
})
export default function AboutUs() {

    const [activeIndex, setActiveIndex] = useState(1)
    const handleOnClick = (index) => {
        setActiveIndex(index)
    }
    return (
        <>
            <Layout breadcrumbTitle="About Us" footerStyle={2} background="/assets/images/about-us/about-banner.webp">
                {/*-about*/}
                <section className="about-section position-relative">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="auto-container">
                        <div className="row align-items-start">
                            <div className="col-lg-6 col-md-12">
                                <div className="image_box_only type_seven">
                                    <div className="icon_box_only type_four inline_box trans">
                                        <div className="icon">
                                            <img src="/assets/images/about-us/icons/local-moves.png" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="content">
                                            <div className="title_18">
                                                <h5>Local Moves</h5>
                                            </div>
                                        </div>
                                        <Link className="link" href="#">
                                            <svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
                                                </circle>
                                                <g clipPath="url(#clip0_117_28461)">
                                                    <path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_117_28461">
                                                        <rect width={25} height={25} fill="white" transform="translate(5)" />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </Link>
                                    </div>
                                    <div className="icon_box_only type_four position_two trans">
                                        <div className="icon">
                                            <img src="/assets/images/about-us/icons/pickups.png" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="content">
                                            <div className="title_18">
                                                <h5> 
                                                    Pickups & Delivery
                                                </h5>
                                            </div>
                                        </div>
                                        <Link className="link" href="#">
                                            <svg width={30} height={32} viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <circle cx={15} cy={17} r={15} fill="var(--color-set-two-three-6)">
                                                </circle>
                                                <g clipPath="url(#clip0_117_2846)">
                                                    <path d="M15.0757 24.3888C15.8841 25.207 17.6847 24.9358 17.8785 23.6492C19.0847 15.6614 25.1202 8.92269 29.6876 2.57279C30.954 0.813155 28.042 -0.858436 26.7921 0.88025C22.6184 6.68227 17.3578 12.7875 15.2998 19.828C12.948 17.4244 10.5867 15.0437 7.94892 12.9317C6.27842 11.5936 3.88886 13.951 5.57736 15.3031C9.01404 18.0559 11.984 21.2659 15.0757 24.3888Z" fill="var(--color-set-two-three-5)" />
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_117_2846">
                                                        <rect width={25} height={25} fill="white" transform="translate(5)" />
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </Link>
                                    </div>
                                    <div className="fun_facts type_two">
                                        <h4>

                                            <CounterUp count={3} time={1} />
                                            <small>
                                                + </small></h4>
                                        <h6 className="title_no_a_26">Years Of
                                            Experience</h6>
                                    </div>
                                    <div className="m_image">
                                        <img src="/assets/images/about-us/about-company.webp" alt="img" className="img-fluid" />
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12 col-sm-12 pd_left_80">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> About Us</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Your Hassle-Free Moving Partner</h2>
                                    </div>
                                    <p>
                                        At Zip Van, we’re rewriting the way people think about moving.
                                    </p>
                                    <p>
                                        For years, moving meant two choices:
                                    </p>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="mr_bottom_20" />
                                {/*-============spacing==========-*/}
                                <div className="position-relative">
                                    <ul className="list_box list color_two">
                                        <li>
                                            <div className="d-flex align-items-start">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <p>
                                                    Big moving companies charging premium prices for even the smallest jobs. </p>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-start">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <p>
                                                    DIY rentals like U-Haul — which meant driving oversized vans, paying for insurance add-ons, and wasting time at rental centers.</p>
                                            </div>
                                        </li>
                                    </ul>
                                    <p>
                                        We thought: there’s got to be a better way.
                                    </p>
                                    <p>
                                        So we built Zip Van — the stress-free alternative for small moves, furniture pickups, and local deliveries.
                                    </p>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_30" />
                                {/*-============spacing==========-*/}
                               <div className="theme_btn_all">
                                    <Link href="/contact" className="theme_btn big rotate">
                                        More About Us <span> <i className=" fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                    <div className="ab_img_right_bottom z_minus_1">
                        <img src="/assets/images/bg-2.png" className="img-fluid" alt="img" />
                    </div>
                </section>
                {/*-about end*/}
                <section className="content-section bg_light_2">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-8  position-relative z_2">
                                <div className="row">
                                    <div className="col-lg-9 pd_right_70">
                                        <div className="section_title type_two">
                                            <h4 className="sm_title"> We Handle Everything</h4>
                                            <div className="title_whole">
                                                <h2 className="title">Furniture, Appliances, Small Moves & More</h2>
                                            </div>
                                            {/*-============spacing==========-*/}
                                            <div className="pd_bottom_20" />
                                            {/*-============spacing==========-*/}
                                            <div className="position-relative">
                                                <ul className="list_box list color_two">
                                                    <li>
                                                        <div className="d-flex align-items-start">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <p>
                                                                Furniture moving & pickup – IKEA, Facebook Marketplace, Costco, Home Depot… if you bought it, we’ll bring it home. </p>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <p>
                                                                Appliance delivery – Fridges, washers, stoves, you name it.</p>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <p>
                                                                Small moves – Perfect for apartments, dorms, and condo living.</p>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <p>
                                                                Quick hauls – When a full moving truck is too much, we’re just right.</p>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}

                            </div>
                            <div className="col-lg-4 mr_left_minus_240">
                                <div className="image_box_only  type_one  mr_top_minus_10">
                                    <svg width={584} height={361} viewBox="0 0 584 361" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M511.94 27.9446C450.328 34.2751 426.172 86.6367 388.192 42.1471C376.849 28.8672 369.496 15.8049 356.881 7.85635C320.869 -14.8308 288.183 39.7147 254.098 21.6142C232.361 10.0692 201.495 -12.2949 160.749 11.4556C139.809 23.6643 131.75 43.9955 121.113 68.4992C98.9077 119.645 51.9621 120.301 18.0526 171.855C-10.8735 215.844 -1.72306 261.738 34.5651 282.861C76.3006 307.166 118.003 290.991 175.305 284.117C225.771 278.064 241.38 321.316 288.013 349.769C320.203 369.405 356.398 361.394 387.85 339.164C428.965 310.102 443.933 276.977 463.164 237.902C484.401 194.736 514.067 182.433 539.686 166.375C618.882 116.728 578.36 21.1282 511.94 27.9446Z" fill="#ff6600" />
                                    </svg>
                                    <div className="image one">
                                        <img src="/assets/images/about-us/why-choose-us-left.webp" width={375} height={490} decoding="async" data-src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png" alt="img" data-ll-status="loaded" className="entered litespeed-loaded" /><noscript>&lt;img width="375" height="490"
                                            decoding="async"
                                            src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png"
                                            alt="img" /&gt;</noscript></div>
                                    <div className="image two">
                                        <img src="/assets/images/about-us/why-choose-us-right.webp" width={648} height={648} decoding="async" data-src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg" alt="img" data-ll-status="loaded" className="entered litespeed-loaded" /><noscript>&lt;img width="648" height="648"
                                            decoding="async"
                                            src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg"
                                            alt="img" /&gt;</noscript></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>
                <section className="content-section bg_light_4 position-relative overflow-hidden">
                    <div className="ab_img_left_top z_0 mr_top_minus_150">
                        <img src="/assets/images/line-st-2.png" className="img-fluid" alt="img" />
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 col-md-12 pd_right_30">
                                <div className="image_box_only type_eight">
                                    <div className="pattern">
                                        <img src="/assets/images/Graphics.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="m_image">
                                        <img src="/assets/images/about-us/amazing-company.webp" className="img-fluid" alt="img" />
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                {/* <div className="pd_bottom_40" /> */}
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Why Choose Us</h4>
                                    <div className="title_whole">
                                        <h2 className="title">Safe, Simple, Fast, Flexible</h2>
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                                <div className="position-relative">
                                    <ul className="list_box list color_two">
                                        <li className="d-flex align-items-start">
                                            <div className="icon trans" style={{ minWidth: "30px", display: "flex", alignItems: "flex-start", marginTop: "4px" }}>
                                                <i aria-hidden="false" className="fas fa-check-circle" />
                                            </div>
                                            <p className="mb-0">
                                                We drive, you don’t. No wrestling with giant vans in city traffic.
                                            </p>
                                        </li>
                                        <li className="d-flex align-items-start">
                                            <div className="icon trans" style={{ minWidth: "30px", display: "flex", alignItems: "flex-start", marginTop: "4px" }}>
                                                <i aria-hidden="false" className="fas fa-check-circle" />
                                            </div>
                                            <p className="mb-0">
                                                We’re insured, always. No surprise $30/day fees like U-Haul.
                                            </p>
                                        </li>
                                        <li className="d-flex align-items-start">
                                            <div className="icon trans" style={{ minWidth: "30px", display: "flex", alignItems: "flex-start", marginTop: "4px" }}>
                                                <i aria-hidden="false" className="fas fa-check-circle" />
                                            </div>
                                            <p className="mb-0">
                                                We come to you. No lineups at a rental center — we show up at your door.
                                            </p>
                                        </li>
                                        <li className="d-flex align-items-start">
                                            <div className="icon trans" style={{ minWidth: "30px", display: "flex", alignItems: "flex-start", marginTop: "4px" }}>
                                                <i aria-hidden="false" className="fas fa-check-circle" />
                                            </div>
                                            <p className="mb-0">
                                                Transparent pricing. The price you see is the price you pay.
                                            </p>
                                        </li>
                                        <li className="d-flex align-items-start">
                                            <div className="icon trans" style={{ minWidth: "30px", display: "flex", alignItems: "flex-start", marginTop: "4px" }}>
                                                <i aria-hidden="false" className="fas fa-check-circle" />
                                            </div>
                                            <p className="mb-0">
                                                Fast & flexible. Same-day or next-day moves available.
                                            </p>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                    <div className="ab_img_right_bottom z_0">
                        <img src="/assets/images/bg-2-2.png" className="img-fluid" alt="img" />
                    </div>
                </section>
                {/*content*/}
                <section className="content-section">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Our Mission</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Making Moving Simple for Everyone</h2>
                                    </div>
                                    <p>We make moving easy, affordable, and stress-free for everyday people. No hidden costs, no complicated rentals, no waiting weeks for store delivery. Just reliable vans, helpful drivers, and a simple booking process.</p>
                                    <p>At Zip Van, we believe moving should fit your life — not the other way around.</p>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                                <div className="theme_btn_all">
                                    <Link href="/contact" className="theme_btn big rotate">
                                        Learn More <span> <i className=" fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-6 col-md-12 pd_right_30">
                                <div className="image_box_only type_eight">
                                    <div className="pattern">
                                        <img src="/assets/images/Graphics.png" className="img-fluid" alt="img" />
                                    </div>
                                    <div className="image_box_only type_ten mr_bottom_minus_100">
                                        <img src="/assets/images/about-us/our-mission.webp" className="img-fluid" alt="img" />
                                    </div>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_40" />
                                {/*-============spacing==========-*/}
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_90" />
                    {/*-============spacing==========-*/}
                </section>
                {/*content*/}
                {/*funfacts*/}
                <section className="analysis-section position-relative bg_blue overflow-hidden">
                    {/*-============spacing==========-*/}
                    <div className="pd_top_90" />
                    {/*-============spacing==========-*/}
                    <div className="ab_img_left_top z_0 mr_top_minus_150">
                        <img src="/assets/images/shape/wave-pattern-2.png" className="img-fluid" alt="img" />
                    </div>
                    <div className="medium-container-two">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section_title text-center color_white type_one">
                                    <h4 className="sm_title">Achievements at a Glance</h4>
                                    <div className="title_whole">
                                        <h2 className="title">Delivering With Care</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/*-============spacing==========-*/}
                        <div className="pd_bottom_30" />
                        {/*-============spacing==========-*/}
                        <div className="row">
                            {/* <div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" /> */}
                            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                                <div className="fun_facts type_one color_white">
                                    <div className="icon trans">
                                        <div className="icon_in trans">
                                            <img
                                                src="/assets/images/about-us/icons/customers-served.webp"
                                                alt="Satisfaction Icon"
                                                className="img-fluid"
                                            />
                                        </div>
                                    </div>
                                    <h4>

                                        <CounterUp count={1000} time={1} />
                                        <small>
                                            + </small></h4>
                                    <h6 className="title_no_a_18">Customers Served</h6>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                                <div className="fun_facts type_one color_white">
                                    <div className="icon trans">
                                        <div className="icon_in trans">
                                            <img
                                                src="/assets/images/about-us/icons/cities.webp"
                                                alt="Satisfaction Icon"
                                                className="img-fluid"
                                            />
                                        </div>
                                    </div>
                                    <h4>

                                        <CounterUp count={10} time={1} />
                                        <small>
                                            + </small></h4>
                                    <h6 className="title_no_a_18"> Cities </h6>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                                <div className="fun_facts type_one color_white">
                                    <div className="icon trans">
                                        <div className="icon_in trans">
                                            <img
                                                src="/assets/images/about-us/icons/vehicles.webp"
                                                alt="Satisfaction Icon"
                                                className="img-fluid"
                                            />
                                        </div>
                                    </div>
                                    <h4>

                                        <CounterUp count={4} time={1} />
                                        <small>
                                            + </small></h4>
                                    <h6 className="title_no_a_18">Vehicles</h6>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                            </div>
                            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                                <div className="fun_facts type_one color_white">
                                    <div className="icon trans">
                                        <div className="icon_in trans">
                                            <img
                                                src="/assets/images/about-us/icons/experience.webp"
                                                alt="Satisfaction Icon"
                                                className="img-fluid"
                                            />
                                        </div>
                                    </div>
                                    <h4>

                                        <CounterUp count={3} time={1} />
                                        <small>
                                            + </small></h4>
                                    <h6 className="title_no_a_18">Years of Experience</h6>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_20" />
                                {/*-============spacing==========-*/}
                            </div>
                            {/* <div className="col-lg-1 col-md-6 col-sm-6 col-xs-12" /> */}
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_50" />
                    {/*-============spacing==========-*/}
                    <div className="ab_img_right_bottom z_0 mr_bottom_minus_250">
                        <img src="/assets/images/shape/wave-pattern-1.png" className="img-fluid" alt="img" />
                    </div>
                </section>
                {/*funfacts*/}
            </Layout>
        </>
    )
}