Daniel nextjs migration

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 {

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+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.

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}</>
+}

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 (
+    <div className="">
+      <div className="flow-root relative pb-20 sm:pb-36 container">
+        {/* Decorative images */}
+        <Image
+          className="top-20 right-0 absolute size-40 shrink-0"
+          src="/illustrations/circles-2.svg"
+          alt=""
+          width={160}
+          height={160}
+        />
+        <Image
+          className="top-[20%] left-52 absolute size-20 shrink-0"
+          src="/illustrations/star.svg"
+          alt=""
+          width={80}
+          height={80}
+        />
+        <Image
+          className="top-[32%] left-12 absolute size-20 shrink-0"
+          src="/illustrations/line-7.svg"
+          alt=""
+          width={80}
+          height={80}
+        />
+        <Image
+          className="top-[39%] -left-6 absolute size-72 shrink-0"
+          src="/illustrations/sb-circle-2.svg"
+          alt=""
+          width={288}
+          height={288}
+        />
+        <Image
+          className="top-[55%] left-12 absolute size-20 shrink-0"
+          src="/illustrations/line-6.svg"
+          alt=""
+          width={80}
+          height={80}
+        />
+        <Image
+          className="top-[65%] left-0 absolute size-56 shrink-0"
+          src="/illustrations/circle-55.svg"
+          alt=""
+          width={224}
+          height={224}
+        />
+
+        <div className="relative flex 2xl:flex-row flex-col gap-24 pt-60 sm:pt-64 lg:pt-72 pb-16 w-full">
+          <AboutSidebar 
+            activeSection={activeSection} 
+            onSectionClick={setActiveSection} 
+          />
+
+          <div className="flex flex-col gap-20 lg:gap-32 w-full">
+            <TeamSection />
+            <EngagementsSection />
+            <PartnersSection />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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}</>
+}

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 (
+    <div className="relative">
+      <div className="container relative max-w-sm lg:max-w-7xl md:max-w-2xl sm:max-w-xl sm:w-full xl:pb-36 pb-28">
+        {/* Decorative lines */}
+        <Image
+          className="absolute hidden w-full -ml-20 top-52 2xl:-ml-32 lg:block"
+          src="/illustrations/lines-5.svg"
+          alt="Lines"
+          width={1200}
+          height={100}
+        />
+        <Image
+          className="absolute w-full md:top-40 sm:top-36 top-[110px] md:-ml-16 sm:ml-0 lg:hidden sm:block hidden"
+          src="/illustrations/linesb.svg"
+          alt="Line M"
+          width={800}
+          height={100}
+        />
+
+        {/* Header */}
+        <div className="flex items-center justify-center pt-16 pb-4 lg:pt-36 md:pt-28 sm:pt-24 sm:pb-12">
+          <h1 className="flex items-center justify-center w-full text-center h1">
+            <div className="relative z-0 flex items-center justify-center w-full">
+              <Image
+                className="absolute w-32 mt-1 lg:w-64 sm:w-48 -mr-28"
+                src="/illustrations/textBG.svg"
+                alt="Hero text background"
+                width={256}
+                height={100}
+              />
+              <span className="relative">Contact us</span>
+            </div>
+          </h1>
+        </div>
+
+        {/* Content */}
+        <div className="relative flex flex-col gap-24 2xl:gap-40 lg:gap-32">
+          <CalendlyButton />
+
+          <div className="relative flex flex-col-reverse items-center justify-center w-full gap-16 lg:flex-row xl:gap-12 lg:gap-6">
+            {/* Decorative rounds */}
+            <Image
+              className="absolute lg:w-[450px] w-80 lg:-left-44 -left-24 lg:top-12 top-[500px] sm:block hidden"
+              src="/illustrations/round-1.svg"
+              alt="Round"
+              width={450}
+              height={450}
+            />
+            <Image
+              className="absolute lg:w-[450px] w-80 lg:-left-44 sm:-left-24 -left-40 lg:top-12 top-[440px] sm:hidden"
+              src="/illustrations/round-44.svg"
+              alt="Round small"
+              width={450}
+              height={450}
+            />
+
+            <ContactInfo />
+
+            <Image
+              className="w-full max-w-sm xl:max-w-md shrink-0 xl:mt-16"
+              src="/illustrations/contact.svg"
+              alt="Contact"
+              width={448}
+              height={400}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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}</>
+}