Merge pull request #45 from kinotio/develop

feat: translate some section for english and french

components/layout/sections/benefits.tsx

@@ -57,7 +57,7 @@ const BenefitCard = memo(
     translate,
   }: {
     idx: number
-    benefit: { icon: string; name: string; description: string }
+    benefit: { icon: string; name: string }
     translate: any
   }) => {
     return (
@@ -81,11 +81,11 @@ const BenefitCard = memo(
             </span>
           </div>
 
-          <CardTitle>{translate(benefit.name)}</CardTitle>
+          <CardTitle>{translate(`${benefit.name}.title`)}</CardTitle>
         </CardHeader>
 
         <CardContent className="text-muted-foreground">
-          {translate(benefit.description)}
+          {translate(`${benefit.name}.description`)}
         </CardContent>
       </NeonGradientCard>
     )

components/layout/sections/contact.tsx

@@ -28,6 +28,8 @@ import { GradientText } from '@/components/shared/gradient-text'
 
 import { saveContact } from '@/lib/pocketbase'
 
+import { useScopedI18n } from '@/locales/client'
+
 const FormSchema = z.object({
   name: z.string({
     required_error: 'Please provide your name',
@@ -46,6 +48,9 @@ export const ContactSection = () => {
     resolver: zodResolver(FormSchema),
   })
 
+  const translate = useScopedI18n('contact')
+  const t = useScopedI18n('shared')
+
   function onSubmit(data: z.infer<typeof FormSchema>) {
     setLoading(true)
     saveContact(data)
@@ -61,31 +66,30 @@ export const ContactSection = () => {
     <section id="contact" className="container py-24 sm:py-32">
       <div className="text-center mb-8">
         <h2 className="text-lg text-primary text-center mb-2 tracking-wider">
-          Contact
+          {translate('contact')}
         </h2>
 
         <h2 className="text-3xl md:text-4xl text-center font-bold">
-          We&apos;re committed to providing you with the{' '}
-          <GradientText>support</GradientText> and{' '}
-          <GradientText>information</GradientText> you need.
+          {translate('commit')}{' '}
+          <GradientText>{translate('support')}</GradientText> {translate('and')}{' '}
+          <GradientText>{translate('information')}</GradientText>{' '}
+          {translate('you_need')}
         </h2>
       </div>
 
       <div className="relative grid md:grid-cols-1 xl:grid-cols-2 gap-8 w-full md:border md:border-secondary xl:border xl:border-secondary md:p-16 xl:p-16 rounded-xl bg-gray-50 dark:bg-black z-10">
         <div className="flex flex-col justify-center items-center xl:items-start">
-          <h2 className="text-3xl font-bold mb-4">Get in Touch</h2>
+          <h2 className="text-3xl font-bold mb-4">
+            {translate('form.get_in_touch')}
+          </h2>
           <p className="text-muted-foreground text-center xl:text-start">
-            {`We'd love to hear from you. Fill out the form and we'll get back to
-            you as soon as possible.`}
+            {translate('form.description')}
           </p>
         </div>
         <Card>
           <CardHeader>
-            <CardTitle>Contact Us</CardTitle>
-            <CardDescription>
-              {`Fill out the form below and we'll get back to you as soon as
-              possible.`}
-            </CardDescription>
+            <CardTitle>{translate('form.contact_us')}</CardTitle>
+            <CardDescription>{translate('form.fill_out_form')}</CardDescription>
           </CardHeader>
           <CardContent>
             <Form {...form}>
@@ -95,12 +99,12 @@ export const ContactSection = () => {
                   name="name"
                   render={({ field }) => (
                     <FormItem className="space-y-2">
-                      <FormLabel>Name</FormLabel>
+                      <FormLabel>{translate('form.name')}</FormLabel>
                       <FormControl>
                         <Input
                           id="name"
                           type="text"
-                          placeholder="Enter your name"
+                          placeholder={translate('form.enter_name')}
                           onChange={field.onChange}
                           defaultValue={field.value}
                         />
@@ -115,12 +119,12 @@ export const ContactSection = () => {
                   name="email"
                   render={({ field }) => (
                     <FormItem className="space-y-2">
-                      <FormLabel>Email</FormLabel>
+                      <FormLabel>{translate('form.email')}</FormLabel>
                       <FormControl>
                         <Input
                           id="email"
                           type="text"
-                          placeholder="Enter your email"
+                          placeholder={translate('form.enter_email')}
                           onChange={field.onChange}
                           defaultValue={field.value}
                         />
@@ -135,11 +139,11 @@ export const ContactSection = () => {
                   name="message"
                   render={({ field }) => (
                     <FormItem className="space-y-2">
-                      <FormLabel>Message</FormLabel>
+                      <FormLabel>{translate('form.message')}</FormLabel>
                       <FormControl>
                         <Textarea
                           id="message"
-                          placeholder="Enter your message"
+                          placeholder={translate('form.enter_message')}
                           onChange={field.onChange}
                           defaultValue={field.value}
                         />
@@ -155,7 +159,9 @@ export const ContactSection = () => {
                   onClick={form.handleSubmit(onSubmit)}
                   disabled={loading}
                 >
-                  {loading ? 'Sending...' : 'Send Message'}
+                  {loading
+                    ? `${t('sending')}...`
+                    : translate('form.send_message')}
                 </Button>
               </form>
             </Form>

components/layout/sections/contributors.tsx

@@ -11,10 +11,14 @@ import { GradientText } from '@/components/shared/gradient-text'
 import { getOrgContributors } from '@/lib/octokit'
 import { ContributorProps } from '@/lib/definitions'
 
+import { useScopedI18n } from '@/locales/client'
+
 export const ContributorsSection = () => {
   const [loading, setLoading] = useState<boolean>(true)
   const [contributors, setContributors] = useState<ContributorProps[]>([])
 
+  const translate = useScopedI18n('contributors')
+
   useEffect(() => {
     getOrgContributors()
       .then(({ data }) => setContributors(data))
@@ -28,10 +32,12 @@ export const ContributorsSection = () => {
     <section id="contributors" className="container py-24 sm:py-32">
       <div className="text-center mb-8">
         <h2 className="text-lg text-primary text-center mb-2 tracking-wider">
-          Contributors
+          {translate('contributors')}
         </h2>
         <h2 className="text-3xl md:text-4xl text-center font-bold mb-4">
-          Meet Our <GradientText>Open Source</GradientText> Contributors
+          {translate('meet_your')}{' '}
+          <GradientText>{translate('open_source')}</GradientText>{' '}
+          {translate('contributors')}
         </h2>
       </div>
 
@@ -51,7 +57,11 @@ export const ContributorsSection = () => {
         ) : (
           <>
             {memorizedContributors.map((contributor) => (
-              <Contributor key={contributor.id} contributor={contributor} />
+              <Contributor
+                key={contributor.id}
+                contributor={contributor}
+                translate={translate}
+              />
             ))}
           </>
         )}
@@ -61,15 +71,23 @@ export const ContributorsSection = () => {
 }
 
 const Contributor = memo(
-  ({ contributor }: { contributor: ContributorProps }) => {
+  ({
+    contributor,
+    translate,
+  }: {
+    contributor: ContributorProps
+    translate: any
+  }) => {
     return (
       <div className="flex flex-col items-center space-y-2">
         <Avatar className="w-20 h-20">
           <AvatarImage src={contributor.avatar_url} alt={contributor.login} />
         </Avatar>
         <div className="text-center">
           <h3 className="text-lg font-semibold">{contributor.login}</h3>
-          <p className="text-muted-foreground text-sm">Contributor</p>
+          <p className="text-muted-foreground text-sm">
+            {translate('contributor')}
+          </p>
         </div>
         <div className="flex">
           <Link href={contributor.html_url} target="_blank" aria-label="Github">

components/layout/sections/faq.tsx

@@ -11,24 +11,29 @@ import {
 
 import { GradientText } from '@/components/shared/gradient-text'
 
+import { useScopedI18n } from '@/locales/client'
+
 import { DATA } from '@/data'
 
 export const FAQSection = () => {
+  const translate = useScopedI18n('faq')
+
   return (
     <section id="faq" className="container md:w-[700px] py-24 sm:py-32">
       <div className="text-center mb-8">
         <h2 className="text-lg text-primary text-center mb-2 tracking-wider">
-          FAQS
+          {translate('faq')}
         </h2>
 
         <h2 className="text-3xl md:text-4xl text-center font-bold">
-          Common <GradientText>Questions</GradientText>
+          {translate('some')}{' '}
+          <GradientText>{translate('questions')}</GradientText>
         </h2>
       </div>
 
       <Accordion type="single" collapsible className="AccordionRoot">
         {DATA.faq.map((faq, idx) => (
-          <FAQ key={idx} faq={faq} />
+          <FAQ key={idx} faq={faq} translate={translate} />
         ))}
       </Accordion>
     </section>
@@ -38,19 +43,23 @@ export const FAQSection = () => {
 const FAQ = memo(
   ({
     faq,
+    translate,
   }: {
     faq: {
       question: string
       answer: string
-      value: string
+      id: string
     }
+    translate: any
   }) => {
     return (
-      <AccordionItem value={faq.value}>
+      <AccordionItem value={faq.id}>
         <AccordionTrigger className="text-left">
-          {faq.question}
+          {translate(`faqs.${translate(faq.id)}.question`)}
         </AccordionTrigger>
-        <AccordionContent>{faq.answer}</AccordionContent>
+        <AccordionContent>
+          {translate(`faqs.${translate(faq.id)}.answer`)}
+        </AccordionContent>
       </AccordionItem>
     )
   }

components/layout/sections/features.tsx

@@ -7,28 +7,31 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Icon } from '@/components/ui/icon'
 import { GradientText } from '@/components/shared/gradient-text'
 
+import { useScopedI18n } from '@/locales/client'
+
 import { DATA } from '@/data'
 
 export const FeaturesSection = () => {
+  const translate = useScopedI18n('features')
+
   return (
     <section id="features" className="container py-24 sm:py-32">
       <h2 className="text-lg text-primary text-center mb-2 tracking-wider">
-        Features
+        {translate('features')}
       </h2>
 
       <h2 className="text-3xl md:text-4xl text-center font-bold mb-4">
-        What <GradientText>Makes Us</GradientText> Different
+        {translate('what')} <GradientText>{translate('make_us')}</GradientText>{' '}
+        {translate('different')}
       </h2>
 
       <h3 className="md:w-1/2 mx-auto text-xl text-center text-muted-foreground mb-8">
-        {`We are thrilled to introduce our open source developer community, a
-        vibrant and inclusive hub for innovation, collaboration, and growth.
-        Here's what sets us apart and why you should join us.`}
+        {translate('description')}
       </h3>
 
       <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 text-center">
         {DATA.features.map((feature, idx) => (
-          <FeatureCard key={idx} feature={feature} />
+          <FeatureCard key={idx} feature={feature} translate={translate} />
         ))}
       </div>
     </section>
@@ -38,8 +41,10 @@ export const FeaturesSection = () => {
 const FeatureCard = memo(
   ({
     feature,
+    translate,
   }: {
-    feature: { icon: string; title: string; description: string }
+    feature: { icon: string; name: string }
+    translate: any
   }) => {
     return (
       <Card className="h-full bg-background border-0 shadow-none">
@@ -48,14 +53,13 @@ const FeatureCard = memo(
             <Icon
               name={feature.icon as keyof typeof icons}
               size={24}
-              color="hsl(var(--primary))"
-              className="text-primary"
+              className="text-primary dark:text-white"
             />
           </div>
-          <CardTitle>{feature.title}</CardTitle>
+          <CardTitle>{translate(`${feature.name}.title`)}</CardTitle>
         </CardHeader>
         <CardContent className="text-muted-foreground text-center">
-          {feature.description}
+          {translate(`${feature.name}.description`)}
         </CardContent>
       </Card>
     )

components/layout/sections/hero.tsx

@@ -32,9 +32,9 @@ export const HeroSection = () => {
     >
       <div className="relative grid place-items-center lg:max-w-screen-xl gap-8 mx-auto py-20 md:py-32 z-10">
         <div className="text-center space-y-8">
-          <div className="max-w-screen-md mx-auto text-center ">
+          <div className="max-w-screen-lg mx-auto text-center ">
             <BlurFade delay={BLUR_FADE_DELAY}>
-              <h1 className="text-4xl md:text-8xl font-bold">
+              <h1 className="text-4xl md:text-7xl font-bold">
                 {translate('title')}{' '}
                 <GradientText>{translate('openly')}</GradientText>
               </h1>

components/ui/icon.tsx

@@ -7,7 +7,7 @@ export const Icon = ({
   className,
 }: {
   name: keyof typeof icons
-  color: string
+  color?: string
   size: number
   className?: string
 }) => {