@extends('layouts.main-layout')

@section('head-end')

<link rel="stylesheet" href="{{ mix('css/final/about-page.css') }}?u={{ env('APP_ASSET_TIMESTAMP') }}">

@endsection

@section('content')
<section class="section" id="section-1">
    <div class="container-fluid h-100" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/home/about.jpg)">
        <div class="container h-100">
            <div class="d-flex justify-content-center align-items-center h-100">
                <h1 class="mb-0 text-white">
                    <b>
                        About us
                    </b>
                </h1>
            </div>
        </div>
    </div>
</section>
<section class="section" id="section-2">
    <div class="container h-100">
        <div class="d-flex justify-content-center align-items-center h-100">
            <div class="row">
                <div class="col-lg-12 order-lg-1 order-2">
                    <h2 class="mt-lg-0">
                        <b>
                            What we do
                        </b>
                    </h2>
                    <p class="mt-4">
                        For the past nine years, Domains.io has been a leading auctioneer of premium domain names across the .io, .ac, and .sh extensions, boasting a diverse portfolio of over 2000 premium domains, including highly sought-after 1 and 2 character names.
                    </p>
                    <p>
                        Since coming under new management in March 2021, Domains.io is committed to unveiling more of our exclusive names to the public. Our goal is to enrich the online experience for individuals and assist companies in securing the ideal short and memorable domain name that perfectly aligns with their brand identity.
                    </p>
                    <p>
                        Discover the perfect domain for your brand with Domains.io. Our extensive collection of premium .io, .ac, and .sh domain names offers unparalleled opportunities for businesses seeking to enhance their digital presence with a domain that is both concise and memorable.
                    </p>
                    <div class="btn-divido-div">
                        <div class="btn btn-divido">
                            <a href="{{route('contact')}}">
                                Get in touch
                            </a>
                        </div>
                    </div>
                </div>
                {{-- <div class="col-lg-12 second-col order-lg-2 order-1 mt-3">
                    <img src="/images/home/about-1.jpg" alt="About Divido" class="section-2-img">
                </div> --}}
            </div>
        </div>
    </div>
</section>
<section class="section" id="section-3">
    <div class="container-fluid">
        <div class="container h-100">
            <div class="d-flex justify-content-center align-items-center">
                <div class="row w-100">
                    <div class="col-lg-6 col-12">
                        <div class="row space-y-4">
                            <div class="col-lg-6 col-12 mt-lg-0 mt-2">
                                <div class="card">
                                    <div class="card-body d-flex justify-content-between align-items-center">
                                        <div>
                                            <h4 class="mb-0 mt-2">
                                                <b>
                                                    2000+
                                                </b>
                                            </h4>
                                            <p class="mb-0">
                                                <small>
                                                    Unique Domains
                                                </small>
                                            </p>
                                        </div>
                                        <div class="d-flex"> 
                                            <span class="material-symbols-outlined">
                                                language
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mt-lg-0 mt-2">
                                <div class="card">
                                    <div class="card-body d-flex justify-content-between align-items-center">
                                        <div>
                                            <h4 class="mb-0 mt-2">
                                                <b>
                                                    40,000+
                                                </b>
                                            </h4>
                                            <p class="mb-0">
                                                <small>
                                                    Clients
                                                </small>
                                            </p>
                                        </div>
                                        <div class="d-flex">
                                            <span class="material-symbols-outlined">
                                                group
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mt-lg-4 mt-2">
                                <div class="card">
                                    <div class="card-body d-flex justify-content-between align-items-center">
                                        <div>
                                            <h4 class="mb-0 mt-2">
                                                <b>
                                                    $2,000,000+
                                                </b>
                                            </h4>
                                            <p class="mb-0">
                                                <small>
                                                    Domain purchase value
                                                </small>
                                            </p>
                                        </div>
                                        <div class="d-flex">
                                            <span class="material-symbols-outlined">
                                                monetization_on
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12 mt-lg-4 mt-2">
                                <a href="/dashboard" class="text-decoration-none">
                                    <div class="card clickable">
                                        <div class="card-body d-flex justify-content-between align-items-center">
                                            <div>
                                                <h4 class="mb-0 mt-2 text-decoration-underline">
                                                    <b>
                                                        Get Started
                                                    </b>
                                                </h4>
                                                <p class="mb-0">
                                                    <small>
                                                        Own your Premium Domain
                                                    </small>
                                                </p>
                                            </div>
                                            <div class="d-flex">
                                                <span class="material-symbols-outlined">arrow_outward</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12 mt-lg-0 mt-4">
                        <img src="/images/home/about-1.jpg" alt="About Divido" class="section-2-img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section" id="section-4">
    <div class="container h-100">
        <div class="d-flex align-items-center justify-content-center flex-column h-100">
            <h2>
                <b>
                    Meet our team
                </b>
            </h2>
            <div class="team mt-lg-4 mt-3 w-100">
                <div class="row">
                    {{-- <div class="col-lg-4 offset-lg-4" >
                        <h3 class="mb-lg-3 mb-3 text-center">
                            <b>
                                Company Director
                            </b>
                        </h3>
                        <div class="team-img" style="background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(/images/home/team/tim.jpeg)">
                            <p class="tim-speech">
                                I have had a very varied career over the years, I believe that for any company to thrive they must have the perfect domain.  I love the .io domain space and what it represents and I am very excited to have taken over Divido in 2021, to harness the potential of this great portfolio. 
                            </p>
                        </div>
                        <img src="" class="img-fluid rounded-start" alt="...">
                        <div class="">
                            <h5 class="mb-1 text-center">
                                <b>
                                    Tim
                                </b> 
                            </h5>
                            <p class="card-text mb-1">
                                <span class="text-muted">
                                    Company Director
                                </span>
                            </p>
                       
                        </div>
                    </div> --}}
                    <div class="col-lg-12 mt-lg-4 mt-4">
                        <h3 class="text-center">
                            <b>
                                Sales Team 
                            </b>
                        </h3>
                        <p class="text-center mb-0">
                            Here to help you find your perfect domain.
                        </p>
                        <div class="row mt-5">
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/jonny.jpeg" alt="Domain.io Sales" class="team-img-1">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Simon
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Sales Person
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/julianna.jpeg" alt="Domain.io Sales" class="team-img-1">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Juliana
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Sales Person
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/james.png" alt="Domain.io Sales" class="team-img-1">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                James
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Sales Person
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 mt-lg-5 mt-4">
                        <h3 class="text-center">
                            <b>
                                Technical Team 
                            </b>
                        </h3>
                        <div class="row mt-5">
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/rizvi.jpg" alt="Domain.io Sales" class="team-img-1">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Rizvi
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Chief Technology Officer
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/loay.jpeg" alt="Domain.io Sales" class="team-img-3">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Loay
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            DevOps Engineer
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 mt-lg-5 mt-4">
                        <h3 class="text-center">
                            <b>
                                Admin Team 
                            </b>
                        </h3>
                        <div class="row mt-5">
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/ramya.jpeg" alt="Domain.io Sales" class="team-img-2">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Ramya
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Office Manager
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-6 team-member">
                                <div class="card bg-white">
                                    <img src="/images/home/team/charlotte.jpeg" alt="Domain.io Sales" class="team-img-2">
                                    <div class="card-body">
                                        <h5>
                                            <b>
                                                Charlotte
                                            </b> 
                                        </h5>
                                        <p class="mb-0">
                                            Human Resources
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="col-lg-3 mt-lg-5 mt-4 team-member">
                        <h3 class="mb-lg-3 text-center">
                            <b>
                                Company Owner 
                            </b>
                        </h3>
                        <div class="team-img-2" style="background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url(/images/home/team/henry.jpeg)">
                        </div>
                        <h5 class="mb-1 text-center">
                            <b>
                                Henry
                            </b> 
                        </h5>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>
@endsection