/themes/iugo/pages/work.htm

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

function onStart() 
{
    // Se me ocurrio de esta forma
    // filtrar los trabajos realizados por categorias
    // aprovechar y hacer dinamico el activo en el menu

    if (Request::has('cat')) {
        $category = Request::input('cat');
        $value = ucfirst($category);
        $this['projects'] = Projects::whereCategory($value)->orderBy('created_at', 'desc')->get();
        $this['active'] = $value;
        $this['canonical'] = '/?cat='.$category;
    } else {
        $this['projects'] = Projects::orderBy('created_at', 'desc')->get();
        $this['active'] = 'work';
        $this['canonical'] = '';
    }

    if ($this['active'] == 'E-commerce') {
        $this['footer_color'] = '#63f6eb';
    } else if ($this['active'] == 'Branding') {
        $this['footer_color'] = '#ff539e';
    } else if ($this['active'] == 'Software') {
        $this['footer_color'] = '#57bcff';
    } else {
        $this['footer_color'] = '#ffdc45';
    }

}
?>
==
{% put styles %}
    <!-- <link rel="stylesheet" media="all" href="{{'assets/css/home.css'|theme}}">  -->
    <title>IUGO | {{this.page.meta_title}}</title>
    <link rel="canonical" href="{{'work'|page}}{{ canonical }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="IUGO | {{this.page.meta_title}}">
    <meta property="og:url" content="{{'work'|page}}">
    <meta property="og:description" content="">
    <meta property="article:published_time" content="">
    <meta name="twitter:title" content="IUGO | {{this.page.meta_title}}">
    <meta name="twitter:description" content="">
    <meta name="description" content="">
    <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 | {{this.page.meta_title}}">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="{{ asset('/img/logo/logo.png') }}">
{% endput %}

    <!-- begin header -->
    {% partial "header" %}
    <!-- end header -->
<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>
<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">
                <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>
<div class="projects">
    <div class="projects__inner inner">
        <div class="projects__out">
        {% for project in projects %}
            {% if loop.index % 2 != 0 %}
            <div class="projects__field" id="#{{ project.category }}">
                <div class="project" data-anim-parent>
                    <div class="project__img-wrap" data-anim-from="bottom">
                        <div class="project__img" style="background-image: url({{project.main_image|media}})">
                            <div class="project__overlay" style="background-color: {{project.color}}" data-overlay-direction="bottom-left"></div>
                        </div>
                    </div>
                    <div class="project__wrap">
                        <div class="project__content">
                            <a href="/work/{{project.slug}}" class="project__name" data-anim-from="bottom">
                                <span class="project__line" style="background-color: {{project.color}}"></span>{{project.name}}
                                <svg class="icon icon-arrow-right ">
                                    <use xlink:href="{{'assets/images/sprite.svg#icon-arrow-right'|theme}}"></use>
                                </svg>
                            </a>
                            <div class="project__out">
                                <div class="project__text" data-anim-from="bottom">{{project.text}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="projects__field" id="#{{ project.category }}">
                <div class="project" data-anim-parent>
                    <div class="project__wrap">
                        <div class="project__content">
                            <a href="/work/{{project.slug}}" class="project__name" data-anim-from="bottom">
                                <span class="project__line" style="background-color: {{project.color}}"></span>{{project.name}}
                                <svg class="icon icon-arrow-right ">
                                    <use xlink:href="{{'assets/images/sprite.svg#icon-arrow-right'|theme}}"></use>
                                </svg>
                            </a>
                            <div class="project__out">
                                <div class="project__text" data-anim-from="bottom">{{project.text}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="project__img-wrap" data-anim-from="bottom">
                        <div class="project__img" style="background-image: url({{project.main_image|media}})">
                            <div class="project__overlay" style="background-color: {{project.color}}" data-overlay-direction="top-right"></div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
        </div>
    </div>
</div>
<div class="banner" style="background-color: {{ footer_color }}" data-anim-parent>
    <div class="inner banner__inner">
        <div class="banner__content">
            <div class="banner__label" data-anim-from="bottom">GOT A</div>
            <div class="banner__title banner__title_sm" data-anim-from="bottom">COOL PROJECT FOR US?</div>
        </div>
        <div class="banner__btn" data-anim-from="bottom">
            <a href="#" class="btn btn_wide btn_lg btn_dark js-nav-contacts">DROP US A LINE</a>
        </div>
    </div>
</div>