<repo_name>cytechinformatica/home-page<file_sep>/app/scripts/i18n/translations.js
const _cy_translations = {
    'contact_email': {
        'en': '<EMAIL>',
        'pt': '<EMAIL>'
    },
    'copyright': {
        'pt': 'copyright © 2017'
    },
    'cytech_name': {
        'en': 'Cytech Informática',
        'pt': 'Cytech Informática'
    },
    'menu_about': {
        'pt': 'Sobre'
    },
    'menu_hibrid': {
        'pt': 'desenvolvimento multi-plataforma'
    },
    'menu_mobile': {
        'pt': 'Aplicativos Móveis'
    },
    'menu_portfolio': {
        'pt': 'Portfólio'
    },
    'menu_seo': {
        'pt': 'SEO'
    },
    'menu_visual': {
        'pt': 'Identidade Visual'
    },
    'menu_web': {
        'en': 'menu_web',
        'pt': 'Websites'
    },
    'page_name': {
        'en': 'Cytech',
        'pt': 'Cytech'
    },
    'portfolio_item_0_text': {
        'pt': 'Um aplicativo Android gratuito para o gerenciamento de rotinas de estudo.'
    },
    'portfolio_item_0_title': {
        'pt': 'Auxiliar de Rotina'
    },
    'portfolio_item_1_text': {
        'pt': 'Radar Livre é um sistema de monitoramento aéreo com aplicações multiplataforma, desenvolvido na Universidade Federal do Ceará.'
    },
    'portfolio_item_1_title': {
        'pt': 'Radar Livre'
    },
    'portfolio_item_2_text': {
        'pt': 'O ícone é baseado nas especificações do Material Design e representa uma formação rochosa famosa na região, a Pedra da Galinha Choca.'
    },
    'portfolio_item_2_title': {
        'pt': 'Ícone para UFC Campus Quixadá'
    },
    'portfolio_item_3_text': {
        'pt': 'Animação criada para representar o carregamento das páginas do site da empresa IZOTX.'
    },
    'portfolio_item_3_title': {
        'pt': 'Animação de progresso para empresa IZOTX'
    },
    'portfolio_item_4_text': {
        'pt': 'Página inicial dos sistemas da Universidade Federal do Ceará no campus de Quixadá. O front-end foi implementado com o Framework Materialize.'
    },
    'portfolio_item_4_title': {
        'pt': 'Sistemas UFC-Quixadá'
    },
    'portfolio_item_5_text': {
        'pt': 'Sistema de atendimento a serviços de psicologia e nutrição para a comunidade acadêmica da Universidade Federal do Ceará.'
    },
    'portfolio_item_5_title': {
        'pt': 'SINUTRI'
    },
    'portfolio_item_6_text': {
        'pt': 'Ícone do aplicativo e Landing page para o aplicativo Celeration Charts.'
    },
    'portfolio_item_6_title': {
        'pt': 'CELERATION CHARTS LANDING PAGE'
    },
    'section_about_text': {
        'pt': 'Olá, somos a Cytech Informática. Nós desenvolvemos soluções de TI com foco na qualidade, oferecendo as melhores alternativas e respeitando prazos e orçamentos. Sinta-se à vontade para entrar em contato e falar sobre sua grande ideia.'
    },
    'section_about_title': {
        'pt': 'Sobre Nós'
    },
    'section_hibrid_extra_text': {
        'pt': 'Aumente o tráfego de usuários no seu site e esteja sempre entre os melhores, através da otimização de resultados de buscas (SEO - Search Engine Optimization).'
    },
    'section_hibrid_text': {
        'pt': 'Um único aplicativo para várias plataformas. Economize tempo e dinheiro desenvolvendo sua grande ideia para Web, Android e IOS.'
    },
    'section_hibrid_title': {
        'pt': 'Desenvolvimento multi-plataforma'
    },
    'section_mobile_extra_text': {
        'pt': 'Os aplicativos móveis permitem atingir um número muito maior de clientes e proporcionar a estes uma experiência muito mais interessante e eficaz. Esse canal de comunicação direta entre empresa e cliente coloca os aplicativos no patamar máximo do potencial de sucesso como canal de marketing. Faça parte dessa tendência e desenvolva você também sua ideia para dispositivos móveis.'
    },
    'section_mobile_text': {
        'pt': 'DESENVOLVEMOS APLICATIVOS QUE CABEM NO SEU BOLSO! :^) CRIE SUA IDEIA E A TORNE MAIS ACESSÍVEL AOS SEUS USUÁRIOS, COM UM APLICATIVO QUE FICA LINDO TANTO NO SMARTPHONE QUANTO NO TABLET.'
    },
    'section_mobile_title': {
        'pt': 'Aplicativos Móveis'
    },
    'section_portfolio_title': {
        'pt': 'Portfólio'
    },
    'section_portifolio_title': {
        'pt': 'Portfólio'
    },
    'section_seo_extra_text': {
        'pt': 'Aumente o tráfego de usuários no seu site e esteja sempre entre os melhores, através da otimização de resultados de buscas (SEO - Search Engine Optimization).'
    },
    'section_seo_text': {
        'pt': 'Obtenha melhores resultados nos maiores mecanismos de buscas, como Google, Yahoo e Bing.'
    },
    'section_seo_title': {
        'pt': 'Otimização de Mecanismos de Buscas'
    },
    'section_text_visual': {
        'pt': 'Dê a sua ideia um visual moderno, sofisticado, que externe sua identidade e atinja o público certo. Dê a sua marca um visual único e destaque-se entre as outras.'
    },
    'section_title_visual': {
        'pt': 'Dê a sua ideia um visual moderno, sofisticado, que externe sua identidade e atinja o público certo. Dê a sua marca um visual único e destaque-se entre as outras.'
    },
    'section_visual_extra_text': {
        'pt': 'Dê a sua marca um visual único e destaque-se entre as outras.'
    },
    'section_visual_text': {
        'pt': 'Dê a sua ideia um visual moderno, sofisticado, que externe sua identidade e atinja o público certo. Dê a sua marca um visual único e destaque-se entre as outras.'
    },
    'section_visual_title': {
        'pt': 'Crie sua própria identidade visual'
    },
    'section_web_extra_text': {
        'pt': 'Impulsione seu neǵocio e o torne visível na internet. Torne sua ideia realidade através da criação de um web site moderno, elegante e que represente seu sonho.'
    },
    'section_web_text': {
        'pt': 'Desenvolva conosco desde sites pessoais a sistemas web complexos, como Lojas Virtuais e Sites Comerciais com atendimento ao público.'
    },
    'section_web_title': {
        'pt': 'Websites'
    },
    'see_less_btn': {
        'pt': 'menos'
    },
    'see_more_btn': {
        'pt': 'ver mais'
    },
    'slide_1_text_1': {
        'pt': 'Olá'
    },
    'slide_1_text_2': {
        'pt': 'Somos a'
    },
    'slide_1_text_3': {
        'pt': 'Cytech Informática!'
    },
    'slide_2_text_1': {
        'pt': 'Somos apaixonados por'
    },
    'slide_2_text_2': {
        'pt': 'desafios e'
    },
    'slide_2_text_3': {
        'pt': 'novas ideias!'
    },
    'slide_3_text_1': {
        'pt': 'E você, já pensou no seu grande projeto hoje?'
    },
    'slide_3_text_2': {
        'pt': 'Entre em contato '
    },
    'slide_3_text_3': {
        'pt': 'E compartilhe sua idea conosco! :)'
    }
}<file_sep>/app/scripts/devices.js
$(() => {

    $('.cy-device-auto-change').each((_, e) => {
        const el = $(e)
        const devices = [ 'imac', 'tablet', 'phone' ]
        let index = 0
        setInterval(() => {
            el.removeClass(`cy-device-${devices[index % devices.length]}`)
            el.addClass(`cy-device-${devices[++index % devices.length]}`)
        }, 2000)

    })

})<file_sep>/app/scripts/toolbar.js
$(() => {

    if($(window).width() < 993) return; 

    const toolbarComponent = $('.cy-toolbar')
    const headerFabComponent = $('.cy-header-fab')
    const firstSectionComponent = $('.1st-section')

    /**
     * MENUS
     */

    const wavesCount = 2
    const waves = []
    const waveTemplate = index =>
        (`<div id="cy-toolbar-active-circle-${index}" class="cy-toolbar-active-circle"></div>`)

    const state = {
        menu: -1,
        menus: [],
    }

    $('.cy-toolbar-menu').each((i, el) => {
        state.menus.push($(el))
        $(el).click(() => goToMenu(i))
    })

    const updateWaves = (index = state.menu) => {
        for (let i = 0; i < wavesCount; i++) {
            let wave = $(`#cy-toolbar-active-circle-${i}`)
            if (wave.length === 0) {
                wave = $($.parseHTML(waveTemplate(i)))
                wave.css({ transition: `all ${(i + 1) + 5}00ms cubic-bezier(0.8, 0, 0.2, 1)` })
                toolbarComponent.append(wave)
                waves.push(wave)
            }
        }

        const menu = state.menus[index]

        if (menu) {
            const menuPos = menu.position()

            let size = menu.height() / 1.15
            let factor = 1.618
            waves.map((w, i) => {
                size *= factor
                w.css({
                    top: menuPos.top + menu.height() / 2 - size / 2,
                    left: menuPos.left + menu.width() / 2 - size / 2,
                    width: size,
                    height: size
                })
            })
        } else {
            waves.map(w => w.css({
                top: 0,
                left: '50%',
                width: 0,
                height: 0
            }))
        }
    }

    const goToMenu = (index) => {
        state.menu = index
        updateWaves(index)
    }

    state.menus.map((m, i) => {
        const sectionId = m.attr('href').replace('#', '')
        const element = document.getElementById(sectionId)

        if(element) {
            new Waypoint({
                element: document.getElementById(sectionId),
                handler: function (direction) {
                    if (direction == 'down') {
                        goToMenu(i)
                    } else {
                        goToMenu(i - 1)
                    }
                },
                offset: 100
            })
        }

    })

    /**
     * END-MENUS
     */

    /**
     * TOOLBAR ANIM
     */

    $(window).scroll(() => {
        let windowScroll = $(window).scrollTop()
        if (windowScroll >= $(window).height() - 52) {
            toolbarComponent.removeClass('cy-toolbar-expanded')
            headerFabComponent.addClass('cy-hided')
            firstSectionComponent.css({ marginTop: 160 })
        } else {
            toolbarComponent.addClass('cy-toolbar-expanded')
            headerFabComponent.removeClass('cy-hided')
            firstSectionComponent.css({ marginTop: 0 })
        }

        windowScroll = Math.max(0, windowScroll - ($(window).height() - 52))

        const factor = (80 - Math.min(windowScroll, 80))
        toolbarComponent.css({ height: 80 + factor })

        /**
         * UPDATING MENU
         */
        updateWaves()
    })

})
<file_sep>/app/scripts/cool-grid.js
const __IZOTX_L_SVG = () => (`
    <svg
        width="162.56mm" height="162.56mm" version="1.1"
        viewBox="0 0 16256 16256">

        <g id="logo">
            <path
                class="left-leg"
                d="M8128 8601l21 4607c-1781,-4 -3571,231 -5292,692l-2384 -4099c2412,-778 4984,-1200 7655,-1200z" />
            <path
                class="right-leg"
                d="M8149 8601c2662,3 5225,423 7629,1198l-2379 4101c-1675,-449 -3434,-690 -5250,-692l0 -4607z" />
        </g>
    </svg>
`)

const __IZOTX_L = () => (`
    <div class="izotx-loading">
        <div class="izotx-loading-leg izotx-loading-leg-green">${__IZOTX_L_SVG()}</div>
        <div class="izotx-loading-leg izotx-loading-leg-orange">${__IZOTX_L_SVG()}</div>
        <div class="izotx-loading-leg izotx-loading-leg-blue">${__IZOTX_L_SVG()}</div>
        <div class="izotx-loading-leg izotx-loading-leg-green just-right-leg">${__IZOTX_L_SVG()}</div>
    </div>
`)

const __PORT_ITEMS = [
    { 
        size: 1, 
        link: 'https://play.google.com/store/apps/details?id=routinehelp.view',
        image: 'https://lh4.ggpht.com/KB3XcLlJQx6TBYMsxHsPKY_uYASgT0A7LiTLRTtIUlntNq-ApqBKa-wmPcMadD9Bugg=w300-rw',
    },
    { 
        size: 1, 
        link: 'http://www.radarlivre.com/',
        image: 'https://media.cmcdn.net/b99ee4b190d495b5466b/33237717/500x500.png',
        useImg: true,
    },
    { 
        size: 1, 
        image: 'https://media.cmcdn.net/8600c3c976fc7bd27e1c/33237727/500x500.png',
    },
    { 
        size: 1, 
        imageHTML: __IZOTX_L()
    },
    { 
        size: 2, 
        link: 'https://sistemas.quixada.ufc.br/',
        image: 'https://media.cmcdn.net/e30366116458051e34c5/33237473/960x539.png'
    },
    { 
        size: 1, 
        link: 'https://sistemas.quixada.ufc.br/sinutri/login',
        image: 'https://media.cmcdn.net/135853385d148278ab58/33237555/960x539.png'
    },
    { 
        size: 1, 
        link: 'https://celeration-charts.firebaseapp.com/',
        image: 'images/celeration.png'
    },
]

$(() => {
    const portfolioItemsElement = $('.cy-cool-grid')
    const portfolioItemTemplate = (item, i) => `
        <a ${item.link ? `href="${item.link}" target="_blank"` : ''} class="cy-cool-grid-tile cy-cool-grid-tile-${item.size}" ${item.image ? `data-image="${item.image}"` : '' }>
            <div class="cy-cool-grid-tile-background">
                ${item.imageHTML ? item.imageHTML : ''}
            </div>
            <div class="cy-cool-grid-tile-overlay">
                <p translate>portfolio_item_${i}_title</p>
                <p translate>portfolio_item_${i}_text</p>
            </div>
        </a>
    `

    __PORT_ITEMS.map((item, i) => portfolioItemsElement.append(portfolioItemTemplate(item, i)))

    $('.cy-cool-grid-tile').each((_, el) => {
        if($(el).data('image'))
            $(el).css({
                background: `url(${$(el).data('image')}) center/cover`
            })
    })

    window.__updateTranslation? window.__updateTranslation() : false
})<file_sep>/app/scripts/main.js
$(() => {

    $('.cy-btn-toggle-text').each((_, el) => {
        $(el).click(e => {
            e.preventDefault()
            const toExpand = $(`${$(el).data('to-expand')}`)
            const height = toExpand.find('p').outerHeight(true)

            if($(el).data('collapsed')) {
                toExpand.css({ height: 0 })
                $(el).data('collapsed', false)
                $(el).text($(el).data('collapsed-text'))
            } else {
                toExpand.css({ height: height })
                $(el).data('collapsed', true)
                $(el).data('collapsed-text', $(el).data('translation'))
                $(el).text($(el).data('expanded-text'))
            }

            window.__updateTranslation? window.__updateTranslation() : false
        })
    }) 

    $('.scrollspy').scrollSpy({ scrollOffset: 80 });

    $('.cy-toolbar .cy-toolbar-cool-icons .cy-toolbar-menu').each((_, el) => {
        const menu = $(el).clone()
        menu.removeClass('hide-on-med-and-down')
        const wrapper = $($.parseHTML('<li></li>'))
        wrapper.append(menu)
        $('#slide-out').append(wrapper)
    })

    $('.button-collapse').sideNav();
    $('.side-nav').click(() => {
        $('.button-collapse').sideNav('hide');
    })

    window.__updateTranslation? window.__updateTranslation() : false

})

