mirror of
https://github.com/lukevella/rallly.git
synced 2025-04-28 09:46:39 +02:00
💄 Update styles
This commit is contained in:
parent
9ad31999d6
commit
72313920ce
3 changed files with 22 additions and 12 deletions
|
@ -88,9 +88,9 @@ export const MarketingHero = ({
|
|||
<Link
|
||||
locale="en"
|
||||
href="/blog/introducing-quick-create"
|
||||
className="hover:ring-primary relative inline-flex items-center gap-x-3 rounded-full border bg-gray-100 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-gray-50 focus:ring-2 focus:ring-gray-300 focus:ring-offset-1"
|
||||
className="group relative inline-flex items-center gap-x-2 rounded-full border bg-gray-50 py-1 pl-1 pr-4 text-sm leading-6 text-gray-600 hover:bg-white"
|
||||
>
|
||||
<Badge variant="green">
|
||||
<Badge variant="secondary">
|
||||
<Trans ns="home" i18nKey="new" defaults="New" />
|
||||
</Badge>
|
||||
<span className="flex items-center gap-x-1">
|
||||
|
@ -98,7 +98,10 @@ export const MarketingHero = ({
|
|||
i18nKey="home:quickCreateBlog"
|
||||
defaults="Introducing Quick Create"
|
||||
/>
|
||||
<ChevronRightIcon className="-mr-1 size-4" aria-hidden="true" />
|
||||
<ChevronRightIcon
|
||||
className="-mr-1 size-4 transition-transform group-active:translate-x-0.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -122,7 +125,6 @@ export const MarketingHero = ({
|
|||
"whitespace-nowrap text-center text-xs text-gray-600",
|
||||
handwritten.className,
|
||||
"decoration underline decoration-gray-300 decoration-2 underline-offset-8",
|
||||
"skew-x-[-10deg]",
|
||||
)}
|
||||
>
|
||||
<Trans
|
||||
|
|
|
@ -108,7 +108,7 @@ export function Sidebar() {
|
|||
<li>
|
||||
<PayWallDialog>
|
||||
<DialogTrigger
|
||||
className="relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-200/50 px-4 py-3 text-left ring-gray-200 hover:bg-gray-200 focus-visible:border-gray-300"
|
||||
className="relative mb-4 flex w-full items-center gap-4 overflow-hidden rounded-md border bg-gray-50/50 px-4 py-3 text-left ring-gray-200 hover:bg-gray-50 focus-visible:border-gray-300"
|
||||
onClick={() =>
|
||||
posthog?.capture("trigger paywall", { from: "sidebar" })
|
||||
}
|
||||
|
|
|
@ -3,7 +3,13 @@
|
|||
import { pricingData } from "@rallly/billing/pricing";
|
||||
import { Badge } from "@rallly/ui/badge";
|
||||
import type { DialogProps } from "@rallly/ui/dialog";
|
||||
import { Dialog, DialogContent, useDialog } from "@rallly/ui/dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogTitle,
|
||||
useDialog,
|
||||
} from "@rallly/ui/dialog";
|
||||
import { RadioGroup, RadioGroupItem } from "@rallly/ui/radio-group";
|
||||
import { CheckIcon, SparklesIcon } from "lucide-react";
|
||||
import * as m from "motion/react-m";
|
||||
|
@ -56,16 +62,18 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
|
|||
</m.div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="mb-2 mt-4 text-center text-xl font-bold">
|
||||
<DialogTitle className="mb-1 mt-2 text-center text-xl font-bold">
|
||||
<Trans defaults="Upgrade to Pro" i18nKey="upgradePromptTitle" />
|
||||
</h1>
|
||||
<p className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-muted-foreground mb-4 text-center text-sm leading-relaxed">
|
||||
<Trans
|
||||
i18nKey="upgradeOverlaySubtitle3"
|
||||
defaults="Unlock these feature by upgrading to a Pro plan."
|
||||
/>
|
||||
</p>
|
||||
<ul className="grid grid-cols-2 justify-center gap-2 text-center text-sm font-medium">
|
||||
</DialogDescription>
|
||||
</header>
|
||||
<section>
|
||||
<ul className="grid grid-cols-2 justify-center gap-2 text-sm font-medium">
|
||||
<li>
|
||||
<CheckIcon className="mr-2 inline-block size-4 text-green-600" />
|
||||
<Trans i18nKey="featureNameFinalize" defaults="Finalize Poll" />
|
||||
|
@ -92,7 +100,7 @@ export function PayWallDialog({ children, ...forwardedProps }: DialogProps) {
|
|||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</section>
|
||||
<section>
|
||||
<RadioGroup value={period} onValueChange={setPeriod}>
|
||||
<li className="relative flex items-center justify-between rounded-lg border bg-gray-50 p-4 focus-within:bg-gray-100 focus-within:ring-gray-300 hover:bg-gray-100">
|
||||
|
|
Loading…
Add table
Reference in a new issue