Skip to content

Commit

Permalink
translated the product/monitor page
Browse files Browse the repository at this point in the history
  • Loading branch information
@TroyMoses
TroyMoses committed Mar 7, 2025
1 parent c517e6b commit b81d27f
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 51 deletions.
47 changes: 47 additions & 0 deletions src/website2/public/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,5 +347,52 @@
"cancel": "Cancel",
"save": "Save"
}
},
"monitorDisplay": {
"monitorsIn": "Monitors in {country}",
"defaultCountry": "Country"
},
"monitorPage": {
"breadcrumb": "Our Products > Binos Monitor",
"hero": {
"title": "Built in Africa for African cities.",
"description": "Designed, manufactured, and calibrated to measure ambient air quality and optimized to suit the African context.",
"imageAlt": "Built in Africa"
},
"designedForAfrica": {
"title": "Designed for Africa",
"paragraph1": "The monitors are optimized with capabilities to cope with challenges like extreme weather conditions, including high levels of dust and heat, typical to the context of African cities.",
"paragraph2": "Powered by either mains or solar, the device is optimized to work in settings characterized by unreliable power and intermittent internet connectivity. It runs on a 2G GSM network configuration for IoT SIM cards.",
"maintenanceManual": "Maintenance Manual",
"imageAlt": "Local Monitor"
},
"mobileMonitoring": {
"title": "Mobile Monitoring",
"paragraph1": "The monitors are easy to install and can be placed on static buildings or motorcycle taxis locally called 'boda-bodas' to improve spatial coverage and revolution.",
"paragraph2": "Air quality data collection using motorcycle taxis has real potential for high-resolution air quality monitoring in urban spaces. Mobile monitoring enables us to close the gaps and spatial limitations of fixed static monitoring.",
"imageAlt": "Mobile Monitoring"
},
"monitorsInAfrica": {
"title": "250+ Air quality monitors installed in 8 major African cities",
"paragraph1": "To effectively tackle air pollution, access to data and contextual evidence is important to show the scale and magnitude of air pollution.",
"paragraph2": "We're providing an end-to-end air quality solution in major African cities leveraging the locally built low-cost monitors and existing expertise to advance air quality management, and implicitly, air quality improvement in these African cities.",
"imageAlt": "Air Quality Monitors"
},
"installationGuide": {
"titleHighlight": "Monitor",
"title": "Installation",
"description": "This guide includes instructions and manuals on how to easily activate, install, operate and manage the Binos Air Quality Monitors."
},
"installation": {
"title": "Activate, install, operate, and manage the Binos Monitors",
"intro": "In this guide, you will find recommendations:",
"steps": {
"step1": "Where to place the monitor",
"step2": "How to install the monitor",
"step3": "How to access the data using our analytics dashboard"
},
"guideButton": "Installation Guide",
"imageAlt": "Monitor Installation"
}
}
}
47 changes: 47 additions & 0 deletions src/website2/public/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,5 +347,52 @@
"cancel": "Annuler",
"save": "Enregistrer"
}
},
"monitorDisplay": {
"monitorsIn": "Moniteurs en {country}",
"defaultCountry": "Pays"
},
"monitorPage": {
"breadcrumb": "Nos Produits > Moniteur Binos",
"hero": {
"title": "Fabriqué en Afrique pour les villes africaines.",
"description": "Conçu, fabriqué et calibré pour mesurer la qualité de l'air ambiant et optimisé pour s'adapter au contexte africain.",
"imageAlt": "Fabriqué en Afrique"
},
"designedForAfrica": {
"title": "Conçu pour l'Afrique",
"paragraph1": "Les moniteurs sont optimisés avec des capacités pour faire face aux défis comme les conditions météorologiques extrêmes, y compris les niveaux élevés de poussière et de chaleur, typiques du contexte des villes africaines.",
"paragraph2": "Alimenté par le réseau électrique ou l'énergie solaire, l'appareil est optimisé pour fonctionner dans des environnements caractérisés par une alimentation électrique peu fiable et une connectivité Internet intermittente. Il fonctionne sur une configuration de réseau GSM 2G pour les cartes SIM IoT.",
"maintenanceManual": "Manuel d'entretien",
"imageAlt": "Moniteur local"
},
"mobileMonitoring": {
"title": "Surveillance mobile",
"paragraph1": "Les moniteurs sont faciles à installer et peuvent être placés sur des bâtiments statiques ou des taxis-motos appelés localement 'boda-bodas' pour améliorer la couverture spatiale et la révolution.",
"paragraph2": "La collecte de données sur la qualité de l'air à l'aide de taxis-motos a un réel potentiel pour une surveillance de haute résolution de la qualité de l'air dans les espaces urbains. La surveillance mobile nous permet de combler les lacunes et les limitations spatiales de la surveillance statique fixe.",
"imageAlt": "Surveillance mobile"
},
"monitorsInAfrica": {
"title": "Plus de 250 moniteurs de qualité de l'air installés dans 8 grandes villes africaines",
"paragraph1": "Pour lutter efficacement contre la pollution atmosphérique, l'accès aux données et aux preuves contextuelles est important pour montrer l'échelle et l'ampleur de la pollution atmosphérique.",
"paragraph2": "Nous fournissons une solution complète de qualité de l'air dans les principales villes africaines en tirant parti des moniteurs locaux à faible coût et de l'expertise existante pour faire progresser la gestion de la qualité de l'air et, implicitement, l'amélioration de la qualité de l'air dans ces villes africaines.",
"imageAlt": "Moniteurs de qualité de l'air"
},
"installationGuide": {
"titleHighlight": "Moniteur",
"title": "Installation",
"description": "Ce guide comprend des instructions et des manuels sur la façon d'activer, d'installer, d'exploiter et de gérer facilement les moniteurs de qualité de l'air Binos."
},
"installation": {
"title": "Activer, installer, exploiter et gérer les moniteurs Binos",
"intro": "Dans ce guide, vous trouverez des recommandations :",
"steps": {
"step1": "Où placer le moniteur",
"step2": "Comment installer le moniteur",
"step3": "Comment accéder aux données à l'aide de notre tableau de bord d'analyse"
},
"guideButton": "Guide d'installation",
"imageAlt": "Installation du moniteur"
}
}
}
86 changes: 36 additions & 50 deletions src/website2/src/app/[locale]/products/monitor/MonitorPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { motion } from 'framer-motion';
import Image from 'next/image';
import React from 'react';
import { useTranslations } from 'next-intl';
import { BiDownload } from 'react-icons/bi';

import { CustomButton } from '@/components/ui';
Expand Down Expand Up @@ -40,6 +40,8 @@ const cardVariants = {
};

const MonitorPage = () => {
const t = useTranslations('monitorPage');

return (
<div className="pb-16 flex flex-col w-full space-y-20">
{/* Hero Section */}
Expand All @@ -55,16 +57,11 @@ const MonitorPage = () => {
>
{/* Text Content */}
<motion.div className="space-y-6" variants={itemVariants}>
<p className="text-gray-500 mb-2 text-[14px]">
Our Products {'>'} Binos Monitor
</p>
<p className="text-gray-500 mb-2 text-[14px]">{t('breadcrumb')}</p>
<h1 className="text-[48px] leading-[56px] font-bold mb-6">
Built in Africa for African cities.
{t('hero.title')}
</h1>
<p className="text-[18px] text-gray-700">
Designed, manufactured, and calibrated to measure ambient air
quality and optimized to suit the African context.
</p>
<p className="text-[18px] text-gray-700">{t('hero.description')}</p>
</motion.div>

{/* Image */}
Expand All @@ -74,7 +71,7 @@ const MonitorPage = () => {
>
<Image
src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728132447/website/photos/OurProducts/Monitor/monitor_ffky74.webp"
alt="Built in Africa"
alt={t('hero.imageAlt')}
width={500}
height={350}
style={{ objectFit: 'cover' }}
Expand All @@ -100,17 +97,14 @@ const MonitorPage = () => {
className="bg-green-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
variants={cardVariants}
>
<h3 className="font-bold text-2xl mb-4">Designed for Africa</h3>
<h3 className="font-bold text-2xl mb-4">
{t('designedForAfrica.title')}
</h3>
<p className="text-lg text-gray-700 mb-4">
The monitors are optimized with capabilities to cope with
challenges like extreme weather conditions, including high levels
of dust and heat, typical to the context of African cities.
{t('designedForAfrica.paragraph1')}
</p>
<p className="text-lg text-gray-700 mb-6">
Powered by either mains or solar, the device is optimized to work
in settings characterized by unreliable power and intermittent
internet connectivity. It runs on a 2G GSM network configuration
for IoT SIM cards.
{t('designedForAfrica.paragraph2')}
</p>

<CustomButton
Expand All @@ -121,7 +115,7 @@ const MonitorPage = () => {
}
className="flex items-center justify-center bg-transparent text-gray-700 border border-black px-4 py-3 bg-none w-full font-semibold hover:bg-gray-100 transition-colors"
>
Maintenance Manual
{t('designedForAfrica.maintenanceManual')}
<BiDownload className="ml-2 text-xl" />
</CustomButton>
</motion.div>
Expand All @@ -133,7 +127,7 @@ const MonitorPage = () => {
>
<Image
src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728132444/website/photos/OurProducts/Monitor/section-1_ia0mjq.webp"
alt="Local Monitor"
alt={t('designedForAfrica.imageAlt')}
width={741}
height={540}
style={{ objectFit: 'cover' }}
Expand Down Expand Up @@ -161,7 +155,7 @@ const MonitorPage = () => {
>
<Image
src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728132444/website/photos/OurProducts/Monitor/section-2_byzxsz.webp"
alt="Mobile Monitoring"
alt={t('mobileMonitoring.imageAlt')}
width={741}
height={540}
style={{ objectFit: 'cover' }}
Expand All @@ -174,17 +168,14 @@ const MonitorPage = () => {
className="bg-green-50 p-6 rounded-lg shadow-md relative top-0 lg:max-w-md lg:absolute lg:right-0 lg:top-16 z-10 w-full sm:w-auto md:w-[630px] md:-top-10 flex flex-col space-y-6"
variants={cardVariants}
>
<h3 className="font-bold text-2xl">Mobile Monitoring</h3>
<h3 className="font-bold text-2xl">
{t('mobileMonitoring.title')}
</h3>
<p className="text-lg text-gray-700">
The monitors are easy to install and can be placed on static
buildings or motorcycle taxis locally called
&apos;boda-bodas&apos; to improve spatial coverage and revolution.
{t('mobileMonitoring.paragraph1')}
</p>
<p className="text-lg text-gray-700">
Air quality data collection using motorcycle taxis has real
potential for high-resolution air quality monitoring in urban
spaces. Mobile monitoring enables us to close the gaps and spatial
limitations of fixed static monitoring.
{t('mobileMonitoring.paragraph2')}
</p>
</motion.div>
</div>
Expand All @@ -208,7 +199,7 @@ const MonitorPage = () => {
>
<Image
src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728132444/website/photos/OurProducts/Monitor/Africa_bujaie.webp"
alt="Air Quality Monitors"
alt={t('monitorsInAfrica.imageAlt')}
width={600}
height={400}
style={{ objectFit: 'cover' }}
Expand All @@ -222,18 +213,13 @@ const MonitorPage = () => {
variants={cardVariants}
>
<h3 className="font-bold text-2xl mb-4">
250+ Air quality monitors installed in 8 major African cities
{t('monitorsInAfrica.title')}
</h3>
<p className="text-lg text-gray-700 mb-4">
To effectively tackle air pollution, access to data and contextual
evidence is important to show the scale and magnitude of air
pollution.
{t('monitorsInAfrica.paragraph1')}
</p>
<p className="text-lg text-gray-700 mt-4">
We&apos;re providing an end-to-end air quality solution in major
African cities leveraging the locally built low-cost monitors and
existing expertise to advance air quality management, and
implicitly, air quality improvement in these African cities.
{t('monitorsInAfrica.paragraph2')}
</p>
</motion.div>
</div>
Expand All @@ -251,14 +237,16 @@ const MonitorPage = () => {
className="text-[40px] font-semibold mb-4"
variants={itemVariants}
>
<span className="text-blue-700">Monitor</span> Installation
<span className="text-blue-700">
{t('installationGuide.titleHighlight')}
</span>{' '}
{t('installationGuide.title')}
</motion.h2>
<motion.p
className="text-lg text-gray-700 mb-6"
variants={itemVariants}
>
This guide includes instructions and manuals on how to easily
activate, install, operate and manage the Binos Air Quality Monitors.
{t('installationGuide.description')}
</motion.p>
</motion.section>

Expand All @@ -278,15 +266,13 @@ const MonitorPage = () => {
className="bg-yellow-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-16 z-10 space-y-6"
variants={cardVariants}
>
<h3 className="font-bold text-2xl">
Activate, install, operate, and manage the Binos Monitors
</h3>
<h3 className="font-bold text-2xl">{t('installation.title')}</h3>
<div className="text-lg text-gray-700 mb-4">
<p>In this guide, you will find recommendations:</p>
<p>{t('installation.intro')}</p>
<ol className="list-disc list-inside pl-5 mt-2">
<li>Where to place the monitor</li>
<li>How to install the monitor</li>
<li>How to access the data using our analytics dashboard</li>
<li>{t('installation.steps.step1')}</li>
<li>{t('installation.steps.step2')}</li>
<li>{t('installation.steps.step3')}</li>
</ol>
</div>

Expand All @@ -298,7 +284,7 @@ const MonitorPage = () => {
}
className="flex items-center justify-center text-gray-700 bg-transparent border mt-6 border-black px-4 py-3 bg-none w-full font-semibold"
>
Installation Guide
{t('installation.guideButton')}
<BiDownload className="ml-2 text-xl" />
</CustomButton>
</motion.div>
Expand All @@ -310,7 +296,7 @@ const MonitorPage = () => {
>
<Image
src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728132444/website/photos/OurProducts/Monitor/activate_g6upn0.webp"
alt="Monitor Installation"
alt={t('installation.imageAlt')}
width={500}
height={400}
style={{ objectFit: 'cover' }}
Expand Down
9 changes: 8 additions & 1 deletion src/website2/src/components/sections/footer/MonitorDisplay.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
'use client';
import { useTranslations } from 'next-intl';
import type React from 'react';

import { useSelector } from '@/hooks';

const MonitorDisplay: React.FC = () => {
const t = useTranslations('monitorDisplay');
const countryData: any | null = useSelector(
(state) => state.country.selectedCountry,
);
Expand All @@ -28,7 +32,10 @@ const MonitorDisplay: React.FC = () => {
))}
</div>
<p className="text-gray-800">
Monitors in {countryData?.long_name.replace('_', ' ') || 'Country'}
{t('monitorsIn', {
country:
countryData?.long_name.replace('_', ' ') || t('defaultCountry'),
})}
</p>
</div>
);
Expand Down

0 comments on commit b81d27f

Please sign in to comment.