Scenario: As a potential customer I want to see how long the Lemariku project has taken. 
    Given I am on the Peak Shift site
    And I click on mobile  
    When I View the Lemariku case study
    Then display the years 2015 - 2016 in the project meta column. 

Scenario: Relevant visuals
Scenario: Content tells a story

Scenario: Team can see who visits the site
Given Portfolio launch
When Persons visit the site
Then Data would be collected in Google Analytics
And the team can make improvements

Scenario: Improve Search Engine ranking
Given A search for Design, Development or Blockchain
When The results are displayed
Then PeakShift should be one of the top results

Scenario: User visits Peak Shift website from external source
Given I am on twitter.com
And I click on peakshift.com/<project> link from a tweet
Then I see element '<h3 class="projectTitle">'<project_title>'</h3>'

Examples:
    | project      | project_title |
    |  mindsky   | MINDSKY    |
    |  lemariku  | Lemariku     |

Scenario: User browses to project page
Given I am on homepage
When I click link <link_text>
Then I see element  '<h3 class="projectTitle">'<project_title>'</h3>'
  
Examples:
    | link_text  | project_title |
    |  WEB       | MINDSKY    |
    |  MOBILE  | Lemariku     |

Scenario: What UI work was done by Peak Shift?
  Given I am on the MindSky case study page
   When I view the creatives for the project
   Then I see screenshots that showcases the Job Board
   And the Profile Builder
   And the Employer Dashboard
   And the BackOffice

Scenario: Fact sheet
Given I am in the peakshift-website repo
When I open "FactSheet/Transfer-Fees.md"
Then I see a fact sheet about the transfer fees of Western Union and MoneyGram

Scenario: Images of the BackOffice
Given I am on the ZED Case Study Page
And I scroll through the content
When I view the screenshots of the BackOffice
Then I should see the UI of the project 
And the image should be 100% displayed, regardless of device size

Scenario: Gif of the BackOffice
Given I am on the ZED Case Study Page
And I scroll through the content
When I view the backoffice.giff 
Then I see how the interactions on the BackOffice happen

Scenario: Frontend Landing Page for blockchain marketing services
Given a user visits the blockchain marketing page
When they review the page
Then they see content on our experiences, knowledge
And services offered for blockchain projects
And CTA and related article links

Scenario: Landing Page optimised for mobile
Given a user is on a mobile device
When they visit the blockchain marketing landing page
Then they see our content displayed by importance with optimised images
And large, legible fonts to utilize whitespace
And easy navigation 

Scenario: Lemariku case study header
Given I am on the lemariku case study page
When I look at the header
Then I see 

Scenario: Job Description for Senior Backend Developer

When I read the Senior Backend developer job description
Then on the job listing I can read about "Introduction" 
And on the job listing I can read about "Skills Required"
And on the job listing I can read about "The Application"

Scenario: Chinese Translation
Given a user visits the Peak Shift website
And they want to view it in Chinese
When they select that option
Then they see a full translation of the entire site in Chinese

Scenario: Explain the research done about the audience
Scenario: ...

  Scenario: When you are on peakshift.com and click on the dribble social icon it should take you to the company dribble account 
    Given I am on the Peak Shift site
    When I click on the dribble social icon
    Then take me to https://dribbble.com/peakshift

Scenario: Bulgarian Translation
Given a user visits the Peak Shift website
And they want to view it in Bulgarian
When they select that option
Then they see a full translation of the entire site in Bulgarian

Scenario: Article mentions we're working on blockchain projects
Scenario: ...

Scenario: Roadmap Responsive images
Given I am on the landing page
And I scroll through the content
When I view the roadmap.svg image 
Then the image should be 100% displayed, regardless of device size
And not be stretched and cut like it currently is on screens < 960px

Scenario: Branding Responsive images
Given I am on the landing page
And I scroll through the content
When I view the branding.svg image 
Then the image should have minimal white space to the right
And the main content should be the focus 
And not off in the left corner as it currently is on screens < 960px

Scenario: Introduction to the ZED Case Study
Given I am on the ZED Case Study Page
When I view the section
Then I get an idea about the mission of the project and Peak Shift's engagement with it

Scenario: User Flow & Interface for the ZED Case Study
Given I am on the ZED Case Study Page
When I view the "User Flow and Interface" section
Then I get an idea about our process of creating the flow: diagrams, slides, mockups
And what was done for the ZED user flow 

Scenario: Technology Stack for the ZED Project 
When I am on the ZED Case Study Page
Then I see the "Technology Stack" section
And I see a list of the technologies used for the project

Scenario: A visually impaired person view the site
Given that I am on the website
And I am visually impaired
When I come across an image
Then the screen reader should read the Alt tag
And let me know what the image is about

Scenario: Job Description for frontend developer/designer
When I am read the frontend developer/designer job description
Then on the job listing I can read about "Introduction" 
And on the job listing I can read about "Skills Required"
And on the job listing I can read about "The Application"

  # Estimate:
  Scenario: On large sized devices .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is more than "960px"
      And "#mainContent" is equal to "70%" of the viewport width
      And "#mainContent" is positioned "30%" away from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "70%" of "#mainContent"
      And ".media--stretched" left position is equal to the left position of "#mainContent"


  # Estimate:
  Scenario: On medium size devices .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is "768px"
      And "#mainContent" is equal to "60%" of the viewport width
      And "#mainContent" is positioned "40%" away from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "60%" of "#mainContent"
      And ".media--stretched" left position is equal to the left position of "#mainContent"


  # Estimate:
  Scenario: On mobile .media--stretched component displays flushed to the left and right of #mainContent
    Given my viewport size is less than "768px"
      And "#mainContent" is equal to "100%" of the viewport width
      And "#mainContent" is positioned "0%" from viewport left
     When I see a component with a class ".media--stretched"
      And it is a child of ".projectDetails"
     Then ".media--stretched" width is equal to "100%" of "#mainContent"
      And ".media--stretched" left position is equal to "0%" away from "#mainContent"

Scenario: Spanish Translation
Given a user visits the Peak Shift website
And they want to view it in Spanish
When they select that option
Then they see a full translation of the entire site in Spanish

Scenario: Replace Skype with Telegram
Given a user is on the peakshift site
When they view the sidebar content
Then they should see a contact link for Telegram
And not Skype

Scenario: Swahilli Translation
Given a user visits the Peak Shift website
And they want to view it in Swahilli
When they select that option
Then they see a full translation of the entire site in Swahilli

Scenario: Article layout
Given a user is on the Peak Shift website
When they select a blog article
Then they see a short introduction of the topic's problem
And 4-8 argument points that can expand using a  "read more"
And a conclusion

Scenario: Navigate between web pages

Scenario: Blockchain marketing services we offer
Given I am on the blockchain marketing offering page
When view the services offered section
Then I understand that I can get business strategy 
And funnel strategy with funnel assets.

Scenario: Kinyarwanda Translation
Given a user visits the Peak Shift website
And they want to view it in Kinyarwanda
When they select that option
Then they see a full translation of the entire site in Kinyarwanda

Scenario: media--right is aligned right on desktop
Given div.section is a child of .projectDetails
And figure.media--right is a child of div.section
And I am on a screen >= 960px
When I preview the layout in the browser
Then I see figure.media is aligned to the top of div.section
And it touching the right of the viewport
And it does not overlap .projectDetails

Scenario: Share link on Twitter
  Given someone makes a tweet linking to any of our web pages
   When I see the tweet
   Then the twitter share card contains custom image and description


Scenario: Share link on Facebook
  Given someone makes a post on facebook linking to any of our web pages
   When I see the post
   Then the facebook share card contains custom image and description

Scenario: Display of project design on desktop
Given you're on the Lemariku page
When you're reading through the case study
Then you should see screenshots of the project pages displayed in desktop mode

Scenario: Display of project design on mobile
Given you're on the Lemariku page
When you're reading through the case study
Then you should see screenshots of the project pages displayed in mobile view

Scenario: Facebook Image
Given I have a Facebook image
When I view the image
Then I should see the peakshift color and logo 

Scenario: Twitter Image
Given I have a Twitter image
When I view the image
Then I should see the peakshift color and logo

Scenario: Mobile money in East Africa article
When a user selects the Mobile Money in East Africa article
Then they should be informed about the history, future plans
And the effects mobile money has on countries in East Africa
And what this can mean for the rest of the world

  Scenario: On the Lemariku project page of the portfolio display doodles as a background to the screenshots 
    Given I am on the Peak Shift website
      And I am on the Lemariku project page
     When I see the image header
     Then the view sees doodles of fashion items as a background

Scenario: Introduction to the ZED Case Study
Given I am on the ZED Case Study Page
When I view the section
Then I get an idea about the mission of the project and Peak Shift's engagement with it

Scenario: User Flow & Interface for the ZED Case Study
Given I am on the ZED Case Study Page
When I view the "User Flow and Interface" section
Then I get an idea about our process of creating the flow: diagrams, slides, mockups
And what was done for the ZED user flow 

Scenario: Technology Stack for the ZED Project 
When I am on the ZED Case Study Page
Then I see the "Technology Stack" section
And I see a list of the technologies used for the project

Scenario: Visitors see testimonials on MindSky project
Given I am on the /mindsky page
When I see the heading 'Testimonials'
Then I see text with testimonials from MindSky team

Scenario: Early
  Given "Early Charlemagne" is on the team
   When I see their profile section
   Then it shows their name as "Early Charlemagne"
    And their location is ""
    And their role is "" 


Scenario: Selimira
  Given "Selimira Dimitrova" is on the team
   When I see their profile section
   Then it contains their name "Selimira Dimitrova"
    And it contains their location to be "London, UK"
    And their role is "Marketing Specialist" 


Scenario: Shazelle
  Given "Shazelle Isaacs" is on the team
   When I see their profile section
   Then it contains their name "Shazelle Isaacs"
    And it contains their location "SVG"
    And their role is "Web Developer" 


Scenario: Johns
  Given "Johns Beharry" is on the team
   When I see their profile section
   Then it contains their name "Johns Beharry"
    And it contains their location "Earth 🌎🌍🌏"
    And their role is ""