eny.space Landingpage
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(pricing): add pricing section

+170
+2
app/components/pricing/index.ts
··· 1 + export { PricingSection } from "./pricing-section"; 2 +
+166
app/components/pricing/pricing-section.tsx
··· 1 + import { 2 + Card, 3 + CardContent, 4 + CardHeader, 5 + CardTitle, 6 + } from "@/actions/components/ui/card"; 7 + import { ButtonLink } from "@/components/button-link"; 8 + import { Heading } from "@/components/heading"; 9 + import { Paragraph } from "@/components/paragraph"; 10 + 11 + type PricingPlan = { 12 + name: string; 13 + price: string; 14 + period: string; 15 + badge?: string; 16 + description: string; 17 + highlight?: boolean; 18 + features: string[]; 19 + }; 20 + 21 + const PLANS: PricingPlan[] = [ 22 + { 23 + name: "Starter plan", 24 + price: "$19", 25 + period: "per month", 26 + description: "Perfect for small projects.", 27 + features: [ 28 + "1 GB storage", 29 + "5 app deployments", 30 + "Basic security protocols", 31 + "24/7 support access", 32 + ], 33 + }, 34 + { 35 + name: "Growth plan", 36 + price: "$49", 37 + period: "per month", 38 + badge: "Popular", 39 + description: "Scale without limits.", 40 + highlight: true, 41 + features: [ 42 + "10 GB storage", 43 + "Unlimited app deployments", 44 + "Advanced security and encryption", 45 + "Priority support with dedicated manager", 46 + ], 47 + }, 48 + { 49 + name: "Pro plan", 50 + price: "$99", 51 + period: "per month", 52 + description: "Enterprise‑level performance.", 53 + features: [ 54 + "Unlimited storage", 55 + "Custom domain support", 56 + "Dedicated node hosting", 57 + "Real‑time monitoring and analytics", 58 + "Premium 24/7 support with SLA", 59 + ], 60 + }, 61 + ]; 62 + 63 + export function PricingSection() { 64 + return ( 65 + <section className="relative w-full bg-neutral-950 px-4 py-20 sm:px-6 sm:py-24"> 66 + <div className="mx-auto max-w-5xl text-center"> 67 + <Heading 68 + as="h2" 69 + className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl" 70 + > 71 + Flexible Pricing for Every Stage of Growth. 72 + </Heading> 73 + <Paragraph className="mt-4 text-sm text-white/70 sm:text-base"> 74 + From startups to enterprises, choose a plan that fits your needs. Pay 75 + only for what you use and scale effortlessly. 76 + </Paragraph> 77 + </div> 78 + 79 + <div className="mx-auto mt-12 grid max-w-6xl gap-6 md:grid-cols-3"> 80 + {PLANS.map((plan) => ( 81 + <Card 82 + key={plan.name} 83 + className={[ 84 + "flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-neutral-800/90 to-neutral-900/90 p-6 text-white shadow-xl/30", 85 + plan.highlight 86 + ? "relative bg-gradient-to-b from-lime-400/90 via-lime-400/80 to-lime-500/90 text-neutral-950 shadow-[0_0_40px_rgba(190,242,100,0.4)]" 87 + : "", 88 + ] 89 + .filter(Boolean) 90 + .join(" ")} 91 + > 92 + <CardHeader className="flex flex-col gap-2 px-0"> 93 + <div className="flex items-center justify-between gap-3"> 94 + <CardTitle className="text-sm font-semibold uppercase tracking-wide"> 95 + {plan.name} 96 + </CardTitle> 97 + {plan.badge ? ( 98 + <span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-lime-300 md:text-[11px]"> 99 + {plan.badge} 100 + </span> 101 + ) : null} 102 + </div> 103 + <div className="mt-4 flex items-baseline gap-2"> 104 + <span className="text-4xl font-semibold sm:text-5xl"> 105 + {plan.price} 106 + </span> 107 + <span className="text-sm font-medium opacity-80"> 108 + {plan.period} 109 + </span> 110 + </div> 111 + <Paragraph 112 + className={[ 113 + "mt-3 text-sm", 114 + plan.highlight ? "text-neutral-900/80" : "text-white/70", 115 + ].join(" ")} 116 + > 117 + {plan.description} 118 + </Paragraph> 119 + </CardHeader> 120 + 121 + <CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0"> 122 + <ButtonLink 123 + href="/signup" 124 + className={[ 125 + "w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition", 126 + plan.highlight 127 + ? "bg-neutral-950 text-lime-300 hover:bg-neutral-900" 128 + : "bg-white text-neutral-950 hover:bg-neutral-200", 129 + ].join(" ")} 130 + > 131 + Get started 132 + </ButtonLink> 133 + 134 + <div className="pt-2 text-left"> 135 + <Paragraph 136 + className={[ 137 + "text-xs font-semibold uppercase tracking-[0.18em]", 138 + plan.highlight ? "text-neutral-900/70" : "text-white/60", 139 + ].join(" ")} 140 + > 141 + Key features on {plan.name.split(" ")[0]} 142 + </Paragraph> 143 + <ul className="mt-4 space-y-2 text-sm"> 144 + {plan.features.map((feature) => ( 145 + <li 146 + key={feature} 147 + className={[ 148 + "flex items-start gap-2", 149 + plan.highlight 150 + ? "text-neutral-900/80" 151 + : "text-white/75", 152 + ].join(" ")} 153 + > 154 + <span className="mt-1 inline-block size-1.5 rounded-full bg-lime-400" /> 155 + <span>{feature}</span> 156 + </li> 157 + ))} 158 + </ul> 159 + </div> 160 + </CardContent> 161 + </Card> 162 + ))} 163 + </div> 164 + </section> 165 + ); 166 + }
+2
app/page.tsx
··· 1 1 import { Hero } from "@/components/hero/hero"; 2 2 import { LogoBar } from "@/components/logo-bar"; 3 3 import { FeaturesSection } from "@/components/features"; 4 + import { PricingSection } from "@/components/pricing"; 4 5 5 6 export default function Page() { 6 7 return ( ··· 8 9 <Hero /> 9 10 <LogoBar /> 10 11 <FeaturesSection /> 12 + <PricingSection /> 11 13 </> 12 14 ); 13 15 }