You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
3.9 KiB
83 lines
3.9 KiB
import styles from './home-section-cards-header.module.scss';
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faChalkboardUser,
|
|
faGraduationCap, faGuitar,
|
|
faLinesLeaning, faScrewdriverWrench,
|
|
faTabletScreenButton
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface HomeSectionCardsHeaderProps {}
|
|
|
|
export function HomeSectionCardsHeader(props: HomeSectionCardsHeaderProps) {
|
|
return (
|
|
<>
|
|
<main className="container relative max-w-screen-xl mx-auto relative flex flex-col mb-10">
|
|
<section className="relative max-w-6xl w-full mx-auto lg:h-[200px] sm:grid sm:grid-cols-3 sm:gap-4 sm:-top-10 sm:px-4 xl:px-0">
|
|
<div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
|
|
bg-white border-gray-200
|
|
hover:bg-gray-100
|
|
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">a
|
|
</div>
|
|
<div className="block p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
|
|
bg-white border-gray-200
|
|
hover:bg-gray-100
|
|
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">b
|
|
</div>
|
|
<div className="blocks p-6 border rounded-lg shadow h-full my-2 mx-2 sm:my-0 sm:mx-0
|
|
bg-white border-gray-200
|
|
hover:bg-gray-100
|
|
dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">c
|
|
</div>
|
|
</section>
|
|
|
|
<section className="relative w-full">
|
|
<h2 className="font-bold w-full text-center my-5 text-2xl mx-auto text-teal-800">MeCP fournit tout les outils nécessaire pour un apprentissage de qualité</h2>
|
|
|
|
<div className="grid grid-cols-3 gap-2 md:gap-4 max-w-4xl mx-auto px-2 md:px-0">
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-lime-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faTabletScreenButton} /></span>
|
|
<span className="text-lg">Des formats adaptés</span>
|
|
</div>
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-violet-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGraduationCap} /></span>
|
|
<span className="text-lg">Une organisation pédagogique</span>
|
|
</div>
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-yellow-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faChalkboardUser} /></span>
|
|
<span className="text-lg ">Un espace dédié à l'apprentissage</span>
|
|
</div>
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-orange-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faLinesLeaning} /></span>
|
|
<span className="text-lg">Des contenus adaptés et motivants</span>
|
|
</div>
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-teal-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faGuitar} /></span>
|
|
<span className="text-lg">Une méthode révolutionnaire</span>
|
|
</div>
|
|
<div className="text-center flex flex-col transition scale-75
|
|
text-gray-400
|
|
hover:scale-100 hover:text-pink-600">
|
|
<span className="text-5xl my-2 md:mx-10 md:my-5"><FontAwesomeIcon icon={faScrewdriverWrench} /></span>
|
|
<span className="text-lg">Des outils interactifs</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default HomeSectionCardsHeader;
|