diff --git a/bootstrap/app.php b/bootstrap/app.php
new file mode 100644
index 0000000..22a533d
--- /dev/null
+++ 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'
+]);
diff --git a/bootstrap/common/config.php b/bootstrap/common/config.php
new file mode 100644
index 0000000..4effb89
--- /dev/null
+++ 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'
+  ]))
+];
diff --git a/bootstrap/composer.php b/bootstrap/composer.php
new file mode 100644
index 0000000..c8fb135
--- /dev/null
+++ b/bootstrap/composer.php
@@ -0,0 +1,6 @@
+<?php
+require_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'vendor',
+  'autoload.php'
+]);
diff --git a/bootstrap/web/config.php b/bootstrap/web/config.php
new file mode 100644
index 0000000..18424c4
--- /dev/null
+++ 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'
+      ]
+    ]
+  ]
+];
diff --git a/bootstrap/web/setup.php b/bootstrap/web/setup.php
new file mode 100644
index 0000000..46f7ba6
--- /dev/null
+++ 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')
+      ]
+    );
+  }
+];
diff --git a/common/Controller/Web/Home.php b/common/Controller/Web/Home.php
new file mode 100644
index 0000000..767bcf5
--- /dev/null
+++ 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)));
+  }
+}
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..9ff02f2
--- /dev/null
+++ 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"
+      }
+    }
+}
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..66ef8f6
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,4 @@
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule ^ index.php [QSA,L]
diff --git a/public/assets/styles/header.css b/public/assets/styles/header.css
new file mode 100644
index 0000000..16c8451
--- /dev/null
+++ 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;
+}
diff --git a/public/assets/styles/home.css b/public/assets/styles/home.css
new file mode 100644
index 0000000..17bad2c
--- /dev/null
+++ 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%;
+}
diff --git a/public/assets/styles/main.css b/public/assets/styles/main.css
new file mode 100644
index 0000000..11b773b
--- /dev/null
+++ 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;
+}
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..abd3e47
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,9 @@
+<?php
+$__environment = 'web';
+include_once implode(DIRECTORY_SEPARATOR, [
+  dirname(__DIR__),
+  'bootstrap',
+  'app.php'
+]);
+
+$app->run();
diff --git a/resources/data/clientes.yml b/resources/data/clientes.yml
new file mode 100644
index 0000000..e69de29
diff --git a/resources/data/eventos.yml b/resources/data/eventos.yml
new file mode 100644
index 0000000..24396e2
--- /dev/null
+++ 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
diff --git a/resources/data/servicios.yml b/resources/data/servicios.yml
new file mode 100644
index 0000000..c41fd56
--- /dev/null
+++ 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"
diff --git a/resources/data/testimonios.yml b/resources/data/testimonios.yml
new file mode 100644
index 0000000..064eb92
--- /dev/null
+++ 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
diff --git a/resources/routes/router.php b/resources/routes/router.php
new file mode 100644
index 0000000..36b98e2
--- /dev/null
+++ b/resources/routes/router.php
@@ -0,0 +1,8 @@
+<?php
+$filename = implode(DIRECTORY_SEPARATOR, [
+  __DIR__,
+  $__environment . '.php'
+]);
+if (file_exists($filename)) {
+  include_once $filename;
+}
diff --git a/resources/routes/web.php b/resources/routes/web.php
new file mode 100644
index 0000000..4426b15
--- /dev/null
+++ b/resources/routes/web.php
@@ -0,0 +1,4 @@
+<?php
+use ProVM\TotalSport\Common\Controller\Web\Home;
+
+$app->get('/', Home::class);
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
new file mode 100644
index 0000000..3bc1d0f
--- /dev/null
+++ 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
diff --git a/resources/views/home/banner.blade.php b/resources/views/home/banner.blade.php
new file mode 100644
index 0000000..ae9f451
--- /dev/null
+++ 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>
diff --git a/resources/views/home/clientes.blade.php b/resources/views/home/clientes.blade.php
new file mode 100644
index 0000000..f359b54
--- /dev/null
+++ 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
diff --git a/resources/views/home/contacto.blade.php b/resources/views/home/contacto.blade.php
new file mode 100644
index 0000000..ea4a895
--- /dev/null
+++ 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
diff --git a/resources/views/home/eventos.blade.php b/resources/views/home/eventos.blade.php
new file mode 100644
index 0000000..c924175
--- /dev/null
+++ 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>
diff --git a/resources/views/home/frase.blade.php b/resources/views/home/frase.blade.php
new file mode 100644
index 0000000..b5c602a
--- /dev/null
+++ 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>
diff --git a/resources/views/home/nosotros.blade.php b/resources/views/home/nosotros.blade.php
new file mode 100644
index 0000000..6efe538
--- /dev/null
+++ 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>
diff --git a/resources/views/home/servicios.blade.php b/resources/views/home/servicios.blade.php
new file mode 100644
index 0000000..02fdae5
--- /dev/null
+++ 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>
diff --git a/resources/views/home/testimonios.blade.php b/resources/views/home/testimonios.blade.php
new file mode 100644
index 0000000..2ecf216
--- /dev/null
+++ 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
diff --git a/resources/views/layout/base.blade.php b/resources/views/layout/base.blade.php
new file mode 100644
index 0000000..9deb8c1
--- /dev/null
+++ b/resources/views/layout/base.blade.php
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html lang="es">
+@include('layout.head')
+@include('layout.body')
+</html>
diff --git a/resources/views/layout/body.blade.php b/resources/views/layout/body.blade.php
new file mode 100644
index 0000000..36dc72b
--- /dev/null
+++ b/resources/views/layout/body.blade.php
@@ -0,0 +1,5 @@
+<body>
+  @include('layout.header')
+  @yield('page_content')
+  @include('layout.footer')
+</body>
diff --git a/resources/views/layout/footer.blade.php b/resources/views/layout/footer.blade.php
new file mode 100644
index 0000000..e2bc714
--- /dev/null
+++ 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')
diff --git a/resources/views/layout/footer/contacto.blade.php b/resources/views/layout/footer/contacto.blade.php
new file mode 100644
index 0000000..04a4edd
--- /dev/null
+++ 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>
diff --git a/resources/views/layout/footer/menu.blade.php b/resources/views/layout/footer/menu.blade.php
new file mode 100644
index 0000000..ff33fa7
--- /dev/null
+++ 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>
diff --git a/resources/views/layout/footer/redes.blade.php b/resources/views/layout/footer/redes.blade.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/layout/footer/ubicacion.blade.php b/resources/views/layout/footer/ubicacion.blade.php
new file mode 100644
index 0000000..0e5c03f
--- /dev/null
+++ 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>
diff --git a/resources/views/layout/head.blade.php b/resources/views/layout/head.blade.php
new file mode 100644
index 0000000..e425f11
--- /dev/null
+++ 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>
diff --git a/resources/views/layout/header.blade.php b/resources/views/layout/header.blade.php
new file mode 100644
index 0000000..cabe09d
--- /dev/null
+++ b/resources/views/layout/header.blade.php
@@ -0,0 +1,3 @@
+<div class="ui container">
+  @include('layout.menu')
+</div>
diff --git a/resources/views/layout/menu.blade.php b/resources/views/layout/menu.blade.php
new file mode 100644
index 0000000..6398851
--- /dev/null
+++ 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
diff --git a/resources/views/layout/scripts.blade.php b/resources/views/layout/scripts.blade.php
new file mode 100644
index 0000000..da3033c
--- /dev/null
+++ 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')
diff --git a/resources/views/layout/styles.blade.php b/resources/views/layout/styles.blade.php
new file mode 100644
index 0000000..819182b
--- /dev/null
+++ 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')