Landing page: Add YouTube video section ("How you can support refugees in your community") - #930
Landing page: Add YouTube video section ("How you can support refugees in your community")#930gshiva53 wants to merge 2 commits into
Conversation
| "iframeTitles": { | ||
| "howToVolunteer": "Wie Du Geflüchtete in Deiner Nachbarschaft unterstützen können" | ||
| }, | ||
| "testimonials": { |
There was a problem hiding this comment.
German translation for the heading and video title. Taken from the need4deed-org website.
| "iframeTitles": { | ||
| "howToVolunteer": "How you can support refugees in your community" | ||
| }, | ||
| "testimonials": { |
There was a problem hiding this comment.
English translation for the heading and video title. Taken from the need4deed-org website.
| @@ -0,0 +1 @@ | |||
| export * from "./RefugeeSupport"; | |||
There was a problem hiding this comment.
I don't think this is required. I may be wrong. Added just to maintain consistency with other components.
There was a problem hiding this comment.
Yes, this barrel export is needed for the current import style: @/components/RefugeeSupport. Without it, the import would need to reference RefugeeSupport/RefugeeSupport directly.
| {/* Transferred Components */} | ||
| <VolunteeringOpportunitiesSection /> | ||
| <RefugeeSupport /> | ||
| <EventsSection /> |
There was a problem hiding this comment.
Importing and rendering the refugee support component on the landing page.
|
Hi @need4deed, requesting for review for this PR 😄. I didn't know who else to tag for this. |
|
The section works well and the video displays correctly. 😊 I noticed one small responsiveness issue on mobile devices: the video is shifted to the right and touches the right edge instead of being centered with equal spacing on both sides. I’ve attached screenshots for reference. 
|
Justber79
left a comment
Justber79
left a comment
There was a problem hiding this comment.
Thanks for adding this section. I found one German translation issue that should be corrected. I also added two suggestions about the iframe styling and mobile responsiveness.
| } | ||
| }, | ||
| "iframeTitles": { | ||
| "howToVolunteer": "Wie Du Geflüchtete in Deiner Nachbarschaft unterstützen können" |
There was a problem hiding this comment.
The German text has a conjugation mismatch: “Du … können” should be “Du … kannst”. Could we change this to “Wie Du Geflüchtete in Deiner Nachbarschaft unterstützen kannst”?
| @@ -0,0 +1 @@ | |||
| export * from "./RefugeeSupport"; | |||
There was a problem hiding this comment.
Yes, this barrel export is needed for the current import style: @/components/RefugeeSupport. Without it, the import would need to reference RefugeeSupport/RefugeeSupport directly.
| const IFrame = styled.iframe` | ||
| width: var(--homepage-process-section-video-width); | ||
| height: var(--homepage-process-section-video-height); | ||
| border-radius: var(--homepage-process-section-video-border-radius); |
There was a problem hiding this comment.
Could we also add border: 0 here? Browsers may otherwise render the iframe with a default border.
| import { FullWidthContainer, SectionContainer } from "../styled/container"; | ||
|
|
||
| const IFrame = styled.iframe` | ||
| width: var(--homepage-process-section-video-width); |
There was a problem hiding this comment.
Have we tested this at the smallest supported mobile width? The fixed 360px mobile width may be clipped on narrower screens, especially when section padding is included.
2 participants
Description
enanddetranslations for the section title.Related Issues
Closes #915
Changes
RefugeeSupportcomponent for homepageScreenshots / Demos
The homepage will look like the following screenshot after this PR is merged
Checklist