Skip to content

Commit 9bfe048

Browse files
danielmarvdanielmarv
committed
feat: Implement new layout and homepage structure and the favicon
1 parent 1430439 commit 9bfe048

File tree

3 files changed

+250
-70
lines changed

3 files changed

+250
-70
lines changed

‎src/app/layout.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,23 @@ const montserrat = Montserrat({
1414
export const metadata: Metadata = {
1515
title: 'Open Elements - Open Source made right',
1616
description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java',
17+
keywords: ['open source', 'Java', 'OSS', 'open source Support', 'Java Support'],
18+
openGraph: {
19+
type: 'website',
20+
url: 'https://open-elements.com/',
21+
title: 'Open Elements - Open Source made right',
22+
description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java',
23+
siteName: 'Open Elements',
24+
images: [
25+
{
26+
url: '/open-graph/open-elements.png',
27+
width: 1200,
28+
height: 630,
29+
alt: 'OpenElements Logo',
30+
},
31+
],
32+
locale: 'en_US',
33+
},
1734
}
1835

1936
export default function RootLayout({
@@ -23,6 +40,9 @@ export default function RootLayout({
2340
}) {
2441
return (
2542
<html lang="en" className={`${montserrat.variable} scroll-smooth`}>
43+
<head>
44+
<link rel="icon" href="/icons/favicon.ico" />
45+
</head>
2646
<body className={montserrat.className}>
2747
<div id="top" className="relative">
2848
<Navbar />

‎src/components/Footer.tsx‎

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,32 @@ export default function Footer() {
8181
<div>
8282
<p className="mb-4 text-base font-semibold leading-10 text-white sm:text-2xl sm:mb-6">Privacy</p>
8383
<div className="flex flex-col gap-5">
84-
<Link href="/impressum" className="flex items-start gap-3 group">
84+
<a
85+
href="https://www.iubenda.com/privacy-policy/63821551"
86+
className="flex items-center gap-3 group iubenda-nostyle no-brand iubenda-noiframe iubenda-embed"
87+
title="Privacy Policy"
88+
>
8589
<span className="iconify footer-link-icon" data-icon="ph:arrow-right-bold"></span>
86-
<span className="footer-link">Imprint</span>
90+
<span className="footer-link">Privacy Policy</span>
91+
</a>
92+
<a
93+
href="https://www.iubenda.com/privacy-policy/63821551/cookie-policy"
94+
className="flex items-center gap-3 group iubenda-nostyle no-brand iubenda-noiframe iubenda-embed"
95+
title="Cookie Policy"
96+
>
97+
<span className="iconify footer-link-icon" data-icon="ph:arrow-right-bold"></span>
98+
<span className="footer-link">Cookie Policy</span>
99+
</a>
100+
<a
101+
href="#"
102+
className="flex items-center gap-3 iubenda-cs-preferences-link group"
103+
>
104+
<span className="iconify footer-link-icon" data-icon="ph:arrow-right-bold"></span>
105+
<span className="footer-link">Privacy Settings</span>
106+
</a>
107+
<Link href="/impressum" className="flex items-center gap-3 group">
108+
<span className="iconify footer-link-icon" data-icon="ph:arrow-right-bold"></span>
109+
<span className="footer-link">Impressum</span>
87110
</Link>
88111
</div>
89112
</div>
@@ -98,24 +121,45 @@ export default function Footer() {
98121
</div>
99122
</div>
100123

101-
<div className="items-center gap-4 lg:hidden flex col-span-2">
102-
{social.map((item, index) => (
103-
<a
104-
key={index}
105-
href={item.link}
106-
aria-label={item.name}
107-
target="_blank"
108-
rel="noopener noreferrer"
109-
className="flex items-center justify-center text-3xl text-white transition-colors duration-150 ease-in-out rounded group hover:text-blue focus:outline-none bg-white/40 hover:bg-green w-11 h-11"
110-
>
111-
<span className="iconify" data-icon={item.icon}></span>
112-
</a>
113-
))}
124+
<div className="relative w-full col-span-2 xl:col-span-2">
125+
<div className="items-center justify-start gap-4 mt-6 lg:hidden flex">
126+
{social.map((item, index) => (
127+
<a
128+
key={index}
129+
href={item.link}
130+
aria-label={item.name}
131+
target="_blank"
132+
rel="noopener noreferrer"
133+
className="flex items-center justify-center text-3xl text-white transition-colors duration-150 ease-in-out rounded group hover:text-blue focus:outline-none bg-white/40 hover:bg-green w-11 h-11"
134+
>
135+
<span className="iconify" data-icon={item.icon}></span>
136+
</a>
137+
))}
138+
</div>
114139
</div>
115140
</div>
116141
</div>
117142
</div>
118143
</div>
144+
145+
<script dangerouslySetInnerHTML={{
146+
__html: `
147+
(function (w,d) {
148+
var loader = function () {
149+
var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0];
150+
s.src="https://cdn.iubenda.com/iubenda.js";
151+
tag.parentNode.insertBefore(s,tag);
152+
};
153+
if(w.addEventListener){
154+
w.addEventListener("load", loader, false);
155+
}else if(w.attachEvent){
156+
w.attachEvent("onload", loader);
157+
}else{
158+
w.onload = loader;
159+
}
160+
})(window, document);
161+
`
162+
}} />
119163
</div>
120164
)
121165
}

‎src/components/Navbar.tsx‎

Lines changed: 171 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,162 @@ import Link from 'next/link'
44
import Image from 'next/image'
55
import { useState } from 'react'
66
import mainMenu from '@/data/mainMenu.json'
7+
import social from '@/data/social.json'
78

89
export default function Navbar() {
910
const [isOpen, setIsOpen] = useState(false)
1011

1112
return (
12-
<div className="relative">
13-
<div className="absolute top-0 flex items-start w-full">
14-
<div className="bg-blue h-[244px] w-full 2xl:block hidden"></div>
15-
<div className="w-full 2xl:shrink-0">
16-
<Image
17-
className="hidden w-full mt-3 xl:mt-0 lg:block"
18-
src="/illustrations/home-bg-2.svg"
19-
alt="Hero background"
20-
width={2000}
21-
height={600}
22-
priority
23-
/>
24-
<Image
25-
className="absolute inset-0 block object-cover object-center w-full md:-top-28 sm:-top-24 -top-10 lg:hidden"
26-
src="/illustrations/m-bg-hero.svg"
27-
alt="hero background for mobile"
28-
width={800}
29-
height={600}
30-
priority
31-
/>
13+
<>
14+
<div className="relative">
15+
<div className="absolute top-0 flex items-start w-full">
16+
<div className="bg-blue h-[244px] w-full 2xl:block hidden"></div>
17+
<div className="w-full 2xl:shrink-0">
18+
<Image
19+
className="hidden w-full mt-3 xl:mt-0 lg:block"
20+
src="/illustrations/home-bg-2.svg"
21+
alt="Hero background"
22+
width={2000}
23+
height={600}
24+
priority
25+
/>
26+
<Image
27+
className="absolute inset-0 block object-cover object-center w-full md:-top-28 sm:-top-24 -top-10 lg:hidden"
28+
src="/illustrations/m-bg-hero.svg"
29+
alt="hero background for mobile"
30+
width={800}
31+
height={600}
32+
priority
33+
/>
34+
</div>
35+
<div className="bg-blue h-[595px] w-full 2xl:block hidden"></div>
36+
</div>
37+
38+
<div className="container pt-16">
39+
<div className="fixed inset-x-0 top-0 z-30 w-full pb-3 bg-blue">
40+
<div className="container relative mx-auto max-w-7xl">
41+
<nav className="flex items-center justify-between pt-5 pb-3">
42+
<Link href="/">
43+
<Image src="/images/logo.svg" alt="logo" width={120} height={28} className="h-5 sm:h-7 w-auto" />
44+
</Link>
45+
46+
<div className="items-center hidden xl:flex gap-9">
47+
<div className="flex items-center gap-9">
48+
{mainMenu.map((item, index) => {
49+
if (!item.visibleInNavigation) return null
50+
51+
return (
52+
<div key={index} className="nav-item group relative">
53+
{item.children ? (
54+
<>
55+
<button className="flex items-center justify-between nav-link">
56+
{item.name}
57+
<svg className="ml-1 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
58+
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
59+
</svg>
60+
</button>
61+
<div className="hidden absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4 group-hover:block">
62+
<div className="dropdownBox w-screen max-w-md flex-auto overflow-hidden bg-blue text-sm leading-6 shadow-lg ring-1 ring-gray-900/5 rounded-lg">
63+
<div className="p-4">
64+
{item.children.map((child, childIndex) => (
65+
<div key={childIndex} className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
66+
<div>
67+
<Link href={child.link} className="nav-link whitespace-nowrap">
68+
{child.name}
69+
<span className="absolute inset-0"></span>
70+
</Link>
71+
</div>
72+
</div>
73+
))}
74+
</div>
75+
</div>
76+
</div>
77+
</>
78+
) : (
79+
<Link href={item.link} className="nav-link inline-flex items-center">
80+
{item.name}
81+
</Link>
82+
)}
83+
</div>
84+
)
85+
})}
86+
</div>
87+
88+
<div>
89+
<div className="flex items-center gap-2">
90+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green">
91+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
92+
</svg>
93+
<div className="flex items-center gap-1">
94+
<span className="bg-green rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center text-blue">EN</span>
95+
<Link href="/de" className="bg-transparent rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center hover:bg-white/20 transition-all ease-in-out duration-150 text-white">DE</Link>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<div className="flex items-center gap-5">
101+
{social.map((item, index) => (
102+
<a
103+
key={index}
104+
href={item.link}
105+
aria-label={item.name}
106+
target="_blank"
107+
rel="noopener noreferrer"
108+
className="focus:outline-none"
109+
>
110+
<span className="iconify nav-icon" data-icon={item.icon}></span>
111+
</a>
112+
))}
113+
</div>
114+
</div>
115+
116+
<button
117+
className="xl:hidden"
118+
onClick={() => setIsOpen(!isOpen)}
119+
>
120+
<Image
121+
src="/illustrations/burger-menu.svg"
122+
alt="menu"
123+
width={32}
124+
height={32}
125+
className="w-8"
126+
/>
127+
</button>
128+
</nav>
129+
</div>
130+
</div>
32131
</div>
33-
<div className="bg-blue h-[595px] w-full 2xl:block hidden"></div>
34132
</div>
35133

36-
<div className="container pt-16">
37-
<div className="fixed inset-x-0 top-0 z-30 w-full pb-3 bg-blue">
38-
<div className="container relative mx-auto max-w-7xl">
39-
<nav className="flex items-center justify-between pt-5 pb-3">
134+
{/* Mobile Menu */}
135+
{isOpen && (
136+
<div className="fixed inset-0 top-0 z-30 h-full bg-blue xl:hidden">
137+
<div className="relative w-full h-screen">
138+
<Image
139+
className="absolute inset-0 object-cover w-full h-full"
140+
alt="menu background"
141+
src="/illustrations/menu-bg.svg"
142+
width={800}
143+
height={1000}
144+
priority
145+
/>
146+
<nav className="container relative flex items-center justify-between pt-4 pb-3 mx-auto sm:pt-5 max-w-7xl">
40147
<Link href="/">
41148
<Image src="/images/logo.svg" alt="logo" width={120} height={28} className="h-5 sm:h-7 w-auto" />
42149
</Link>
43-
44-
<div className="items-center hidden xl:flex gap-9">
45-
<div className="flex items-center gap-9">
150+
<button className="xl:hidden" onClick={() => setIsOpen(false)}>
151+
<Image
152+
className="w-7"
153+
alt="close button icon"
154+
src="/illustrations/close.svg"
155+
width={28}
156+
height={28}
157+
/>
158+
</button>
159+
</nav>
160+
<div className="flex flex-col sm:items-center justify-between py-12 sm:px-12 px-8 gap-24 relative h-[calc(100vh-70px)]">
161+
<div className="flex flex-col gap-11 sm:items-center">
162+
<div className="flex flex-col sm:items-center gap-7">
46163
{mainMenu.map((item, index) => {
47164
if (!item.visibleInNavigation) return null
48165

@@ -57,7 +174,7 @@ export default function Navbar() {
57174
</svg>
58175
</button>
59176
<div className="hidden absolute left-1/2 z-10 mt-5 flex w-screen max-w-max -translate-x-1/2 px-4 group-hover:block">
60-
<div className="dropdownBox w-screen max-w-md flex-auto overflow-hidden bg-blue text-sm leading-6 shadow-lg ring-1 ring-gray-900/5 rounded-lg">
177+
<div className="dropdownBox w-screen max-w-md flex-auto overflow-hidden bg-blue text-sm leading-6 shadow-lg ring-1 ring-gray-900/5">
61178
<div className="p-4">
62179
{item.children.map((child, childIndex) => (
63180
<div key={childIndex} className="group relative flex gap-x-6 rounded-lg p-4 hover:bg-gray-50">
@@ -74,43 +191,42 @@ export default function Navbar() {
74191
</div>
75192
</>
76193
) : (
77-
<Link href={item.link} className="nav-link inline-flex items-center">
194+
<Link href={item.link} className="nav-link inline-flex items-center" onClick={() => setIsOpen(false)}>
78195
{item.name}
79196
</Link>
80197
)}
81198
</div>
82199
)
83200
})}
84201
</div>
85-
86-
<div>
87-
<div className="flex items-center gap-2">
88-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green">
89-
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
90-
</svg>
91-
<div className="flex items-center gap-1">
92-
<span className="bg-green rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center text-blue">EN</span>
93-
<Link href="/de" className="bg-transparent rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center hover:bg-white/20 transition-all ease-in-out duration-150 text-white">DE</Link>
94-
</div>
202+
<div className="flex items-center gap-4">
203+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-5 h-5 text-green">
204+
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
205+
</svg>
206+
<div className="flex items-center gap-3">
207+
<span className="bg-green rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center text-blue">EN</span>
208+
<Link href="/de" className="bg-transparent rounded-full px-2 py-[3px] text-xs font-medium leading-none text-center hover:bg-white/20 transition-all ease-in-out duration-150 text-white">DE</Link>
95209
</div>
96210
</div>
97211
</div>
98-
99-
<button
100-
className="xl:hidden"
101-
onClick={() => setIsOpen(!isOpen)}
102-
>
103-
<Image
104-
src={isOpen ? "/illustrations/close.svg" : "/illustrations/burger-menu.svg"}
105-
alt="menu"
106-
width={32}
107-
height={32}
108-
/>
109-
</button>
110-
</nav>
212+
<div className="flex items-center gap-6">
213+
{social.map((item, index) => (
214+
<a
215+
key={index}
216+
href={item.link}
217+
aria-label={item.name}
218+
target="_blank"
219+
rel="noopener noreferrer"
220+
className="focus:outline-none"
221+
>
222+
<span className="iconify nav-icon" data-icon={item.icon}></span>
223+
</a>
224+
))}
225+
</div>
226+
</div>
111227
</div>
112228
</div>
113-
</div>
114-
</div>
229+
)}
230+
</>
115231
)
116232
}

0 commit comments

Comments
 (0)