Skip to content

Commit 4f546e1

Browse files
fatonramadanifatonramadani
authored
Landing improvements (windmill-labs#569)
* Display all changelogs in a single page * Improve feature pages * Improve feature pages * Improve feature pages * feat(frontend): update illustrations * feat(frontend): add link to shorter demo
1 parent badb975 commit 4f546e1

17 files changed

+213
-51
lines changed

‎src/landing/AppLightSection.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -573,7 +573,7 @@ export default function AppsLightSections() {
573573
<div className="!flex !flex-col gap-8">
574574
<CardSection
575575
colors={colors}
576-
title="Build fast apps using drag and drop"
576+
title="Build fast apps using drag-and-drop"
577577
description="Create apps with a user-friendly drag-and-drop interface, streamlining app development without deep coding."
578578
features={features}
579579
defaultImage="/illustrations/fond-apps.png"
@@ -588,11 +588,11 @@ export default function AppsLightSections() {
588588
<div className="group-hover:ml-2 transition-all">
589589
<div className="font-normal text-xl mb-6 flex flex-row items-center ">
590590
<Puzzle size={20} className="mr-2" />
591-
{'50 built-in components'}
591+
{'60+ built-in components'}
592592
</div>
593593
<div className="text-md mb-4 max-w-lg">
594594
{
595-
'Use over 50 built-in components for fast and efficient app development, covering a wide range of functionalities.'
595+
'Use over 60 built-in components for fast and efficient app development, covering a wide range of functionalities.'
596596
}
597597
</div>
598598

@@ -605,14 +605,14 @@ export default function AppsLightSections() {
605605
<div className="col-span-2">
606606
<div className="relative w-full bg-orange-900 rounded-lg p-6 h-96">
607607
<div className="border-orange-600 border-2 relative rounded-lg p-4 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] overflow-hidden overflow-y-scroll">
608-
<div className="flex flex-row flex-wrap gap-8 justify-center">
608+
<div className="grid grid-cols-8 gap-4">
609609
{components.map((item, index) => (
610610
<a
611611
href={item.documentationLink}
612-
className="w-48 h-28 rounded-md border flex justify-center items-center gap-2 flex-col bg-white hover:bg-gray-50 !text-gray-900"
612+
className="col-span-1 h-28 rounded-md border flex justify-center items-center gap-2 flex-col bg-white hover:bg-gray-50 !text-gray-900"
613613
>
614-
<item.Icon size={40} />
615-
<div className="text-lg">{item.name}</div>
614+
<item.Icon size={32} />
615+
<div className="text-xs text-center">{item.name}</div>
616616
</a>
617617
))}
618618
</div>

‎src/landing/AppSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const tabs = [
5454
<div>
5555
Quickly start building complex apps using our{' '}
5656
<a href="/docs/apps/app_configuration_settings/app_component_library" target="_blank">
57-
50 built-in components
57+
60+ built-in components
5858
</a>
5959
.
6060
</div>

‎src/landing/CallToAction.jsx

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
11
import React from 'react';
2+
import { useColorMode } from '@docusaurus/theme-common';
3+
4+
export default function CallToAction({ color }) {
5+
const { colorMode } = useColorMode();
6+
7+
const colorMap = {
8+
blue: {
9+
light: '#bfdbfe',
10+
dark: '#3b82f6'
11+
},
12+
orange: {
13+
light: '#fb923c',
14+
dark: '#7c2d12'
15+
},
16+
green: {
17+
light: '#bbf7d0',
18+
dark: '#10b981'
19+
}
20+
};
21+
22+
const c = colorMap[color ?? 'blue'][colorMode];
223

3-
export default function CallToAction() {
424
return (
525
<div className="w-full py-16">
626
<div className="">
@@ -52,8 +72,8 @@ export default function CallToAction() {
5272
gradientUnits="userSpaceOnUse"
5373
gradientTransform="translate(512 512) rotate(90) scale(512)"
5474
>
55-
<stop stopColor="#3b82f6" />
56-
<stop offset={1} stopColor="#3b82f6" stopOpacity={0} />
75+
<stop stopColor={c} />
76+
<stop offset={1} stopColor={c} stopOpacity={0} />
5777
</radialGradient>
5878
</defs>
5979
</svg>

‎src/landing/FlowLightSection.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,41 @@ const features = [
5151
description:
5252
'Build, version, and manage your workflows as code with the Windmill SDK. Use your favorite IDE, version control system, and CI/CD pipeline to manage your workflows.',
5353

54+
code: `from wmill import task
55+
56+
import pandas as pd
57+
import numpy as np
58+
59+
# The pin is important since task is a decorator available only from 1.286.2
60+
61+
#extra_requirements:
62+
#wmill>=1.286.2
63+
64+
65+
@task()
66+
# You can specify tag to run the task on a specific type of worker, e.g. @task(tag="custom_tag")
67+
def heavy_compute(n: int):
68+
df = pd.DataFrame(np.random.randn(100, 4), columns=list('ABCD'))
69+
return df.sum().sum()
70+
71+
72+
@task
73+
def send_result(res: int, email: str):
74+
# logs of the subtask are available in the main task logs
75+
print(f"Sending result {res} to {email}")
76+
return "OK"
77+
78+
def main(n: int):
79+
l = []
80+
81+
# to run things in parallel, simply use multiprocessing Pool map instead: https://docs.python.org/3/library/multiprocessing.html
82+
for i in range(n):
83+
l.append(heavy_compute(i))
84+
print(l)
85+
return send_result(sum(l), "example@example.com")
86+
`,
5487
Icon: TerminalSquare,
55-
defaultImage: '/illustrations/workflow_as_code.png',
88+
5689
url: '/docs/core_concepts/workflows_as_code',
5790
vertical: true
5891
},

‎src/landing/Footer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function Footer() {
8787
<div className="flex justify-between items-center flex-col md:flex-row gap-8">
8888
<div className="flex items-center">
8989
<img className="h-16 mr-3" src="/img/windmill.svg" alt="Windmill Labs" />
90-
<p className="text-sm leading-6 text-gray-600 dark:text-gray-400">
90+
<p className="text-xs leading-2 text-gray-800 dark:text-gray-200 text-opacity-60">
9191
Made with passion in <br />
9292
San Francisco and Paris.
9393
</p>
@@ -99,7 +99,7 @@ export default function Footer() {
9999
alt="SOC Compliance badge"
100100
loading="lazy"
101101
/>
102-
<p className="text-xs text-left leading-6 text-gray-400 ml-2">
102+
<p className="text-xs text-left leading-6 text-gray-800 dark:text-gray-200 text-opacity-60 ml-2">
103103
Windmill Labs is SOC 2 Type II compliant.
104104
</p>
105105
</div>
@@ -134,7 +134,7 @@ export default function Footer() {
134134
</a>
135135
</div>
136136
</div>
137-
<p className="text-left text-xs leading-4 tracking-tight text-black hover:text-black dark:text-white text-opacity-60 hover:text-opacity-100">
137+
<p className="text-left text-xs leading-4 tracking-tight text-gray-800 dark:text-gray-200 text-opacity-60 hover:text-opacity-100">
138138
&copy; 2024 Windmill Labs, Inc. All rights reserved. 1111B S Governors Ave, Dover, DE
139139
19904, USA
140140
</p>

‎src/landing/HeroExample.tsx

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import React, { useEffect, useState } from 'react';
22
import LandingSection from './LandingSection';
3-
import { Code, LayoutDashboard, List, PlayCircle } from 'lucide-react';
3+
import {
4+
Code,
5+
ExternalLink,
6+
FastForward,
7+
LayoutDashboard,
8+
List,
9+
Play,
10+
PlayCircle
11+
} from 'lucide-react';
412
import { VolumeX } from 'lucide-react';
513

614
const tabs = [
@@ -40,28 +48,46 @@ export default function HeroExample() {
4048
}, [played]);
4149

4250
return (
43-
<LandingSection bgClass="">
44-
<div className="w-full gap-8 flex flex-col">
45-
<h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-slate-500 to-slate-800 dark:from-slate-100 dark:to-slate-500 ">
46-
Give your scripts Superpowers
47-
</h1>
48-
<p className="max-w-5xl text-lg">
49-
Make your scripts production grade and build all of your internal tools with Python,
50-
Typescript, Go, Bash, Sql. <br /> Compose your scripts as workflows using low-code. <br />
51-
Share an autogenerated UI or build one using low-code. Run it reliably at scale on your
52-
infra or ours, with permissioning and monitoring included. Fully open-source and easy to
53-
deploy on small and large infra. Any dependency with zero-config.
54-
</p>
55-
<div className="video-container">
56-
<iframe
57-
src="https://www.youtube.com/embed/IOvzHJ2BHl8"
58-
title="YouTube video player"
59-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
60-
allowFullScreen={true}
61-
className="rounded-xl"
62-
></iframe>
51+
<div className="relative">
52+
<LandingSection bgClass="">
53+
<div className="w-full gap-6 flex flex-col">
54+
<h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-slate-500 to-slate-800 dark:from-slate-100 dark:to-slate-500 ">
55+
Give your scripts Superpowers
56+
</h1>
57+
<p className="max-w-5xl text-lg">
58+
Make your scripts production grade and build all of your internal tools with Python,
59+
Typescript, Go, Bash, Sql. <br /> Compose your scripts as workflows using low-code.{' '}
60+
<br />
61+
Share an autogenerated UI or build one using low-code. Run it reliably at scale on your
62+
infra or ours, with permissioning and monitoring included. Fully open-source and easy to
63+
deploy on small and large infra. Any dependency with zero-config.
64+
</p>
65+
<div className="flex flex-row justify-end w-full gap-4 items-center">
66+
<div className="flex flex-col gap-1">
67+
<div className="text-sm font-medium ">{'Short on time?'}</div>
68+
<div className="text-xs">{'Check out our 2-minute tour!'}</div>
69+
</div>
70+
<a
71+
href="https://www.youtube.com/watch?v=IOvzHJ2BHl8"
72+
target="_blank"
73+
rel="noreferrer"
74+
className="h-8 text-xs font-medium !text-white bg-blue-600 !no-underline flex flex-row gap-1 items-center rounded-md justify-center py-1 px-2 hover:bg-opacity-80 transition-all"
75+
>
76+
{'Watch Now'}
77+
<ExternalLink size={16} className="text-white" />
78+
</a>
79+
</div>
80+
<div className="video-container">
81+
<iframe
82+
src="https://www.youtube.com/embed/IOvzHJ2BHl8"
83+
title="YouTube video player"
84+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
85+
allowFullScreen={true}
86+
className="rounded-xl"
87+
></iframe>
88+
</div>
6389
</div>
64-
</div>
65-
</LandingSection>
90+
</LandingSection>
91+
</div>
6692
);
6793
}

‎src/landing/LightFeatureCard.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { useLottie } from 'lottie-react';
33
import { ArrowRight, CircleIcon, LucideIcon } from 'lucide-react';
44
import { twMerge } from 'tailwind-merge';
55
import FlowChart from './FlowChart';
6-
6+
import SyntaxHighlighter from 'react-syntax-highlighter';
7+
import { light } from 'react-syntax-highlighter/dist/esm/styles/hljs';
78
type FeatureCardProps = {
89
feature: { title: string; description: string; images: string[] };
910
animationDelay: number;
@@ -19,6 +20,7 @@ type FeatureCardProps = {
1920
vertical?: boolean;
2021
spanOverride?: string | undefined;
2122
Component?: React.FC;
23+
code?: string;
2224
};
2325

2426
export default function LightFeatureCard({
@@ -33,7 +35,8 @@ export default function LightFeatureCard({
3335
spanOverride,
3436
autoplay = false,
3537
loop = true,
36-
vertical = false
38+
vertical = false,
39+
code = undefined
3740
}: FeatureCardProps) {
3841
const options = {
3942
animationData: lottieData,
@@ -74,7 +77,20 @@ export default function LightFeatureCard({
7477
</div>
7578
) : (
7679
<>
77-
{Component ? (
80+
{code ? (
81+
<div className="relative w-full bg-emerald-900 rounded-lg p-6 h-72">
82+
<div className="border-emerald-600 border-2 relative h-full w-full bg-white overflow-hidden overflow-y-scroll">
83+
<SyntaxHighlighter
84+
language="javascript"
85+
style={light}
86+
className="rounded-none text-xs col-span-4 !font-light !bg-white overflow-hidden "
87+
showLineNumbers
88+
>
89+
{code}
90+
</SyntaxHighlighter>
91+
</div>
92+
</div>
93+
) : Component ? (
7894
<Component />
7995
) : lottieData ? (
8096
<div

‎src/landing/TutorialSection.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ export default function TutorialSection() {
182182
)}
183183
</div>
184184
</div>
185+
185186
<div className="relative">
186187
{animationEnabled === false && (
187188
<div className="absolute top-0 left-0 w-full h-full flex flex-row items-center justify-center z-50">
@@ -243,19 +244,19 @@ export default function TutorialSection() {
243244
</div>
244245
</div>
245246
</div>
247+
<div className="h-20 w-full flex justify-center my-2 py-2">
248+
<ArrowLongDownIcon className="text-gray-200 dark:text-gray-700" />
249+
</div>
246250
</SmoothScroll>
247251
)}
248252
</BrowserOnly>
249253

250254
<div className="max-w-7xl px-6 lg:px-8 mx-auto flex justify-center items-center h-full flex-col">
251-
<div className="h-20 w-full flex justify-center my-2 py-2">
252-
<ArrowLongDownIcon className="text-gray-200 dark:text-gray-700" />
253-
</div>
254-
<div className="dark:bg-gray-900 bg-gray-50 w-full p-8 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8">
255+
<div className="dark:bg-gray-900 bg-gray-50 w-full p-8 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8 mt-24">
255256
<a
256257
href="/docs/core_concepts/draft_and_deploy#diff-viewer"
257258
target="_blank"
258-
className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer"
259+
className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer "
259260
>
260261
<div className="font-medium text-xl mb-6 group-hover:ml-2 transition-all flex flex-row items-center gap-2 ">
261262
<GitCompareArrows size={20} />

‎src/landing/cards-v2/CardSection.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default function CardSection({ features, colors, title, description, defa
5454
loop={feature?.loop}
5555
vertical={feature?.vertical}
5656
Component={feature?.Component}
57+
code={feature?.code}
5758
/>
5859
))}
5960
</div>

‎src/pages/apps.jsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import LayoutProvider from '@theme/Layout/Provider';
77
import CallToAction from '../landing/CallToAction';
88
import LogoClouds from '../landing/LogoClouds';
99
import RadialBlur from '../landing/RadialBlur';
10+
import Window from '../landing/animations/Window';
1011

1112
export default function AppsPage() {
1213
return (
@@ -22,12 +23,32 @@ export default function AppsPage() {
2223
</Head>
2324
<RadialBlur color="orange" />
2425
<LandingHeader />
26+
<div className="max-w-7xl px-6 lg:px-8 mx-auto flex justify-center h-full mt-20 flex-col gap-8">
27+
<div
28+
className={`text-orange-900 dark:text-orange-300 text-5xl text-left font-normal tracking-tight leading-12 mb-2 pt-8`}
29+
>
30+
{'Develop and iterate with instant feedback'}
31+
</div>
32+
<div className="bg-gradient-to-br from-orange-200 to-orange-400 dark:from-orange-700 dark:to-orange-600 w-full rounded-lg p-6 shadow-inner overflow-hidden h-[550px]">
33+
<Window
34+
shouldRender={true}
35+
name="Apps | Windmill"
36+
icon="/third_party_logos/firefox.svg"
37+
>
38+
<img
39+
src="/images/app_example.png"
40+
alt="Apps"
41+
className="w-full object-cover object-left-top"
42+
/>
43+
</Window>
44+
</div>
45+
</div>
2546
<div className="mt-16">
2647
<AppLightSection />
2748
</div>
2849
<LogoClouds />
2950
<div className="max-w-7xl px-6 lg:px-8 mx-auto flex justify-center items-center h-full ">
30-
<CallToAction />
51+
<CallToAction color="orange" />
3152
</div>
3253
<Footer />
3354
</main>

0 commit comments

Comments
 (0)