Skip to content

Commit

Permalink
Merge pull request #3 from Dokploy/feat/redesign-website
Browse files Browse the repository at this point in the history 
Feat/redesign website
  • Loading branch information
@Siumauricio
Siumauricio authored Nov 2, 2024
2 parents 47d8fb3 + 6328aed commit 32b1cc7
Show file tree
Hide file tree
Showing 39 changed files with 2,776 additions and 827 deletions.
178 changes: 178 additions & 0 deletions apps/website/app/[locale]/_changelog/page.tsx
View file

Large diffs are not rendered by default.

21 changes: 15 additions & 6 deletions apps/website/app/[locale]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
import { CallToAction } from "@/components/CallToAction";
import { Faqs } from "@/components/Faqs";
import { Hero } from "@/components/Hero";
import { PrimaryFeatures } from "@/components/PrimaryFeatures";
import { SecondaryFeatures } from "@/components/SecondaryFeatures";
import { Testimonials } from "@/components/Testimonials";
import { FirstFeaturesSection } from "@/components/first-features";
import { Pricing } from "@/components/pricing";
import { SecondaryFeaturesSections } from "@/components/secondary-features";
import { Sponsors } from "@/components/sponsors";
import { StatsSection } from "@/components/stats";

export default function Home() {
return (
<div>
<main>
<Hero />
<PrimaryFeatures />
<SecondaryFeatures />
<CallToAction />
{/* <Testimonials /> */}
<FirstFeaturesSection />
<SecondaryFeaturesSections />
<StatsSection />
<Testimonials />
<div className="w-full relative">
<Pricing />
</div>
<Faqs />
<Sponsors />
<CallToAction />
</main>
</div>
);
Expand Down
9 changes: 0 additions & 9 deletions apps/website/app/[locale]/pricing/page.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion apps/website/app/sitemap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
{
url: "https://dokploy.com",
lastModified: new Date(),
changeFrequency: "yearly",
changeFrequency: "monthly",
priority: 1,
},
];
Expand Down
5 changes: 2 additions & 3 deletions apps/website/components/CallToAction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import { Button } from "./ui/button";

export function CallToAction() {
const t = useTranslations("HomePage");
const linkT = useTranslations("Link");
return (
<section
id="get-started-today"
className="relative overflow-hidden border-y border-border/30 bg-black py-10"
className="relative overflow-hidden border-y border-border/30 bg-black py-10 mt-20"
>
<svg
viewBox="0 0 2000 1000"
Expand Down Expand Up @@ -41,7 +40,7 @@ export function CallToAction() {

<Button className="mt-10 rounded-full" asChild>
<Link
href={linkT("docs.install")}
href={"https://app.dokploy.com/register"}
aria-label="Dokploy on GitHub"
target="_blank"
className="flex flex-row items-center gap-2"
Expand Down
157 changes: 91 additions & 66 deletions apps/website/components/Faqs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,81 @@
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { useTranslations } from "next-intl";
import { Container } from "./Container";

const faqs = [
[
{
question: "faq.q1",
answer: "faq.a1",
},
{
question: "faq.q2",
answer: "faq.a2",
},
{
question: "faq.q3",
answer: "faq.a3",
},
{
question: "faq.q4",
answer: "faq.a4",
},
],
[
{
question: "faq.q5",
answer: "faq.a5",
},
{
question: "faq.q6",
answer: "faq.a6",
},
{
question: "faq.q7",
answer: "faq.a7",
},
],
[
{
question: "faq.q8",
answer: "faq.a8",
},
{
question: "faq.q9",
answer: "faq.a9",
},
{
question: "faq.q10",
answer: "faq.a10",
},
],
{
question: "faq.q1",
answer: "faq.a1",
},
{
question: "faq.q11",
answer: "faq.a11",
},
{
question: "faq.q12",
answer: "faq.a12",
},
{
question: "faq.q13",
answer: "faq.a13",
},
{
question: "faq.q14",
answer: "faq.a14",
},
{
question: "faq.q15",
answer: "faq.a15",
},
{
question: "faq.q17",
answer: "faq.a17",
},
{
question: "faq.q18",
answer: "faq.a18",
},
{
question: "faq.q2",
answer: "faq.a2",
},
{
question: "faq.q4",
answer: "faq.a4",
},
{
question: "faq.q5",
answer: "faq.a5",
},
{
question: "faq.q6",
answer: "faq.a6",
},
{
question: "faq.q7",
answer: "faq.a7",
},
{
question: "faq.q8",
answer: "faq.a8",
},
{
question: "faq.q16",
answer: "faq.a16",
},
{
question: "faq.q9",
answer: "faq.a9",
},
{
question: "faq.q10",
answer: "faq.a10",
},
];

export function Faqs() {
Expand All @@ -58,36 +86,33 @@ export function Faqs() {
aria-labelledby="faq-title"
className="relative overflow-hidden bg-black py-20 sm:py-32"
>
<Container className="relative">
<div className="mx-auto max-w-2xl lg:mx-0">
<Container className="relative flex flex-col gap-10">
<div className="mx-auto lg:mx-0 justify-center w-full">
<h2
id="faq-title"
className="font-display text-3xl tracking-tight text-primary sm:text-4xl"
className="font-display text-3xl tracking-tight text-primary sm:text-4xl text-center"
>
{t("faq.title")}
</h2>
<p className="mt-4 text-lg tracking-tight text-muted-foreground">
<p className="mt-4 text-lg tracking-tight text-muted-foreground text-center">
{t("faq.des")}
</p>
</div>
<ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 lg:max-w-none lg:grid-cols-3">

<Accordion
type="single"
collapsible
className="w-full max-w-3xl mx-auto"
>
{faqs.map((column, columnIndex) => (
<li key={columnIndex}>
<ul className="flex flex-col gap-y-8">
{column.map((faq, faqIndex) => (
<li key={faqIndex}>
<h3 className="font-display text-lg leading-7 text-primary">
{t(faq.question)}
</h3>
<p className="mt-4 text-sm text-muted-foreground">
{t(faq.answer)}
</p>
</li>
))}
</ul>
</li>
<AccordionItem value={`${columnIndex}`} key={columnIndex}>
<AccordionTrigger className="text-left">
{t(column.question)}
</AccordionTrigger>
<AccordionContent>{t(column.answer)}</AccordionContent>
</AccordionItem>
))}
</ul>
</Accordion>
</Container>
</section>
);
Expand Down
10 changes: 7 additions & 3 deletions apps/website/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,14 @@ export function Footer() {
aria-label="Dokploy on Twitter"
>
<svg
aria-hidden="true"
className="h-6 w-6 fill-muted-foreground group-hover:fill-muted-foreground/70"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 fill-muted-foreground group-hover:fill-muted-foreground/70"
>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
</svg>
</Link>
<Link
Expand Down
53 changes: 42 additions & 11 deletions apps/website/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { Popover, Transition } from "@headlessui/react";
import { HeartIcon } from "lucide-react";
import { ChevronRight, HeartIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { Fragment, type JSX, type SVGProps } from "react";
import { Container } from "./Container";
import { NavLink } from "./NavLink";
import { trackGAEvent } from "./analitycs";
import { Logo } from "./shared/Logo";
import AnimatedGradientText from "./ui/animated-gradient-text";
import { Button, buttonVariants } from "./ui/button";

function MobileNavLink({
Expand Down Expand Up @@ -119,11 +120,25 @@ function MobileNavigation() {
as="div"
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"
>
<MobileNavLink href="/pricing">Pricing</MobileNavLink>
<MobileNavLink href="#pricing">Pricing</MobileNavLink>
<MobileNavLink href="/#faqs">{t("navigation.faqs")}</MobileNavLink>
<MobileNavLink href={linkT("docs.intro")} target="_blank">
{t("navigation.docs")}
</MobileNavLink>
<MobileNavLink href={linkT("docs.intro")} target="_blank">
<Button className=" w-full" asChild>
<Link
href="https://app.dokploy.com/register"
aria-label="Sign In Dokploy Cloud"
target="_blank"
>
<div className="group flex-row relative mx-auto flex max-w-fit items-center justify-center rounded-2xl text-sm font-medium w-full">
<span>{t("navigation.dashboard")}</span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</div>
</Link>
</Button>
</MobileNavLink>
</Popover.Panel>
</Transition.Child>
</Transition.Root>
Expand All @@ -144,15 +159,28 @@ export function Header() {
<Logo className="h-10 w-auto" />
</Link>
<div className="hidden md:flex md:gap-x-6">
<NavLink href="/pricing">{t("navigation.pricing")}</NavLink>
<NavLink href="#pricing">{t("navigation.pricing")}</NavLink>
<NavLink href="/#faqs">{t("navigation.faqs")}</NavLink>
<NavLink href={linkT("docs.intro")} target="_blank">
{t("navigation.docs")}
</NavLink>
</div>
</div>
<div className="flex items-center gap-x-2 md:gap-x-5">
<Link
<div className="flex items-center gap-x-4 md:gap-x-5">
<Link href="https://x.com/getdokploy" target="_blank">
<svg
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 fill-muted-foreground group-hover:fill-muted-foreground/70 hover:fill-muted-foreground/80"
>
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
</svg>
</Link>

{/* <Link
className={buttonVariants({
variant: "outline",
className: " flex items-center gap-2 !rounded-full",
Expand All @@ -164,15 +192,18 @@ export function Header() {
{t("navigation.support")}{" "}
</span>
<HeartIcon className="animate-heartbeat size-4 fill-red-600 text-red-500 " />
</Link>
<Button className="rounded-xl" asChild>
</Link> */}

<Button className="rounded-full max-md:hidden" asChild>
<Link
href="https://app.dokploy.com"
aria-label="Dokploy on GitHub"
href="https://app.dokploy.com/register"
aria-label="Sign In Dokploy Cloud"
target="_blank"
// className="flex flex-row items-center gap-2 text-white"
>
{t("navigation.dashboard")}
<div className="group flex-row relative mx-auto flex max-w-fit items-center justify-center rounded-2xl text-sm font-medium w-full">
<span>{t("navigation.dashboard")}</span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</div>
</Link>
</Button>
<div className="-mr-1 md:hidden">
Expand Down
Loading

0 comments on commit 32b1cc7

Please sign in to comment.