diff --git a/input.css b/input.css index 570d5c1..56dafcf 100644 --- a/input.css +++ b/input.css @@ -12,11 +12,12 @@ } .nav-link { - @apply font-medium text-lg text-gray hover:text-sky transition-colors ease-in-out duration-150 focus:outline-none; + @apply font-medium text-2xl text-gray hover:text-sky transition-colors ease-in-out duration-150 focus:outline-none; } .nav-icon { - @apply text-2xl leading-none text-white hover:text-green transition-colors ease-in-out duration-150; + @apply text-4xl leading-none text-white hover:text-green transition-colors ease-in-out duration-150; + } .nav-icon-mb { diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..c4b7818 --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +import "./.next/dev/types/routes.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/src/app/about/layout.tsx b/src/app/about/layout.tsx new file mode 100644 index 0000000..b761986 --- /dev/null +++ b/src/app/about/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'About us - Open Elements', + description: 'An overview of the engagement of Open Elements and its partners and customers.', + keywords: ['Open Source', 'Java', 'OSS', 'Open Source Support', 'Java Support'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/about', + title: 'About us - Open Elements', + description: 'An overview of the engagement of Open Elements and its partners and customers.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'en_US', + }, +} + +export default function AboutLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..030ca7f --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,98 @@ +'use client' + +import { useState, useEffect } from 'react' +import Image from 'next/image' +import AboutSidebar from '@/components/about/AboutSidebar' +import TeamSection from '@/components/about/TeamSection' +import EngagementsSection from '@/components/about/EngagementsSection' +import PartnersSection from '@/components/about/PartnersSection' + +export default function AboutPage() { + const [activeSection, setActiveSection] = useState('') + + useEffect(() => { + const options = { + root: null, + rootMargin: '0px', + threshold: 0.2, + } + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id) + } + }) + }, options) + + const sections = document.querySelectorAll('.scroll-section') + sections.forEach((section) => observer.observe(section)) + + return () => { + sections.forEach((section) => observer.unobserve(section)) + } + }, []) + + return ( +
+
+ {/* Decorative images */} + + + + + + + +
+ + +
+ + + +
+
+
+
+ ) +} diff --git a/src/app/contact/layout.tsx b/src/app/contact/layout.tsx new file mode 100644 index 0000000..ba8d9d7 --- /dev/null +++ b/src/app/contact/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Contact us - Open Elements', + description: 'Get in touch with Open Elements. Schedule a meeting, send us an email, or give us a call.', + keywords: ['Contact', 'Open Elements', 'Get in touch', 'Schedule meeting'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/contact', + title: 'Contact us - Open Elements', + description: 'Get in touch with Open Elements. Schedule a meeting, send us an email, or give us a call.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'en_US', + }, +} + +export default function ContactLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx new file mode 100644 index 0000000..a3355c0 --- /dev/null +++ b/src/app/contact/page.tsx @@ -0,0 +1,76 @@ +import Image from 'next/image' +import CalendlyButton from '@/components/contact/CalendlyButton' +import ContactInfo from '@/components/contact/ContactInfo' + +export default function ContactPage() { + return ( +
+
+ {/* Decorative lines */} + Lines + Line M + + {/* Header */} +
+

+
+ Hero text background + Contact us +
+

+
+ + {/* Content */} +
+ + +
+ {/* Decorative rounds */} + Round + Round small + + + + Contact +
+
+
+
+ ) +} diff --git a/src/app/de/about/layout.tsx b/src/app/de/about/layout.tsx new file mode 100644 index 0000000..eba5c3b --- /dev/null +++ b/src/app/de/about/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Über uns - Open Elements', + description: 'Eine Übersicht der verschiedenen Bereiche in denen sich Open Elements einbringt sowie unserer Partner und Kunden.', + keywords: ['Open Source', 'Java', 'OSS', 'Open Source Support', 'Java Support'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/de/about', + title: 'Über uns - Open Elements', + description: 'Eine Übersicht der verschiedenen Bereiche in denen sich Open Elements einbringt sowie unserer Partner und Kunden.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'de_DE', + }, +} + +export default function DeAboutLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/de/about/page.tsx b/src/app/de/about/page.tsx new file mode 100644 index 0000000..a3e9ba2 --- /dev/null +++ b/src/app/de/about/page.tsx @@ -0,0 +1,191 @@ +'use client' + +import { useState, useEffect } from 'react' +import Image from 'next/image' +import AboutSidebar from '@/components/about/AboutSidebar' +import TeamSection from '@/components/about/TeamSection' +import EngagementsSection from '@/components/about/EngagementsSection' +import PartnersSection from '@/components/about/PartnersSection' + +export default function DeAboutPage() { + const [activeSection, setActiveSection] = useState('') + + useEffect(() => { + const options = { + root: null, + rootMargin: '0px', + threshold: 0.2, + } + + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id) + } + }) + }, options) + + const sections = document.querySelectorAll('.scroll-section') + sections.forEach((section) => observer.observe(section)) + + return () => { + sections.forEach((section) => observer.unobserve(section)) + } + }, []) + + return ( +
+
+ {/* Decorative images */} + + + + + + + +
+
+
+
+
+

Über uns

+ Underline +
+
+ +
+
+ + + +
+
+
+
+ +
+
+
+

+ Unser Team +

+
+
+ +
+
+ +
+

+ Unser Engagement +

+
+ +
+
+ +
+

+ Unsere Kunden & Partner +

+
+ +
+
+
+
+
+
+ ) +} diff --git a/src/app/de/blog/layout.tsx b/src/app/de/blog/layout.tsx new file mode 100644 index 0000000..147e8dd --- /dev/null +++ b/src/app/de/blog/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Artikel - Open Elements', + description: 'Lesen Sie unsere neuesten Artikel über Open Source, Java und Softwareentwicklung.', + keywords: ['Open Source', 'Java', 'Blog', 'Artikel', 'Softwareentwicklung'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/de/blog', + title: 'Artikel - Open Elements', + description: 'Lesen Sie unsere neuesten Artikel über Open Source, Java und Softwareentwicklung.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'de_DE', + }, +} + +export default function DeBlogLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/de/blog/page.tsx b/src/app/de/blog/page.tsx new file mode 100644 index 0000000..075960b --- /dev/null +++ b/src/app/de/blog/page.tsx @@ -0,0 +1,78 @@ +'use client' + +import { useState } from 'react' +import Image from 'next/image' +import BlogCard from '@/components/blog/BlogCard' +import Pagination from '@/components/blog/Pagination' + +const mockPosts = [ + { + id: '1', + title: 'Java Module System', + excerpt: 'Erfahren Sie mehr über das Java-Modulsystem und wie es hilft, Ihren Code zu organisieren.', + date: '2024-01-11', + author: 'Hendrik Ebbers', + categories: ['Java', 'Open Source'], + preview_image: '/posts/preview-images/software-development-green.svg', + slug: 'java-module-system', + }, +] + +export default function DeBlogPage() { + const [currentPage, setCurrentPage] = useState(1) + const postsPerPage = 7 + const totalPages = Math.ceil(mockPosts.length / postsPerPage) + + return ( +
+
+ + +
+
+
+
+

+ Alle unsere Beiträge gibt es auf der englischen Seite. +

+ + Zur englischen Seite + +
+
+
+

Artikel

+ Underline +
+
+
+ + {mockPosts.map((post) => ( + + ))} + +
+ +
+
+ ) +} diff --git a/src/app/de/contact/layout.tsx b/src/app/de/contact/layout.tsx new file mode 100644 index 0000000..2e9217d --- /dev/null +++ b/src/app/de/contact/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Kontakt - Open Elements', + description: 'Kontaktieren Sie Open Elements. Vereinbaren Sie einen Termin, senden Sie uns eine E-Mail oder rufen Sie uns an.', + keywords: ['Kontakt', 'Open Elements', 'Termin vereinbaren'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/de/contact', + title: 'Kontakt - Open Elements', + description: 'Kontaktieren Sie Open Elements. Vereinbaren Sie einen Termin, senden Sie uns eine E-Mail oder rufen Sie uns an.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'de_DE', + }, +} + +export default function DeContactLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/de/contact/page.tsx b/src/app/de/contact/page.tsx new file mode 100644 index 0000000..c338e28 --- /dev/null +++ b/src/app/de/contact/page.tsx @@ -0,0 +1,118 @@ +import Image from 'next/image' +import CalendlyButton from '@/components/contact/CalendlyButton' +import ContactInfo from '@/components/contact/ContactInfo' + +export default function DeContactPage() { + return ( +
+
+ Lines + Line M + +
+

+
+ Hero text background + Kontakt +
+

+
+ +
+
+
+

+ Der einfachste Weg, um mit uns in Kontakt zu treten, besteht darin, einen kostenlosen 30-minütigen Slot in unserem offenen Kalender zu buchen. Auf diese Weise können wir eine Diskussion beginnen und über Ihre Anliegen, Interessen oder Probleme bezüglich unserer Schwerpunktthemen wie Open Source und Java sprechen. +

+ +
+
+ +
+ Round + Round small + +
+
+

Zusätzlich dazu können Sie uns eine E-Mail senden an:

+ + + + +

info@open-elements.de

+ +

oder uns direkt anrufen unter:

+ + + + +

+49 151-22684622

+ +
+ +
+

Unsere Postadresse lautet:

+
+ + + + +

+ Open Elements GmbH
+ Gerhart-Hauptmann-Str. 49B
+ 51379 Leverkusen
+ Germany +

+
+
+
+ + Contact +
+
+
+
+ ) +} diff --git a/src/app/de/layout.tsx b/src/app/de/layout.tsx new file mode 100644 index 0000000..b709457 --- /dev/null +++ b/src/app/de/layout.tsx @@ -0,0 +1,54 @@ +import type { Metadata } from 'next' +import { Montserrat } from 'next/font/google' +import Navbar from '@/components/Navbar' +import Footer from '@/components/Footer' + +const montserrat = Montserrat({ + subsets: ['latin'], + weight: ['300', '400', '500', '600', '700', '800', '900'], + variable: '--font-montserrat', + display: 'swap', +}) + +export const metadata: Metadata = { + title: 'Open Elements - Open Source, aber richtig', + description: 'Open Source, aber richtig - Open Elements ist ein modernes Unternehmen mit einem Fokus auf Open Source und Java', + keywords: ['open source', 'Java', 'OSS', 'open source Support', 'Java Support'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/de', + title: 'Open Elements - Open Source, aber richtig', + description: 'Open Source, aber richtig - Open Elements ist ein modernes Unternehmen mit einem Fokus auf Open Source und Java', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'de_DE', + }, +} + +export default function DeLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + +
+ +
{children}
+
+
+ + + ) +} diff --git a/src/app/de/page.tsx b/src/app/de/page.tsx new file mode 100644 index 0000000..eb2c733 --- /dev/null +++ b/src/app/de/page.tsx @@ -0,0 +1,19 @@ +import HeroSection from '@/components/home/HeroSection' +import OpenKnowledgeSection from '@/components/home/OpenKnowledgeSection' +import OpenEventsSection from '@/components/home/OpenEventsSection' +import OpenSourceSection from '@/components/home/OpenSourceSection' +import OpenDoorsSection from '@/components/home/OpenDoorsSection' +import OpenOfficeSection from '@/components/home/OpenOfficeSection' + +export default function DeHome() { + return ( + <> + + + + + + + + ) +} diff --git a/src/app/de/support-care-maven/layout.tsx b/src/app/de/support-care-maven/layout.tsx new file mode 100644 index 0000000..1c1ad58 --- /dev/null +++ b/src/app/de/support-care-maven/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Support & Care - Open Elements', + description: 'Support & Care ist ein Programm zur nachhaltigen Weiterentwicklung, Stabilisierung und Unterstützung von Open Source Software (OSS).', + keywords: ['Open Source', 'Support', 'Care', 'Java', 'Eclipse Temurin', 'Apache Maven'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/de/support-care', + title: 'Support & Care - Open Elements', + description: 'Support & Care ist ein Programm zur nachhaltigen Weiterentwicklung, Stabilisierung und Unterstützung von Open Source Software (OSS).', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'de_DE', + }, +} + +export default function DeSupportCareLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/de/support-care-maven/page.tsx b/src/app/de/support-care-maven/page.tsx new file mode 100644 index 0000000..6bc4d9c --- /dev/null +++ b/src/app/de/support-care-maven/page.tsx @@ -0,0 +1,151 @@ +import Image from 'next/image' +import Link from 'next/link' + +export default function DeSupportCareMavenPage() { + return ( +
+ {/* Hero Background */} +
+ Hero background +
+ +
+
+ {/* Logo Section */} +
+ Support and Care für Apache Maven logo +
+ + {/* Introduction Text */} +
+

+ Open Elements hat mit seinem Programm Support & Care für Apache Maven™ eine wichtige Initiative gestartet, die dazu beiträgt, + ein zentrales Werkzeug des Java-Ökosystems abzusichern. Mit Förderung der Sovereign Tech Agency + wird erstmals eine nachhaltige Unterstützung für Apache Maven ermöglicht – eines der weltweit am häufigsten genutzten Open-Source-Projekte. +

+

+ Wir bieten nun Unternehmen und Organisationen die Möglichkeit, sich an diesem wichtigen Vorhaben zu beteiligen. + Durch den Abschluss eines Support & Care-Abonnements tragen Sie dazu bei, die langfristige Stabilität und Weiterentwicklung von Apache Maven zu sichern. + Ihre Unterstützung hilft dabei, kritische Aufgaben wie Sicherheitsupdates, Fehlerbehebungen und die Entwicklung neuer Funktionen zu finanzieren. +

+

+ Neben der Unterstützung der Community-getriebenen Entwicklung ermöglicht Ihnen ein Support & Care-Abonnement den direkten Zugang zu unseren Experten und Maintainern, + um Fehlerbehebungen zu priorisieren oder Sie bei anderen Themen rund um Apache Maven™ zu unterstützen. +

+
+
+
+ + {/* Subscription Packages */} +
+
+

+ Unser Abonnement-Modell für Apache Maven™ +

+

+ Wir bieten drei verschiedene Pakete, die auf die Bedürfnisse verschiedener Nutzergruppen zugeschnitten sind. + Gerne helfen wir Ihnen bei der Ermittlung, welches Paket am besten zu Ihren Anforderungen passt. +

+
+
+ + {/* STA Support Section */} +
+
+

+ Förderung durch die Sovereign Tech Agency +

+
+

+ Die Sovereign Tech Agency (STA) ist ein Förderprogramm des Bundesministeriums für Wirtschaft und Klimaschutz, + das sich der nachhaltigen Unterstützung von Open-Source-Software widmet. Das Programm zielt darauf ab, kritische digitale Infrastrukturen + langfristig zu sichern und die Resilienz des europäischen Technologie-Ökosystems zu stärken. Von der STA geförderte Projekte müssen von + erheblicher Bedeutung für Wirtschaft und Gesellschaft sein und nachhaltigen Entwicklungspraktiken folgen. +

+

+ Seit 2024 investiert die STA in das Projekt Support & Care für Apache Maven™ und ermöglicht so eine nachhaltige Kostenteilung zwischen + öffentlicher Förderung und kommerziellen Beiträgen. Die Investition der STA legt den Grundstein für eine nachhaltige Zukunft des Projekts + und des gesamten Java-Ökosystems. Allerdings ist eine breite Unterstützung aus der Community und Industrie unerlässlich, um Apache Maven + langfristig abzusichern. +

+
+
+
+ + {/* Model Project Section */} +
+
+

+ Ein Modellprojekt für Open Source +

+
+

+ Mit Support & Care für Apache Maven™ unternimmt Open Elements einen starken Schritt in Richtung nachhaltiger Unterstützung von + Open-Source-Projekten. Dieses Programm dient als Pilotprojekt innerhalb der Support & Care-Initiative, die darauf abzielt, in + weitere kritische Open-Source-Komponenten zu investieren. +

+

+ Das Konzept kombiniert öffentliche Förderung, kommerzielle Unterstützung, transparente Finanzverwaltung und aktive Community-Beteiligung. + Es zeigt, wie essentielle Open-Source-Projekte zukunftssicher gemacht werden können, während Innovationen gefördert werden – + ein Modell, das ähnliche Initiativen im gesamten Open-Source-Ökosystem inspirieren kann. +

+
+ + {/* Care Tree Illustration */} +
+ Mehr Menschen fangen an sich zu kümmern +
+
+
+ + {/* Contact CTA */} +
+
+ + Call icon + Kontaktieren Sie uns + +
+
+ + {/* Decorative Circles at Bottom */} +
+ + +
+
+ ) +} diff --git a/src/app/de/support-care/layout.tsx b/src/app/de/support-care/layout.tsx new file mode 100644 index 0000000..453a012 --- /dev/null +++ b/src/app/de/support-care/layout.tsx @@ -0,0 +1,14 @@ +import { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Support & Care | Open Elements', + description: 'Support & Care ist ein Programm zur nachhaltigen Weiterentwicklung, Stabilisierung und Unterstützung von Open Source Software (OSS). Wir bieten professionelle Unterstützung für Apache Maven und Eclipse Temurin.', +} + +export default function DeSupportCareLayout({ + children, +}: { + children: React.ReactNode +}) { + return children +} diff --git a/src/app/de/support-care/page.tsx b/src/app/de/support-care/page.tsx new file mode 100644 index 0000000..8cf7790 --- /dev/null +++ b/src/app/de/support-care/page.tsx @@ -0,0 +1,150 @@ +import Image from 'next/image' +import Link from 'next/link' + +const supportOfferings = [ + { + title: 'Support & Care für Apache Maven™', + text: 'Support & Care für Apache Maven™ stärkt die Zukunft des Java-Ökosystems durch nachhaltige Finanzierung und transparente Entwicklung. Sichern Sie die langfristige Stabilität und Weiterentwicklung von Apache Maven.', + logo: '/illustrations/support-care-logos/support-care-maven-logo.svg', + link: '/de/support-care-maven', + }, + { + title: 'Eclipse Temurin Support & Care', + text: 'Professionelle Unterstützung für Eclipse Temurin, die am weitesten verbreitete Java-Laufzeitumgebung mit über 20 Millionen Downloads pro Monat. Sichern Sie die langfristige Funktionalität Ihrer Java-Anwendungen.', + logo: '/illustrations/support-care-logos/support-care-temurin-logo.svg', + link: '/de/support-care-temurin', + }, +] + +export default function DeSupportCarePage() { + return ( +
+
+
+
+
+

Support & Care

+ Underline +
+
+

+ Nachhaltige Unterstützung für Open Source Software +

+
+
+ +
+ Dash line + Dash line + Dashline + +
+
+
+

+ Support & Care ist ein Programm zur nachhaltigen Weiterentwicklung, Stabilisierung und Unterstützung von Open Source Software (OSS). + Open Elements arbeitet sowohl mit der Industrie als auch mit der Open-Source-Community zusammen, um die Qualität, + Unabhängigkeit und Entwicklung kritischer Open-Source-Projekte und -Komponenten sicherzustellen. +

+

+ Mit Support & Care bietet Open Elements eine Lösung für kritische Projekte, damit die Produkte bedenkenlos in professionellen Umgebungen eingesetzt werden können. Unsere Open-Source-Strategie zielt darauf ab, die Ausrichtung der Projekte durch finanzielle Unterstützung und aktive + Zusammenarbeit zu verbessern und Unterfinanzierung, schlechte Wartung und Sicherheit dieser kritischen OSS zu verhindern. +

+
+
+
+
+ +
+
+ Support & Care Logo +
+
+ +
+
+
+

+ Durch Support & Care bieten wir umfassende Dienstleistungen, um die Leistung und Sicherheit Ihrer Anwendungen zu gewährleisten. + Unsere Dienstleistungen gehen über die klassische Fehlerbehebung hinaus und fördern die nachhaltige Verbesserung Ihrer Infrastruktur. +

+
+
+
+ +
+
+ + Call icon + Kontaktieren Sie uns + +
+
+ +
+

+ Unsere Support & Care Angebote +

+
+ {supportOfferings.map((offering, index) => ( +
+ +
+
+ {`${offering.title} +
+
+

{offering.title}

+

{offering.text}

+
+ Mehr erfahren → +
+
+
+ +
+ ))} +
+
+
+ ) +} diff --git a/src/app/globals.css b/src/app/globals.css new file mode 100644 index 0000000..c7ab5b2 --- /dev/null +++ b/src/app/globals.css @@ -0,0 +1,326 @@ +@import "tailwindcss"; + +@theme { + --color-blue: #020144; + --color-green: #5CBA9E; + --color-green-50: #5CBA9E1F; + --color-green-100: #DEF1EC; + --color-green-200: #BEE3D8; + --color-green-300: #53a78e; + --color-rose: #E63277; + --color-rose-100: #FAD6E4; + --color-sky: #5DB9F5; + --color-sky-100: #DFF1FD; + --color-sky-200: #54a7dd; + --color-purple: #9492FD; + --color-purple-100: #D4D4FE; + --color-purple-200: #F1F1FF; + --color-purple-700: #7573FF; + --color-slate: #EBEBEE; + --color-gray: #F8F8F8; + --color-white: #ffffff; +} + +@layer base { + html { + font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + } + + body { + margin: 0; + line-height: inherit; + color: var(--color-blue); + background-color: var(--color-white); + } + + p { + padding-top: 0.8em; + } +} + +@layer components { + /* Container matching old site */ + .container { + @apply w-full mx-auto px-6; + } + + @media (min-width: 640px) { + .container { + @apply max-w-[640px] px-8; + } + } + + @media (min-width: 768px) { + .container { + @apply max-w-[768px] px-12; + } + } + + @media (min-width: 1024px) { + .container { + @apply max-w-[1024px]; + } + } + + @media (min-width: 1280px) { + .container { + @apply max-w-[1280px] px-16; + } + } + + /* Headings matching old site exactly */ + .h1 { + font-size: 32px; + font-weight: 700; + line-height: 1.375; + color: var(--color-blue); + } + + @media (min-width: 640px) { + .h1 { + font-size: 2.25rem; + line-height: 1.375; + } + } + + @media (min-width: 1024px) { + .h1 { + font-size: 52px; + line-height: 1.375; + } + } + + .h2 { + font-size: 28px; + font-weight: 700; + line-height: 2.5rem; + color: var(--color-blue); + } + + @media (min-width: 640px) { + .h2 { + font-size: 44px; + } + } + + .h3 { + font-size: 32px; + font-weight: 700; + line-height: 2.5rem; + color: var(--color-blue); + } + + .h4 { + font-size: 1.5rem; + font-weight: 700; + line-height: 2.5rem; + color: var(--color-blue); + } + + .h4-card { + font-size: 1.5rem; + font-weight: 700; + line-height: 2.5rem; + color: var(--color-blue); + } + + @media (min-width: 640px) { + .h4-card { + font-size: 1.25rem; + line-height: 1.75rem; + } + } + + @media (min-width: 1280px) { + .h4-card { + font-size: 1.5rem; + line-height: 2rem; + } + } + + /* Badge matching old site */ + .badge-purple { + @apply shrink-0 rounded-full border text-center font-semibold transition-all duration-150 ease-in-out; + padding: 0.25rem 0.625rem; + border-color: var(--color-purple); + background-color: var(--color-purple-100); + color: var(--color-purple); + } + + .badge-purple:hover { + background-color: var(--color-purple-700); + color: var(--color-white); + box-shadow: 2px 4px 22px rgba(117, 115, 255, 0.64); + } + + .badge-purple:active { + background-color: var(--color-purple); + box-shadow: none; + } + + /* Links matching old site */ + .link-rose { + @apply font-medium transition-all duration-100; + color: var(--color-rose); + } + + .link-rose:hover { + @apply underline; + } + + .link-rose:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + + .link-purple { + @apply font-medium transition-all duration-100; + color: var(--color-purple); + } + + .link-purple:hover { + @apply underline; + } + + .link-purple:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + + .link-green { + @apply font-medium transition-all duration-150; + color: var(--color-green); + } + + .link-green:hover { + @apply underline; + } + + .link-green:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + + /* Navigation matching old site */ + .nav-link { + @apply transition-colors duration-150 ease-in-out; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 500; + color: rgb(248, 248, 248); + } + + .nav-link:focus { + outline: 2px solid transparent; + outline-offset: 2px; + } + + .nav-link:hover { + color: rgb(93, 185, 245); + } + + .nav-icon { + @apply text-2xl leading-none transition-colors duration-150 ease-in-out; + color: rgb(255, 255, 255); + } + + .nav-icon:hover { + color: rgb(92, 186, 158); + } + + /* Footer matching old site */ + .footer-link { + @apply transition-colors duration-150 ease-in-out; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + color: rgb(255, 255, 255); + } + + .group:hover .footer-link { + color: rgb(93, 185, 245); + } + + .footer-link-icon { + @apply text-xl transition-colors duration-150 ease-in-out shrink-0; + color: rgb(255, 255, 255); + } + + .group:hover .footer-link-icon { + color: rgb(93, 185, 245); + } + + .text-blue { + color: var(--color-blue); + } + + .text-green { + color: var(--color-green); + } + + .text-rose { + color: var(--color-rose); + } + + .text-sky { + color: var(--color-sky); + } + + .text-purple { + color: var(--color-purple); + } + + .text-white { + color: var(--color-white); + } + + .bg-blue { + background-color: var(--color-blue); + } + + .bg-slate { + background-color: var(--color-slate); + } + + .bg-green { + background-color: var(--color-green); + } + + .bg-rose-100 { + background-color: var(--color-rose-100); + } + + .bg-sky-100 { + background-color: var(--color-sky-100); + } + + .bg-purple-100 { + background-color: var(--color-purple-100); + } + + .bg-purple { + background-color: var(--color-purple); + } + + .bg-purple-700 { + background-color: var(--color-purple-700); + } + + .border-rose { + border-color: var(--color-rose); + } + + .border-sky { + border-color: var(--color-sky); + } + + .border-purple { + border-color: var(--color-purple); + } + + .shadow-green { + --tw-shadow-color: var(--color-green); + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx new file mode 100644 index 0000000..39c7ecd --- /dev/null +++ b/src/app/layout.tsx @@ -0,0 +1,56 @@ +import type { Metadata } from 'next' +import { Montserrat } from 'next/font/google' +import './globals.css' +import Navbar from '@/components/Navbar' +import Footer from '@/components/Footer' + +const montserrat = Montserrat({ + subsets: ['latin'], + weight: ['300', '400', '500', '600', '700', '800', '900'], + variable: '--font-montserrat', + display: 'swap', +}) + +export const metadata: Metadata = { + title: 'Open Elements - Open Source made right', + description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java', + keywords: ['open source', 'Java', 'OSS', 'open source Support', 'Java Support'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/', + title: 'Open Elements - Open Source made right', + description: 'Open Source made right - Open Elements is a modern company with a clear focus on Open Source and Java', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'en_US', + }, +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + +
+ +
{children}
+
+
+ + + + ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx new file mode 100644 index 0000000..e6a0152 --- /dev/null +++ b/src/app/page.tsx @@ -0,0 +1,19 @@ +import HeroSection from '@/components/home/HeroSection' +import OpenKnowledgeSection from '@/components/home/OpenKnowledgeSection' +import OpenEventsSection from '@/components/home/OpenEventsSection' +import OpenSourceSection from '@/components/home/OpenSourceSection' +import OpenDoorsSection from '@/components/home/OpenDoorsSection' +import OpenOfficeSection from '@/components/home/OpenOfficeSection' + +export default function Home() { + return ( + <> + + + + + + + + ) +} diff --git a/src/app/posts/layout.tsx b/src/app/posts/layout.tsx new file mode 100644 index 0000000..1ab1066 --- /dev/null +++ b/src/app/posts/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Articles - Open Elements', + description: 'Read our latest articles about Open Source, Java, and software development.', + keywords: ['Open Source', 'Java', 'Blog', 'Articles', 'Software Development'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/blog', + title: 'Articles - Open Elements', + description: 'Read our latest articles about Open Source, Java, and software development.', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'en_US', + }, +} + +export default function BlogLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx new file mode 100644 index 0000000..0e3ad28 --- /dev/null +++ b/src/app/posts/page.tsx @@ -0,0 +1,100 @@ +'use client' + +import { useState } from 'react' +import Image from 'next/image' +import BlogCard from '@/components/blog/BlogCard' +import Pagination from '@/components/blog/Pagination' + +// Placeholder data - in a real application, this would come from a CMS or API +const mockPosts = [ + { + id: '1', + title: 'Java Module System', + excerpt: 'Learn about the Java Module System and how it helps organize your code.', + date: '2024-01-11', + author: 'Hendrik Ebbers', + categories: ['Java', 'Open Source'], + preview_image: '/posts/preview-images/software-development-green.svg', + slug: 'java-module-system', + }, + { + id: '2', + title: 'Open Elements in 2024', + excerpt: 'A look back at what we achieved in 2024 and our plans for the future.', + date: '2025-01-16', + author: 'Hendrik Ebbers', + categories: ['Open Elements', 'General'], + preview_image: '/posts/preview-images/software-development-green.svg', + slug: 'open-elements-in-2024', + }, + { + id: '3', + title: 'DCO Signing', + excerpt: 'Understanding Developer Certificate of Origin and why it matters.', + date: '2025-01-03', + author: 'Hendrik Ebbers', + categories: ['Open Source', 'General'], + preview_image: '/posts/preview-images/software-development-green.svg', + slug: 'dco-signing', + }, +] + +export default function BlogPage() { + const [currentPage, setCurrentPage] = useState(1) + const postsPerPage = 7 + const totalPages = Math.ceil(mockPosts.length / postsPerPage) + + const indexOfLastPost = currentPage * postsPerPage + const indexOfFirstPost = indexOfLastPost - postsPerPage + const currentPosts = mockPosts.slice(indexOfFirstPost, indexOfLastPost) + + return ( +
+ {/* Decorative elements */} +
+ + + +
+
+
+

Articles

+ Underline +
+
+
+ + {/* Blog posts */} + {currentPosts.map((post) => ( + + ))} + + {/* Pagination */} +
+ +
+
+ ) +} diff --git a/src/app/support-care-maven/layout.tsx b/src/app/support-care-maven/layout.tsx new file mode 100644 index 0000000..c849ad3 --- /dev/null +++ b/src/app/support-care-maven/layout.tsx @@ -0,0 +1,31 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Support & Care - Open Elements', + description: 'Support & Care is a program for the sustainable further development, stabilization and support of open source software (OSS).', + keywords: ['Open Source', 'Support', 'Care', 'Java', 'Eclipse Temurin', 'Apache Maven'], + openGraph: { + type: 'website', + url: 'https://open-elements.com/support-care', + title: 'Support & Care - Open Elements', + description: 'Support & Care is a program for the sustainable further development, stabilization and support of open source software (OSS).', + siteName: 'Open Elements', + images: [ + { + url: '/open-graph/open-elements.png', + width: 1200, + height: 630, + alt: 'OpenElements Logo', + }, + ], + locale: 'en_US', + }, +} + +export default function SupportCareLayout({ + children, +}: { + children: React.ReactNode +}) { + return <>{children} +} diff --git a/src/app/support-care-maven/page.tsx b/src/app/support-care-maven/page.tsx new file mode 100644 index 0000000..7b1c47e --- /dev/null +++ b/src/app/support-care-maven/page.tsx @@ -0,0 +1,149 @@ +import Image from 'next/image' +import Link from 'next/link' + +export default function SupportCareMavenPage() { + return ( +
+ {/* Hero Background */} +
+ Hero background +
+ +
+
+ {/* Logo Section */} +
+ Support and Care for Apache Maven logo +
+ + {/* Introduction Text */} +
+

+ Open Elements has launched a major initiative with its program Support & Care for Apache Maven™, helping to secure a central tool of the Java ecosystem. + With funding from the Sovereign Tech Agency, + sustainable support for Apache Maven is enabled for the first time—one of the world's most widely used open-source projects. +

+

+ We now offer companies and organizations the opportunity to participate in this important undertaking. + By subscribing to a Support & Care subscription, you contribute to securing the long-term stability and continued development of Apache Maven. + Your support helps finance critical tasks such as security updates, bug fixes, and the development of new features. +

+

+ In addition to supporting community-driven development, a Support & Care subscription allows you to directly access our experts and maintainers + to prioritize bug fixes or assist you with other topics related to Apache Maven™. +

+
+
+
+ + {/* Subscription Packages */} +
+
+

+ Our Subscription Model for Apache Maven™ +

+

+ We offer three different packages tailored to the needs of various user groups. + We are happy to help you determine which package best suits your requirements. +

+
+
+ + {/* STA Support Section */} +
+
+

+ Support from the Sovereign Tech Agency +

+
+

+ The Sovereign Tech Agency (STA) is a funding program of the German Federal Ministry for Economic Affairs and Climate Action + dedicated to the sustainable support of open-source software. The program aims to secure critical digital infrastructures in the long term + and strengthen the resilience of the European technology ecosystem. Projects funded by the STA must be of significant importance to the economy + and society while following sustainable development practices. +

+

+ Since 2024, the STA has been investing in the Support & Care for Apache Maven™ project, enabling sustainable cost-sharing between public funding + and commercial contributions. The STA's investment lays the foundation for a sustainable future of the project and the entire Java ecosystem. + However, broad support from the community and industry is essential to secure Apache Maven in the long term. +

+
+
+
+ + {/* Model Project Section */} +
+
+

+ A Model Project for Open Source +

+
+

+ With Support & Care for Apache Maven™, Open Elements is taking a strong step toward sustainable support for open-source projects. + This program serves as a pilot within the Support & Care initiative, which aims to invest in additional critical open-source components. +

+

+ The concept combines public funding, commercial support, transparent financial management, and active community involvement. + It demonstrates how essential open-source projects can be made future-proof while fostering innovation — a model that can inspire + similar initiatives across the open-source ecosystem. +

+
+ + {/* Care Tree Illustration */} +
+ More people start to care +
+
+
+ + {/* Contact CTA */} +
+
+ + Call icon + Contact us + +
+
+ + {/* Decorative Circles at Bottom */} +
+ + +
+
+ ) +} diff --git a/src/app/support-care/layout.tsx b/src/app/support-care/layout.tsx new file mode 100644 index 0000000..2799e80 --- /dev/null +++ b/src/app/support-care/layout.tsx @@ -0,0 +1,14 @@ +import { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Support & Care | Open Elements', + description: 'Support & Care is a program for the sustainable further development, stabilization and support of open source software (OSS). We offer professional support for Apache Maven and Eclipse Temurin.', +} + +export default function SupportCareLayout({ + children, +}: { + children: React.ReactNode +}) { + return children +} diff --git a/src/app/support-care/page.tsx b/src/app/support-care/page.tsx new file mode 100644 index 0000000..26dad99 --- /dev/null +++ b/src/app/support-care/page.tsx @@ -0,0 +1,151 @@ +import Image from 'next/image' +import Link from 'next/link' + +const supportOfferings = [ + { + title: 'Support & Care for Apache Maven™', + text: 'Support & Care for Apache Maven™ strengthens the future of the Java ecosystem through sustainable funding and transparent development. Secure the long-term stability and continued development of Apache Maven.', + logo: '/illustrations/support-care-logos/support-care-maven-logo.svg', + link: '/support-care-maven', + }, + { + title: 'Eclipse Temurin Support & Care', + text: 'Professional support for Eclipse Temurin, the most widely used Java runtime environment with over 20 million downloads per month. Ensure the long-term functionality of your Java applications.', + logo: '/illustrations/support-care-logos/support-care-temurin-logo.svg', + link: '/support-care-temurin', + }, +] + +export default function SupportCarePage() { + return ( +
+
+
+
+
+

Support & Care

+ Underline +
+
+

+ Sustainable support for open source software +

+
+
+ +
+ Dash line + Dash line + Dashline + +
+
+
+

+ Support & Care is a program for the sustainable further development, stabilization and support of open source software (OSS). + Open Elements works with both the industry and the open source community to ensure the quality, + independence and development of critical open source projects and components. +

+

+ With Support & Care, Open Elements offers a solution for critical projects so that the products can be + used without hesitation in a professional environment. Our open source strategy aims to improve the direction of the projects through financial support and active + collaboration and to prevent underfunding, poor maintenance and security of this critical OSS. +

+
+
+
+
+ +
+
+ Support & Care Logo +
+
+ +
+
+
+

+ Through Support & Care, we provide comprehensive services to ensure the performance and security of your applications. + Our services go beyond classic troubleshooting and promote the sustainable improvement of your infrastructure. +

+
+
+
+ +
+
+ + Call icon + Contact us + +
+
+ +
+

+ Our Support & Care Offerings +

+
+ {supportOfferings.map((offering, index) => ( +
+ +
+
+ {`${offering.title} +
+
+

{offering.title}

+

{offering.text}

+
+ Learn more → +
+
+
+ +
+ ))} +
+
+
+ ) +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..2ac8152 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,155 @@ +import Link from 'next/link' +import Image from 'next/image' +import mainMenu from '@/data/mainMenu.json' +import social from '@/data/social.json' + +export default function Footer() { + return ( +
+
+
+ + + +
+
+ +
+
+ Circle + Circle + +
+
+
+ + logo + +

+ Open Elements is a modern company with a clear focus on Open Source and Java +

+
+ +
+ {social.map((item, index) => ( + + + + ))} +
+
+ +
+
+

Explore

+
+ {mainMenu.map((item, index) => { + if (!item.visibleInFooter) return null + return ( + + + {item.name} + + ) + })} +
+
+ + + +
+
+ {social.map((item, index) => ( + + + + ))} +
+
+
+
+
+
+ +