fixed project page design

components/mdx/ProjectPreviewGrid.tsx

@@ -1,31 +1,31 @@
 type PreviewItem = {
-  title: string;
-  image: string;
+	title: string;
+	image: string;
 };
 
 type props = {
-  items?: PreviewItem[];
+	items?: PreviewItem[];
 };
 
 export function ProjectPreviewGrid({ items = [] }: props) {
-  return (
-    <div className="grid gap-6 md:grid-cols-2">
-      {items.map((item) => (
-        <div
-          key={item.title}
-          className="rounded-2xl overflow-hidden bg-[#2b160f] text-white min-h-[260px] flex items-center justify-center"
-        >
-          {item.image ? (
-            <img
-              src={item.image}
-              alt={item.title}
-              className="h-full w-full object-cover"
-            />
-          ) : (
-            <span className="text-2xl">{item.title}</span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid gap-6 2xl:grid-cols-2 2xl:space-x-6">
+			{items.map((item) => (
+				<div
+					key={item.title}
+					className="rounded-[10px] overflow-hidden bg-[#2b160f] text-white min-h-65 flex items-center justify-center"
+				>
+					{item.image ? (
+						<img
+							src={item.image}
+							alt={item.title}
+							className="h-full w-full object-cover"
+						/>
+					) : (
+						<span className="text-2xl">{item.title}</span>
+					)}
+				</div>
+			))}
+		</div>
+	);
 }

components/mdx/ProjectVisitButton.tsx

@@ -1,18 +1,21 @@
+import { GoLinkExternal } from "react-icons/go";
+
 type VisitButtonProps = {
-  href: string;
+	href: string;
 };
 
 export function ProjectVisitButton({ href }: VisitButtonProps) {
-  return (
-    <div className="flex justify-center">
-      <a
-        href={href}
-        target="_blank"
-        rel="noreferrer"
-        className="rounded-full bg-[#2b160f] px-4 py-2 text-white text-sm"
-      >
-        Visiter le site
-      </a>
-    </div>
-  );
+	return (
+		<div className="flex justify-center">
+			<a
+				href={href}
+				target="_blank"
+				rel="noreferrer"
+				className="rounded-[10px] border border-brand-brown px-6 py-4 text-brand-brown text-base flex flex-row justify-center items-center gap-2"
+			>
+				Visiter le site
+				<GoLinkExternal className="text-xl" />
+			</a>
+		</div>
+	);
 }

components/mdx/ProjectsColumns.tsx

@@ -1,11 +1,11 @@
 type props = {
-  children: React.ReactNode;
+	children: React.ReactNode;
 };
 
 export function ProjectsColumns({ children }: props) {
-  return (
-    <div className="grid gap-6 md:grid-cols-2">
-      {children}
-    </div>
-  );
+	return (
+		<div className="grid gap-6 text-justify text-base font-sans lg:grid-cols-2 lg:space-x-6">
+			{children}
+		</div>
+	);
 }