2025-05-30 01:07:33 -06:00

541 lines
36 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('porto::layouts.master')
@section('vendor-style')
<!-- Web Fonts -->
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800%7CShadows+Into+Light&display=swap" rel="stylesheet" type="text/css">
@vite('vendor/koneko/laravel-vuexy-website-layout-porto/resources/assets/css/skins/default.css')
@endsection
@section('content')
@if(request()->is('preview/*'))
<div class="alert alert-warning shadow mb-3">
Estás visualizando una vista previa de contenido no publicado.
</div>
@endif
<x-porto::header.menu menuSlug="main-header" />
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 7000}" data-dynamic-height="['670px','670px','670px','550px','500px']" style="height: 670px;">
<div class="owl-stage-outer">
<div class="owl-stage">
<!-- Carousel Slide 1 -->
<div class="owl-item position-relative" style="background-image: url(img/slides/slide-bg-performance.jpg); background-color: #2E3136; background-size: cover; background-position: center;">
<div class="container position-relative z-index-1 h-100">
<div class="d-flex flex-column align-items-center justify-content-center h-100">
<h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-plugin-options="{'minWindowWidth': 0}">
<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
</span>
DO YOU NEED A <span class="position-relative">NEW <span class="position-absolute left-50pct transform3dx-n50 top-0 mt-4"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span>
<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
<img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
</span>
</h3>
<h1 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">WEB DESIGN?</h1>
<p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Check out our options and features</p>
</div>
</div>
</div>
<!-- Carousel Slide 2 -->
<div class="owl-item position-relative overlay overlay-show overlay-op-8 lazyload" data-bg-src="img/slides/slide-bg-2.jpg" style="background-size: cover; background-position: center;">
<div class="container position-relative z-index-3 h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-lg-6">
<div class="d-flex flex-column align-items-center">
<h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-plugin-options="{'minWindowWidth': 0}">
<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
<img loading="lazy" src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'imgFluid': false, 'minWindowWidth': 0}" alt="" />
</span>
WE WORK HARD AND PORTO HAS
<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
<img loading="lazy" src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'imgFluid': false, 'minWindowWidth': 0}" alt="" />
</span>
</h3>
<h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2>
<p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 30}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of largest world's MarketPlace</p>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel Slide 3 -->
<div class="owl-item position-relative overlay overlay-color-primary overlay-show overlay-op-8 lazyload" data-bg-src="img/slides/slide-bg-6.jpg" style="background-size: cover; background-position: center;">
<div class="container position-relative z-index-3 h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-lg-6">
<div class="d-flex flex-column align-items-center">
<h3 class="position-relative text-color-light text-4 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" data-plugin-options="{'minWindowWidth': 0}">
<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
<img loading="lazy" src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'imgFluid': false, 'minWindowWidth': 0}" alt="" />
</span>
WE CREATE DESIGNS, WE ARE
<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
<img loading="lazy" src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'imgFluid': false, 'minWindowWidth': 0}" alt="" />
</span>
</h3>
<h2 class="porto-big-title text-color-light font-weight-extra-bold mb-3" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 300, 'animationName': 'fadeInRightShorterOpacity', 'letterClass': 'd-inline-block'}">PORTO</h2>
<p class="text-4 text-color-light font-weight-light text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">The best choice for your new website</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<
div class="owl-nav">
<button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>
<button type="button" role="presentation" class="owl-next" aria-label="Next"></button>
</>
<div class="owl-dots mb-5">
<button role="button" class="owl-dot active"><span></span></button>
<button role="button" class="owl-dot"><span></span></button>
<button role="button" class="owl-dot"><span></span></button>
</div>
</div>
<div class="home-intro bg-primary" id="home-intro">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-8">
<p>
The fastest way to grow your business with the leader in <span class="highlighted-word">Technology</span>
<span>Check out our options and features included.</span>
</p>
</div>
<div class="col-lg-4">
<div class="get-started text-start text-lg-end">
<a href="#" class="btn btn-dark btn-lg text-3 font-weight-semibold px-4 py-3">Get Started Now</a>
<div class="learn-more">or <a href="index.html">learn more.</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row text-center pt-3">
<div class="col-md-10 mx-md-auto">
<h1 class="word-rotator slide font-weight-bold text-8 mb-3 appear-animation" data-appear-animation="fadeInUpShorter">
<span>Porto is </span>
<span class="word-rotator-words bg-dark">
<b class="is-visible">incredibly</b>
<b>especially</b>
<b>extremely</b>
</span>
<span> beautiful and fully responsive.</span>
</h1>
<p class="lead appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo.
</p>
</div>
</div>
</div>
<div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
<div class="home-concept mt-5">
<div class="container">
<div class="row text-center">
<span class="sun"></span>
<span class="cloud"></span>
<div class="col-lg-2 ms-lg-auto">
<div class="process-image">
<img src="img/home/home-concept-item-1.png" alt="" />
<strong>Strategy</strong>
</div>
</div>
<div class="col-lg-2">
<div class="process-image process-image-on-middle">
<img src="img/home/home-concept-item-2.png" alt="" />
<strong>Planning</strong>
</div>
</div>
<div class="col-lg-2">
<div class="process-image">
<img src="img/home/home-concept-item-3.png" alt="" />
<strong>Build</strong>
</div>
</div>
<div class="col-lg-4 ms-lg-auto">
<div class="project-image">
<div id="fcSlideshow" class="fc-slideshow">
<ul class="fc-slides">
<li><a href="portfolio-single-wide-slider.html" aria-label=""><img class="img-fluid" src="img/projects/project-home-1.jpg" alt="" /></a></li>
<li><a href="portfolio-single-wide-slider.html" aria-label=""><img class="img-fluid" src="img/projects/project-home-2.jpg" alt="" /></a></li>
<li><a href="portfolio-single-wide-slider.html" aria-label=""><img class="img-fluid" src="img/projects/project-home-3.jpg" alt="" /></a></li>
</ul>
</div>
<strong class="our-work">Our Work</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mb-5 pb-4">
<div class="row">
<div class="col mb-4">
<hr class="my-5">
</div>
</div>
<div class="row pb-3">
<div class="col-lg-8">
<h2 class="font-weight-normal text-7">Our <strong class="font-weight-extra-bold">Features</strong></h2>
<div class="row">
<div class="col-sm-6">
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-support text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Customer Support</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-doc text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">HTML5 / CSS3 / JS</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-social-google text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">500+ Google Fonts</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-pencil text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Colors</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-layers text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Sliders</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-user text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Icons</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-menu text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Buttons</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
<div class="feature-box feature-box-style-2">
<div class="feature-box-icon">
<i class="icons icon-screen-desktop text-color-primary"></i>
</div>
<div class="feature-box-info">
<h4 class="font-weight-bold text-4-5 mb-1">Lightbox</h4>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<h2 class="font-weight-normal text-6">and more...</h2>
<div class="accordion accordion-modern" id="accordion">
<div class="card card-default">
<div class="card-header">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseOne">
<i class="icons icon-diamond text-color-primary"></i>
Creative Websites
</a>
</h4>
</div>
<div id="collapseOne" class="collapse show">
<div class="card-body text-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blanorem ipsum dolor sit amet, consecte.</p>
<p class="mb-0">Adipiscing elit phasellus blanit ma... <a href="#" class="d-block text-color-dark font-weight-semibold pt-4">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a></p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseTwo">
<i class="icons icon-bubble text-color-primary"></i>
Contact Forms
</a>
</h4>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body text-2">
<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapseThree">
<i class="icons icon-grid text-color-primary"></i>
Portfolio Pages
</a>
</h4>
</div>
<div id="collapseThree" class="collapse">
<div class="card-body text-2">
<p class="mb-0">Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="solid my-5">
<div class="row text-center pt-4">
<div class="col">
<h2 class="word-rotator slide font-weight-bold text-8 mb-2">
<span>We're not the only ones </span>
<span class="word-rotator-words bg-primary">
<b class="is-visible">excited</b>
<b>happy</b>
</span>
<span> about Porto Template...</span>
</h2>
<h4 class="text-primary lead tall text-4">50,000 CUSTOMERS IN 100 COUNTRIES USE PORTO TEMPLATE. MEET OUR CUSTOMERS.</h4>
</div>
</div>
<div class="row text-center mt-5">
<div class="owl-carousel owl-theme carousel-center-active-item" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
<div>
<img class="img-fluid" src="img/logos/logo-1.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-2.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-3.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-4.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-5.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-6.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-4.png" alt="">
</div>
<div>
<img class="img-fluid" src="img/logos/logo-2.png" alt="">
</div>
</div>
</div>
</div>
<section class="section section-custom-map appear-animation lazyload" data-appear-animation="fadeInUpShorter" data-bg-src="img/map.png" style="background-color: transparent; background-position: center 0; background-repeat: no-repeat;">
<section class="section section-default section-footer">
<div class="container">
<div class="row mt-5 appear-animation" data-appear-animation="fadeInUpShorter">
<div class="col-lg-6">
<div class="recent-posts mb-5">
<h2 class="font-weight-normal text-6 mb-4"><strong class="font-weight-extra-bold">Latest</strong> Posts</h2>
<div class="owl-carousel owl-theme dots-title mb-0" data-plugin-options="{'items': 1, 'autoHeight': true, 'autoplay': true, 'autoplayTimeout': 8000}">
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">15</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a class="d-block" href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
<div class="col-lg-6">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">14</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a class="d-block" href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">13</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a class="d-block" href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
<div class="col-lg-6">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">12</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a class="d-block" href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">11</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
<div class="col-lg-6">
<article>
<div class="row">
<div class="col-auto pe-0">
<div class="date">
<span class="day font-weight-extra-bold">10</span>
<span class="month text-1">JAN</span>
</div>
</div>
<div class="col ps-1">
<h4 class="text-primary text-4"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur</a></h4>
<p class="pe-4 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="/" class="read-more text-color-dark font-weight-semibold text-2">read more <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h2 class="font-weight-normal text-6 mb-4"><strong class="font-weight-extra-bold">What</strong> Clients Say</h2>
<div class="row">
<div class="owl-carousel owl-theme dots-title dots-title-pos-2 mb-0" data-plugin-options="{'items': 1, 'autoHeight': true}">
<div>
<div class="col">
<div class="testimonial testimonial-primary">
<blockquote>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat.</p>
</blockquote>
<div class="testimonial-arrow-down"></div>
<div class="testimonial-author">
<div class="testimonial-author-thumbnail">
<img src="img/clients/client-1.jpg" class="rounded-circle" alt="" />
</div>
<p><strong>John Doe</strong><span>Okler</span></p>
</div>
</div>
</div>
</div>
<div>
<div class="col">
<div class="testimonial testimonial-primary">
<blockquote>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat.</p>
</blockquote>
<div class="testimonial-arrow-down"></div>
<div class="testimonial-author">
<div class="testimonial-author-thumbnail">
<img src="img/clients/client-1.jpg" class="rounded-circle" alt="" />
</div>
<p><strong>John Doe</strong><span>Okler</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
@endsection