diff --git a/apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx b/apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx new file mode 100644 index 0000000..c67e7a4 --- /dev/null +++ b/apps/web/src/app/(main)/(landing)/pricing/_components/AnimatedFeaturesSection.tsx @@ -0,0 +1,92 @@ +"use client"; +import { motion } from "framer-motion"; +import { CornerDownRightIcon } from "./icons"; +import { ActiveTag } from "@/components/ui/ActiveTag"; +import { Feature } from "./types"; +import { useInViewAnimation } from "@/hooks/useInViewAnimation"; + +interface AnimatedFeaturesSectionProps { + features: Feature[]; +} + +export function AnimatedFeaturesSection({ + features, +}: AnimatedFeaturesSectionProps) { + const [containerRef, inView] = useInViewAnimation({ threshold: 0.1 }); + + return ( +
+
+ + What is Opensox 2.0? + +
+ +
+ +
+
+ ); +} diff --git a/apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx b/apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx new file mode 100644 index 0000000..fd022ab --- /dev/null +++ b/apps/web/src/app/(main)/(landing)/pricing/_components/components.tsx @@ -0,0 +1,356 @@ +"use client"; +import { motion } from "framer-motion"; +import { TargetIcon, CheckIcon, TerminalIcon } from "./icons"; +import Image from "next/image"; +import Link from "next/link"; +import { useInViewAnimation } from "@/hooks/useInViewAnimation"; +import { HeaderStatic } from "@/components/ui/HeaderStatic"; +import { CustomButtonStatic } from "@/components/ui/CustomButtonStatic"; +import { ActiveTag } from "@/components/ui/ActiveTag"; +import { LazyPaymentFlow } from "@/components/payment/LazyPaymentFlow"; +import { freePlanCard, premiumPlanCard, testimonials } from "./data"; + +interface PremiumTestimonialCardProps { + username?: string; + showPremium?: boolean; +} + +const PremiumTestimonialCard = ({ + username = "Username", + showPremium = true, +}: PremiumTestimonialCardProps) => { + return ( +
+

{username}

+ {showPremium && ( +
+

Opensox Pro

+
+ )} +
+ ); +}; + +interface WhySubItem { + content: string; +} + +interface AnimatedWhySectionProps { + whySub: WhySubItem[]; +} + +export function AnimatedWhySection({ whySub }: AnimatedWhySectionProps) { + const [containerRef, inView] = useInViewAnimation({ threshold: 0.2 }); + + return ( +
+
+ + Why should you subscribe to Opensox Pro now? + +
+
+
+ {whySub.map((sub, index) => ( + + + {sub.content} + + ))} +
+
+
+ ); +} + +interface PricingCardsSectionProps { + planIdOk: boolean; + premiumPlanId?: string; +} + +export const PricingCardsSection = ({ + planIdOk, + premiumPlanId, +}: PricingCardsSectionProps) => { + return ( +
+
+ {/* Background image - concentrated glow */} +
+ background +
+ +
+ + +
+
+
+ ); +}; + +export const FreePlanCard = () => { + return ( +
+
+
+
+ +
+
+ Opensox logo +
+
+ +
+

+ Free +

+
+ +
+ + + Get Started + +
+ +
+

+ What you get immediately: +

+
+ {freePlanCard.whatYouGetImmediately.map((item, index) => ( +

+ {" "} + {item} +

+ ))} +
+
+ +
+

+ What you get after the launch: +

+
+ {freePlanCard.whatYouGetAfterLaunch.map((item, index) => ( +

+ {" "} + {item} +

+ ))} +
+
+
+
+
+
+
+ ); +}; + +interface ProPlanCardProps { + planIdOk: boolean; + premiumPlanId?: string; +} + +export const ProPlanCard = ({ planIdOk, premiumPlanId }: ProPlanCardProps) => { + const callbackUrl = "/pricing#pro-price-card"; + + return ( +
+
+
+
+ +
+
+ Opensox logo +
+
+ +
+
+

+ $49{" "} + + $69 + {" "} + / year +

+
+
+

(~ ₹4,410 INR)

+ + Discounted till 10 December + +
+
+ +
+ {/* Lazy-loaded payment flow */} + + +
+ + still not sure? read my pitch to you. + +
+
+ +
+

+ What you get immediately: +

+
+ {premiumPlanCard.whatYouGetImmediately.map((item, index) => ( +

+ {" "} + {item} +

+ ))} +
+
+ +
+

+ What you get after the launch: +

+
+ {premiumPlanCard.whatYouGetAfterLaunch.map((item, index) => ( +

+ {" "} + {item} + {item === "Pro newsletter" && } +

+ ))} +
+
+
+
+
+
+
+ ); +}; + +// Testimonials Section +export const TestimonialsSection = () => { + const groupedTestimonials = { + 1: testimonials.filter((t) => t.column === 1), + 2: testimonials.filter((t) => t.column === 2), + 3: testimonials.filter((t) => t.column === 3), + }; + + return ( +
+ +
+
+ {groupedTestimonials[1].map((testimonial) => ( +
+ +
+ {testimonial.content} +
+
+ ))} +
+ +
+ {groupedTestimonials[2].map((testimonial) => ( +
+ +
+ {testimonial.content} +
+
+ ))} +
+ +
+ {groupedTestimonials[3].map((testimonial) => ( +
+ +
+ {testimonial.content} +
+
+ ))} +
+
+
+ ); +}; diff --git a/apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx b/apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx new file mode 100644 index 0000000..9af69af --- /dev/null +++ b/apps/web/src/app/(main)/(landing)/pricing/_components/data.tsx @@ -0,0 +1,185 @@ +import { Feature } from "./types"; + +export const opensoxFeatures: Feature[] = [ + { + id: 1, + title: "Opensox Advanced search tool", + description: + "One and only tool in the market that let you find open source with blizzing speed and scary accuracy. It will have:", + features: [ + "Faster and accurate search of projects", + "Higher accuracy (so that you exactly land on your dream open source project)", + "Advanced filters like, GSOC, YC, funding, hire contributors, trending, niche (like AI, Core ML, Web3, MERN), bounties, and many more.", + ], + }, + { + id: 2, + title: "OX Newsletter", + description: + "A newsletter that keeps you ahead in open source world. It will cover:", + features: [ + "Jobs/internships in opensource projects/companies", + "Funding news", + "What's trending in open source ecosystem", + "Upcoming trends", + "Tips to ace in open source", + "What's happening in open source companies?", + ], + }, + { + id: 3, + title: "30 days Opensox challenge sheet", + description: [ + "A comprehensive sheet of 30+ modules along with detailed videos to give you a clear path to start rocking in open source.", + "It will contain videos, resouces and hand made docs.", + <> + In each of the 30 steps, you will learn, then apply, If stuck, + we & apos; ll help and then we& apos;ll do an accountability check.{" "} + + Check here. + + , + ], + features: [], + }, +]; + +export const whySub = [ + { + content: + "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", + }, + { + content: + "This offer is only available for the first 1000 (64 slots booked) users", + }, + { + content: + "After the launch, this $49 offer be removed and Opensox Pro will be around ~ $120 for whole year ($10/mo.)", + }, + { + content: "The price of the dollar is constantly increasing.", + }, +]; + +export const freePlanCard = { + whatYouGetImmediately: [ + "Free filters to search projects (tech stack, competition, activity, etc)", + "Access to the general community", + ], + whatYouGetAfterLaunch: [ + "Everything mentioned above", + "30 days opensox challenge sheet", + ], +}; + +export const premiumPlanCard = { + whatYouGetImmediately: [ + "Everything in free plan +", + "1:1 session on finding remote jobs and internships in open-source companies.", + "Quick doubts resolution.", + "Personalized guidance for GSoC, LFX, Outreachy, etc", + "Access to Pro Slack where you can ask anything anytime.", + "Support to enhance skills for open source", + "GSOC proposal, resume reviews, etc.", + "Upcoming Pro features", + ], + whatYouGetAfterLaunch: [ + "Everything mentioned above", + "Advanced tool with Pro filters to find open source projects", + "Pro newsletter", + "30 days opensox challenge sheet", + "Upcoming Pro features.", + ], +}; + +export const testimonials = [ + { + id: 1, + username: "Tarun Parmar", + content: + "Getting the Opensox Pro Subscription has been such a game-changer for me. I really like the personal touch in the way the team guides you-it feels like someone is genuinely there to help you navigate. It gave me the initial push I needed and made it so much easier to cut through all the chaos and focus on the right and simple steps. The best part is, it helps you start your open source journey quickly and I know I can reach out to the team anytime. Honestly, it's been an awesome experience so far!", + column: 1, + }, + { + id: 2, + username: "Daksh Yadav", + content: + "My experience with your guidance and opensox has been great. Your tips have really helped in doing my tasks quicker and better. And I would definitely recommend others to opt for opensox Pro.", + column: 1, + }, + { + id: 3, + username: "Rishabh R Pathak", + content: ( +
+

+ Okay so there are a few things I genuinely value about OpenSox Pro, + and I& apos;ll focus on the core points because everything else is + just a natural extension of these. +

+ < ul className="list-disc space-y-3 pl-6" > +
  • + First, the pricing.To me, it & apos;s more than fair for the kind + of value on the table.In fact, I see it as something that can + yield long - term returns if you & apos;re serious about putting in + the work. +
    • +
  • + The onboarding call was one of the best parts.Spending 30 + + minutes just to understand where I stand, whether I & apos; m + starting out or already experienced and aligning the guidance with + my goals.That level of personalization is rare and it set the + tone right from the start. +
    • +
  • + Another thing l & apos;ve appreciated is the transparency.No + sugarcoating, no vague talk, you share real experiences, honest + opinions and advice that actually holds weight.That alone builds + credibility and trust. +
    • +
  • + And yeah, the support also goes beyond the program itself.Getting + advice on personal doubts and extra tips outside the set + curriculum(of course, sometimes, not always lol!). +
    • +
  • + The regular check - ins are also a huge plus.They help track + progress, keep me accountable, and ensure l & apos;m moving in the + right direction. +
    • +
  • + Overall, I & apos;d absolutely recommend OpenSox Pro to anyone + serious about open source.The personalized guidance is exactly + what most of us hope for, since everyone is at a different stage + of their journey. +
    • +
  • + A personal opinion btw:) My only hope is that the same quality + continues even as more people join and judging from what l & apos; ve + seen so far, I & apos;m confident it will. +
    • + +
    + ), + column: 2, + }, + { + id: 4, + username: "Mahadev Keshari", + content: "This is really awesome 👍🏼", + column: 3, + }, + { + id: 5, + username: "Satya Narayan", + content: + "Yes I would totally recommend it for anyone who is serious about getting into open source. We have discussed very insightful key methods that are very helpful for a beginner who has no prior experience to start contributing. You as an experienced open source developer and contributor have shared your learnings which come from experience to us which not only makes us understand the complexity of large codebases but gives us a kickstart over other candidates. Your personal guidance is precious and invaluable for us", + column: 3, + }, +]; diff --git a/apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx b/apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx new file mode 100644 index 0000000..f6d01a7 --- /dev/null +++ b/apps/web/src/app/(main)/(landing)/pricing/_components/icons.tsx @@ -0,0 +1,74 @@ +// Optimized inline SVG icons to replace lucide-react imports +// This eliminates the lucide-react bundle for these specific icons + +export const TargetIcon = ({ className }: { className?: string }) => ( + + + + + +); + +export const CheckIcon = ({ className, strokeWidth = 2 }: { className?: string; strokeWidth?: number }) => ( + + + +); + +export const TerminalIcon = ({ className }: { className?: string }) => ( + + + + +); + +export const CornerDownRightIcon = ({ className }: { className?: string }) => ( + + + + +); diff --git a/apps/web/src/app/(main)/(landing)/pricing/_components/types.ts b/apps/web/src/app/(main)/(landing)/pricing/_components/types.ts new file mode 100644 index 0000000..c7c1108 --- /dev/null +++ b/apps/web/src/app/(main)/(landing)/pricing/_components/types.ts @@ -0,0 +1,6 @@ +export interface Feature { + id: number; + title: string; + description: string | React.ReactNode[]; + features: string[]; +} diff --git a/apps/web/src/app/(main)/(landing)/pricing/page.tsx b/apps/web/src/app/(main)/(landing)/pricing/page.tsx index 2a246bb..ec8a429 100644 --- a/apps/web/src/app/(main)/(landing)/pricing/page.tsx +++ b/apps/web/src/app/(main)/(landing)/pricing/page.tsx @@ -1,641 +1,53 @@ -"use client"; +import { HeaderStatic } from "@/components/ui/HeaderStatic"; import Footer from "@/components/landing-sections/footer"; -import Header from "@/components/ui/header"; -import { ShineBorder } from "@/components/ui/shine-borders"; -import { motion } from "framer-motion"; -import { Check, CornerDownRight, Target, Terminal } from "lucide-react"; -import Image from "next/image"; -import Link from "next/link"; -import React, { useEffect } from "react"; -import PrimaryButton from "@/components/ui/custom-button"; -import PaymentFlow from "@/components/payment/PaymentFlow"; -import { ActiveTag } from "@/components/ui/ActiveTag"; -import { usePathname } from "next/navigation"; -const opensoxFeatures = [ +import { HashScrollHandler } from "@/components/utils/HashScrollHandler"; +import { AnimatedFeaturesSection } from "./_components/AnimatedFeaturesSection"; +import { + AnimatedWhySection, + PricingCardsSection, +} from "./_components/components"; +import { opensoxFeatures, whySub } from "./_components/data"; +import dynamic from "next/dynamic"; + +// Lazy-load testimonials section (far below-the-fold) +const TestimonialsSection = dynamic( + () => import("./_components/components").then(mod => ({ default: mod.TestimonialsSection })), { - id: 1, - title: "Opensox Advanced search tool", - description: - "One and only tool in the market that let you find open source with blizzing speed and scary accuracy. It will have:", - features: [ - "Faster and accurate search of projects", - "Higher accuracy (so that you exactly land on your dream open source project)", - "Advanced filters like, GSOC, YC, funding, hire contributors, trending, niche (like AI, Core ML, Web3, MERN), bounties, and many more.", - ], - }, - { - id: 2, - title: "OX Newsletter", - description: - "A newsletter that keeps you ahead in open source world. It will cover:", - features: [ - "Jobs/internships in opensource projects/companies", - "Funding news", - "What's trending in open source ecosystem", - "Upcoming trends", - "Tips to ace in open source", - "What's happening in open source companies?", - ], - }, - { - id: 3, - title: "30 days Opensox challenge sheet", - description: [ - "A comprehensive sheet of 30+ modules along with detailed videos to give you a clear path to start rocking in open source.", - "It will contain videos, resouces and hand made docs.", - <> - In each of the 30 steps, you will learn, then apply, If stuck, - we'll help and then we'll do an accountability check.{" "} - - Check here. - - , - ], - features: [], - }, -]; + ssr: true, + loading: () =>
    + } +); -const whySub = [ - { - content: - "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", - }, - { - content: - "This offer is only available for the first 1000 (64 slots booked) users", - }, - { - content: - "After the launch, this $49 offer be removed and Opensox Pro will be around ~ $120 for whole year ($10/mo.)", - }, - { - content: "The price of the dollar is constantly increasing.", - }, -]; - -const freePlanCard = { - whatYouGetImmediately: [ - "Free filters to search projects (tech stack, competition, activity, etc)", - "Access to the general community", - ], - whatYouGetAfterLaunch: [ - "Everything mentioned above", - "30 days opensox challenge sheet", - ], -}; - -const premiumPlanCard = { - whatYouGetImmediately: [ - "Everything in free plan +", - "1:1 session on finding remote jobs and internships in open-source companies.", - "Quick doubts resolution.", - "Personalized guidance for GSoC, LFX, Outreachy, etc", - "Access to Pro Slack where you can ask anything anytime.", - "Support to enhance skills for open source", - "GSOC proposal, resume reviews, etc.", - "Upcoming Pro features", - ], - whatYouGetAfterLaunch: [ - "Everything mentioned above", - "Advanced tool with Pro filters to find open source projects", - "Pro newsletter", - "30 days opensox challenge sheet", - "Upcoming Pro features.", - ], -}; - -const Pricing = () => { - const pathname = usePathname(); - const callbackUrl = `${pathname}#pro-price-card`; - - useEffect(() => { - if (window.location.hash === "#pro-price-card") { - const element = document.getElementById("pro-price-card"); - if (element) { - setTimeout(() => { - element.scrollIntoView({ behavior: "smooth", block: "start" }); - }, 100); - } - } - if (window.location.hash === "#testimonials") { - const element = document.getElementById("testimonials"); - if (element) { - setTimeout(() => { - element.scrollIntoView({ behavior: "smooth", block: "start" }); - }, 100); - } - } - }, []); +export default function PricingPage() { + const premiumPlanId = process.env.NEXT_PUBLIC_YEARLY_PREMIUM_PLAN_ID; + const planIdOk = + typeof premiumPlanId === "string" && premiumPlanId.length > 0; return ( <> -
    -
    -
    -
    -
    - - What is Opensox 2.0? - -
    -
    -
      - {opensoxFeatures.map((feature, index) => { - return ( - -
      -
      -
      - {index + 1} -
      -
      -

      - {feature.title} -

      - {feature.title === "OX Newsletter" && ( - - )} -
      -
      - {Array.isArray(feature.description) ? ( -
      - {feature.description.map( - (sentence, sentenceIndex) => ( -

      - {sentence} -

      - ) - )} -
      - ) : ( -

      {feature.description}

      - )} -
      -
      -
        - {feature.features.map((feature, index) => { - return ( -
      • - - {feature} -
        • - ); - })} -
      -
      -       - ); - })} -
    -
    -
    -
    -
    - - Why should you subscribe to Opensox Pro now? - -
    -
    -
    - {whySub.map((sub, index) => { - return ( - - - {sub.content} - - ); - })} -
    -
    -
    -
    -
    -
    - background -
    -
    - - -
    -
    -
    + + + +
    + + +
    + + + -
    - For any doubts or queries, feel free to ping us at{" "} - - hi@opensox.ai - -