- {/*
*/}
- {/*
*/}
-
- {/*
*/}
- {/*
*/}
+
+
+
+
setIsAnnual(e === "annual")}
+ >
+
+
+ {t("billingCycle.monthly")}
+
+
+ {t("billingCycle.annual")}
+
+
+
+
+
+
+
+ {t("plan.free.title")}
+
+ |
+
+ {t("plan.free.subTitle")}
+
+
+ {t("plan.free.section.title")}
+
+
+ {t("plan.free.section.description")}
+
+
+
+ {[
+ t("plan.free.features.f1"),
+ t("plan.free.features.f2"),
+ t("plan.free.features.f3"),
+ t("plan.free.features.f4"),
+ t("plan.free.features.f5"),
+ t("plan.free.features.f6"),
+ t("plan.free.features.f7"),
+ t("plan.free.features.f8"),
+ ].map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+
+ {t("plan.free.features.f9")}
+
+
+ {t("plan.free.go")}{" "}
+
+
+
+
+
+ {isAnnual && (
+
+ {t("plan.cloud.title")} 🚀
+
+ )}
+
+ {isAnnual ? (
+
+
+ $ {calculatePrice(serverQuantity, isAnnual).toFixed(2)}{" "}
+ USD
+
+ |
+
+ ${" "}
+ {(calculatePrice(serverQuantity, isAnnual) / 12).toFixed(
+ 2,
+ )}{" "}
+ / Month USD
+
+
+ $ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
+
+ )}
+
+ {t("plan.cloud.section.title")}
+
+
+ {t("plan.cloud.section.description")}
+
+
+
+ {[
+ t("plan.cloud.features.f1"),
+ t("plan.cloud.features.f2"),
+ t("plan.cloud.features.f3"),
+ ].map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+
+ {t("plan.cloud.servers", {
+ serverQuantity,
+ })}
+
+
+
+
+
{
+ if (serverQuantity <= 1) return;
+
+ setServerQuantity(serverQuantity - 1);
+ }}
+ >
+
+
{
+ setServerQuantity(e.target.value as unknown as number);
+ }}
+ />
+
+ {
+ setServerQuantity(serverQuantity + 1);
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+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",
+ },
+ ],
+];
+
+export function Faqs() {
+ const t = useTranslations("Pricing");
+ return (
+
+
+
+
+ {t("faq.title")}
+
+
+ {t("faq.description")}:{" "}
+
+
+ {faqs.map((column, columnIndex) => (
+
+
+ {column.map((faq, faqIndex) => (
+
+
+ {t(faq.question)}
+
+
+ {t(faq.answer)}
+
+
+ ))}
+
+
+ ))}
+
+
);
}
diff --git a/components/PrimaryFeatures.tsx b/components/PrimaryFeatures.tsx
index b872875..ef4ecfd 100644
--- a/components/PrimaryFeatures.tsx
+++ b/components/PrimaryFeatures.tsx
@@ -1,52 +1,48 @@
"use client";
-import { useEffect, useState } from "react";
import { Tab } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
-import { Container } from "./Container";
import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { Container } from "./Container";
const features = [
{
- title: "Projects",
- description:
- "Manage and organize all your projects in one place, keeping detailed track of progress and resource allocation.",
+ title: "primaryFeatures.projects",
+ description: "primaryFeatures.projectsDes",
image: "/primary/projects.png",
},
{
- title: "Applications & Databases",
- description:
- "Centralize control over your applications and databases for enhanced security and efficiency, simplifying access and management across your infrastructure.",
+ title: "primaryFeatures.applications",
+ description: "primaryFeatures.applicationsDes",
image: "/primary/applications.png",
},
{
- title: "Docker Compose",
- description:
- "Native Docker Compose support for manage complex applications and services with ease.",
+ title: "primaryFeatures.compose",
+ description: "primaryFeatures.composeDes",
image: "/primary/compose.png",
},
{
- title: "Multi Node",
- description:
- "Scale applications to multiples nodes using docker swarm to manage the cluster.",
+ title: "primaryFeatures.multinode",
+ description: "primaryFeatures.multinodeDes",
image: "/primary/multinode.png",
},
{
- title: "Monitoring",
- description:
- "Monitor your systems' performance and health in real time, ensuring continuous and uninterrupted operation.",
+ title: "primaryFeatures.monitoring",
+ description: "primaryFeatures.monitoringDes",
image: "/primary/monitoring.png",
},
{
- title: "Backups",
- description:
- "Implement automatic and secure backup solutions to protect your critical data and restore it quickly when necessary.",
+ title: "primaryFeatures.backups",
+ description: "primaryFeatures.backupsDes",
image: "/primary/backups.png",
},
];
export function PrimaryFeatures() {
+ const t = useTranslations("HomePage");
const [tabOrientation, setTabOrientation] = useState<
"horizontal" | "vertical"
>("horizontal");
@@ -92,11 +88,10 @@ export function PrimaryFeatures() {
- Comprehensive Control for Your Digital Ecosystem
+ {t("primaryFeatures.title")}
- Simplify your project and data management, ensure robust monitoring,
- and secure your backups—all without the fuss over minute details.
+ {t("primaryFeatures.des")}
{selectedIndex === featureIndex && (
- {feature.description}
+ {t(feature.description)}
))}
@@ -164,7 +159,7 @@ export function PrimaryFeatures() {
- {feature.description}
+ {t(feature.description)}
@@ -178,7 +173,7 @@ export function PrimaryFeatures() {
bounce: 0.2,
duration: 0.6,
}}
- className="mt-10 h-[24rem] lg:h-[40rem] w-[45rem] overflow-hidden rounded-xl shadow-xl border sm:w-auto lg:mt-0 lg:w-[67.8125rem]"
+ className="mt-10 h-[24rem] w-[45rem] overflow-hidden rounded-xl border shadow-xl sm:w-auto lg:mt-0 lg:h-[40rem] lg:w-[67.8125rem]"
>
= [
},
},
{
- name: "Real-Time Traefik Configuration",
- summary:
- " Modify Traefik settings on-the-fly via a graphical interface or API.",
- description:
- "Users can adjust Traefik's configuration, including middleware, forwarding rules, and SSL certificates through an intuitive interface or API. This feature enables seamless traffic routing and security adjustments without the need to restart services",
+ name: "secondaryFeatures.traefik",
+ summary: "secondaryFeatures.traefikSummary",
+ description: "secondaryFeatures.traefikDes",
image: "/secondary/traefik.png",
icon: function ReportingIcon() {
return (
@@ -217,11 +215,9 @@ const features: Array = [
},
},
{
- name: "User Permission Management",
- summary:
- "Detailed control over user permissions for accessing and managing projects and services.",
- description:
- "Allows administrators to define specific roles and permissions for each user, including the ability to create, modify, or delete applications and databases. This feature ensures secure and efficient management of large and diverse teams.",
+ name: "secondaryFeatures.users",
+ summary: "secondaryFeatures.usersSummary",
+ description: "secondaryFeatures.usersDes",
image: "/secondary/users.png",
icon: function InventoryIcon() {
return (
@@ -232,11 +228,9 @@ const features: Array = [
},
},
{
- name: "Terminal Access",
- summary:
- "Direct access to each container's and server terminal for advanced management.",
- description:
- "Provides an interface to access the command line of any active container, allowing developers to execute commands, manage services, and troubleshoot directly from the dashboard",
+ name: "secondaryFeatures.terminal",
+ summary: "secondaryFeatures.terminalSummary",
+ description: "secondaryFeatures.terminalDes",
image: "/secondary/terminal.png",
icon: function ContactsIcon() {
return (
@@ -257,18 +251,19 @@ function Feature({
feature: Feature;
isActive: boolean;
}) {
+ const t = useTranslations("HomePage");
return (
@@ -277,7 +272,7 @@ function Feature({
{isActive && (
- {feature.summary}
+ {t(feature.summary)}
- {feature.description}
+ {t(feature.description)}
);
@@ -327,6 +322,7 @@ function FeaturesMobile() {
}
function FeaturesDesktop() {
+ const t = useTranslations("HomePage");
return (
{({ selectedIndex }) => (
@@ -340,7 +336,7 @@ function FeaturesDesktop() {
name: (
),
}}
@@ -359,7 +355,9 @@ function FeaturesDesktop() {
"px-5 transition duration-500 ease-in-out ui-not-focus-visible:outline-none",
featureIndex !== selectedIndex && "opacity-60",
)}
- style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
+ style={{
+ transform: `translateX(-${selectedIndex * 100}%)`,
+ }}
aria-hidden={featureIndex !== selectedIndex}
>
@@ -382,21 +380,20 @@ function FeaturesDesktop() {
}
export function SecondaryFeatures() {
+ const t = useTranslations("HomePage");
return (
- Advanced Management Tools
+ {t("secondaryFeatures.title")}
- Elevate your infrastructure with tools that offer precise control,
- detailed monitoring, and enhanced security, ensuring seamless
- management and robust performance.
+ {t("secondaryFeatures.des")}
-
-
-
+
404
-
- Oops! Looks like you're lost.
-
+
{t("title")}
- Let's get you back{" "}
+ {t("des")}{" "}
-
-
-
);
}
diff --git a/components/ui/animated-shiny-text.tsx b/components/ui/animated-shiny-text.tsx
new file mode 100644
index 0000000..174e4d1
--- /dev/null
+++ b/components/ui/animated-shiny-text.tsx
@@ -0,0 +1,40 @@
+import type { CSSProperties, FC, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface AnimatedShinyTextProps {
+ children: ReactNode;
+ className?: string;
+ shimmerWidth?: number;
+}
+
+const AnimatedShinyText: FC = ({
+ children,
+ className,
+ shimmerWidth = 100,
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default AnimatedShinyText;
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..f38976c
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index e3a68d2..829c7e3 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,8 +1,8 @@
"use client";
-import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
import { cn } from "../../lib/utils";
@@ -39,6 +39,7 @@ export interface ButtonProps
extends React.ButtonHTMLAttributes,
VariantProps {
asChild?: boolean;
+ children?: React.ReactNode;
}
const Button = React.forwardRef(
diff --git a/components/ui/hover-border-gradient.tsx b/components/ui/hover-border-gradient.tsx
new file mode 100644
index 0000000..c8bc250
--- /dev/null
+++ b/components/ui/hover-border-gradient.tsx
@@ -0,0 +1,100 @@
+"use client";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { motion } from "framer-motion";
+
+type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT";
+
+export function HoverBorderGradient({
+ children,
+ containerClassName,
+ className,
+ as: Tag = "button",
+ duration = 1,
+ clockwise = true,
+ ...props
+}: React.PropsWithChildren<
+ {
+ as?: React.ElementType;
+ containerClassName?: string;
+ className?: string;
+ duration?: number;
+ clockwise?: boolean;
+ } & React.HTMLAttributes
+>) {
+ const [hovered, setHovered] = useState(false);
+ const [direction, setDirection] = useState("TOP");
+
+ const rotateDirection = (currentDirection: Direction): Direction => {
+ const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"];
+ const currentIndex = directions.indexOf(currentDirection);
+ const nextIndex = clockwise
+ ? (currentIndex - 1 + directions.length) % directions.length
+ : (currentIndex + 1) % directions.length;
+ return directions[nextIndex];
+ };
+
+ const movingMap: Record = {
+ TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ BOTTOM:
+ "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ RIGHT:
+ "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
+ };
+
+ const highlight =
+ "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)";
+
+ useEffect(() => {
+ if (!hovered) {
+ const interval = setInterval(() => {
+ setDirection((prevState) => rotateDirection(prevState));
+ }, duration * 1000);
+ return () => clearInterval(interval);
+ }
+ }, [hovered]);
+ return (
+ ) => {
+ setHovered(true);
+ }}
+ onMouseLeave={() => setHovered(false)}
+ className={cn(
+ "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit",
+ containerClassName,
+ )}
+ {...props}
+ >
+
+ {children}
+
+
+
+ );
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..8fe7ab2
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,69 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export interface InputProps
+ extends React.InputHTMLAttributes {
+ errorMessage?: string;
+}
+
+const Input = React.forwardRef(
+ ({ className, errorMessage, type, ...props }, ref) => {
+ return (
+ <>
+
+ {errorMessage}
+
+ )}
+
+ );
+ },
+);
+Input.displayName = "Input";
+
+const NumberInput = React.forwardRef(
+ ({ className, errorMessage, ...props }, ref) => {
+ return (
+ ,
+ );
+ }
+ }
+ }}
+ />
+ );
+ },
+);
+NumberInput.displayName = "NumberInput";
+
+export { Input, NumberInput };
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..e4f033f
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..e54c215
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ 
-