setup intl for multi language website and make hero and services and projects components in home dynamic and optimized

src/app/[locale]/page.tsx

@@ -0,0 +1,35 @@
+import HomeAcademy from "@/components/home/HomeAcademy";
+import Hero from "@/components/home/hero/Hero";
+import Consultation from "@/components/network/Consultation";
+import ContactFooter from "@/components/network/ContactFooter";
+import Services from "@/components/home/Services";
+import Projects from "@/components/home/Projects";
+import { BACKEND_URL_LOCAL } from "@/utilities/constants/urls.constant";
+import { Portfolio } from "@/utilities/types/portfolio.type";
+
+export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+
+  const latestPortfolios: Portfolio[] = await fetch(`${BACKEND_URL_LOCAL}/portfolios/latest/${locale}`)
+    .then((res) => res.json())
+    .then((res) => res.data);
+
+  return (
+    <div className="min-h-screen bg-[#0B1120] text-white font-sans selection:bg-orange-500/30">
+      <div className="fixed top-0 inset-x-0 h-[500px] bg-gradient-to-b from-orange-500/5 via-transparent to-transparent pointer-events-none -z-10"></div>
+
+      <main className="flex flex-col gap-24 pt-32 pb-12">
+        <Hero />
+        <div className="w-full px-4 mx-auto space-y-32 max-w-7xl sm:px-6 lg:px-8">
+          <Services />
+          <Projects data={latestPortfolios} />
+          <HomeAcademy />
+          <div>
+            <Consultation />
+            <ContactFooter />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}