Bosquejo

2020-04-10 02:21:25 -04:00
parent f69cb57c36
commit 692c001cd5
39 changed files with 887 additions and 0 deletions
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@ -0,0 +1,50 @@
+<?php
+use DI\ContainerBuilder as Builder;
+use DI\Bridge\Slim\Bridge;
+
+include_once 'composer.php';
+
+$builder = new Builder();
+$folders = ['common'];
+if (isset($__environment)) {
+  $folders []= $__environment;
+}
+
+$files = [
+  'config',
+  'setup'
+];
+foreach ($folders as $folder) {
+  foreach ($files as $file) {
+    $filename = implode(DIRECTORY_SEPARATOR, [
+      __DIR__,
+      $folder,
+      $file . '.php'
+    ]);
+    if (file_exists($filename)) {
+      $builder->addDefinitions($filename);
+    }
+  }
+}
+
+$container = $builder->build();
+$app = Bridge::create($container);
+$app->setBasePath($container->get('urls.base'));
+$app->addRoutingMiddleware();
+$app->addErrorMiddleware(true, true, true);
+
+foreach ($folders as $folder) {
+  $filename = implode(DIRECTORY_SEPARATOR, [
+    __DIR__,
+    $folder,
+    'middleware.php'
+  ]);
+  if (file_exists($filename)) {
+    include_once $filename;
+  }
+}
+
+include_once implode(DIRECTORY_SEPARATOR, [
+  $container->get('folders.routes'),
+  'router.php'
+]);
--- a/bootstrap/common/config.php
+++ b/bootstrap/common/config.php
@ -0,0 +1,13 @@
+<?php
+return [
+  'urls.base' => '/provm/totalsport',
+  'folders.base' => dirname(__DIR__, 2),
+  'folders.resources' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.base}',
+    'resources'
+  ])),
+  'folders.routes' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.resources}',
+    'routes'
+  ]))
+];
--- a/bootstrap/composer.php
+++ b/bootstrap/composer.php
@ -0,0 +1,6 @@
+<?php
+require_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'vendor',
+  'autoload.php'
+]);
--- a/bootstrap/web/config.php
+++ b/bootstrap/web/config.php
@ -0,0 +1,68 @@
+<?php
+return [
+  'folders.cache' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.resources}',
+    'cache'
+  ])),
+  'folders.templates' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.resources}',
+    'views'
+  ])),
+  'folders.data' => DI\string(implode(DIRECTORY_SEPARATOR, [
+    '{folders.resources}',
+    'data'
+  ])),
+  'urls' => [
+    'base' => DI\string('{urls.base}'),
+    'assets' => DI\string(implode('/', [
+      '{urls.base}',
+      'assets'
+    ])),
+    'styles' => DI\string(implode('/', [
+      '{urls.base}',
+      'assets',
+      'styles'
+    ])),
+    'servicios' => DI\string(implode('/', [
+      '{urls.base}',
+      'servicios'
+    ])),
+    'eventos' => DI\string(implode('/', [
+      '{urls.base}',
+      'eventos'
+    ])),
+    'map' => 'https://maps.google.com/maps?hl=es&amp;q=Avenida%20Nueva%20Providencia%201945,%20Providencia&amp;ie=UTF8&amp;z=16&amp;iwloc=B&amp;output=embed'
+  ],
+  'assets' => [
+    'styles' => [
+      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.css',
+      DI\string(implode('/', [
+        '{urls.base}',
+        'assets',
+        'styles',
+        'main.css'
+      ])),
+      DI\string(implode('/', [
+        '{urls.base}',
+        'assets',
+        'styles',
+        'header.css'
+      ]))
+    ],
+    'scripts' => [
+      'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js',
+      'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.js'
+    ],
+    'fonts' => (object) [
+      'text/css' => [
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/brand-icons.woff',
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/brand-icons.woff2',
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/icons.woff',
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/icons.woff2',
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff',
+        'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff2',
+        'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap'
+      ]
+    ]
+  ]
+];
--- a/bootstrap/web/setup.php
+++ b/bootstrap/web/setup.php
@ -0,0 +1,16 @@
+<?php
+use Psr\Container\ContainerInterface as Container;
+
+return [
+  Slim\Views\Blade::class => function(Container $c) {
+    return new Slim\Views\Blade(
+      $c->get('folders.templates'),
+      $c->get('folders.cache'),
+      null,
+      [
+        'urls' => (object) $c->get('urls'),
+        'assets' => (object) $c->get('assets')
+      ]
+    );
+  }
+];
--- a/common/Controller/Web/Home.php
+++ b/common/Controller/Web/Home.php
@ -0,0 +1,49 @@
+<?php
+namespace ProVM\TotalSport\Common\Controller\Web;
+
+use Psr\Container\ContainerInterface as Container;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Psr\Http\Message\ResponseInterface as Response;
+use Slim\Views\Blade as View;
+use Spyc;
+
+class Home {
+  public function __invoke(Request $request, Response $response, Container $container, View $view): Response {
+    $banner = (object) [
+      'title' => 'BUSCAMOS LA MEJOR EXPERIENCA',
+      'contenido' => 'Eventos hechos a tu medida'
+    ];
+    $servicios = $this->loadData($container, 'servicios');
+    $frase = (object) [
+      'titulo' => 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+      'contenido' => 'elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
+    ];
+    $clientes = [];
+    for ($i = 0; $i < 20; $i ++) {
+      $clientes[$i] = '<div class="ui fluid placeholder"><div class="rectangular image"></div>' . $i . '</div>';
+    }
+
+    $testimonios = $this->loadData($container, 'testimonios');
+    $eventos = $this->loadData($container, 'eventos');
+    foreach ($eventos as &$evento) {
+      if (!isset($evento->image)) {
+        $evento->image = '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>';
+      }
+    }
+    /*$eventos = [
+      (object) [
+        'titulo' => '2da Corrida Famliar Inclusiva DIMERC',
+        'image' => '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>'
+      ]
+    ];*/
+
+    return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
+  }
+  protected function loadData(Container $container, string $file_name) {
+    $filename = implode(DIRECTORY_SEPARATOR, [
+      $container->get('folders.data'),
+      $file_name . '.yml'
+    ]);
+    return json_decode(json_encode(Spyc::YAMLLoad($filename)));
+  }
+}
--- a/composer.json
+++ b/composer.json
@ -0,0 +1,30 @@
+{
+    "name": "provm/totalsport",
+    "description": "Web para Total Sport",
+    "type": "project",
+    "license": "UNLICENSED",
+    "authors": [
+        {
+            "name": "Aldarien",
+            "email": "aldarien85@gmail.com"
+        }
+    ],
+    "require": {
+        "slim/slim": "^4.4",
+        "php-di/slim-bridge": "^3.0",
+        "nyholm/psr7": "^1.2",
+        "nyholm/psr7-server": "^0.4.1",
+        "rubellum/slim-blade-view": "^0.1.1",
+        "mustangostang/spyc": "^0.6.3"
+    },
+    "require-dev": {
+        "phpunit/phpunit": "^8.5",
+        "kint-php/kint": "^3.3"
+    },
+    "autoload": {
+      "psr-4": {
+        "ProVM\\TotalSport\\Common\\": "common",
+        "ProVM\\TotalSport\\": "src"
+      }
+    }
+}
--- a/public/.htaccess
+++ b/public/.htaccess
@ -0,0 +1,4 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^ index.php [QSA,L]
--- a/public/assets/styles/header.css
+++ b/public/assets/styles/header.css
@ -0,0 +1,9 @@
+#page_logo {
+  font-family: Raleway, sans-serif;
+  font-weight: 800;
+  font-size: 2.2rem;
+  color: #404041;
+}
+#page_logo .orange {
+  color: #F26721;
+}
--- a/public/assets/styles/home.css
+++ b/public/assets/styles/home.css
@ -0,0 +1,77 @@
+#banner {
+  background-color: grey;
+  color: white;
+  font-family: Roboto, sans-serif !important;
+  padding-top: 10rem;
+  padding-bottom: 10rem;
+}
+#banner .header {
+  font-family: inherit;
+}
+
+#servicios {
+  padding-top: 2rem;
+  padding-bottom: 3rem;
+}
+
+#frase {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+#nosotros {
+  background-color: #f0f0f0;
+}
+#nosotros .column {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#nosotros .contenido {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+#nosotros .placeholder {
+  height: 100%;
+}
+
+#clientes {
+  padding-top: 4rem;
+  padding-bottom: 6rem;
+}
+#clientes .header:first-child {
+  padding-bottom: 1rem;
+}
+#clientes .ci {
+  display: flex;
+  align-items: center
+}
+
+#testimonios {
+  background-color: grey;
+  color: #404040;
+  min-height: 30rem;
+  display: flex;
+  align-items: center
+}
+#testimonios .segment, #testimonios .header {
+  color: #404040 !important;
+}
+
+#eventos {
+  background-color: #f0f0f0;
+  padding-top: 3rem;
+  padding-bottom: 5rem;
+}
+#eventos .segment {
+  background-color: white;
+  padding: 0;
+}
+
+#contacto {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+#contacto #map {
+  /*margin-top: 3rem;*/
+  height: 100%;
+}
--- a/public/assets/styles/main.css
+++ b/public/assets/styles/main.css
@ -0,0 +1,38 @@
+body, .ui {
+  font-family: Roboto, sans-serif !important;
+}
+
+footer {
+  flex: none;
+  color: white;
+  height: 20rem;
+  font-family: Roboto;
+}
+footer .dark-grey {
+  background-color: grey;
+}
+footer .grid {
+  margin: 0 !important;
+}
+footer .main {
+  min-height: 16rem !important;
+  padding-top: 3rem !important;
+}
+footer a {
+  color: inherit;
+}
+footer .small {
+  font-size: 0.8rem !important;
+}
+footer .grey {
+  background-color: rgba(0, 0, 0, 0.1) !important;
+  color: rgba(0, 0, 0, 0.7) !important;
+  min-height: 3rem !important;
+}
+footer nav.menu {
+  font-size: 0.9rem !important;
+  border: 0 !important;
+}
+footer nav.menu .item:first-child {
+  padding-left: 0 !important;
+}
--- a/public/index.php
+++ b/public/index.php
@ -0,0 +1,9 @@
+<?php
+$__environment = 'web';
+include_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'bootstrap',
+  'app.php'
+]);
+
+$app->run();
--- a/resources/data/clientes.yml
+++ b/resources/data/clientes.yml
--- a/resources/data/eventos.yml
+++ b/resources/data/eventos.yml
@ -0,0 +1,24 @@
+- titulo: 2da Corrida Famliar Inclusiva
+  empresa: DIMERC
+- titulo: Dia de la Familia
+  empresa: BUPA
+- titulo: Fiestas Patrias
+  empresa: CONSORCIO
+- titulo: Pausas Activas
+  empresa: DIMEIGGS
+- titulo: 2da Corrida Famliar Inclusiva
+  empresa: DIMERC
+- titulo: Dia de la Familia
+  empresa: BUPA
+- titulo: Fiestas Patrias
+  empresa: CONSORCIO
+- titulo: Pausas Activas
+  empresa: DIMEIGGS
+- titulo: 2da Corrida Famliar Inclusiva
+  empresa: DIMERC
+- titulo: Dia de la Familia
+  empresa: BUPA
+- titulo: Fiestas Patrias
+  empresa: CONSORCIO
+- titulo: Pausas Activas
+  empresa: DIMEIGGS
--- a/resources/data/servicios.yml
+++ b/resources/data/servicios.yml
@ -0,0 +1,6 @@
+- titulo: Eventos Calidad de Vida
+  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
+- titulo: Eventos Deportivos
+  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
+- titulo: Eventos Recreativos
+  contenido: "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut"
--- a/resources/data/testimonios.yml
+++ b/resources/data/testimonios.yml
@ -0,0 +1,4 @@
+- contenido: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+  emisor: Catalina de la Maza, Calidad de Vida, CONSORCIO
+- contenido: "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+  emisor: Arturo Prat, Capitan, Esmeralda
--- a/resources/routes/router.php
+++ b/resources/routes/router.php
@ -0,0 +1,8 @@
+<?php
+$filename = implode(DIRECTORY_SEPARATOR, [
+  __DIR__,
+  $__environment . '.php'
+]);
+if (file_exists($filename)) {
+  include_once $filename;
+}
--- a/resources/routes/web.php
+++ b/resources/routes/web.php
@ -0,0 +1,4 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Home;
+
+$app->get('/', Home::class);
--- a/resources/views/home.blade.php
+++ b/resources/views/home.blade.php
@ -0,0 +1,17 @@
+@extends('layout.base')
+
+@section('page_content')
+  @include('home.banner')
+  @include('home.servicios')
+  @include('home.frase')
+  @include('home.nosotros')
+  @include('home.clientes')
+  @include('home.testimonios')
+  @include('home.eventos')
+  @include('home.contacto')
+@endsection
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/home.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet" />
+@endpush
--- a/resources/views/home/banner.blade.php
+++ b/resources/views/home/banner.blade.php
@ -0,0 +1,25 @@
+<div id="banner">
+  <div class="ui container">
+    <div class="ui center aligned stackable grid">
+      <div class="row">
+        <div class="eight wide column">
+          <div class="ui inverted header">
+            <div class="content" style="font-weight: 900; font-size: 2.3rem; margin-bottom: 1rem;">
+              {{$banner->title}}
+            </div>
+            <div class="descripcion" style="font-weight: 300; font-size: 1.8rem;">
+              {{$banner->contenido}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="three wide column">
+          <button class="ui fluid huge inverted basic button" style="font-weight: 900;">
+            DESCARGA
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/resources/views/home/clientes.blade.php
+++ b/resources/views/home/clientes.blade.php
@ -0,0 +1,81 @@
+<div class="ui container" id="clientes">
+  <div class="ui center aligned large header">
+    CLIENTES
+  </div>
+  <div class="ui grid">
+    <div class="column ci">
+      <i class="left chevron big icon" id="left_arrow"></i>
+    </div>
+    <div class="fourteen wide column">
+      <div class="ui center aligned stackable grid" id="img_clientes">
+        <div class="row">
+          @for ($i = 0; $i < min(10, count($clientes)); $i += 2)
+            <div class="three wide column">
+              {!!$clientes[$i]!!}
+            </div>
+          @endfor
+        </div>
+        <div class="row">
+          @for ($i = 1; $i < min(10, count($clientes)); $i += 2)
+            <div class="three wide column">
+              {!!$clientes[$i]!!}
+            </div>
+          @endfor
+        </div>
+      </div>
+    </div>
+    <div class="column ci">
+      <i class="right chevron big icon" id="right_arrow"></i>
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var clientes = [
+      @foreach ($clientes as $cliente)
+        '{!!$cliente!!}',
+      @endforeach
+    ]
+    var current = 0
+    function decreaseClientes() {
+      $('#img_clientes').find('.row').find('.column:last-child').remove()
+      current -= 2
+      if (current < -8) {
+        current = clientes.length - 10
+      }
+      n = current
+      if (n < 0) {
+        n = clientes.length + n
+      }
+      $('#img_clientes').find('.row:first-child').prepend(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[n])
+      )
+      $('#img_clientes').find('.row:last-child').prepend(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[n + 1])
+      )
+    }
+    function increaseClientes() {
+      $('#img_clientes').find('.row').find('.column:first-child').remove()
+      current += 2
+      if (current > clientes.length - 10) {
+        current = -8
+      }
+      $('#img_clientes').find('.row:first-child').append(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 8])
+      )
+      $('#img_clientes').find('.row:last-child').append(
+        $('<div></div>').attr('class', 'three wide column').append(clientes[current + 9])
+      )
+    }
+    $(document).ready(function() {
+      $('.ci .icon').css('cursor', 'pointer').click(function() {
+        if ($(this).attr('class').indexOf('left') != -1) {
+          decreaseClientes()
+          return
+        }
+        increaseClientes()
+      })
+    })
+  </script>
+@endpush
--- a/resources/views/home/contacto.blade.php
+++ b/resources/views/home/contacto.blade.php
@ -0,0 +1,55 @@
+<div class="ui container" id="contacto">
+  <div class="ui stackable center aligned grid">
+    <div class="three wide column">
+      <div class="ui huge header">
+        CONTACTO
+      </div>
+    </div>
+  </div>
+  <div class="ui stackable two columns grid">
+    <div class="column">
+      <form class="ui form" id="formulario" method="post" action="{{$urls->base}}/contacto">
+        <div class="field">
+          <input type="text" name="nombre" placeholder="Nombre" />
+        </div>
+        <div class="field">
+          <input type="text" name="telefono" placeholder="Teléfono" />
+        </div>
+        <div class="field">
+          <input type="text" name="email" placeholder="Email" />
+        </div>
+        <div class="field">
+          <textarea name="mensaje" placeholder="Mensaje"></textarea>
+        </div>
+        <button class="ui fluid orange button">
+          ENVIAR
+        </button>
+      </form>
+    </div>
+    <div class="column">
+      <div class="ui embed" id="map" data-source="Google Maps" data-url="{{$urls->map}}"></div>
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('#formulario').submit(function(e) {
+        e.preventDefault()
+
+        var nombre = $(this).find("[name='nombre']").val()
+        var telefono = $(this).find("[name='telefono']").val()
+        var email = $(this).find("[name='email']").val()
+        var mensaje = $(this).find("[name='mensaje']").val()
+
+        $.post('{{$urls->base}}/contacto', {nombre: nombre, telefono: telefono, email: email, mensaje: mensaje}, function(data) {
+          console.debug(data)
+        }, 'json')
+
+        return false
+      })
+      $('#map').embed()
+    })
+  </script>
+@endpush
--- a/resources/views/home/eventos.blade.php
+++ b/resources/views/home/eventos.blade.php
@ -0,0 +1,31 @@
+<div id="eventos">
+  <div class="ui container">
+    <div class="ui center aligned huge header">
+      EVENTOS
+    </div>
+    <div class="ui centered grid">
+      <div class="center aligned column">
+        <div class="ui tabular compact menu">
+          <a class="active item" data-filter="none">Todos</a>
+          @foreach ($servicios as $i => $servicio)
+            <a class="item" data-filter="{{$i}}">{{$servicio->titulo}}</a>
+          @endforeach
+        </div>
+      </div>
+    </div>
+    <div class="ui stackable center aligned grid">
+      @foreach ($eventos as $evento)
+        <div class="four wide column">
+          <div class="ui basic segment">
+            {!!$evento->image!!}
+            <div class="ui center aligned header">
+              {{$evento->titulo}}
+              <br />
+              {{$evento->empresa}}
+            </div>
+          </div>
+        </div>
+      @endforeach
+    </div>
+  </div>
+</div>
--- a/resources/views/home/frase.blade.php
+++ b/resources/views/home/frase.blade.php
@ -0,0 +1,12 @@
+<div class="ui container" id="frase">
+  <div class="ui center aligned grid">
+    <div class="twelve wide column">
+      <div class="ui header">
+        {{$frase->titulo}}
+      </div>
+      <p>
+        {{$frase->contenido}}
+      </p>
+    </div>
+  </div>
+</div>
--- a/resources/views/home/nosotros.blade.php
+++ b/resources/views/home/nosotros.blade.php
@ -0,0 +1,23 @@
+<div id="nosotros">
+  <div class="ui container">
+    <div class="ui stackable two columns grid">
+      <div class="column">
+        <div class="ui fluid placeholder">
+          <div class="image"></div>
+        </div>
+      </div>
+      <div class="column contenido">
+        <div class="ui large header">
+          NOSOTROS
+        </div>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+          nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
--- a/resources/views/home/servicios.blade.php
+++ b/resources/views/home/servicios.blade.php
@ -0,0 +1,32 @@
+<div class="ui container" id="servicios">
+  <div class="ui center aligned huge header">
+    SERVICIOS
+  </div>
+  <div class="ui center aligned grid">
+    <div class="twelve wide column">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+    </div>
+    <div class="row">
+      <div class="twelve wide column">
+        <div class="ui center aligned stackable grid">
+          <div class="three columns row">
+            @foreach ($servicios as $servicio)
+              <div class="column">
+                <div class="ui placeholder">
+                  <div class="square image"></div>
+                </div>
+                <div class="ui header">
+                  {{$servicio->titulo}}
+                </div>
+                <div class="ui content">
+                  {{$servicio->contenido}}
+                </div>
+              </div>
+            @endforeach
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/resources/views/home/testimonios.blade.php
+++ b/resources/views/home/testimonios.blade.php
@ -0,0 +1,56 @@
+<div id="testimonios">
+  <div class="ui container">
+    <div class="ui center aligned grid">
+      <div class="fourteen wide column" id='testimonio'>
+        <p>
+          <i>
+            {{$testimonios[0]->contenido}}
+          </i>
+        </p>
+        <div class="ui header">
+          {{$testimonios[0]->emisor}}
+        </div>
+      </div>
+    </div>
+    <div class="ui center aligned basic segment" id="marcador">
+      @foreach ($testimonios as $i => $t)
+        <i class="small circle @if ($i > 0)
+          outline
+        @endif icon" data-id="{{$i}}"></i>
+      @endforeach
+    </div>
+  </div>
+</div>
+
+@push('scripts')
+  <script type="text/javascript">
+    var testimonios = [
+      @foreach ($testimonios as $testimonio)
+        {
+          contenido: '{{$testimonio->contenido}}',
+          emisor: '{{$testimonio->emisor}}'
+        },
+      @endforeach
+    ]
+    var current = 0
+    function cambiar(id) {
+      if (id == current) {
+        return
+      }
+      $('#testimonio').html('').append(
+        $('<p></p>').html(testimonios[id].contenido)
+      ).append(
+        $('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
+      )
+      $('#marcador').find(".icon[data-id='" + current + "']").addClass('outline')
+      $('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
+      current = id
+    }
+    $(document).ready(function() {
+      $('#marcador').find('.icon').css('cursor', 'pointer').click(function() {
+        var id = $(this).attr('data-id')
+        cambiar(id)
+      })
+    })
+  </script>
+@endpush
--- a/resources/views/layout/base.blade.php
+++ b/resources/views/layout/base.blade.php
@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="es">
+@include('layout.head')
+@include('layout.body')
+</html>
--- a/resources/views/layout/body.blade.php
+++ b/resources/views/layout/body.blade.php
@ -0,0 +1,5 @@
+<body>
+  @include('layout.header')
+  @yield('page_content')
+  @include('layout.footer')
+</body>
--- a/resources/views/layout/footer.blade.php
+++ b/resources/views/layout/footer.blade.php
@ -0,0 +1,21 @@
+<footer class="ui fixed">
+  <div class="dark-grey">
+    <div class="ui inverted container main">
+      <div class="ui stackable grid">
+        <div class="three columns row">
+          <div class="column">
+            @include('layout.footer.contacto')
+          </div>
+          <div class="column">
+            @include('layout.footer.ubicacion')
+          </div>
+          <div class="column">
+            @include('layout.footer.redes')
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  @include('layout.footer.menu')
+</footer>
+@include('layout.scripts')
--- a/resources/views/layout/footer/contacto.blade.php
+++ b/resources/views/layout/footer/contacto.blade.php
@ -0,0 +1,15 @@
+<div style="text-align: center;">
+  <a href="{{$urls->base}}/contacto">
+    <i class="big icon icon-contacto"></i>
+    <p>
+      <strong>
+        CONTACTO
+      </strong>
+    </p>
+  </a>
+    <p>
+      <a href="tel:56 9 9334 3645">+56 9 9334 3645</a>
+      <br />
+      <a href="mailto:mauriciogonzalez@totalsport.cl">mauriciogonzalez@totalsport.cl</a>
+    </p>
+</div>
--- a/resources/views/layout/footer/menu.blade.php
+++ b/resources/views/layout/footer/menu.blade.php
@ -0,0 +1,24 @@
+<div class="grey">
+  <nav class="ui container attached text stackable menu">
+    <a class="item" href="{{$urls->base}}#servicios">
+      Servicios
+    </a>
+    <a class="item" href="{{$urls->base}}#nosotros">
+      Nosotros
+    </a>
+    <a class="item" href="{{$urls->base}}#clientes">
+      Clientes
+    </a>
+    <a class="item" href="{{$urls->base}}#eventos">
+      Eventos
+    </a>
+    <a class="item" href="{{$urls->base}}#contacto">
+      Contacto
+    </a>
+    <div class="right menu">
+      <div class="item">
+        Copyright&copy; Todos los derechos reservados a TotalSport
+      </div>
+    </div>
+  </nav>
+</div>
--- a/resources/views/layout/footer/redes.blade.php
+++ b/resources/views/layout/footer/redes.blade.php
--- a/resources/views/layout/footer/ubicacion.blade.php
+++ b/resources/views/layout/footer/ubicacion.blade.php
@ -0,0 +1,17 @@
+<div style="text-align: center;">
+  <a href="{{$urls->base}}/contacto">
+    <i class="big icon icon-ubicacion"></i>
+    <p>
+      <strong>
+        UBICACI&Oacute;N
+      </strong>
+    </p>
+  </a>
+  <a href="{{$urls->base}}/contacto">
+    <p>
+      Av. Nueva Providencia 1945, Of. 919,
+      <br />
+      Las Condes.
+    </p>
+  </a>
+</div>
--- a/resources/views/layout/head.blade.php
+++ b/resources/views/layout/head.blade.php
@ -0,0 +1,8 @@
+<head>
+  <meta charset="utf-8" />
+  <title>
+    Total Sport
+    @yield('page_title')
+  </title>
+  @include('layout.styles')
+</head>
--- a/resources/views/layout/header.blade.php
+++ b/resources/views/layout/header.blade.php
@ -0,0 +1,3 @@
+<div class="ui container">
+  @include('layout.menu')
+</div>
--- a/resources/views/layout/menu.blade.php
+++ b/resources/views/layout/menu.blade.php
@ -0,0 +1,21 @@
+<nav class="ui massive stackable center aligned text fluid three item grey menu">
+  <nav class="three item stackable menu">
+    <a class="item" href="{{$urls->base}}#servicios">Servicios</a>
+    <a class="item" href="{{$urls->base}}#nosotros">Nosotros</a>
+    <a class="item" href="{{$urls->base}}#clientes">Clientes</a>
+  </nav>
+  <a class="item" href="{{$urls->base}}">
+    <div class="ui header" id="page_logo">
+      Total<span class="orange">Sport</span>
+    </div>
+  </a>
+  <nav class="two item stackable menu">
+    <a class="item" href="{{$urls->base}}#eventos">Eventos</a>
+    <a class="item" href="{{$urls->base}}#contacto">Contacto</a>
+  </nav>
+</nav>
+
+@push('styles')
+  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/header.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" />
+@endpush
--- a/resources/views/layout/scripts.blade.php
+++ b/resources/views/layout/scripts.blade.php
@ -0,0 +1,7 @@
+@if (isset($assets->scripts))
+  @foreach ($assets->scripts as $script)
+    <script type="text/javascript" src="{{$script}}"></script>
+  @endforeach
+@endif
+
+@stack('scripts')
--- a/resources/views/layout/styles.blade.php
+++ b/resources/views/layout/styles.blade.php
@ -0,0 +1,14 @@
+@if (isset($assets->styles))
+  @foreach ($assets->styles as $style)
+    <link rel="stylesheet" type="text/css" href="{{$style}}" />
+  @endforeach
+@endif
+@if (isset($assets->fonts))
+  @foreach ($assets->fonts as $type => $fs)
+    @foreach ($fs as $font)
+      <link type="{{$type}}" href="{{$font}}" />
+    @endforeach
+  @endforeach
+@endif
+
+@stack('styles')