feat: add translate for zh-Hans

apps/website/components/PrimaryFeatures.tsx

@@ -1,77 +1,73 @@
-"use client";
+'use client'
 
-import { Tab } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useEffect, useState } from "react";
+import { Tab } from '@headlessui/react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useEffect, useState } from 'react'
 
-import { cn } from "@/lib/utils";
-import { Container } from "./Container";
+import { cn } from '@/lib/utils'
+import { Container } from './Container'
+import { useTranslations } from 'next-intl'
 
 const features = [
 	{
-		title: "Projects",
-		description:
-			"Manage and organize all your projects in one place, keeping detailed track of progress and resource allocation.",
-		image: "/primary/projects.png",
+		title: 'primaryFeatures.projects',
+		description: 'primaryFeatures.projectsDes',
+		image: '/primary/projects.png',
 	},
 	{
-		title: "Applications & Databases",
-		description:
-			"Centralize control over your applications and databases for enhanced security and efficiency, simplifying access and management across your infrastructure.",
-		image: "/primary/applications.png",
+		title: 'primaryFeatures.applications',
+		description: 'primaryFeatures.applicationsDes',
+		image: '/primary/applications.png',
 	},
 	{
-		title: "Docker Compose",
-		description:
-			"Native Docker Compose support for manage complex applications and services with ease.",
-		image: "/primary/compose.png",
+		title: 'primaryFeatures.compose',
+		description: 'primaryFeatures.composeDes',
+		image: '/primary/compose.png',
 	},
 	{
-		title: "Multi Node",
-		description:
-			"Scale applications to multiples nodes using docker swarm to manage the cluster.",
-		image: "/primary/multinode.png",
+		title: 'primaryFeatures.multinode',
+		description: 'primaryFeatures.multinodeDes',
+		image: '/primary/multinode.png',
 	},
 	{
-		title: "Monitoring",
-		description:
-			"Monitor your systems' performance and health in real time, ensuring continuous and uninterrupted operation.",
-		image: "/primary/monitoring.png",
+		title: 'primaryFeatures.monitoring',
+		description: 'primaryFeatures.monitoringDes',
+		image: '/primary/monitoring.png',
 	},
 	{
-		title: "Backups",
-		description:
-			"Implement automatic and secure backup solutions to protect your critical data and restore it quickly when necessary.",
-		image: "/primary/backups.png",
+		title: 'primaryFeatures.backups',
+		description: 'primaryFeatures.backupsDes',
+		image: '/primary/backups.png',
 	},
-];
+]
 
 export function PrimaryFeatures() {
+	const t = useTranslations('HomePage')
 	const [tabOrientation, setTabOrientation] = useState<
-		"horizontal" | "vertical"
-	>("horizontal");
+		'horizontal' | 'vertical'
+	>('horizontal')
 
 	useEffect(() => {
-		const lgMediaQuery = window.matchMedia("(min-width: 1024px)");
+		const lgMediaQuery = window.matchMedia('(min-width: 1024px)')
 
 		function onMediaQueryChange({ matches }: { matches: boolean }) {
-			setTabOrientation(matches ? "vertical" : "horizontal");
+			setTabOrientation(matches ? 'vertical' : 'horizontal')
 		}
 
-		onMediaQueryChange(lgMediaQuery);
-		lgMediaQuery.addEventListener("change", onMediaQueryChange);
+		onMediaQueryChange(lgMediaQuery)
+		lgMediaQuery.addEventListener('change', onMediaQueryChange)
 
 		return () => {
-			lgMediaQuery.removeEventListener("change", onMediaQueryChange);
-		};
-	}, []);
+			lgMediaQuery.removeEventListener('change', onMediaQueryChange)
+		}
+	}, [])
 
-	const [isMounted, setIsMounted] = useState(false);
+	const [isMounted, setIsMounted] = useState(false)
 
 	// Cambiar isMounted a true después del primer render
 	useEffect(() => {
-		setIsMounted(true);
-	}, []);
+		setIsMounted(true)
+	}, [])
 
 	return (
 		<section
@@ -92,17 +88,16 @@ export function PrimaryFeatures() {
 			<Container className="relative">
 				<div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
 					<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
-						Comprehensive Control for Your Digital Ecosystem
+						{t('primaryFeatures.title')}
 					</h2>
 					<p className="mt-6 text-lg tracking-tight text-muted-foreground">
-						Simplify your project and data management, ensure robust monitoring,
-						and secure your backups—all without the fuss over minute details.
+						{t('primaryFeatures.des')}
 					</p>
 				</div>
 				<Tab.Group
 					as="div"
 					className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
-					vertical={tabOrientation === "vertical"}
+					vertical={tabOrientation === 'vertical'}
 				>
 					{({ selectedIndex }) => (
 						<>
@@ -118,19 +113,20 @@ export function PrimaryFeatures() {
 											initial={false}
 											key={`feature-${featureIndex}`}
 											className={cn(
-												"group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6 transition-colors ",
+												'group relative rounded-full px-4 py-1 transition-colors lg:rounded-l-xl lg:rounded-r-none lg:p-6 ',
 											)}
 										>
 											<AnimatePresence>
-												{selectedIndex === featureIndex && (
+												{selectedIndex ===
+													featureIndex && (
 													<motion.span
 														layoutId="tab"
-														className="absolute inset-0 z-10 bg-white/5 rounded-full mix-blend-difference lg:rounded-l-xl lg:rounded-r-none"
+														className="absolute inset-0 z-10 rounded-full bg-white/5 mix-blend-difference lg:rounded-l-xl lg:rounded-r-none"
 														initial={{ opacity: 1 }}
 														animate={{ opacity: 1 }}
 														exit={{ opacity: 0 }}
 														transition={{
-															type: "spring",
+															type: 'spring',
 															bounce: 0.2,
 															duration: 0.5,
 														}}
@@ -140,19 +136,19 @@ export function PrimaryFeatures() {
 											<h3>
 												<Tab
 													className={cn(
-														"font-display text-lg ui-not-focus-visible:outline-none text-primary",
+														'font-display text-lg text-primary ui-not-focus-visible:outline-none',
 													)}
 												>
 													<span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
-													{feature.title}
+													{t(feature.title)}
 												</Tab>
 											</h3>
 											<p
 												className={cn(
-													"mt-2 hidden text-sm lg:block text-muted-foreground",
+													'mt-2 hidden text-sm text-muted-foreground lg:block',
 												)}
 											>
-												{feature.description}
+												{t(feature.description)}
 											</p>
 										</motion.div>
 									))}
@@ -164,21 +160,29 @@ export function PrimaryFeatures() {
 										<div className="relative sm:px-6 lg:hidden">
 											<div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
 											<p className="relative mx-auto max-w-2xl text-base text-white sm:text-center">
-												{feature.description}
+												{t(feature.description)}
 											</p>
 										</div>
 
 										<motion.div
 											key={feature.title}
-											initial={isMounted ? { opacity: 0.8, x: 50 } : {}}
-											animate={isMounted ? { opacity: 1, x: 0 } : {}}
+											initial={
+												isMounted
+													? { opacity: 0.8, x: 50 }
+													: {}
+											}
+											animate={
+												isMounted
+													? { opacity: 1, x: 0 }
+													: {}
+											}
 											exit={{ opacity: 0, x: -50 }}
 											transition={{
-												type: "spring",
+												type: 'spring',
 												bounce: 0.2,
 												duration: 0.6,
 											}}
-											className="mt-10 h-[24rem] lg:h-[40rem] w-[45rem] overflow-hidden rounded-xl shadow-xl border  sm:w-auto lg:mt-0 lg:w-[67.8125rem]"
+											className="mt-10 h-[24rem] w-[45rem] overflow-hidden rounded-xl border shadow-xl sm:w-auto  lg:mt-0 lg:h-[40rem] lg:w-[67.8125rem]"
 										>
 											<img
 												alt=""
@@ -195,5 +199,5 @@ export function PrimaryFeatures() {
 				</Tab.Group>
 			</Container>
 		</section>
-	);
+	)
 }