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

Improved the responsiveness of the website

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-10-15 19:43:07 +01:00
parent 7da5884490
commit 069a26f900
8 changed files with 325 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/app/page.tsx
View File

@@ -1,64 +1,25 @@
/* 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 {BsCardChecklist, BsClipboardFill, BsClockFill, BsInstagram, BsShieldFillCheck, BsTwitter} from "react-icons/bs";
import {BiLogoFacebook} from "react-icons/bi";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
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
</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>
<Navbar currentPage="/" />
<section className="w-full relative bg-white">
<img src="/home/first_banner.png" alt="IELTS Packages - Together we prepare for the future" className="w-full" />
<Link href="https://encoach.com">
<Link href="/join">
<button className="absolute bottom-1/10 left-1/12 bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
Get Started
</button>
</Link>
</section>
<section className="w-full grid grid-cols-4 p-24 bg-white">
<section className="w-full grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-8 p-8 md:p-24 bg-white">
<div className="flex flex-col items-center gap-6">
<div className="bg-mti-rose-ultralight border border-mti-rose-light p-6 rounded-3xl flex items-center justify-center">
<BsClockFill className="text-mti-rose-light w-10 h-10" />
@@ -97,7 +58,7 @@ export default function Home() {
</div>
</section>
<section className="w-full py-32 px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
<section className="w-full p-8 py-16 md:py-32 md:px-16 lg:px-28 bg-mti-gray-seasalt items-center justify-center flex flex-col gap-10 relative">
<span className="text-xl">
<span className="text-white bg-mti-rose-light px-1 py-0">Interested</span> in us?
</span>
@@ -109,7 +70,7 @@ export default function Home() {
Contact Us
</button>
</Link>
<div className="absolute top-1/2 -translate-y-2/3 right-1/4 flex flex-col items-center">
<div className="lg:absolute top-1/2 lg:-translate-y-2/3 right-1/6 flex flex-col items-center">
<em className="text-xs text-mti-purple-light font-semibold">WhatsApp Contact</em>
<img className="w-32 h-32" alt="WhatsApp QR Code for MTI" src="/whatsapp_qrcode.png" />
<div className="w-full h-full relative">
@@ -126,7 +87,7 @@ export default function Home() {
</div>
</section>
<section className="w-full py-32 px-32 flex items-center justify-around bg-white">
<section className="w-full p-8 md:p-20 lg:p-32 flex flex-col gap-12 md:flex-row items-center justify-around bg-white">
<div className="flex flex-col gap-8">
<span className="text-lg font-semibold">
<span className="text-white bg-mti-rose-light px-1 py-0">About us</span> Message from CEO
@@ -147,7 +108,7 @@ export default function Home() {
</Link>
</div>
<div className="w-fit h-fit relative">
<div className="w-80 h-80 rounded-t-[120px] rounded-br-[120px] overflow-hidden">
<div className="w-64 h-64 md:w-80 md:h-80 rounded-t-[80px] rounded-br-[80px] md:rounded-t-[120px] md:rounded-br-[120px] overflow-hidden">
<img className="w-full h-full" alt="MTI's CEO" src="/placeholder_person.png" />
</div>
<div>
@@ -164,93 +125,44 @@ export default function Home() {
</div>
</section>
<section className="w-full py-32 px-32 flex bg-white flex-col gap-32">
<section className="w-full p-8 md:p-20 xl:p-32 flex bg-white flex-col gap-8 md:gap-24 lg:gap-32">
<div className="flex flex-col gap-12 w-full">
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Our Partners</span>
<div className="flex gap-9 flex-wrap items-center">
<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
<img src="/logos/dq_logo.png" alt="DQ's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
<img
src="/logos/knowledge_grid_academy_logo.png"
alt="Knowledge Grid Academy's Logo"
className="w-52 h-52 shadow-lg rounded-xl"
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
/>
<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
<img src="/logos/partner_logo_unknown.png" alt="Unknown Partner's Logo" className="w-52 h-52 shadow-lg rounded-xl" />
<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
<img src="/logos/sohar_logo.png" alt="Sohar's Logo" className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl" />
<img
src="/logos/partner_logo_unknown.png"
alt="Unknown Partner's Logo"
className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl"
/>
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
<img src="/logos/sohar_aluminium_logo.png" alt="Sohar Aluminium's Logo" />
</div>
</div>
</div>
<div className="flex flex-col gap-12 w-full">
<span className="text-white bg-mti-rose-light px-1 py-0 font-semibold w-fit">Accreditation</span>
<div className="flex gap-9 flex-wrap items-center">
<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
<div className="flex gap-9 flex-wrap -lg:justify-center items-center">
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
<img src="/logos/idp_logo.png" alt="IDP's Logo" />
</div>
<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
<img src="/logos/ielts_logo.png" alt="IELTS's Logo" />
</div>
<div className="w-52 h-52 shadow-lg rounded-xl flex items-center justify-center">
<div className="w-48 h-48 xl:w-52 xl:h-52 shadow-lg rounded-xl flex items-center justify-center">
<img src="/logos/ec_council_logo.png" alt="EC Council's Logo" />
</div>
</div>
</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">
<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>
<Footer />
</main>
);
}