Create Get Involved page

rickr commented 7 years ago

Edited 1/15/2018: See Here For A Good Wireframe

Create src/scenes/home/getInvolved.js and src/scenes/home/getInvolved.css.

Utilize components from src/shared/components to resemble the wireframe relatively closely (keeping in mind other instructions in the thread).

dijahcodes commented 7 years ago

I'm interested in this. What kind of assets are you looking for for this?

hollomancer commented 7 years ago

Basically, @dijahmac, we don't have a design for this yet, and we need one!

hollomancer commented 7 years ago

Why give to Operation Code?

To provide veterans, transitioning servicemembers, and military spouses with transformative educational experiences
To advocate for more diversity and opportunity in the tech industry
To enable our mission to reach more members of the military community

Your support enables:

Scholarship funding for comp sci education, industry certification
Sending veterans to conferences and major tech industry events
Building more tech communities near military installations

hollomancer commented 7 years ago

Volunteer

Join our community on Slack, and work with new software developers to help grow and mentor them in learning to code and enter the tech industry. Answer questions, participate in mock interviews, and review resumes.
Lead a squad of new developers in learning new skills in Linux, Python, cloud infrastructure, web development, and more.
Meet up with a local chapter (or start your own!) and network with other new developers eager to build cool apps and code the future!

Contribute

Star our open source projects on Github, and work with our members to take on the open source mission and contribute code.
Donate to Operation Code - your financial support lets us fund our mission to help the military community enter the tech industry.
Do you represent a company? Talk to us about sponsorships at staff@operationcode.org!

With your help, we can...

Provide scholarship funding to support education for veterans, transitioning servicemembers, and military spouses.
Send new developers to conferences and major tech events, to improve career outcomes.
Start tech meetups near military installations to help our community learn the career skills of the future.

hollomancer commented 7 years ago

Was thinking we could add some pictures of our meetups, screenshots of livestreaming @rickr @kylemh, maybe Github screenshots or Slack screenshots to illustrate what we're about

NestorSegura commented 7 years ago

is hier still help needed? @hollomancer

hollomancer commented 7 years ago

I think for this one, we need a design.

kylemh commented 7 years ago

@NestorSegura there's a free application called Adobe XD if you wanted to throw together a wireframe that we could approve. It would be awesome if you were able to completely own this page!

NestorSegura commented 7 years ago

Hi @Kylemh, yes I know that tool I also use Photoshop. I take this task. Thanks

NestorSegura commented 7 years ago

Hi guys, I just wanted to apologize, I was very busy the last time and also a little sick. I will get back to this issue next week! cheers

NestorSegura commented 7 years ago

I just did a prototype for this landing page. What do you think about it? get-involved-ladingpage

jeremysb1 commented 7 years ago

This looks really good. If you have a Get Involved page where folks can Join, Donate, Volunteer, etc, then you should replace "Donate" and "Join" with "Get Involved" on the menu at the top upper right of the page.

jeremysb1 commented 7 years ago

absolutely add pics of conferences, local chapter meetings, coding schools, etc. @hollomancer

kylemh commented 7 years ago

I like both the suggestions above, and the wifeframe that Nestor posted!

One edit suggestion: “Why give to…” and “Your support enables…” seem synonymous. I think it would be best to combine those sections into the picture/bullet list section style - provide a truly comprehensive list describing why people should help us.

Some implementation notes:

Implement the ability for a steel gray background color for the Section component
Finalize and proof-read content for page - eliminate the lorem ipsums.
Choose image for “Why get involved?” section
Choose FontAwesome icons for bullet list items

Question: Reusable components are great. Should we consider adding reusable Sections?! I’m seeing a lot of UI’s being re-implemented. Perhaps we could create a folder to help quickly scaffold static content going forward?

NestorSegura commented 7 years ago

Following your thoughts I made a few modifications to the initial layout. I think this could be more accurate to the proposition and needs.

files and infos needed

Hero Text
I would need from any of you to provide the pictures for each section
Suggestion about Fontawesome icons to use for the lists.
Points for Volunteer list

My thoughts behind this idea Then I choose to use to diferent lead buttons for the people who wants to donate and in the other hand to join the org. This way it is very clear and we can remove the separate links from the navigation as @jeremysb1 suggested.

I also added a "Success Stories", I think this could help the get involved. And removed the extra sections as I think they weren't necessary anymore.

get-involved-ladingpage2

kylemh commented 7 years ago

I like that one as is. Perfect and taking advantage of reusability.

As for the nav, I think it will be important to keep Join and Donate as is. Reasoning: Get Involved is targeted at people seeking to volunteer and be mentors, but our prime target are people seeking to join for the benefits. "Join" and "Donate" are buttons that we want available to all of our audience, at every single page on the website.

NestorSegura commented 7 years ago

Ok great, I will start with the implementation.

Where do you think should I place the components? direct under components? oder should I create one named ...components/sections?

I see there 2 components to be created and 1 optional

Hero Header width 2 Btns
List with Imgs Component
maybe btns with size and color options, small, medium, big. Red, green, blue, etc. (optional if there isn't btns this kind already)

The Btns could be also reused Components, do you have some recomendations what can I use?

I would Suggest that we start a documentation where this layout Components are described, so people can reuse them in the future with a base knowladge of the options they have. (where do you think should this doku be?)

kylemh commented 7 years ago

Hero header with 2 buttons

You'll actually be able to dynamically render the background image for the route, by following practices in-progress by @rmkubik here. Then you can add buttons by following the implementation in-place on our landing page.

List with Imgs Component

This exists here.

Button variables

Our shared component implements large, small, red, and blue buttons. You can feel free to expand on the options within, but I believe what is implemented accomplishes your needs!

Hopefully you can immediately see the value in developing with reusability in mind! A lot of this work has already been done for you 💃

Good luck. I'm claiming the issue as a placeholder for your effort.

NestorSegura commented 7 years ago

I would like to re-implement the Landing Page Hero css properties for better use of flexbox. Is that ok? or should I open a new issue for that?

I want to give the header a fixed height and position the items within, with the justify content property. So I can remove the padding set there and always have the information centered aligned.

kylemh commented 7 years ago

@NestorSegura go ahead and implement in your PR - I'll review the work 👍

daviraimundo commented 6 years ago

Are there images for this page yet? The success stories is redundant with the first page. I don't think it should be here.

JennWeideman commented 6 years ago

@kylemh should this now be navigation menu item not page?

kylemh commented 6 years ago

@JennWeideman so above is a discussion on this potential page. It doesn't exist, but some mock-ups have been designed. @KuriosCurious brings up a fair concern: If we do @NestorSegura 's last mock-up, we should remove the success stories from the landing page.

I'm a fan of this get involved page, but it's only an idea right now. It's your call on whether or not you'd like to move forward with it as designed, or to add further critique.

ksmacleod99 commented 6 years ago

Hey, if we choose to move forward with this, may I please be assigned?

kylemh commented 6 years ago

Of course! Taking on bigger and better things 👍

JennWeideman commented 6 years ago

@ksmacleod99 could issue 156 go with this? Also issue 231 under get involved

JennWeideman commented 6 years ago

@ksmacleod99 I've assigned to this issue to you

ksmacleod99 commented 6 years ago

May I please get some copy for the header to replace the lorem ipsum, and if anyone has any photos they would like me to use, please let me know!

kylemh commented 6 years ago

@hollomancer do we have a go-to person for copy?

JennWeideman commented 6 years ago

@kylemh @ksmacleod99 this page is going to have multi/subpages right?

ksmacleod99 commented 6 years ago

The menu is, yes. This page was going to be more of a landing page for all the other pages (donate, volunteer, Leadership Circle). I'm going to push this branch when I am done, and then start on the Volunteer page.

JennWeideman commented 6 years ago

@ksmacleod99 will the user have to go to the landing page? or will they have the option just to pick the subpage/or whatever its name is from the dropdown of get involved ?

ksmacleod99 commented 6 years ago

They way I would like to see it is no - they can click on the 'Get Involved' page link to go to that landing page, but I would like to see a drop-down menu of the sub-pages as well. So they can go to the Get Involved landing page - or not - depending on how they feel. But that will be a separate issue than me just building the page.

NestorSegura commented 6 years ago

Sorry, to long away from this issue, is this idea still alive? or is it under work right know? if there isn't nothing yet, I have some time know so I would create the page.

kylemh commented 6 years ago

@NestorSegura @ksmacleod99 has an open PR for it, but there are plenty of available issues!

NestorSegura commented 6 years ago

thanks @kylemh, I will look around =)

seabassgonzalez commented 6 years ago

This should be closed as per @wimo7083 's PR, yes?

kylemh commented 6 years ago

Merged in #871

OperationCode / operationcode_frontend

Create Get Involved page #12