Let's get updated threefold.io live asap

[samtaggart]

Notes

• Work in branch 3.10
• Can be viewed locally or on www3.threefold.io when changes are pushed
• Let's push something to production by the end of the day
• See assets below

Assets https://drive.google.com/drive/folders/1ye3PjDj8XVqrIYrDaFoRyUrBvFxpOtj_?usp=drive_link

CSS

• [x] H1 should be Green color (see reference image of home page above, match that color)
• [x] H2 should be Black
• [x] H3 also same green as H1
• [x] Normal text should be dark grey (see reference image of home page again)

All Pages: Headers

• [x] As per reference images, please make sure all home pages have the same background graphic, see the assets folder. You can keep the circular images now being used in the header. Only background image needs to be created / added.

Home Page

• [x] Keep "Why Do We Need" the same for now
• [x] Evolving the Internet should get updated based on reference image for home page
• [x] Live & Operational block should be converted into black, white, and grey as per reference image
• [x] "The ThreeFold Grid is community-owned" should be updated based on reference image
• [x] Keep "Support the Project"

About Page

• [x] Please follow same directions from above. Use alternating backgrounds between blocks, taking from the image assets shared above. You may zoom in, rotate, or flip assets to add variations (e.g. the folded checkered background can be used in different ways) and you can also reposition text as you like.

Expand Page

• [x] "Join the Revolution" should be in black, white, and grey, same as on the home page.
• [x] Please go black, white, and grey for the "Simple for Everyone" images
• [x] Same for the "Valuable and In Demand" block at the bottom

Build Page

• [x] Same directions as the About Page
• [x] Add links to Titles in "Engage with the Community"

Token Page

• [x] Same directions as About and Build Page
• [x] Make sure all images towards the bottom of the page are black, white, and grey

Other Pages

• [x] Make sure Blog, Newsroom, Support, and Careers are aligned with updated branding (e.g. backgrounds, black white and grey images, etc.

[ehab-hassan]

@samtaggart

• Is there Figma or guide file for all pages to see the whole pictures that ll save time ?
• the background image ll be for all headers or all the page?

[samtaggart]

No I don’t have a design file. But You are mostly just keeping the images the same and adding backgrounds.

On Sun, Jun 4, 2023 at 11:02 Ehab-hassan @.***> wrote:

@samtaggart https://github.com/samtaggart is there Figma or guide file for all pages to see the whole pictures that ll save time ?

— Reply to this email directly, view it on GitHub https://github.com/threefoldfoundation/www_threefold_io/issues/260#issuecomment-1575456208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL6P3T24BOGHLP6NOUAX2YLXJQ6J7ANCNFSM6AAAAAAYYOAPYQ . You are receiving this because you were mentioned.Message ID: @.***>

[samtaggart]

If something is confusing please let me know. Also if you push some things throughout the day I can check them on www3.

On Sun, Jun 4, 2023 at 12:26 Sam T. @.***> wrote:

No I don’t have a design file. But You are mostly just keeping the images the same and adding backgrounds.

On Sun, Jun 4, 2023 at 11:02 Ehab-hassan @.***> wrote:

@samtaggart https://github.com/samtaggart is there Figma or guide file for all pages to see the whole pictures that ll save time ?

— Reply to this email directly, view it on GitHub https://github.com/threefoldfoundation/www_threefold_io/issues/260#issuecomment-1575456208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL6P3T24BOGHLP6NOUAX2YLXJQ6J7ANCNFSM6AAAAAAYYOAPYQ . You are receiving this because you were mentioned.Message ID: @.***>

[ehab-hassan]

we can't add the background in all sections some sections are divided into 2 rows, header and content I added to some sections at home with one row https://www3.threefold.io/

[samtaggart]

Hi @ehab-hassan it's looking pretty good, thank you brother.

OK so anytime we split a row into multiple columns then we can't do a full background? Is that what you are saying?

[ehab-hassan]

Yes, That is true we can add a color background but not an image because the two sections will not fit with the repeated image. Also making all color images (the old TFT color) black and white ll not be good it can work with icons but not images so I think we can find the source and make it green what u think?

[ehab-hassan]

@samtaggart all main pages are updated check https://www3.threefold.io/ also please check all old pages and images and delete or archive them.

I m creating a Figma file (home page for now) so we can edit and modify it for the next version of the website to save time and imagine the whole page https://www.figma.com/file/VzLtDXijQ76bd9myUO9A4S/ThreeFold-new-version?type=design&node-id=0-1&t=Qa8bpfVEaDsSOQbR-0

[ehab-hassan]

@samtaggart do we still use the Community page at io https://www3.threefold.io/community/ so I brand it with a new theme?

[samtaggart]

@samtaggart do we still use the Community page at io https://www3.threefold.io/community/ so I brand it with a new theme?

For now it is not a priority, thanks @ehab-hassan

[samtaggart]

Please give me 20-30 minutes, I have some new tasks.

[samtaggart]

All Pages

• [x] Change Get TFT Button, needs to match updated branding [@ehab-hassan]
• [x] Check spacing / margins / padding across all pages / multiple screen sizes [@ehab-hassan]
• [ ] Double check spacing / margins / padding across all pages [@samtaggart]
• [x] Check all site for visual consistency with usage of headers, subheaders, and text (e.g. we should follow a pattern across the whole site) [@ehab-hassan]
• [ ] Double check visual consistency [@samtaggart]
• [x] Try buttons with light grey background and no outline stroke (what happens on hover?) [@ehab-hassan]
• [x] Change the hover color of the top menu navigation (e.g. when on Expand page it should be clear you are on Expand Page in the header menu) [@samaradel]

@ehab-hassan Here is a first batch of issues. More coming.

[samtaggart]

General

• [ ] Please check the checkerboard graphics across all pages. You shouldn't drag out the checkerboard graphic so it is distorted ... rather Zoom in, Zoom out, rotate, etc. Please see Steve's reference images for examples. [@samtaggart]

Home Page

• [x] Find / create new header image for home page [@samtaggart]
• [x] Remove How it Works button from header
• [ ] Check "Build on the Platform" button – I saw it on a big screen size and the text was off [@samtaggart]
• [x] Change "Join the Community" button to https://t.me/threefold for now
• [x] Add line breaks between text and buttons Expand, Build, and Together
• [x] Change "Not Equal" to "Not Scalable"

About Page

• [x] Find / create new header image for Genesis [@samtaggart]
• [x] Please try the Values 3x3 (change font size if you need to) instead of one row

Expand

• [ ] Add green accents or highlights to the old design images [@ehab-hassan]
• [x] Find more realistic image for "find your fit" and swap with header image [@samtaggart]

Build

• [x] Please do the case studies 2x2 instead of 4 in a row, decrease font size if needed [@ehab-hassan]
• [x] Even out the button placement under Discover the ThreeFold Advantage
• [x] Change Solution Provider title to Monetize Your Solutions

Token

• [ ] Add green accents or highlights to the old design images [@ehab-hassan]

[samtaggart]

• [x] Adjust all headers so that images are cropped into one of the shapes in the background, like this (bad) example below. Feel free to rotate the grey background image to find different shapes for each header. Also feel free to change the opacity of the images so they blend in more. [@ehab-hassan]

[samtaggart]

• [x] Clean up the folders before going to production [@samtaggart]

[ehab-hassan]

• [ ] Adjust all headers so that images are cropped into one of the shapes in the background, like this (bad) example below. Feel free to rotate the grey background image to find different shapes for each header. Also feel free to change the opacity of the images so they blend in more. [@ehab-hassan]

This ll not be good with responsive and especially on mobile it is a background the black text ll be at dark part

[samtaggart]

• [ ] Adjust all headers so that images are cropped into one of the shapes in the background, like this (bad) example below. Feel free to rotate the grey background image to find different shapes for each header. Also feel free to change the opacity of the images so they blend in more. [@ehab-hassan]

This ll not be good with responsive and especially on mobile it is a background the black text ll be at dark part

OK, do you have any recommendations? Right now the circle images are way too harsh. This was a recommended strategy to blend the images in more. Maybe we can work with some transparency around the edges? I can give you the square images if needed. The headers are one of the most important changes we need to make I believe.

[samtaggart]

• [x] Create icons for Build Page – Forum, Open Source, Farming, and Support [@samtaggart]
• [x] Make sure two lines of text for each of these descriptions [@samtaggart]

[samtaggart]

Here are the icons for the Build page @ehab-hassan (for now)

[samtaggart]

@ehab-hassan Hi brother Please explains the folder structure so I know where to work (e.g. build, buildold, buildnew).

[ehab-hassan]

@samtaggart I renamed the pages we used with the same name at nav About/Expand/Build/Token just go through the folder I circled with red color(old pages) and archive them or put them on google drive.

[ehab-hassan]

For this part, I didn't distort, it is background so it takes the height from the content if I make a fixed height ll not work with all sections, and bad at responsive

[samtaggart]

For this part, I didn't distort, it is background so it takes the height from the content if I make a fixed height ll not work with all sections, and bad at responsive

So this will happen even if we use different versions of the image? Like the below.

[ehab-hassan]

https://www3.threefold.io/ @ updated please check before production

[samtaggart]

• [x] "Explore Grid Capacity" on Home and Expand pages should open in a new tab [@ehab-hassan]

[ehab-hassan]

fixed