@extends('layout.new_master')
@section("title", "Our story, focus and A-team")
@section("meta-title", "Our story, focus and A-team")
@section("description", "Cápita Works is the most important virtual assistance company in LATAM, backed by over 10 years of experience, a clean track record, and a team of hundreds of trusted professionals.")
@section("keywords", "Delegate, Manage, EO, Fundacion Esperanza Contigo, Entrepreneur Organization, Hire a virtual assistant")
@section("image", asset('images/backgrounds/OurStory_background.png'))

@section('content')
	@include('layout.new_nav')
	@include('templates.section', [
        "image" => "ourstory",
        "title" => "OUR STORY",
        "aligntext" => "max-w-1000"
    ])
	<div class="container">
		@include("templates.section-description",[
            "title" => "Let’s keep it simple.",
            "description" => "As a long-life management consultant professional and a serial entrepreneur running successful businesses in the USA and Latin America, I am blessed with the opportunity and challenge of leading diverse teams across different industries and locations… <br><br>
            We all know how salaries in the United States have consistently increased over the years; SMEs struggle to survive and grow, and entrepreneurs need more help than ever to keep up with the constantly evolving business environment, having to deal with unexpected challenges like the pandemic, the great resignation, quiet quitting, and an economic recession. <br><br>
            Additionally, offshoring talent and outsourcing work to places like the Philippines or India are not enough or convenient anymore. Most of our clients have moved away from <a class='text-dark' href=".route('nearshoring.index')."><u>offshoring to nearshoring</u></a> as soon as they discovered us. <br><br>
            I honestly believe you’ll love working with Cápita Works, a staffing partner for American entrepreneurs that will help you save money by accessing highly qualified talent across Latin America with the confidence of dealing with a professional organization that will be by your side every step of the way."
        ])
	</div>
    <div class="container-flex d-flex justify-content-end">
        <!-- LG -->
		<div class="row mx-0 d-none d-lg-flex justify-content-end">
            <div class="offset-1 col-7 d-flex align-items-end justify-content-end">
                <div class="row h-100">
                    <div class="col-lg-12 px-md-5 bg-orange rounded-pill-top-left-5r d-flex align-items-center justify-content-center">
                        <div class="pl-5">
                            <p class="display-4 fw-900 text-white futura-bold">MY NAME IS <br> ADRIÁN J.ROMERO</p>
                            <p class="fs-5 font-weight-bold m-0 text-white mb-3">CEO and founder of Cápita Works, and I want you to access a world of resources, at a fraction of the cost.</p>
                            <a href="https://www.linkedin.com/in/ajromerogs/" class="text-white h4"><u>Connect with me on <i class="fab fa-linkedin fa-lg ml-1"></i></u></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4 px-0 bg-orange">
                <img class="img-fluid" src="{{asset('images/Adrian_Romero.png')}}" alt="Adrian Romero">
            </div>
        </div>
         <!-- Mobile o más -->
        <div class="row mx-0 d-lg-none d-flex">
            <div class="col-12 p-5 bg-orange d-flex align-items-center justify-content-center">
                <div>
                    <p class="display-4 fw-900 text-white futura-bold">MY NAME IS <br> ADRIÁN J.ROMERO</p>
                    <p class="fs-5 font-weight-bold m-0 text-white mb-3">CEO and founder of Cápita Works, and I want you to access a world of resources, at a fraction of the cost.</p>
                    <a href="https://www.linkedin.com/in/ajromerogs/" class="text-white h5"><u>Connect with me on</u> <i class="fab fa-linkedin fa-lg ml-1"></i></a>
                </div>
            </div>
            <div class="col-12 px-0 bg-orange">
                <img class="img-fluid w-100" src="{{asset('images/Adrian_Romero.png')}}" alt="Adrian Romero">
            </div>
        </div>
    </div>
    @include("templates.team",[
        "bgcolors" => ["bg-yellow-capita","bg-orange","bg-pink","bg-purple"],
        "team" => [
            [
                "name" => "Adrián J. Romero",
                "departamento" => "Founder / CEO",
                "image" => "team_AJR.png"
            ],
            [
                "name" => "Barbra Muñoz",
                "departamento" => "Partner / COO",
                "image" => "team_BarbraM.jpg"
            ],                
            [
                "name" => "José Armando Villalobos",
                "departamento" => "In-house Counsel",
                "image" => "team_Jose_Armando_Villalobos.png"
            ],  
            [
                "name" => "Karla Sánchez",
                "departamento" => "Admin & Finance",
                "image" => "team_Karla_Sanchez.png"
            ],
            [
                "name" => "Chloe Geoffroy",
                "departamento" => "Business Development",
                "image" => "team_Choloe_Geoffroy.png"

            ],
            [
                "name" => "Mónica Barros",
                "departamento" => "Business Development",
                "image" => "team_Monica_Barros.png"
            ],
            [
                "name" => "Oriana Escalante",
                "departamento" => "Human Resources",
                "image" => "team_OrianaE.jpg"
            ],
            [
                "name" => "Alejandra Loya",
                "departamento" => "Client Success",
                "image" => "team_Alejandra_Loya.png"
            ],
            
        ]
    ])
    @include("templates.our_focus")
    <div class="container">
        <div class="row">
            <div class="col border-bottom border-dark text-center">
                <p class="fs-1 fw-900 mb-5 mt-md-5 futura-bold">Our Core Values</p>
            </div>
        </div>
        <div class="row text-center mt-5 futura-bold">
            <div class="col-6 col-lg-3 d-grid">
                <div class="align-self-end justify-content-center">
                    <img class="mb-4 img-fluid w-50" src="{{asset('images/our_core_values1.svg')}}" alt="">
                    <p class="fs-4 fw-900">“Can Do” <br> Attitude</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 d-grid">
                <div class="align-self-end justify-content-center">
                    <img class="mb-1 img-fluid w-75" src="{{asset('images/our_core_values2.svg')}}" alt="">
                    <p class="mb-lg-5 mb-sm-0 fs-4 fw-900">We've Got Your Back</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 d-grid">
                <div class="align-self-end justify-content-center">
                    <img class="mb-4 img-fluid w-50" src="{{asset('images/our_core_values3.svg')}}" alt="">
                    <p class="fs-4 fw-900">10x <br> Mindset</p>
                </div>
            </div>
            <div class="col-6 col-lg-3 d-grid">
                <div class="align-self-start justify-content-center">
                    <img class="mb-4 img-fluid w-50" src="{{asset('images/our_core_values4.svg')}}" alt="">
                    <p class="fs-4 fw-900">Always <br> Evolving</p>
                </div>
            </div>
        </div>
    </div>
    <!-- MD -->
    <div class="city vh-70 mt-5 text-white d-none d-md-block">
        <div class="container h-50 d-flex px-0">
            <div class="row align-self-center mx-0">
                <div class="col-12 col-md-6">
                    <h1 class="display-6 fw-900 futura-bold">How does our <br> typical client look?</h1>
                    <hr width="2" size="500"  class="mt-5 position-absolute hr-vertical">
                </div>
                <div class="col-12 col-md-6">
                    <p class="fs-6 font-weight-light">We get hired by many types of companies, from solopreneurs and one-man-shows, to start ups and mid-sized businesses looking to expand.
                        But, if we were to describe the majority of our clients, it would look something like this:</p>
                </div>
            </div> 
        </div>
        <div class="container futura-bold">
            <div class="row font-weight-bold vh-70">
                <div class="col-3 bg-yellow-capita">
                    <div class="p-3">
                        <p class="display-3 fw-900">4.7</p>
                        <p class="fs-2">Years in <br> business</p>
                    </div>
                </div>
                <div class="col-3 bg-orange">
                    <div class="p-3">
                        <div class="row">
                            <div class="col-8 px-0">
                                <p class="display-3 fw-900">2-6</p>
                            </div>
                            <div class="col-4 align-self-center d-flex pl-0">
                                <span class="fs-2 lh-1">mil USD</span>
                            </div>
                        </div>
                        <p class="fs-2">Annual <br> revenue</p>
                    </div>
                </div>
                <div class="col-3 bg-pink">
                    <div class="p-3">
                        <p class="display-3 fw-900">25</p>
                        <p class="fs-2">Average <br> headcount</p>
                    </div>
                </div>
                <div class="col-3 bg-purple">
                    <div class="p-3">
                        <p class="display-3 fw-900">USA</p>
                        <p class="fs-2">Based</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mobile a SM -->
    <div class="city mt-5 text-white d-block d-md-none pt-5">
        <div class="container d-flex px-0">
            <div class="row align-self-center mx-0">
                <div class="col-12 col-md-6">
                    <h1 class="display-6 fw-900 futura-bold">How does our <br> typical client look?</h1>
                </div>
                <div class="col-12 col-md-6">
                    <p class="fs-6 font-weight-light">We get hired by many types of companies, from solopreneurs and one-man-shows, to start ups and mid-sized businesses looking to expand. <br> 
                        But, if we were to describe the majority of our clients, it would look something like this:</p>
                </div>
            </div> 
        </div>
        <div class="container-flex futura-bold">
            <div class="row font-weight-bold mx-0">
                <div class="col-12 col-md-3 bg-yellow-capita">
                    <div class="p-3">
                        <p class="display-3 fw-900">4.7</p>
                        <p class="fs-2">Years in <br> business</p>
                    </div>
                </div>
                <div class="col-12 col-md-3 bg-orange">
                    <div class="p-3">
                        <p class="display-3 fw-900">2-6 <span class="fs-2 lh-1">mil USD</span></p>
                        <p class="fs-2">Annual <br> revenue</p>
                    </div>
                </div>
                <div class="col-12 col-md-3 bg-pink">
                    <div class="p-3">
                        <p class="display-3 fw-900">25</p>
                        <p class="fs-2">Average <br> headcount</p>
                    </div>
                </div>
                <div class="col-12 col-md-3 bg-purple">
                    <div class="p-3">
                        <p class="display-3 fw-900">USA</p>
                        <p class="fs-2">Based</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-dark">
        <div class="container text-white">
            <!-- MD -->
            <div class="row d-none d-md-block">
				<div class="col vh-35"></div>
			</div>
            <div class="row py-4 border-bottom border-white">
                <div class="col-6 text-right px-5">
                    <p class="fs-5 my-3">And above all else</p>
                </div>
                <div class="col-6">
                    <p class="display-3 fw-900 futura-bold"> 100%</p>
                    <p class="fs-2 font-weight-bold futura-bold">Growth oriented mindset</p>
                </div>
            </div>
        </div> 
    </div>

    <!-- MD -->
    <div class="bg-dark mt-n6 mt-md-n1">
        <div class="container-lg pt-5 text-white">
            <div class="row p-3">
                <div class="col bg-purple p-5 mt-lg-8" style="top:7rem;">
                    <div class="row p-0 p-lg-5 justify-content-center">
                        <div class="col-md-5 align-self-center">
                            <p class="display-1 fw-900 futura-bold">WE CARE</p>
                        </div>
                        <div class="col-md-5 pl-lg-5">
                            <div class="pl-md-3">
                                <p class="fs-5 fw-bold">
                                    At Cápita Works, we’re all about opportunity, and impacting the communities that surround us is part of our purpose advantage as an organization.
                                </p>
                                <a href="{{route('social-impact.index')}}" class="btn btn-white rounded-pill fs-6 px-4 mt-3">Learn about our Social Impact</a>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </div>

    <div class="pt-5 ">
		<div class="container pt-5">
			<div class="row">
				<div class="col vh-15 d-none d-lg-block"></div>
                <div class="col d-block d-md-none"></div>
			</div>
 
			<div class="row border-bottom border-dark mt-5">
				<div class="col-3 ">
					<p class="fs-1 fw-900 pb-5 futura-bold">Our Clients</p>
				</div>
                <div class="col-9">
                    <p class="fs-5 mt-3">Check out some of our amazing clients that decided to experience the Cápita Works Advantage!</p>
                </div>
			</div>
			<div class="row py-5 text-center fs-5">
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Apex Investigative Services.png')}}" alt="Apex Investigative Services">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Brand Builders Group.png')}}" alt="Brand Builders Group">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Cedars Group.png')}}" alt="Cedars Group">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Duchateau.jfif')}}" alt="Duchateau">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/DYADlaw.png')}}" alt="DYADlaw">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Everyday California.png')}}" alt="Everyday California">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/inHarmony.png')}}" alt="inHarmony">
				</div>
				<div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Mosaic Media Films.png')}}" alt="Mosaic Media Films">
				</div>
                <div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/My Creative Mark.png')}}" alt="My Creative Mark">
				</div>
                <div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Notaroo.png')}}" alt="Notaroo">
				</div>
                <div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Premier Aquatics.png')}}" alt="Premier Aquatics">
				</div>
                <div class="mb-4 mb-md-0 col-6 col-md-2 align-self-center">
					<img class="img-fluid" src="{{asset('images/clients/Survival Frog.png')}}" alt="Survival Frog">
				</div>
			</div>
		</div>
	</div>
@endsection