@extends('frontend.layouts.app')

@section('title')
Hosting & Server | R Web Solutions
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('/css/frontend/hosting-server.css') }}">


<div class="messenger-box">
    <div>
         <a href="#">
            <div class="arrow-container">
                <i style="color: white;;" class="fa-solid fa-arrow-up"></i>
            </div>
        </a>
    </div>
    <a href="https://www.messenger.com/t/2350712291663307/?messaging_source=source%3Apages%3Amessage_shortlink&source_id=1441792&recurring_notification=0">
        <img src="{{ asset('assets/homepage/messenger.png') }}" alt="messenger" width="55px">
    </a>
</div>

<section class="hosting-server-main-section-container proxima" draggable="false">
    <div class="card border-0" draggable="false" style="background:rgba(255,255,255, 0)">
        <img class="hosting-server-image-banner" src="{{ asset('assets/hosting-server/hosting-server-banner.png') }}" alt="hosting-server-banner">
        <div class="card-img-overlay container" draggable="false">
            <div class="row">
                <div class="col-12 d-flex justify-content-center">
                    <div class="hosting-server-main-title">
                        <span>
                            The Fastest & Most Reliable
                        </span>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-center">
                    <div class="hosting-server-main-title-2">
                        <span>
                            Get Cloud Hosting & Server
                        </span>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-center">
                    <div class="hosting-server-main-title-3">
                        <span>
                            for your Online Presence
                        </span>
                    </div>
                </div>
                <div class="col-12 d-flex justify-content-center">
                    <a class="hosting-server-main-button" href="{{url('#')}}">
                        <button>
                            Get Free Quotation <img src="{{ asset('assets/homepage/button-right-arrow.png') }}" alt="button-icon">
                        </button>
                    </a>
                </div>
                <div class="col-12 d-flex justify-content-center">
                    <div class="hosting-server-main-image">
                        <img class="img-fluid" src="{{asset('assets/hosting-server/hosting-server-image.png')}}" alt="webdev">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="hosting-server-second-section-container proxima" draggable="false" id="discover-container">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <hr class="solid">
            </div>
            <div class="col-8 second-select-box">
                <div class="overview-box">
                    <img class="overview" src="{{ asset('assets/hosting-server/overview.png') }}" alt="icon">
                    <img class="overviewed" src="{{ asset('assets/hosting-server/overviewed.png') }}" alt="icon">
                    <span>
                        Overview
                    </span>
                </div>
                <div class="divider-box">
                    <hr class="solid">
                </div>
                <div class="quoted-box">
                    <img class="quote" src="{{ asset('assets/hosting-server/quote.png') }}" alt="icon">
                    <img class="quoted" src="{{ asset('assets/hosting-server/quoted.png') }}" alt="icon">
                    <span>
                        Get Quoted
                    </span>
                </div>
            </div>
            <div class="col-2">
                <hr class="solid">
            </div>
        </div>
    </div>
</section>

<section class="hosting-server-third-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12 question-container" id="overview-container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 third-left">
                    <div class="card border-0" style="background: rgba(255,255,255, 0)">
                        <div class="question-number">
                            <span>
                                01
                            </span>
                        </div>
                        <div>
                            <div class="question-title">
                                <span>
                                    Do your <span style="font-weight: bold">Business</span>
                                </span>
                            </div>
                            <div class="question-title-2">
                                <span>
                                    Need <span style="font-weight: bold">Hosting & Server</span> ?
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 third-right">
                    <div class="question-answer">
                        <span>
                            Choose our custom hosting and server!
                            Whether you're launching a website, app, or online store, we've got the perfect solution for you.
                            Our reliable hosting and servers ensure your online presence is always up and running smoothly.
                            Plus, our friendly support team is here 24/7 to assist you.
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 us-container" id="quoted-container">
            <div class="row">
                <div class="d-flex justify-content-center">
                    <span>
                        Benefits of <span style="color: #fa6f10">Working With US</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-12 benefit-container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="row d-flex justify-content-center card-1">
                        <div class="benefit-icon">
                            <i class="fa-solid fa-server"></i>
                        </div>
                        <div class="benefit-card">
                            <div class="benefit-title">
                                Made Just for You
                            </div>
                            <div class="benefit-description">
                                We create hosting and servers that fits your need.
                                Whether you have a website or an online service, we'll make sure everything works.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="row d-flex justify-content-center card-2">
                        <div class="benefit-icon">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                        <div class="benefit-card">
                            <div class="benefit-title">
                                Always Up
                            </div>
                            <div class="benefit-description">
                                Your website or app will hardly ever go offline with us.
                                We keep a close eye on everything to make sure it's always working and online.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="row d-flex justify-content-center card-3">
                        <div class="benefit-icon">
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                        </div>
                        <div class="benefit-card">
                            <div class="benefit-title">
                                Grows with You
                            </div>
                            <div class="benefit-description">
                                As your business gets bigger, we'll make sure your hosting and server can handle many users.
                                You don't have to worry about your website.
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-6">
                    <div class="row d-flex justify-content-center card-4">
                        <div class="benefit-icon">
                            <i class="fa-solid fa-headset"></i>
                        </div>
                        <div class="benefit-card">
                            <div class="benefit-title">
                                Always Be There
                            </div>
                            <div class="benefit-description">
                                If you have questions, our team is here to help.
                                We'll guide you through everything and make sure your website stays in top shape.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="hosting-server-fourth-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12 ready-container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 ready-left">
                    <div class="card border-0" style="background: rgba(255,255,255, 0)">
                        <div class="ready-number">
                            <span>
                                02
                            </span>
                        </div>
                        <div>
                            <div class="ready-title">
                                <span>
                                    <span style="font-weight: bold">Ready</span> to be in
                                </span>
                            </div>
                            <div class="ready-title-2">
                                <span>
                                    the <span style="font-weight: bold">Digital World</span> Today?
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-12 ready-right">
                    <a class="hosting-server-ready-button" href="{{url('/contact')}}">
                        <button>
                            Get Free Quotation <img src="{{ asset('assets/homepage/button-right-arrow.png') }}" alt="button-icon">
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('js')
<script src="{{ asset('js/frontend/hosting/animation.js') }}"></script>
<script src="{{ asset('js/frontend/hosting/click-slide.js') }}"></script>
@endsection