feat: add next-intl RTL Arabic support (#104)

app/(pages)/(landingPage)/About.jsx → app/[locale]/(pages)/(landingPage)/About.jsx

@@ -2,8 +2,10 @@
 import React from "react";
 import Image from "next/image";
 import Button from "@/components/atoms/form/Button";
+import { useTranslations } from "next-intl";
 
 const About = () => {
+  const t = useTranslations("landing.about");
   return (
     <section id="mission" className="py-16 px-4 sm:px-6 lg:px-8 bg-white/80 backdrop-blur-xl">
       <div className="max-w-7xl mx-auto">
@@ -12,18 +14,12 @@ const About = () => {
           <div className="space-y-6 lg:space-y-8">
             <div className="space-y-4">
               <h2 className="text-4xl sm:text-5xl lg:text-7xl font-bold leading-tight text-transparent bg-clip-text bg-gradient-to-r from-accent to-highlight">
-                Where Deen Meets{" "}
-                <span>Excellence</span>
+                {t.rich("title", { emphasis: (chunks) => <span>{chunks}</span> })}
               </h2>
             </div>
 
             <p className="text-xl leading-relaxed text-gray-700 max-w-2xl">
-              We are dedicated to connecting Muslims worldwide through
-              meaningful conversations, authentic knowledge, and a supportive
-              community. DeenBridge empowers users to learn, share, and grow in
-              their faith by providing access to trusted resources, inspiring
-              books, and opportunities to engage with others on their journey of
-              Islamic excellence.
+              {t("description")}
             </p>
 
 
@@ -35,7 +31,7 @@ const About = () => {
                 to="/signup"
                 className=" text-white font-semibold py-4 px-8 text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
               >
-                Explore DeenBridge
+                {t("cta")}
               </Button>
             </div>
           </div>
@@ -45,7 +41,7 @@ const About = () => {
             <div className="relative z-10">
               <Image
                 src="/images/mosque.png"
-                alt="Beautiful mosque architecture representing Islamic excellence"
+                alt={t("imageAlt")}
                 width={600}
                 height={600}
                 className="w-full h-auto object-contain rounded-2xl shadow-2xl"
@@ -54,8 +50,8 @@ const About = () => {
             </div>
 
             {/* Decorative Elements */}
-            <div className="absolute -top-4 -right-4 w-32 h-32 bg-gradient-to-br from-green-200 to-emerald-200 rounded-full opacity-60 blur-xl"></div>
-            <div className="absolute -bottom-4 -left-4 w-24 h-24 bg-gradient-to-tr from-green-100 to-emerald-100 rounded-full opacity-40 blur-lg"></div>
+            <div className="absolute -top-4 -end-4 w-32 h-32 bg-gradient-to-br from-green-200 to-emerald-200 rounded-full opacity-60 blur-xl"></div>
+            <div className="absolute -bottom-4 -start-4 w-24 h-24 bg-gradient-to-tr from-green-100 to-emerald-100 rounded-full opacity-40 blur-lg"></div>
           </div>
         </div>
       </div>

app/(pages)/(landingPage)/CTA.jsx → app/[locale]/(pages)/(landingPage)/CTA.jsx

@@ -1,19 +1,20 @@
 import Button from "@/components/atoms/form/Button";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 export default function CTA() {
+  const t = useTranslations("landing.cta");
   return (
     <section className="relative mx-auto py-10 px-4 sm:px-8 bg-basic text-white  shadow-xl flex flex-col items-center justify-center overflow-hidden">
       <h2 className="text-4xl sm:text-5xl font-bold mb-4 text-center">
-        Ready to Join Deen Bridge?
+        {t("title")}
       </h2>
       <p className="text-lg sm:text-xl mb-8 text-center max-w-2xl">
-        Unlock a world of knowledge, community, and growth. Sign up now and
-        start your journey with us today!
+        {t("description")}
       </p>
       <Link href="/signup">
         <Button className="px-8 py-3 text-lg font-semibold rounded-full bg-white text-green-700 hover:bg-green-100 transition">
-          Get Started
+          {t("button")}
         </Button>
       </Link>
     </section>

app/(pages)/(landingPage)/Footer.jsx → app/[locale]/(pages)/(landingPage)/Footer.jsx

@@ -2,7 +2,17 @@ import { FaTwitter, FaGithub } from "react-icons/fa";
 import { cn } from "@/lib/utils";
 import { poppins_600 } from "@/lib/config/font.config";
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 export default function Footer() {
+  const t = useTranslations("landing.footer");
+  const links = [
+    { name: t("courses"), href: "/dashboard/courses" },
+    { name: t("library"), href: "/dashboard/library" },
+    { name: t("spaces"), href: "/dashboard/spaces" },
+    { name: t("sadaqah"), href: "/dashboard/sadaqah" },
+    { name: t("blog"), href: "/blog" },
+    { name: t("github"), href: "https://github.com/Deen-Bridge" },
+  ];
   return (
     <footer id="contact" className="relative bg-basic text-white overflow-hidden ">
 
@@ -22,26 +32,17 @@ export default function Footer() {
               Deen Bridge
             </span>
             <p className="text-gray-200 text-sm leading-relaxed">      
-                Deen Bridge is your trusted platform for connecting learners and educators in a vibrant, supportive community. 
-                Explore a wide range of courses, resources, and events designed to help you grow in knowledge and faith. 
-                Join us on our mission to make quality Islamic education accessible to everyone, everywhere around the globe.
+                {t("description")}
             </p>
           </div>
 
           {/* Navigation Links */}
           <div className=" md:justify-self-center">
             <h3 className="text-3xl sm:text-4xl  font-semibold  mb-4 font-stretch-125%">
-              Explore
+              {t("explore")}
             </h3>
             <ul className="space-y-4 text-sm">
-              {[
-                { name: "Courses", href: "/dashboard/courses" },
-                { name: "Library", href: "/dashboard/library" },
-                { name: "Community Spaces", href: "/dashboard/spaces" },
-                { name: "Sadaqah Fund", href: "/dashboard/sadaqah" },
-                { name: "Blog", href: "/blog" },
-                { name: "Open Source on GitHub", href: "https://github.com/Deen-Bridge" },
-              ].map((link) => (
+              {links.map((link) => (
                 <li key={link.name}>
                   <a
                     href={link.href}
@@ -57,12 +58,10 @@ export default function Footer() {
           {/* Newsletter & Socials */}
           <div>
             <h3 className="text-3xl sm:text-4xl  font-semibold  mb-4 font-stretch-125%">
-              Join the Community
+              {t("community")}
             </h3>
             <p className="text-gray-200 text-sm leading-relaxed mb-6">
-              Deen Bridge is open source and built in public on the Stellar
-              network. Follow our journey, star the project, or contribute
-              on GitHub.
+              {t("communityDescription")}
             </p>
             <div className="flex items-center gap-4 text-2xl">
               <Link
@@ -89,7 +88,7 @@ export default function Footer() {
 
         {/* Bottom Bar */}
         <div className="border-t border-green-900 pt-6 flex items-center justify-center text-sm text-white font-stretch-125%">
-          <p className="text-center md:text-left mt-4 md:mt-0">
+          <p className="mt-4 text-center md:mt-0 md:text-start">
             © {new Date().getFullYear()} Deen Bridge. All rights reserved.
           </p>
         </div>

app/(pages)/(landingPage)/Hero.jsx → app/[locale]/(pages)/(landingPage)/Hero.jsx

@@ -4,8 +4,10 @@ import { cn } from "@/lib/utils";
 import { poppins_600 } from "@/lib/config/font.config";
 import Button from "@/components/atoms/form/Button";
 import Navbar from "@/components/molecules/ladingpage/Navbar";
+import { useTranslations } from "next-intl";
 
 const Hero = () => {
+    const t = useTranslations("landing.hero");
     return (
         <main className="relative h-screen flex flex-col bg-basic text-white overflow-hidden">
             <div className="absolute inset-0 bg-gradient-to-br from-green-500 via-slate-800 to-green-500 opacity-30 blur-2xl z-0" />
@@ -17,24 +19,19 @@ const Hero = () => {
                         "text-6xl lg:text-8xl font-bold mb-4 leading-snug"
                     )}
                 >
-                    Welcome to{" "}
-                    <span className="bg-gradient-to-r from-green-400 via-green-500 to-green-600 text-transparent bg-clip-text ">
-                        Deen Bridge
-                    </span>
+                    {t.rich("title", { brand: (chunks) => <span className="bg-gradient-to-r from-green-400 via-green-500 to-green-600 text-transparent bg-clip-text">{chunks}</span> })}
                 </h1>
 
                 <p className="text-lg md:text-xl lg:text-3xl mb-6 text-green-200">
-                    Your journey to{" "}
-                    <span className="text-white font-semibold">excellence</span>
-                    {" "}  starts here.
+                    {t.rich("subtitle", { emphasis: (chunks) => <span className="text-white font-semibold">{chunks}</span> })}
                 </p>
                 <Button
                     wide
                     round
                     to="/dashboard"
                     className=" text-white px-10 py-3 animate-in-out transition-all"
                 >
-                    Lets Dive
+                    {t("cta")}
                 </Button>
             </div>
         </main>

app/(pages)/(landingPage)/HowItWorks.jsx → app/[locale]/(pages)/(landingPage)/HowItWorks.jsx

@@ -11,8 +11,8 @@ export default function HowItWorks() {
     <section className="relative py-24 px-4 sm:px-6 bg-gradient-to-br from-green-50 via-white to-green-100/80 overflow-hidden">
       {/* Animated background elements */}
       <div className="absolute inset-0 pointer-events-none z-0">
-        <div className="absolute left-0 top-0 w-1/2 h-1/2 bg-gradient-to-br from-accent/10 to-transparent rounded-full blur-3xl animate-pulse" />
-        <div className="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-tr from-highlight/10 to-transparent rounded-full blur-2xl animate-pulse" />
+        <div className="absolute start-0 top-0 w-1/2 h-1/2 bg-gradient-to-br from-accent/10 to-transparent rounded-full blur-3xl animate-pulse" />
+        <div className="absolute bottom-0 end-0 w-1/3 h-1/3 bg-gradient-to-tr from-highlight/10 to-transparent rounded-full blur-2xl animate-pulse" />
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-accent/5 to-highlight/5 rounded-full blur-3xl animate-pulse" />
       </div>
 

app/(pages)/(landingPage)/Testimonials.jsx → app/[locale]/(pages)/(landingPage)/Testimonials.jsx

@@ -61,8 +61,8 @@ export default function Testimonials() {
     <section className="relative py-20 px-2 sm:px-6 bg-basic overflow-hidden">
       {/* Decorative Islamic motif background */}
       <div className="absolute inset-0 pointer-events-none z-0">
-        <div className="absolute left-0 top-0 w-1/2 h-1/2 bg-gradient-to-br from-accent/10 to-transparent rounded-full blur-3xl" />
-        <div className="absolute right-0 bottom-0 w-1/3 h-1/3 bg-gradient-to-tr from-highlight/10 to-transparent rounded-full blur-2xl" />
+        <div className="absolute start-0 top-0 w-1/2 h-1/2 bg-gradient-to-br from-accent/10 to-transparent rounded-full blur-3xl" />
+        <div className="absolute bottom-0 end-0 w-1/3 h-1/3 bg-gradient-to-tr from-highlight/10 to-transparent rounded-full blur-2xl" />
       </div>
       <div className="relative z-10 max-w-7xl mx-auto">
         <h2

app/[locale]/(pages)/(landingPage)/WhyDeenBridge.jsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { FaBookOpen, FaHandsHelping, FaMosque, FaShieldAlt, FaUsers } from "react-icons/fa";
+import { BsStars } from "react-icons/bs";
+import { useTranslations } from "next-intl";
+import Button from "@/components/atoms/form/Button";
+import { cn } from "@/lib/utils";
+import { poppins_600 } from "@/lib/config/font.config";
+
+const featureDefinitions = [
+  { icon: FaBookOpen, title: "trustedTitle", description: "trustedDescription" },
+  { icon: FaUsers, title: "communityTitle", description: "communityDescription" },
+  { icon: FaMosque, title: "spacesTitle", description: "spacesDescription" },
+  { icon: FaHandsHelping, title: "learningTitle", description: "learningDescription" },
+  { icon: FaShieldAlt, title: "privacyTitle", description: "privacyDescription" },
+  { icon: BsStars, title: "excellenceTitle", description: "excellenceDescription" },
+];
+
+export default function WhyDeenBridge() {
+  const t = useTranslations("landing.features");
+
+  return (
+    <section id="services" className="relative overflow-hidden bg-basic px-2 py-20 sm:px-6">
+      <div className="pointer-events-none absolute inset-0 z-0">
+        <div className="absolute start-0 top-0 h-1/2 w-1/2 rounded-full bg-gradient-to-br from-accent/10 to-transparent blur-3xl" />
+        <div className="absolute bottom-0 end-0 h-1/3 w-1/3 rounded-full bg-gradient-to-tr from-highlight/10 to-transparent blur-2xl" />
+      </div>
+      <div className="relative z-10 mx-auto max-w-6xl">
+        <h2 className={cn(poppins_600, "pb-12 text-center text-4xl font-bold text-transparent bg-gradient-to-r from-accent via-green-500 to-highlight bg-clip-text sm:text-8xl")}>
+          {t("title")}
+        </h2>
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {featureDefinitions.map(({ icon: Icon, title, description }) => (
+            <div key={title} className="flex flex-col items-center rounded-3xl border-0 border-accent/10 bg-white/80 p-8 text-center shadow-xl backdrop-blur-xl transition-all hover:scale-[1.03] hover:shadow-2xl">
+              <Icon className="mb-4 h-10 w-10 text-accent" />
+              <h3 className="mb-2 text-xl font-bold text-accent">{t(title)}</h3>
+              <p className="mb-2 text-base text-gray-700">{t(description)}</p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-14 flex justify-center">
+          <Button wide round to="/signup" className="bg-accent px-10 py-3 text-lg font-bold text-white transition-all hover:bg-highlight">
+            {t("join")}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}