feat: 🏗 added home page multi lang support

.eslintrc.json

@@ -3,7 +3,7 @@
 		"next/core-web-vitals",
 		"next",
 		"eslint:recommended",
-		"@typescript-eslint/recommended"
+		"plugin:@typescript-eslint/recommended"
 	],
 	"plugins": ["@typescript-eslint", "import"],
 	"ignorePatterns": ["dist", ".eslintrc.cjs", "node_modules", ".next"],
@@ -13,7 +13,11 @@
 		"react-hooks/exhaustive-deps": "warn",
 		"prefer-const": "warn",
 		"no-mixed-spaces-and-tabs": "warn",
-		"@typescript-eslint/no-unused-vars": "off"
+		"@typescript-eslint/no-unused-vars": "off",
+
+		// from typescript-eslint/recommended
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-non-null-asserted-optional-chain": "off"
 	},
 	"globals": {
 		"mongoose": "readonly",

src/Internationalization/languages/bn.json

@@ -1,5 +1,29 @@
 {
-	"testing": {
-		"hello": "হ্যালো!"
+	"root_menu": {
+		"home": "হোম",
+		"about_us": "আমাদের সম্পর্কে",
+		"services": "সার্ভিসসমূহ"
+	},
+	"home": {
+		"hero": {
+			"main1": "আপনার দাতের স্বাস্থ্য",
+			"main2": "আমাদের প্রথম অগ্রাধিকার",
+			"desc": "উচ্চ মানের ডেন্টাল কেয়ার নিশ্চিত করে উজ্জ্বল, স্বাস্থ্যকর হাসির প্রতিশ্রুতি। আধুনিক প্রযুক্তি এবং পেশাদার ডেন্টিস্টদের সমন্বয়ে,  সর্বোত্তম সেবা প্রদান করা হয়।"
+		},
+		"our_story": {
+			"facilities1": "দক্ষ ডেন্টিস্ট",
+			"facilities2": "আধুনিক যন্ত্রপাতি",
+			"facilities3": "সুবিধাজনক পরিবেশ",
+			"facilities4": "অধিকমত পরিষেবা",
+			"facilities5": "জরুরি অ্যাপয়েন্টমেন্ট",
+			"main_facilities": "দক্ষ ডেন্টাল সেবা ",
+			"main_facilities2": "সুবিধা ও সহজতা",
+			"mainHeading": "আপনার দক্ষ ডেন্টাল",
+			"mainDesc": "প্রতিরক্ষামূলক চিকিৎসা থেকে পুনর্স্থাপন দন্তচিকিৎসা পর্যন্ত, আমাদের দল   সম্পূর্ণরূপে আপনার জন্য সেরা ডেন্টাল যত্ন প্রদানে মনোনিবেশ করে। একটি সুস্থ হাসি একটি খুশির হাসি - মরা আপনাকে উভয়ই অর্জন করতে সাহায্য করি!"
+		},
+		"our_services": {
+			"mainSubHeading": "পূর্ণ ডেন্টাল পরিষেবা",
+			"mainHeading": "আমাদের সেবা সমূহ"
+		}
 	}
-}
+}

src/Internationalization/languages/en.json

@@ -1,5 +1,29 @@
 {
-	"testing": {
-		"hello": "Hello!"
+	"root_menu": {
+		"home": "Home",
+		"about_us": "About us",
+		"services": "Services"
+	},
+	"home": {
+		"hero": {
+			"main1": "Your donor's health",
+			"main2": " Our first priority",
+			"desc": " High quality dental care ensures a bright, healthy smile. With the combination of modern technology and professional dentists, the best services are provided."
+		},
+		"our_story": {
+			"facilities1": "Skilled Dentists",
+			"facilities2": "Modern Equipment",
+			"facilities3": "Convenient Environment",
+			"facilities4": "Comprehensive Services",
+			"facilities5": "Emergency Appointments",
+			"main_facilities": "Skilled Dental Services",
+			"main_facilities2": "Convenience and Ease",
+			"mainHeading": "Your Skilled Dental",
+			"mainDesc": "From preventive care to restorative dentistry, our team is fully focused on providing you with the best dental care. A healthy smile is a happy smile - we help you achieve both!"
+		},
+		"our_services": {
+			"mainSubHeading": "Complete Dental Services",
+			"mainHeading": "Our Services"
+		}
 	}
-}
+}

src/app/[lang]/(front-end)/layout.tsx

@@ -1,14 +1,19 @@
 import { Nav } from "@/components";
+import { getDictionary } from "@/Internationalization";
 import React from "react";
 
-const FrontEndLayout = ({
+const FrontEndLayout = async ({
 	children,
+	params,
 }: Readonly<{
 	children: React.ReactNode;
+	params: { lang: string };
 }>) => {
+	const dic = await getDictionary(params.lang, "root_menu");
+
 	return (
 		<>
-			<Nav />
+			<Nav dictionary={dic} />
 			{children}
 		</>
 	);

src/app/[lang]/(front-end)/page.tsx

@@ -20,14 +20,14 @@ export interface ParamsLocals {
 	};
 }
 export default async function Home({ params }: ParamsLocals) {
-	const dic = await getDictionary(params.lang, "testing");
+	const dictionary = await getDictionary(params.lang, "hero");
 
 	return (
 		<>
-			<Hero />
+			<Hero dictionary={dictionary} />
 			<AppointmentForm className="home_appointment-form" />
-			<OurStory />
-			<Services />
+			<OurStory dictionary={dictionary} />
+			<Services dictionary={dictionary} />
 			<OurTeam />
 			<FAQ />
 			<TeethBeforeAndAfterEffects />

src/components/sections/Hero.tsx

@@ -1,13 +1,17 @@
+"use server";
+
 import { baloo, TiroBangla400 } from "@/fonts";
+import { getDictionary } from "@/Internationalization";
 import React from "react";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-export const Hero = (props: Props) => {
+export const Hero = async ({ dictionary, ...props }: Props) => {
 	return (
 		<main {...props} className="relative h-screen">
 			<video
-				// src={process.cwd() + "/src/assets/videos/work.mp4"}
 				src="https://videos.pexels.com/video-files/3024322/3024322-hd_1920_1080_30fps.mp4"
 				autoPlay
 				loop
@@ -16,17 +20,16 @@ export const Hero = (props: Props) => {
 			/>
 			<div className="absolute left-0 top-0 flex h-full w-full flex-col items-center bg-black bg-opacity-50 px-2 pt-32 text-center md:justify-center md:pt-0">
 				<h1
-					className={`font-sans text-3xl font-semibold text-white mini:text-4xl sm:text-5xl md:text-7xl xl:text-8xl 2xl:text-9xl 2xl:leading-tight ${baloo.className}`}
+					className={`font-sans text-3xl font-semibold capitalize text-white mini:text-4xl sm:text-5xl md:text-7xl xl:text-8xl 2xl:text-9xl 2xl:leading-tight ${baloo.className}`}
 				>
-					আপনার দাতের স্বাস্থ্য
+					{dictionary?.home?.hero?.main1}
 					<br />
-					আমাদের প্রথম অগ্রাধিকার
+					{dictionary?.home?.hero?.main2}
 				</h1>
 				<p
 					className={`mt-4 px-4 font-sans text-lg font-semibold text-white md:max-w-4xl md:text-xl lg:text-2xl ${TiroBangla400.className}`}
 				>
-					উচ্চ মানের ডেন্টাল কেয়ার নিশ্চিত করে উজ্জ্বল, স্বাস্থ্যকর হাসির প্রতিশ্রুতি। আধুনিক
-					প্রযুক্তি এবং পেশাদার ডেন্টিস্টদের সমন্বয়ে, সর্বোত্তম সেবা প্রদান করা হয়।
+					{dictionary?.home?.hero?.desc}
 				</p>
 			</div>
 		</main>

src/components/sections/Nav/LargeNav.tsx

@@ -1,9 +1,10 @@
+"use client";
+
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
 
 import { Button, buttonVariants, LinkTo } from "@/components";
-import { rootMenuItems } from "@/data/navItems";
 import { HindSiliguri, HindSiliguri600 } from "@/fonts";
 import { cn } from "@/utils";
 
@@ -18,9 +19,14 @@ import {
 import { CircleUser } from "lucide-react";
 import { LangSwitcher } from "@/components/global/LanguageSwitcher";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	rootMenuItems: {
+		label: any;
+		href: string;
+	}[];
+}
 
-export const LargeNav = ({ ...props }: Props) => {
+export const LargeNav = ({ rootMenuItems, ...props }: Props) => {
 	const pathname = usePathname();
 	const isLogin = false;
 

src/components/sections/Nav/MobileNav.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AlignJustify } from "lucide-react";
 import Link from "next/link";
 import React from "react";
@@ -8,14 +10,19 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { rootMenuItems } from "@/data/navItems";
+
 import { HindSiliguri, HindSiliguri600 } from "@/fonts";
 import { cn } from "@/utils";
 import { usePathname } from "next/navigation";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	rootMenuItems: {
+		label: any;
+		href: string;
+	}[];
+}
 
-export const MobileNav = ({ ...props }: Props) => {
+export const MobileNav = ({ rootMenuItems, ...props }: Props) => {
 	const pathname = usePathname();
 	return (
 		<div className={cn(props.className)} {...props}>

src/components/sections/Nav/index.tsx

@@ -1,22 +1,37 @@
-"use client";
-
 import { Logo } from "@/components";
 import React from "react";
 
 import { LargeNav } from "./LargeNav";
 import { MobileNav } from "./MobileNav";
-interface Props extends React.ComponentProps<"nav"> {}
+import { getDictionary } from "@/Internationalization";
+interface Props extends React.ComponentProps<"nav"> {
+	dictionary?: any;
+}
 
-export const Nav = (props: Props) => {
+export const Nav = async ({ dictionary, ...props }: Props) => {
+	const rootMenuItems = [
+		{
+			label: dictionary?.home,
+			href: "/",
+		},
+		{
+			label: dictionary?.about_us,
+			href: "/about-us",
+		},
+		{
+			label: dictionary?.services,
+			href: "/services",
+		},
+	];
 	return (
 		<nav
 			{...props}
-			className="sticky top-0 z-50 flex items-center justify-between bg-white px-4 py-3 2xl:py-4 w-full mini:px-8 2xl:px-10"
+			className="sticky top-0 z-50 flex w-full items-center justify-between bg-white px-4 py-3 mini:px-8 2xl:px-10 2xl:py-4"
 		>
 			<Logo href={"/"} />
 			<>
-				<MobileNav className="flex sm:hidden" />
-				<LargeNav className="hidden sm:flex" />
+				<MobileNav className="flex sm:hidden" rootMenuItems={rootMenuItems} />
+				<LargeNav className="hidden sm:flex" rootMenuItems={rootMenuItems} />
 			</>
 		</nav>
 	);

src/components/sections/OurStory.tsx

@@ -5,18 +5,21 @@ import React from "react";
 import theethImg from "@/assets/icons/teeths/theeth-blue.svg";
 import bannerImg from "@/assets/images/tools.webp";
 import { cn } from "@/utils";
+import { getDictionary } from "@/Internationalization";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-const facilities = [
-	"দক্ষ ডেন্টিস্ট",
-	"আধুনিক যন্ত্রপাতি",
-	"সুবিধাজনক পরিবেশ",
-	"অধিকমত পরিষেবা",
-	"জরুরি অ্যাপয়েন্টমেন্ট",
-];
+export const OurStory = ({ dictionary, ...props }: Props) => {
+	const facilities = [
+		dictionary?.home?.our_story?.facilities1,
+		dictionary?.home?.our_story?.facilities2,
+		dictionary?.home?.our_story?.facilities3,
+		dictionary?.home?.our_story?.facilities4,
+		dictionary?.home?.our_story?.facilities5,
+	];
 
-export const OurStory = (props: Props) => {
 	return (
 		<section
 			{...props}
@@ -32,29 +35,27 @@ export const OurStory = (props: Props) => {
 						className="size-full rounded-lg object-cover object-center"
 						priority
 					/>
-					<div className="absolute bottom-5 left-0 right-0 mx-auto w-4/5 space-y-3 rounded-xl bg-gray-50 p-4 2xl:text-2xl 2xl:space-y-3">
-						<div className="flex items-center gap-x-2 ">
+					<div className="absolute bottom-5 left-0 right-0 mx-auto w-4/5 space-y-3 rounded-xl bg-gray-50 p-4 2xl:space-y-3 2xl:text-2xl">
+						<div className="flex items-center gap-x-2">
 							<CircleCheck className="2xl:size-10" />
-							<p>দক্ষ ডেন্টাল সেবা </p>
+							<p>{dictionary?.home?.our_story?.main_facilities}</p>
 						</div>
 						<div className="flex items-center gap-x-2">
 							<CircleCheck className="2xl:size-10" />
-							<p>সুবিধা ও সহজতা</p>
+							<p>{dictionary?.home?.our_story?.main_facilities2}</p>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div>
 				<h2 className="mb-4 font-grotesk text-4xl font-bold text-main-400 mini:text-5xl 2xl:text-6xl">
-					আপনার দক্ষ ডেন্টাল
+					{dictionary?.home?.our_story?.mainHeading}
 				</h2>
 				<p className={cn("my-5 text-lg text-main-500 2xl:text-2xl")}>
-					প্রতিরক্ষামূলক চিকিৎসা থেকে পুনর্স্থাপন দন্তচিকিৎসা পর্যন্ত, আমাদের দল সম্পূর্ণরূপে আপনার
-					জন্য সেরা ডেন্টাল যত্ন প্রদানে মনোনিবেশ করে। একটি সুস্থ হাসি একটি খুশির হাসি - আমরা
-					আপনাকে উভয়ই অর্জন করতে সাহায্য করি!
+					{dictionary?.home?.our_story?.mainDesc}
 				</p>
 
-				<div className="space-y-2 2xl:space-y-4 2xl:mt-4 ">
+				<div className="space-y-2 2xl:mt-4 2xl:space-y-4">
 					{facilities.map((info) => (
 						<div key={info} className="flex items-center gap-x-2">
 							<Image src={theethImg} alt="Teeth" width={30} height={30} />

src/components/sections/Services.tsx

@@ -7,14 +7,18 @@ import React from "react";
 import "swiper/css";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-export const Services = (props: Props) => {
+export const Services = ({ dictionary, ...props }: Props) => {
 	return (
 		<div {...props} className="mb-4 mt-10 px-4">
-			<p className="text-center text-main-400 2xl:text-2xl">পূর্ণ ডেন্টাল পরিষেবা</p>
-			<h2 className="text-center font-grotesk text-3xl f	ont-bold text-main-600 2xl:text-5xl">
-				আমাদের সেবা সমূহ
+			<p className="text-center text-main-400 2xl:text-2xl">
+				{dictionary.home?.our_services?.mainSubHeading}
+			</p>
+			<h2 className="f ont-bold text-center font-grotesk text-3xl text-main-600 2xl:text-5xl">
+				{dictionary.home?.our_services?.mainHeading}
 			</h2>
 
 			<Swiper

src/fonts/index.tsx

@@ -1,13 +1,13 @@
 import {
-	Anek_Bangla,
+	// Anek_Bangla,
 	Baloo_Da_2,
 	Hind_Siliguri,
 	Tiro_Bangla,
 } from "next/font/google";
 
 export const baloo = Baloo_Da_2({ subsets: ["latin"] });
 export const TiroBangla400 = Tiro_Bangla({ subsets: ["latin"], weight: "400" });
-export const anekBangla = Anek_Bangla({ subsets: ["latin"], weight: "400" });
+// export const anekBangla = Anek_Bangla({ subsets: ["latin"], weight: "400" });
 export const HindSiliguri = Hind_Siliguri({
 	subsets: ["latin"],
 	weight: "400",