@extends('layouts.guest')

@section('css')
	<!-- Data Table CSS -->
	<link href="{{URL::asset('plugins/swiper/swiper.min.css')}}" rel="stylesheet" />
@endsection

@section('content')
<style>
.shapeiconn img{
    height: 220px !important;
    margin: 110px 0 0 57px !important;
}
</style>
        <section id="main-wrapper">
            
            <div class="h-100vh justify-center min-h-screen">
                <img id="bg-shape" src="{{ URL::asset('img/files/abstract1_03.png') }}" height="650" alt="">

                <div class="container-fluid">

                    <div class="central-banner">
                        <div class="row text-center">
                            <div class="col-md-6 col-sm-12 pt-9 pl-9">
                                <div class="text-container">
                                    <h2>AI Powered <span>Speech to Text</span> Converter</h2>
                                    <p class="pl-6 pr-6">{{ __('Use a deep learning process called automatic speech recognition (ASR)') }} <br> {{ __('to convert speech to text quickly and accurately in over +170 languages & dialects') }}.</p>

                                    <a href="{{ route('register') }}" class="btn btn-primary special-action-button">{{ __('Try Free Now') }}</a>
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-12">
                                <div class="image-container pr-9 shapeicon">
                                    <img src="{{ URL::asset('img/files/8767133.png') }}" alt="" style="height: 220px;margin: 75px 0 0 57px;">
                                    <div class="supported-formats">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div>

            </div>  
        </section>


        <!-- SECTION - USE CASES
        ========================================================-->
        <section id="cases-wrapper">

            <div class="container-fluid" id="curve-container">
                <div class="curve-box">
                    <div class="overflow-hidden curve">
                        <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#f5f9fc"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="container pt-9">

                <div class="row text-center mb-7">
                    <div class="col-md-12 title">
                        <h6><span>Various</span> {{ __('Use Cases') }}</h6>
                        <p>{{ __('Transcribe different type of audio contents easily') }}</p>
                    </div>
                </div>

                <div class="row">

                    <div class="blog-slider">
                        <div class="blog-slider__wrp swiper-wrapper">

                            <div class="blog-slider__item swiper-slide">
                                <div class="blog-slider__img">
                                    <img src="{{ URL::asset('img/blogs/image1.png') }}" alt="">
                                </div>
                                <div class="blog-slider__content">
                                    <span class="blog-slider__code">1 November 2021</span>
                                    <div class="blog-slider__title">Create Podcast Transcripts</div>
                                    <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
                                    <a href="#" class="blog-slider__button special-action-button">READ MORE</a>
                                </div>
                            </div>
                        
                            <div class="blog-slider__item swiper-slide">
                                <div class="blog-slider__img">                              
                                    <img src="{{ URL::asset('img/blogs/image3.png') }}" alt="">
                                </div>
                                <div class="blog-slider__content">
                                    <span class="blog-slider__code">31 August 2021</span>
                                    <div class="blog-slider__title">Call Centers Transcripts</div>
                                    <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? </div>
                                    <a href="#" class="blog-slider__button special-action-button">READ MORE</a>
                                </div>
                          </div>

                            <div class="blog-slider__item swiper-slide">
                                <div class="blog-slider__img">
                                    <img src="{{ URL::asset('img/blogs/image2.jpg') }}" alt="">
                                </div>
                                <div class="blog-slider__content">
                                    <span class="blog-slider__code">5 September 2021</span>
                                    <div class="blog-slider__title">Meeting Conversation Notes</div>
                                    <div class="blog-slider__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi?</div>
                                    <a href="#" class="blog-slider__button special-action-button">READ MORE</a>
                                </div>
                            </div>                                             
                          
                        </div>

                        <div class="blog-slider__pagination"></div>

                    </div>

                </div>
                
            </div>

        </section>


        <!-- PARTNER BANNER SECTION
        ========================================================-->
        <section id="partners-banner">
            
            <div class="container">
                
                <div class="row text-center">
                    

                    <!-- PARTNER CLASS -->
                    <div class="col-sm-12 col-md-4">
                        
                        <div id="partner-group">
                            
                            <h6><span>Powered</span> By</h6>

                            <p>Powered by leading Cloud Service Providers who offer Speech to Text services that deliver advanced improvements in text quality through a new machine learning approach.</p>

                        </div>

                    </div> <!-- END PARTNER CLASS -->

                    
                    <!-- FOOTER LOGOS -->
                    <div class="col-sm-12 col-md-8" id="partner-logo">

                        <div class="row">
                            <div class="col-md-6 col-sm-12 pt-7">
                                <img src="{{ URL::asset('img/files/amazon.png') }}" alt="">
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <img src="{{ URL::asset('img/files/google.png') }}" alt="">
                            </div>
                        </div>	

                    </div> <!-- END PARTNER LOGOS -->

                </div> <!-- END ROW -->

            </div> <!-- END CONTAINER -->

        </section> <!-- END PARTNER BANNER STYLES -->


        <!-- SECTION - FEATURES
        ========================================================-->
        <section id="features-wrapper">

            <div class="container">

                <div class="row text-center mb-7">
                    <div class="col-md-12 title">
                        <h6><span>Speech to Text</span> {{ __('Benefits') }}</h6>
                        <p>{{ __('Enjoy the full flexibility of the platform with ton of features') }}</p>
                    </div>
                </div>
                
                <div class="row">
                    
                    <!-- LIST OF SOLUTIONS -->
                    <div class="row d-flex" id="solutions-list">
                        

                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="fa fa-magic"></i>
                                    </div>
                                
                                    <h5>{{ __('Over 70+ Languages') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet est consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>                         

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="mdi mdi-access-point"></i>
                                    </div>
                                
                                    <h5>{{ __('Over 630+ Voices') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="mdi mdi-audiobook"></i>
                                    </div>
                                
                                    <h5>{{ __('Various Audio Formats') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="fa fa-magic"></i>
                                    </div>
                                
                                    <h5>{{ __('Amazing Voice Effects') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="mdi mdi-upload-network"></i>
                                    </div>
                                
                                    <h5>{{ __('Share Results Easily') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>                                

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="fa fa-google-wallet"></i>
                                    </div>
                                
                                    <h5>{{ __('Multiple Payment Options') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="fa fa-th-large"></i>
                                    </div>
                                
                                    <h5>{{ __('Standard & Neural Voices') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>
                                    
                                </div>            

                            </div>

                        </div> <!-- END SOLUTION -->


                        <!-- SOLUTION -->
                        <div class="col-lg-3 col-md-6 col-sm-12 mb-6">
                                
                            <div class="solution">
                                
                                <div class="solution-content">
                                    
                                    <div class="solution-logo">
                                        <i class="mdi mdi-account-alert"></i>
                                    </div>
                                
                                    <h5>{{ __('Great Customer Support') }}</h5>
                                    
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut aspernatur mollitia aliquid consectetur illo sapiente nemo obcaecati unde.</p>

                                </div>

                            </div>

                        </div> <!-- END SOLUTION -->

                        
                    </div> <!-- END LIST OF SOLUTIONS -->

                </div>

            </div>

        </section>


        <!-- SECTION - CUSTOMER FEEDBACKS
        ========================================================-->
        <section id="feedbacks-wrapper">

            <div class="container-fluid" id="curve-container">
                <div class="curve-box">
                    <div class="overflow-hidden curve">
                        <svg viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#f5f9fc"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="container pt-9 text-center">


                <!-- SECTION TITLE -->
                <div class="row mb-7">

                    <div class="title">
                        <h6>{{ __('Customer') }} <span>{{ __('Reviews') }}</span></h6>
                        <p>{{ __('We guarantee that you will be one of them as well') }}</p>
                    </div>

                </div> <!-- END SECTION TITLE -->

                
                <div class="row text-center">                    
                    

                    <!-- CUSTOMER FEEDBACKS -->
                    <div id="feedbacks">


                        <!-- FEEDBACK -->
                        <div class="feedback">						
                            
                            <!-- COMMENTER -->
                            <div class="feedback-image">
                                <img src="{{ URL::asset('img/feedback/feedback-1.jpg') }}" alt="Feedback" class="rounded-circle"><span class="fa fa-quote-left"></span>
                            </div>	
                            <p class="feedback-reviewer">Stella Mac Smith</p>
                            <p class="fs-12">Los Angeles - California</p>				
                            
                            <!-- MAIN COMMENT -->
                            <p class="comment"><sup><span class="fa fa-quote-left"></span></sup> Everything is perfect, CloudTranscribe saves me a ton of time to create audio for my text content, both for video and for audiobooks. <br /> Thanks so much for all your help! <sub><span class="fa fa-quote-right"></span></sub></p>
                            
                            <span>{{ __('Overall rating of our service') }}</span>
                            <ul>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                            </ul>

                        </div> <!-- END FEEDBACK -->



                        <!-- FEEDBACK -->
                        <div class="feedback">						
                            
                            <!-- COMMENTER -->
                            <div class="feedback-image">
                                <img src="{{ URL::asset('img/feedback/feedback-2.jpg') }}" alt="Feedback" class="rounded-circle"><span class="fa fa-quote-left"></span>
                            </div>	
                            <p class="feedback-reviewer">Tina Kandelaki</p>
                            <p class="fs-12">Campbridge - United Kingdom</p>				
                            
                            <!-- MAIN COMMENT -->
                            <p class="comment"><sup><span class="fa fa-quote-left"></span></sup> My favourite Speech to Text platform! User friendly interface, lot's of languages and voices available plus each one has various voice effects associated with them. <sub><span class="fa fa-quote-right"></span></sub></p>
                            
                            <span>{{ __('Overall rating of our service') }}</span>
                            <ul>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star-half-full"></li>
                            </ul>

                        </div> <!-- END FEEDBACK -->



                        <!-- FEEDBACK -->
                        <div class="feedback">						
                            
                            <!-- COMMENTER -->
                            <div class="feedback-image">
                                <img src="{{ URL::asset('img/feedback/feedback-3.jpg') }}" alt="Feedback" class="rounded-circle"><span class="fa fa-quote-left"></span>
                            </div>	
                            <p class="feedback-reviewer">San Sebastian</p>
                            <p class="fs-12">Bogota - Columbia</p>				
                            
                            <!-- MAIN COMMENT -->
                            <p class="comment"><sup><span class="fa fa-quote-left"></span></sup> One of the best platforms to use Speech to Text services. Availability of voices get's you existed! Highly recommended. <sub><span class="fa fa-quote-right"></span></sub></p>
                            
                            <span>{{ __('Overall rating of our service') }}</span>
                            <ul>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                                <li class="fa fa-star"></li>
                            </ul>

                        </div> <!-- END FEEDBACK -->



                </div> <!-- END CUSTOMER FEEDBACKS -->


                    
                </div> <!-- END ROW -->
                
            </div> <!-- END CONTAINER -->

            <div class="container">

                <div class="row text-center position-relative action-call-wrapper">

                    <div id="action-call" class="w-100 h-100"></div>

                    <div class="col-md-12 action-content">
                        <h5 class="mb-4">{{ __('Try for Free') }}</h5>
                        <h4>{{ __('Try Speech to Text Synthesize for Free') }}</h4>
                        <p class="mb-5">{{ __('You will receive free credits upon registration') }}</p>

                        <a href="{{ route('register') }}" class="btn btn-primary">{{ __('Sign Up Now') }}</a>
                        <p class="fs-10 mt-2">{{ __('No credit card required') }}</p>
                    </div>
                </div>
            </div>
            
        </section> <!-- END SECTION CUSTOMER FEEDBACK -->

@endsection

@section('js')
     <!-- Custom js-->
     <script src="{{URL::asset('plugins/swiper/swiper.min.js')}}"></script>
     <script src="{{URL::asset('js/slick.min.js')}}"></script>
     <script src="{{URL::asset('js/frontend.js')}}"></script>
     
@endsection