eny.space Landingpage
1
fork

Configure Feed

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

fix(pricing-section): adjust badge position

+74 -72
+74 -72
app/components/pricing/pricing-section.tsx
··· 88 88 </div> 89 89 90 90 <div className="mx-auto mt-12 grid max-w-6xl gap-6 md:grid-cols-3"> 91 - {PLANS.map((plan) => ( 91 + {PLANS.map((plan) => 92 92 (() => { 93 93 const params = new URLSearchParams({ 94 94 auto_checkout: "1", ··· 98 98 const signupHref = `/signup?${params.toString()}`; 99 99 100 100 return ( 101 - <Card 102 - key={plan.name} 103 - className={[ 104 - "flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30", 105 - plan.highlight 106 - ? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-white shadow-[0_0_36px_rgba(232,121,249,0.3)]" 107 - : "", 108 - ] 109 - .filter(Boolean) 110 - .join(" ")} 111 - > 112 - <CardHeader className="flex flex-col gap-2 px-0"> 113 - <div className="flex items-center justify-between gap-3"> 114 - <CardTitle className="text-sm font-semibold uppercase tracking-wide text-white"> 115 - {plan.name} 116 - </CardTitle> 117 - {plan.badge ? ( 118 - <span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-fuchsia-300 md:text-[11px]"> 119 - {plan.badge} 120 - </span> 121 - ) : null} 122 - </div> 123 - <div className="mt-4 flex items-baseline gap-2"> 124 - <span className="text-4xl font-semibold sm:text-5xl text-white"> 125 - {plan.price} 126 - </span> 127 - <span className="text-sm font-medium opacity-80 text-white"> 128 - {plan.period} 129 - </span> 130 - </div> 131 - <Paragraph className={["mt-3 text-sm text-white/70"].join(" ")}> 132 - {plan.description} 133 - </Paragraph> 134 - </CardHeader> 135 - 136 - <CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0"> 137 - <ButtonLink 138 - href={signupHref} 101 + <Card 102 + key={plan.name} 139 103 className={[ 140 - "w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition", 104 + "flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30", 141 105 plan.highlight 142 - ? "bg-neutral-950 text-fuchsia-200 hover:bg-neutral-900" 143 - : "bg-white text-neutral-950 hover:bg-neutral-200", 144 - ].join(" ")} 106 + ? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-white shadow-[0_0_36px_rgba(232,121,249,0.3)]" 107 + : "", 108 + ] 109 + .filter(Boolean) 110 + .join(" ")} 145 111 > 146 - Get started 147 - </ButtonLink> 112 + <CardHeader className="flex flex-col gap-2 px-0"> 113 + <div className="flex items-center justify-between gap-3"> 114 + <CardTitle className="text-sm font-semibold uppercase tracking-wide text-white"> 115 + {plan.name} 116 + </CardTitle> 117 + {plan.badge ? ( 118 + <span className="absolute right-[7%] rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-fuchsia-300 md:text-[11px]"> 119 + {plan.badge} 120 + </span> 121 + ) : null} 122 + </div> 123 + <div className="mt-4 flex items-baseline gap-2"> 124 + <span className="text-4xl font-semibold sm:text-5xl text-white"> 125 + {plan.price} 126 + </span> 127 + <span className="text-sm font-medium opacity-80 text-white"> 128 + {plan.period} 129 + </span> 130 + </div> 131 + <Paragraph 132 + className={["mt-3 text-sm text-white/70"].join(" ")} 133 + > 134 + {plan.description} 135 + </Paragraph> 136 + </CardHeader> 137 + 138 + <CardContent className="mt-6 flex flex-1 flex-col gap-6 px-0"> 139 + <ButtonLink 140 + href={signupHref} 141 + className={[ 142 + "w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition", 143 + plan.highlight 144 + ? "bg-neutral-950 text-fuchsia-200 hover:bg-neutral-900" 145 + : "bg-white text-neutral-950 hover:bg-neutral-200", 146 + ].join(" ")} 147 + > 148 + Get started 149 + </ButtonLink> 148 150 149 - <div className="pt-2 text-left"> 150 - <Paragraph 151 - className={[ 152 - "text-xs font-semibold uppercase tracking-[0.18em] text-white/60", 153 - ].join(" ")} 154 - > 155 - Key features on {plan.name.split(" ")[0]} 156 - </Paragraph> 157 - <ul className="mt-4 space-y-2 text-sm"> 158 - {plan.features.map((feature) => ( 159 - <li 160 - key={feature} 161 - className={["flex items-start gap-2 text-white/75"].join( 162 - " ", 163 - )} 151 + <div className="pt-2 text-left"> 152 + <Paragraph 153 + className={[ 154 + "text-xs font-semibold uppercase tracking-[0.18em] text-white/60", 155 + ].join(" ")} 164 156 > 165 - <div className="inline-flex items-center gap-2"> 166 - <span className="inline-block size-1.5 rounded-full bg-fuchsia-400" /> 167 - <span>{feature}</span> 168 - </div> 169 - </li> 170 - ))} 171 - </ul> 172 - </div> 173 - </CardContent> 174 - </Card> 157 + Key features on {plan.name.split(" ")[0]} 158 + </Paragraph> 159 + <ul className="mt-4 space-y-2 text-sm"> 160 + {plan.features.map((feature) => ( 161 + <li 162 + key={feature} 163 + className={[ 164 + "flex items-start gap-2 text-white/75", 165 + ].join(" ")} 166 + > 167 + <div className="inline-flex items-center gap-2"> 168 + <span className="inline-block size-1.5 rounded-full bg-fuchsia-400" /> 169 + <span>{feature}</span> 170 + </div> 171 + </li> 172 + ))} 173 + </ul> 174 + </div> 175 + </CardContent> 176 + </Card> 175 177 ); 176 - })() 177 - ))} 178 + })(), 179 + )} 178 180 </div> 179 181 </section> 180 182 );