feat: Add youtube channel link

Author: tjtanjin

public/locales/en/components/home.json

@@ -98,7 +98,9 @@
     "instagram.heading": "Follow us on Instagram",
     "instagram.body_text": "Get behind-the-scenes looks, community highlights, and visual updates directly from our team.",
     "twitter.heading": "Follow us on X (Twitter)",
-    "twitter.body_text": "Stay up to date with feature drops, announcements, and real-time updates in 280 characters or less."
+    "twitter.body_text": "Stay up to date with feature drops, announcements, and real-time updates in 280 characters or less.",
+    "youtube.heading": "Subscribe to our YouTube Channel",
+    "youtube.body_text": "Watch tutorials, demos, and feature showcases on our official YouTube channel."
   },
 
   "testimonials_section": {

public/locales/en/components/navigationbar.json

@@ -14,6 +14,7 @@
     "community.discord": "Discord",
     "community.instagram": "Instagram",
     "community.twitter": "Twitter (X)",
+    "community.youtube": "YouTube",
     "profile": "Profile",
     "login": "Login",
     "logout": "Logout",

public/locales/zh/components/home.json

@@ -95,7 +95,9 @@
     "instagram.heading": "在 Instagram 关注我们",
     "instagram.body_text": "获取幕后花絮、社区亮点和团队的视觉更新。",
     "twitter.heading": "在 X（Twitter）关注我们",
-    "twitter.body_text": "关注功能更新、公告以及实时动态，每条限制在 280 个字符以内。"
+    "twitter.body_text": "关注功能更新、公告以及实时动态，每条限制在 280 个字符以内。",
+    "youtube.heading": "订阅我们的 YouTube 频道",
+    "youtube.body_text": "在我们的官方 YouTube 频道观看教程、演示和功能展示。"
   },
   "testimonials_section": {
     "title": "用户评价",

public/locales/zh/components/navigationbar.json

@@ -14,6 +14,7 @@
     "community.discord": "Discord",
     "community.instagram": "Instagram",
     "community.twitter": "Twitter (X)",
+    "community.youtube": "YouTube",
     "profile": "个人资料",
     "login": "登录",
     "logout": "登出",

src/components/Home/CommunitySection.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Typography } from '@mui/material';
 import { ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { FaDiscord, FaGithub, FaInstagram, FaTwitter } from 'react-icons/fa';
+import { FaDiscord, FaGithub, FaInstagram, FaTwitter, FaYoutube } from 'react-icons/fa';
 
 import { Endpoints } from '@/constants/Endpoints';
 import useIsDesktop from '@/hooks/useIsDesktop';
@@ -44,6 +44,12 @@ const CommunitySection = (): JSX.Element => {
       title: t('community_section.twitter.heading'),
       url: Endpoints.twitterCoreUrl,
     },
+    {
+      Icon: <FaYoutube size={26} />,
+      text: t('community_section.youtube.body_text'),
+      title: t('community_section.youtube.heading'),
+      url: Endpoints.youtubeCoreUrl,
+    },
   ];
 
   return (

src/components/NavigationBar/NavigationBar.tsx

@@ -37,6 +37,7 @@ import {
   FaUserCog,
   FaUserFriends,
   FaUserSecret,
+  FaYoutube,
 } from 'react-icons/fa';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
@@ -258,6 +259,15 @@ const NavigationBar: React.FC<{
                 <FaTwitter style={{ marginRight: 8 }} />
                 {t('navigation_bar.community.twitter')}
               </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  window.open(Endpoints.youtubeCoreUrl);
+                  setCommunityMenuAnchor(null);
+                }}
+              >
+                <FaYoutube style={{ marginRight: 8 }} />
+                {t('navigation_bar.community.youtube')}
+              </MenuItem>
             </Menu>
           </Box>
 

src/constants/Endpoints.ts

@@ -27,6 +27,7 @@ const Endpoints = {
   projectQuickStartUrl: `${import.meta.env.VITE_GALLERY_WEBSITE_URL}/docs/v2/introduction/quickstart`,
   projectLlmExampleUrl: `${import.meta.env.VITE_GALLERY_WEBSITE_URL}/docs/v2/examples/llm_conversation`,
   twitterCoreUrl: 'https://x.com/reactchatbotify',
+  youtubeCoreUrl: 'https://www.youtube.com/@react-chatbotify',
 };
 
 export { Endpoints };