Skip to content

Commit fcc4302

Browse files
apsinghdevapsinghdev
committed
perf: improve the perf of pricing page
1 parent 0512164 commit fcc4302

4 files changed

Lines changed: 414 additions & 79 deletions

File tree

‎apps/web/src/app/(main)/(landing)/pricing/PricingContent.tsx‎

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,248 @@
1+
"use client";
2+
3+
import { motion } from "framer-motion";
4+
import { CornerDownRight, Target } from "lucide-react";
5+
import Link from "next/link";
6+
import { ActiveTag } from "@/components/ui/ActiveTag";
7+
8+
const opensoxFeatures = [
9+
{
10+
id: 1,
11+
title: "Opensox Advanced search tool",
12+
description:
13+
"One and only tool in the market that let you find open source with blizzing speed and scary accuracy. It will have:",
14+
features: [
15+
"Faster and accurate search of projects",
16+
"Higher accuracy (so that you exactly land on your dream open source project)",
17+
"Advanced filters like, GSOC, YC, funding, hire contributors, trending, niche (like AI, Core ML, Web3, MERN), bounties, and many more.",
18+
],
19+
},
20+
{
21+
id: 2,
22+
title: "OX Newsletter",
23+
description:
24+
"A newsletter that keeps you ahead in open source world. It will cover:",
25+
features: [
26+
"Jobs/internships in opensource projects/companies",
27+
"Funding news",
28+
"What's trending in open source ecosystem",
29+
"Upcoming trends",
30+
"Tips to ace in open source",
31+
"What's happening in open source companies?",
32+
],
33+
},
34+
{
35+
id: 3,
36+
title: "30 days Opensox challenge sheet",
37+
description: [
38+
"A comprehensive sheet of 30+ modules along with detailed videos to give you a clear path to start rocking in open source.",
39+
"It will contain videos, resouces and hand made docs.",
40+
<>
41+
In each of the 30 steps, you will learn, then apply, If stuck,
42+
we&apos;ll help and then we&apos;ll do an accountability check.{" "}
43+
<Link
44+
href="https://www.youtube.com/playlist?list=PLiWTvT-J4wHhDh-Mngogynfusor-694G-"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
className="hover:underline text-[#a472ea]"
48+
>
49+
Check here.
50+
</Link>
51+
</>,
52+
],
53+
features: [],
54+
},
55+
];
56+
57+
const whySub = [
58+
{
59+
content:
60+
"Currently, Opensox 2.0 is in progress (70% done) so till the launch, we are offering Pro plan at a discounted price - $49 for the whole year",
61+
},
62+
{
63+
content:
64+
"This offer is only available for the first 1000 (64 slots booked) users",
65+
},
66+
{
67+
content:
68+
"After the launch, this $49 offer be removed and Opensox Pro will be around ~ $120 for whole year ($10/mo.)",
69+
},
70+
{
71+
content: "The price of the dollar is constantly increasing.",
72+
},
73+
];
74+
75+
export const PricingFeaturesSection = () => {
76+
return (
77+
<>
78+
<div className=" py-8 border-b border-[#252525]">
79+
<h2 className="text-center text-3xl tracking-tight font-medium">
80+
What is Opensox 2.0?
81+
</h2>
82+
</div>
83+
<div className=" w-full h-full flex flex-col gap-6 border-b border-[#252525]">
84+
<ul className="flex flex-col lg:flex-row [&>li]:w-full [&>li]:p-6 divide-y lg:divide-y-0 lg:divide-x divide-[#252525] h-full ">
85+
{opensoxFeatures.map((feature, index) => {
86+
// render first item (LCP element) immediately without animation
87+
const isLCPElement = index === 0;
88+
89+
if (isLCPElement) {
90+
return (
91+
<li
92+
key={index}
93+
className="flex flex-col gap-4 w-full flex-1"
94+
>
95+
<div className="flex flex-col gap-2 w-full">
96+
<div className="flex gap-4 items-center">
97+
<div className="text-6xl font-mono font-semibold text-transparent bg-clip-text bg-gradient-to-b from-[#a472ea] to-[#341e7b]">
98+
{index + 1}
99+
</div>
100+
<div className="flex items-center gap-2">
101+
<h3 className="text-2xl font-medium">
102+
{feature.title}
103+
</h3>
104+
{feature.title === "OX Newsletter" && (
105+
<ActiveTag text="completed" />
106+
)}
107+
</div>
108+
</div>
109+
{Array.isArray(feature.description) ? (
110+
<div className="font-medium">
111+
{feature.description.map(
112+
(sentence, sentenceIndex) => (
113+
<p key={sentenceIndex} className="mb-2">
114+
{sentence}
115+
</p>
116+
)
117+
)}
118+
</div>
119+
) : (
120+
<p className="font-medium">{feature.description}</p>
121+
)}
122+
</div>
123+
<div className="flex flex-col gap-2 w-full h-full">
124+
<ul className="flex flex-col gap-3 w-full h-full pb-8">
125+
{feature.features.map((feature, featureIndex) => {
126+
return (
127+
<li
128+
key={featureIndex}
129+
className="font- text-sm flex items-center gap-4"
130+
>
131+
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea]" />
132+
{feature}
133+
</li>
134+
);
135+
})}
136+
</ul>
137+
</div>
138+
</li>
139+
);
140+
}
141+
142+
return (
143+
<motion.li
144+
initial={{ opacity: 0, y: 20 }}
145+
animate={{ opacity: 1, y: 0 }}
146+
transition={{
147+
duration: 0.3,
148+
ease: "easeOut",
149+
delay: 0.2 + (index - 1) * 0.05,
150+
}}
151+
key={index}
152+
className="flex flex-col gap-4 w-full flex-1"
153+
>
154+
<div className="flex flex-col gap-2 w-full">
155+
<div className="flex gap-4 items-center">
156+
<div className="text-6xl font-mono font-semibold text-transparent bg-clip-text bg-gradient-to-b from-[#a472ea] to-[#341e7b]">
157+
{index + 1}
158+
</div>
159+
<div className="flex items-center gap-2">
160+
<h3 className="text-2xl font-medium">
161+
{feature.title}
162+
</h3>
163+
{feature.title === "OX Newsletter" && (
164+
<ActiveTag text="completed" />
165+
)}
166+
</div>
167+
</div>
168+
{Array.isArray(feature.description) ? (
169+
<div className="font-medium">
170+
{feature.description.map(
171+
(sentence, sentenceIndex) => (
172+
<p key={sentenceIndex} className="mb-2">
173+
{sentence}
174+
</p>
175+
)
176+
)}
177+
</div>
178+
) : (
179+
<p className="font-medium">{feature.description}</p>
180+
)}
181+
</div>
182+
<div className="flex flex-col gap-2 w-full h-full">
183+
<ul className="flex flex-col gap-3 w-full h-full pb-8">
184+
{feature.features.map((feature, featureIndex) => {
185+
return (
186+
<li
187+
key={featureIndex}
188+
className="font- text-sm flex items-center gap-4"
189+
>
190+
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea]" />
191+
{feature}
192+
</li>
193+
);
194+
})}
195+
</ul>
196+
</div>
197+
</motion.li>
198+
);
199+
})}
200+
</ul>
201+
</div>
202+
</>
203+
);
204+
};
205+
206+
export const PricingWhySubscribeSection = () => {
207+
return (
208+
<>
209+
<div className="py-8 border-b border-[#252525]">
210+
<motion.h2
211+
initial={{ opacity: 0, y: 20 }}
212+
animate={{ opacity: 1, y: 0 }}
213+
transition={{
214+
duration: 0.3,
215+
ease: "easeOut",
216+
delay: 0.15,
217+
}}
218+
className="text-center text-3xl tracking-tight font-medium"
219+
>
220+
Why should you subscribe to Opensox Pro now?
221+
</motion.h2>
222+
</div>
223+
<div className="w-full border-b border-[#252525]">
224+
<div className="w-full max-w-2xl mx-auto border-b lg:border-b-0 lg:border-x border-[#252525] p-6 font-medium space-y-2 ">
225+
{whySub.map((sub, index) => {
226+
return (
227+
<motion.p
228+
initial={{ opacity: 0, y: 20 }}
229+
animate={{ opacity: 1, y: 0 }}
230+
transition={{
231+
duration: 0.3,
232+
ease: "easeOut",
233+
delay: 0.2 + index * 0.05,
234+
}}
235+
key={index}
236+
className="flex items-center gap-4"
237+
>
238+
<Target className="size-5 flex-shrink-0 text-[#a472ea]" />
239+
{sub.content}
240+
</motion.p>
241+
);
242+
})}
243+
</div>
244+
</div>
245+
</>
246+
);
247+
};
248+

0 commit comments

Comments
 (0)