Add FAQs section to homepage

[tynandebold]

Description

Resolves #71.

Development notes

The content for this module is powered by a TypeScript file and each question/answer is an object. To edit the questions, you'll edit that file. There's a slight oddity with how we have to write the answers when we want unordered lists. It isn't that bad and it's quick to pick up that pattern.

QA notes

Take a look at the deployed URL and check it against the design.

I'm still waiting on the mobile design from @Mackay031. We'll also need to decide on a background color for this section. In the design it was black, but that's the same as the sections above and below the FAQ, which didn't look great, so I've changed it for now.

Checklist

• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Added tests to cover my changes, where applicable

[netlify]

✅ Deploy Preview for kedro-website ready!

Name	Link
🔨 Latest commit	df0bee6
🔍 Latest deploy log	https://app.netlify.com/sites/kedro-website/deploys/6411a814206b7c000784f321
😎 Deploy Preview	https://deploy-preview-92--kedro-website.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[stichbury]

I really like this, thanks for the preview. I found myself playing around with the sections to see where I could click to expand as it seemed a bit inconsistent as to where and when it opened (it doesn't work on the left hand side of the section, under the question text). I found that a bit odd -- the expand works above the text question but not below? Does that make sense? I can make a small video or show you on a screen share if it helps. But the rest is amazing and this is such a small point.

[astrojuanlu]

Love this! ⭐

[Mackay031]

Hy Tynan. thanks for this. Looks great. A couple of comments as flagged:

• Yes, I agree with Jo, we need to look art the hit area of the sections in terms of opening and closing. I think if we made the whole area between the lines clickable (or as close to it as possible), it would be great
• I think we should stick to our two alternating background colours of black and dark grey. So if we make the FAQ's background dark grey, then we need to make 'Case studies' black and 'Our community' dark grey and 'Testimonials' black.
• Could we also look at the timing of the opening and closing. The fade in and out when we open and close a section should happen faster so the lines animating up and down dont cross over the fading text. If that doesn't make sense, lets jump on a call.

I will create mobile view today.

Thanks, its looking great!

[tynandebold]

Nice, thanks for the feedback.

I've updated the accordion hit area and the background colors.

Unfortunately, all the logos have a black background:

Can you help with changing the background to be transparent? All the files are here.

I'll also look into the transition timing.

[Mackay031]

Good point. I could change to background colour of the logos to the dark grey.

On the timing of the accordion and fade overlap (last point in previous comment), if we think timings of fade will be too tight, could each section of the accordion have a background colour that matches the section background colour (dark grey). This would help in not seeing the fade as the sections move up and down? At least I think it would help :)

[tynandebold]

I don't think the background color will do anything. I added an overflow property though, and I think that did the trick. See if it looks better to you.

For the images, yeah that would be great. Can you make the background transparent? Wouldn't want us to have to always be changing the color if we change the section background color again in the future.

[Mackay031]

Looks great!!

https://mckinsey.box.com/s/dh2waz3w6n62heoibebydk2mmlzlic8w
The link to .png logos with transparent backgrounds. These are for desktop. Do you use the same images for mobile?

[Huongg]

this is very cool, I've never used it before. I didn't know we use this for the website 😄

[tynandebold]

framer-motion you mean?

[Huongg]

thanks @tynandebold all working fine for me, couldn't spot any issue 😄

[tynandebold]

Great, thank you @Mackay031. And yes, same logos for desktop and mobile, so no need to do anything else.

Let me know when the mobile designs are ready and I'll implement that.