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

src/components/home/hero/Hero.tsx

@@ -0,0 +1,35 @@
+import { useTranslations } from "next-intl";
+import HeroButtons from "./HeroButtons";
+import HeroTech from "./HeroTech";
+
+export default function Hero() {
+  const t = useTranslations("home.hero");
+
+  return (
+    <>
+      <section className="flex flex-col items-center justify-center max-w-4xl px-4 mx-auto text-center">
+        {/* Top Badge */}
+        <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 text-sm text-orange-400 border rounded-full border-orange-500/20 bg-orange-500/10">
+          <span className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></span>
+          {t("badge")}
+        </div>
+
+        {/* Main Title */}
+        <h1 className="mb-6 text-5xl font-bold leading-tight md:text-7xl">
+          {t("title1")}
+          <br />
+          {t("title2")}
+        </h1>
+
+        {/* Subtitle */}
+        <p className="max-w-2xl mb-10 text-lg leading-relaxed text-gray-400 md:text-xl">{t("subtitle")}</p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-col items-center gap-4 sm:flex-row">
+          <HeroButtons />
+        </div>
+      </section>
+      <HeroTech />
+    </>
+  );
+}