chore: transfer repo

components/home/CardSection.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { CustomCard } from "@/components/ui/CustomCard";
+import { Section } from "@/components/ui/Section";
+import { SectionHeader } from "@/components/ui/SectionHeader";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+
+export function CardSection() {
+  const { t } = useTranslation();
+  
+  // Card data from translations
+  const cardsData = [
+    {
+      title: t('cardSection.cards.0.title'),
+      description: t('cardSection.cards.0.description'),
+      imageSrc: "/assets/images/card1.png",
+      imageAlt: t('cardSection.cards.0.imageAlt')
+    },
+    {
+      title: t('cardSection.cards.1.title'),
+      description: t('cardSection.cards.1.description'),
+      imageSrc: "/assets/images/card2.png",
+      imageAlt: t('cardSection.cards.1.imageAlt')
+    },
+    {
+      title: t('cardSection.cards.2.title'),
+      description: t('cardSection.cards.2.description'),
+      imageSrc: "/assets/images/card3.png",
+      imageAlt: t('cardSection.cards.2.imageAlt')
+    }
+  ];
+
+  return (
+    <Section>
+      <div className="flex flex-col items-start">
+        <SectionHeader 
+          title={t('cardSection.title')}
+          description={t('cardSection.description')}
+          className="mb-[60px]"
+        />
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 w-full">
+          {cardsData.map((card, index) => (
+            <CustomCard
+              key={index}
+              title={card.title}
+              description={card.description}
+              imageSrc={card.imageSrc}
+              imageAlt={card.imageAlt}
+            />
+          ))}
+        </div>
+      </div>
+    </Section>
+  );
+}