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

Made it so it is possible to buy a package

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-13 15:22:18 +01:00
parent c3e43d2d44
commit c10ffa7f42
6 changed files with 692 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/api/success/route.ts Normal file
View File

@@ -0,0 +1,35 @@
import axios from "axios";
import moment from "moment";
export async function POST(request: Request) {
const {id, product} = (await request.json()) as {id: string; product: string};
if (!id || !product) {
return Response.json({error: "Product and/or id missing from the body."}, {status: 400});
}
try {
const idChecker = await axios.get(`https://api.stripe.com/v1/checkout/sessions/${id}`, {
auth: {username: process.env.STRIPE_SECRET || "", password: ""},
});
if (idChecker.data["payment_status"] !== "paid") {
return Response.json({error: "The payment has not yet finished!"}, {status: 401});
}
const productChecker = await axios.get(`https://api.stripe.com/v1/products/${product}`, {
auth: {username: process.env.STRIPE_SECRET || "", password: ""},
});
const email = idChecker.data["customer_details"]["email"];
const days = productChecker.data["metadata"]["expiry_days"];
const expiryDate = moment(new Date()).add(days, "days").toDate();
await axios.post("https://encoach.com/api/stripe", {expiryDate, email, key: process.env.STRIPE_SECRET, checkout: id});
return Response.json({error: null, ok: true});
} catch (e) {
return Response.json({error: "Something went wrong or one of the values is invalid!"}, {status: 500});
}
}

140
src/app/join/page.tsx Normal file
View File

@@ -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 {PaymentElement} from "@stripe/react-stripe-js";
import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");
export default function Home() {
return (
<Elements stripe={stripePromise}>
<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">
<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">
<h2 className="text-3xl font-bold">Available Packages</h2>
<div className="flex flex-col gap-1">
<span className="max-w-lg">
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>
If you already have a code, please register{" "}
<Link
href="https://encoach.com/register"
className="font-semibold text-mti-purple-light underline hover:text-mti-purple-dark transition ease-in-out duration-300">
here
</Link>
.
</span>
</div>
{/** @ts-ignore */}
<stripe-pricing-table pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
</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>
</Elements>
);
}

32
src/app/layout.tsx
View File

@@ -1,22 +1,20 @@
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import "./globals.css";
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
const inter = Inter({ subsets: ['latin'] })
const inter = Inter({subsets: ["latin"]});
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "EnCoach",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

140
src/app/success/page.tsx Normal file
View File

@@ -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>
);
}