mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-25 15:37:37 +00:00
433 lines
No EOL
26 KiB
Text
433 lines
No EOL
26 KiB
Text
---
|
||
description: Custom Home Page
|
||
hide_table_of_contents: true
|
||
full_width: true
|
||
sidebar_label: Platform Overview
|
||
---
|
||
|
||
|
||
import {
|
||
Grid3x3, Database, Workflow, ArrowRight, Cog, Target, Scale,
|
||
Layers, FileSpreadsheet, Folder, Wand2, LayoutGrid, Users, UserCheck,
|
||
Lock, UsersRound, ClipboardList, Megaphone, Diamond, GitBranch,
|
||
Box, GitMerge, ShoppingBag, Wand, Flag, ShieldCheck, LayoutDashboard,
|
||
UserPlus, ScrollText, Gem, Mail, ChevronLeft, ChevronDown, ChevronRight, Cloud, Container, Boxes, Server, Telescope, Globe
|
||
} from 'lucide-react'
|
||
import '../../../src/css/global.css'
|
||
import gettingStatedImage from '../../../src/pages/getting-started.png'
|
||
|
||
export const Header = () => (
|
||
<header className="fixed top-0 left-0 right-0 z-10 flex items-center justify-between px-6 py-4 bg-white border-b border-gray-200 h-12">
|
||
<div className="flex items-center">
|
||
<img src="/tooljet-logo.svg" alt="ToolJet Logo" className="h-8 w-auto" />
|
||
<span className="ml-2 text-xl font-semibold text-gray-800">DOCS</span>
|
||
</div>
|
||
</header>
|
||
)
|
||
|
||
export const Card = ({ className = '', children }) => (
|
||
<div className={`relative rounded-lg bg-transparent group ${className}`}>
|
||
<div className="absolute inset-0 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-50"
|
||
style={{
|
||
background: 'linear-gradient(to bottom, #3B82F6, transparent) border-box',
|
||
border: '0px',
|
||
backgroundClip: 'padding-box, border-box',
|
||
backgroundOrigin: 'border-box',
|
||
pointerEvents: 'none'
|
||
}}>
|
||
</div>
|
||
<div className="m-0.5 relative z-10 h-full rounded-lg border border-gray-300 bg-white">
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
|
||
export const CardHeader = ({ className = '', children }) => (
|
||
<div className={`flex flex-col space-y-1.5 ${className}`}>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
export const CardContent = ({ className = '', children }) => (
|
||
<div className={` pt-2 ${className}`}>
|
||
{children}
|
||
</div>
|
||
);
|
||
|
||
export const CardTitle = ({ className = '', children }) => (
|
||
<h3 className={`text-xl font-semibold leading-none tracking-tight ${className}`}>
|
||
{children}
|
||
</h3>
|
||
);
|
||
|
||
export const Button = ({ variant = "default", className = '', children }) => {
|
||
const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background";
|
||
|
||
const variantStyles = {
|
||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||
outline: "border border-input hover:bg-accent hover:text-accent-foreground",
|
||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||
link: "underline-offset-4 hover:underline text-primary"
|
||
};
|
||
|
||
return (
|
||
<button className={`${baseStyles} ${variantStyles[variant]} ${className}`}>
|
||
{children}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
export const OrganizationCard = ({ icon: Icon, title }) => (
|
||
<Card className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-3 flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-lg bg-white shadow flex items-center justify-center">
|
||
<Icon className="w-5 h-5 text-orange-500" />
|
||
</div>
|
||
<span className="text-sm font-medium">{title}</span>
|
||
</div>
|
||
</Card>
|
||
);
|
||
|
||
export const DeployCard = ({ icon: Icon, title }) => (
|
||
<Card className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-3 flex items-center space-x-3">
|
||
<div className="w-10 h-10 rounded-lg bg-white shadow flex items-center justify-center">
|
||
<Icon className="w-5 h-5 text-blue-500" />
|
||
</div>
|
||
<span className="text-sm font-medium">{title}</span>
|
||
</div>
|
||
</Card>
|
||
);
|
||
|
||
#
|
||
|
||
<main className="flex flex-col" >
|
||
<div className="flex flex-1 flex-col overflow-hidden">
|
||
<div className="relative w-full p-10 pt-20 pb-14 space-y-12 bg-gradient-to-br from-blue-50 to-pink-50 overflow-hidden">
|
||
{/* Grid pattern */}
|
||
<div
|
||
className="absolute top-0 right-0 w-96 h-96 pointer-events-none"
|
||
style={{
|
||
backgroundImage: `
|
||
linear-gradient(to left, rgba(59, 130, 246, 0.1) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(59, 130, 246, 0.1) 1px, transparent 1px)
|
||
`,
|
||
backgroundSize: '64px 64px',
|
||
maskImage: 'linear-gradient(to left, rgba(0, 0, 0, 1.0) 20%, transparent 80%)',
|
||
WebkitMaskImage: 'linear-gradient(to left, rgba(0, 0, 0, 1.0) 20%, transparent 80%)'
|
||
}}
|
||
></div>
|
||
|
||
{/* ToolJet Documentation Section */}
|
||
<div className="space-y-6 relative display-block">
|
||
<h1 className="text-4xl font-bold">
|
||
ToolJet <span className="text-blue-600">Documentation</span>
|
||
</h1>
|
||
<p className="text-xl text-gray-600">
|
||
Learn how to get up and running with ToolJet
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{[
|
||
{ icon: Grid3x3, title: "App Builder", color: "text-green-500", content: "Design and create applications effortlessly with ToolJet's intuitive app builder, featuring a drag-and-drop interface and powerful pre-built components to streamline development." },
|
||
{ icon: Database, title: "ToolJet Database", color: "text-red-500", content: "Powered by PostgreSQL, offering a user-friendly UI editor. This allows you to manage, edit, and interact with your data directly within the platform." },
|
||
{ icon: Workflow, title: "Workflows", color: "text-purple-500", content: "Automate processes and define workflows with precision, empowering your apps to handle tasks intelligently." }
|
||
].map((item, index) => (
|
||
<Card key={index} className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-8">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 mb-5 rounded-lg bg-white shadow-md flex items-center justify-center transition-all duration-300 ease-in-out group-hover:shadow-lg">
|
||
<item.icon className={`w-6 h-6 ${item.color}`} />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500">
|
||
{item.content}
|
||
</p>
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
{/* Getting Started Section */}
|
||
<div className="w-full h-[104px] bg-white rounded-lg shadow-sm border border-gray-200 flex items-center overflow-hidden">
|
||
<div className="w-[380px] h-full relative overflow-hidden">
|
||
<img
|
||
src="{gettingStatedImage}"
|
||
alt="Getting Started"
|
||
className="absolute bottom-0 left-[-20px] w-[calc(100%+40px)] h-auto object-cover object-top"
|
||
style={{ maxHeight: '70px', borderRadius: '5px', transform: 'scale(1.2)', transformOrigin: 'top left' }}
|
||
/>
|
||
</div>
|
||
<div className="flex-1 ml-20">
|
||
<h3 className="text-2xl font-medium text-[#1b1f24] mb-1">Getting Started</h3>
|
||
<p className="text-sm text-[#1b1f24] opacity-80">
|
||
Discover how to create and publish apps within minutes
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="w-full p-10 space-y-12 bg-white">
|
||
{/* Setup ToolJet Section */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold">Setup ToolJet</h2>
|
||
<p className="text-sm text-gray-500">
|
||
Check out the different methods you can use to deploy ToolJet on your machine
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{[
|
||
{
|
||
icon: Cog,
|
||
title: "Try ToolJet",
|
||
color: "text-blue-500",
|
||
content: "Get started with ToolJet in under 2 minutes by running it with Docker. Experience a seamless setup and explore the full capabilities of ToolJet's app builder right on your machine."
|
||
},
|
||
{
|
||
icon: Cog,
|
||
title: "System Requirements",
|
||
color: "text-blue-500",
|
||
content: "Ensure your system meets the requirements for running ToolJet. Check hardware and software specifications to get the best performance from the platform."
|
||
},
|
||
{
|
||
icon: Target,
|
||
title: "Choose Your ToolJet",
|
||
color: "text-blue-500",
|
||
content: "Find the right ToolJet plan that fits your needs. Compare features and pricing to select the best option for your development workflow."
|
||
},
|
||
{
|
||
icon: Scale,
|
||
title: "Upgrade to LTS",
|
||
color: "text-blue-500",
|
||
content: "Upgrade to the Long Term Support (LTS) version of ToolJet for extended support, stability, and access to critical updates."
|
||
}
|
||
].map((item, index) => (
|
||
<Card key={index} className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-8">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 mb-5 rounded-lg bg-white shadow-md flex items-center justify-center transition-all duration-300 ease-in-out group-hover:shadow-lg">
|
||
<item.icon className={`w-6 h-6 ${item.color}`} />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500">
|
||
{item.content}
|
||
</p>
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Deploy on Section */}
|
||
<div className="space-y-6">
|
||
<h3 className="text-xl font-semibold">Deploy on</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||
{[
|
||
{ icon: Cloud, title: "DigitalOcean" },
|
||
{ icon: Container, title: "Docker" },
|
||
{ icon: Server, title: "AWS EC2" },
|
||
{ icon: Server, title: "AWS ECS" },
|
||
{ icon: Server, title: "Openshift" },
|
||
{ icon: Telescope, title: "Helm" },
|
||
{ icon: Boxes, title: "Kubernetes" },
|
||
{ icon: Globe, title: "Kubernetes (GKE)" },
|
||
{ icon: Globe, title: "Kubernetes (AKS)" },
|
||
{ icon: Globe, title: "Kubernetes (EKS)" },
|
||
].map((item, index) => (
|
||
<DeployCard key={index} icon={item.icon} title={item.title} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Explore more details link */}
|
||
<div className="text-center">
|
||
<Button variant="link" className="text-blue-600 hover:text-blue-800">
|
||
Explore more details <ArrowRight className="ml-2 w-4 h-4 inline" />
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Bring your data to ToolJet section */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold">Bring your data to ToolJet</h2>
|
||
<p className="text-sm text-gray-500">
|
||
Check out the different methods you can use to deploy ToolJet on your machine
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{[
|
||
{
|
||
icon: Layers,
|
||
title: "Overview",
|
||
color: "text-blue-500",
|
||
content: "Gain a broad understanding of ToolJet’s features and capabilities. Learn how it simplifies app development with powerful tools and an intuitive interface."
|
||
},
|
||
{
|
||
icon: FileSpreadsheet,
|
||
title: "Sample Data Source",
|
||
color: "text-blue-500",
|
||
content: "Explore sample data sources to quickly integrate with ToolJet. Test features and workflows using predefined datasets."
|
||
},
|
||
{
|
||
icon: Folder,
|
||
title: "Datasource Library",
|
||
color: "text-blue-500",
|
||
content: "Browse ToolJet’s datasource library to connect with databases, APIs, and external services seamlessly."
|
||
},
|
||
{
|
||
icon: Wand2,
|
||
title: "Transformation",
|
||
color: "text-blue-500",
|
||
content: "Leverage ToolJet’s transformation capabilities to manipulate and format data from various sources with ease."
|
||
}
|
||
|
||
].map((item, index) => (
|
||
<Card key={index} className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-8">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 mb-5 rounded-lg bg-white shadow-md flex items-center justify-center transition-all duration-300 ease-in-out group-hover:shadow-lg">
|
||
<item.icon className={`w-6 h-6 ${item.color}`} />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500">
|
||
{item.content}
|
||
</p>
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Manage your organization section */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold">Manage your organization</h2>
|
||
<p className="text-sm text-gray-500">
|
||
Check out the different methods you can use to deploy ToolJet on your machine
|
||
</p>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{[
|
||
{ icon: LayoutDashboard, title: "Dashboard" },
|
||
{ icon: Users, title: "Workspaces" },
|
||
{ icon: UserCheck, title: "User authentication" },
|
||
{ icon: Lock, title: "Permissions" },
|
||
{ icon: UserPlus, title: "Users and groups" },
|
||
{ icon: ScrollText, title: "Audit logs" },
|
||
{ icon: Megaphone, title: "White label" },
|
||
{ icon: Gem, title: "Super admin" },
|
||
{ icon: Mail, title: "Licensing" }
|
||
].map((item, index) => (
|
||
<OrganizationCard key={index} icon={item.icon} title={item.title} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Manage releases section */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold">Manage releases</h2>
|
||
<p className="text-sm text-gray-500">
|
||
Check out the different methods you can use to deploy ToolJet on your machine
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
{[
|
||
{
|
||
icon: GitBranch,
|
||
title: "Git Sync",
|
||
color: "text-blue-500",
|
||
content: "Seamlessly sync your ToolJet projects with Git repositories, enabling version control and collaboration across teams."
|
||
},
|
||
{
|
||
icon: Box,
|
||
title: "Multi-Environment",
|
||
color: "text-blue-500",
|
||
content: "Easily manage and deploy applications across multiple environments, ensuring smooth transitions between development, staging, and production."
|
||
},
|
||
{
|
||
icon: GitMerge,
|
||
title: "Versioning and Release",
|
||
color: "text-blue-500",
|
||
content: "Implement version control and release management to track changes, roll back updates, and maintain stable app deployments."
|
||
}
|
||
|
||
].map((item, index) => (
|
||
<Card key={index} className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-8">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 mb-5 rounded-lg bg-white shadow-md flex items-center justify-center transition-all duration-300 ease-in-out group-hover:shadow-lg">
|
||
<item.icon className={`w-6 h-6 ${item.color}`} />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500">
|
||
{item.content}
|
||
</p>
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Additional resources section */}
|
||
<div className="space-y-6">
|
||
<h2 className="text-2xl font-bold">Additional resources</h2>
|
||
<p className="text-sm text-gray-500">
|
||
Check out the different methods you can use to deploy ToolJet on your machine
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
{[
|
||
{
|
||
icon: ShoppingBag,
|
||
title: "Marketplace",
|
||
color: "text-green-500",
|
||
content: "Discover a variety of plugins, templates, and extensions in ToolJet’s marketplace to enhance your app-building experience."
|
||
},
|
||
{
|
||
icon: Wand,
|
||
title: "Copilot",
|
||
color: "text-green-500",
|
||
content: "Boost productivity with ToolJet Copilot. Get AI-powered suggestions and assistance while building your applications."
|
||
},
|
||
{
|
||
icon: Flag,
|
||
title: "Tracking",
|
||
color: "text-green-500",
|
||
content: "Track app performance and user activity with built-in analytics tools, giving you valuable insights to optimize your applications."
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: "Security",
|
||
color: "text-green-500",
|
||
content: "Keep your data and applications safe with ToolJet’s robust security features, including encryption, authentication, and access control."
|
||
}
|
||
|
||
].map((item, index) => (
|
||
<Card key={index} className="transition-all duration-300 ease-in-out hover:shadow-lg cursor-pointer group relative">
|
||
<div className="p-8">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 mb-5 rounded-lg bg-white shadow-md flex items-center justify-center transition-all duration-300 ease-in-out group-hover:shadow-lg">
|
||
<item.icon className={`w-6 h-6 ${item.color}`} />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-sm text-gray-500">
|
||
{item.content}
|
||
</p>
|
||
</CardContent>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main> |