The website-redesign from yalla-coop

[Component] Button

Customized by the following props:

Prop name	Data type	Default value	Description
onClick	EventListener	`() => {}`
color	string(css color)	`primary app color`	Color of the button background
textColor	string(css color)	`primary white color`	Color of button text
title	string	`'Click me'`	Text to display
hasArrow	boolean	`false`	Determines if the button has an arrow or not
capitalize	boolean	`false`	Determines if the button text is in Uppercase or not
primary	boolean	`false`	Overrides the background color, text color, capitalize and hasArrow if used

Building components: create footer

Create the footer

This component should contain the following:

Big heading (H1)
Sitemap section
- Includes 4 headings (H4)
- And something like a span inside of the heading for the number
Contact section
- includes and email of the company
- includes the addresses of the company (London, Germany, Gaza)

General styles:

{
  background: primary;
  color: white;
}

Follow the Figma/Zeplin for more specific styles like spacing, etc

Building components: page headers

Page header landing, is the top part of each page that has an arrow down with a heading and subheading
https://www.figma.com/file/e7lI7XGEGvCAxKcnktUfkt/Yalla-Website-Redesign?node-id=82%3A630

Build menu component and make it responsive

Finalise design ready for development

Make last tweaks to design from feedback before development

Building components: contact

Build the contact us if you're interested component which would be in most case studies pages

Make our approach page responsive

Sections

Mobile - Small

Mobile - Medium

Mobile - Large / Tablet:

Laptop:

Create earwig case study page

Draft out various flows of the website - Crazy 8s

Sketch out ideas for site - try out as many different layouts as possible so we can pick favourites at the end
Send for review

Gather content and assets

Building components: capabilities card

Create the capabilities component:

Create Contact Us page

Building components: metadata

Create a metadata component for the case study pages

Make header component responsive

Sections

Refactor components: spacing between elements

The margin before and after the email link should be the same as the Figma

Create Our Approach page

Take paper flows and create low res wireframes

Make contact banner / contact us component responsive

Work pics

It would be good to get some consistent photos of us all for the website. I also don't ever want to see the photo of me that we used on recent pitches haha!!

So, thoughts:

Normal photo
Everyone gets someone to take a photo of them in front of a white wall. Then send either to me (or @jema28 if you'd like to do it) to add some styling onto it.

Left field ideas
I think it would be fun to actually do something a bit different perhaps! So potential options:

Rather than photos, we do the Pokemon filter that's on Instagram at the moment where it picks a pokemon above your head. We can easily convert these into a gif. I think this could be really fun while consistent!
Powerpuff yourself haha! https://powerpuffyourself.com/#/en

Feel free to add other ideas as comments

Make landing page responsive

Sections

Mobile - Small:

Mobile - Medium:

Mobile - Large / Tablet:

Laptop:

Desktop:

Building components: create nav bar

the navbar component in the header has the same shape in all pages but with the different color depending on the color of the background image , here the examples :

and the component appear above the element and always in the top of the page so for that it can take a position as absolute and the top to be zero . and we will wait for @jema28 to complete the shape of the menu after clicking(opening ) to complete the component.

Draft out key case studies

Pick three key projects to write case studies on
Review case study notes and what direction we're going in
Decide on structure
Repeat the following for each key project:
- Draft copy
- Make edits
- Finalise

Work on high res design

Building components: create inputs

Create the inputs

We have one input component in our design but it can look different according to its size:

Normal Input Field

Main Props:

Type (email, phone, text, etc)
Size (large, normal)
Label
Placeholder
Value
OnChange Function
Error (so there should be some validation)
- Email: Please provide a valid email address
- Phone: Please provide a valid phone number

Main Styles:

Label (Caps Heading Small Component)
Placeholder/text (Input Placeholder Text Component)
Input box/field

/* we might use the variables we have in the utils folder  */
  padding: 16px;
  margin-top: 6px; /* between the label and the box */
  background: rgba(196, 196, 196, 0.05);
  border: 1px solid rgba(224, 224, 224, 0.5);

Large Input Field:

To this one, you can apply all of the above but the width and height should be bigger for the input box as you can see

/* these will not be static forever */
  width: 674px; 
  height: 227px;

Create landing page

Make Work card component responsive

Fix footer

some parts of the footer are too close to each other fix them so they look like the Figma

Make footer component responsive

Create the design system

Using this as a reference: https://github.com/jema28/what-im-learning
Creating utils for :

Colors
Typography
Letter spacings

Work on second draft of high res design

Work on feedback from first review
Finalise design for sprint 1

Building components: create header

Accents Height

The accent height is in rems and it doesn't work right most of the time so if we change it to pixels it works just fine

Art-direct visuals

Take team photos with same style and background
Take group photo
Take photo of us in action e.g. in design thinking

Building components: subtitle

Create subtitle with accent

Building components: create story card

Create story card

This component is a small representation for a story/post that has been done and it contains the following:

The box wrapper:

background: white;

An image:
this one should be inside of a div that takes the full width of the container(box wrapper)
Caps heading small w/medium font-weight

color: #858585; /* you can find it in utils */

Caps heading 4

color: primary; /* primary from utils */

Main Props:

Image: Could be a URL or a stored image(preferred)
Small Heading (caps heading small)
Big Heading (heading 4)

This is how the component should look like when given all the props

Building components: create work card

Create work card

This component is a small representation for a work/project that has been done and it contains the following:

The box wrapper:

{
  padding: 35px;
  background: #020F1D; /* this color is found in utils folder */
  width: 638px; /* we should be able to fit two next to each other in one container */
}

An image:
this one should be inside of a div that takes the full width of the container(box wrapper)
Caps heading small w/medium font-weight
Caps heading 4

{ color: #fff; /* white from utils */ }

Main Props:

Image: Could be a URL or a stored image(preferred)
Small Heading (caps heading small)
Big Heading (heading 4)

This is how the component should look like when given all the props

[Component] Accent bar

Building components: subtitle alternate

Create subtitle alternate

Build Our Story + Team page and make it responsive

Figma : https://www.figma.com/file/e7lI7XGEGvCAxKcnktUfkt/Yalla-Website-Redesign?node-id=1307%3A32849

Agree on tech stack

Hey @jema28 @thejoefriel @dupreesi @ashatat
it would be great to get your inputs to choose what do we need to use from these options:

Static pages generators (one of):
- Gatsby
- Webflow
- pure React
CMS (headless) :
- Netlify
- Wordpress
- Sanity
UI test:
- cypress
- puppeteer
others:
- storybook

Determine visual direction

Research design/web development agency sites, analyse their structure and content. Note down sections we like
Create boards of visual inspiration

Create quote component

This component should contain:

Quote Sign:
Which is just a normal quote that has the following styles:

{
  font-size: 100px;
  color: #C73E46;
  font-weight: 700;

 /* and these spacings: */
  margin: 0 19px 15px 0;
}

Heading 3:
Which has the following styles:

{
  color: #000000;
  margin-bottom: 50px; /* the space between it and the paragraph */
}

Body / Extra-large (Regular):
Which has the following styles:

{
  color: #858585;
  margin-bottom: 8px;
}

Caps Heading / Large (Medium)
Which has the following styles:

{
  color: #000000;
  margin-bottom: 5px;
}

Caps Heading / Medium (Bold)
Which has the following styles:

{
  color: #C4C4C4;
}

And these elements should be a representation for the following props:

Headline
Body
Name
Position

Setup commitlint package

Commitlint

Commitlint checks if your commit messages meet the conventional commit format.

In general, the pattern mostly looks like this:

type(scope?): subject  #scope is optional

Common types

build
ci
chore
docs
feat
fix
perf
refactor
revert
style
test

Why Use Conventional Commits

Automatically generating CHANGELOGs.
Automatically determining a semantic version bump (based on the types of commits landed).
Communicating the nature of changes to teammates, the public, and other stakeholders.
Triggering build and publish processes.
Making it easier for people to contribute to your projects, by allowing them to explore a more - structured commit history.

Build team member component and make it responsive

Figma : https://www.figma.com/file/e7lI7XGEGvCAxKcnktUfkt/Yalla-Website-Redesign?node-id=1307%3A32849

Headings/Typography need colors

This is a problem that I've faced when I was working with headings mostly. They need a different color so I always had to write more CSS to override that.

We can put a property that can change based on a prop

color: {({ color }) => color }

Build banner component and make it responsive

Setup codebase and config

Eslint
Storybook
Gatsby-plugin-MDX

Navbar width

There is a problem with the navbar height and also the colors it doesn't work all the time

https://www.loom.com/share/fc256d2cc5424a4e947e0354efdef0b0

yalla-coop / website-redesign Goto Github PK

website-redesign's People

Contributors

Watchers

website-redesign's Issues

Create the footer

Sections

Create the capabilities component:

Create a metadata component for the case study pages

Sections

Sections

the navbar component in the header has the same shape in all pages but with the different color depending on the color of the background image , here the examples :

and the component appear above the element and always in the top of the page so for that it can take a position as absolute and the top to be zero . and we will wait for @jema28 to complete the shape of the menu after clicking(opening ) to complete the component.

Create the inputs

Create subtitle with accent

Create story card

Create work card

Create subtitle alternate

Create quote component

Recommend Projects

Recommend Topics

Recommend Org