![screely-1552768069750.png](https://ipfs.busy.org/ipfs/QmQ27scgSs7S74j7iZxxR2XKahkbxkfMU5LReziuYiGb23)

### Repositories

https://github.com/steemgigs/steemgigs
https://github.com/steemgigs/steemgigsServer

This post is partially related to the following task request, however, I conducted some further work that is mentioned too :D

https://busy.org/@surpassinggoogle/task-request-help-us-design-re-design-the-steemgigs-org-landing-page-additional-bounty-of-50-steem

### Introduction

The following post briefly describes some of the work I recently carried out for SteemGigs, within this piece of work I redesigned the landing page as well as simplified some of the home page code to allow more usability and less duplication.

### Pull Request

The work that I carried out on SteemGigs Front End can be found in the following pull requests:

https://github.com/steemgigs/steemgigs/pull/104

and

https://github.com/steemgigs/steemgigsServer/pull/6

There were also a few bug fixes related to the above made here:

https://github.com/steemgigs/steemgigs/pull/106

The site is live at the following URL:

https://steemgigs.org/

### New Features/Improvements

 The items I completed from the task request were as follows:

1. Redesign Landing Page

In addition to the above I completed the following:

1. Create category preview component for use within the home page

#### Redesign landing page

The main request from @surpassinggoogle was to improve the overall look and feel of the landing, over time the landing page had slowly become out of sync with the rest of the sites look and feel, therefore in order to bring this all together I designed the following:

<iframe width="560" height="315" src="https://www.youtube.com/embed/uk3AOsi02h4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Note: This is a design in Adobe XD I made prior to the build, as documented here:

https://steemit.com/utopian-io/@tobias-g/steemgigs-landing-page-redesign

Although I won't go into much detail surrounding how this was created you can see from the above I was able to get fairly close to the design and overall @surpassinggoogle was happy with the results. 

The main bulk of this task was related to the markup and styling which can be seen here:

https://github.com/steemgigs/steemgigs/blob/master/src/components/views/landing.vue

The data currently shown in the page is currently static, however, should need the come this can be moved to the DB easily enough as most of the text is held with `data()`.

The following shows the landing page prior to the redesign:

##### Search Section

The following shows the search section prior to the redesign:
  ![screely-1552767670700.png](https://ipfs.busy.org/ipfs/QmUZtnV2JGDHAYoJVYLHtfSUGauLe3mSE4XCgLAYvyfQRb)

##### Footer 

The following shows the footer prior to the redesign:

![screely-1552767770485.png](https://ipfs.busy.org/ipfs/QmPXz5j6ChiHnanNU51WcVkWHBMHx6jsog4tanhmZQa5fE)

Following the redesign, the following shows it currently looks:

##### Search Section

The search section allows a user to quickly search for gigs they need, upon a user typing their search query (and pressing return) a user will be pushed to the search page to find the gigs they need.

![screely-1552768069750.png](https://ipfs.busy.org/ipfs/QmQ27scgSs7S74j7iZxxR2XKahkbxkfMU5LReziuYiGb23)

##### SurpassingGoogle Section

The SurpassingGoogle section highlights the knowledge bank that is currently within SteemGigs, within this section a user has the option to either create or read the knowledge bank

![screely-1552768122043.png](https://ipfs.busy.org/ipfs/QmauzpoaFSp4RtrQiR6BFhZnzgsmCdsBEvrqUFdNwCdMaj)

##### BroPro Section 

The BroPro section is a new area which is coming soon, you can read more about it here:

https://steemit.com/steemgigs/@surpassinggoogle/have-you-heard-of-steemgigs-org-s-bropro-yet-it-will-be-powered-by-the-teardrops-tokens

![screely-1552768200066.png](https://ipfs.busy.org/ipfs/QmYkA8S8wheXYJ4B98ojzZYmoY14tcszJmfie46KBdArjZ)

##### Footer

The footer holds useful links and quick info for Steem Gigs users, currently this is only used on the landing page, however, this was built into its own component so it can be easily added to other areas of the site should it be needed.
  
![screely-1552768220636.png](https://ipfs.busy.org/ipfs/QmdTKcpGc1Mb6LegDXx3YnGkjrdNbJxLzU55yLXhoyVzfD)
  
Alongside the main landing page, I also created a new sign up modal which will soon be used to allow a user to onboard to steem via the @oracle-d/@steem.ninja API/widget. This can be seen here:

![screely-1552769429562.png](https://ipfs.busy.org/ipfs/QmbkYdWtqgWdxSLpXdHu4fAow1XfeHnhDHKwDB4dPwjnkr)

#### Create category preview component for use within the home page

Another piece of work completed was a category preview component that could be reused to replace duplicated page on the home page of the site, within this the ability to sort sections was also added. 

Within this commit you can see the old code that was used on the home page, within this you can see that each row was duplicated a number of times:

https://github.com/steemgigs/steemgigs/pull/104/commits/65ac3bfde40f47249e541f6f3299e182f4caed39

Following this work, you can see that the home page is now made up of the following code:

![carbon (23).png](https://ipfs.busy.org/ipfs/QmYhH9dwhNj9ccwkYjPVJRDcCy8dbapdZb3QHCKjx1psqg)

In order to achieve this, I created a new component that would both get data and display the data, this was used on each section on the home page. This component is able to display both testimonial and gig cards as well as sort them based on the newest/oldest/highest priced/lowest price (where applicable). The sorting is first conducted server side when the (completed in a previous release) and then sorted again client side using loadash as the client will not load them in the same way that they're provided from the server (I've read this is normal, however, if there is a way to set this by default, that would be great to know :))

You can see an example of this within this site below:

![screely-1552769949355.png](https://ipfs.busy.org/ipfs/QmZ1rFvksJPz1mrTKqzdxcjj7fHaYtwHQ3G8f9nQ4JqWmu)

 The component, which can be found here:
https://github.com/steemgigs/steemgigs/blob/master/src/components/snippets/category-preview.vue, currently has the ability to take in the following properties in order to adjust the display of the data within it:

```
post_type: String,
header: String,
description: String,
limit: Number
```
 
 The following provides more information surrounding each property:
 
|Property| Description|
|--|--|
| post_type |  Allows you to configure which type of posts should be displayed (gigs, custom requests, testimonials,  |
| header | The section header text that should be displayed to the user  |
| description |  The description text that should be displayed to a user|
| limit |  The number of cards that should be shown within the section/returned from the API |

In an upcoming release, this component will also be able to deal with specific categories, subcategories & pagination to allow for it to be used in other places within the application. 

### What's next?

 I am currently working on this task request:
 
https://steemit.com/steemgigs/@surpassinggoogle/task-request-help-us-add-basic-search-mechanism-to-the-existing-steemgigs-org-search-engine-that-searches-user-profiles-based-on

which is nearly complete, I have also extended the category component for use throughout a selection of different pages. In the next release, I will also add beneficiaries to allow users to support Steemgigs, a start to the BroPro section. 

I have also built the API for a wallet on Steem Gigs that will include the TEARDROPS token created by @surpassinggoogle, however, we'll see which release this goes in ;)

### GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1