Improved the responsiveness of the website
This commit is contained in:
Tiago Ribeiro
64
src/components/Footer.tsx
Normal file
64
src/components/Footer.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import Link from "next/link";
|
||||
import {BiLogoFacebook} from "react-icons/bi";
|
||||
import {BsInstagram, BsTwitter} from "react-icons/bs";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<>
|
||||
<section className="w-full py-10 px-8 md:px-28 bg-mti-gray-seasalt flex flex-col md:flex-row md:justify-between gap-8">
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
182
src/components/Navbar.tsx
Normal file
182
src/components/Navbar.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import clsx from "clsx";
|
||||
import {BsList, BsXLg} from "react-icons/bs";
|
||||
import {Fragment, useState} from "react";
|
||||
import {Dialog, Menu, Transition} from "@headlessui/react";
|
||||
|
||||
export default function Navbar({currentPage}: {currentPage: string}) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
|
||||
<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={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/" && "",
|
||||
)}>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/services"
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/services" && "",
|
||||
)}>
|
||||
Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/about" && "",
|
||||
)}>
|
||||
About us
|
||||
</Link>
|
||||
<Link
|
||||
href="/history"
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/history" && "",
|
||||
)}>
|
||||
History
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className={clsx(
|
||||
"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
|
||||
currentPage === "/contact" && "",
|
||||
)}>
|
||||
Contact
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center w-fit gap-4">
|
||||
<Link
|
||||
href="https://encoach.com"
|
||||
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">
|
||||
Platform
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl">
|
||||
Join
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0">
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95">
|
||||
<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
|
||||
<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
|
||||
<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
|
||||
</div>
|
||||
</Dialog.Title>
|
||||
<div className="flex flex-col gap-6 px-8 text-lg">
|
||||
<Link
|
||||
href="/"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/services"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/services" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/about"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/about" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
About us
|
||||
</Link>
|
||||
<Link
|
||||
href="/history"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/history" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
History
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/contact" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Contact
|
||||
</Link>
|
||||
<Link
|
||||
href="/join"
|
||||
className={clsx(
|
||||
"transition ease-in-out duration-300 w-fit",
|
||||
currentPage === "/join" &&
|
||||
"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
|
||||
)}>
|
||||
Join
|
||||
</Link>
|
||||
<Link href="https://encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
|
||||
Platform
|
||||
</Link>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
|
||||
<header className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden">
|
||||
<Link href="/">
|
||||
<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
|
||||
</Link>
|
||||
<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
|
||||
<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
16
src/components/PricingTable.tsx
Normal file
16
src/components/PricingTable.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import {Elements} from "@stripe/react-stripe-js";
|
||||
import {loadStripe} from "@stripe/stripe-js";
|
||||
|
||||
const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");
|
||||
|
||||
export default function PricingTable() {
|
||||
return (
|
||||
<Elements stripe={stripePromise}>
|
||||
<script async src="https://js.stripe.com/v3/pricing-table.js" />
|
||||
{/** @ts-ignore */}
|
||||
<stripe-pricing-table id="pricing" pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
|
||||
</Elements>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user