devops/encoach_landingpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the success page

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-13 20:46:15 +01:00
parent c10ffa7f42
commit 1a588b3cb6
3 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/join/page.tsx
View File

@@ -29,7 +29,9 @@ export default function Home() {
<script async src="https://js.stripe.com/v3/pricing-table.js" />
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<header className="w-full px-11 py-3 flex justify-between items-center">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
</Link>
<div className="flex gap-8 items-center w-fit">
<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
Home
@@ -63,6 +65,9 @@ export default function Home() {
Please select a page. Once the payment process is complete, you will receive a code via e-mail to register to the
application.
</span>
<span className="max-w-lg">
(Or have time added to your account, if already registered with the given e-mail during the payment process).
</span>
<span>
If you already have a code, please register{" "}
<Link

2
src/app/page.tsx
View File

@@ -20,7 +20,9 @@ export default function Home() {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<header className="w-full px-11 py-3 flex justify-between items-center">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
</Link>
<div className="flex gap-8 items-center w-fit">
<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
Home

34
src/app/success/page.tsx
View File

@@ -4,6 +4,7 @@
import Image from "next/image";
import Link from "next/link";
import {
BsArrowRepeat,
BsBookFill,
BsCardChecklist,
BsClipboardFill,
@@ -22,7 +23,7 @@ import axios from "axios";
export default function Home() {
const [isValid, setIsValid] = useState(true);
const [isLoading, setIsLoading] = useState(true);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
(async () => {
@@ -43,7 +44,6 @@ export default function Home() {
return;
}
console.log("ERROR");
setIsValid(false);
setIsLoading(false);
})();
@@ -52,7 +52,9 @@ export default function Home() {
return (
<main className="h-screen w-full bg-white text-mti-black flex flex-col">
<header className="w-full px-11 py-3 flex justify-between items-center">
<Link href="/">
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
</Link>
<div className="flex gap-8 items-center w-fit">
<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
Home
@@ -79,7 +81,33 @@ export default function Home() {
</div>
</header>
<section className="w-full relative bg-white py-48 flex flex-col items-center text-center gap-4"></section>
<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
{isLoading && (
<div className="flex items-center justify-center flex-col gap-8">
<BsArrowRepeat className="text-mti-purple-light animate-spin" size={48} />
<h2 className="text-xl font-bold">Loading...</h2>
</div>
)}
{!isLoading && (
<div className="flex items-center justify-center flex-col gap-8">
<div className="flex flex-col gap-1">
<h1 className="text-xl font-bold">Congratulations!</h1>
<span className="text-xl font-bold">You are now a member at EnCoach!</span>
</div>
<div className="flex flex-col gap-1">
<span>
You should receive an e-mail in your inbox (make sure to check your spam folder) with a code to register to the app
</span>
<span>Or, if already registered, more time should have been added to your account</span>
</div>
<Link href="https://encoach.com">
<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
Get ready to train for your IELTS exam!
</button>
</Link>
</div>
)}
</section>
<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
<div className="flex flex-col gap-4">