diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index f258faa..cdc6e01 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -1,4 +1,5 @@
import HeroLanding, { LandingImages } from "@/components/sections/hero-landing";
+import { PricingSection } from "@/components/sections/pricing";
// import PreviewLanding from "@/components/sections/preview-landing";
@@ -8,6 +9,7 @@ export default function IndexPage() {
{/* */}
+
>
);
}
diff --git a/components/sections/hero-landing.tsx b/components/sections/hero-landing.tsx
index 6ea13f7..387536b 100644
--- a/components/sections/hero-landing.tsx
+++ b/components/sections/hero-landing.tsx
@@ -8,7 +8,6 @@ import { cn, nFormatter } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import { Icons } from "@/components/shared/icons";
-import { Doc } from "../../.contentlayer/generated/types";
import GitHubStarsWithSuspense from "../shared/github-star-wrapper";
import UrlShortener from "./url-shortener";
diff --git a/components/sections/pricing.tsx b/components/sections/pricing.tsx
new file mode 100644
index 0000000..075668b
--- /dev/null
+++ b/components/sections/pricing.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import type React from "react";
+import type { CSSProperties, ReactNode } from "react";
+import { motion } from "framer-motion";
+import { Check, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { Icons } from "../shared/icons";
+
+export const PricingSection = () => {
+ return (
+
+
+
+
+
+ Pricing
+
+
+ Use it for free for yourself, upgrade when your team needs advanced
+ control.
+
+
+
+
+
Get started free}
+ benefits={[
+ {
+ text: "100K tracked clicks/mo",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "10k new links/mo",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "180-day analytics retention",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "One domain",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Advanced analytics",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Basic support",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "API Access",
+ checked: true,
+ icon: ,
+ },
+ ]}
+ />
+ {/*
+ 14-day free trial
+
+ }
+ benefits={[
+ { text: "Five workspaces", checked: true },
+ { text: "Email support", checked: true },
+ { text: "7 day data retention", checked: true },
+ { text: "Custom roles", checked: true },
+ { text: "Priority support", checked: false },
+ { text: "SSO", checked: false },
+ ]}
+ /> */}
+ Contact us}
+ benefits={[
+ {
+ text: "Unlimited tracked clicks/mo",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Unlimited new links",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "1-year analytics retention",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Three domain",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Advanced analytics",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "Basic support",
+ checked: true,
+ icon: ,
+ },
+ {
+ text: "API Access",
+ checked: true,
+ icon: ,
+ },
+ ]}
+ />
+
+
+
+ );
+};
+
+const PriceCard = ({ tier, price, bestFor, CTA, benefits }: PriceCardProps) => {
+ return (
+
+
+
+ {tier}
+
+
+ {price}
+
+
+ {bestFor}
+
+
+
+
+ {benefits.map((b, i) => (
+
+ ))}
+
+
+ {CTA}
+
+ );
+};
+
+const Benefit = ({ text, checked, icon }: BenefitType) => {
+ return (
+
+ {checked ? (
+ {icon}
+ ) : (
+
+
+
+ )}
+
+ {text}
+
+
+ );
+};
+
+const Card = ({ className, children, style = {} }: CardProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const GhostButton = ({ children, className, ...rest }: GhostButtonProps) => {
+ return (
+
+ );
+};
+
+type PriceCardProps = {
+ tier: string;
+ price: string;
+ bestFor: string;
+ CTA: ReactNode;
+ benefits: BenefitType[];
+};
+
+type CardProps = {
+ className?: string;
+ children?: ReactNode;
+ style?: CSSProperties;
+};
+
+type BenefitType = {
+ text: string;
+ checked: boolean;
+ icon: ReactNode;
+};
+
+type GhostButtonProps = {
+ children: ReactNode;
+ className?: string;
+} & React.ButtonHTMLAttributes;
diff --git a/components/sections/url-shortener.tsx b/components/sections/url-shortener.tsx
index cef412d..d886ba3 100644
--- a/components/sections/url-shortener.tsx
+++ b/components/sections/url-shortener.tsx
@@ -42,7 +42,7 @@ export default function UrlShotenerExp() {
-
+
@@ -65,14 +65,14 @@ export default function UrlShotenerExp() {
-
+
wr.do/s/try
-
@@ -102,18 +102,18 @@ export default function UrlShotenerExp() {
>
- wr.do/login
+ wr.do/dashboard
-
+
-
+