Skip to content

Commit dc6466e

Browse files
hcourdentrubenfiszel
hcourdent
and
rubenfiszel
authored
Solution pages & visuals (windmill-labs#298)
* Add sb page * Visuals & solution pages --------- Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
1 parent 8ac8e37 commit dc6466e

21 files changed

+592
-2
lines changed

‎src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
8888
}
8989

9090
h1 {
91-
@apply !text-3xl !font-bold dark:text-white;
91+
@apply !text-3xl !font-bold text-gray-900 dark:text-white;
9292
}
9393

9494
.markdown h1 {

‎src/landing/Footer.jsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ const navigation = {
3030
</svg>
3131
)
3232
}
33+
],
34+
solutions: [
35+
{ name: 'Supabase', href: '/solutions/supabase' },
36+
{ name: 'Hubspot', href: '/solutions/hubspot' },
37+
{ name: 'Airtable', href: '/solutions/airtable' },
3338
]
3439
};
3540

@@ -43,7 +48,7 @@ export default function Footer() {
4348
<div className="flex flex-row-reverse flex-wrap justify-between gap-8 lg:gap-20">
4449
<div></div>
4550

46-
<div className="mx-auto grid grid-cols-3 gap-20">
51+
<div className="mx-auto grid grid-cols-4 gap-20">
4752
<div className="">
4853
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
4954
Support
@@ -61,6 +66,23 @@ export default function Footer() {
6166
))}
6267
</ul>
6368
</div>
69+
<div className="">
70+
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
71+
Solutions
72+
</h3>
73+
<ul role="list" className="mt-6 space-y-4">
74+
{navigation.solutions.map((item) => (
75+
<li key={item.name}>
76+
<a
77+
href={item.href}
78+
className="text-sm leading-6 text-gray-600 hover:text-gray-900 dark:text-gray-200"
79+
>
80+
{item.name}
81+
</a>
82+
</li>
83+
))}
84+
</ul>
85+
</div>
6486
<div>
6587
<h3 className="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
6688
Company

‎src/pages/solutions/airtable.tsx

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import React from 'react';
2+
import LandingSection from '../../landing/LandingSection';
3+
import LandingHeader from '../../landing/LandingHeader';
4+
import Footer from '../../landing/Footer';
5+
import { ArrowRight, PlusSquareIcon, CopyIcon, ArrowLeftCircleIcon, ListIcon, RefreshCcwIcon, DeleteIcon } from 'lucide-react';
6+
import LayoutProvider from '@theme/Layout/Provider';
7+
import { Helmet } from 'react-helmet-async';
8+
import { useColorMode } from '@docusaurus/theme-common';
9+
10+
11+
function Screenshot({darkScreenshot, lightScreenshot}) {
12+
const { colorMode } = useColorMode();
13+
const screenshot = colorMode === 'dark' ? darkScreenshot :lightScreenshot
14+
15+
return (
16+
<img
17+
src={screenshot}
18+
className="w-full rounded-lg"
19+
/>
20+
)
21+
}
22+
23+
export default function Content() {
24+
const color = '#E9B13D';
25+
const name = "Airtable"
26+
const website = "https://www.airtable.com/"
27+
const windmill_color = '#4E80EE';
28+
29+
const data = {
30+
title: `Build internal tools with ${name}`,
31+
subtitle: `Windmill unlocks your creation of internal tools with ${name}. From scripts, build admin panels, BI dashboards, workflows, and more.`,
32+
description: (
33+
<div className="flex flex-col gap-4">
34+
<p>
35+
<a href={website} target="_blank">
36+
<strong><span style={{ color }}>{name}</span></strong>
37+
</a> is a comprehensive inbound marketing, sales, and CRM platform.
38+
</p>
39+
<p>Connecting Windmill to <span> {name}</span> takes a few seconds and lets you build internal tools from it and integrate with any other platform.</p>
40+
<p>From scripts supported in multiple languages, build UIs and flows that you can monitor and trigger on demand, by schedule or webhooks.</p>
41+
</div>
42+
),
43+
darkScreenshot: '/integrations/solutions_dark.png',
44+
lightScreenshot: '/integrations/solutions_light.png',
45+
documentationLink: 'https://docs.windmillui.com/',
46+
message_postgres: (
47+
<div className="flex flex-col gap-4">
48+
<p>Windmill also supports <a href="/docs/getting_started/scripts_quickstart/sql" target="_blank">
49+
<strong><span style={{ windmill_color }}>PostgreSQL</span></strong>
50+
</a> as a language. For
51+
<span> { name}</span>, this means you can connect your database via the Postgres protocol and execute any SQL query from your internal tools.
52+
</p>
53+
</div>
54+
),
55+
integrations_sub_title: `Write any script, flow or app targeting ${name} API, or pick them from WindmillHub community library.`,
56+
hubIntegrations: [
57+
{
58+
title: 'Create Single Record',
59+
link: 'https://hub.windmill.dev/scripts/airtable/302/create-single-record-airtable',
60+
description: "Add a new record to an Airtable base.",
61+
icon: PlusSquareIcon
62+
},
63+
{
64+
title: 'Create Multiple Records',
65+
description: "Add multiple new records to an Airtable base.",
66+
link: 'https://hub.windmill.dev/scripts/airtable/298/create-multiple-records-airtable',
67+
icon: CopyIcon
68+
},
69+
{
70+
title: 'Get Record',
71+
link: 'https://hub.windmill.dev/scripts/airtable/303/get-record-airtable',
72+
description: "Retrieve a specific record from an Airtable base.",
73+
icon: ArrowLeftCircleIcon
74+
},
75+
{
76+
title: 'List Records',
77+
link: 'https://hub.windmill.dev/scripts/airtable/300/list-records-airtable',
78+
description: "List all or specific records from an Airtable base.",
79+
icon: ListIcon
80+
},
81+
{
82+
title: 'Update record',
83+
link: 'https://hub.windmill.dev/scripts/airtable/301/update-record-airtable',
84+
description: "Update a specific record in an Airtable base.",
85+
icon: RefreshCcwIcon
86+
},
87+
{
88+
title: 'Delete Record',
89+
link: 'https://hub.windmill.dev/scripts/airtable/304/delete-record-airtable',
90+
description: "Remove a record from an Airtable base.",
91+
icon: DeleteIcon
92+
},
93+
]
94+
};
95+
96+
return (
97+
<LayoutProvider>
98+
<main>
99+
<Helmet>
100+
<title>{name} | Windmill</title>
101+
<meta name={data.title} content={data.subtitle} />
102+
<meta name={data.title} content={data.subtitle} />
103+
</Helmet>
104+
<LandingHeader />
105+
<LandingSection bgClass="relative">
106+
<div className="max-w-6xl mx-auto px-4 sm:px-6">
107+
<div className="py-12 md:py-20">
108+
<div className=" pb-12 md:pb-20">
109+
<h1
110+
className="leading-10 mb-2 !text-4xl text-gray-900 dark:text-white"
111+
style={{
112+
color: color
113+
}}
114+
>
115+
{data.title}
116+
</h1>
117+
<p className="text-md text-gray-600 dark:text-gray-400">{data.subtitle}</p>
118+
</div>
119+
<div className="grid grid-cols-2 gap-2">
120+
<div className="flex items-start flex-col justify-center gap-6">
121+
<div className="text-lg font-normal text-gray-800 dark:text-gray-200">{data.description}</div>
122+
<div className="flex flex-row gap-2">
123+
<a
124+
type="button"
125+
tag="no_follow"
126+
href="https://app.windmill.dev/user/login"
127+
target="_blank"
128+
className="flex items-center gap-2 rounded-md bg-[#4285F4] px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
129+
>
130+
Start building with {name}
131+
<ArrowRight className="" aria-hidden="true" />
132+
</a>
133+
<a
134+
type="button"
135+
href={`/docs/integrations/${name}`}
136+
target="_blank"
137+
className="flex items-center gap-2 rounded-md bg-blue-50 px-4 py-2 text-sm font-semibold text-gray-900 hover:text-gray-900 hover:bg-blue-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
138+
>
139+
Documentation
140+
<ArrowRight className="" aria-hidden="true" />
141+
</a>
142+
</div>
143+
</div>
144+
<div className="w-full">
145+
<Screenshot lightScreenshot={data.lightScreenshot} darkScreenshot={data.darkScreenshot}/>
146+
</div>
147+
</div>
148+
</div>
149+
150+
151+
<div className="py-12 md:py-20">
152+
<h2 className="leading-8 mb-8">
153+
<p> Scripts for
154+
<span style={{color}}> { name}</span>
155+
</p>
156+
<p className="text-base font-normal text-gray-500 dark:text-gray-400">{data.integrations_sub_title}</p>
157+
</h2>
158+
<div className="grid grid-cols-3 gap-8 grid-rows-8">
159+
{data.hubIntegrations.map((integration) => (
160+
<div>
161+
<div className="bg-blue-100 text-blue-900 rounded-full p-2 w-8">
162+
<integration.icon size={16} />
163+
</div>
164+
<div className="font-semibold leading-6 text-sm text-gray-700 dark:text-white">{integration.title}</div>
165+
<div className="text-sm text-gray-700 dark:text-white"> {integration.description} </div>
166+
<a
167+
type="button"
168+
href={integration.link}
169+
target="_blank"
170+
className="rounded py-1 text-xs font-semibold text-gray-400 hover:text-blue-800 flex flex-row gap-2 dark:text-gray-400"
171+
>
172+
View on the Hub
173+
<ArrowRight size={16} className="" aria-hidden="true" />
174+
</a>
175+
</div>
176+
))}
177+
</div>
178+
</div>
179+
</div>
180+
</LandingSection>
181+
<Footer />
182+
</main>
183+
</LayoutProvider>
184+
);
185+
}

0 commit comments

Comments
 (0)