Made it so it is possible to buy a package

2023-10-13 15:22:18 +01:00
parent c3e43d2d44
commit c10ffa7f42
6 changed files with 692 additions and 24 deletions
--- a/src/app/success/page.tsx
+++ b/src/app/success/page.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+import Link from "next/link";
+import {
+	BsBookFill,
+	BsCardChecklist,
+	BsClipboardFill,
+	BsClock,
+	BsClockFill,
+	BsFacebook,
+	BsFillBookFill,
+	BsInstagram,
+	BsSearch,
+	BsShieldFillCheck,
+	BsTwitter,
+} from "react-icons/bs";
+import {BiLogoFacebook} from "react-icons/bi";
+import {useEffect, useState} from "react";
+import axios from "axios";
+
+export default function Home() {
+	const [isValid, setIsValid] = useState(true);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		(async () => {
+			const search = new URLSearchParams(window.location.search);
+			const id = search.get("id");
+			const product = search.get("product");
+
+			if (!id || !product) {
+				setIsValid(false);
+				setIsLoading(false);
+				return;
+			}
+
+			const request = await axios.post("/api/success", {id, product});
+			if (request.status === 200) {
+				setIsValid(true);
+				setIsLoading(false);
+				return;
+			}
+
+			console.log("ERROR");
+			setIsValid(false);
+			setIsLoading(false);
+		})();
+	}, []);
+
+	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">
+				<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				<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
+					</Link>
+					<Link href="/services" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
+						Services
+					</Link>
+					<Link href="/about" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
+						About us
+					</Link>
+					<Link href="/history" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
+						History
+					</Link>
+					<Link href="/contact" className="hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300">
+						Contact
+					</Link>
+				</div>
+				<div className="flex items-center w-fit gap-9">
+					<Link
+						href="/join"
+						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
+						Join
+					</Link>
+				</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 py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Navigation</span>
+					<div className="flex flex-col gap-2">
+						<Link href="/about">Why us</Link>
+						<Link href="/about">Capabilities</Link>
+						<Link href="/about">Expertise</Link>
+						<Link href="/about">History</Link>
+						<Link href="/about">Contact</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Services</span>
+					<div className="flex flex-col gap-2">
+						<Link href="#benefits">EnCoach benefits</Link>
+						<Link href="#testimonials">Student testimonials</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">About</span>
+					<div className="flex flex-col gap-2">
+						<Link href="/terms">Terms and Conditions</Link>
+						<Link href="/privacy-policy">Privacy Policy</Link>
+						<Link href="/about">About</Link>
+					</div>
+				</div>
+				<div className="flex flex-col gap-4">
+					<span className="font-bold text-xl">Get in Touch</span>
+					<div className="flex flex-col gap-4">
+						<span className="max-w-[280px]">
+							Stay connected with us and know the latest updates about our services through various social media
+						</span>
+						<div className="flex gap-6 items-center">
+							<Link
+								href="https://facebook.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BiLogoFacebook className="w-6 h-6" />
+							</Link>
+							<Link
+								href="https://twitter.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BsTwitter className="w-5 h-5" />
+							</Link>
+							<Link
+								href="https://instagram.com"
+								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
+								<BsInstagram className="w-5 h-5" />
+							</Link>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
+		</main>
+	);
+}