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
-
+
-

+

12.6K clicks

-