---
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>