mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-27 00:17:18 +00:00
30ff55cbc5
* test changes * add changes * fix * add sidebar/styles * fix padding * fix style * fix bg * fix tooljet documentation section * fix indent * add back image * fix image * fix Setup ToolJet Section * fix cards * update manage org * deploy card * update markdown * fix style * fix id * fix style * move to correct tab * contain styles * fix styles * fix padding * refactor code * revert/remove changes * update slug
296 lines
No EOL
16 KiB
Text
296 lines
No EOL
16 KiB
Text
---
|
|
description: Custom Home Page
|
|
hide_table_of_contents: true
|
|
sidebar_label: Home
|
|
slug: /
|
|
---
|
|
|
|
|
|
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 './homepage.css';
|
|
import gettingStartedImage from '../../src/pages/getting-started.png';
|
|
|
|
{/* // Reusable components */}
|
|
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 IconCard = ({ icon: Icon, title, content, color }) => (
|
|
<Card 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">
|
|
<Icon className={`w-6 h-6 ${color}`} />
|
|
</div>
|
|
<CardTitle>{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-gray-500">{content}</p>
|
|
</CardContent>
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
export const SmallCard = ({ 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>
|
|
);
|
|
|
|
{/* Data */}
|
|
export const featureCards = [
|
|
{ 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." }
|
|
];
|
|
|
|
export const setupCards = [
|
|
{ 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." }
|
|
];
|
|
|
|
export const deployOptions = [
|
|
{ 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)" },
|
|
];
|
|
|
|
export const dataCards = [
|
|
{ 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." }
|
|
];
|
|
|
|
export const organizationCards = [
|
|
{ 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" }
|
|
];
|
|
|
|
export const releaseCards = [
|
|
{ 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." }
|
|
];
|
|
|
|
export const resourceCards = [
|
|
{ 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." }
|
|
];
|
|
|
|
{/* // Main component */}
|
|
|
|
#
|
|
<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 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%)'
|
|
}}
|
|
/>
|
|
|
|
{/* 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">
|
|
{featureCards.map((card, index) => (
|
|
<IconCard key={index} {...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={gettingStartedImage}
|
|
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 */}
|
|
<section 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">
|
|
{setupCards.map((card, index) => (
|
|
<IconCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Deploy on Section */}
|
|
<section 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">
|
|
{deployOptions.map((option, index) => (
|
|
<SmallCard key={index} {...option} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 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 */}
|
|
<section 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">
|
|
{dataCards.map((card, index) => (
|
|
<IconCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manage your organization section */}
|
|
<section 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">
|
|
{organizationCards.map((card, index) => (
|
|
<SmallCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Manage releases section */}
|
|
<section 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">
|
|
{releaseCards.map((card, index) => (
|
|
<IconCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Additional resources section */}
|
|
<section 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">
|
|
{resourceCards.map((card, index) => (
|
|
<IconCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main> |