2024-09-19 11:27:53 +00:00
---
description: Custom Home Page
hide_table_of_contents: true
full_width: true
sidebar_label: Platform Overview
---
2024-08-26 07:33:01 +00:00
import {
Grid3x3, Database, Workflow, ArrowRight, Cog, Target, Scale,
Layers, FileSpreadsheet, Folder, Wand2, LayoutGrid, Users, UserCheck,
Lock, UsersRound, ClipboardList, Megaphone, Diamond, GitBranch,
2024-09-19 09:44:25 +00:00
Box, GitMerge, ShoppingBag, Wand, Flag, ShieldCheck, LayoutDashboard,
UserPlus, ScrollText, Gem, Mail, ChevronLeft, ChevronDown, ChevronRight, Cloud, Container, Boxes, Server, Telescope, Globe
2024-08-26 07:33:01 +00:00
} from 'lucide-react'
import '../../../src/css/global.css'
2024-09-19 09:44:25 +00:00
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>
)
2024-08-26 07:33:01 +00:00
export const Card = ({ className = '', children }) => (
2024-09-19 09:44:25 +00:00
<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>
2024-08-26 07:33:01 +00:00
</div>
);
2024-09-19 09:44:25 +00:00
2024-08-26 07:33:01 +00:00
export const CardHeader = ({ className = '', children }) => (
2024-09-19 09:44:25 +00:00
<div className={`flex flex-col space-y-1.5 ${className}`}>
2024-08-26 07:33:01 +00:00
{children}
</div>
);
export const CardContent = ({ className = '', children }) => (
2024-09-19 09:44:25 +00:00
<div className={` pt-2 ${className}`}>
2024-08-26 07:33:01 +00:00
{children}
</div>
);
export const CardTitle = ({ className = '', children }) => (
2024-09-19 09:44:25 +00:00
<h3 className={`text-xl font-semibold leading-none tracking-tight ${className}`}>
2024-08-26 07:33:01 +00:00
{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>
);
2024-09-19 09:44:25 +00:00
}
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
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>
);
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
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: `
2024-08-26 07:33:01 +00:00
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)
`,
2024-09-19 09:44:25 +00:00
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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
<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>
))}
2024-08-26 07:33:01 +00:00
</div>
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
</div>
</div>
2024-09-19 09:44:25 +00:00
</div>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
<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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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’
},
{
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’
},
{
icon: Wand2,
title: "Transformation",
color: "text-blue-500",
content: "Leverage ToolJet’
}
].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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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>
2024-08-26 07:33:01 +00:00
2024-09-19 09:44:25 +00:00
{/* 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’
},
{
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’
}
].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>
2024-08-26 07:33:01 +00:00
</div>
2024-09-19 09:44:25 +00:00
</main>
