Skip to content

Commit 696a737

Browse files
Guilhem-lmGuilhem-lm
authored
fix: fix home page header layout (#1085)
* Add horizontal padding for the pricing table * fix typo * Improve home page layout * Fix pricing page in mobile
1 parent 7c23de3 commit 696a737

3 files changed

Lines changed: 24 additions & 23 deletions

File tree

‎src/components/Pricing.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -468,8 +468,8 @@ export default function Pricing() {
468468
};
469469

470470
return (
471-
<div className="">
472-
<div className="mx-auto max-w-7xl">
471+
<div className="w-full overflow-x-hidden">
472+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
473473
<div className="mx-auto max-w-4xl text-center">
474474
<p className="text-4xl font-bold tracking-tight sm:text-5xl">Pricing</p>
475475
<p className="text-lg font-medium text-gray-600 dark:text-gray-300 mt-2">Open source. Open pricing. No lock-in.</p>
@@ -535,7 +535,7 @@ export default function Pricing() {
535535
</div>
536536
<div
537537
className={classNames(
538-
'isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none w-full',
538+
'isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-4 sm:gap-8 lg:mx-0 lg:max-w-none w-full',
539539
{
540540
'lg:grid-cols-3': frequency.value === 'cloud',
541541
'lg:grid-cols-2': frequency.value === 'selfhost',
@@ -1084,7 +1084,7 @@ export default function Pricing() {
10841084
{/* Fake card borders */}
10851085
<div
10861086
className={twMerge(
1087-
'pointer-events-none absolute inset-x-8 inset-y-0 grid gap-x-8 inset-y-0 grid gap-x-8 before:block mt-4',
1087+
'pointer-events-none absolute inset-x-8 inset-y-0 grid gap-x-8 before:block mt-4',
10881088
frequency.value === 'cloud' ? 'grid-cols-4' : 'grid-cols-3'
10891089
)}
10901090
aria-hidden="true"

‎src/landing/LandingHeader.jsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export default function LandingHeader() {
7777
return (
7878
<div className="w-full fixed z-[1000] bg-white dark:bg-gray-950 shadow-sm">
7979
<Popover className="relative bg-opacity-90 z-50 max-w-7xl mx-auto py-3 px-3 sm:px-4 lg:px-8">
80-
<div className="flex items-center justify-between md:justify-start md:space-x-10">
80+
<div className="flex items-center justify-between gap-8">
8181
<Link
8282
to="/"
8383
className="flex justify-start items-center gap-2 h-full lg:w-auto lg:flex-none group !no-underline cursor-pointer w-min"
@@ -97,22 +97,14 @@ export default function LandingHeader() {
9797
</div>
9898
</Link>
9999

100-
{/* Hamburger menu - shows when navigation is hidden OR when buttons are hidden */}
101-
<div className="-my-2 -mr-2 md:hidden xl:block 2xl:hidden">
102-
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white dark:bg-gray-800 p-2 text-gray-400 dark:text-gray-200 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
103-
<span className="sr-only">Open menu</span>
104-
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
105-
</Popover.Button>
106-
</div>
107-
108-
<Popover.Group as="nav" className="hidden space-x-8 lg:space-x-10 md:flex">
100+
<Popover.Group as="nav" className="hidden space-x-8 lg:space-x-10 md:flex min-w-0 grow">
109101
<Popover className="relative">
110102
{({ open }) => (
111103
<>
112104
<Popover.Button
113105
className={classNames(
114106
open ? 'text-gray-900' : 'text-gray-500',
115-
'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-100 focus:ring-offset-2 text-gray-500 !no-underline dark:text-gray-200 dark:hover:text-gray-300 '
107+
'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-offset-1 dark:focus:ring-offset-gray-800 text-gray-500 !no-underline dark:text-gray-200 dark:hover:text-gray-300 '
116108
)}
117109
>
118110
<span>Products</span>
@@ -280,6 +272,13 @@ export default function LandingHeader() {
280272
Windmill cloud
281273
</a>
282274
</div>
275+
{/* Hamburger menu - shows when navigation is hidden OR when buttons are hidden */}
276+
<div className="-ml-4 xl:block 2xl:hidden">
277+
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white dark:bg-gray-800 p-2 text-gray-400 dark:text-gray-200 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
278+
<span className="sr-only">Open menu</span>
279+
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
280+
</Popover.Button>
281+
</div>
283282
</div>
284283
<Transition
285284
as={Fragment}
@@ -292,7 +291,7 @@ export default function LandingHeader() {
292291
>
293292
<Popover.Panel
294293
focus
295-
className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden xl:block 2xl:hidden"
294+
className="absolute inset-x-0 top-0 md:right-0 md:inset-x-auto md:w-80 xl:inset-y-auto origin-top-right transform p-2 transition xl:block 2xl:hidden"
296295
>
297296
<div className="divide-y-2 divide-gray-50 dark:divide-gray-800 rounded-lg bg-white dark:bg-gray-900 shadow-lg ring-1 ring-black ring-opacity-5">
298297
<div className="px-5 pt-5 pb-6">
@@ -346,7 +345,9 @@ export default function LandingHeader() {
346345

347346
{/* Show Products dropdown items on mobile */}
348347
<div className="md:hidden mt-4">
349-
<div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Products</div>
348+
<div className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
349+
Products
350+
</div>
350351
<div className="space-y-2">
351352
{products.map((product) => (
352353
<a
@@ -360,8 +361,8 @@ export default function LandingHeader() {
360361
</div>
361362
</div>
362363

363-
{/* Show social icons only on mobile (md:hidden) */}
364-
<div className="md:hidden mt-6 flex justify-center items-center space-x-4 mb-4">
364+
{/* Show social icons only on xl screens (xl:hidden) */}
365+
<div className="lg:hidden mt-6 flex justify-center items-center space-x-4 mb-4">
365366
<a
366367
href="https://github.com/windmill-labs/windmill"
367368
data-analytics='"github"'
@@ -388,12 +389,12 @@ export default function LandingHeader() {
388389
{/* Show buttons that are hidden on current screen size */}
389390
<div className="mt-6">
390391
{/* Book a demo - hidden on xl screens, visible on 2xl+ */}
391-
<div className="xl:block 2xl:hidden">
392+
<div className="lg:block xl:hidden">
392393
<a
393394
href="https://www.windmill.dev/book-demo"
394395
data-analytics='"schedule-demo"'
395396
onClick={() => window.plausible('schedule-demo')}
396-
className="!no-underline flex w-full dark:text-white items-center justify-center rounded-md border border-transparent text-base font-medium text-blue-600 shadow-sm hover:bg-blue-200 dark:hover:bg-blue-500 mb-4"
397+
className="!no-underline flex w-full dark:text-white items-center justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-base font-medium !text-blue-600 shadow-sm hover:bg-blue-200 hover:text-blue-800 mb-4"
397398
>
398399
Book a demo
399400
</a>

‎src/pages/pricing.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import LayoutProvider from '@theme/Layout/Provider';
99
export default function PricingPage() {
1010
return (
1111
<LayoutProvider>
12-
<main>
12+
<main className="relative min-h-screen w-full overflow-x-hidden">
1313
<LandingHeader />
1414
<Head>
1515
<title>Pricing | Windmill</title>
@@ -22,7 +22,7 @@ export default function PricingPage() {
2222
</Head>
2323
<>
2424
<RadialBlur />
25-
<div className="pt-32">
25+
<div className="pt-32 max-w-full">
2626
<Pricing />
2727
</div>
2828
</>

0 commit comments

Comments
 (0)