+
{labels.heading}
+
+
+
setSearch(event.target.value)}
+ placeholder={labels.searchPlaceholder}
+ className="w-full rounded-xl bg-white/10 border border-white/15 text-white/85 px-3 h-10"
+ />
+
+
+
+
+
+
+
+
+
+
+ {Object.entries(groupedJobs).map(([category, items]) => (
+
+
+ {items.map((job) => (
+
+ ))}
+
+ ))}
+
+ {filteredJobs.length === 0 && (
+
{labels.noJobsFoundLabel}
+ )}
+
-
-}
\ No newline at end of file
diff --git a/src/components/animations/RoleSystemAnimation.tsx b/src/components/animations/RoleSystemAnimation.tsx
new file mode 100644
index 0000000..578fa1b
--- /dev/null
+++ b/src/components/animations/RoleSystemAnimation.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { motion } from "motion/react"
+
+interface RoleItem {
+ name: string
+ scope: string
+ assign: string
+}
+
+interface RoleSystemAnimationProps {
+ roles: RoleItem[]
+}
+
+export function RoleSystemAnimation({ roles }: RoleSystemAnimationProps) {
+ const loopRoles = [...roles, ...roles]
+
+ return (
+
+
+ {loopRoles.map((role, index) => (
+
+
{role.name}
+
{role.scope}
+
{role.assign}
+
+
+ )
+}
diff --git a/src/components/blog/BlogPost.tsx b/src/components/blog/BlogPost.tsx
new file mode 100644
index 0000000..ef37e45
--- /dev/null
+++ b/src/components/blog/BlogPost.tsx
@@ -0,0 +1,28 @@
+import { getBlogPostBySlug } from "@/utils/getBlogPostBySlug"
+import type { AppLocale } from "@/utils/i18n"
+import { convertLexicalToHTML } from "@payloadcms/richtext-lexical/html"
+import { notFound } from "next/navigation"
+import { MarkdownContent } from "../MarkdownContent"
+
+interface BlogPostProps {
+ slug: string
+ locale: AppLocale
+}
+
+export async function BlogPost({ slug, locale }: BlogPostProps) {
+ const post = await getBlogPostBySlug(slug, locale)
+
+ if (!post) notFound()
+
+ const contentHtml = convertLexicalToHTML({
+ data: post.content,
+ disableContainer: true,
+ })
+
+ return (
+
+ {post.title}
+
+
+ )
+}
diff --git a/src/components/blog/BlogSkeleton.tsx b/src/components/blog/BlogSkeleton.tsx
new file mode 100644
index 0000000..3b8770c
--- /dev/null
+++ b/src/components/blog/BlogSkeleton.tsx
@@ -0,0 +1,14 @@
+
+export function BlogSkeleton() {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/cards/AdapterCard.tsx b/src/components/cards/AdapterCard.tsx
new file mode 100644
index 0000000..791a142
--- /dev/null
+++ b/src/components/cards/AdapterCard.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { IconDatabase, IconApi, IconBrandStripe } from "@tabler/icons-react";
+import { cn } from "@/utils/cn";
+import { FeatureCard } from "./FeatureCard";
+import { FeatureCardContent, FeatureCardText } from "../FeatureCardText";
+
+interface AdapterCardProps {
+ content?: FeatureCardContent | null
+}
+
+const adapters = [
+ {
+ id: 1,
+ title: "Database",
+ description: "Connect to any SQL or NoSQL database.",
+ icon:
,
+ },
+ {
+ id: 2,
+ title: "REST API",
+ description: "Integrate with any third-party REST API.",
+ icon:
,
+ },
+ {
+ id: 3,
+ title: "Stripe",
+ description: "Process payments with the Stripe API.",
+ icon:
,
+ },
+];
+
+export const AdapterCard: React.FC
= ({ content }) => {
+ const [selectedId, setSelectedId] = useState(1)
+
+ return (
+
+
+ {adapters.map(adapter => (
+
setSelectedId(selectedId === adapter.id ? null : adapter.id)}
+ className={cn(
+ "relative cursor-pointer rounded-lg p-4 drop-shadow-[0_20px_20px_rgba(0,0,0,0.15)]",
+ selectedId === adapter.id ? "w-3/5" : "w-1/5",
+ "h-2/3 bg-linear-to-t from-primary to-[#0d1120] ring ring-white/10 flex items-center overflow-hidden",
+ selectedId === adapter.id ? "justify-start" : "justify-center"
+ )}
+ transition={{ type: "spring", stiffness: 300, damping: 30 }}
+ >
+
+ {adapter.icon}
+
+
+
+ {selectedId === adapter.id && (
+
+ {adapter.title}
+ {adapter.description}
+
+ )}
+
+
+ ))}
+
+
+ {children}
+
+ {isVisible && (
+ <>
+
+
+
+ )}
+
+
{labels.applicationHeading}
+
+
{job.title}
+
+ {job.location} - {job.type}
+
+ {job.description}
+
+ )
+}
diff --git a/src/components/cards/MemberManagementCard.tsx b/src/components/cards/MemberManagementCard.tsx
new file mode 100644
index 0000000..fdbd8ef
--- /dev/null
+++ b/src/components/cards/MemberManagementCard.tsx
@@ -0,0 +1,34 @@
+import { getFeatureBySlug } from "@/utils/getFeatures"
+import { type AppLocale } from "@/utils/i18n"
+import { FeatureCardText } from "../FeatureCardText"
+import { FeatureCard } from "./FeatureCard"
+
+interface MemberMangementCardProps {
+ locale: AppLocale
+}
+
+export async function MemberManagementCard({ locale }: MemberMangementCardProps) {
+ const content = await getFeatureBySlug("member-management", locale)
+
+ return (
+
+
+
+
+ NS
+
+
+
@Nico
+
nico@codezero.tech
+
+
+
+
Member since: 2 months ago
+
+
+
+
+
+
+
+
+
+
+ {organizations.map((organization, index) => (
+
+ ))}
+
+
+
+ {cards.map((card, index) => (
+
+
+ {card.icon}
+
+
{card.name}
+
{card.description}
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/cards/RuntimeCard.tsx b/src/components/cards/RuntimeCard.tsx
new file mode 100644
index 0000000..a7f6c97
--- /dev/null
+++ b/src/components/cards/RuntimeCard.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { FeatureCard } from './FeatureCard'
+import { AnimatedChart } from '../AnimatedChart'
+import { FeatureCardContent, FeatureCardText } from '../FeatureCardText'
+
+interface RuntimeCardProps {
+ content?: FeatureCardContent | null
+}
+
+export const RuntimeCard: React.FC = ({ content }) => {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/cards/SuggestionCard.tsx b/src/components/cards/SuggestionCard.tsx
new file mode 100644
index 0000000..ed90b27
--- /dev/null
+++ b/src/components/cards/SuggestionCard.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import React from "react"
+import { IconChevronDown } from "@tabler/icons-react"
+import { FeatureCard } from "./FeatureCard"
+import { FeatureCardContent, FeatureCardText } from "../FeatureCardText"
+
+interface SuggestionCardProps {
+ content?: FeatureCardContent | null
+}
+
+export const SuggestionCard: React.FC = ({ content }) => {
+ const dropdownItems = [
+ "Dashboard",
+ "Analytics",
+ "Reports",
+ "Settings",
+ "Users",
+ "Permissions",
+ "Integrations",
+ "API Tokens",
+ ]
+
+ return (
+
+
+
+
+
+ {dropdownItems.map((item, index) => (
+
{item}
+ ))}
+
+
+
+ )
+}
diff --git a/src/components/cards/WelcomeUserCard.tsx b/src/components/cards/WelcomeUserCard.tsx
new file mode 100644
index 0000000..827478c
--- /dev/null
+++ b/src/components/cards/WelcomeUserCard.tsx
@@ -0,0 +1,44 @@
+import { type AppLocale } from "@/utils/i18n"
+import { getFeatureBySlug } from "@/utils/getFeatures"
+import { FeatureCard } from "./FeatureCard"
+import { FeatureCardText } from "../FeatureCardText"
+
+interface WelcomeUserCardProps {
+ locale: AppLocale
+}
+
+export async function WelcomeUserCard({ locale }: WelcomeUserCardProps) {
+ const content = await getFeatureBySlug("welcome-user", locale)
+
+ const projects = [
+ "Cygnus Platform",
+ "Orion Team Space",
+ "Atlas API Runtime",
+ "Nova Billing",
+ "Pulse Analytics",
+ ]
+
+ return (
+
+
+
Welcome @Nico
+
+
+ {projects.map((project, index) => (
+
+ ))}
+
+
+
+ {subItem.icon}
+
+
+
{subItem.title}
+
{subItem.description}
+
+
+
+
+
+
+
+
+
+
+
+
setPosition({ left: position.left, width: position.width, opacity: 0 })}
+ >
+
+ {navbarItems.map((item) => (
+ item.href && handleRoute(item)}
+ onMouseEnter={() => setActiveSubMenu(item.subMenu || null)}
+ />
+ ))}
+
+
+ {activeSubMenu && !isScrolled && (
+
+
+ {
+ onNavigate(subItem.href)
+ setActiveSubMenu(null)
+ }}
+ variant="overlay"
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsOpen(!isOpen)}
+ >
+ {isOpen ? : }
+
+
+
+ {isOpen && (
+
+ {navbarItems.map((item, i) => {
+ const isAccordion = !!item.subMenu?.length
+ const isOpenAcc = mobileOpenKey === item.title
+
+ return (
+
+
{
+ if (isAccordion) {
+ setMobileOpenKey(isOpenAcc ? null : item.title)
+ } else {
+ handleRoute(item)
+ setIsOpen(false)
+ }
+ }}
+ >
+ {item.title}
+ {isAccordion && (
+
+ )}
+
+
+ {isAccordion && (
+
+ {isOpenAcc && (
+
+
+ {item.subMenu!.map((sub) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+export { NavigationMobile }
diff --git a/src/components/navigation/types.ts b/src/components/navigation/types.ts
new file mode 100644
index 0000000..d611423
--- /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, filter: "blur(10px)", y: -30},
+ animate: {opacity: 1, filter: "blur(0px)", y: 0},
+ transition: {duration: 0.65}
+}
diff --git a/src/components/sections/AppFeatureSection.tsx b/src/components/sections/AppFeatureSection.tsx
new file mode 100644
index 0000000..633842a
--- /dev/null
+++ b/src/components/sections/AppFeatureSection.tsx
@@ -0,0 +1,28 @@
+import { Section } from "@/components/ui/Section"
+import { type AppLocale } from "@/utils/i18n"
+import { MemberManagementCard } from "../cards/MemberManagementCard"
+import { OrganizationCard } from "../cards/OrganizationCard"
+import { ProSubscriptionCard } from "../cards/ProSubscriptionCard"
+import { RoleSystemCard } from "../cards/RoleSystemCard"
+import { TeamSubscriptionCard } from "../cards/TeamSubscriptionCard"
+import { WelcomeUserCard } from "../cards/WelcomeUserCard"
+import { BentoGrid } from "../ui/BentoGrid"
+
+interface AppFeatureSectionProps {
+ locale: AppLocale
+}
+
+export const AppFeatureSection: React.FC = ({ locale }) => {
+ return (
+
+ )
+}
diff --git a/src/components/sections/BrandSection.tsx b/src/components/sections/BrandSection.tsx
new file mode 100644
index 0000000..34bdda9
--- /dev/null
+++ b/src/components/sections/BrandSection.tsx
@@ -0,0 +1,58 @@
+import React from "react"
+import { Section } from "@/components/ui/Section"
+import Image from "next/image"
+import type { Media } from "@/payload-types"
+
+interface BrandSectionLogo {
+ logo: string | Media
+ id?: string | null
+}
+
+interface BrandSectionContent {
+ description?: string | null
+ logos?: BrandSectionLogo[] | null
+}
+
+interface BrandSectionProps {
+ content?: BrandSectionContent | null
+}
+
+export const BrandSection: React.FC = ({ content }) => {
+ if (!content) return
+
+ const logos = (content.logos ?? [])
+ .map((item) => item.logo)
+ .filter((logo): logo is Media => typeof logo !== "string" && Boolean(logo?.url))
+
+ return (
+
+
+
+ {content.description}
+
+
+ {logos.length > 0 ? (
+ logos.map((logo, index) => (
+
+
+
+ ))
+ ) : (
+ <>
+
Logo1
+
Logo2
+
Logo3
+
Logo4
+
+ )}
+
+
+
+
+
+
+
+
+
+ {content.heading}
+
+
+ {content?.subheading}
+
+
+
+
+
+
+
+
+ {content.items.map((faq, index) => (
+
toggleItem(index)}
+ />
+ ))}
+