131 lines
4.9 KiB
React
131 lines
4.9 KiB
React
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Image from "next/image";
|
|
|
|
const Educations = () => {
|
|
const [formationsData, setFormationsData] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchFormations = async () => {
|
|
try {
|
|
const response = await fetch("/assets/data/data.json");
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
setFormationsData(Object.values(data.formations).reverse());
|
|
} catch (error) {
|
|
console.error("Failed to fetch formations data:", error);
|
|
}
|
|
};
|
|
|
|
fetchFormations();
|
|
}, []);
|
|
if (!formationsData) {
|
|
return (
|
|
<div className="flex justify-center items-center h-screen bg-gray-50">
|
|
<p className="text-xl font-medium text-gray-700">
|
|
Loading Educations...
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="educationScroll"
|
|
className="w-full flex flex-col items-center justify-center py-20 px-4 md:px-8 bg-gray-50 rounded-lg shadow-inner"
|
|
>
|
|
<h3 className="text-2xl font-poppins text-blue-500 mb-12 font-extrabold">
|
|
Educations
|
|
</h3>
|
|
|
|
<div className="w-full max-w-6xl">
|
|
{formationsData.map((formation, index) => (
|
|
<div
|
|
key={formation.name}
|
|
className={`
|
|
bg-white shadow-xl rounded-xl border border-gray-100 my-12
|
|
flex flex-col items-center justify-center
|
|
md:grid md:grid-cols-2 md:gap-8 p-6
|
|
`}
|
|
>
|
|
{index % 2 === 0 ? (
|
|
<>
|
|
<div className="flex justify-center items-center p-4">
|
|
<Image
|
|
src={formation.img}
|
|
alt={`${formation.name} thumbnail`}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
|
|
<h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
|
|
{formation.name}
|
|
</h3>
|
|
<p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
|
|
{formation.desc}
|
|
</p>
|
|
|
|
{formation.link && (
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
|
|
<a
|
|
href={formation.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
|
>
|
|
Web Site{" "}
|
|
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-col items-center text-center p-4 md:items-start md:text-left">
|
|
<h3 className="text-2xl font-semibold text-gray-800 mb-3 font-poppins">
|
|
{formation.name}
|
|
</h3>
|
|
<p className="text-gray-600 text-lg mb-5 font-poppins whitespace-pre-wrap">
|
|
{formation.desc}
|
|
</p>
|
|
|
|
{formation.link && (
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-6 w-full mt-auto">
|
|
<a
|
|
href={formation.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center text-gray-700 font-mulish text-xl transition-colors duration-300 hover:text-blue-600 hover:scale-105"
|
|
>
|
|
Web Site{" "}
|
|
<i className="fa-solid fa-up-right-from-square ml-2 text-2xl inline-block transition-transform duration-300 hover:scale-[1.15] hover:-rotate-6"></i>
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-center items-center p-4">
|
|
<Image
|
|
src={formation.img}
|
|
alt={`${formation.name} thumbnail`}
|
|
width={500}
|
|
height={300}
|
|
className="w-full h-auto rounded-lg transition-transform duration-300 hover:scale-95 shadow-md"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Educations;
|