Skip to content

Commit 4fd95e8

Browse files
SiumauricioSiumauricio
committed
feat: update navigation and pricing components for improved user experience
- Enhanced the Header component with a new NavigationMenu for better organization of links. - Integrated a ContactFormModal in the EnterpriseLanding component for direct user engagement. - Added an FAQ section in the Pricing component using an Accordion for better information accessibility. - Updated dependencies in package.json and pnpm-lock.yaml for consistency and maintenance.
1 parent 2a5c318 commit 4fd95e8

6 files changed

Lines changed: 407 additions & 74 deletions

File tree

‎apps/website/components/EnterpriseLanding.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ import {
1111
Shield,
1212
Users,
1313
} from "lucide-react";
14+
import { useState } from "react";
1415
import Link from "next/link";
1516
import { Container } from "./Container";
17+
import { ContactFormModal } from "./ContactFormModal";
1618
import AnimatedGradientText from "./ui/animated-gradient-text";
1719
import AnimatedGridPattern from "./ui/animated-grid-pattern";
1820
import { Button } from "./ui/button";
@@ -74,8 +76,11 @@ const hostingOptions = [
7476
];
7577

7678
export function EnterpriseLanding() {
79+
const [contactOpen, setContactOpen] = useState(false);
80+
7781
return (
7882
<div className="bg-black">
83+
<ContactFormModal open={contactOpen} onOpenChange={setContactOpen} />
7984
{/* Hero Section */}
8085
<div className="relative overflow-hidden bg-background pt-20 pb-16 lg:pt-32">
8186
<div className="relative">
@@ -147,8 +152,8 @@ export function EnterpriseLanding() {
147152
animate={{ opacity: 1, y: 0 }}
148153
transition={{ duration: 0.3, delay: 0.4 }}
149154
>
150-
<Button className="rounded-full" asChild>
151-
<Link href="/contact">Contact sales</Link>
155+
<Button className="rounded-full" onClick={() => setContactOpen(true)}>
156+
Contact sales
152157
</Button>
153158
<Button variant="outline" className="rounded-full" asChild>
154159
<Link href="https://docs.dokploy.com" target="_blank">
@@ -257,8 +262,8 @@ export function EnterpriseLanding() {
257262
Talk to our team about your deployment needs and discover how
258263
Dokploy Enterprise can transform your infrastructure.
259264
</p>
260-
<Button className="mt-8 rounded-full" asChild>
261-
<Link href="/contact">Schedule a call with sales</Link>
265+
<Button className="mt-8 rounded-full" onClick={() => setContactOpen(true)}>
266+
Schedule a call with sales
262267
</Button>
263268
<p className="mt-6 text-sm text-gray-500">
264269
Questions? Email us at{" "}

‎apps/website/components/Header.tsx‎

Lines changed: 172 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@
22

33
import { cn } from "@/lib/utils";
44
import { Popover, Transition } from "@headlessui/react";
5-
import { ChevronRight, HeartIcon } from "lucide-react";
5+
import { ChevronRight } from "lucide-react";
66
import Link from "next/link";
77
import { Fragment, type JSX, type SVGProps } from "react";
88
import { Container } from "./Container";
99
import GithubStars from "./GithubStars";
10-
import { NavLink } from "./NavLink";
1110
import { trackGAEvent } from "./analitycs";
1211
import { Logo } from "./shared/Logo";
13-
import AnimatedGradientText from "./ui/animated-gradient-text";
14-
import { Button, buttonVariants } from "./ui/button";
12+
import { Button } from "./ui/button";
13+
import {
14+
NavigationMenu,
15+
NavigationMenuContent,
16+
NavigationMenuItem,
17+
NavigationMenuLink,
18+
NavigationMenuList,
19+
NavigationMenuTrigger,
20+
navigationMenuTriggerStyle,
21+
} from "./ui/navigation-menu";
1522

1623
function MobileNavLink({
1724
href,
@@ -65,24 +72,6 @@ function MobileNavIcon({ open }: { open: boolean }) {
6572
);
6673
}
6774

68-
const I18nIcon = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
69-
<svg
70-
xmlns="http://www.w3.org/2000/svg"
71-
width={24}
72-
height={24}
73-
fill="currentColor"
74-
stroke="currentColor"
75-
strokeWidth={0}
76-
viewBox="0 0 512 512"
77-
{...props}
78-
>
79-
<path
80-
stroke="none"
81-
d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
82-
/>
83-
</svg>
84-
);
85-
8675
function MobileNavigation() {
8776
return (
8877
<Popover>
@@ -116,33 +105,41 @@ function MobileNavigation() {
116105
>
117106
<Popover.Panel
118107
as="div"
119-
className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl border border-border bg-background p-4 text-lg tracking-tight text-primary shadow-xl ring-1 ring-border/5"
108+
className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl border border-border bg-background p-4 text-lg tracking-tight text-primary shadow-xl ring-1 ring-border/5"
120109
>
110+
<MobileNavLink href="/#features">Features</MobileNavLink>
121111
<MobileNavLink href="/pricing">Pricing</MobileNavLink>
122-
<MobileNavLink href="/#faqs">FAQ</MobileNavLink>
112+
<hr className="m-2 border-border" />
113+
<p className="px-2 py-1 text-xs font-semibold uppercase text-muted-foreground">
114+
Solutions
115+
</p>
116+
<MobileNavLink href="/enterprise">Enterprise</MobileNavLink>
117+
<MobileNavLink href="/partners">Partners</MobileNavLink>
118+
<hr className="m-2 border-border" />
123119
<MobileNavLink
124120
href="https://docs.dokploy.com/docs/core"
125121
target="_blank"
126122
>
127123
Docs
128124
</MobileNavLink>
125+
<hr className="m-2 border-border" />
126+
<p className="px-2 py-1 text-xs font-semibold uppercase text-muted-foreground">
127+
Resources
128+
</p>
129+
<MobileNavLink href="https://templates.dokploy.com" target="_blank">Templates</MobileNavLink>
129130
<MobileNavLink href="/blog">Blog</MobileNavLink>
131+
<MobileNavLink href="/#faqs">FAQ</MobileNavLink>
132+
<hr className="m-2 border-border" />
130133
<MobileNavLink href="/contact">Contact</MobileNavLink>
131134
<MobileNavLink
132-
href="https://docs.dokploy.com/docs/core"
135+
href="https://app.dokploy.com/register"
133136
target="_blank"
134137
>
135-
<Button className=" w-full" asChild>
136-
<Link
137-
href="https://app.dokploy.com/register"
138-
aria-label="Sign In Dokploy Cloud"
139-
target="_blank"
140-
>
141-
<div className="group relative mx-auto flex w-full max-w-fit flex-row items-center justify-center rounded-2xl text-sm font-medium">
142-
<span>Sign In</span>
143-
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
144-
</div>
145-
</Link>
138+
<Button className="w-full" asChild>
139+
<div className="group relative mx-auto flex w-full max-w-fit flex-row items-center justify-center rounded-2xl text-sm font-medium">
140+
<span>Sign In</span>
141+
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
142+
</div>
146143
</Button>
147144
</MobileNavLink>
148145
</Popover.Panel>
@@ -152,6 +149,49 @@ function MobileNavigation() {
152149
);
153150
}
154151

152+
function ListItem({
153+
className,
154+
title,
155+
href,
156+
target,
157+
children,
158+
}: {
159+
className?: string;
160+
title: string;
161+
href: string;
162+
target?: string;
163+
children?: React.ReactNode;
164+
}) {
165+
return (
166+
<li>
167+
<NavigationMenuLink asChild>
168+
<Link
169+
href={href}
170+
target={target}
171+
onClick={() =>
172+
trackGAEvent({
173+
action: "Nav Link Clicked",
174+
category: "Navigation",
175+
label: href,
176+
})
177+
}
178+
className={cn(
179+
"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
180+
className,
181+
)}
182+
>
183+
<div className="text-sm font-medium leading-none">{title}</div>
184+
{children && (
185+
<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
186+
{children}
187+
</p>
188+
)}
189+
</Link>
190+
</NavigationMenuLink>
191+
</li>
192+
);
193+
}
194+
155195
export function Header() {
156196
return (
157197
<header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 py-5 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -161,16 +201,102 @@ export function Header() {
161201
<Link href="/" aria-label="Home">
162202
<Logo className="h-10 w-auto" />
163203
</Link>
164-
<div className="hidden md:flex md:gap-x-6">
165-
<NavLink href="/pricing">Pricing</NavLink>
166-
<NavLink href="/#faqs">FAQ</NavLink>
167-
<NavLink
168-
href="https://docs.dokploy.com/docs/core"
169-
target="_blank"
170-
>
171-
Docs
172-
</NavLink>
173-
<NavLink href="/blog">Blog</NavLink>
204+
<div className="hidden md:flex">
205+
<NavigationMenu>
206+
<NavigationMenuList>
207+
<NavigationMenuItem>
208+
<NavigationMenuLink
209+
asChild
210+
className={navigationMenuTriggerStyle()}
211+
>
212+
<Link
213+
href="/#features"
214+
onClick={() =>
215+
trackGAEvent({
216+
action: "Nav Link Clicked",
217+
category: "Navigation",
218+
label: "/#features",
219+
})
220+
}
221+
>
222+
Features
223+
</Link>
224+
</NavigationMenuLink>
225+
</NavigationMenuItem>
226+
227+
<NavigationMenuItem>
228+
<NavigationMenuLink
229+
asChild
230+
className={navigationMenuTriggerStyle()}
231+
>
232+
<Link
233+
href="/pricing"
234+
onClick={() =>
235+
trackGAEvent({
236+
action: "Nav Link Clicked",
237+
category: "Navigation",
238+
label: "/pricing",
239+
})
240+
}
241+
>
242+
Pricing
243+
</Link>
244+
</NavigationMenuLink>
245+
</NavigationMenuItem>
246+
247+
<NavigationMenuItem>
248+
<NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
249+
<NavigationMenuContent>
250+
<ul className="grid w-[200px] gap-1 p-2">
251+
<ListItem href="/enterprise" title="Enterprise">
252+
Enterprise-grade deployment platform
253+
</ListItem>
254+
<ListItem href="/partners" title="Partners">
255+
Partner program and integrations
256+
</ListItem>
257+
</ul>
258+
</NavigationMenuContent>
259+
</NavigationMenuItem>
260+
261+
<NavigationMenuItem>
262+
<NavigationMenuLink
263+
asChild
264+
className={navigationMenuTriggerStyle()}
265+
>
266+
<Link
267+
href="https://docs.dokploy.com/docs/core"
268+
target="_blank"
269+
onClick={() =>
270+
trackGAEvent({
271+
action: "Nav Link Clicked",
272+
category: "Navigation",
273+
label: "https://docs.dokploy.com/docs/core",
274+
})
275+
}
276+
>
277+
Docs
278+
</Link>
279+
</NavigationMenuLink>
280+
</NavigationMenuItem>
281+
282+
<NavigationMenuItem>
283+
<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
284+
<NavigationMenuContent>
285+
<ul className="grid w-[200px] gap-1 p-2">
286+
<ListItem href="https://templates.dokploy.com" target="_blank" title="Templates">
287+
Ready-to-deploy templates
288+
</ListItem>
289+
<ListItem href="/blog" title="Blog">
290+
Latest news and updates
291+
</ListItem>
292+
<ListItem href="/#faqs" title="FAQ">
293+
Frequently asked questions
294+
</ListItem>
295+
</ul>
296+
</NavigationMenuContent>
297+
</NavigationMenuItem>
298+
</NavigationMenuList>
299+
</NavigationMenu>
174300
</div>
175301
</div>
176302
<div className="flex items-center gap-x-4 md:gap-x-5">
@@ -208,20 +334,6 @@ export function Header() {
208334
</Link>
209335
</Button>
210336

211-
{/* <Link
212-
className={buttonVariants({
213-
variant: "outline",
214-
className: " flex items-center gap-2 !rounded-full",
215-
})}
216-
href="https://opencollective.com/dokploy"
217-
target="_blank"
218-
>
219-
<span className="text-sm font-semibold">
220-
{t("navigation.support")}{" "}
221-
</span>
222-
<HeartIcon className="animate-heartbeat size-4 fill-red-600 text-red-500 " />
223-
</Link> */}
224-
225337
<Button className="rounded-full max-md:hidden" asChild>
226338
<Link
227339
href="https://app.dokploy.com/register"

0 commit comments

Comments
 (0)