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}>
                {/*-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/icon-image-1.png" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="content">
                                            <div className="title_18">
                                                <Link href="#">
                                                    Life Insurance
                                                </Link>
                                            </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/icon-image-2.png" alt="img" className="img-fluid" />
                                        </div>
                                        <div className="content">
                                            <div className="title_18">
                                                <Link href="#">
                                                    Health Insurance
                                                </Link>
                                            </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={25} 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/about-1-min.png" alt="img" className="img-fluid" />
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-6 col-sm-12 pd_left_30">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> About Company</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> We’re a Trusted and Professional Insurance Company </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-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Big moving companies charging premium prices for even the smallest jobs. </Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    DIY rentals like U-Haul — which meant driving oversized vans, paying for insurance add-ons, and wasting time at rental centers.</Link>
                                            </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="#" className="theme_btn">
                                        More About Us
                                        <span> <i className=" fi-rr-arrow-small-up" /></span>
                                    </Link>
                                </div>
                                {/*-============spacing==========-*/}
                                <div className="pd_bottom_70" />
                                {/*-============spacing==========-*/}
                            </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_95" />
                    {/*-============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"> Why Choose Us</h4>
                                            <div className="title_whole">
                                                <h2 className="title"> What We Do</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-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <Link className="links" href="#">
                                                                Furniture moving & pickup – IKEA, Facebook Marketplace, Costco, Home Depot… if you bought it, we’ll bring it home. </Link>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <Link className="links" href="#">
                                                                Appliance delivery – Fridges, washers, stoves, you name it.</Link>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <Link className="links" href="#">
                                                                Small moves – Perfect for apartments, dorms, and condo living.</Link>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="d-flex align-items-center">
                                                            <div className="icon trans">
                                                                <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                            <Link className="links" href="#">
                                                                Quick hauls – When a full moving truck is too much, we’re just right.</Link>
                                                        </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="#2D947A" />
                                    </svg>
                                    <div className="image one">
                                        <img src="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/choose-1-min.png" 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="https://themepanthers.com/wp/vankine/v1/wp-content/uploads/2022/12/service-8-min.jpg" 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_70" />
                    {/*-============spacing==========-*/}
                </section>
                <section className="content-section bg_light_1 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">
                                <div className="image_box_only  type_four">
                                    <div className="image">
                                        <img src="/assets/images/h3-ch-1-min.png" alt="img" className="img-fluid" />
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12">
                                <div className="section_title type_one">
                                    <h4 className="sm_title"> Amazing Company</h4>
                                    <div className="title_whole">
                                        <h2 className="title">  What Sets Us Apart</h2>
                                    </div>
                                </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-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                   We drive, you don’t. No wrestling with giant vans in city traffic. </Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                   We’re insured, always. No surprise $30/day fees like U-Haul.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    We come to you. No lineups at a rental center — we show up at your door.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Transparent pricing. The price you see is the price you pay.</Link>
                                            </div>
                                        </li>
                                        <li>
                                            <div className="d-flex align-items-center">
                                                <div className="icon trans">
                                                    <i aria-hidden="false" className="fas fa-check-circle" /></div>
                                                <Link className="links" href="#">
                                                    Fast & flexible. Same-day or next-day moves available.</Link>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/*-============spacing==========-*/}
                    <div className="pd_bottom_80" />
                    {/*-============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"> Why Choose Us</h4>
                                    <div className="title_whole">
                                        <h2 className="title"> Our Mission</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="#" className="theme_btn">
                                        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">
                                <div className="image_video_box_only  type_one mr_bottom_minus_90 z_1">
                                    <div className="image one height_530px">
                                        <img src="/assets/images/why-choose-1.png" alt="img" className="img-fluid height_530px" />
                                    </div>
                                </div>
                            </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_1 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">Company Statistics Analysis</h4>
                                    <div className="title_whole">
                                        <h2 className="title">Great Achievement For Insurance</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">
                                            <i className=" flaticon-satisfaction" /></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">
                                            <i className=" flaticon-business-people" /></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">
                                            <i className=" flaticon-presenter" /></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">
                                            <i className=" flaticon-trophy" /></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>
        </>
    )
}