Skip to content

Commit 0512164

Browse files
apsinghdevapsinghdev
authored
Merge pull request #304 from huamanraj/perf/fix-INP
perf: improved the Interaction to Next Paint pages
2 parents 20ee059 + 3462029 commit 0512164

12 files changed

Lines changed: 446 additions & 291 deletions

File tree

‎apps/web/src/app/(main)/(landing)/pitch/page.tsx‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
"use client";
2-
import Footer from "@/components/landing-sections/footer";
3-
import Header from "@/components/ui/header";
2+
3+
import React, { useEffect } from "react";
4+
45
import { motion } from "framer-motion";
56
import { CornerDownRight, Target } from "lucide-react";
67
import Link from "next/link";
7-
import React, { useEffect } from "react";
8+
import { usePathname } from "next/navigation";
9+
10+
import Footer from "@/components/landing-sections/footer";
11+
import Header from "@/components/ui/header";
812
import PrimaryButton from "@/components/ui/custom-button";
913
import PaymentFlow from "@/components/payment/PaymentFlow";
10-
import { usePathname } from "next/navigation";
1114

1215
const Pitch = () => {
1316
const pathname = usePathname();
@@ -42,10 +45,10 @@ const Pitch = () => {
4245
</>
4346
}
4447
/>
45-
<div className="flex flex-col bg-[#151515]/20 backdrop-blur-xl relative w-full">
48+
<div className="flex flex-col bg-surface-secondary/20 backdrop-blur-xl relative w-full">
4649
{/* Introduction */}
4750
<div className="h-full pv relative">
48-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
51+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
4952
<motion.div
5053
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
5154
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -75,8 +78,8 @@ const Pitch = () => {
7578
</div>
7679

7780
{/* The Pitch */}
78-
<div className="h-full relative border-b border-[#252525]">
79-
<div className="py-8 border-b border-[#252525]">
81+
<div className="h-full relative border-b border-border">
82+
<div className="py-8 border-b border-border">
8083
<motion.h2
8184
id="the-pitch"
8285
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
@@ -94,7 +97,7 @@ const Pitch = () => {
9497
</div>
9598

9699
{/* Mission Statement */}
97-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
100+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
98101
<motion.div
99102
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
100103
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -125,7 +128,7 @@ const Pitch = () => {
125128
</div>
126129

127130
{/* My Goal */}
128-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
131+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
129132
<motion.div
130133
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
131134
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -154,22 +157,22 @@ const Pitch = () => {
154157
</p>
155158
<ul className="space-y-3 [&>li]:flex [&>li]:items-start [&>li]:gap-4 [&>li]:text-text-secondary [&>li]:font-medium [&>li]:text-lg [&>li]:lowercase">
156159
<li>
157-
<CornerDownRight className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
160+
<CornerDownRight className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
158161
<span>gives you timely human feedback 24/7</span>
159162
</li>
160163
<li>
161-
<CornerDownRight className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
164+
<CornerDownRight className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
162165
<span>
163166
keeps you updated with everything happening in the open
164167
source ecosystem
165168
</span>
166169
</li>
167170
<li>
168-
<CornerDownRight className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
171+
<CornerDownRight className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
169172
<span>keeps you aligned with your objectives</span>
170173
</li>
171174
<li>
172-
<CornerDownRight className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
175+
<CornerDownRight className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
173176
<span>gives you the freedom to ask anything anytime.</span>
174177
</li>
175178
</ul>
@@ -184,7 +187,7 @@ const Pitch = () => {
184187
</div>
185188

186189
{/* The Plan */}
187-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
190+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
188191
<motion.div
189192
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
190193
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -210,7 +213,7 @@ const Pitch = () => {
210213
</p>
211214
<ul className="space-y-4 [&>li]:flex [&>li]:items-start [&>li]:gap-4 [&>li]:text-text-secondary [&>li]:font-medium [&>li]:text-lg [&>li]:lowercase">
212215
<li>
213-
<Target className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
216+
<Target className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
214217
<span>
215218
<strong className="text-text-primary">
216219
for timely human feedback 24/7
@@ -219,7 +222,7 @@ const Pitch = () => {
219222
</span>
220223
</li>
221224
<li>
222-
<Target className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
225+
<Target className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
223226
<span>
224227
<strong className="text-text-primary">
225228
to keep you updated with open source
@@ -228,7 +231,7 @@ const Pitch = () => {
228231
</span>
229232
</li>
230233
<li>
231-
<Target className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
234+
<Target className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
232235
<span>
233236
<strong className="text-text-primary">
234237
for weekly session
@@ -237,7 +240,7 @@ const Pitch = () => {
237240
</span>
238241
</li>
239242
<li>
240-
<Target className="size-5 flex-shrink-0 text-[#a472ea] mt-1" />
243+
<Target className="size-5 flex-shrink-0 text-brand-purple-light mt-1" />
241244
<span>
242245
<strong className="text-text-primary">
243246
for freedom to ask anything anytime
@@ -255,7 +258,7 @@ const Pitch = () => {
255258
</div>
256259

257260
{/* Philosophies */}
258-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
261+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
259262
<motion.div
260263
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
261264
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -311,7 +314,7 @@ const Pitch = () => {
311314
help in a single day. and this defeats my main mission
312315
statement with which i started in the first place.
313316
</p>
314-
<div className="border-b border-[#252525] my-4"></div>
317+
<div className="border-b border-border my-4"></div>
315318
<p>
316319
<span className="underline decoration-brand-purple-light decoration-2">
317320
now the second choice — stay small. stay effective.
@@ -380,7 +383,7 @@ const Pitch = () => {
380383
</div>
381384

382385
{/* The Process */}
383-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
386+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
384387
<motion.div
385388
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
386389
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -434,7 +437,7 @@ const Pitch = () => {
434437
</div>
435438

436439
{/* What Existing Investors Said */}
437-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
440+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
438441
<motion.div
439442
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
440443
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -470,7 +473,7 @@ const Pitch = () => {
470473
</div>
471474

472475
{/* Questions */}
473-
<div className="py-8 border-b border-[#252525] px-4 lg:px-[60px]">
476+
<div className="py-8 border-b border-border px-4 lg:px-[60px]">
474477
<motion.div
475478
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
476479
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
@@ -537,7 +540,7 @@ const Pitch = () => {
537540
</h4>
538541
<ul className="space-y-2 text-text-secondary font-medium text-lg pl-4 lowercase">
539542
<li className="flex items-start gap-3">
540-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
543+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
541544
<span>
542545
once you invest in opensox.ai, you&apos;ll immediately
543546
get an email with a meet link. that meet will be our
@@ -546,7 +549,7 @@ const Pitch = () => {
546549
</span>
547550
</li>
548551
<li className="flex items-start gap-3">
549-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
552+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
550553
<span>
551554
also, you&apos;ll receive the invitation to our
552555
internal slack channel, there you&apos;ll receive all
@@ -555,7 +558,7 @@ const Pitch = () => {
555558
</span>
556559
</li>
557560
<li className="flex items-start gap-3">
558-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
561+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
559562
<span>
560563
at the same time, your pro plan on opensox.ai will get
561564
activated, and pro newsletters, pro filters to search
@@ -564,7 +567,7 @@ const Pitch = () => {
564567
</span>
565568
</li>
566569
<li className="flex items-start gap-3">
567-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
570+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
568571
<span>
569572
after that, we&apos;ll do weekly sessions where you
570573
can ask me anything, and we&apos;ll discuss one
@@ -581,7 +584,7 @@ const Pitch = () => {
581584
</span>
582585
</li>
583586
<li className="flex items-start gap-3">
584-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
587+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
585588
<span>
586589
along with this, whatever pro feature/service is
587590
added, you&apos;ll get it without any extra charges.
@@ -696,21 +699,21 @@ const Pitch = () => {
696699
</p>
697700
<ul className="space-y-2 text-text-secondary font-medium text-lg pl-4 lowercase">
698701
<li className="flex items-start gap-3">
699-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
702+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
700703
<span>
701704
you&apos;re already an expert in open source
702705
</span>
703706
</li>
704707
<li className="flex items-start gap-3">
705-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
708+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
706709
<span>you don&apos;t wanna do it fast</span>
707710
</li>
708711
<li className="flex items-start gap-3">
709-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
712+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
710713
<span>you wanna learn it the hard way</span>
711714
</li>
712715
<li className="flex items-start gap-3">
713-
<CornerDownRight className="size-4 flex-shrink-0 text-[#a472ea] mt-1" />
716+
<CornerDownRight className="size-4 flex-shrink-0 text-brand-purple-light mt-1" />
714717
<span>you own 100 acres of land.</span>
715718
</li>
716719
</ul>
@@ -729,7 +732,7 @@ const Pitch = () => {
729732
</div>
730733
</div>
731734

732-
<div className="pt-6 border-t border-[#252525]">
735+
<div className="pt-6 border-t border-border">
733736
<p className="text-text-secondary font-medium text-lg lowercase">
734737
my question isn&apos;t here? shoot it here:{" "}
735738
<Link
@@ -747,7 +750,7 @@ const Pitch = () => {
747750
{/* How to Invest */}
748751
<div
749752
id="invest"
750-
className="py-12 border-b border-[#252525] px-4 lg:px-[60px]"
753+
className="py-12 border-b border-border px-4 lg:px-[60px]"
751754
>
752755
<motion.div
753756
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}

0 commit comments

Comments
 (0)