style: refact feature section
This commit is contained in:
oiov
@@ -11,8 +11,14 @@ import { buttonVariants } from "@/components/ui/button";
|
||||
import { Icons } from "@/components/shared/icons";
|
||||
|
||||
import CountUpFn from "../dashboard/count-up";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "../ui/collapsible";
|
||||
import { InfiniteSlider } from "../ui/infinite-slider";
|
||||
import { ProgressiveBlur } from "../ui/progressive-blur";
|
||||
import { Separator } from "../ui/separator";
|
||||
import EmailManagerExp from "./email";
|
||||
import PreviewLanding from "./preview-landing";
|
||||
import UrlShortener from "./url-shortener";
|
||||
@@ -86,7 +92,7 @@ export default function HeroLanding({
|
||||
|
||||
<PreviewLanding />
|
||||
|
||||
<div className="group relative m-auto hidden max-w-5xl md:block">
|
||||
<div className="group relative m-auto hidden max-w-4xl md:block">
|
||||
<div className="flex flex-col items-center md:flex-row">
|
||||
<div className="mb-4 hidden md:mb-0 md:block md:max-w-44 md:border-r md:border-gray-600 md:pr-6">
|
||||
<p className="text-end text-sm text-black dark:text-gray-400">
|
||||
@@ -196,149 +202,586 @@ export function LandingImages() {
|
||||
<div className="mx-auto w-full max-w-5xl px-6">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<h2 className="font-mono font-semibold uppercase tracking-wider text-blue-600">
|
||||
{t("Features")}
|
||||
{t("FEATURES")}
|
||||
</h2>
|
||||
<p className="text-balance text-2xl text-foreground">
|
||||
<p className="text-balance text-2xl font-semibold text-muted-foreground">
|
||||
{"All In One Means"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-14 mt-6 flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/link.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("urlShorteningTitle")}
|
||||
{/* Short Link Service */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("shortLinkService")}
|
||||
</h3>
|
||||
<p className="text-lg">{t("urlShorteningDescription")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-around gap-10 md:flex-row">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/hosting.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={430}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("freeSubdomainHostingTitle")}
|
||||
</h3>
|
||||
<p className="text-lg">{t("freeSubdomainHostingDescription")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/email.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={450}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("emailReceiversSendersTitle")}
|
||||
</h3>
|
||||
<p className="text-lg">
|
||||
{t("emailReceiversSendersDescription")}{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="/dashboard/settings"
|
||||
target="_blank"
|
||||
>
|
||||
{t("applyYourApiKey")}
|
||||
</a>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("shortLinkDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.link className="mr-2 size-4" /> {t("customSuffix")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("customSuffixDetail", {
|
||||
defaultValue:
|
||||
"Create personalized short links with custom suffixes for better branding",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.lineChart className="mr-2 size-4" />{" "}
|
||||
{t("realtimeStats")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("realtimeStatsDetail", {
|
||||
defaultValue:
|
||||
"Track visitor counts, geographic locations, and device information in real-time",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.pwdKey className="mr-2 size-4" />{" "}
|
||||
{t("passwordProtection")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("passwordProtectionDetail", {
|
||||
defaultValue:
|
||||
"Add password protection to sensitive short links for enhanced security",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.clock className="mr-2 size-4" />
|
||||
{t("linkExpiration")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("linkExpirationDetail", {
|
||||
defaultValue:
|
||||
"Set custom expiration dates for temporary links and campaigns",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.qrcode className="mr-2 size-4" />
|
||||
{t("customQRCode")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("customQRCodeDetail", {
|
||||
defaultValue:
|
||||
"Generate customizable QR codes for your short links",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.braces className="mr-2 size-4" />
|
||||
{t("shortLinkOpenAPI")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("shortLinkOpenAPIDetail", {
|
||||
defaultValue:
|
||||
"Create and manage short links programmatically via REST API",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/link.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-around gap-10 md:flex-row">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/domain.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={430}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("multipleDomainsTitle")}
|
||||
{/* Domain Email Service */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("domainEmail")}
|
||||
</h3>
|
||||
<p className="text-lg">{t("multipleDomainsDescription")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/screenshot.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={460}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("websiteScreenshotApiTitle")}
|
||||
</h3>
|
||||
<p className="text-lg">
|
||||
{t("websiteScreenshotApiDescription")}{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="/dashboard/settings"
|
||||
target="_blank"
|
||||
>
|
||||
{t("applyYourApiKey")}
|
||||
</a>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("domainEmailDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.mail className="mr-2 size-4" />
|
||||
{t("customEmailPrefix")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("customEmailPrefixDetail", {
|
||||
defaultValue:
|
||||
"Create email addresses with custom prefixes using your domain",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.mailPlus className="mr-2 size-4" />
|
||||
{t("unlimitedMailboxes")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("unlimitedMailboxesDetail", {
|
||||
defaultValue:
|
||||
"Create as many email addresses as you need for different purposes",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.inbox className="mr-2 size-4" />
|
||||
{t("unlimitedReceiving")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("unlimitedReceivingDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.send className="mr-2 size-4" />
|
||||
{t("flexibleSending")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("flexibleSendingDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.mailOpen className="mr-2 size-4" />
|
||||
{t("emailForwarding")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("emailForwardingDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.braces className="mr-2 size-4" />
|
||||
{t("emailOpenAPI")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("emailOpenAPIDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/email.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row">
|
||||
<Image
|
||||
className="size-[260px] rounded-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/info.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={430}
|
||||
height={280}
|
||||
/>
|
||||
<div className="grids grids-dark px-2 py-4">
|
||||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||||
{t("metaInformationApiTitle")}
|
||||
{/* Subdomain Hosting Service */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("subdomainHosting")}
|
||||
</h3>
|
||||
<p className="text-lg">
|
||||
{t("metaInformationApiDescription")}{" "}
|
||||
<a
|
||||
className="underline"
|
||||
href="/dashboard/settings"
|
||||
target="_blank"
|
||||
>
|
||||
{t("applyYourApiKey")}
|
||||
</a>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("subdomainDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.cloudflare className="mr-2 size-4" />
|
||||
{t("cloudflareHosting")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("cloudflareHostingDetail", {
|
||||
defaultValue:
|
||||
"Leverage Cloudflare's global infrastructure for fast and reliable DNS hosting",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.globe className="mr-2 size-4" />
|
||||
{t("multiDomainSync")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("multiDomainSyncDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.puzzle className="mr-2 size-4" />
|
||||
{t("flexibleDNSConfig")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("flexibleDNSConfigDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.globeLock className="mr-2 size-4" />
|
||||
{t("antiAbuseManagement")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("antiAbuseManagementDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/hosting.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* File Storage Service */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("fileStorage")}
|
||||
</h3>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("fileStorageDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.globe className="mr-2 size-4" />
|
||||
{t("s3Compatible")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("s3CompatibleDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.dashboard className="mr-2 size-4" />
|
||||
{t("multipleBuckets")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("multipleBucketsDetail", {
|
||||
defaultValue:
|
||||
"Configure multiple storage buckets within a single cloud provider for better organization",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.fileText className="mr-2 size-4" />
|
||||
{t("uploadSizeLimit")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("uploadSizeLimitDetail", {
|
||||
defaultValue:
|
||||
"Set and adjust maximum file upload sizes based on your requirements",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.hand className="mr-2 size-4" />
|
||||
{t("multipleUploadMethods")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("multipleUploadMethodsDetail", {
|
||||
defaultValue:
|
||||
"Upload files using drag-and-drop, batch uploads, or paste from clipboard",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.trash className="mr-2 size-4" />
|
||||
{t("batchDelete")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("batchDeleteDetail", {
|
||||
defaultValue:
|
||||
"Delete multiple files at once for efficient file management",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.qrcode className="mr-2 size-4" />
|
||||
{t("quickShortLink")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("quickShortLinkDetail", {
|
||||
defaultValue:
|
||||
"Instantly generate short links and QR codes for your stored files",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/domain.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Open API Service */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("openAPI")}
|
||||
</h3>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("openAPIDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.scanQrCode className="mr-2 size-4" />
|
||||
{t("websiteMetadata")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("websiteMetadataDetail", {
|
||||
defaultValue:
|
||||
"Extract metadata such as title, description, and Open Graph tags from any website",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.camera className="mr-2 size-4" />
|
||||
{t("websiteScreenshot")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("websiteScreenshotDetail", {
|
||||
defaultValue:
|
||||
"Capture high-quality screenshots of any website for previews and documentation",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.qrcode className="mr-2 size-4" />
|
||||
{t("websiteQRCode")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("websiteQRCodeDetail", {
|
||||
defaultValue:
|
||||
"Convert any website URL into a scannable QR code",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.monitorDown className="mr-2 size-4" />
|
||||
{t("websiteConversion")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("websiteConversionDetail", {
|
||||
defaultValue:
|
||||
"Convert website content to Markdown or plain text format for easy integration",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.braces className="mr-2 size-4" />
|
||||
{t("apiKeyMechanism")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("apiKeyMechanismDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/screenshot.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Permission Management Module */}
|
||||
<div className="mt-16 grid gap-12 sm:px-12 lg:grid-cols-12 lg:gap-24 lg:px-0">
|
||||
<div className="items-start px-2 py-4 text-left lg:col-span-5">
|
||||
<h3 className="mb-4 text-xl font-bold text-blue-500 md:text-3xl">
|
||||
{t("permissionManagement")}
|
||||
</h3>
|
||||
<p className="font-semibold text-muted-foreground">
|
||||
{t("permissionManagementDescription")}
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.lineChart className="mr-2 size-4" />
|
||||
{t("dataVisualization")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("dataVisualizationDetail", {
|
||||
defaultValue:
|
||||
"View comprehensive dashboard with charts showing usage trends and analytics",
|
||||
})}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.cog className="mr-2 size-4" />
|
||||
{t("serviceConfiguration")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("serviceConfigurationDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.users className="mr-2 size-4" />
|
||||
{t("userManagement")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("userManagementDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.shieldCheck className="mr-2 size-4" />
|
||||
{t("loginMethods")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("loginMethodsDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
<Separator />
|
||||
<Collapsible>
|
||||
<CollapsibleTrigger className="flex w-full items-center py-3 hover:underline">
|
||||
<Icons.databaseZap className="mr-2 size-4" />
|
||||
{t("resourceManagement")}
|
||||
<Icons.chevronDown className="ml-auto size-4" />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pb-3 text-sm text-muted-foreground">
|
||||
{t("resourceManagementDetail")}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-clip rounded-xl border py-4 md:p-3.5 lg:col-span-7">
|
||||
<div className="flex size-full items-center justify-center rounded-lg border p-3 md:bg-muted/50">
|
||||
<Image
|
||||
className="size-[350px] rounded-lg transition-all hover:border hover:opacity-90 hover:shadow-xl"
|
||||
alt={t("exampleImageAlt")}
|
||||
src="/_static/landing/info.svg"
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||||
width={280}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TechStackGrid />
|
||||
|
||||
<DynamicData />
|
||||
|
||||
<div className="grids grids-dark mx-auto my-12 flex w-full max-w-6xl px-4">
|
||||
@@ -356,7 +799,7 @@ export function DynamicData() {
|
||||
<div className="mx-auto mt-10 max-w-5xl space-y-8 px-6 md:space-y-16">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<h2 className="font-mono font-semibold uppercase tracking-wider text-blue-600">
|
||||
{t("Stats")}
|
||||
{t("STATS")}
|
||||
</h2>
|
||||
<div className="text-balance text-2xl text-foreground">
|
||||
<span style={{ fontFamily: "Bahamas Bold" }}>WR.DO Cloud</span> in
|
||||
@@ -394,6 +837,86 @@ export function DynamicData() {
|
||||
);
|
||||
}
|
||||
|
||||
export function TechStackGrid() {
|
||||
const t = useTranslations("Landing");
|
||||
const items = [
|
||||
{
|
||||
icon: "N",
|
||||
title: "Next.js",
|
||||
description: "The most popular full stack React framework.",
|
||||
},
|
||||
{
|
||||
icon: "🔐",
|
||||
title: "Next Auth",
|
||||
description: "The best open source authentication library.",
|
||||
},
|
||||
{
|
||||
icon: "🗂️",
|
||||
title: "Prisma ORM",
|
||||
description: "Lightweight, performant, headless TypeScript ORM.",
|
||||
},
|
||||
{
|
||||
icon: "✏️",
|
||||
title: "Shadcn UI",
|
||||
description: "Open source components for building modern websites.",
|
||||
},
|
||||
{
|
||||
icon: "🎨",
|
||||
title: "Tailwind CSS",
|
||||
description: "The CSS framework for rapid UI development.",
|
||||
},
|
||||
{
|
||||
icon: "☁️",
|
||||
title: "Cloudflare",
|
||||
description: "The best open source cloud platform.",
|
||||
},
|
||||
{
|
||||
icon: "▲",
|
||||
title: "Vercel",
|
||||
description: "The best open source hosting platform.",
|
||||
},
|
||||
{
|
||||
icon: "📧",
|
||||
title: "Resend/Brevo",
|
||||
description: "The best email service.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto mt-16 max-w-5xl">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<h2 className="font-mono font-semibold uppercase tracking-wider text-blue-600">
|
||||
{t("TECH STACK")}
|
||||
</h2>
|
||||
<p className="text-balance text-2xl font-semibold text-muted-foreground">
|
||||
{t("Build with your favorite tech stack")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="cursor-pointer rounded-lg border border-gray-200 bg-white p-6 transition-all duration-200 hover:border-gray-300 hover:shadow-md dark:border-gray-700 dark:bg-muted"
|
||||
>
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-gray-100 to-gray-200 text-lg font-bold text-gray-700">
|
||||
{item.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{item.title}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardItem({
|
||||
bgColor = "bg-yellow-400",
|
||||
rotate = "rotate-12",
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
ArrowUpRight,
|
||||
BookOpen,
|
||||
BotMessageSquare,
|
||||
Braces,
|
||||
Bug,
|
||||
Calendar,
|
||||
Camera,
|
||||
@@ -16,16 +17,20 @@ import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
CirclePlay,
|
||||
Clock,
|
||||
CloudUpload,
|
||||
Code,
|
||||
Cog,
|
||||
Copy,
|
||||
Crown,
|
||||
DatabaseZap,
|
||||
Download,
|
||||
EllipsisVertical,
|
||||
Eye,
|
||||
File,
|
||||
FileText,
|
||||
GlobeLock,
|
||||
Hand,
|
||||
Heading1,
|
||||
HelpCircle,
|
||||
Home,
|
||||
@@ -49,16 +54,20 @@ import {
|
||||
MailPlus,
|
||||
MessageSquareQuote,
|
||||
MessagesSquare,
|
||||
MonitorDown,
|
||||
Moon,
|
||||
MoreVertical,
|
||||
Package,
|
||||
Paintbrush,
|
||||
Plus,
|
||||
Puzzle,
|
||||
QrCode,
|
||||
RefreshCw,
|
||||
ScanQrCode,
|
||||
Search,
|
||||
Send,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
SunMedium,
|
||||
Trash2,
|
||||
Type,
|
||||
@@ -87,15 +96,24 @@ export const Icons = {
|
||||
chevronRight: ChevronRight,
|
||||
chevronDown: ChevronDown,
|
||||
bookOpen: BookOpen,
|
||||
braces: Braces,
|
||||
check: Check,
|
||||
checkCheck: CheckCheck,
|
||||
close: X,
|
||||
code: Code,
|
||||
copy: Copy,
|
||||
clock: Clock,
|
||||
cog: Cog,
|
||||
type: Type,
|
||||
camera: Camera,
|
||||
calendar: Calendar,
|
||||
crown: Crown,
|
||||
puzzle: Puzzle,
|
||||
hand: Hand,
|
||||
scanQrCode: ScanQrCode,
|
||||
monitorDown: MonitorDown,
|
||||
shieldCheck: ShieldCheck,
|
||||
databaseZap: DatabaseZap,
|
||||
cloudUpload: ({ ...props }: LucideProps) => (
|
||||
<svg
|
||||
role="presentation"
|
||||
|
||||
@@ -410,7 +410,6 @@
|
||||
"platformDescription": "Link shortening, domain hosting, email manager and open api, everything you need to build better.",
|
||||
"documents": "Documents",
|
||||
"signInForFree": "Sign in for free",
|
||||
"exampleImageAlt": "example",
|
||||
"urlShorteningTitle": "URL Shortening",
|
||||
"urlShorteningDescription": "📖 Instantly transform long, unwieldy URLs into short, memorable links that are easy to share. Enjoy built-in analytics to track clicks, monitor performance, and gain insights into your audience—all in real time.",
|
||||
"freeSubdomainHostingTitle": "Free Subdomain Hosting",
|
||||
@@ -445,7 +444,88 @@
|
||||
"Happy Customers": "Happy Customers",
|
||||
"Short Links": "Short Links",
|
||||
"Email Addresses": "Email Addresses",
|
||||
"Inbox Emails": "Inbox Emails"
|
||||
"Inbox Emails": "Inbox Emails",
|
||||
"shortLinkService": "Short Link Generation Service",
|
||||
"shortLinkDescription": "Flexibly generate short links with real-time access tracking",
|
||||
"customSuffix": "Custom Short Link Suffix",
|
||||
"realtimeStats": "Real-time Access Statistics",
|
||||
"passwordProtection": "Password-Protected Links",
|
||||
"linkExpiration": "Link Expiration Time",
|
||||
"customQRCode": "Custom QR Code",
|
||||
"shortLinkOpenAPI": "Open API for Short Link Creation",
|
||||
"subdomainHosting": "Subdomain Hosting Service",
|
||||
"subdomainDescription": "Flexibly manage DNS records for multiple domains",
|
||||
"cloudflareHosting": "Hosted on Cloudflare",
|
||||
"multiDomainSync": "Multi-domain DNS Synchronization Management",
|
||||
"multiDomainSyncDetail": "Support for managing DNS records across multiple Cloudflare accounts and domains",
|
||||
"flexibleDNSConfig": "Flexible DNS Record Type Configuration",
|
||||
"flexibleDNSConfigDetail": "Support for creating various DNS record types (CNAME, A, TXT, etc.) configured per domain",
|
||||
"antiAbuseManagement": "Anti-abuse Management Mode",
|
||||
"antiAbuseManagementDetail": "Support for application mode with user submission and admin approval, with email notifications to administrators",
|
||||
"domainEmail": "Domain Email Service",
|
||||
"domainEmailDescription": "Create unlimited domain-based email addresses with flexible sending and receiving",
|
||||
"customEmailPrefix": "Custom Email Prefix",
|
||||
"unlimitedMailboxes": "Unlimited Mailbox Creation",
|
||||
"unlimitedReceiving": "Unlimited Email Receiving",
|
||||
"unlimitedReceivingDetail": "Powered by Cloudflare Email Worker",
|
||||
"flexibleSending": "Flexible Email Sending",
|
||||
"flexibleSendingDetail": "Multiple email service providers available including Resend and Brevo",
|
||||
"emailForwarding": "Email Forwarding and Push Notifications",
|
||||
"emailForwardingDetail": "Catch-all email forwarding and Telegram push notifications",
|
||||
"emailOpenAPI": "Open API Interface",
|
||||
"emailOpenAPIDetail": "Create new mailboxes and retrieve inbox lists via API",
|
||||
"fileStorage": "File Storage Service",
|
||||
"fileStorageDescription": "Store and manage files across multiple domains with S3-compatible storage solutions",
|
||||
"s3Compatible": "S3-Compatible Interface",
|
||||
"s3CompatibleDetail": "Support for multiple cloud storage platforms via S3 API including Cloudflare R2, AWS S3, and OSS",
|
||||
"multipleBuckets": "Multiple Storage Buckets per Provider",
|
||||
"uploadSizeLimit": "Dynamic File Upload Size Limits",
|
||||
"multipleUploadMethods": "Drag-and-drop, Batch, and Paste File Upload",
|
||||
"batchDelete": "Batch File Deletion",
|
||||
"quickShortLink": "Quick Generate File Short Links and QR Codes",
|
||||
"openAPI": "Open API Service",
|
||||
"openAPIDescription": "Provide comprehensive APIs for website analysis, conversion, and screenshot generation",
|
||||
"websiteMetadata": "Website Metadata API",
|
||||
"websiteScreenshot": "Website Screenshot API",
|
||||
"websiteQRCode": "Website to QR Code API",
|
||||
"websiteConversion": "Website to Markdown and Text Conversion",
|
||||
"apiKeyMechanism": "API Key Mechanism",
|
||||
"apiKeyMechanismDetail": "Support for generating user API Keys for third-party API calls",
|
||||
"permissionManagement": "Permission Management Module",
|
||||
"permissionManagementDescription": "Comprehensive administrative control and monitoring for service management",
|
||||
"dataVisualization": "Multi-dimensional Chart Display of Website Data",
|
||||
"serviceConfiguration": "Domain Service Configuration",
|
||||
"serviceConfigurationDetail": "Dynamically configure which services are enabled including short links and temporary email (send/receive)",
|
||||
"userManagement": "User List Management",
|
||||
"userManagementDetail": "Set permissions, allocate quotas, disable users, and more",
|
||||
"loginMethods": "Dynamic Login Method Configuration",
|
||||
"loginMethodsDetail": "Support for Google, GitHub, password, and LinuxDO login methods",
|
||||
"resourceManagement": "Unified Management of Short Links, Email, and Subdomains",
|
||||
"resourceManagementDetail": "Manage all user-created short links, email addresses, and subdomain resources",
|
||||
"exampleImageAlt": "Example image",
|
||||
"customSuffixDetail": "Create personalized short links with custom suffixes for better branding",
|
||||
"realtimeStatsDetail": "Track visitor counts, geographic locations, and device information in real-time",
|
||||
"passwordProtectionDetail": "Add password protection to sensitive short links for enhanced security",
|
||||
"linkExpirationDetail": "Set custom expiration dates for temporary links and campaigns",
|
||||
"customQRCodeDetail": "Generate customizable QR codes for your short links",
|
||||
"shortLinkOpenAPIDetail": "Create and manage short links programmatically via REST API",
|
||||
"cloudflareHostingDetail": "Leverage Cloudflare's global infrastructure for fast and reliable DNS hosting",
|
||||
"customEmailPrefixDetail": "Create email addresses with custom prefixes using your domain",
|
||||
"unlimitedMailboxesDetail": "Create as many email addresses as you need for different purposes",
|
||||
"multipleBucketsDetail": "Configure multiple storage buckets within a single cloud provider for better organization",
|
||||
"uploadSizeLimitDetail": "Set and adjust maximum file upload sizes based on your requirements",
|
||||
"multipleUploadMethodsDetail": "Upload files using drag-and-drop, batch uploads, or paste from clipboard",
|
||||
"batchDeleteDetail": "Delete multiple files at once for efficient file management",
|
||||
"quickShortLinkDetail": "Instantly generate short links and QR codes for your stored files",
|
||||
"websiteMetadataDetail": "Extract metadata such as title, description, and Open Graph tags from any website",
|
||||
"websiteScreenshotDetail": "Capture high-quality screenshots of any website for previews and documentation",
|
||||
"websiteQRCodeDetail": "Convert any website URL into a scannable QR code",
|
||||
"websiteConversionDetail": "Convert website content to Markdown or plain text format for easy integration",
|
||||
"dataVisualizationDetail": "View comprehensive dashboard with charts showing usage trends and analytics",
|
||||
"TECH STACK": "TECH STACK",
|
||||
"Build with your favorite tech stack": "Build with your favorite tech stack",
|
||||
"STATS": "STATS",
|
||||
"FEATURES": "FEATURES"
|
||||
},
|
||||
"Auth": {
|
||||
"Back": "Back",
|
||||
|
||||
@@ -410,8 +410,7 @@
|
||||
"platformDescription": "集成短链生成、子域名托管、无限邮箱服务，以及开放API接口，一站式域名管理解决方案，释放你的域名潜力",
|
||||
"documents": "部署文档",
|
||||
"signInForFree": "免费登录",
|
||||
"exampleImageAlt": "示例",
|
||||
"urlShorteningTitle": "短链生成器",
|
||||
"urlShorteningTitle": "短链生成",
|
||||
"urlShorteningDescription": "📖 立即将冗长、复杂的URL转换为短小易记的链接，便于分享。享受内置的分析功能，实时跟踪点击量、监控性能并深入了解您的受众。支持设置密码保护、自定义二维码生成，支持调用API生成。",
|
||||
"freeSubdomainHostingTitle": "子域名托管",
|
||||
"freeSubdomainHostingDescription": "🎉 管理多 Cloudflare 账户下的多个域名的 DNS 记录，支持创建多种 DNS 记录类型（CNAME、A、TXT 等）。",
|
||||
@@ -445,7 +444,88 @@
|
||||
"Happy Customers": "累计注册用户",
|
||||
"Short Links": "创建短链数量",
|
||||
"Email Addresses": "用户邮箱数量",
|
||||
"Inbox Emails": "接收邮件数量"
|
||||
"Inbox Emails": "接收邮件数量",
|
||||
"shortLinkService": "短链生成服务",
|
||||
"shortLinkDescription": "灵活生成短链接，实时追踪访问数据",
|
||||
"customSuffix": "自定义短链后缀",
|
||||
"realtimeStats": "实时访问统计",
|
||||
"passwordProtection": "设置密码保护链接",
|
||||
"linkExpiration": "链接过期时间",
|
||||
"customQRCode": "自定义二维码",
|
||||
"shortLinkOpenAPI": "开放 API 创建短链",
|
||||
"subdomainHosting": "子域名托管服务",
|
||||
"subdomainDescription": "灵活管理多个域名的 DNS 记录配置",
|
||||
"cloudflareHosting": "托管在 Cloudflare",
|
||||
"multiDomainSync": "多域名 DNS 同步管理",
|
||||
"multiDomainSyncDetail": "支持管理多 Cloudflare 账户下的多个域名的 DNS 记录",
|
||||
"flexibleDNSConfig": "灵活配置 DNS 记录类型",
|
||||
"flexibleDNSConfigDetail": "支持创建多种 DNS 记录类型（CNAME、A、TXT 等），根据不同的域名配置",
|
||||
"antiAbuseManagement": "防滥用管理模式",
|
||||
"antiAbuseManagementDetail": "支持开启申请模式（用户提交、管理员审批），均使用邮件通知管理员",
|
||||
"domainEmail": "域名邮箱服务",
|
||||
"domainEmailDescription": "创建无限域名邮箱，灵活收发邮件",
|
||||
"customEmailPrefix": "自定义邮箱前缀",
|
||||
"unlimitedMailboxes": "创建无限数量邮箱",
|
||||
"unlimitedReceiving": "接收无限制邮件",
|
||||
"unlimitedReceivingDetail": "依赖 Cloudflare Email Worker",
|
||||
"flexibleSending": "灵活发送邮件",
|
||||
"flexibleSendingDetail": "多渠道发件服务商可供选择，如 Resend、Brevo",
|
||||
"emailForwarding": "邮件转发与推送",
|
||||
"emailForwardingDetail": "Catch-all 邮件转发与 Telegram 推送",
|
||||
"emailOpenAPI": "开放 API 接口",
|
||||
"emailOpenAPIDetail": "通过 API 创建新邮箱，以及 API 获取收件箱列表",
|
||||
"fileStorage": "文件存储服务",
|
||||
"fileStorageDescription": "跨多个域名存储和管理文件，支持 S3 兼容存储方案",
|
||||
"s3Compatible": "兼容 S3 接口",
|
||||
"s3CompatibleDetail": "支持多渠道（S3 API）云存储平台，如 Cloudflare R2、AWS S3、OSS 等",
|
||||
"multipleBuckets": "单渠道多存储桶配置",
|
||||
"uploadSizeLimit": "动态配置文件上传大小限制",
|
||||
"multipleUploadMethods": "拖拽、批量、粘贴上传文件",
|
||||
"batchDelete": "批量删除文件",
|
||||
"quickShortLink": "快捷生成文件短链、二维码",
|
||||
"openAPI": "开放接口服务",
|
||||
"openAPIDescription": "提供网站分析、转换和截图生成的综合 API 服务",
|
||||
"websiteMetadata": "网站元数据 API",
|
||||
"websiteScreenshot": "网站截图 API",
|
||||
"websiteQRCode": "网站转二维码 API",
|
||||
"websiteConversion": "网站转换为 Markdown、Text",
|
||||
"apiKeyMechanism": "API Key 机制",
|
||||
"apiKeyMechanismDetail": "支持生成用户 API Key，用于第三方调用开放接口",
|
||||
"permissionManagement": "权限管理模块",
|
||||
"permissionManagementDescription": "全面的管理控制和服务监控",
|
||||
"dataVisualization": "多维度图表展示网站数据",
|
||||
"serviceConfiguration": "业务域名服务配置",
|
||||
"serviceConfigurationDetail": "动态配置各项域名相关服务是否启用，包括短链、临时邮箱（收发邮件）、子域名管理",
|
||||
"userManagement": "用户列表管理",
|
||||
"userManagementDetail": "设置权限、分配使用额度、禁用用户等",
|
||||
"loginMethods": "动态配置登录方式",
|
||||
"loginMethodsDetail": "支持 Google、GitHub、账户密码、LinuxDO 登陆方式",
|
||||
"resourceManagement": "短链、邮箱、子域名统一管理",
|
||||
"resourceManagementDetail": "管理所有用户创建的短链、邮箱、子域名资源",
|
||||
"exampleImageAlt": "示例图片",
|
||||
"customSuffixDetail": "使用自定义后缀创建个性化的短链接，增强品牌识别度",
|
||||
"realtimeStatsDetail": "实时追踪访问者数量、地理位置和设备信息",
|
||||
"passwordProtectionDetail": "为敏感的短链接添加密码保护，增强安全性",
|
||||
"linkExpirationDetail": "为临时链接和营销活动设置自定义过期日期",
|
||||
"customQRCodeDetail": "为短链接生成可自定义的二维码",
|
||||
"shortLinkOpenAPIDetail": "通过 REST API 以编程方式创建和管理短链接",
|
||||
"cloudflareHostingDetail": "利用 Cloudflare 全球基础设施提供快速可靠的 DNS 托管",
|
||||
"customEmailPrefixDetail": "使用你的域名创建具有自定义前缀的电子邮件地址",
|
||||
"unlimitedMailboxesDetail": "根据需要为不同目的创建尽可能多的电子邮件地址",
|
||||
"multipleBucketsDetail": "在单个云提供商内配置多个存储桶，以便更好地组织",
|
||||
"uploadSizeLimitDetail": "根据要求设置和调整最大文件上传大小",
|
||||
"multipleUploadMethodsDetail": "使用拖拽、批量上传或粘贴从剪贴板上传文件",
|
||||
"batchDeleteDetail": "一次删除多个文件以实现高效的文件管理",
|
||||
"quickShortLinkDetail": "即时为存储的文件生成短链接和二维码",
|
||||
"websiteMetadataDetail": "从任何网站提取标题、描述和 Open Graph 标签等元数据",
|
||||
"websiteScreenshotDetail": "为任何网站捕获高质量的截图，用于预览和文档记录",
|
||||
"websiteQRCodeDetail": "将任何网站 URL 转换为可扫描的二维码",
|
||||
"websiteConversionDetail": "将网站内容转换为 Markdown 或纯文本格式，便于集成",
|
||||
"dataVisualizationDetail": "查看包含使用趋势和分析图表的全面仪表板",
|
||||
"TECH STACK": "技术栈",
|
||||
"Build with your favorite tech stack": "使用你最喜欢的技术栈构建",
|
||||
"STATS": "STATS",
|
||||
"FEATURES": "功能特性"
|
||||
},
|
||||
"Auth": {
|
||||
"Back": "返回",
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user