translate completed

public/assets/i18n/common/en.json

@@ -52,6 +52,36 @@
     "fullName":"Full Name",
     "message": "Message",
     "sendMessage": "Send Message",
-    "email":"Email"
-
+    "email":"Email",
+    "What is Paying It Forward?": "What is Paying It Forward?",
+    "payingItForward": "It is an application that provides donations to students, which was established to reduce inequality in the education system.",
+    "How can you request an item?": "How can you request an item?",
+    "requestAnItem":"First of all, you must be a member of the application. After you become a member, you must click on the request button on the homepage. You can make a request by filling out the form that opens.",
+    "How can you donate an item?": "How can you donate an item?",
+    "donateAnItem":"First of all, you must be a member of the application. After you become a member, you must click on the donation button on the homepage. You can donate by filling out the form.",
+    "Do I have to pay any fees to request or donate?": "Do I have to pay any fees to request or donate?",
+    "It is completely free to request or donate.": "It is completely free to request or donate.",
+    "Make a donation":"Make a Donation",
+    "Make a request":"Make a Request",
+    "Click the button below to make a request.":"Click the button below to make a request.",
+    "Click the button below to donate.":"Click the button below to donate.",
+    "Request":"Request",
+    "Donation":"Donation",
+    "HowItWorks?":"How It Works?",
+    "connect": "Connect with the donners",
+    "makeADonation": "Make A Donation",
+    "donors": "You can connect with donors via email and home address in this section of our service.",
+    "TheTeam": "TheTeam",
+    "signIn": "Sign In",
+    "Rememberme": "Remember me!",
+    "signUp": "Sign Up",
+    "accept": "I accept",
+    "TermsConditions": "Terms & Conditions",
+    "accountyet": "Do not have an account yet?",
+    "Alreadyhaveanaccount": "Already have an account?",
+    "howitworksdonation" :"You must be a member of the application. After you become a member, you must click on the donation button on the homepage. You can donate by filling out the form.",
+    "howitworksrequest": "You must be a member of the application. After you become a member, you must click on the request button on the homepage. You can make a request by filling out the form that opens.",
+    "reference" :"Whether you donate or make a request, Paying It Forward is on your side to provide the service you are looking for on this side.",
+    "Makearequest": "Make a Request",
+    "ourTestimonial": "Our Testimonial"
 }

public/assets/i18n/common/tr.json

@@ -52,5 +52,37 @@
     "fullName": "İSİM SOYİSİM",
     "message": "Mesaj",
     "sendMessage":"Mesaji Gönder",
-    "email":"Email"
-}
+    "email":"Email",
+    "What is Paying It Forward?": "Paying It Forward nedir?",
+    "payingItForward": "Eğitim sistemindeki eşitsizliği azaltmak amacıyla kurulmuş öğrencilere bağış sağlayan bir uygulamadır.",
+    "How can you request an item?": "Eşyayı talep edebilmek için ne yapmalıyız?",
+    "requestAnItem":"Öncelikle uygulamaya üye olmanız gerekmektedir. Üye olduktan sonra ana sayfadaki istek butonuna tıklamanız gerekmektedir. Açılan formu doldurarak talepte bulunabilirsiniz.",
+    "How can you donate an item?": "Eşyayı bağışta bulmak için ne yapmalıyız?",
+    "donateAnItem":"Öncelikle uygulamaya üye olmanız gerekmektedir. Üye olduktan sonra ana sayfadaki bağış butonuna tıklamanız gerekmektedir. Formu doldurarak bağış yapabilirsiniz.",
+    "Do I have to pay any fees to request or donate?": "Talep etmek veya bağış yapmak için herhangi bir ücret ödemem gerekiyor mu?",
+    "It is completely free to request or donate.": "Talep etmek veya bağış yapmak için herhangi bir ücret ödeme gerekli değildir.",
+    "Make a donation":"Bağış yap",
+    "Make a request":"Talepte bulun",
+    "Click the button below to make a request.":"Talep etmek için aşağıdaki butona tıkla.",
+    "Click the button below to donate.":"Bağış yapmak için aşağıdaki butona tıkla.",
+    "Request":"Talep et",
+    "Donation":"Bağış yap",
+    "HowItWorks?":"Nasıl Çalışır?",
+    "connect":"Bağışçılarla Bağlantı Kurun",
+    "makeADonation": "Bağış Yapın",
+    "donors": "Hizmetimizin bu bölümünde bağışçılarla e-posta ve ev adresi aracılığıyla bağlantı kurabilirsiniz.",
+    "TheTeam": "Takım",
+    "signIn": "Oturum Aç",
+    "Rememberme": "Oturum Aç!",
+    "accept": "Kabul ediyorum.",
+    "TermsConditions": "Şartlar ve Koşullar",
+    "accountyet": "Henüz bir hesabınız yok mu?",
+    "Alreadyhaveanaccount": "Zaten bir hesabın var mı?",
+    "howitworksdonation" :"Uygulamaya üye olmalısınız. Üye olduktan sonra ana sayfadaki bağış yap butonuna tıklamanız gerekmektedir. Formu doldurarak bağışta bulunabilirsiniz.",
+    "howitworksrequest": "Uygulamaya üye olmalısınız. Üye olduktan sonra ana sayfadaki istek butonuna tıklamanız gerekmektedir. Açılan formu doldurarak talepte bulunabilirsiniz.",
+    "reference" :"İster bağış yapın ister talepte bulunun, Paying It Forward aradığınız hizmeti sunmak için yanınızda.",
+    "signUp": "Kayıt Ol!",
+    "Makearequest": "Talepte Bulun",
+    "ourTestimonial": "Tanıtımımız"
+}
+

src/App.jsx

@@ -1,24 +1,29 @@
 import { BrowserRouter } from 'react-router-dom';
-import { Suspense } from "react";
+import { Suspense } from 'react';
 import './App.css';
 
 import Navbar from './components/Navbar/Navbar';
 import Footer from './components/Footer/Footer';
-// import Home from './pages/Home/Home';
-// import Login from './components/Login/Login';
-// import Signup from './components/Signup/Signup';
-// import Faq from './pages/FAQ/Faq';
+import Home from './pages/Home/Home';
+import Login from './components/Login/Login';
+import Signup from './components/Signup/Signup';
+import Faq from './pages/FAQ/Faq';
 import ContactUs from './pages/ContactUs/ContactUs';
-// import Donated from './pages/Donated/Donated';
-// import Request from './pages/Request/Request';
-
+import Donated from './pages/Donated/Donated';
+import Request from './pages/Request/Request';
 
 export default function App() {
   return (
     <div className="App">
       <Suspense fallback={null}>
         <BrowserRouter>
           <Navbar isLogin />
+          <Home />
+          <Donated />
+          <Request />
+          <Signup />
+          <Login />
+          <Faq />
           <ContactUs />
           <Footer />
         </BrowserRouter>

src/components/Footer/Footer.test.js

@@ -50,10 +50,10 @@ describe('Pass valid email to email input field', () => {
       </BrowserRouter>,
     );
 
-    expect(screen.getByText('Items')).toHaveAttribute('href', '/items');
-    expect(screen.getByText('Donators')).toHaveAttribute('href', '/donators');
-    expect(screen.getByText('Pricing')).toHaveAttribute('href', '/pricing');
-    expect(screen.getByText('About Us')).toHaveAttribute('href', '/about-us');
+    expect(screen.getByText('items')).toHaveAttribute('href', '/items');
+    expect(screen.getByText('donators')).toHaveAttribute('href', '/donators');
+    expect(screen.getByText('pricing')).toHaveAttribute('href', '/pricing');
+    expect(screen.getByText('aboutUs')).toHaveAttribute('href', '/about-us');
     expect(screen.getByText('QA')).toHaveAttribute('href', '/qa');
 
     expect(screen.getByText('Kutay Kağan Özen')).toHaveAttribute(

src/components/Footer/FooterHomeLinks.js

@@ -1,27 +1,27 @@
-import { useTranslation } from "react-i18next";
-import i18next from "i18next";
+import { useTranslation } from 'react-i18next';
+
 import { ABOUT_US, QA, ITEMS, DONATORS, PRICING } from '../../routes';
 
 function FooterHomeLinks() {
-  const { i18n, t } = useTranslation(["common"]);
+  const { t } = useTranslation(['common']);
   return (
     <div className=" lg:text-[15px] lg:text-[#FFFFFF] lg:mr-[50px] sm:invisible md:invisible lg:visible">
-      <h5 className="lg:font-bold mb-1">{t("home")}</h5>
+      <h5 className="lg:font-bold mb-1">{t('home')}</h5>
       <ul className="list-none mb-0">
         <li>
-          <a href={ITEMS}>{t("items")}</a>
+          <a href={ITEMS}>{t('items')}</a>
         </li>
         <li>
-          <a href={DONATORS}>{t("donators")}</a>
+          <a href={DONATORS}>{t('donators')}</a>
         </li>
         <li>
-          <a href={PRICING}>{t("pricing")}</a>
+          <a href={PRICING}>{t('pricing')}</a>
         </li>
         <li>
-          <a href={ABOUT_US}> {t("aboutUs")} </a>
+          <a href={ABOUT_US}> {t('aboutUs')} </a>
         </li>
         <li>
-          <a href={QA}>{t("QA")}</a>
+          <a href={QA}>{t('QA')}</a>
         </li>
       </ul>
     </div>

src/components/Footer/FooterResourcesLinks.js

@@ -1,20 +1,19 @@
-import { useTranslation } from "react-i18next";
-import i18next from "i18next";
+import { useTranslation } from 'react-i18next';
 
 export default function FooterResourcesLinks() {
-  const { i18n, t } = useTranslation(["common"]);
+  const { t } = useTranslation(['common']);
   return (
     <div className=" lg:lg:text-[15px] lg:text-[#FFFFFF] sm:invisible md:invisible lg:visible ">
-      <h5 className="font-bold mb-1">{t("resources")}</h5>
+      <h5 className="font-bold mb-1">{t('resources')}</h5>
       <ul className="list-none mb-0">
         <li>
-          <a href="#!">{t("privacyPolicy")}</a>
+          <a href="#!">{t('privacyPolicy')}</a>
         </li>
         <li>
-          <a href="#!">{t("termsAndConditions")}</a>
+          <a href="#!">{t('termsAndConditions')}</a>
         </li>
         <li>
-          <a href="#!">{t("contactUs")}</a>
+          <a href="#!">{t('contactUs')}</a>
         </li>
       </ul>
     </div>

src/components/Footer/FooterTeamLinks.js

@@ -1,12 +1,11 @@
-import { useTranslation } from "react-i18next";
-import i18next from "i18next";
+import { useTranslation } from 'react-i18next';
 import Members from '../../assets/data/Members.json';
 
 function FooterTeamLinks() {
-  const { i18n, t } = useTranslation(["common"]);
+  const { t } = useTranslation(['common']);
   return (
     <div className=" lg:mr-6 lg:text-[15px] lg:text-[#FFFFFF] sm:invisible md:invisible lg:visible ">
-      <h5 className="font-bold mb-1">{t("ourTeam")}</h5>
+      <h5 className="font-bold mb-1">{t('ourTeam')}</h5>
       <ul className="list-none mb-0">
         {Members.map((Member) => (
           <li key={Member.name}>

src/components/Footer/SubscriptionForm.js

@@ -1,18 +1,17 @@
 import { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
-import { useTranslation } from "react-i18next";
-import i18next from "i18next";
+import { useTranslation } from 'react-i18next';
 
 const SignupSchema = Yup.object().shape({
   email: Yup.string().email('Please add a valid email'),
 });
 
 function SubscriptionForm() {
-  const { i18n, t } = useTranslation(["common"]);
+  const { t } = useTranslation(['common']);
   return (
     <div className="md:px-0 md:mt-10 w-full md:block md:mx-2 lg:mr-8 ">
       <h1 className="text-[#FFFF] mb-2 text-md  ml-[2px]">
-        {t("subscribeform")}
+        {t('subscribeform')}
       </h1>
       <Formik
         className=""
@@ -29,23 +28,23 @@ function SubscriptionForm() {
                 className="bg-[#D8F4EC] text-[12px]  text-center text-[#FF7338] md:w-[140px] lg:w-[140px] h-[45px] rounded-l-lg font-small"
                 name="email"
                 type="email"
-                placeholder= {t("enterYourEmailAddress")}
+                placeholder={t('enterYourEmailAddress')}
                 data-testid="subscription"
               />
               <button
                 type="submit"
                 className="text-[#FF7338] bg-[#FFFF] md:w-[85px] lg:w-[90px] h-[45px] rounded-r-lg"
                 data-testid="subscriptionButton"
               >
-                {t("subscribe")}
+                {t('subscribe')}
               </button>
             </div>
             <div className=" lg:p-2 lg:ml-[20px]">
               {errors.email && touched.email ? (
                 <div data-testid="error">{errors.email}</div>
               ) : (
                 <div id="sub" className="hidden">
-                {t("subscribed")}
+                  {t('subscribed')}
                 </div>
               )}
             </div>

src/components/HomeSections/Donators/Donators.jsx

@@ -1,6 +1,7 @@
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import { useTranslation } from 'react-i18next';
 
 const DonatorsData = [
   {
@@ -35,6 +36,7 @@ const DonatorsData = [
   },
 ];
 function Donators() {
+  const { t } = useTranslation(['common']);
   const settings = {
     focusOnSelect: true,
     dots: false,
@@ -81,7 +83,7 @@ function Donators() {
   };
   return (
     <div className="bg-[#D8F4EC] min-h-[500px] md:min-h-[175px] rounded-3xl py-8 mx-7">
-      <h1 className=" mb-16 text-xl font-bold">Donators</h1>
+      <h1 className=" mb-16 text-xl font-bold">{t('donators')}</h1>
       <Slider className="mt-3" {...settings}>
         {DonatorsData.map((Donator) => (
           <div className="w-full" key={Donator.id}>

src/components/HomeSections/Hero/Hero.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
+import { useTranslation } from 'react-i18next';
 
 import donate from '../../../assets/Home/donate.svg';
 import request from '../../../assets/Home/request.svg';
@@ -9,14 +10,15 @@ let slideInterval;
 const featuredProducts = [donate, request];
 const button = ['Donation', 'Request'];
 const paragraph = [
-  ' Realm of the galaxies across the centuries the carbon in our apple',
-  ' Realm of the galaxies across the centuries the carbon in our applpies vanquish the impossible',
+  'Click the button below to donate.',
+  'Click the button below to make a request.',
 ];
-const header = ['make a donation', 'make a request'];
+const header = ['Make a donation', 'Make a request'];
 function Hero() {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const slideRef = useRef();
+  const { t } = useTranslation(['common']);
 
   const handleOnNextClick = () => {
     count = (count + 1) % featuredProducts.length;
@@ -64,14 +66,14 @@ function Hero() {
           alt=""
         />
         <h1 className="text-2xl text-black font-bold mb-1">
-          {header[currentIndex]}
+          {t(header[currentIndex])}
         </h1>
-        <p className="">{paragraph[currentIndex]}</p>
+        <p className="">{t(paragraph[currentIndex])}</p>
         <button
           type="button"
           className="bg-[#FF4848E8] transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 text-white font-bold py-4 w-[40%] mt-4 rounded-xl text-2xl tracking-wider mb-4"
         >
-          {button[currentIndex]}
+          {t(button[currentIndex])}
         </button>
       </div>
 

src/components/HomeSections/HowItWorks/HowItWorks.jsx

@@ -1,11 +1,14 @@
+import { useTranslation } from 'react-i18next';
+
 import speechBubbleIcon from '../../../assets/Home/speechBubbleIcon.svg';
 import donationIcon from '../../../assets/Home/donationIcon.svg';
 import requestIcon from '../../../assets/Home/requestIcon.svg';
 
 function HowItWorks() {
+  const { t } = useTranslation(['common']);
   return (
     <div className=" mt-6">
-      <h1 className="mb-12 text-xl font-bold">How It Works?</h1>
+      <h1 className="mb-12 text-xl font-bold">{t('HowItWorks?')}</h1>
       <div className="h-[60%] bg-[#D8F4EC] flex flex-col justify-center items-center rounded-2xl px-6 mx-7">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 mt-20 mb-20 ">
           <div className="max-w-sm rounded-2xl shadow-lg bg-white">
@@ -15,14 +18,8 @@ function HowItWorks() {
               alt="Connect with the donners"
             />
             <div className="px-6 py-4">
-              <div className="font-bold text-xl mb-2 ">
-                Connect with the donners
-              </div>
-              <p className="text-gray-700 text-base mb-2">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                Voluptatibus quia, nulla! Maiores et perferendis eaque,
-                exercitationem praesentium nihil.
-              </p>
+              <div className="font-bold text-xl mb-2 ">{t('connect')}</div>
+              <p className="text-gray-700 text-base mb-2">{t('donors')}</p>
             </div>
           </div>
           <div className="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white">
@@ -32,11 +29,9 @@ function HowItWorks() {
               alt="Make a Donation"
             />
             <div className="px-6 py-4 mb-3">
-              <div className="font-bold text-xl mb-2">Make a Donation</div>
+              <div className="font-bold text-xl mb-2">{t('makeADonation')}</div>
               <p className="text-gray-700 text-base mb-2">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                Voluptatibus quia, nulla! Maiores et perferendis eaque,
-                exercitationem praesentium nihil.
+                {t('howitworksdonation')}
               </p>
             </div>
           </div>
@@ -47,11 +42,9 @@ function HowItWorks() {
               alt="Make a request"
             />
             <div className="px-6 py-4">
-              <div className="font-bold text-xl mb-2">Make a request</div>
+              <div className="font-bold text-xl mb-2">{t('Makearequest')}</div>
               <p className="text-gray-700 text-base mb-2 ">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                Voluptatibus quia, nulla! Maiores et perferendis eaque,
-                exercitationem praesentium nihil.
+                {t('howitworksrequest')}
               </p>
             </div>
           </div>