Skip to content

Commit 5530169

Browse files
hunxjunedohunxjunedo
committed
support translation across all components
1 parent 539ecdb commit 5530169

File tree

9 files changed

+175
-71
lines changed

9 files changed

+175
-71
lines changed

‎public/locales/en/components/home.json

Lines changed: 97 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
{
2-
"contributors_section": {
3-
"title": "Contributors",
4-
"main_paragraph": "We are grateful to the many developers who have contributed to the development of the various projects that help make up React ChatBotify, as well as authors of themes & plugins who contribute to the available contents today. Your involvement helps keep the platform dynamic and relevant. The list of contributors can be found on the project repositories.",
5-
"how_to_contribute_title": "How To Contribute",
6-
"how_to_contribute_body_text.1": "Want to contribute to React ChatBotify Gallery? We welcome your involvement! Whether you're submitting a new theme, improving existing plugins, or contributing code, your input helps us grow. ",
7-
"how_to_contribute_body_text.2": "Visit our GitHub repositories",
8-
"how_to_contribute_body_text.3": " for contribution guidelines and to get started.",
9-
"contact_us_title": "Contact Us",
10-
"contact_us_body_text.1": "Have questions or want to get in touch? Reach out to us via ",
11-
"contact_us_body_text.2": "Discord",
12-
"contact_us_body_text.3": " and stay in touch with the latest updates and community news!"
13-
},
2+
"essentials": {
3+
"name" : "React ChatBotify"
4+
},
5+
146
"features_section": {
157
"title": "What separates us from the rest",
168
"heading.1": "We envision a vibrant community where creativity and collaboration thrive, enabling chatbots to become more customizable and accessible for everyone.",
@@ -49,6 +41,99 @@
4941
}
5042
]
5143
},
44+
"primary_features_section": {
45+
"title": "Awesome features straight out the box",
46+
"heading.1": "Modern chatbot with modern features from the get-go. Need something more specific? Check out our premade plugins or create a feature request via our Discord.",
47+
"features": [
48+
{
49+
"heading": "Dark/light mode toggle",
50+
"description": "Easily fit your chatbot to common dark or light color themes",
51+
"actionText": "Try it"
52+
},
53+
{
54+
"heading": "Premade themes",
55+
"description": "A growing selection of premade, free-to-use themes",
56+
"actionText": "Swap theme"
57+
},
58+
{
59+
"heading": "Added functionality with plugins",
60+
"description": "Easily implement additional features with plugins",
61+
"actionText": "See example"
62+
},
63+
{
64+
"heading": "LLM support out of the box",
65+
"description": "Implement AI functionality easily",
66+
"actionText": "View demo"
67+
}
68+
]
69+
},
70+
"contributors_section": {
71+
"title": "Projects & contributors",
72+
"heading.1": "We are grateful to the many developers who have contributed to the development of React ChatBotify Gallery, as well as authors of themes & plugins, to make the Gallery what it is today. Your involvement helps keep the platform dynamic and relevant.",
73+
"projects": [
74+
{
75+
"title": "Gallery website",
76+
"description": "The very website you are currently visiting is designed and built by our own active community members."
77+
78+
},
79+
{
80+
"title": "Gallery website",
81+
"description": "The very website you are currently visiting is designed and built by our own active community members."
82+
}
83+
],
84+
"GithubButton": "View in GitHub",
85+
"ContributionSubheading": "Want to contribute to this project?",
86+
"ReadMore": "Read More"
87+
},
88+
89+
"community_section": {
90+
"title" : "Our community",
91+
"heading.1": "Whether you’re submitting a new theme, improving existing plugins, or contributing code, your input helps us grow. Join the community, we welcome everyone with open arms. Just remember to be respectful: we are all humans after all.",
92+
"discord.heading": "Join our Discord",
93+
"discord.body_text": "Reach out to us via Discord and stay in touch with the latest updates and community news!",
94+
"github.heading": "Visit our GitHub",
95+
"github.body_text": "Go straight to the (open) source and see what we are up to on the code side of things"
96+
},
97+
98+
"testimonials_section": {
99+
"title": "What our users think",
100+
"heading.1": "We as builders and contributors are obviously biased, so here’s a few testimonials from our users. No paid partnerships, no marketing tricks—just honest-to-god thoughts from actual users."
101+
},
102+
103+
"sponsors_section": {
104+
"title": "Sponsored by these awesome people",
105+
"heading.1": "We offer an open-source solution and have lots of contributors but we all know that money runs this world and thus, also our project. This is where these awesome supporters come in and with the help of their generosity, we get to continue our mission.",
106+
"sponsor_cta": {
107+
"title": "Want to sponsor us?",
108+
"description": "We are always looking for more sponsors, be it individuals or companies. Every dollar helps and will be used to support this project.",
109+
"contact": "Contact us"
110+
}
111+
},
112+
113+
"final_cta": {
114+
"title": "Ready to build your own chatbot?",
115+
"heading.1": "Jump straight into our “Get started” guide or play around in our playground where there are no rules!",
116+
"primaryButton": "Get started",
117+
"secondaryButton": "Visit the playground"
118+
},
119+
120+
"footer": {
121+
"links": [
122+
{
123+
"title" : "About us",
124+
"children": ["Team and contributors", "Sponsors"]
125+
},
126+
{
127+
"title" : "How to contribute",
128+
"children": ["Getting started", "Open issues"]
129+
},
130+
{
131+
"title" : "Legal",
132+
"children": ["Terms of service", "Privacy policy"]
133+
}
134+
]
135+
},
136+
52137
"benefits_section": {
53138
"title": "Benefits",
54139
"heading.1": "Save Time",

‎src/components/Home/CommunitySection.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { GitHub } from "@mui/icons-material";
22
import { Box, Button, Typography } from "@mui/material";
33
import { ArrowRight, MessageCircle } from "lucide-react";
4+
import { useTranslation } from "react-i18next";
45
import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
56

67
const GenericLinkButton = ({ icon, text, title }: { icon: React.ReactNode; text: string; title: string }) => (
@@ -17,24 +18,23 @@ const GenericLinkButton = ({ icon, text, title }: { icon: React.ReactNode; text:
1718
);
1819

1920
export default function CommunitySection() {
21+
const {t} = useTranslation("components/home");
2022
return (
2123
<Box sx={{ display: "grid", gap: 6, mx: "auto" }}>
2224
<HeadingAndDescription
23-
heading="Our community"
24-
description="Whether you’re submitting a new theme, improving existing plugins, or contributing code,
25-
your input helps us grow. Join the community, we welcome everyone with open arms.
26-
Just remember to be respectful: we are all humans after all."
25+
heading={t("community_section.title")}
26+
description={t("community_section.heading.1")}
2727
/>
2828
<Box sx={linkContainerStyles}>
2929
<GenericLinkButton
3030
icon={<MessageCircle size={26} />}
31-
title="Join our Discord"
32-
text="Reach out to us via Discord and stay in touch with the latest updates and community news!"
31+
title={t("community_section.discord.heading")}
32+
text={t("community_section.discord.body_text")}
3333
/>
3434
<GenericLinkButton
3535
icon={<GitHub sx={{ fontSize: 26 }} />}
36-
title="Visit our GitHub"
37-
text="Go straight to the (open) source and see what we are up to on the code side of things."
36+
title={t("community_section.github.heading")}
37+
text={t("community_section.github.body_text")}
3838
/>
3939
</Box>
4040
</Box>

‎src/components/Home/ContributorsSection.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Avatar, AvatarGroup, Box, Button, Card, CardContent, CardMedia, Link, Typography } from "@mui/material";
22
import { ArrowRight } from "lucide-react";
3+
import { useMemo } from "react";
34
import { useTranslation } from "react-i18next";
45
import projectimg from "../../assets/images/LandingPage/image.png";
56
import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
@@ -40,32 +41,34 @@ const ContributorsSection = () => {
4041
))}
4142
</AvatarGroup>
4243
<Box sx={bottomSectionStyles}>
43-
<Button sx={githubButtonStyles}>View in GitHub</Button>
44+
<Button sx={githubButtonStyles}>{t("contributors_section.GithubButton")}</Button>
4445
<Box sx={{ display: "flex", flexDirection: "column" }}>
45-
<Typography sx={{ color: "text.muted" }}>Want to contribute to this project?</Typography>
46+
<Typography sx={{ color: "text.muted" }}>{t("contributors_section.ContributionSubheading")}</Typography>
4647
<Link sx={readMoreLinkStyles}>
47-
Read More <ArrowRight size={16} />
48+
{t("contributors_section.ReadMore")} <ArrowRight size={16} />
4849
</Link>
4950
</Box>
5051
</Box>
5152
</CardContent>
5253
</Card>
5354
);
54-
55+
const projects = useMemo(() => {
56+
return t("contributors_section.projects", { returnObjects: true }) as { title: string; description: string }[];
57+
}, [t]);
5558
return (
5659
<Box sx={{ gap: 6, display: "grid" }}>
5760
<HeadingAndDescription
58-
heading="Projects & contributors"
59-
description="We are grateful to the many developers who have contributed to the development of React ChatBotify Gallery, as well as authors of themes & plugins, to make the Gallery what it is today. Your involvement helps keep the platform dynamic and relevant."
61+
heading={t("contributors_section.title")}
62+
description={t("contributors_section.heading.1")}
6063
/>
6164
<Box sx={gridContainerStyles}>
6265
<GenericProjectCard
63-
name="Gallery website"
64-
description="The very website you are currently visiting is designed and built by our own active community members."
66+
name={projects[0].title}
67+
description={projects[0].description}
6568
/>
6669
<GenericProjectCard
67-
name="Gallery website"
68-
description="The very website you are currently visiting is designed and built by our own active community members."
70+
name={projects[1].title}
71+
description={projects[1].description}
6972
/>
7073
</Box>
7174
</Box>

‎src/components/Home/FeaturesAtGlance.tsx

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,12 @@ import useIsDesktop from "@/hooks/useIsDesktop";
22
import { FeatureItemProps, PrimaryFeature } from "@/interfaces/HomePage";
33
import { Box, Button, IconButton, Typography } from "@mui/material";
44
import { ArrowRight, Blocks, PaletteIcon, SparkleIcon, Sun } from "lucide-react";
5-
import { FC, useState } from "react";
5+
import { FC, useMemo, useState } from "react";
6+
import { useTranslation } from "react-i18next";
67
import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
78

89

9-
// Feature list
10-
const features: PrimaryFeature[] = [
11-
{ icon: <Sun />, heading: "Dark/light mode toggle", description: "Easily fit your chatbot to common dark or light color themes", actionText: "Try it" },
12-
{ icon: <PaletteIcon />, heading: "Premade themes", description: "A growing selection of premade, free-to-use themes", actionText: "Swap theme" },
13-
{ icon: <Blocks />, heading: "Added functionality with plugins", description: "Easily implement additional features with plugins", actionText: "See example" },
14-
{ icon: <SparkleIcon />, heading: "LLM support out of the box", description: "Implement AI functionality easily", actionText: "View demo" }
15-
];
10+
1611

1712
// Shared styles
1813
const featureStyles = (selected: boolean) => ({
@@ -42,9 +37,9 @@ const actionButtonStyles = {
4237

4338

4439
// Desktop Feature Item
45-
const FeatureItem: FC<FeatureItemProps> = ({ icon, heading, description, actionText, onClick, selected }) => (
40+
const FeatureItem: FC<FeatureItemProps> = ({ Icon, heading, description, actionText, onClick, selected }) => (
4641
<Box sx={featureStyles(selected)} onClick={onClick}>
47-
<IconButton>{icon}</IconButton>
42+
<IconButton>{<Icon />}</IconButton>
4843
<Box>
4944
<Typography fontWeight="bold">{heading}</Typography>
5045
<Typography color="text.secondary" variant="body2">{description}</Typography>
@@ -54,10 +49,10 @@ const FeatureItem: FC<FeatureItemProps> = ({ icon, heading, description, actionT
5449
);
5550

5651
// Mobile Feature Item
57-
const MobileFeatureItem: FC<FeatureItemProps> = ({ icon, heading, description, actionText, onClick, selected }) => (
52+
const MobileFeatureItem: FC<FeatureItemProps> = ({ Icon, heading, description, actionText, onClick, selected }) => (
5853
<Box sx={{ ...featureStyles(selected), flexFlow: "column" }} onClick={onClick}>
5954
<Box sx={{ display: "grid", gridAutoFlow: "column", gridTemplateRows: "100%", width: "100%" }}>
60-
<IconButton sx={{ justifySelf: "start" }}>{icon}</IconButton>
55+
<IconButton sx={{ justifySelf: "start" }}>{ <Icon />}</IconButton>
6156
<Button sx={actionButtonStyles}>{actionText} <ArrowRight size={16} /></Button>
6257
</Box>
6358
<Box>
@@ -70,15 +65,21 @@ const MobileFeatureItem: FC<FeatureItemProps> = ({ icon, heading, description, a
7065

7166
// Main FeaturesAtGlance component
7267
const FeaturesAtGlance: FC = () => {
68+
const {t} = useTranslation("components/home")
7369
const [selectedFeature, setSelectedFeature] = useState<number>(0);
7470
const isDesktop = useIsDesktop();
71+
const features = useMemo(()=>{
72+
const icons = [Sun, PaletteIcon, Blocks, SparkleIcon];
73+
const itemsTexts = t("primary_features_section.features", { returnObjects: true }) as PrimaryFeature[];
74+
return icons.map((Icon, index) => ({ Icon, ...itemsTexts[index] }));
75+
},
76+
[t])
7577

7678
return (
7779
<Box sx={{ gap: 6, display: "grid" }}>
7880
<HeadingAndDescription
79-
description="Modern chatbot with modern features from the get-go. Need something more specific?
80-
Check out our premade plugins or create a feature request via our Discord."
81-
heading="Awesome features straight out the box"
81+
description={t("primary_features_section.heading.1")}
82+
heading={t("primary_features_section.title")}
8283
/>
8384
<Box sx={{ display: "grid", gridAutoFlow: isDesktop ? "column" : "row", gridTemplateColumns: isDesktop ? "1fr 1fr" : "100%", gap: 4, p: 4 }}>
8485
<Box>

‎src/components/Home/FinalCta.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
import { Box, Button, Grid, Typography } from "@mui/material";
2+
import { useTranslation } from "react-i18next";
23

34
export default function FinalCta(): JSX.Element {
5+
const { t } = useTranslation("components/home");
46
return (
57
<Box display="flex" justifyContent="center">
68
<Grid container gap={3} direction="column" sx={{ width: { md: "min-content", sm: "auto" } }} alignItems="center" wrap="nowrap">
79
<Grid item>
810
<Typography variant="h4" fontWeight="bold" textAlign="center" sx={{ whiteSpace: { md: "nowrap", sm: "normal" } }}>
9-
Ready to build your own chatbot?
11+
{t("final_cta.title")}
1012
</Typography>
1113
</Grid>
1214
<Grid item>
1315
<Typography variant="body1" textAlign="center">
14-
Jump straight into our “Get started” guide or play around in our playground where there are no rules!
16+
{t("final_cta.heading.1")}
1517
</Typography>
1618
</Grid>
1719
<Grid item container justifyContent="center" spacing={2} wrap="wrap">
1820
<Grid item>
1921
<Button sx={{ borderRadius: '12px', textTransform: "capitalize" }} variant="contained" color="primary">
20-
Get started
22+
{t("final_cta.primaryButton")}
2123
</Button>
2224
</Grid>
2325
<Grid item>
2426
<Button sx={{ borderRadius: '12px', textTransform: "capitalize", backgroundColor: "background.muted", color: "text.muted" }} variant="contained" color="secondary">
25-
Visit the playground
27+
{t("final_cta.secondaryButton")}
2628
</Button>
2729
</Grid>
2830
</Grid>

‎src/components/Home/Footer.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
11
import logo from "@/assets/images/logo.png";
22
import { Box, Link, Stack, Typography } from "@mui/material";
33
import { Gamepad2, Github } from "lucide-react";
4+
import { useMemo } from "react";
5+
import { useTranslation } from "react-i18next";
46

57
export default function Footer(): JSX.Element {
68
const genericLinksStyles = { color: "text.muted", textDecoration: "none", ":hover": { color: "text.primary" } };
7-
9+
const {t} = useTranslation("components/home");
10+
const footerLinks = useMemo(()=>{
11+
return t("footer.links", {returnObjects: true}) as any;
12+
}, [t])
813
return (
914
<Box component="footer" sx={{ p: 4, pb: 15, color: "text.primary" }}>
1015
<Stack direction={{ xs: "column", sm: "row" }} spacing={4} justifyContent="space-between">
1116
<Stack justifyContent="space-between" spacing={5}>
1217
<Stack direction="row" spacing={2} alignItems="center">
1318
<Box component="img" src={logo} alt="Logo" sx={{ width: 32, height: 32 }} />
14-
<Typography fontWeight="bold" variant="h6">React ChatBotify</Typography>
19+
<Typography fontWeight="bold" variant="h6">{t("essentials.name")}</Typography>
1520
</Stack>
1621
<Stack direction="row" spacing={3}>
1722
<Link sx={genericLinksStyles} href="#"><Gamepad2 /></Link>
1823
<Link sx={genericLinksStyles} href="#"><Github /></Link>
1924
</Stack>
2025
</Stack>
2126
<Stack spacing={3}>
22-
<Typography fontWeight="bold" variant="h6">About us</Typography>
23-
<Link sx={genericLinksStyles} href="#">Team and contributors</Link>
24-
<Link sx={genericLinksStyles} href="#">Sponsors</Link>
27+
<Typography fontWeight="bold" variant="h6">{footerLinks[0].title}</Typography>
28+
<Link sx={genericLinksStyles} href="#">{footerLinks[0].children[0]}</Link>
29+
<Link sx={genericLinksStyles} href="#">{footerLinks[0].children[1]}</Link>
2530
</Stack>
2631
<Stack spacing={3}>
27-
<Typography fontWeight="bold" variant="h6">How to contribute</Typography>
28-
<Link sx={genericLinksStyles} href="#">Getting started</Link>
29-
<Link sx={genericLinksStyles} href="#">Open issues</Link>
32+
<Typography fontWeight="bold" variant="h6">{footerLinks[1].title}</Typography>
33+
<Link sx={genericLinksStyles} href="#">{footerLinks[1].children[0]}</Link>
34+
<Link sx={genericLinksStyles} href="#">{footerLinks[1].children[1]}</Link>
3035
</Stack>
3136
<Stack spacing={3}>
32-
<Typography fontWeight="bold" variant="h6">Legal</Typography>
33-
<Link sx={genericLinksStyles} href="#">Terms of service</Link>
34-
<Link sx={genericLinksStyles} href="#">Privacy policy</Link>
37+
<Typography fontWeight="bold" variant="h6">{footerLinks[2].title}</Typography>
38+
<Link sx={genericLinksStyles} href="#">{footerLinks[2].children[0]}</Link>
39+
<Link sx={genericLinksStyles} href="#">{footerLinks[2].children[1]}</Link>
3540
</Stack>
3641
</Stack>
3742
</Box>

0 commit comments

Comments
 (0)