Implement New Landing Page Layout from Figma Design by danielmarv · Pull Request #355 · OpenElements/open-elements-website

danielmarv · 2026-06-05T19:40:37Z

Description

This pull request introduces a new, comprehensive landing page for the home route and significantly expands both the German and English localization files to support the new content and footer structure.

Landing Page Redesign:

Replaces the previous composition of multiple home sections (HeroSection, OpenKnowledgeSection, etc.) in src/app/[locale]/page.tsx with a single LandingPage component, streamlining the home page rendering and paving the way for a unified, richer landing experience. (src/app/[locale]/page.tsxL1-R4)

Localization Enhancements:

Adds extensive new entries under homeLanding in both locales/de.json and locales/en.json, providing all text, labels, and content needed for the new landing page, including hero section, business areas, metrics, distinguishing features, values, and contact sections. [1] [2]
Updates and expands footer-related translations in both German and English, adding navigation, company, contact, tagline, and other footer elements to support a more informative and accessible footer. [1] [2]
Brief description of changes made in this PR.

Type of Change

Related Issue(s)

Closes #354

Changes Made

Change 1
Change 2
Change 3

How to Test

Step 1
Step 2
Verify the expected behavior

Checklist

Code follows project style guidelines
Self-review conducted
Comments added for complex logic
Documentation updated (if needed)
No new warnings generated
Tests added/updated (if applicable)
All tests passing locally

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

netlify · 2026-06-05T19:40:41Z

✅ Deploy Preview for open-elements ready!

Name	Link
🔨 Latest commit	`a9059ca`
🔍 Latest deploy log	https://app.netlify.com/projects/open-elements/deploys/6a2714b70122f00008fa4ea2
😎 Deploy Preview	https://deploy-preview-355--open-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 69 Accessibility: 89 Best Practices: 92 SEO: 100 PWA: 60 View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

Copilot

Pull request overview

This PR implements the new Figma landing page by replacing the previous multi-section home composition with a single LandingPage component, updating navbar/footer styling to match the new layout, and expanding EN/DE localization to support the new content structure.

Changes:

Replace the home route’s legacy section stack with a unified LandingPage component.
Redesign the footer structure (including mobile accordions) and adjust navbar visuals for the new landing layout.
Add/expand homeLanding and footer translation keys in locales/en.json and locales/de.json.

Reviewed changes

Copilot reviewed 12 out of 15 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/app/[locale]/page.tsx	Switches the home route to render the new unified landing page component.
src/components/home/LandingPage.tsx	Adds the new landing page layout and content structure driven by `homeLanding` translations.
src/components/Navbar.tsx	Updates navbar styling and mobile header controls to fit the new design.
src/components/Footer.tsx	Rebuilds footer into new column layout with mobile collapsible sections and new translation keys.
locales/en.json	Adds `homeLanding` content and new footer keys for the redesigned footer.
locales/de.json	Adds `homeLanding` content and new footer keys for the redesigned footer.
src/components/home/HeroSection.tsx	Removes legacy home hero section (superseded by `LandingPage`).
src/components/home/OpenKnowledgeSection.tsx	Removes legacy section (superseded by `LandingPage`).
src/components/home/OpenEventsSection.tsx	Removes legacy section (superseded by `LandingPage`).
src/components/home/OpenSourceSection.tsx	Removes legacy section (superseded by `LandingPage`).
src/components/home/OpenDoorsSection.tsx	Removes legacy section (superseded by `LandingPage`).
src/components/home/OpenOfficeSection.tsx	Removes legacy section (superseded by `LandingPage`).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+                  <button
+                    className="cursor-pointer"
+                    onClick={() => setIsOpen(!isOpen)}>


+              <button
+                className="flex items-center justify-between lg:pointer-events-none"
+                onClick={() => toggleSection('nav')}>
+                <h3 className="text-xs font-bold uppercase leading-[26px] tracking-[1.2px] text-white">
+                  {t('footerNavigation')}
+                </h3>
+                <ChevronDown
+                  className={`lg:hidden transition-transform ${openSection === 'nav' ? 'rotate-180' : ''}`}
+                />
+              </button>
+              <div
+                className={`flex-col gap-4 ${openSection === 'nav' ? 'flex' : 'hidden'} lg:flex`}>
+                {mainMenu.map((item, index) => {


+              <button
+                className="flex items-center justify-between lg:pointer-events-none"
+                onClick={() => toggleSection('company')}>
+                <h3 className="text-xs font-bold uppercase leading-[26px] tracking-[1.2px] text-white">
+                  {t('footerCompany')}
+                </h3>
+                <ChevronDown
+                  className={`lg:hidden transition-transform ${openSection === 'company' ? 'rotate-180' : ''}`}
+                />
+              </button>
+              <div
+                className={`flex-col gap-4 ${openSection === 'company' ? 'flex' : 'hidden'} lg:flex`}>


+          <span className="text-base leading-[26px] text-[#C5DEF3]">
+            {t('footerCopyright')}
+          </span>


+  "footerCompany": "Company",
+  "footerContact": "Contact",
+  "footerEmail": "info@open-elements.com",
+  "footerLocation": "Deutschland / Europe",


+  "footerCompany": "Unternehmen",
+  "footerContact": "Kontakt",
+  "footerEmail": "info@open-elements.com",
+  "footerLocation": "Deutschland / Europe",


+        "linux": {
+          "category": "Self-sovereign identity",
+          "logoAlt": "The Linux Foundation logo",
+          "body": "In our modern labs, we develop."
+        },


+        "linux": {
+          "category": "Self-Sovereign Identity",
+          "logoAlt": "The Linux Foundation Logo",
+          "body": "In unseren hochmodernen Laboren entwickeln."
+        },


Jexsie

Thank you @danielmarv. The UI looks good to me. I just have a few suggestions.

Have different section as components under the home.
Have the dynamic content as a separate component
Separate reusable components like buttons, Icons, that are not specific for the Landing page
There is an issue with the layout of the hero-image /illustrations/home-bg-2.svg on ultra wide screens. It has been there already, not related to these changes

…, and values Signed-off-by: Ntege Daniel <danientege785@gmail.com>

hendrikebbers · 2026-06-08T17:42:02Z

Some problems in the layout / ui:

hendrikebbers · 2026-06-08T17:42:21Z

Final text for the page will be provided later the week

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

danielmarv added 6 commits June 5, 2026 19:16

feat: add LandingPage component with business areas and engagement se…

fa79dad

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

feat: add LandingPage component with business areas and engagement se…

57db4fd

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

feat: add LandingPage component with business areas and engagement se…

51a1e18

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

feat: add LandingPage component with business areas and engagement se…

aead34f

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

feat: add LandingPage component with business areas and engagement se…

c6028bd

…ctions Signed-off-by: Ntege Daniel <danientege785@gmail.com>

feat: update footer component with new sections and localization strings

476c0cf

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

danielmarv self-assigned this Jun 5, 2026

github-actions Bot added build typescript labels Jun 5, 2026

danielmarv requested a review from hendrikebbers June 5, 2026 19:41

feat: update footer component with new sections and localization strings

243826d

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

hendrikebbers marked this pull request as draft June 6, 2026 11:48

danielmarv requested a review from Jexsie June 6, 2026 12:23

Jexsie requested a review from Copilot June 7, 2026 05:19

Copilot started reviewing on behalf of Jexsie June 7, 2026 05:19 View session

Copilot AI reviewed Jun 7, 2026

View reviewed changes

Jexsie requested changes Jun 7, 2026

View reviewed changes

feat: add new sections for business areas, contact, distinguish, hero…

1c4559f

…, and values Signed-off-by: Ntege Daniel <danientege785@gmail.com>

danielmarv added 2 commits June 8, 2026 21:55

Refactor code structure for improved readability and maintainability

c717dfc

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

Refactor code structure for improved readability and maintainability

a9059ca

Signed-off-by: Ntege Daniel <danientege785@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement New Landing Page Layout from Figma Design#355

Implement New Landing Page Layout from Figma Design#355
danielmarv wants to merge 10 commits into
mainfrom
354-oe-br

danielmarv commented Jun 5, 2026

Uh oh!

netlify Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Jexsie left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hendrikebbers commented Jun 8, 2026

Uh oh!

hendrikebbers commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

danielmarv commented Jun 5, 2026

Description

Type of Change

Related Issue(s)

Changes Made

How to Test

Checklist

Uh oh!

netlify Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for open-elements ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Jexsie left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hendrikebbers commented Jun 8, 2026

Uh oh!

hendrikebbers commented Jun 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify Bot commented Jun 5, 2026 •

edited

Loading