add multilanguage pattern

components/languageSwitcher/LanguageSwitcher.js

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Flex, Text } from 'theme-ui'
+
+const LanguageSwitcher = () => {
+  const { i18n } = useTranslation()
+
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng)
+  }
+
+  const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'tr', name: 'Türkçe', flag: '🇹🇷' }
+  ]
+
+  return (
+    <Flex sx={{ gap: 2, alignItems: 'center' }}>
+
+      {languages.map((lang) => (
+        <Button
+          key={lang.code}
+          onClick={() => changeLanguage(lang.code)}
+          variant={i18n.language === lang.code ? 'primary' : 'outline'}
+          sx={{
+            fontSize: 1,
+            py: 1,
+            px: 2,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            cursor: 'pointer',
+            opacity: i18n.language === lang.code ? 1 : 0.7,
+            '&:hover': {
+              opacity: 1
+            }
+          }}
+        >
+          <span>{lang.flag}</span>
+          <span>{lang.name}</span>
+        </Button>
+      ))}
+    </Flex>
+  )
+}
+
+export default LanguageSwitcher

components/nav.js

@@ -7,6 +7,7 @@ import Icon from './icon'
 import Flag from './flag'
 import ScrollLock from 'react-scrolllock'
 import NextLink from 'next/link'
+import LanguageSwitcher from '../components/languageSwitcher/LanguageSwitcher'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -147,6 +148,8 @@ const Navigation = props => (
     <NextLink href="https://toolbox.hackclub.com/" passHref>
       <Link>Toolbox</Link>
     </NextLink>
+
+
   </NavBar>
 )
 
@@ -225,6 +228,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           color={baseColor}
           dark={dark}
         />
+        <LanguageSwitcher />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
           <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>

lib/carousel.json

@@ -3,82 +3,82 @@
     "background": "linear-gradient(to bottom right, #993CCF 0%, rgba(170, 77, 181, 0.95) 17.19%, rgba(193, 99, 146, 0.90) 31.77%, rgba(223, 129, 101, 0.71) 52.08%, rgba(240, 146, 75, 0.60) 63.54%)",
     "titleColor": "white",
     "descriptionColor": "white",
-    "title": "Jams",
-    "description": "Collaborative coding workshops where sparks ignite, fears dissolve, and inventions come to life",
+    "title": "vulnerable target",
+    "description": "VT creates intentionally vulnerable environments for security testing.",
     "img": "https://cloud-7xyxcf3f6-hack-club-bot.vercel.app/0new_project__3_.png",
-    "link": "https://jams.hackclub.com"
+    "link": "https://github.com/HappyHackingSpace/vulnerable-target"
   },
   {
     "background": "#C76B0F",
     "titleColor": "#F6D193",
     "descriptionColor": "#F6D193",
-    "title": "Boba Drops",
-    "description": "Build a HTML + CSS Static Site!, Get free Boba",
+    "title": "Githubmon",
+    "description": "Developer Dashboard for GitHub Activity Management  ",
     "img": "https://cloud-oil5vh30l-hack-club-bot.vercel.app/0boba_hc_toolbox.png",
-    "link": "https://hack.club/boba"
+    "link": "https://github.com/HappyHackingSpace/githubmon"
   },
   {
     "background": "#FFF1DE",
     "titleColor": "#4F2A0E",
     "descriptionColor": "#4F2A0E",
-    "title": "Hackaccino",
-    "description": "Make a 3D Website • Get a free Frappuccino",
+    "title": "Community Hub",
+    "description": "Club management and task tracking system",
     "img": "https://cloud-ahkc8uotv-hack-club-bot.vercel.app/0group_15.png",
-    "link": "https://hack.club/fraps"
+    "link": "https://github.com/HappyHackingSpace/CommunityHub"
   },
   {
     "background": "#EF6C46",
     "titleColor": "#EDE2DC",
     "descriptionColor": "#EDE2DC",
-    "title": "Cider",
-    "description": "Design, Code, and Ship an iOS app to the App Store in 30 days.",
+    "title": "resumeX",
+    "description": "AI-powered CV analyzer scores software field suitability.",
     "img": "https://cloud-m33gqgkp6-hack-club-bot.vercel.app/0image.png",
-    "link": "https://cider.hackclub.com/"
+    "link": "https://github.com/HappyHackingSpace/resumeX"
   },
   {
     "background": "snow",
     "titleColor": "dark",
     "descriptionColor": "black",
-    "title": "Putting The \"You\" In CPU",
-    "description": "Curious exactly what happens when you run a program on your computer? Read this.",
+    "title": "FunURL",
+    "description": "A Functional URL Swiss Army Knife 🛠️",
     "img": "https://cloud-eg2ex8nol-hack-club-bot.vercel.app/0favicon-on-light-removebg-preview.png",
-    "link": "https://cpu.land"
+    "link": "https://github.com/HappyHackingSpace/funURL"
   },
   {
     "background": "#000",
     "titleColor": "green",
     "descriptionColor": "white",
-    "title": "Sprig",
-    "description": "Join hundreds of teenagers making tile-based JavaScript games",
+    "title": "SkyBound-Quest",
+    "description": "Retro pixel platformer: young inventor saves sky islands.",
     "img": "https://emoji.slack-edge.com/T0266FRGM/sprig-dino/6f01fec60b51b343.png",
-    "link": "https://sprig.hackclub.com"
+    "link": "https://github.com/HappyHackingSpace/SkyBound-Quest"
   },
   {
     "background": "snow",
     "titleColor": "dark",
     "descriptionColor": "black",
-    "title": "Some Assembly Required",
-    "description": "The 4th most starred Assembly repository on GitHub",
+    "title": "HackerTaboo",
+    "description": "Taboo for hackers: guess the word without saying it!",
     "img": "https://emoji.slack-edge.com/T0266FRGM/someassemblyrequired/cfacfacaaa2d8b1d.png",
-    "link": "https://github.com/hackclub/some-assembly-required"
+    "link": "https://github.com/HappyHackingSpace/HackerTaboo"
   },
   {
     "background": "#271932",
     "titleColor": "#CAB4D4",
     "textColor": "#CAB4D4",
-    "title": "SineRider",
-    "description": "Help build a game about love, math, and graphing 💖",
+    "title": "ZmapSdk",
+    "description": "A Python SDK for the ZMap network scanner that provides an easy-to-use interface for network scanning operations.",
     "img": "https://emoji.slack-edge.com/T0266FRGM/sinerider/68a0bc1208e885dd.png",
-    "link": "https://sinerider.com"
+    "link": "https://github.com/HappyHackingSpace/ZmapSDK"
   },
   {
     "background": "#e9e9e9",
     "titleColor": "black",
     "textColor": "black",
     "descriptionColor": "black",
-    "title": "Nest",
-    "description": "Free Linux server for all Hack Clubbers to host anything they need",
+    "title": "Awesome Hackathon",
+    "description": "Tools and resources to help you build, design, and win hackathons! 🏆",
     "img": "https://emoji.slack-edge.com/T0266FRGM/nest/aa345378581cee0c.png",
-    "link": "https://hackclub.app"
+    "link": "https://github.com/HappyHackingSpace/awesome-hackathon"
   }
 ]

lib/i18n.js

@@ -0,0 +1,56 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+// Import translation files
+import enTranslations from '../public/locales/en/translation.json'
+import trTranslations from '../public/locales/tr/translation.json'
+
+i18n
+  // Detect user language
+  .use(LanguageDetector)
+  // Pass the i18n instance to react-i18next
+  .use(initReactI18next)
+  // Initialize i18next
+  .init({
+    debug: process.env.NODE_ENV === 'development',
+
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    // Language resources
+    resources: {
+      en: {
+        translation: enTranslations
+      },
+      tr: {
+        translation: trTranslations
+      }
+    },
+
+    // Language detection options
+    detection: {
+      // Order of language detection
+      order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
+
+      // Keys or params to lookup language from
+      lookupQuerystring: 'lng',
+      lookupCookie: 'i18next',
+      lookupLocalStorage: 'i18nextLng',
+
+      // Cache user language
+      caches: ['localStorage', 'cookie'],
+
+      // Optional expire and domain for set cookie
+      cookieMinutes: 10080, // 7 days
+    },
+
+    // React options
+    react: {
+      useSuspense: false
+    }
+  })
+
+export default i18n

next-i18next.config.js

@@ -0,0 +1,8 @@
+// next-i18next configuration
+module.exports = {
+ i18n: {
+    locales: ['en', 'tr'],
+    defaultLocale: 'en',
+  },
+  localeDetection: true,
+}

next.config.mjs

@@ -1,3 +1,4 @@
+import i18n from './next-i18next.config.js';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -25,6 +26,7 @@ const nextConfig = {
       }
     ]
   },
+  i18n,
   webpack: (config, { isServer }) => {
     return config
   },