Skip to content

Commit e368962

Browse files
fatonramadanifatonramadani
authored
Landing mobile improvement (windmill-labs#573)
* Display all changelogs in a single page * Improve mobile landing * Improve features pages * Fix tabs * Improve mobile view
1 parent 12e4ead commit e368962

18 files changed

+310
-36
lines changed

‎src/components/FAQ.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const faqs = [
4242

4343
export default function FAQ() {
4444
return (
45-
<div className="max-w-7xl mx-auto px-4 sm:py-16 sm:px-6 lg:px-8">
45+
<div className="max-w-7xl mx-auto px-4 sm:py-16 sm:px-4 lg:px-8">
4646
<div className="max-w-3xl mx-auto divide-y-2 divide-gray-200">
4747
<h2 className="text-center text-3xl font-bold text-gray-900 sm:text-4xl">
4848
Frequently asked questions

‎src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ a {
233233
@apply mx-auto max-w-md px-4;
234234
@apply text-center;
235235
@apply sm:max-w-3xl lg:max-w-7xl;
236-
@apply sm:px-6 lg:px-8;
236+
@apply sm:px-4 lg:px-8;
237237
@apply mb-12;
238238
}
239239

‎src/landing/AppLightSection.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,11 @@ function DragAndDropAnimation() {
9595
style={{ position: 'absolute', zIndex: 1000 }}
9696
>
9797
<div className="bg-white">
98-
<Hand fill="white" />
98+
<Hand className="text-gray-900 dark:white" />
9999
</div>
100100
</motion.div>
101101
<div className="absolute top-40">
102-
<div className="divide-y flex flex-col border rounded-md overflow-hidden">
102+
<div className="divide-y flex flex-col border rounded-md overflow-hidden text-gray-900">
103103
<div className="divide-x flex flex-row">
104104
<div className="py-1 px-2 bg-gray-50 w-40">Product Name</div>
105105
<div className="py-1 px-2 bg-gray-50 w-24">Price</div>

‎src/landing/LandingHeader.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function LandingHeader() {
7171

7272
return (
7373
<div className="w-full fixed z-[1000] bg-white dark:bg-gray-950 shadow-sm">
74-
<Popover className="relative bg-opacity-90 z-50 max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
74+
<Popover className="relative bg-opacity-90 z-50 max-w-7xl mx-auto py-3 px-3 sm:px-4 lg:px-8">
7575
<div className="flex items-center justify-between md:justify-start md:space-x-10">
7676
<Link
7777
to="/"

‎src/landing/LandingSection.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function LandingSection({
1212
transition={{ duration: 0.5, ease: 'easeInOut' }}
1313
className={`w-full h-full py-16 overflow-x-hidden ${bgClass}`}
1414
>
15-
<div className="max-w-7xl px-6 lg:px-8 mx-auto flex justify-center items-center h-full ">
15+
<div className="max-w-7xl px-4 lg:px-8 mx-auto flex justify-center items-center h-full ">
1616
{children}
1717
</div>
1818
</motion.div>

‎src/landing/LandingSectionWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export default function LandingSectionWrapper({
7070
/>
7171
</div>
7272

73-
<div className="max-w-7xl px-6 lg:px-8 mx-auto flex justify-center items-center h-full">
73+
<div className="max-w-7xl px-4 lg:px-8 mx-auto flex justify-center items-center h-full">
7474
{children}
7575
</div>
7676
</div>

‎src/landing/LightFeatureCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function LightFeatureCard({
4949
return (
5050
<a
5151
className={twMerge(
52-
`text-black dark:text-white !no-underline hover:text-black hover:dark:text-white bg-gray-50 dark:bg-gray-900 rounded-lg overflow-hidden ${span} group cursor-pointer p-8 relative grid gap-4 hover:bg-opacity-50 transition-all h-max `,
52+
`text-black dark:text-white !no-underline hover:text-black hover:dark:text-white bg-gray-50 dark:bg-gray-900 rounded-lg overflow-hidden ${span} group cursor-pointer p-4 md:p-8 relative grid gap-4 hover:bg-opacity-50 transition-all h-max `,
5353
spanOverride ?? (vertical ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2')
5454
)}
5555
onMouseOver={() => {

‎src/landing/LogoClouds.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function LogoClouds() {
5353

5454
return (
5555
<div className="py-24 sm:py-32">
56-
<div className="mx-auto max-w-7xl px-6 lg:px-8">
56+
<div className="mx-auto max-w-7xl px-4 lg:px-8">
5757
<h2 className="text-center text-lg font-semibold leading-8 text-gray-900/60">
5858
Trusted by 1000+ organizations, including:
5959
</h2>

‎src/landing/MobileTutorialSection.tsx

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import React, { useEffect } from 'react';
2+
import AnimationCarousel from './animations/AnimationCarousel';
3+
4+
import { Activity, GitCompareArrows, Server, ArrowRight } from 'lucide-react';
5+
6+
import { Lottie } from './LightFeatureCard';
7+
// @ts-ignore
8+
import deployAtScale from '/illustrations/deploy_at_scale.json';
9+
import { ArrowLongDownIcon } from '@heroicons/react/20/solid';
10+
import Window from './animations/Window';
11+
import { twMerge } from 'tailwind-merge';
12+
13+
export default function TutorialSection() {
14+
const containerRef = React.useRef<HTMLDivElement>(null);
15+
16+
const [currentIndex, setCurrentIndex] = React.useState(0);
17+
18+
return (
19+
<>
20+
<div
21+
className="flex flex-col relative max-w-7xl px-4 lg:px-8 mx-auto w-full"
22+
ref={containerRef}
23+
>
24+
<div className="dark:bg-gray-900 bg-gray-50 w-full p-4 rounded-xl">
25+
<div className="flex flex-col justify-between items-center">
26+
<div className="font-light text-2xl mb-4 max-w-2xl">
27+
{'Develop and iterate with instant feedback'}
28+
</div>
29+
<div className="flex flex-row items-start my-2 gap-2 w-full">
30+
<div
31+
onClick={() => setCurrentIndex(0)}
32+
className={twMerge(
33+
'cursor-pointer px-2 py-1 border-b-2 hover:bg-opacity-50 ',
34+
currentIndex === 0 ? ' border-blue-600' : 'border-blue-800'
35+
)}
36+
>
37+
Scripts
38+
</div>
39+
<div
40+
onClick={() => setCurrentIndex(1)}
41+
className={twMerge(
42+
'cursor-pointer px-2 py-1 border-b-2 hover:bg-opacity-50 ',
43+
currentIndex === 1 ? ' border-emerald-600' : 'border-emerald-800'
44+
)}
45+
>
46+
Flows
47+
</div>
48+
<div
49+
onClick={() => setCurrentIndex(2)}
50+
className={twMerge(
51+
'cursor-pointer px-2 py-1 border-b-2 hover:bg-opacity-50 ',
52+
currentIndex === 2 ? ' border-orange-600' : 'border-orange-800'
53+
)}
54+
>
55+
Apps
56+
</div>
57+
</div>
58+
59+
{currentIndex === 0 && (
60+
<div className="flex flex-row items-start ">
61+
<div className="bg-gradient-to-br from-blue-200 to-sky-400 dark:from-blue-700 dark:to-sky-600 w-full rounded-lg p-2 shadow-inner overflow-hidden h-full">
62+
<Window
63+
shouldRender={true}
64+
name="Scripts | Windmill"
65+
icon="/third_party_logos/firefox.svg"
66+
className="h-min"
67+
>
68+
<img src="/images/script_example.png" alt="Scripts" />
69+
</Window>
70+
</div>
71+
</div>
72+
)}
73+
{currentIndex === 1 && (
74+
<div className="flex flex-row items-start ">
75+
<div className="bg-gradient-to-br from-emerald-200 to-emerald-400 dark:from-emerald-500 dark:to-emerald-600 w-full rounded-lg p-2 shadow-inner overflow-hidden ">
76+
<Window
77+
shouldRender={true}
78+
name="Flows | Windmill"
79+
icon="/third_party_logos/firefox.svg"
80+
className="h-min"
81+
>
82+
<img src="/images/flow_example.png" alt="Flows" />
83+
</Window>
84+
</div>
85+
</div>
86+
)}
87+
{currentIndex === 2 && (
88+
<div className="flex flex-row items-start ">
89+
<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-2 shadow-inner overflow-hidden ">
90+
<Window
91+
shouldRender={true}
92+
name="Apps | Windmill"
93+
icon="/third_party_logos/firefox.svg"
94+
className="h-min"
95+
>
96+
<img src="/images/app_example.png" alt="Apps" />
97+
</Window>
98+
</div>
99+
</div>
100+
)}
101+
102+
<div className="text-opacity-50 text-sm">Animation available on desktop</div>
103+
</div>
104+
</div>
105+
<div className="h-20 w-full flex justify-center my-2 py-2">
106+
<ArrowLongDownIcon className="text-gray-200 dark:text-gray-700" />
107+
</div>
108+
</div>
109+
<div className="max-w-7xl px-4 lg:px-8 mx-auto flex justify-center items-center h-full flex-col">
110+
<div className="dark:bg-gray-900 bg-gray-50 w-full p-4 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8">
111+
<a
112+
href="/docs/core_concepts/draft_and_deploy#diff-viewer"
113+
target="_blank"
114+
className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer "
115+
>
116+
<div className="font-medium text-xl mb-6 group-hover:ml-2 transition-all flex flex-row items-center gap-2 ">
117+
<GitCompareArrows size={20} />
118+
Review
119+
</div>
120+
<div className="text-md mb-4 group-hover:ml-2 transition-all max-w-sm">
121+
{'Use the built-in diff viewer, GitHub PRs or GitLab MRs to review changes.'}
122+
</div>
123+
<div
124+
className={`text-sm text-blue-500 dark:text-blue-300 flex flex-row items-center gap-2 group-hover:ml-2 transition-all`}
125+
>
126+
Learn more
127+
<ArrowRight size={24} />
128+
</div>
129+
</a>
130+
<div className="col-span-3">
131+
<div className="rounded-lg overflow-hidden h-full w-full flex flex-col justify-end">
132+
<img src={'/illustrations/diff.png'} alt={'Review'} />
133+
</div>
134+
</div>
135+
</div>
136+
<div className="h-20 w-full flex justify-center my-2 py-2">
137+
<ArrowLongDownIcon className="text-gray-200 dark:text-gray-700" />
138+
</div>
139+
140+
<div className="dark:bg-gray-900 bg-gray-50 w-full p-4 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8">
141+
<a
142+
href="/docs/advanced/deploy_to_prod"
143+
target="_blank"
144+
className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer"
145+
>
146+
<div className="font-medium text-xl mb-6 group-hover:ml-2 transition-all flex flex-row items-center gap-2">
147+
<Server size={20} />
148+
Deploy at scale
149+
</div>
150+
<div className="text-md mb-4 group-hover:ml-2 transition-all max-w-sm">
151+
{
152+
'Deploy with ease on our infrastructure or your own infrastructure, on bare VMs with docker-compose, ecs, or large Kubernetes clusters with up to 1000 workers and even remote agents.'
153+
}
154+
</div>
155+
<div
156+
className={`text-sm text-blue-500 dark:text-blue-300 flex flex-row items-center gap-2 group-hover:ml-2 transition-all`}
157+
>
158+
Learn more
159+
<ArrowRight size={24} />
160+
</div>
161+
</a>
162+
<div className="col-span-3">
163+
<Lottie lottieData={deployAtScale} autoplay loop />
164+
</div>
165+
</div>
166+
<div className="h-20 w-full flex justify-center my-2 py-2">
167+
<ArrowLongDownIcon className="text-gray-200 dark:text-gray-700" />
168+
</div>
169+
<div className="dark:bg-gray-900 bg-gray-50 w-full p-4 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8">
170+
<a className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer">
171+
<div className="font-medium text-xl mb-6 group-hover:ml-2 transition-all flex flex-row items-center gap-2">
172+
<Activity size={20} />
173+
Monitor
174+
</div>
175+
<div className="text-md mb-4 group-hover:ml-2 transition-all max-w-sm">
176+
{'Keep track of your scripts, flows, and apps with detailed logs and metrics.'}
177+
</div>
178+
<div
179+
className={`text-sm text-blue-500 dark:text-blue-300 flex flex-row items-center gap-2 group-hover:ml-2 transition-all`}
180+
>
181+
Learn more
182+
<ArrowRight size={24} />
183+
</div>
184+
</a>
185+
<div className="col-span-3">
186+
<div className="rounded-lg overflow-hidden h-full w-full flex flex-col justify-end">
187+
<img src={'/illustrations/11.png'} alt={'Review'} />
188+
</div>
189+
</div>
190+
</div>
191+
</div>
192+
</>
193+
);
194+
}

‎src/landing/RadialBlur.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import { useColorMode } from '@docusaurus/theme-common';
3+
import { twMerge } from 'tailwind-merge';
34

4-
export default function RadialBlur({ color }) {
5+
export default function RadialBlur({ color, fullWidth }) {
56
const { colorMode } = useColorMode();
67

78
const colorMap = {
@@ -25,7 +26,10 @@ export default function RadialBlur({ color }) {
2526
<svg
2627
xmlns="http://www.w3.org/2000/svg"
2728
viewBox="0 0 1024 1024"
28-
className="absolute -top-[256px] left-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 -translate-y-1/2"
29+
className={twMerge(
30+
'absolute -top-[256px] left-1/2 -z-10 h-[64rem] -translate-x-1/2 -translate-y-1/2 ',
31+
fullWidth ? 'w-full' : 'w-[64rem]'
32+
)}
2933
aria-hidden="true"
3034
>
3135
<circle

0 commit comments

Comments
 (0)