225 lines
8.9 KiB
TypeScript
225 lines
8.9 KiB
TypeScript
// app/stack/page.tsx
|
|
|
|
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { ExternalLinkIcon } from 'lucide-react';
|
|
|
|
import { Navbar } from '@workspace/ui/components/layout';
|
|
import { Footer } from '@workspace/ui/components/layout';
|
|
import { Container } from '@workspace/ui/components/layout';
|
|
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
|
|
import { Callout } from '@workspace/ui/components/content';
|
|
import { Badge } from '@workspace/ui/components/content';
|
|
import { Button } from '@workspace/ui/components/ui';
|
|
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now
|
|
|
|
// Mock data for Core Frameworks
|
|
const CORE_FRAMEWORKS = [
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Nextcloud",
|
|
description: "Your self-hosted productivity platform. Files, collaboration, office suite, and more."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Seafile",
|
|
description: "High-performance file sync and sharing with robust access controls."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "n8n",
|
|
description: "Workflow automation. Connect your tools and data with low-code automation."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Keycloak",
|
|
description: "Identity and Access Management (IAM). Single Sign-On (SSO) for all your apps."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "PostgreSQL",
|
|
description: "The world's most advanced open-source relational database."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "MinIO",
|
|
description: "High-performance, S3-compatible object storage."
|
|
}
|
|
];
|
|
|
|
// Mock data for AI-Native Stack
|
|
const AI_NATIVE_STACK = [
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Local LLM Inference",
|
|
description: "Run large language models on your own hardware for complete privacy."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "RAG Engine",
|
|
description: "Retrieval-Augmented Generation over your private data collections."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Vector DB",
|
|
description: "Store and query embeddings for semantic search and AI applications."
|
|
}
|
|
];
|
|
|
|
// Mock data for Integrations
|
|
const INTEGRATIONS = [
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "SSO (SAML, OIDC)",
|
|
description: "Seamless single sign-on with existing identity providers."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "LDAP",
|
|
description: "Integrate with existing directory services for user management."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Jira",
|
|
description: "Link issues, automate workflows, and sync data with Jira."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Slack",
|
|
description: "Send notifications, trigger workflows, and collaborate in Slack."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "Git",
|
|
description: "Self-host Git repositories and integrate with CI/CD pipelines."
|
|
},
|
|
{
|
|
icon: <PlaceholderIcon className="size-6" />,
|
|
title: "API Connectors",
|
|
description: "Pre-built connectors for hundreds of SaaS and enterprise APIs."
|
|
}
|
|
];
|
|
|
|
export default function StackPage() {
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Navbar />
|
|
|
|
{/* Hero Section */}
|
|
<AnimatedSection className="border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<div className="py-20 md:py-28">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Our Stack</h1>
|
|
<p className="mt-6 text-xl text-muted-foreground max-w-3xl">
|
|
Proven, open-source foundations. No lock-in. No black boxes.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
{/* Core Frameworks */}
|
|
<AnimatedSection className="py-20 border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<h2 className="text-4xl font-bold mb-16">Core Frameworks</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{CORE_FRAMEWORKS.map((f, index) => (
|
|
<div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
|
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
|
|
{f.icon}
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-light text-muted-foreground mb-2">
|
|
{index < 9 ? `0${index + 1}` : index + 1}
|
|
</div>
|
|
<h3 className="text-2xl font-bold">{f.title}</h3>
|
|
<p className="text-muted-foreground mt-2">{f.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
{/* AI-Native Stack */}
|
|
<AnimatedSection className="py-20 border-b border-muted bg-muted/30">
|
|
<Container maxWidth="10xl">
|
|
<div className="flex flex-wrap items-center justify-between gap-6 mb-16">
|
|
<h2 className="text-4xl font-bold">AI-Native</h2>
|
|
<Badge variant="info" className="text-lg py-2 px-4">Private & Secure</Badge>
|
|
</div>
|
|
<p className="text-xl text-muted-foreground max-w-4xl mb-16">
|
|
Leverage AI on your terms. All inference happens on hardware you control, over data you own. Zero leakage to third parties.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{AI_NATIVE_STACK.map((f, index) => (
|
|
<div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
|
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
|
|
{f.icon}
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-light text-muted-foreground mb-2">
|
|
{index < 9 ? `0${index + 1}` : index + 1}
|
|
</div>
|
|
<h3 className="text-2xl font-bold">{f.title}</h3>
|
|
<p className="text-muted-foreground mt-2">{f.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Callout variant="info" className="mt-16 p-8 text-lg">
|
|
<span className="font-semibold">AI Compliance:</span> Our local AI stack ensures strict adherence to data privacy regulations (GDPR, HIPAA) and eliminates risks associated with sending sensitive data to external LLM providers.
|
|
</Callout>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
{/* Integrations */}
|
|
<AnimatedSection className="py-20 border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<h2 className="text-4xl font-bold mb-16">Integrations</h2>
|
|
<p className="text-xl text-muted-foreground max-w-4xl mb-16">
|
|
We wire your new stack into your existing ecosystem. Connect to SSO, directories, project management, communication tools, and more.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{INTEGRATIONS.map((f, index) => (
|
|
<div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
|
|
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
|
|
{f.icon}
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-light text-muted-foreground mb-2">
|
|
{index < 9 ? `0${index + 1}` : index + 1}
|
|
</div>
|
|
<h3 className="text-2xl font-bold">{f.title}</h3>
|
|
<p className="text-muted-foreground mt-2">{f.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
{/* CTA Section */}
|
|
<AnimatedSection className="py-20 border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2 className="text-4xl font-bold mb-6">Want to see a specific tool?</h2>
|
|
<p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
|
|
Our stack is flexible. If you have a specific open-source tool in mind, we can likely integrate it.
|
|
</p>
|
|
<Button asChild size="lg">
|
|
<a href="/contact">
|
|
Discuss Your Stack
|
|
<ExternalLinkIcon className="ml-2 size-5" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|