nappels / pltfm-www

Marketing page for PLTFM

pltfrm-www

Marketing page for PLTFM

Setup Development Environment

$ git clone https://github.com/nappels/pltfm-www.git # Clone repository
$ make harp       # Install Bower and Harp
$ make install    # Install project dependencies
$ harp server     # Start Harp server

Compile website files for deployment

$ harp compile

Files will be compiled into /www directory. Everything will minified and ready for deployment.

Harp JS framework docs

http://harpjs.com/

Refer to these docs for information regarding using partials and data throughout the app.

Generate sprites

1. Install Glue
2. cd into /public/sprite_assets/
3. Generate sprite:

glue public/assets/sprite_assets/ public/assets/sprites --margin=1 --padding=1 --retina --namespace='' --sprite-namespace='' --pseudo-class-separator=_

4. Copy the generated CSS in the /public/sprites/ directory to appropriate section of /public/styles/_sprites.less.
5. Move generated sprites images in /public/sprites/ directory to /public/images/ directory. You will need to change the name of these images to match the current name of the sprites. You may also want to optimize the images before deploying.

Deploy to gh-pages (staging)

1. Compile static assets: harp compile
2. Deploy to gh-pages: gulp deploy

Staging url will be https://[github username].github.io/pltfm-www/

pltfm-www's Issues

Add to copyright

The copyright at the bottom should be © 2017 Pltfrm, Inc

Add real phone slider images

@everitosan Here is a zip of all the phone assets for the slider.

phones.zip

Create thank you page for email form submission

Let's just create a really simple page with the follow content. (all you need to do is add a file called thankyou.jade in the same directory as index.jade)

Thank you!

We have received your request and will be in touch. Click here to return home.

Intro section

Intro section of the landing

Create data.json file with all copy for page

Add Favicon

Need to get asset from client

Hook up email form

Waiting on implementation details from client. I'll update this ticket once we have more details.

Cross browser testing

The site needs to be compatible with Chrome, Safari, Firefox, and IE11 and Edge.

Support section

Splice assets from sketch file

Make sure we are using 1x and 2x assets

HTML and CSS for homepage

This is a general story for the implementation of the design for the PLTFM page.

Mocks are here:

Landing-v3.zip

Boilerplate code/project architecture

Remove company logos section

The client removed this section in the latest sketch file

Compress images

Create JS tab/slider component

Check out my implementation at https://timyo.com/ in the section titled "Get more things done with less stress.". Also, check out the code here: https://github.com/nappels/timyo-www

This is almost identical to what you'll need to implement here.

Create CSS sprite from sketch file

Make sure to create 1x and 2x sprites

Functionalities section

Make <h4>s bold

"ONE SIMPLE GOAL" and "ELEVATE THE WAY YOU WORK" should have a font-weight of 500;

Add thank you page URL to mailchimp settings

Animate scroll to bottom on click of "Join Beta"

Use this smooth scrolling code snippet:

function scrollTo(element, to, duration) {
  if (duration <= 0) return;
  var difference = to - element.scrollTop;
  var perTick = difference / duration * 10;

  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
  }, 10);
}

And then on click of the button:

scrollTo(document.body, document.body.offsetHeight - window.innerHeight, 400);

Request beta section