feat: add docker compose and new features

components/Header.tsx

@@ -6,9 +6,10 @@ import { Popover, Transition } from "@headlessui/react";
 import { Container } from "./Container";
 import { Logo } from "./shared/Logo";
 import { NavLink } from "./NavLink";
-import { Button } from "./ui/button";
+import { Button, buttonVariants } from "./ui/button";
 import { cn } from "@/lib/utils";
 import { trackGAEvent } from "./analitycs";
+import { HeartIcon } from "lucide-react";
 
 function MobileNavLink({
 	href,
@@ -133,7 +134,18 @@ export function Header() {
 							</NavLink>
 						</div>
 					</div>
-					<div className="flex items-center gap-x-5 md:gap-x-8">
+					<div className="flex items-center gap-x-2 md:gap-x-5">
+						<Link
+							className={buttonVariants({
+								variant: "outline",
+								className: " flex items-center gap-2 !rounded-full",
+							})}
+							href="https://opencollective.com/dokploy"
+							target="_blank"
+						>
+							<span className="text-sm font-semibold">Support </span>
+							<HeartIcon className="size-4 text-red-500 fill-red-600 animate-heartbeat " />
+						</Link>
 						<Button
 							className="rounded-full bg-[#5965F2] hover:bg-[#4A55E0]"
 							asChild

components/PrimaryFeatures.tsx

@@ -20,6 +20,18 @@ const features = [
 			"Centralize control over your applications and databases for enhanced security and efficiency, simplifying access and management across your infrastructure.",
 		image: "/primary/applications.png",
 	},
+	{
+		title: "Docker Compose",
+		description:
+			"Native Docker Compose support for manage complex applications and services with ease.",
+		image: "/primary/compose.png",
+	},
+	{
+		title: "Multi Node",
+		description:
+			"Scale applications to multiples nodes using docker swarm to manage the cluster.",
+		image: "/primary/multinode.png",
+	},
 	{
 		title: "Monitoring",
 		description:

components/SecondaryFeatures.tsx

@@ -3,7 +3,7 @@
 import { Tab } from "@headlessui/react";
 import { Container } from "./Container";
 import { motion } from "framer-motion";
-import { Terminal, Users } from "lucide-react";
+import { Layers, Terminal, Users } from "lucide-react";
 import { cn } from "@/lib/utils";
 interface Feature {
 	name: React.ReactNode;
@@ -14,6 +14,20 @@ interface Feature {
 }
 
 const features: Array<Feature> = [
+	{
+		name: "Open Source Templates",
+		summary: "One click to deploy open source templates.",
+		description:
+			"Deploy open source templates with one click, powered by Docker Compose, (Plausible, Calcom, Pocketbase, etc.)",
+		image: "/secondary/templates.png",
+		icon: function ReportingIcon() {
+			return (
+				<>
+					<Layers className="size-5 text-primary" />
+				</>
+			);
+		},
+	},
 	{
 		name: "Real-Time Traefik Configuration",
 		summary:
@@ -317,7 +331,7 @@ function FeaturesDesktop() {
 		<Tab.Group as="div" className="hidden lg:mt-20 lg:block">
 			{({ selectedIndex }) => (
 				<>
-					<Tab.List className="grid grid-cols-3 gap-x-8">
+					<Tab.List className="grid grid-cols-4 gap-x-8">
 						{features.map((feature, featureIndex) => (
 							<Feature
 								key={feature.summary}
@@ -374,7 +388,7 @@ export function SecondaryFeatures() {
 			aria-label="Features for simplifying everyday business tasks"
 			className="pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32 bg-black"
 		>
-			<Container>
+			<Container className="max-w-[95rem]">
 				<div className="mx-auto max-w-2xl md:text-center">
 					<h2 className="font-display text-3xl tracking-tight text-primary sm:text-4xl">
 						Advanced Management Tools

public/canary.sh

@@ -77,7 +77,6 @@ docker service create \
   dokploy/dokploy:canary
 
 
-public_ip=$(hostname -I | awk '{print $1}')
 
 GREEN="\033[0;32m"
 YELLOW="\033[1;33m"
@@ -88,5 +87,5 @@ NC="\033[0m" # No Color
 echo ""
 printf "${GREEN}Congratulations, Dokploy is installed!${NC}\n"
 printf "${BLUE}Wait 15 seconds for the server to start${NC}\n"
-printf "${YELLOW}Please go to http://${public_ip}:3000${NC}\n\n"
+printf "${YELLOW}Please go to http://${advertise_addr}:3000${NC}\n\n"
 echo ""