Add thank you page

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1745231680828
+		"lastUpdateCheck": 1747060270496
 	}
 }

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

pnpm-lock.yaml

@@ -261,6 +261,9 @@ importers:
       tailwind-merge:
         specifier: ^3.2.0
         version: 3.2.0
+      tinykeys:
+        specifier: ^3.0.0
+        version: 3.0.0
       unified:
         specifier: ^11.0.5
         version: 11.0.5
@@ -3355,6 +3358,9 @@ packages:
     resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
     engines: {node: '>=12.0.0'}
 
+  tinykeys@3.0.0:
+    resolution: {integrity: sha512-nazawuGv5zx6MuDfDY0rmfXjuOGhD5XU2z0GLURQ1nzl0RUe9OuCJq+0u8xxJZINHe+mr7nw8PWYYZ9WhMFujw==}
+
   tiptap-markdown@0.8.10:
     resolution: {integrity: sha512-iDVkR2BjAqkTDtFX0h94yVvE2AihCXlF0Q7RIXSJPRSR5I0PA1TMuAg6FHFpmqTn4tPxJ0by0CK7PUMlnFLGEQ==}
     peerDependencies:
@@ -7060,6 +7066,8 @@ snapshots:
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  tinykeys@3.0.0: {}
+
   tiptap-markdown@0.8.10(@tiptap/core@2.11.7(@tiptap/pm@2.11.7)):
     dependencies:
       '@tiptap/core': 2.11.7(@tiptap/pm@2.11.7)

src/components/ThankYou/ThankYouPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { getUrlParams } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { VerifyUpgrade } from '../Billing/VerifyUpgrade';
+import { ChevronRight } from 'lucide-react';
 
 export function ThankYouPage() {
   const [isLoading, setIsLoading] = useState(true);
@@ -13,6 +14,7 @@ export function ThankYouPage() {
     const next = params?.next;
     const shouldVerifyUpgrade = params?.s === '1';
     if (!next) {
+      window.location.href = '/';
       return;
     }
 
@@ -30,8 +32,10 @@ export function ThankYouPage() {
 
   if (isLoading) {
     return (
-      <div className="flex min-h-[472px] flex-col items-center justify-center py-20">
-        <Spinner className="h-12 w-12" />
+      <div className="flex flex-grow flex-col items-center justify-center py-20">
+        <Spinner isDualRing={false} className="mb-5 h-7 w-7" />
+        <p className="mb-1 text-xl font-medium">Please wait</p>
+        <p className="text-gray-500">This may take a few seconds</p>
       </div>
     );
   }
@@ -40,28 +44,45 @@ export function ThankYouPage() {
     <>
       {shouldVerifyUpgrade && <VerifyUpgrade />}
 
-      <div className="flex flex-col items-center justify-center py-28 pb-36">
-        <img
-          src="/images/party.gif"
-          alt="Thank you"
-          className="aspect-square w-24"
-        />
-        <h1 className="mt-4 text-3xl font-bold">Thank you!</h1>
-        <p className="mt-1 text-gray-500">Your purchase has been successful</p>
-        {nextPage && (
-          <div className="mt-4">
+      <div className="flex flex-grow flex-col items-center justify-center px-4">
+        <div className="flex max-w-2xl flex-col items-center text-center">
+          <img
+            src="/images/gifs/party-popper.gif"
+            alt="Thank you"
+            className="relative left-6 mb-6 aspect-square w-24"
+          />
+
+          <h1 className="mb-3 text-4xl font-bold text-gray-800 md:text-5xl">
+            Thank you!
+          </h1>
+
+          <p className="mb-8 text-lg text-gray-600">
+            Your transaction was successful and your access has been activated.
+          </p>
+
+          {nextPage && (
             <a
               href={nextPage}
-              className="rounded-md bg-black px-4 py-1.5 text-white hover:bg-gray-800"
+              className="group flex items-center gap-2 rounded-lg bg-purple-500 px-5 py-2.5 font-medium text-white transition-all hover:bg-blue-600"
             >
               {pageType === 'course'
-                ? 'Visit the Course'
+                ? 'Continue to Course'
                 : pageType === 'ai-tutor'
-                  ? 'Visit the AI Tutor'
-                  : 'Visit the Page'}
+                  ? 'Continue to AI Tutor'
+                  : 'Continue'}
+              <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
             </a>
-          </div>
-        )}
+          )}
+        </div>
+
+        <div className="mt-12 flex gap-4 text-sm text-gray-500">
+          <a href="/terms" className="hover:text-gray-800">
+            Terms of Use
+          </a>
+          <a href="/privacy" className="hover:text-gray-800">
+            Privacy Policy
+          </a>
+        </div>
       </div>
     </>
   );

src/pages/thank-you.astro

@@ -5,4 +5,5 @@ import { ThankYouPage } from '../components/ThankYou/ThankYouPage';
 
 <BaseLayout title='Thank you'>
   <ThankYouPage client:load />
+  <div slot='page-footer'></div>
 </BaseLayout>