Home - Landing Page

[lloan]

This is a three part task:

• Design the new page
• Create the proof of concept
• Implement the proof of concept

Design

What is the new component or item:
Create a design PDF for developers to create a static copy with code. You will be using UIKit components along with Fontawesome PRO icons. Any comments you need to make, make them in the discussion of the issue or the implementation issue for this component.

The expected deliverable will be a design documents that shows all the possible states it has. Provide notes as necessary.

** Proof of Concept**

Create a proof of concept using Storybook.js. Take the design PDF and convert it to code. You will be using UIKit as the CSS library along with Fontawesome PRO icons. Do not worry about logic during this step, just build out the component.

The expected deliverable will be a component that is responsive and mobile-ready. Make sure you address all stories requested (states). The next task will deal with adding any additional logic that might be needing. For example, creating API requests, iterating through data, etc.

Implement the Proof of Concept

Take the proof of concept and add missing logic. This means take it from static and make it dynamic if it requires it. Build it to be modular, add comments and make sure component is polished.

[lloan]

Both design over and specs sheet provided. Page ready to be built.

JPGs: (specs and design)

PDFs: (specs)
home-landing-page-specs.pdf

[lloan]

@tonynguyen111997 @HeyItsFelipe @VelazquezLuis need some help finding images to put within the placeholder sections of the design. Maybe we can do a photoshoot or something just for this? Let me know :)

[lloan]

@saynegrojas how is this going?

[lloan]

@saynegrojas Hi Greg! Any update on this one? Thanks!

[saynegrojas]

@lloan Lloan, I've got the top half 90% complete on the proof of concept. I'll be working on the lower half as soon as I can.

[JacobSNGoodwin]

@lloan and @saynegrojas , I got asked to finish this up by @kvera001.

Underneath the React Fundamentals course, there are some little dots. Is the course supposed to scroll? Just making sure that's the idea there, so I can add the proper data property (I can add multiple course examples as data into the component.

[lloan]

@JacobSNGoodwin for now, let's skip them as we will only have one item showing up. But in the future, yes, it would scroll.

[JacobSNGoodwin]

I have this working pretty well design wise. I may have some questions about the data structure we want, but I'll get on adding react props soon.

https://github.com/inland-empire-software-development/spark/tree/landing-page-115-jg

[JacobSNGoodwin]

@tonynguyen111997 @HeyItsFelipe @VelazquezLuis need some help finding images to put within the placeholder sections of the design. Maybe we can do a photoshoot or something just for this? Let me know :)

Hey guys, I'm adding some sample data to be passed into this component with react props.

Do you have any sample images as @lloan requested a while back?

[JacobSNGoodwin]

I just implemented the react props for this which can are demoed in storybook. #135 should close this when merged.

[lloan]

Hi @JacobSNGoodwin can you do me a favor? Can you include the steps for testing? Meaning, what page do I load, is it in storybook or not, etc.

Thanks! I will have time this week as I'm almost done with my two large projects at work. Thanks a ton for the work you do!

[JacobSNGoodwin]

@lloan, I'll add details to the PR #138

[JacobSNGoodwin]

I just ended up merging it, #138. Don't know if we close this or not.