-
-}
\ No newline at end of file
diff --git a/src/components/animations/NodesAnimation.tsx b/src/components/animations/NodesAnimation.tsx
new file mode 100644
index 0000000..6a5f860
--- /dev/null
+++ b/src/components/animations/NodesAnimation.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import { Card, Flex, Text } from "@code0-tech/pictor"
+import { IconNote } from "@tabler/icons-react"
+import { animate, m as motion, useInView, useReducedMotion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { LiteralBadge } from "../badges/LiteralBadge"
+import { ReferenceBadge } from "../badges/ReferenceBadge"
+import { NodeBadge } from "../badges/NodeBadge"
+
+type NodeSegmentType = "text" | "literal" | "reference" | "node"
+type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink"
+
+interface NodeSegment {
+ type: NodeSegmentType
+ value: string
+}
+
+interface NodeItem {
+ color: NodeAccent
+ segments: NodeSegment[]
+ outline: boolean
+}
+
+function NodeRow({
+ nodes,
+ direction,
+ active,
+}: {
+ nodes: NodeItem[]
+ direction: "left" | "right"
+ active: boolean
+}) {
+ const marqueeRef = useRef
(null)
+ const listRef = useRef(null)
+ const [loopDistance, setLoopDistance] = useState(0)
+ const groupGap = 16
+ const iconColorMap: Record = {
+ brand: "var(--text-brand)",
+ yellow: "var(--text-yellow)",
+ aqua: "var(--text-aqua)",
+ blue: "var(--text-blue)",
+ pink: "var(--text-pink)",
+ }
+
+ const displayMessage = (segments: NodeSegment[]) => {
+ return segments.map((segment, index) => {
+ switch (segment.type) {
+ case "literal":
+ return
+ case "reference":
+ return
+ case "node":
+ return
+ case "text":
+ return
+ {segment.value}
+
+ }
+ })
+ }
+
+ useEffect(() => {
+ const listElement = listRef.current
+ if (!listElement) return
+
+ const updateLoopDistance = () => {
+ setLoopDistance(listElement.getBoundingClientRect().width + groupGap)
+ }
+
+ updateLoopDistance()
+
+ const resizeObserver = new ResizeObserver(updateLoopDistance)
+ resizeObserver.observe(listElement)
+
+ return () => resizeObserver.disconnect()
+ }, [nodes.length])
+
+ useEffect(() => {
+ const marqueeElement = marqueeRef.current
+ if (!marqueeElement || !loopDistance || !active) return
+
+ const controls = animate(
+ marqueeElement,
+ { x: direction === "left" ? [0, -loopDistance] : [-loopDistance, 0] },
+ {
+ duration: 45,
+ ease: "linear",
+ repeat: Infinity,
+ repeatType: "loop",
+ },
+ )
+
+ return () => controls.stop()
+ }, [active, direction, loopDistance])
+
+ return (
+
+
+ {nodes.map((node, index) => (
+
+
+
+
+ {displayMessage(node.segments)}
+
+
+
+ ))}
+
+
+ {nodes.map((node, index) => (
+
+
+
+
+ {displayMessage(node.segments)}
+
+
+
+ ))}
+
+
+ )
+}
+
+export function NodesAnimation() {
+ const containerRef = useRef(null)
+ const isInView = useInView(containerRef, { amount: 0.2 })
+ const prefersReducedMotion = useReducedMotion()
+ const nodes: NodeItem[] = [
+ {
+ color: "pink",
+ outline: true,
+ segments: [
+ { type: "text", value: "Convert" },
+ { type: "reference", value: "value" },
+ { type: "text", value: "to boolean" },
+ ],
+ },
+ {
+ color: "brand",
+ outline: true,
+ segments: [
+ { type: "text", value: "Use fallback" },
+ { type: "literal", value: "false" },
+ { type: "text", value: "when empty" },
+ ],
+ },
+ {
+ color: "yellow",
+ outline: true,
+ segments: [
+ { type: "text", value: "Run node" },
+ { type: "node", value: "formatDate" },
+ { type: "text", value: "with current input" },
+ ],
+ },
+ {
+ color: "blue",
+ outline: true,
+ segments: [
+ { type: "text", value: "Only continue if status equals approved" },
+ ],
+ },
+ {
+ color: "aqua",
+ outline: true,
+ segments: [
+ { type: "text", value: "Map" },
+ { type: "reference", value: "user.email" },
+ { type: "text", value: "to contact field" },
+ ],
+ },
+ {
+ color: "blue",
+ outline: true,
+ segments: [
+ { type: "text", value: "Set timeout to" },
+ { type: "literal", value: "30" },
+ { type: "text", value: "seconds" },
+ ],
+ },
+ {
+ color: "brand",
+ outline: true,
+ segments: [
+ { type: "text", value: "Trigger" },
+ { type: "node", value: "sendMail" },
+ { type: "text", value: "after validation" },
+ ],
+ },
+ {
+ color: "pink",
+ outline: true,
+ segments: [
+ { type: "text", value: "This node only contains plain text" },
+ ],
+ },
+ {
+ color: "yellow",
+ outline: true,
+ segments: [
+ { type: "text", value: "Compare" },
+ { type: "reference", value: "invoice.total" },
+ { type: "text", value: "with" },
+ { type: "literal", value: "1000" },
+ ],
+ },
+ ]
+
+ const splitIndex = Math.ceil(nodes.length / 2)
+ const topRowNodes = nodes.slice(0, splitIndex)
+ const bottomRowNodes = nodes.slice(splitIndex)
+
+ return (
+
+ )
+}
diff --git a/src/components/animations/OrbitingCircles.tsx b/src/components/animations/OrbitingCircles.tsx
new file mode 100644
index 0000000..bd7177f
--- /dev/null
+++ b/src/components/animations/OrbitingCircles.tsx
@@ -0,0 +1,73 @@
+import React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface OrbitingCirclesProps extends React.HTMLAttributes {
+ className?: string
+ children?: React.ReactNode
+ reverse?: boolean
+ duration?: number
+ delay?: number
+ radius?: number
+ path?: boolean
+ iconSize?: number
+ speed?: number
+}
+
+export function OrbitingCircles({
+ className,
+ children,
+ reverse,
+ duration = 20,
+ radius = 160,
+ path = true,
+ iconSize = 30,
+ speed = 1,
+ ...props
+}: OrbitingCirclesProps) {
+ const calculatedDuration = duration / speed
+ return (
+ <>
+ {path && (
+
+ )}
+ {React.Children.map(children, (child, index) => {
+ const angle = (360 / React.Children.count(children)) * index
+ return (
+
+ )
+ })}
+
+ )
+}
diff --git a/src/components/animations/RoleSystemAnimation.tsx b/src/components/animations/RoleSystemAnimation.tsx
new file mode 100644
index 0000000..a0ac85c
--- /dev/null
+++ b/src/components/animations/RoleSystemAnimation.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { Badge, Card, Text } from "@code0-tech/pictor"
+import { animate, m as motion, useInView, useReducedMotion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+
+interface RoleItem {
+ name: string
+ description: string
+ badges: string[]
+ updatedAt: string
+}
+
+interface RoleSystemAnimationProps {
+ roles: RoleItem[]
+}
+
+export function RoleSystemAnimation({ roles }: RoleSystemAnimationProps) {
+ const containerRef = useRef(null)
+ const marqueeRef = useRef(null)
+ const listRef = useRef(null)
+ const isInView = useInView(containerRef, { amount: 0.2 })
+ const prefersReducedMotion = useReducedMotion()
+ const [loopDistance, setLoopDistance] = useState(0)
+ const groupGap = 16
+
+ useEffect(() => {
+ const listElement = listRef.current
+ if (!listElement) return
+
+ const updateLoopDistance = () => {
+ setLoopDistance(listElement.getBoundingClientRect().height + groupGap)
+ }
+
+ updateLoopDistance()
+
+ const resizeObserver = new ResizeObserver(updateLoopDistance)
+ resizeObserver.observe(listElement)
+
+ return () => resizeObserver.disconnect()
+ }, [roles.length])
+
+ useEffect(() => {
+ const marqueeElement = marqueeRef.current
+ if (!marqueeElement || !loopDistance || !isInView || prefersReducedMotion) return
+
+ const controls = animate(
+ marqueeElement,
+ { y: [0, -loopDistance] },
+ {
+ duration: 20,
+ ease: "linear",
+ repeat: Infinity,
+ repeatType: "loop",
+ },
+ )
+
+ return () => controls.stop()
+ }, [isInView, loopDistance, prefersReducedMotion])
+
+ if (!roles.length) return null
+
+ const renderRoleCard = (role: RoleItem, index: number) => (
+
+ {role.name}
+
+ {role.description}
+ {role.badges.map((badge) => (
+
+ {badge}
+
+ ))}
+
+
+ )
+
+ return (
+
+
+
+ {roles.map(renderRoleCard)}
+
+
+ {roles.map((role, index) => renderRoleCard(role, index + roles.length))}
+
+
+
+
+
+
+ {locale === "de" ? "Zurück" : "Back"}
+
+
+
+
+
+ {heroImage?.url ? (
+
+ ) : (
+
+
+
+ {locale === "de" ? "Kein Hero-Bild vorhanden" : "No hero image available"}
+
+
+ )}
+
+
+
+
+
+
+
+ {isOpen && (
+
+
+
+ {headings.map((heading) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+ Content
+
+
+
+ {headings.map((heading) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {heroImage?.url ? (
+
+
+
+ ) : (
+
+ {locale === "de" ? "Kein Bild" : "No image"}
+
+ )}
+
+
+
{authorName ? `${authorName} - ${publishedDate}` : publishedDate}
+
{post.title}
+ {post.shortDescription ?
{post.shortDescription}
: null}
+
+
+
{labels.heading}
+
+
+
+
+
+
+
+
+
+
+
+
+ {submitStatus && (
+
+ {submitStatus.message}
+
+ )}
+
+
+
+
+
+
+
+
+ {children}
+
+
+ {heroImage?.url ? (
+
+
+
+ ) : (
+
+ {locale === "de" ? "Kein Bild" : "No image"}
+
+ )}
+
+
+
+ {authorName ? `${authorName} - ${publishedDate}` : publishedDate}
+
+
{post.title}
+ {post.shortDescription ? (
+
+ {post.shortDescription}
+
+ ) : null}
+
+
+
{labels.applicationHeading}
+
+
+
+
+
+
+
+
+
+
+
+
+ {submitStatus && (
+
+ {submitStatus.message}
+
+ )}
+
+
{job.title}
+
+ {job.location} - {job.type}
+
+
{job.description}
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/NodeCard.tsx b/src/components/cards/NodeCard.tsx
new file mode 100644
index 0000000..b35b711
--- /dev/null
+++ b/src/components/cards/NodeCard.tsx
@@ -0,0 +1,37 @@
+import { getFeatureBySlug } from "@/lib/cms"
+import { type AppLocale } from "@/lib/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { FeatureCard } from "./FeatureCard"
+import { NodesAnimation } from "../animations/NodesAnimation"
+
+interface NodeTabsCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function NodeCard({ locale, animationDelay = 0 }: NodeTabsCardProps) {
+ const content = await getFeatureBySlug("nodes", locale)
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/OrganizationCard.tsx b/src/components/cards/OrganizationCard.tsx
new file mode 100644
index 0000000..0465089
--- /dev/null
+++ b/src/components/cards/OrganizationCard.tsx
@@ -0,0 +1,30 @@
+import { type AppLocale } from "@/lib/i18n"
+import { getFeatureBySlug } from "@/lib/cms"
+import { FeatureCard } from "./FeatureCard"
+import { FeatureCardText } from "../FeatureCardText"
+import { OrganizationsDataTable } from "../tables/OrganizationsDataTable"
+
+interface OrganizationCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function OrganizationCard({ locale, animationDelay = 0 }: OrganizationCardProps) {
+ const content = await getFeatureBySlug("organizations", locale)
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/ProjectsCard.tsx b/src/components/cards/ProjectsCard.tsx
new file mode 100644
index 0000000..26b49a6
--- /dev/null
+++ b/src/components/cards/ProjectsCard.tsx
@@ -0,0 +1,29 @@
+import { getFeatureBySlug } from "@/lib/cms"
+import { type AppLocale } from "@/lib/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { ProjectDataTable } from "../tables/ProjectDataTable"
+import { FeatureCard } from "./FeatureCard"
+
+interface ProjectsCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function ProjectsCard({ locale, animationDelay = 0 }: ProjectsCardProps) {
+ const content = await getFeatureBySlug("projects", locale)
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/RoleSystemCard.tsx b/src/components/cards/RoleSystemCard.tsx
new file mode 100644
index 0000000..9b74a5c
--- /dev/null
+++ b/src/components/cards/RoleSystemCard.tsx
@@ -0,0 +1,62 @@
+import { getFeatureBySlug } from "@/lib/cms"
+import { type AppLocale } from "@/lib/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { FeatureCard } from "./FeatureCard"
+import { RoleSystemAnimation } from "../animations/RoleSystemAnimation"
+
+interface RoleSystemCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function RoleSystemCard({ locale, animationDelay = 0 }: RoleSystemCardProps) {
+ const content = await getFeatureBySlug("role-system", locale)
+
+ const roles = [
+ {
+ name: "Owner",
+ description: "Can manage",
+ badges: ["everything"],
+ updatedAt: "Updated 16 days ago",
+ },
+ {
+ name: "Maintainer",
+ description: "Can manage",
+ badges: ["projects", "organization", "runtimes"],
+ updatedAt: "Updated 16 days ago",
+ },
+ {
+ name: "Member",
+ description: "Can manage",
+ badges: ["flows", "projects"],
+ updatedAt: "Updated 16 days ago",
+ },
+ {
+ name: "Test",
+ description: "Can manage",
+ badges: ["projects", "roles", "flows",],
+ updatedAt: "Updated 4 days ago",
+ },
+ ]
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/RuntimeTypesCard.tsx b/src/components/cards/RuntimeTypesCard.tsx
new file mode 100644
index 0000000..8e3c554
--- /dev/null
+++ b/src/components/cards/RuntimeTypesCard.tsx
@@ -0,0 +1,33 @@
+import { getFeatureBySlug } from "@/lib/cms"
+import { type AppLocale } from "@/lib/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { FeatureCard } from "./FeatureCard"
+import { RuntimeControlClient } from "../RuntimeControlClient"
+
+interface RuntimeTypesCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function RuntimeTypesCard({ locale, animationDelay = 0 }: RuntimeTypesCardProps) {
+ const content = await getFeatureBySlug("runtime-types", locale)
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/SuggestionMenuCard.tsx b/src/components/cards/SuggestionMenuCard.tsx
new file mode 100644
index 0000000..773d128
--- /dev/null
+++ b/src/components/cards/SuggestionMenuCard.tsx
@@ -0,0 +1,31 @@
+import { getFeatureBySlug } from "@/lib/cms"
+import { type AppLocale } from "@/lib/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { SuggesstionMenuClient } from "../ui/SuggesstionMenuClient"
+import { FeatureCard } from "./FeatureCard"
+
+interface SuggestionMenuCardProps {
+ locale: AppLocale
+ animationDelay?: number
+}
+
+export async function SuggestionMenuCard({ locale, animationDelay = 0 }: SuggestionMenuCardProps) {
+ const content = await getFeatureBySlug("suggestion-menu", locale)
+
+ return (
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/TeamMemberCard.tsx b/src/components/cards/TeamMemberCard.tsx
new file mode 100644
index 0000000..1672a04
--- /dev/null
+++ b/src/components/cards/TeamMemberCard.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import type { TeamMemberItem } from "@/lib/cms"
+import type { Media } from "@/payload-types"
+import { Card } from "@code0-tech/pictor"
+import { IconX } from "@tabler/icons-react"
+import { AnimatePresence, m as motion } from "motion/react"
+import Image from "next/image"
+import { useState } from "react"
+import { useWebHaptics } from "web-haptics/react"
+
+interface TeamMemberCardProps {
+ member: TeamMemberItem
+ locale: string
+}
+
+function getInitials(name: string): string {
+ const parts = name.trim().split(/\s+/).slice(0, 2)
+ return parts.map((part) => part.charAt(0).toUpperCase()).join("")
+}
+
+export function TeamMemberCard({ member, locale }: TeamMemberCardProps) {
+ const [isOpen, setIsOpen] = useState(false)
+ const { trigger } = useWebHaptics()
+
+ const image = member.image as Media
+ const cardLayoutId = `team-member-card-${member.id ?? member.name}`
+ const joinedAtLabel = member.joinedAt
+ ? new Intl.DateTimeFormat(locale === "de" ? "de-DE" : "en-US", { dateStyle: "medium" }).format(new Date(member.joinedAt))
+ : null
+ const joinedLabel = locale === "de" ? "Beigetreten" : "Joined"
+
+ return (
+ <>
+ {
+ trigger("medium")
+ setIsOpen(true)
+ }}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault()
+ trigger("medium")
+ setIsOpen(true)
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-haspopup="dialog"
+ aria-label={`${member.name} details`}
+ whileTap={{ scale: 0.98 }}
+ >
+
+
+
+
+
+
+
+
+
+
+ {image?.url ? (
+
+ ) : (
+
+ {getInitials(member.name)}
+
+ )}
+
+
{member.name}
+ {member.role ?
{member.role}
: null}
+
+
+
+ {member.shortDescription ?
{member.shortDescription}
: null}
+ {joinedAtLabel ?
{joinedLabel}: {joinedAtLabel}
: null}
+
+
+
+ {image?.url ? (
+
+ ) : (
+
+ {getInitials(member.name)}
+
+ )}
+
+
{member.name}
+ {member.role ?
{member.role}
: null}
+
+
+
+
+
+ {member.about ?
{member.about}
: null}
+ {joinedAtLabel ?
{joinedLabel}: {joinedAtLabel}
: null}
+
+ {items.map((subItem, index) => (
+
+ onSelect?.(subItem)}
+ className="group h-14 flex items-center p-2 hover:bg-white/10 cursor-pointer gap-2 rounded-lg">
+
+ {subItem.icon}
+
+
+
{subItem.title}
+
{subItem.description}
+
+ ))}
+
+
+ {
+ setPosition({ left: position.left, width: position.width, opacity: 0 })
+ setActiveSubMenu(null)
+ setHoveredSubMenu(null)
+ }}
+ initial={{
+ marginLeft: "0%",
+ marginRight: "0%",
+ }}
+ animate={{
+ marginLeft: isScrolled ? "10%" : "0%",
+ marginRight: isScrolled ? "10%" : "0%"
+ }}
+ transition={{
+ type: "spring",
+ stiffness: 40,
+ damping: 10,
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ {navbarItems.map((item) => (
+ {
+ setActiveSubMenu(item.subMenu || null)
+ setHoveredSubMenu(item.subMenu || null)
+ }}
+ />
+ ))}
+
+
+ {activeSubMenu && !isScrolled && (
+
+
+ {
+ setActiveSubMenu(null)
+ setHoveredSubMenu(null)
+ }}
+ variant="overlay"
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {
+ trigger("medium")
+ setIsOpen(false)
+ }}
+ >
+
+
+
+
+ {
+ trigger("medium")
+ setIsOpen(!isOpen)
+ }}
+ >
+ {isOpen ? : }
+
+
+
+ {isOpen && (
+
+ {navbarItems.map((item, i) => {
+ const isAccordion = !!item.subMenu?.length
+ const isOpenAcc = mobileOpenKey === item.title
+
+ const hasRoute = Boolean(item.href)
+ return (
+
+
+ {isAccordion ? (
+
+ ) : (
+ {
+ trigger("medium")
+ setIsOpen(false)
+ }}
+ >
+ {item.title}
+
+ )}
+
+
+ {isAccordion && (
+
+ {isOpenAcc && (
+
+
+ {item.subMenu!.map((sub) => (
+
{
+ trigger("medium")
+ setIsOpen(false)
+ setMobileOpenKey(null)
+ }}
+ >
+
+ {sub.icon}
+
+
+ {sub.title}
+ {sub.description}
+
+
+ ))}
+
+ )}
+
+
+ {
+ trigger("medium")
+ setIsOpen(false)
+ }}
+ >
+
+
+
+
+ {
+ trigger("medium")
+ setIsOpen(false)
+ }}
+ >
+
+
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+export { NavigationMobile }
diff --git a/src/components/navigation/types.ts b/src/components/navigation/types.ts
new file mode 100644
index 0000000..161c68f
--- /dev/null
+++ b/src/components/navigation/types.ts
@@ -0,0 +1,22 @@
+import {ReactNode} from "react"
+
+export type NavItem = {
+ title: string
+ href: string | null
+ subMenu?: SubNavItem[]
+}
+
+export type SubNavItem = {
+ key: string
+ title: string
+ href: string
+ description: string
+ icon: ReactNode
+ color: string
+}
+
+export const fadeInUp = {
+ initial: { opacity: 0, y: -16 },
+ animate: { opacity: 1, y: 0 },
+ transition: {duration: 0.65}
+}
diff --git a/src/components/pages/AboutUsPageClient.tsx b/src/components/pages/AboutUsPageClient.tsx
new file mode 100644
index 0000000..1df4116
--- /dev/null
+++ b/src/components/pages/AboutUsPageClient.tsx
@@ -0,0 +1,24 @@
+import { MarkdownContent } from "@/components/MarkdownContent"
+import { TeamMemberCard } from "@/components/cards/TeamMemberCard"
+import { getTeamMembers } from "@/lib/cms"
+
+interface AboutUsPageClientProps {
+ locale: string
+ content: string
+}
+
+export async function AboutUsPageClient({ locale, content }: AboutUsPageClientProps) {
+ const teamMembers = await getTeamMembers()
+
+ return (
+
+
+
Team
+
+ {teamMembers.map((member) => (
+
+ ))}
+
+
+
{labels.heading}
+
+
+
setSearch(event.target.value)}
+ placeholder={labels.searchPlaceholder}
+ left={[]}
+ clearable
+ className="w-full rounded-xl bg-white/10 border border-white/15 text-white/85"
+ />
+
+
+
+
+
+
+
+
+
+
+ {Object.entries(groupedJobs).map(([category, items]) => (
+
+
+ {items.map((job) => (
+
+ ))}
+
+ ))}
+
+ {filteredJobs.length === 0 && (
+
{labels.noJobsFoundLabel}
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {content.heading}
+
+
+ {content?.subheading}
+
+
+
+
+
+
+
+
+
{card.title}
+
{card.description}
+ {card.link?.url && (
+
+ {card.link.label}
+
+ )}
+
+
+ {content.items.map((faq, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ {footer.company_name}
+
+
+
+ trigger("medium")} className="group">
+
+
+ trigger("medium")} className="group">
+
+
+ trigger("medium")} className="group">
+
+
+ trigger("medium")} className="group">
+
+
+
+
+
+ {footer.groups.map((group) => (
+
+
+ {group.heading}
+
+ {(group.items ?? []).map((item) => (
+
trigger("medium")}
+ >
+
+ {item.label}
+
+
+ ))}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {content.heading}
+
+
+
+ {content.texts.length > 0
+ ? content.texts.map((item, index) => (
+
+ {item.text}
+ {index < content.texts!!.length - 1 &&
}
+
+ ))
+ : <>Beschreibung1
Beschreibung2}
+
+
+
+ {content.buttons.map((button, index) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {items.map((item, index) => {
+ const isEven = index % 2 === 0
+
+ return (
+
+
+
+
+
+
*:first-child]:order-2 md:[&>*:last-child]:order-1"}`}>
+
+
+
+
+
+
+
+ {item.time}
+
+
+
{item.title}
+
{item.description}
+
+
+
+
+ )
+ })}
+
+
+ {content.useCases.map((item, index) => {
+ const animationPreset = USE_CASE_ANIMATION_SEQUENCE[index % USE_CASE_ANIMATION_SEQUENCE.length]
+ const animationConfig = ANIMATION_PRESETS[animationPreset]
+
+ return (
+
+
+ {item.title}
+ {item.description}
+ {item.bulletPoints?.length ? (
+
+ {item.bulletPoints.map((point, pointIndex) => (
+
+
+ {point}
+
+ ))}
+
+ ) : null}
+ {item.actions?.length ? (
+
+ {item.actions.map((action, actionIndex) => (
+
+ {action}
+
+ ))}
+
+ ) : null}
+
+
+
+
+
+
+
+ {/* Flows darstellen */}
+
+
+ )
+ })}
+
Organizations
+
+ {organizations.map((organization) => (
+
+ ))}
+
Personal Projects
+
+ {projects.map((project) => (
+
+ ))}
+
+ {children}
+
+ )
+}
diff --git a/src/components/ui/Granient.tsx b/src/components/ui/Granient.tsx
new file mode 100644
index 0000000..74d59a9
--- /dev/null
+++ b/src/components/ui/Granient.tsx
@@ -0,0 +1,266 @@
+import React, { useEffect, useRef } from 'react';
+import { Renderer, Program, Mesh, Triangle } from 'ogl';
+
+interface GrainientProps {
+ timeSpeed?: number;
+ colorBalance?: number;
+ warpStrength?: number;
+ warpFrequency?: number;
+ warpSpeed?: number;
+ warpAmplitude?: number;
+ blendAngle?: number;
+ blendSoftness?: number;
+ rotationAmount?: number;
+ noiseScale?: number;
+ grainAmount?: number;
+ grainScale?: number;
+ grainAnimated?: boolean;
+ contrast?: number;
+ gamma?: number;
+ saturation?: number;
+ centerX?: number;
+ centerY?: number;
+ zoom?: number;
+ color1?: string;
+ color2?: string;
+ color3?: string;
+ className?: string;
+}
+
+const hexToRgb = (hex: string): [number, number, number] => {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ if (!result) return [1, 1, 1];
+ return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];
+};
+
+const vertex = `#version 300 es
+in vec2 position;
+void main() {
+ gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+ float t=iTime*uTimeSpeed;
+ vec2 uv=C/iResolution.xy;
+ float ratio=iResolution.x/iResolution.y;
+ vec2 tuv=uv-0.5+uCenterOffset;
+ tuv/=max(uZoom,0.001);
+
+ float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+ tuv.y*=1.0/ratio;
+ tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+ tuv.y*=ratio;
+
+ float frequency=uWarpFrequency;
+ float ws=max(uWarpStrength,0.001);
+ float amplitude=uWarpAmplitude/ws;
+ float warpTime=t*uWarpSpeed;
+ tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+ tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+
+ vec3 colLav=uColor1;
+ vec3 colOrg=uColor2;
+ vec3 colDark=uColor3;
+ float b=uColorBalance;
+ float s=max(uBlendSoftness,0.0);
+ mat2 blendRot=Rot(radians(uBlendAngle));
+ float blendX=(tuv*blendRot).x;
+ float edge0=-0.3-b-s;
+ float edge1=0.2-b+s;
+ float v0=0.5-b+s;
+ float v1=-0.3-b-s;
+ vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+ vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+ vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+
+ vec2 grainUv=uv*max(uGrainScale,0.001);
+ if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+ float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+ col+=(grain-0.5)*uGrainAmount;
+
+ col=(col-0.5)*uContrast+0.5;
+ float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+ col=mix(vec3(luma),col,uSaturation);
+ col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+ col=clamp(col,0.0,1.0);
+
+ o=vec4(col,1.0);
+}
+void main(){
+ vec4 o=vec4(0.0);
+ mainImage(o,gl_FragCoord.xy);
+ fragColor=o;
+}
+`;
+
+const Grainient: React.FC = ({
+ timeSpeed = 0.25,
+ colorBalance = 0.0,
+ warpStrength = 1.0,
+ warpFrequency = 5.0,
+ warpSpeed = 2.0,
+ warpAmplitude = 50.0,
+ blendAngle = 0.0,
+ blendSoftness = 0.05,
+ rotationAmount = 500.0,
+ noiseScale = 2.0,
+ grainAmount = 0.1,
+ grainScale = 2.0,
+ grainAnimated = false,
+ contrast = 1.5,
+ gamma = 1.0,
+ saturation = 1.0,
+ centerX = 0.0,
+ centerY = 0.0,
+ zoom = 0.9,
+ color1 = '#FF9FFC',
+ color2 = '#5227FF',
+ color3 = '#B19EEF',
+ className = ''
+}) => {
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const renderer = new Renderer({
+ webgl: 2,
+ alpha: true,
+ antialias: false,
+ dpr: Math.min(window.devicePixelRatio || 1, 2)
+ });
+
+ const gl = renderer.gl;
+ const canvas = gl.canvas as HTMLCanvasElement;
+ canvas.style.width = '100%';
+ canvas.style.height = '100%';
+ canvas.style.display = 'block';
+
+ const container = containerRef.current;
+ container.appendChild(canvas);
+
+ const geometry = new Triangle(gl);
+ const program = new Program(gl, {
+ vertex,
+ fragment,
+ uniforms: {
+ iTime: { value: 0 },
+ iResolution: { value: new Float32Array([1, 1]) },
+ uTimeSpeed: { value: timeSpeed },
+ uColorBalance: { value: colorBalance },
+ uWarpStrength: { value: warpStrength },
+ uWarpFrequency: { value: warpFrequency },
+ uWarpSpeed: { value: warpSpeed },
+ uWarpAmplitude: { value: warpAmplitude },
+ uBlendAngle: { value: blendAngle },
+ uBlendSoftness: { value: blendSoftness },
+ uRotationAmount: { value: rotationAmount },
+ uNoiseScale: { value: noiseScale },
+ uGrainAmount: { value: grainAmount },
+ uGrainScale: { value: grainScale },
+ uGrainAnimated: { value: grainAnimated ? 1.0 : 0.0 },
+ uContrast: { value: contrast },
+ uGamma: { value: gamma },
+ uSaturation: { value: saturation },
+ uCenterOffset: { value: new Float32Array([centerX, centerY]) },
+ uZoom: { value: zoom },
+ uColor1: { value: new Float32Array(hexToRgb(color1)) },
+ uColor2: { value: new Float32Array(hexToRgb(color2)) },
+ uColor3: { value: new Float32Array(hexToRgb(color3)) }
+ }
+ });
+
+ const mesh = new Mesh(gl, { geometry, program });
+
+ const setSize = () => {
+ const rect = container.getBoundingClientRect();
+ const width = Math.max(1, Math.floor(rect.width));
+ const height = Math.max(1, Math.floor(rect.height));
+ renderer.setSize(width, height);
+ const res = (program.uniforms.iResolution as { value: Float32Array }).value;
+ res[0] = gl.drawingBufferWidth;
+ res[1] = gl.drawingBufferHeight;
+ };
+
+ const ro = new ResizeObserver(setSize);
+ ro.observe(container);
+ setSize();
+
+ let raf = 0;
+ const t0 = performance.now();
+ const loop = (t: number) => {
+ (program.uniforms.iTime as { value: number }).value = (t - t0) * 0.001;
+ renderer.render({ scene: mesh });
+ raf = requestAnimationFrame(loop);
+ };
+ raf = requestAnimationFrame(loop);
+
+ return () => {
+ cancelAnimationFrame(raf);
+ ro.disconnect();
+ try {
+ container.removeChild(canvas);
+ } catch {
+ // Ignore
+ }
+ };
+ }, [
+ timeSpeed,
+ colorBalance,
+ warpStrength,
+ warpFrequency,
+ warpSpeed,
+ warpAmplitude,
+ blendAngle,
+ blendSoftness,
+ rotationAmount,
+ noiseScale,
+ grainAmount,
+ grainScale,
+ grainAnimated,
+ contrast,
+ gamma,
+ saturation,
+ centerX,
+ centerY,
+ zoom,
+ color1,
+ color2,
+ color3
+ ]);
+
+ return ;
+};
+
+export default Grainient;
diff --git a/src/components/ui/LandingContainer.tsx b/src/components/ui/LandingContainer.tsx
new file mode 100644
index 0000000..204abc2
--- /dev/null
+++ b/src/components/ui/LandingContainer.tsx
@@ -0,0 +1,13 @@
+"use client"
+
+import {Container} from "@code0-tech/pictor"
+import React from "react"
+import {cn} from "@/lib/utils"
+
+export function LandingContainer({ children, className }: { children: React.ReactNode, className?: string }) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/ui/LinkButton.tsx b/src/components/ui/LinkButton.tsx
new file mode 100644
index 0000000..4a880cb
--- /dev/null
+++ b/src/components/ui/LinkButton.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+import { IconArrowUpRight } from "@tabler/icons-react"
+import { cn } from "@/lib/utils"
+import Link, { LinkProps } from "next/link"
+import { useWebHaptics } from "web-haptics/react"
+
+interface LinkButtonProps extends LinkProps {
+ href: string
+ children: React.ReactNode
+ showArrow?: boolean
+ className?: string
+}
+
+const baseClassName =
+ "w-max h-auto min-w-0 px-0 py-0 text-sm inline-flex items-center justify-center gap-1 border-b border-dashed border-white/25" +
+ "rounded-none cursor-pointer text-gray-500 hover:text-brand hover:border-brand transition-colors disabled:opacity-50" +
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 disabled:pointer-events-none"
+
+
+export function LinkButton({ className, children, href, showArrow = true, ...props }: LinkButtonProps) {
+ const { trigger } = useWebHaptics()
+
+ return (
+ trigger("medium")}
+ className={cn(baseClassName, className)}
+ {...props}
+ >
+ {children}
+ {showArrow && }
+
+ )
+}
diff --git a/src/components/ui/Section.tsx b/src/components/ui/Section.tsx
new file mode 100644
index 0000000..9c8dca4
--- /dev/null
+++ b/src/components/ui/Section.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import { usePreloadedSection } from "@/components/providers/SectionsProvider"
+import { LinkButton } from "@/components/ui/LinkButton"
+import { getLocaleFromPath, localizeHref } from "@/lib/i18n"
+import { ANIMATION_PRESETS, cn, type AnimationPreset } from "@/lib/utils"
+import { Section as SectionDocument } from "@/payload-types"
+import { m as motion, type Variants } from "motion/react"
+import { usePathname } from "next/navigation"
+import { ReactNode } from "react"
+
+interface SectionProps {
+ children: ReactNode
+ funnelType?: "center" | "left"
+ className?: string
+ sectionType?: NonNullable
+ showBlur?: boolean
+ showFunnel?: boolean
+ showLinkButton?: boolean
+ fullHeight?: boolean
+ animationPreset?: AnimationPreset
+ animationDelay?: number
+ animationDuration?: number
+ animationOnce?: boolean
+}
+
+export function Section({
+ sectionType,
+ children,
+ className,
+ funnelType = "center",
+ showBlur = true,
+ showFunnel = true,
+ showLinkButton = true,
+ fullHeight = false,
+ animationPreset = "fade-up",
+ animationDelay = 0,
+ animationDuration,
+ animationOnce = true,
+}: SectionProps) {
+ const sectionData = usePreloadedSection(sectionType) as SectionDocument | null
+ const pathname = usePathname()
+ const locale = getLocaleFromPath(pathname)
+ const rawLinkUrl = sectionData?.link_button?.url?.trim()
+ const linkUrl = rawLinkUrl ? localizeHref(rawLinkUrl, locale) : undefined
+ const animationConfig = animationPreset === "none" ? null : ANIMATION_PRESETS[animationPreset]
+ const staggerContainer: Variants = {
+ hidden: {},
+ show: {
+ transition: {
+ staggerChildren: 0.1,
+ delayChildren: 0.04,
+ },
+ },
+ }
+ const staggerItem: Variants = {
+ hidden: { opacity: 0, y: 16 },
+ show: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ duration: 0.4,
+ ease: [0.22, 1, 0.36, 1],
+ },
+ },
+ }
+
+ return (
+
+ {showBlur && (funnelType === "center" ? (
+
+ ) : (
+
+ ))}
+ {showFunnel && (
+ funnelType === "center" ? (
+
+
+ {sectionData?.heading}
+
+
+ {sectionData?.subheading}
+
+ {showLinkButton && linkUrl &&
+
+
+ {sectionData?.link_button?.label}
+
+
+ }
+
+ ) : (
+
+
+ {sectionData?.heading}
+
+
+ {sectionData?.subheading}
+
+ {showLinkButton && linkUrl &&
+
+
+ {sectionData?.link_button?.label}
+
+
+ }
+
+ )
+ )}
+ {children}
+
+ )
+}
diff --git a/src/components/ui/SuggesstionMenuClient.tsx b/src/components/ui/SuggesstionMenuClient.tsx
new file mode 100644
index 0000000..4afd7bd
--- /dev/null
+++ b/src/components/ui/SuggesstionMenuClient.tsx
@@ -0,0 +1,234 @@
+"use client"
+
+import type { ReactNode } from "react"
+import type { InputSuggestion } from "@code0-tech/pictor"
+import { Card, Text } from "@code0-tech/pictor"
+import { IconBulb, IconChevronUp, IconCircleDot, IconCirclesRelation, IconFileFunctionFilled } from "@tabler/icons-react"
+
+const FunctionSuggestionType = {
+ FUNCTION: "FUNCTION",
+ FUNCTION_COMBINATION: "FUNCTION_COMBINATION",
+ REF_OBJECT: "REF_OBJECT",
+ VALUE: "VALUE",
+ DATA_TYPE: "DATA_TYPE",
+} as const
+
+type FunctionSuggestionType = typeof FunctionSuggestionType[keyof typeof FunctionSuggestionType]
+
+type SuggestionWithType = InputSuggestion & {
+ suggestionType: FunctionSuggestionType
+}
+
+export function SuggesstionMenuClient() {
+ const iconMap: Record = {
+ [FunctionSuggestionType.FUNCTION]: ,
+ [FunctionSuggestionType.FUNCTION_COMBINATION]: ,
+ [FunctionSuggestionType.REF_OBJECT]: ,
+ [FunctionSuggestionType.VALUE]: ,
+ [FunctionSuggestionType.DATA_TYPE]: ,
+ }
+
+ const suggestions: SuggestionWithType[] = [
+ {
+ children: "0-0-2-",
+ value: "0-0-2-",
+ valueData: { id: "variable_1", type: "variable", label: "0-0-2-" },
+ groupBy: "Variables",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.REF_OBJECT,
+ },
+ {
+ children: "Boolean from Number",
+ value: "boolean-from-number",
+ valueData: { id: "std_boolean_1", type: "action", label: "Boolean from Number" },
+ groupBy: "STD::BOOLEAN",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Boolean from Text",
+ value: "boolean-from-text",
+ valueData: { id: "std_boolean_2", type: "action", label: "Boolean from Text" },
+ groupBy: "STD::BOOLEAN",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Is Equal",
+ value: "is-equal-boolean",
+ valueData: { id: "std_boolean_3", type: "action", label: "Is Equal" },
+ groupBy: "STD::BOOLEAN",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Negate Boolean",
+ value: "negate-boolean",
+ valueData: { id: "std_boolean_4", type: "action", label: "Negate Boolean" },
+ groupBy: "STD::BOOLEAN",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Get Element of List",
+ value: "get-element-of-list",
+ valueData: { id: "std_list_1", type: "action", label: "Get Element of List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Find Element in List",
+ value: "find-element-in-list",
+ valueData: { id: "std_list_2", type: "action", label: "Find Element in List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Find Last Element in List",
+ value: "find-last-element-in-list",
+ valueData: { id: "std_list_3", type: "action", label: "Find Last Element in List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "First Element of List",
+ value: "first-element-of-list",
+ valueData: { id: "std_list_4", type: "action", label: "First Element of List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Is List Empty",
+ value: "is-list-empty",
+ valueData: { id: "std_list_5", type: "action", label: "Is List Empty" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Last Element of List",
+ value: "last-element-of-list",
+ valueData: { id: "std_list_6", type: "action", label: "Last Element of List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Pop from List",
+ value: "pop-from-list",
+ valueData: { id: "std_list_7", type: "action", label: "Pop from List" },
+ groupBy: "STD::LIST",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Is Equal",
+ value: "is-equal-number",
+ valueData: { id: "std_number_1", type: "action", label: "Is Equal" },
+ groupBy: "STD::NUMBER",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Is Greater",
+ value: "is-greater",
+ valueData: { id: "std_number_2", type: "action", label: "Is Greater" },
+ groupBy: "STD::NUMBER",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ {
+ children: "Is Less",
+ value: "is-less",
+ valueData: { id: "std_number_3", type: "action", label: "Is Less" },
+ groupBy: "STD::NUMBER",
+ insertMode: "insert",
+ suggestionType: FunctionSuggestionType.FUNCTION,
+ },
+ ]
+
+ const groupedSuggestions = suggestions.reduce>((acc, suggestion) => {
+ const group = suggestion.groupBy || "Suggestions"
+
+ if (!acc[group]) {
+ acc[group] = []
+ }
+
+ acc[group].push(suggestion)
+ return acc
+ }, {})
+ const groupedEntries = Object.entries(groupedSuggestions)
+
+ return (
+
+
+ {groupedEntries
+ .filter(([group]) => group === "Variables")
+ .map(([group, items]) => (
+
+
+ {group}
+
+
+
+ {items.map((suggestion) => (
+
+
+ {iconMap[suggestion.suggestionType]}
+
+
+ {String(suggestion.children ?? suggestion.value)}
+
+
+ ))}
+
+
+ ))}
+
+
+ {groupedEntries
+ .filter(([group]) => group !== "Variables")
+ .map(([group, items]) => (
+
+
+ {group}
+
+
+
+ {items.map((suggestion) => (
+
+
+ {iconMap[suggestion.suggestionType]}
+
+
+ {String(suggestion.children ?? suggestion.value)}
+
+
+ ))}
+
+
+ ))}
+
+
+ Press
+ ↵
+ to insert
+
+
+
+ )
+}
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..5a82c96
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { useState } from "react"
+
+export function useMediaQuery(query: string) {
+ const [value, setValue] = useState(false)
+
+ React.useEffect(() => {
+ function onChange(event: MediaQueryListEvent) {
+ setValue(event.matches)
+ }
+
+ const result = matchMedia(query)
+ result.addEventListener("change", onChange)
+ setValue(result.matches)
+
+ return () => result.removeEventListener("change", onChange)
+ }, [query])
+
+ return value
+}
\ No newline at end of file
diff --git a/src/hooks/useOutsideClick.ts b/src/hooks/useOutsideClick.ts
new file mode 100644
index 0000000..3f8baf3
--- /dev/null
+++ b/src/hooks/useOutsideClick.ts
@@ -0,0 +1,27 @@
+import {RefObject, useEffect, useRef} from "react"
+
+type EventHandler = (e: MouseEvent | TouchEvent) => void;
+
+function useOutsideClick(callback: EventHandler): RefObject {
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const handle = (e: MouseEvent | TouchEvent) => {
+ const el = ref.current
+ if (!el || el.contains(e.target as Node)) return
+ callback(e)
+ }
+
+ document.addEventListener("mousedown", handle)
+ document.addEventListener("touchstart", handle)
+
+ return () => {
+ document.removeEventListener("mousedown", handle)
+ document.removeEventListener("touchstart", handle)
+ }
+ }, [callback])
+
+ return ref
+}
+
+export {useOutsideClick}
diff --git a/src/lib/cms.ts b/src/lib/cms.ts
new file mode 100644
index 0000000..81a0e50
--- /dev/null
+++ b/src/lib/cms.ts
@@ -0,0 +1,378 @@
+"use server"
+
+import type { Blog, Feature, Footer, Job, Media, NavbarItem, Page, RoadmapItem as PayloadRoadmapItem, Section, User } from "@/payload-types"
+import { DEFAULT_LOCALE, type AppLocale } from "@/lib/i18n"
+import { getPayloadClient } from "@/lib/payloadClient"
+import { unstable_cache } from "next/cache"
+
+type PageLayoutBlock = NonNullable[number]
+
+export type HeroLayoutBlock = Extract
+export type BrandLayoutBlock = Extract
+export type CtaLayoutBlock = Extract
+export type FaqLayoutBlock = Extract
+export type UseCaseLayoutBlock = Extract
+export type DeploymentLayoutBlock = Extract
+export type JobsLayoutBlock = Extract
+export type MarkdownLayoutBlock = Extract
+export type ContactLayoutBlock = Extract
+
+type FeatureSlug = Feature["slug"]
+interface FeatureItem {
+ id: Feature["id"]
+ slug: FeatureSlug
+ title: NonNullable
+ description: NonNullable
+ link: {
+ label: NonNullable["label"]>
+ url: NonNullable["url"]>
+ }
+}
+
+export type JobItem = Pick
+type JobDetailItem = Pick
+export type TeamMemberItem = Pick
+type RoadmapItem = Pick
+
+export type BlogPostItem = Pick & {
+ heroImage?: (number | null) | Media
+ author: number | Pick
+}
+
+const getLandingPageCached = unstable_cache(
+ async (cachedSlug: string, cachedLocale: AppLocale): Promise => {
+ const payload = await getPayloadClient()
+
+ const result = await payload.find({
+ collection: "pages",
+ locale: cachedLocale,
+ fallbackLocale: DEFAULT_LOCALE,
+ where: { slug: { equals: cachedSlug } },
+ limit: 1,
+ depth: 1,
+ pagination: false,
+ })
+
+ return (result.docs[0] as Page | undefined) ?? null
+ },
+ ["landing-page"],
+ { revalidate: 300, tags: ["pages"] },
+)
+
+const getNavbarItemsCached = unstable_cache(
+ async (locale: AppLocale): Promise => {
+ const payload = await getPayloadClient()
+
+ const result = await payload.find({
+ collection: "navbarItems",
+ locale,
+ fallbackLocale: DEFAULT_LOCALE,
+ pagination: false,
+ sort: "order",
+ depth: 0,
+ })
+
+ return result.docs as NavbarItem[]
+ },
+ ["navbar-items"],
+ { revalidate: 300, tags: ["navbarItems"] },
+)
+
+const getFooterCached = unstable_cache(
+ async (locale: AppLocale): Promise