Skip to content

Commit 29f6961

Browse files
griffinkellygriffinkelly
authored
Pricing updates (#81)
* Update WP page off Feedback * Add login button and update pricing to add annual plan
1 parent 84e8506 commit 29f6961

File tree

3 files changed

+176
-3
lines changed

3 files changed

+176
-3
lines changed

‎src/app/ai/header.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,12 @@ export default function HeaderStandalone({ className }: HeaderStandaloneProps) {
108108
/>
109109
</svg>
110110
</a>
111+
<a
112+
href="https://app.grapesjs.com/dashboard"
113+
className="max-lg:hidden inline-block px-4 py-2 text-sm font-semibold leading-5 text-gray-100 no-underline border border-gray-600 rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-800 hover:border-gray-500 sm:px-5 sm:py-2 lg:px-6 lg:py-2 whitespace-nowrap"
114+
>
115+
Login
116+
</a>
111117
<a
112118
href="https://app.grapesjs.com/dashboard"
113119
className="inline-block px-4 py-2 text-sm font-semibold leading-5 text-gray-100 no-underline bg-purple-600 border border-purple-600 rounded-lg cursor-pointer transition-all duration-200 hover:bg-opacity-90 sm:px-5 sm:py-2 lg:px-6 lg:py-2 whitespace-nowrap"
@@ -230,7 +236,14 @@ export default function HeaderStandalone({ className }: HeaderStandaloneProps) {
230236
</a>
231237
<a
232238
href="https://app.grapesjs.com/dashboard"
233-
className="mt-4 w-full text-center px-6 py-3 text-base font-semibold text-white no-underline bg-purple-600 border border-purple-600 rounded-lg cursor-pointer transition-all duration-200 hover:bg-opacity-90"
239+
className="mt-4 w-full text-center px-6 py-3 text-base font-semibold text-gray-100 no-underline border border-gray-600 rounded-lg cursor-pointer transition-all duration-200 hover:bg-gray-800 hover:border-gray-500"
240+
onClick={closeMobileMenu}
241+
>
242+
Login
243+
</a>
244+
<a
245+
href="https://app.grapesjs.com/dashboard"
246+
className="mt-2 w-full text-center px-6 py-3 text-base font-semibold text-white no-underline bg-purple-600 border border-purple-600 rounded-lg cursor-pointer transition-all duration-200 hover:bg-opacity-90"
234247
onClick={closeMobileMenu}
235248
>
236249
Get Started

‎src/app/pricing/page.tsx‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const PricingPageClient = () => {
2727
const [ctaPulseState, setCtaPulseState] = useState(0);
2828
const [showBottomCtaHighlight, setShowBottomCtaHighlight] = useState(false);
2929
const [bottomCtaPulseState, setBottomCtaPulseState] = useState(0);
30+
const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("annual");
3031

3132
const starterRef = useRef<HTMLDivElement>(null);
3233
const proRef = useRef<HTMLDivElement>(null);
@@ -437,6 +438,27 @@ const PricingPageClient = () => {
437438
<h2 className={styles.pricingHeading} style={{ color: "#ffffff" }}>
438439
Pricing
439440
</h2>
441+
{/* Billing Toggle */}
442+
<div className={styles.billingToggleContainer}>
443+
<button
444+
type="button"
445+
className={`${styles.billingToggleOption} ${
446+
billingPeriod === "monthly" ? styles.billingToggleActive : ""
447+
}`}
448+
onClick={() => setBillingPeriod("monthly")}
449+
>
450+
Monthly
451+
</button>
452+
<button
453+
type="button"
454+
className={`${styles.billingToggleOption} ${
455+
billingPeriod === "annual" ? styles.billingToggleActive : ""
456+
}`}
457+
onClick={() => setBillingPeriod("annual")}
458+
>
459+
Annual
460+
</button>
461+
</div>
440462
<div className={styles.pricingGrid}>
441463
{/* Free Plan */}
442464
<div
@@ -531,7 +553,18 @@ const PricingPageClient = () => {
531553
className={styles.proPlanPrice}
532554
style={{ color: "#ffffff" }}
533555
>
534-
$10<span className={styles.proPlanPeriod}>/month</span>
556+
{billingPeriod === "annual" ? (
557+
<>
558+
<span className={styles.strikethroughPrice}>$10</span>
559+
<span>$8.33</span>
560+
<span className={styles.proPlanPeriod}>/month</span>
561+
<div className={styles.billingNote}>(billed annually)</div>
562+
</>
563+
) : (
564+
<>
565+
$10<span className={styles.proPlanPeriod}>/month</span>
566+
</>
567+
)}
535568
</div>
536569
<p className={styles.planDescription}>
537570
Everything in Free, plus:
@@ -545,6 +578,11 @@ const PricingPageClient = () => {
545578
/>
546579
500 AI credits per month
547580
</li>
581+
{billingPeriod === "annual" && (
582+
<li className={styles.bonusCreditsItem}>
583+
<span className={styles.bonusCreditsBadge}>+1800 EXTRA AI CREDITS</span>
584+
</li>
585+
)}
548586
<li className={styles.freeFeature1}>
549587
<img
550588
src="https://api.iconify.design/mdi:check-circle.svg?color=%23BCACFD&width=20&height=20"

‎src/app/pricing/pricing.module.css‎

Lines changed: 123 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,49 @@ body {
358358
line-height: 2.5rem;
359359
font-weight: 300;
360360
letter-spacing: 0.025em;
361-
margin-bottom: 4rem;
361+
margin-bottom: 2rem;
362+
}
363+
364+
/* Billing Toggle */
365+
.billingToggleContainer {
366+
display: flex;
367+
justify-content: center;
368+
align-items: center;
369+
gap: 0.5rem;
370+
margin-bottom: 3rem;
371+
background-color: #1a1329;
372+
border-radius: 0.5rem;
373+
padding: 0.25rem;
374+
border: 1px solid rgb(31 41 55 / 1);
375+
width: fit-content;
376+
margin-left: auto;
377+
margin-right: auto;
378+
}
379+
380+
.billingToggleOption {
381+
padding: 0.5rem 1.5rem;
382+
border-radius: 0.375rem;
383+
background-color: transparent;
384+
color: #9ca3af;
385+
border: none;
386+
font-weight: 500;
387+
cursor: pointer;
388+
transition: all 0.2s ease;
389+
font-size: 0.875rem;
390+
line-height: 1.25rem;
391+
}
392+
393+
.billingToggleOption:hover {
394+
color: #ffffff;
395+
}
396+
397+
.billingToggleActive {
398+
background-color: #8b5cf6;
399+
color: #ffffff;
400+
}
401+
402+
.billingToggleActive:hover {
403+
background-color: #7c3aed;
362404
}
363405

364406
.pricingSubtitle {
@@ -428,6 +470,71 @@ body {
428470
position: relative;
429471
}
430472

473+
/* Pro Plan Badges */
474+
.proBadgesContainer {
475+
display: flex;
476+
flex-direction: column;
477+
gap: 0.5rem;
478+
margin-bottom: 1rem;
479+
align-items: center;
480+
}
481+
482+
.proBadgeSave {
483+
background-color: #16a34a;
484+
color: #ffffff;
485+
padding: 0.25rem 0.75rem;
486+
border-radius: 0.375rem;
487+
font-size: 0.75rem;
488+
line-height: 1rem;
489+
font-weight: 600;
490+
white-space: nowrap;
491+
}
492+
493+
.proBadgeCredits {
494+
background-color: #a16207;
495+
color: #ffffff;
496+
padding: 0.25rem 0.75rem;
497+
border-radius: 0.375rem;
498+
font-size: 0.75rem;
499+
line-height: 1rem;
500+
font-weight: 600;
501+
white-space: nowrap;
502+
}
503+
504+
.inlineBadgeCredits {
505+
background-color: #a16207;
506+
color: #ffffff;
507+
padding: 0.25rem 0.75rem;
508+
border-radius: 0.375rem;
509+
font-size: 0.75rem;
510+
line-height: 1rem;
511+
font-weight: 600;
512+
white-space: nowrap;
513+
margin-left: 0.5rem;
514+
display: inline-block;
515+
}
516+
517+
.bonusCreditsItem {
518+
list-style: none;
519+
padding: 0;
520+
margin: 0;
521+
margin-left: 2rem;
522+
margin-top: -0.5rem;
523+
margin-bottom: 0.5rem;
524+
}
525+
526+
.bonusCreditsBadge {
527+
background-color: #a16207;
528+
color: #ffffff;
529+
padding: 0.25rem 0.75rem;
530+
border-radius: 0.375rem;
531+
font-size: 0.75rem;
532+
line-height: 1rem;
533+
font-weight: 600;
534+
white-space: nowrap;
535+
display: inline-block;
536+
}
537+
431538
.proPlan:hover {
432539
border-color: rgb(55 65 81 / 1);
433540
}
@@ -496,6 +603,21 @@ body {
496603
color: rgb(156 163 175 / 1);
497604
}
498605

606+
.strikethroughPrice {
607+
text-decoration: line-through;
608+
color: rgb(156 163 175 / 1);
609+
font-size: 1.5rem;
610+
margin-right: 0.5rem;
611+
}
612+
613+
.billingNote {
614+
font-size: 0.875rem;
615+
line-height: 1.25rem;
616+
color: rgb(156 163 175 / 1);
617+
margin-top: 0.25rem;
618+
font-weight: 300;
619+
}
620+
499621
.planDescription {
500622
text-align: center;
501623
font-size: 0.875rem;

0 commit comments

Comments
 (0)