first commit

2026-05-22 18:44:46 -03:00
parent eaea57b7e9
commit 0fb351a3e2
40 changed files with 4746 additions and 71 deletions
@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion';
+import {
+  MessageCircle,
+  ShieldCheck,
+  Sparkles,
+  Target,
+  type LucideIcon,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { SectionHeader } from './Services';
+
+type Key = 'senior' | 'delivery' | 'communication' | 'quality';
+
+const PILLARS: { key: Key; Icon: LucideIcon }[] = [
+  { key: 'senior', Icon: Sparkles },
+  { key: 'delivery', Icon: Target },
+  { key: 'communication', Icon: MessageCircle },
+  { key: 'quality', Icon: ShieldCheck },
+];
+
+export function WhyUs() {
+  const { t } = useTranslation();
+
+  return (
+    <section id="whyus" className="section">
+      <div className="container-rl">
+        <SectionHeader
+          eyebrow={t('whyus.eyebrow')}
+          title={t('whyus.title')}
+        />
+
+        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {PILLARS.map(({ key, Icon }, index) => (
+            <motion.div
+              key={key}
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-80px' }}
+              transition={{
+                duration: 0.5,
+                delay: index * 0.07,
+                ease: [0.4, 0, 0.2, 1],
+              }}
+              className="group relative rounded-xl border border-border bg-bg p-6 transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-md"
+            >
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-fg transition-transform group-hover:scale-110">
+                <Icon className="h-5 w-5" aria-hidden="true" />
+              </div>
+              <h3 className="heading mt-5 text-lg">
+                {t(`whyus.items.${key}.title`)}
+              </h3>
+              <p className="mt-2 text-sm text-fg-muted leading-relaxed">
+                {t(`whyus.items.${key}.description`)}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}