[Teardrops] Initial Landing Page

Repositories

https://github.com/surpassinggoogle/teardrops

This post is related to the following task request:

https://steemit.com/utopian-io/@surpassinggoogle/utopian-based-task-request-kindly-help-us-building-the-landing-page-for-teardrops-smt-additional-bounty-of-100-steem

It took a lot longer for me to become free than expected, but @surpassinggoogle stuck with me and we finally got an initial version completed.

Introduction

The following post briefly describes some of the work I recently carried out for the teardrops landing page, overall there are some slight differences with the build compared to the actual task request, however, we agreed that this would work for the first version, due to time constraints the goal was to create both a simple and easy to use design whilst highlight some of the core elements to teardrops.

Pull Request

The work I carried out for Teardrops can be seen in the following pull request:

https://github.com/surpassinggoogle/teardrops/pull/2

Although the site isn't currently live (it will be soon), you can view the site with the following test link hosted on my Heroku:

https://teardrops-test.herokuapp.com/

Please note: The speed is related to it being on the FREE tier rather than the code. Potentially I need to compress the images as they do seem to load slower than expected.

New Features/Improvements

As previously mentioned, the main delivery was an initial landing page, I created this using vue.js and overall required as single Vue and the addition of four components. I created an initial mock of what the site was going to look like, went over it with @surpassinggoogle and then built. The end result can be seen in the following screenshots:

Initial landing page with nav bar

Teardrops Communities Section

Get Certified & Team Sections

Support and Buy Teardrops Section

Within the site I built the following sections:

1. Initial Opening View
2. Rewarding Proof of Tears Overview
3. Teardrops Economy and Video Section
4. Communities
5. Get Certified
6. Our Team
7. Support with Delegate & Vote for Witness
8. Buy Teardrops
9. Mailing List

In order to build the site I used element UI, I only used this for the grid layout rather than buttons or anything else, truthfully I like how their grid works and it's easy to use, I didn't want to go down the route of building my own.

The majority of the sections are built into the home.vue file, this is the only view within the site and is the main page that people will see when they visit the site. As previously mentioned, I used a total of 4 components when creating the site, these include:

1. Nav
2. Communities Card
3. Team Card
4. Footer

The following shows the code behind the community card and team card components:

Community Card

Team Card

These are then referenced in the main view in the following way, focussing on the community card, I created the following data:

and the iterate through them, using a v-for as so:

Overall, the site is near completion of the initial version with the following adjustments required before initial release, these include:

1. Adjustments to Copy
2. Adjustment to favicon
3. Minor adjustments to the mobile experience (it's likely that I could have missed something)

I will be looking to complete this once @surpassinggoogle has conducted some further testing.

Hopefully, this post was useful and showed the work I completed, truthfully I find it hard to write about my work when it's mainly related to the UI, probably because there isn't much code that needs an explanation, if you're reading this and do have some questions, don't hesitate to ask :)

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1