Merge pull request #250 from apsinghdev/imp/add-pitch

[imp]: add pitch to investors

Author: apsinghdev

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

@@ -6,10 +6,11 @@ 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 from "react";
+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 = [
   {
     id: 1,
@@ -66,7 +67,7 @@ const whySub = [
   },
   {
     content:
-      "This offer is only available for the first 1000 (20 slots booked) users",
+      "This offer is only available for the first 1000 (64 slots booked) users",
   },
   {
     content:
@@ -109,6 +110,28 @@ const premiumPlanCard = {
 };
 
 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);
+      }
+    }
+  }, []);
+
   return (
     <>
       <main className="w-full  overflow-hidden flex flex-col items-center justify-center relative">
@@ -247,7 +270,7 @@ const Pricing = () => {
               </div>
               <div className="flex flex-col lg:flex-row items-stretch justify-center gap-6">
                 <PricingCard />
-                <SecondaryPricingCard />
+                <SecondaryPricingCard callbackUrl={callbackUrl} />
               </div>
             </div>
           </div>
@@ -347,7 +370,7 @@ const PricingCard = () => {
   );
 };
 
-const SecondaryPricingCard = () => {
+const SecondaryPricingCard = ({ callbackUrl }: { callbackUrl: string }) => {
   const premiumPlanId = process.env.NEXT_PUBLIC_YEARLY_PREMIUM_PLAN_ID;
   const planIdOk =
     typeof premiumPlanId === "string" && premiumPlanId.length > 0;
@@ -375,7 +398,10 @@ const SecondaryPricingCard = () => {
               </div>
             </div>
 
-            <div className="w-full border-dashed border-border-primary px-6 lg:px-10  py-4">
+            <div
+              id="pro-price-card"
+              className="w-full border-dashed border-border-primary px-6 lg:px-10  py-4"
+            >
               <div className="flex items-center gap-4 flex-wrap">
                 <h2 className="text-6xl lg:text-[90px] lg:leading-[82px] tracking-tight font-semibold">
                   $49{" "}
@@ -401,7 +427,16 @@ const SecondaryPricingCard = () => {
                 buttonClassName={`w-full max-w-[500px] mx-auto font-semibold ${
                   planIdOk ? "" : "opacity-60 cursor-not-allowed"
                 }`}
+                callbackUrl={callbackUrl}
               />
+              <div className="flex justify-center mt-3">
+                <Link
+                  href="/pitch"
+                  className="text-sm text-text-tertiary hover:text-brand-purple-light transition-colors lowercase"
+                >
+                  still not sure? read my pitch to you.
+                </Link>
+              </div>
             </div>
             <div className="w-full border-dashed border-border-primary px-6 lg:px-10 py-4 flex flex-col gap-4 flex-1">
               <h2 className="text-lg lg:text-xl tracking-tight text-left font-bold">
@@ -552,7 +587,7 @@ const TestimonialsSection = () => {
   };
 
   return (
-    <div className=" text-white ">
+    <div className=" text-white " id="testimonials">
       <Header title="What our Pro customers say about us" />
       <div className="border-b  border-[#252525] w-full min-h-[80dvh] grid grid-cols-1 lg:grid-cols-7">
         <div className="lg:col-span-2 flex flex-col font-medium divide-y divide-[#252525]">

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

@@ -15,7 +15,7 @@ const CTA = () => {
                 className="absolute inset-0 w-full h-full -z-10 object-cover rounded-3xl"
             />
             <div className="space-y-2">
-                <h2 className='text-4xl text-[40px] w-full lg:text-7xl font-medium text-balance text-center max-w-2xl tracking-tighter'>Ready to Find Your Perfect Repo?</h2>
+                <h2 className='text-4xl text-[40px] w-full lg:text-7xl font-medium text-balance text-center max-w-2xl tracking-tighter'>Ready to dive into Open Source?</h2>
                 <p className="text-center tracking-tight lg:text-2xl font-light">Join 10,000+ engineers accelerating in open-source.</p>
             </div>
             <Link href='/dashboard/home' className='cursor-pointer z-30'>

apps/web/src/components/landing-sections/CTA.tsx

@@ -51,15 +51,20 @@ const Hero = () => {
           variants={itemVariants}
           className="flex items-center justify-center gap-2 mb-4 [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
         >
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border">
-            <span className="text-text-secondary text-sm font-medium">Backed by</span>
+          <Link
+            href="/pitch"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-black/40 backdrop-blur-sm border border hover:bg-black/60 transition-colors cursor-pointer"
+          >
+            <span className="text-text-secondary text-sm font-medium">
+              Backed by
+            </span>
             <div className="flex items-center gap-1.5">
               <div className="w-5 h-5 bg-gradient-to-br from-[#FF6154] to-[#FF8C00] rounded flex items-center justify-center">
                 <span className="text-white text-xs font-bold">U</span>
               </div>
               <span className="text-white text-sm font-medium">sers</span>
             </div>
-          </div>
+          </Link>
         </motion.div>
         <motion.h1
           variants={itemVariants}

apps/web/src/components/landing-sections/Hero.tsx

@@ -65,6 +65,12 @@ const Footer = () => {
                 >
                   Pricing
                 </Link>
+                <Link
+                  href="/pitch"
+                  className="text-[#b1b1b1] hover:text-white transition-colors text-xs"
+                >
+                  My pitch to you
+                </Link>
                 <Link
                   href="/blogs"
                   className="text-[#b1b1b1] hover:text-white transition-colors text-xs"

apps/web/src/components/landing-sections/footer.tsx

@@ -14,6 +14,7 @@ interface PaymentFlowProps {
   description?: string;
   buttonText?: string;
   buttonClassName?: string;
+  callbackUrl?: string;
 }
 
 /**
@@ -41,6 +42,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
   description = "Payment",
   buttonText = "Invest",
   buttonClassName,
+  callbackUrl,
 }) => {
   const { data: session, status: sessionStatus } = useSession();
   const router = useRouter();
@@ -50,6 +52,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
     amount: number; // Stored for display purposes only
   } | null>(null);
 
+  const utils = trpc.useUtils();
   const createOrderMutation = (trpc.payment as any).createOrder.useMutation();
   const verifyPaymentMutation = (
     trpc.payment as any
@@ -71,7 +74,26 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
           planId: planId,
         });
 
-        // Show success and redirect
+        // payment verification succeeded - proceed with redirect
+        // subscription cache refresh is decoupled as best-effort background action
+        // errors in refresh won't affect the successful payment verification
+        (async () => {
+          try {
+            await (utils.user as any).subscriptionStatus.invalidate();
+            await Promise.race([
+              (utils.user as any).subscriptionStatus.fetch(undefined),
+              new Promise((resolve) => setTimeout(resolve, 3000)), // 3s timeout
+            ]);
+          } catch (refreshError) {
+            console.warn(
+              "subscription cache refresh failed (non-fatal):",
+              refreshError
+            );
+          }
+        })();
+
+        // redirect immediately after successful verification
+        // checkout page will refetch subscription status if cache refresh failed
         router.push("/checkout");
       } catch (error) {
         console.error("Verification failed:", error);
@@ -101,7 +123,8 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
       }
 
       if (sessionStatus === "unauthenticated" || !session) {
-        router.push("/login?callbackUrl=/pricing");
+        const redirectUrl = callbackUrl || "/pricing";
+        router.push(`/login?callbackUrl=${encodeURIComponent(redirectUrl)}`);
         return;
       }
 
@@ -152,7 +175,8 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
     } catch (error: any) {
       console.warn("Failed to create order:", error);
       setIsProcessing(false);
-      router.push("/login?callbackUrl=/pricing");
+      const redirectUrl = callbackUrl || "/pricing";
+      router.push(`/login?callbackUrl=${encodeURIComponent(redirectUrl)}`);
     }
   };
 

apps/web/src/components/payment/PaymentFlow.tsx

@@ -1,40 +1,46 @@
-'use client'
-import { motion } from 'framer-motion'
-import React from 'react'
-import { FlickeringGrid } from './flickering-grid'
-import { colors } from '@/lib/design-tokens'
+"use client";
+import { motion } from "framer-motion";
+import React from "react";
+import { FlickeringGrid } from "./flickering-grid";
+import { colors } from "@/lib/design-tokens";
 
-const Header = ({title}: {title: string}) => {
-    return (
-        <div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border w-full">
-            <motion.h4
-                initial={{ opacity: 0, y: 30, filter: 'blur(10px)' }}
-                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
-                transition={{ duration: 0.6, ease: 'easeOut', type: 'spring', delay: 0.3 }}
-                className='font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center text-balance'
-            >
-                {title}
-            </motion.h4>
-            <div
-                style={{
-                    background: 'radial-gradient(circle at center, #101010 30%, transparent 100%)',
-                }}
-                className="h-full w-[100%] right-0 top-0 z-20 absolute"
-            />
-            <div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
-                <FlickeringGrid
-                    className="absolute -z-0 top-0 right-0"
-                    squareSize={3}
-                    gridGap={6}
-                    color={colors.brand.purple.grid}
-                    maxOpacity={1}
-                    flickerChance={0.1}
-                    height={200}
-                    width={2000}
-                />
-            </div>
-        </div>
-    )
-}
+const Header = ({ title }: { title: string | React.ReactNode }) => {
+  return (
+    <div className="px-[30px] py-10 h-[160px] relative overflow-hidden border-b border w-full">
+      <motion.h4
+        initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
+        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+        transition={{
+          duration: 0.6,
+          ease: "easeOut",
+          type: "spring",
+          delay: 0.3,
+        }}
+        className="font-medium inset-0 flex items-center justify-center text-3xl lg:text-5xl tracking-tight absolute z-30 text-center text-balance"
+      >
+        {title}
+      </motion.h4>
+      <div
+        style={{
+          background:
+            "radial-gradient(circle at center, #101010 30%, transparent 100%)",
+        }}
+        className="h-full w-[100%] right-0 top-0 z-20 absolute"
+      />
+      <div className="absolute right-0 w-[100%] h-full top-0 z-10 opacity-50">
+        <FlickeringGrid
+          className="absolute -z-0 top-0 right-0"
+          squareSize={3}
+          gridGap={6}
+          color={colors.brand.purple.grid}
+          maxOpacity={1}
+          flickerChance={0.1}
+          height={200}
+          width={2000}
+        />
+      </div>
+    </div>
+  );
+};
 
-export default Header
+export default Header;

apps/web/src/components/ui/header.tsx

@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {