feat: added home page multi lang

yeasin2002 · Aug 20, 2024 · d8af1a9 · d8af1a9
1 parent f2b3740
commit d8af1a9
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 34 deletions.
diff --git a/src/Internationalization/languages/bn.json b/src/Internationalization/languages/bn.json
@@ -2,7 +2,8 @@
 	"root_menu": {
 		"home": "হোম",
 		"about_us": "আমাদের সম্পর্কে",
-		"services": "সার্ভিসসমূহ"
+		"services": "সার্ভিসসমূহ",
+		"login": "লগইন"
 	},
 	"home": {
 		"hero": {
@@ -24,6 +25,34 @@
 		"our_services": {
 			"mainSubHeading": "পূর্ণ ডেন্টাল পরিষেবা",
 			"mainHeading": "আমাদের সেবা সমূহ"
+		},
+		"OurTeam": {
+			"heading": "আমাদের প্রতিশ্রুতিবদ্ধ ডেন্টাল টিম",
+			"subHeading": "দক্ষ এবং পেশাদার",
+			"desc": "আমাদের প্রতিশ্রুতিবদ্ধ এবং দক্ষ ডেন্টাল দলটি আপনার ডেন্টাল স্বাস্থ্যের প্রতি আমাদের অবদানকে পুনর্বিবেচনা করতে আন্তরিকভাবে প্রস্তুত। আমরা আপনার প্রতিটি ডেন্টাল প্রয়োজনের জন্য একটি সুবিধাজনক এবং উন্নত সেবা সরবরাহ করতে অঙ্গীকারী।"
+		},
+		"Faq_TeethEffects": {
+			"faqHeading": "সচরাচর প্রশ্নের উত্তর",
+			"teethEffects": "সেবার গ্রহণের আগে ও পরে"
+		},
+		"footer": {
+			"workingTime_title": "কাজের সময় ",
+			"workingTime_day": "বুধ -সোম",
+			"workingTime_time": "বিকাল ৫-৯",
+			"footerInfo": {
+				"contact": {
+					"title": "যোগাযোগ",
+					"value": ["০১৭৩১-৫১৯০২৫", "০১৫৩৩-৮৮১১০২", "০১৬৭৯-১১২৭২৫"]
+				},
+				"address": {
+					"title": "ঠিকানা",
+					"value": "কচুক্ষেত, মিরপুর ১৪, ঢাকা, বাংলাদেশ"
+				},
+				"certificateNo": {
+					"title": "সার্টিফিকেট নাঃ",
+					"value": "৫৬১৬৫"
+				}
+			}
 		}
 	}
 }
diff --git a/src/Internationalization/languages/en.json b/src/Internationalization/languages/en.json
@@ -2,11 +2,12 @@
 	"root_menu": {
 		"home": "Home",
 		"about_us": "About us",
-		"services": "Services"
+		"services": "Services",
+		"login": "Login"
 	},
 	"home": {
 		"hero": {
-			"main1": "Your donor's health",
+			"main1": "Your dental 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."
 		},
@@ -24,6 +25,34 @@
 		"our_services": {
 			"mainSubHeading": "Complete Dental Services",
 			"mainHeading": "Our Services"
+		},
+		"OurTeam": {
+			"heading": "Our Dedicated Dental Team",
+			"subHeading": "Skilled and Professional",
+			"desc": "Our dedicated and skilled dental team is sincerely prepared to reassess our commitment to your dental health. We are committed to providing a convenient and advanced service for all your dental needs."
+		},
+		"Faq_TeethEffects": {
+			"faqHeading": "Frequently Asked Questions",
+			"teethEffects": "Before and After Service"
+		},
+		"footer": {
+			"workingTime_title": "Working Hours",
+			"workingTime_day": "Wednes. - Mon.",
+			"workingTime_time": "5 PM - 9 PM",
+			"footerInfo": {
+				"contact": {
+					"title": "Contact",
+					"value": ["01731-519025", "01533-881102", "01679-112725"]
+				},
+				"address": {
+					"title": "Address",
+					"value": "Kachukhet, Mirpur 14, Dhaka, Bangladesh"
+				},
+				"certificateNo": {
+					"title": "Certificate No:",
+					"value": "56165"
+				}
+			}
 		}
 	}
 }
diff --git a/src/app/[lang]/(front-end)/page.tsx b/src/app/[lang]/(front-end)/page.tsx
@@ -21,17 +21,20 @@ export interface ParamsLocals {
 }
 export default async function Home({ params }: ParamsLocals) {
 	const dictionary = await getDictionary(params.lang, "hero");
+	const dictionary2 = await getDictionary(params.lang, "home");
 
 	return (
 		<>
 			<Hero dictionary={dictionary} />
 			<AppointmentForm className="home_appointment-form" />
 			<OurStory dictionary={dictionary} />
 			<Services dictionary={dictionary} />
-			<OurTeam />
-			<FAQ />
-			<TeethBeforeAndAfterEffects />
-			<Footer />
+			<OurTeam dictionary={dictionary?.home?.OurTeam} />
+			<FAQ dictionary={dictionary?.home?.Faq_TeethEffects} />
+			<TeethBeforeAndAfterEffects
+				dictionary={dictionary?.home?.Faq_TeethEffects}
+			/>
+			<Footer dictionary={dictionary?.home?.footer} />
 		</>
 	);
 }
diff --git a/src/components/sections/FAQ.tsx b/src/components/sections/FAQ.tsx
@@ -9,25 +9,27 @@ import { faqData } from "@/data";
 import { baloo } from "@/fonts";
 
 import React from "react";
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-export const FAQ = (props: Props) => {
+export const FAQ = ({ dictionary, ...props }: Props) => {
 	return (
 		<div {...props} className="home_sections-container container">
 			<h2
-				className={`mt-8 py-4 font-grotesk text-4xl 2xl:text-5xl font-bold text-main-400 ${baloo.className}`}
+				className={`mt-8 py-4 font-grotesk text-4xl font-bold text-main-400 2xl:text-5xl ${baloo.className}`}
 			>
-				সচরাচর প্রশ্নের উত্তর
+				{dictionary?.faqHeading}
 			</h2>
 
 			<div className="grid grid-cols-1 gap-2 md:grid-cols-2">
 				{faqData.map((faq) => (
 					<Accordion type="single" collapsible key={faq.question}>
 						<AccordionItem value={faq.question} className="border-none">
-							<AccordionTrigger className="rounded-3xl text-xs sm:text-xs md:text-sm xl:text-lg 2xl:text-2xl ">
+							<AccordionTrigger className="rounded-3xl text-xs sm:text-xs md:text-sm xl:text-lg 2xl:text-2xl">
 								{faq.question}
 							</AccordionTrigger>
-							<AccordionContent className="rounded-3xl text-xs sm:text-xs md:text-sm xl:text-lg	   px-4">
+							<AccordionContent className="rounded-3xl px-4 text-xs sm:text-xs md:text-sm xl:text-lg">
 								{faq.answer}
 							</AccordionContent>
 						</AccordionItem>

diff --git a/src/components/sections/Footer.tsx b/src/components/sections/Footer.tsx
@@ -1,25 +1,45 @@
-import { footerInfo } from "@/data";
+// import { footerInfo } from "@/data";
 import React from "react";
 import { Logo } from "../global";
 
-export const Footer = () => {
+interface Props extends React.ComponentPropsWithoutRef<"footer"> {
+	dictionary: any;
+}
+
+export const Footer = ({ dictionary }: Props) => {
+	console.log("🚀 ~ Footer ~ dictionary:", dictionary?.workingTime_day);
+	const footerInfo = [
+		{
+			context: dictionary.footerInfo.contact.title,
+			info: dictionary.footerInfo.contact.value,
+		},
+		{
+			context: dictionary.footerInfo.address.title,
+			info: dictionary.footerInfo.address.value,
+		},
+		{
+			context: dictionary.footerInfo.certificateNo.title,
+			info: dictionary.footerInfo.certificateNo.value,
+		},
+	];
+
 	return (
 		<footer className="container flex w-full flex-col items-start justify-between gap-y-5 rounded-t-3xl bg-[#e8f1f9] py-6 md:flex-row md:items-center 2xl:mt-8">
 			<div className="grid w-full grid-cols-2 items-start justify-between md:w-fit md:grid-cols-1 md:gap-y-2">
 				<Logo href={"/"} />
 				<div className="flex w-full flex-col justify-end text-end md:text-start">
-					<p>কাজের সময় </p>
+					<p> {dictionary?.workingTime_title}</p>
 					<p className="space-x-1 mini:space-x-5">
-						<span>বুধ -সোম</span>
-						<span>বিকাল ৫-৯</span>
+						<span>{dictionary?.workingTime_day}</span>
+						<span>{dictionary?.workingTime_time}</span>
 					</p>
 				</div>
 			</div>
 			<div className="grid w-full flex-1 grid-cols-1 gap-y-6 px-3 mini:px-5 md:grid-cols-4">
 				<div className="hidden md:block"></div>
 				{footerInfo.map((data) => (
 					<div key={data.context + data.info}>
-						<p className="mb-2 font-grotesk text-base font-bold text-main-400 2xl:text-2xl	">
+						<p className="mb-2 font-grotesk text-base font-bold text-main-400 2xl:text-2xl">
 							{data.context}
 						</p>
 						{Array.isArray(data.info) ? (

diff --git a/src/components/sections/Nav/LargeNav.tsx b/src/components/sections/Nav/LargeNav.tsx
@@ -24,9 +24,10 @@ interface Props extends React.ComponentProps<"div"> {
 		label: any;
 		href: string;
 	}[];
+	login: string;
 }
 
-export const LargeNav = ({ rootMenuItems, ...props }: Props) => {
+export const LargeNav = ({ rootMenuItems, login, ...props }: Props) => {
 	const pathname = usePathname();
 	const isLogin = false;
 
@@ -54,7 +55,7 @@ export const LargeNav = ({ rootMenuItems, ...props }: Props) => {
 						href={"/login"}
 						className={buttonVariants({ className: "rounded-full" })}
 					>
-						Login
+						{login}
 					</LinkTo>
 				) : (
 					<div className="flex w-full items-center justify-end gap-4 md:ml-auto md:gap-2 lg:gap-4">

diff --git a/src/components/sections/Nav/MobileNav.tsx b/src/components/sections/Nav/MobileNav.tsx
@@ -20,6 +20,7 @@ interface Props extends React.ComponentProps<"div"> {
 		label: any;
 		href: string;
 	}[];
+	login: string;
 }
 
 export const MobileNav = ({ rootMenuItems, ...props }: Props) => {

diff --git a/src/components/sections/Nav/index.tsx b/src/components/sections/Nav/index.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { LargeNav } from "./LargeNav";
 import { MobileNav } from "./MobileNav";
-import { getDictionary } from "@/Internationalization";
+
 interface Props extends React.ComponentProps<"nav"> {
 	dictionary?: any;
 }
@@ -30,8 +30,16 @@ export const Nav = async ({ dictionary, ...props }: Props) => {
 		>
 			<Logo href={"/"} />
 			<>
-				<MobileNav className="flex sm:hidden" rootMenuItems={rootMenuItems} />
-				<LargeNav className="hidden sm:flex" rootMenuItems={rootMenuItems} />
+				<MobileNav
+					className="flex sm:hidden"
+					rootMenuItems={rootMenuItems}
+					login={dictionary?.login}
+				/>
+				<LargeNav
+					className="hidden sm:flex"
+					rootMenuItems={rootMenuItems}
+					login={dictionary?.login}
+				/>
 			</>
 		</nav>
 	);

diff --git a/src/components/sections/OurTeam.tsx b/src/components/sections/OurTeam.tsx
@@ -1,27 +1,27 @@
 import { baloo } from "@/fonts";
 import React from "react";
 import { TeamCard } from "../Cards/TeamCard";
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-export const OurTeam = (props: Props) => {
+export const OurTeam = ({ dictionary, ...props }: Props) => {
 	return (
 		<section
 			{...props}
 			className="home_sections-container mt-10 md:container md:py-6 2xl:pt-16"
 		>
 			<div className="space-y-2 *:text-center">
 				<p className="font-semibold text-yellowOrange-100 2xl:text-3xl">
-					দক্ষ এবং পেশাদার
+					{dictionary.subHeading}
 				</p>
 				<h2
 					className={`font-grotesk text-2xl font-bold text-deepBlue-100 mini:text-3xl 2xl:text-5xl`}
 				>
-					আমাদের প্রতিশ্রুতিবদ্ধ ডেন্টাল টিম
+					{dictionary.heading}
 				</h2>
 				<p className="mx-auto mt-2 max-w-prose text-left font-grotesk text-lg text-deepBlue-100/80 2xl:mt-4 2xl:text-2xl">
-					আমাদের প্রতিশ্রুতিবদ্ধ এবং দক্ষ ডেন্টাল দলটি আপনার ডেন্টাল স্বাস্থ্যের প্রতি আমাদের
-					অবদানকে পুনর্বিবেচনা করতে আন্তরিকভাবে প্রস্তুত। আমরা আপনার প্রতিটি ডেন্টাল প্রয়োজনের
-					জন্য একটি সুবিধাজনক এবং উন্নত সেবা সরবরাহ করতে অঙ্গীকারী।
+					{dictionary.desc}
 				</p>
 			</div>
 

diff --git a/src/components/sections/TeethBeforeAndAfterEffects.tsx b/src/components/sections/TeethBeforeAndAfterEffects.tsx
@@ -9,15 +9,17 @@ import {
 	ReactCompareSliderImage,
 } from "react-compare-slider";
 
-interface Props extends React.ComponentProps<"div"> {}
+interface Props extends React.ComponentProps<"div"> {
+	dictionary: any;
+}
 
-export const TeethBeforeAndAfterEffects = (props: Props) => {
+export const TeethBeforeAndAfterEffects = ({ dictionary, ...props }: Props) => {
 	return (
 		<div {...props} className="home_sections-container container">
 			<h2
 				className={`my-5 font-grotesk text-2xl font-bold text-deepBlue-100 mini:text-3xl 2xl:text-5xl ${baloo.className}`}
 			>
-				সেবার গ্রহণের আগে ও পরে
+				{dictionary?.teethEffects}
 			</h2>
 
 			<ReactCompareSlider