mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-02 02:47:27 +00:00
244 lines
No EOL
10 KiB
Text
244 lines
No EOL
10 KiB
Text
---
|
|
description: Custom Home Page
|
|
hide_table_of_contents: true
|
|
sidebar_label: Home
|
|
slug: /
|
|
---
|
|
|
|
import './homepage.css';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import gettingStartedImage from '../../src/pages/getting-started.png';
|
|
import {
|
|
featureCards,
|
|
setupCards,
|
|
deployOptions,
|
|
dataCards,
|
|
organizationCards,
|
|
releaseCards,
|
|
resourceCards
|
|
} from './homePageData';
|
|
|
|
{/* // 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>
|
|
);
|
|
|
|
export const SectionContainer = ({ title, description, children }) => (
|
|
<section className="space-y-6">
|
|
<h2 className="text-2xl font-bold">{title}</h2>
|
|
<p className="text-sm text-gray-500">{description}</p>
|
|
{children}
|
|
</section>
|
|
);
|
|
|
|
{/* // 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 */}
|
|
<SectionContainer
|
|
title="Setup ToolJet"
|
|
description="Check out the different methods you can use to deploy ToolJet on your machine"
|
|
>
|
|
<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>
|
|
</SectionContainer>
|
|
|
|
{/* Deploy on Section */}
|
|
<SectionContainer title="Deploy on">
|
|
<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>
|
|
</SectionContainer>
|
|
|
|
{/* 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 */}
|
|
<SectionContainer
|
|
title="Bring your data to ToolJet"
|
|
description="Check out the different methods you can use to deploy ToolJet on your machine"
|
|
>
|
|
<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>
|
|
</SectionContainer>
|
|
|
|
{/* Manage your organization section */}
|
|
|
|
<SectionContainer
|
|
title="Manage your organization"
|
|
description="Check out the different methods you can use to deploy ToolJet on your machine"
|
|
>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{organizationCards.map((card, index) => (
|
|
<SmallCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</SectionContainer>
|
|
|
|
{/* Manage releases section */}
|
|
|
|
<SectionContainer
|
|
title="Manage releases"
|
|
description="Check out the different methods you can use to deploy ToolJet on your machine"
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{releaseCards.map((card, index) => (
|
|
<IconCard key={index} {...card} />
|
|
))}
|
|
</div>
|
|
</SectionContainer>
|
|
|
|
{/* Additional resources section */}
|
|
|
|
<SectionContainer
|
|
title="Additional resources"
|
|
description="Check out the different methods you can use to deploy ToolJet on your machine"
|
|
>
|
|
<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>
|
|
</SectionContainer>
|
|
</div>
|
|
</div>
|
|
</main> |