/themes/iugo/pages/work-detail.htm

title = "Detalle"
url = "/work/:slug"
layout = "default"
meta_title = "Laravel - UX/UI - Branding"
is_hidden = 0
==
<?php
use Iugo\Proyectos\Models\Projects;

function onStart() 
{
    $this['project'] = Projects::where('slug', '=', $this->param('slug'))->first();
    // Se me ocurrio de esta forma
    // filtrar los trabajos realizados por categorias
    // aprovechar y hacer dinamico el activo en el menu
    $category = $this['project']['category'];
    $value = ucfirst($category);
    $this['active'] = $value;
    $this['canonical'] = '/?cat='.$category;

}
?>
==
{% put styles %}
    <title>IUGO | {{ project.name }}</title>
    <link rel="canonical" href="{{'home'|page}}/work/{{project.slug}}">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ project.name }}">
    <meta property="og:url" content="{{'home'|page}}/work/{{project.slug}}">
    <meta property="og:description" content="{{ project.text }}">
    <meta property="article:published_time" content="">
    <meta name="twitter:title" content="{{ project.name }}">
    <meta name="twitter:description" content="{{ project.text }}">
    <meta name="description" content="{{ project.text }}">
    <meta name="twitter:image" content="{{ asset('/img/logo/logo.png') }}">
    <meta property="og:image" content="{{ asset('/img/logo/logo.png') }}">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="300">
    <meta property="og:image:height" content="300">
    <meta itemprop="name" content="IUGO | {{ project.name }}">
    <meta itemprop="description" content="{{ project.text }}">
    <meta itemprop="image" content="{{ asset('/img/logo/logo.png') }}">
{% endput %}

    <!-- begin header -->
    {% partial "header" %}
    <!-- end header -->
<!-- begin hero -->
    <div class="hero">
        <div class="hero__bg" style="background-image: url({{ 'assets/images/pexels-photo.jpg'|theme }})" data-paroller-factor="0.1" data-paroller-type="foreground"></div>
        <div class="hero__inner inner">
            <h1 class="hero__title title-bigger">work</h1>
        </div>
    </div>
    <!-- end hero -->
    <!-- begin navigation -->
    <div class="navigation">
        <div class="navigation__inner inner">
            <div class="navigation__out js-navigation-out">
                <div class="navigation__current js-navigation-current">
                    <span class="js-navigation-current-text"></span>
                    <svg class="icon icon-arrow-right ">
                        <use xlink:href="{{'assets/images/sprite.svg#icon-arrow-right'|theme}}"></use>
                    </svg>
                </div>
                <div class="navigation__wrap js-navigation-wrap">
                    <a href="{{'work'|page}}" class="navigation__btn">
                        <svg class="icon icon-arrow-left ">
                            <use xlink:href="{{'assets/images/sprite.svg#icon-arrow-left'|theme}}"></use>
                        </svg>
                        back
                    </a>
                    <ul class="navigation__list">
                        <li class="navigation__item {{ active == 'work' ? 'is-active' : '' }}">
                            <a class="navigation__link" href="{{'work'|page}}">Latest </a>
                        </li>
                        <li class="navigation__item {{ active == 'E-commerce' ?  'is-active' : '' }}">
                            <a class="navigation__link" href="{{'work'|page}}?cat={{ 'E-commerce'|lower }}">e-Commerce</a>
                        </li>
                        <li class="navigation__item {{ active == 'Interfaces' ?  'is-active' : '' }}">
                            <a class="navigation__link" href="{{'work'|page}}?cat={{ 'Interfaces'|lower }}">Interfaces</a>
                        </li>
                        <li class="navigation__item {{ active == 'Software' ?  'is-active' : '' }}">
                            <a class="navigation__link" href="{{'work'|page}}?cat={{ 'Software'|lower }}">Software</a>
                        </li>
                        <li class="navigation__item {{ active == 'Branding' ?  'is-active' : '' }}">
                            <a class="navigation__link" href="{{'work'|page}}?cat={{ 'Branding'|lower }}">Branding</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- end navigation -->
    <div class="project-details">
        <div class="sm-section" data-anim-parent>
            <div class="inner sm-section__inner">
                <div class="details">
                    <div class="details__figure" data-anim-from="bottom">
                        <img src="{{project.image|media}}" alt="IUGO | {{ project.name }}"> 
                    </div>
                    <div class="details__content">
                        <div class="details__header" data-anim-from="bottom">
                            <!-- <div class="details__label">EL PAÍS</div> -->
                            <div class="details__title">{{ project.name }}</div>
                        </div>
                        <div class="details__description" data-anim-from="bottom">
                            <p>
                                {{ project.text }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sm-section" data-anim-parent>
            <div class="inner sm-section__inner">
                <div class="sm-info">
                    <div class="sm-info__figures" data-anim-from="bottom">
                        <div class="sm-info__row">
                                <img src="{{project.block1_image|media}}" style="width: 100%;" alt="IUGO | {{ project.name }}">
                                <!-- <div class="sm-info__img" style="background-image: url({{project.block1_image|media}});"></div> -->
                        </div>
                    </div>
                    <div class="sm-info__content" data-anim-from="bottom">
                        <div class="sm-info__title">
                            {{ project.block1_title }}
                        </div>
                        <div class="sm-info__description">
                            <p>
                                {{ project.block1_text }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sm-section" data-anim-parent>
            <div class="inner sm-section__inner">
                <div class="sm-info sm-info_right">
                    <div class="sm-info__figures" data-anim-from="bottom">
                        <div class="sm-info__images">
                            <img src="{{project.block2_image|media}}" style="width: 100%;" alt="IUGO | {{ project.name }}">
                            <!-- <div class="sm-info__image sm-info__image_sm">
                                <img src="{{project.block2_image|media}}" alt="IUGO | {{ project.name }}">
                            </div> -->
                        </div>
                    </div>
                    <div class="sm-info__content" data-anim-from="bottom">
                        <div class="sm-info__title">
                            {{ project.block2_title }}
                        </div>
                        <div class="sm-info__description">
                            <p>
                                {{ project.block2_text }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sm-banner" data-anim-parent>
        <div class="sm-banner__img" data-anim-from>
            <div class="sm-banner__img-in" style="background-image: url({{project.block3_image|media}})"></div>
        </div>
        <div class="inner sm-banner__inner">
            <div class="sm-banner__content" data-anim-from="bottom">
                <div class="sm-banner__title">
                    {{ project.block3_title }}
                </div>
                <div class="sm-info__description">
                    <p>
                        {{ project.block3_text }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- begin banner -->
    <div class="banner" style="background:{{ project.color }}" data-anim-parent>
        <div class="inner banner__inner">
            <div class="banner__content">
                <div class="banner__label" data-anim-from="bottom">
                    {% if project.category == 'E-commerce' %}
                    GOT AN
                    {% else %}
                    GOT A
                    {% endif %}
                </div>
                <div class="banner__title " data-anim-from="bottom">
                    {% if project.category == 'Interfaces' %}
                    UI/UX PROJECT? 
                    {% elseif project.category == 'Software' %}
                    SOFTWARE PROJECT?
                    {% elseif project.category == 'E-commerce' %}
                    E-COMMERCE PROJECT?
                    {% else %}
                    BRANDING PROJECT?
                    {% endif %}
                </div>
            </div>
            <div class="banner__btn" data-anim-from="bottom">
                <a href="#0" class="btn btn_wide btn_lg btn_dark js-nav-contacts">DROP US A LINE</a>
            </div>
        </div>
    </div>