Merge pull request #16 from aelabid/enhancement/multilingual-integration

Enhancement/multilingual integration

app/RootLayoutServer.tsx

@@ -5,34 +5,39 @@ import RootLayoutClient from './RootLayoutClient';
 import { seoConfig } from 'config/seo';
 import { Metadata } from 'next';
 
-export const metadata: Metadata = {
-  title: seoConfig.title,
-  description: seoConfig.description,
-  openGraph: {
-    title: seoConfig.openGraph.title,
-    description: seoConfig.openGraph.description,
-    url: seoConfig.openGraph.url,
-    type: seoConfig.openGraph.type as 'website',
-  },
-  viewport: 'width=device-width, initial-scale=1',
-  robots: 'index, follow',
-  alternates: {
-    canonical: seoConfig.url,
-  },
-  authors: [{ name: 'aelabid' }],
+type Props = {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
 };
 
-export default async function RootLayoutServer({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const locale = 'en';
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: seoConfig.title,
+    description: seoConfig.description,
+    openGraph: {
+      title: seoConfig.openGraph.title,
+      description: seoConfig.openGraph.description,
+      url: seoConfig.openGraph.url,
+      type: seoConfig.openGraph.type as 'website',
+    },
+    viewport: 'width=device-width, initial-scale=1',
+    robots: 'index, follow',
+    alternates: {
+      canonical: seoConfig.url,
+    },
+    authors: [{ name: 'aelabid' }],
+  };
+}
+
+export default async function RootLayoutServer(props: Props) {
+  const { params } = props;
+  const resolvedParams = await params;
+  const locale = resolvedParams.locale;
   const messages = await getMessages({ locale });
 
   return (
     <RootLayoutClient locale={locale} messages={messages}>
-      {children}
+      {props.children}
     </RootLayoutClient>
   );
 }

app/landing/sections/FeaturesSection.tsx → app/[locale]/landing/sections/FeaturesSection.tsx

@@ -15,20 +15,18 @@ import StateManagementIcon from '@/public/images/icons/StateManagementIcon';
 import I18nIcon from '@/public/images/icons/I18nIcon';
 import CICDIcon from '@/public/images/icons/CICDIcon';
 import DevEnvIcon from '@/public/images/icons/DevEnvIcon';
+import { useTranslations } from 'next-intl';
 
-interface Feature {
-  name: string;
-  summary: string;
-  description: string;
-  icon: React.ComponentType;
-}
+// interface Feature {
+//   name: string;
+//   summary: string;
+//   description: string;
+//   icon: React.ComponentType;
+// }
 
-const features: Feature[] = [
+const features = [
   {
-    name: 'Free and Open-Source',
-    summary: 'Build, customize, and innovate freely!',
-    description:
-      'Our Next.js starter is fully open-source, allowing you to contribute, adapt, and stay in sync with the latest industry standards—all without any cost.',
+    key: 'openSource',
     icon: function OpenSourceIcon() {
       return (
         <svg
@@ -46,45 +44,11 @@ const features: Feature[] = [
       );
     },
   },
-  {
-    name: 'Modern Development Stack',
-    summary:
-      'Experience seamless development with Next.js, React, and TypeScript.',
-    description:
-      'Our starter is designed with scalability in mind, featuring React Query for data fetching, Redux for state management, and Tailwind CSS for rapid UI styling.',
-    icon: DevStackIcon,
-  },
-  {
-    name: 'Optimized State Management',
-    summary: 'Handle complex state easily with Redux and React Query.',
-    description:
-      'This combination ensures efficient data fetching, caching, and global state management, making your applications fast and responsive.',
-    icon: StateManagementIcon,
-  },
-  {
-    name: 'Internationalization (i18n)',
-    summary:
-      'Expand your project’s reach across the globe with built-in i18n support.',
-    description:
-      'Effortlessly localize your app to enhance user experience and attract a diverse audience with minimal setup.',
-    icon: I18nIcon,
-  },
-  {
-    name: 'Robust CI/CD & Testing Setup',
-    summary:
-      'Focus on development while our GitHub Actions pipeline handles automated testing, linting, and deployment checks.',
-    description:
-      'Unit, integration, and end-to-end testing are integrated for a rock-solid foundation.',
-    icon: CICDIcon,
-  },
-  {
-    name: 'Developer-First Environment',
-    summary:
-      'Enjoy a clean, maintainable codebase with tools like ESLint, Prettier, and TypeScript.',
-    description:
-      'Our starter is optimized for productivity, including reusable UI components, hooks, and a modular architecture designed for fast, scalable development.',
-    icon: DevEnvIcon,
-  },
+  { key: 'devStack', icon: DevStackIcon },
+  { key: 'stateManagement', icon: StateManagementIcon },
+  { key: 'i18n', icon: I18nIcon },
+  { key: 'cicd', icon: CICDIcon },
+  { key: 'devEnv', icon: DevEnvIcon },
 ];
 
 const SwirlyDoodle = (props: any) => (
@@ -98,13 +62,20 @@ const SwirlyDoodle = (props: any) => (
   </Icon>
 );
 
-const FeatureCard = ({ feature }: { feature: Feature }) => {
+const FeatureCard = ({
+  featureKey,
+  icon: IconComponent,
+}: {
+  featureKey: string;
+  icon: React.ComponentType;
+}) => {
+  const t = useTranslations('HomePage.features.items');
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
   const hoverBg = useColorModeValue('gray.50', 'gray.700');
   const iconColor = useColorModeValue('#2563eb', '#60A5FA');
 
-  const IconComponent = feature.icon;
+  // const IconComponent = feature.icon;
 
   return (
     <Box
@@ -142,26 +113,26 @@ const FeatureCard = ({ feature }: { feature: Feature }) => {
         fontWeight="medium"
         color={useColorModeValue('gray.900', 'white')}
       >
-        {feature.name}
+        {t(`${featureKey}.name`)}
       </Text>
 
-      <Box my={3} w="8" borderTopWidth="1px" borderColor="white" />
+      <Box my={3} w="8" borderTopWidth="1px" borderColor={iconColor} />
 
       <Text
         mt={2}
         fontSize="xl"
         fontFamily="heading"
         color={useColorModeValue('gray.600', 'gray.300')}
       >
-        {feature.summary}
+        {t(`${featureKey}.summary`)}
       </Text>
 
       <Text
         mt={4}
         fontSize="sm"
         color={useColorModeValue('gray.500', 'gray.400')}
       >
-        {feature.description}
+        {t(`${featureKey}.description`)}
       </Text>
     </Box>
   );
@@ -172,6 +143,7 @@ export default function FeaturesSection({ id }: { id: string }) {
   const svgFillColor = useColorModeValue('blue.300', 'blue.600');
   const paragraphColor = useColorModeValue('gray.700', 'gray.300');
   const bgColor = useColorModeValue('gray.50', 'gray.900');
+  const t = useTranslations('HomePage.features');
 
   return (
     <Box
@@ -205,10 +177,10 @@ export default function FeaturesSection({ id }: { id: string }) {
                 fill={svgFillColor}
               />
               <Box as="span" position="relative">
-                Why Choose
+                {t('title.prefix')}
               </Box>
             </Box>{' '}
-            This Starter?
+            {t('title.suffix')}
           </Heading>
           <Text
             fontSize="lg"
@@ -217,9 +189,7 @@ export default function FeaturesSection({ id }: { id: string }) {
             color={paragraphColor}
             mb={12}
           >
-            Boost your development process with a powerful, feature-rich Next.js
-            starter designed for speed, scalability, and developer productivity.
-            Here&apos;s what makes it stand out:
+            {t('description')}
           </Text>
         </Box>
 
@@ -232,7 +202,11 @@ export default function FeaturesSection({ id }: { id: string }) {
           gap={8}
         >
           {features.map((feature) => (
-            <FeatureCard key={feature.name} feature={feature} />
+            <FeatureCard
+              key={feature.key}
+              featureKey={feature.key}
+              icon={feature.icon}
+            />
           ))}
         </Grid>
       </Container>

app/landing/sections/HeroSection.tsx → app/[locale]/landing/sections/HeroSection.tsx

@@ -11,12 +11,14 @@ import {
 } from '@chakra-ui/react';
 import Button from '@/components/ui/Button';
 import React from 'react';
+import { useTranslations } from 'next-intl';
 
 const HeroSection = ({ id }: { id: string }) => {
   const textColor = useColorModeValue('gray.900', 'white');
   const highlightColor = useColorModeValue('#2563eb', '#60A5FA'); // blue-600 for light, blue-400 for dark
   const svgFillColor = useColorModeValue('blue.300', 'blue.600');
   const paragraphColor = useColorModeValue('gray.700', 'gray.300');
+  const t = useTranslations('HomePage.hero');
 
   return (
     <Box
@@ -39,7 +41,7 @@ const HeroSection = ({ id }: { id: string }) => {
           color={textColor}
           mb={6}
         >
-          Welcome to{' '}
+          {t('welcome')}{' '}
           <Box
             as="span"
             position="relative"
@@ -61,7 +63,7 @@ const HeroSection = ({ id }: { id: string }) => {
               <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
             </Icon>
             <Box as="span" position="relative">
-              Next.js Starter
+              {t('title')}
             </Box>
           </Box>
         </Heading>
@@ -74,19 +76,16 @@ const HeroSection = ({ id }: { id: string }) => {
           letterSpacing="tight"
           color={paragraphColor}
         >
-          Build faster with our powerful Next.js starter! Packed with essential
-          tools like state management, React Query, I18n, CI/CD, and
-          customizable UI components, it&apos;s everything you need to kickstart
-          scalable, high-performance projects effortlessly.
+          {t('description')}
         </Text>
 
         <Stack direction="row" spacing={6} justify="center" mt={10}>
-          <Button href="/register">Get Started</Button>
+          <Button href="/register">{t('buttons.getStarted')}</Button>
           <Button
             href="https://github.com/aelabid/Next-StarterKit"
             variant="outline"
           >
-            View on GitHub
+            {t('buttons.viewGithub')}
           </Button>
         </Stack>
       </Container>