Design
User Experience
Target audience and customer's research to proper structure project data.
We create digital projects
With special care and attention to detail from the user experience and interface design to development.
Specialized in HTML5, React, Vue.js and WordPress
We develop digital projects following the best practices and the latest technologies, whether it's a website, single page application or mobile app.
Learn more
HTML5
Certified by W3C on HTML5, Mobile Web and Responsive Web Design.
WordPress
One of the best content management systems, WordPress is used by 30% of all the websites.
Vue.js
One of the most advanced and performant JavaScript frameworks.
React & React Native
We develop single page applications for both web and mobile.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>We create digital projects</title>
<meta name="description" content="We are Coopers, a digital production company which crafts projects with special care and attention to detail.">
<link rel="stylesheet" href="assets/css/app.css">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Coopers Digital Production",
"url": "https://coopers.pro",
"logo": "assets/img/coopers-brand.svg",
"address":
{
"@type": "PostalAddress",
"streetAddress": "Rua Coronel Dulcídio, 588",
"addressLocality": "Curitiba",
"postalCode": "80420-170",
"addressRegion": "PR",
"addressCountry": "BR",
"telephone": "+554141020106"
}
}
</script>
</head>
<body>
<div class="content">
<header>
<h1 class="large">We create <span>digital projects</span></h1>
<p class="lead">With special care and attention to detail from the user experience and interface design to development.</p>
<div class="button-group">
<a href="contact.html" class="button" title="Get in touch with us">Contact us</a>
<a href="works.html" class="button secondary" title="Learn more about what we do">Our projects</a>
</div>
</header>
<section class="services-preview grid-container">
<div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
<div class="cell card">
<h3>Coopers Take-out</h3>
<p>In a hurry? Get your website up and running in few weeks. Suits perfect for small companies and short deadlines. From basic institutional websites to e-commerces, Coopers Take-Out fulfills your needs.</p>
<a href="service-take-out.html" class="more" title="Learn more about how fast and accessible we develop websites">Learn more</a>
</div>
<div class="cell card">
<h3>Coopers Tailor Made</h3>
<p>Get the experts working for you, from Design to the Front and Back-End, using top technologies. All responsive, done specially to fit your needs. Big companies have chosen Tailor's Made service line to creat an unique experience.</p>
<a href="service-tailor-made.html" class="more" title="Learn more about how we create projects from scratch">Learn more</a>
</div>
<div class="cell card">
<h3>Outsourcing</h3>
<p>Project Managers will love this. Outsource every or just one step to get your job done before the deadline. Best option for Advertising/Digital Agencies.</p>
<a href="service-outsourcing.html" class="more" title="Learn more how we can help you deliver quality projects to your customers">Learn more</a>
</div>
</div>
</section>
</div>
<footer>
<div class="grid-x align-justify copyright">
<div class="shrink cell">© 2018, Coopers, Inc. All Rights Reserved.</div>
<div class="shrink cell">[email protected]</div>
</div>
</footer>
</body>
</html>
import PageHeader from './components/shared/PageHeader.vue'
import { isLoggedIn, isAllowedPage, getCurrentUser } from '@/api/auth'
import helpers from '@/assets/js/helpers'
import { sortBy, isEmpty } from 'lodash';
export default {
name: 'app',
data () {
return {
headerLayout: 'big',
loading: true
}
},
watch: {
currentUser(val) {
if(!_.isEmpty(val)) {
this.loading = false;
}
},
},
computed: {
isLoading() {
return this.$store.getters.isLoading;
},
currentUser() {
return this.$store.getters.user;
},
countries() {
return _.sortBy(this.$store.getters.countries, 'Name');
},
isEmptyCurrentUser() {
return _.isEmpty(this.currentUser);
},
isAdmin() {
return this.$store.getters.isAdmin;
},
},
created() {
this.$store.dispatch('getAllLanguages');
this.$store.dispatch('getAllCountries');
},
methods: {
isBadBrowser() {
return helpers.isBadBrowser();
},
isLoggedIn() {
return isLoggedIn();
},
},
mounted() {
$(this.$el).foundation()
// returns current user, in case refresh the page
if(this.isLoggedIn()) {
getCurrentUser().then(user => {
this.$store.dispatch('updateUserLoggedIn', user)
if(this.$route.meta.rules && !isAllowedPage(this.$route.meta.rules)) {
console.log('User not allowed to enter this page from App')
this.$store.dispatch('updateUserLoggedIn', {})
this.$router.push({ name: '404' })
this.$store.dispatch('logout')
}
this.$i18n.locale = user.Language.toLowerCase();
this.loading = false;
}).catch(error => {
this.$store.dispatch('updateUserLoggedIn', {})
this.$store.dispatch('logout')
this.$router.push({ name: 'login' })
this.loading = false;
});
} else {
this.loading = false;
}
let userLang = helpers.store.get('renaultUserLang');
if(userLang) {
this.$i18n.locale = userLang;
}
},
components: {
'page-header': PageHeader
},
}
