Primer vistaso
This commit is contained in:
unknown
149
src/components/Features/Features.tsx
Normal file
149
src/components/Features/Features.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import styles from './Features.module.css';
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Automatización inteligente',
|
||||
description:
|
||||
'Crea flujos de trabajo sin código. Conecta apps, dispara acciones y elimina tareas manuales con nuestra IA incorporada.',
|
||||
tag: 'IA',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Colaboración en tiempo real',
|
||||
description:
|
||||
'Tu equipo siempre sincronizado. Comenta, asigna tareas y sigue el progreso de cada proyecto en tiempo real.',
|
||||
tag: 'Equipos',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Analíticas avanzadas',
|
||||
description:
|
||||
'Paneles personalizables con métricas de negocio en tiempo real. Toma decisiones basadas en datos, no en suposiciones.',
|
||||
tag: 'Analytics',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Seguridad enterprise',
|
||||
description:
|
||||
'Cifrado end-to-end, SSO, auditoría de accesos y cumplimiento SOC 2 Tipo II. Tu información, siempre protegida.',
|
||||
tag: 'Seguridad',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
|
||||
<path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" stroke="currentColor" strokeWidth="2" />
|
||||
</svg>
|
||||
),
|
||||
title: '200+ integraciones',
|
||||
description:
|
||||
'Conecta con Slack, Notion, GitHub, Salesforce y más. FlowSync se adapta a tu stack, no al revés.',
|
||||
tag: 'Integraciones',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
title: 'Soporte 24/7',
|
||||
description:
|
||||
'Equipo de soporte dedicado disponible en cualquier zona horaria. Tiempo de respuesta promedio: menos de 2 minutos.',
|
||||
tag: 'Soporte',
|
||||
},
|
||||
];
|
||||
|
||||
export default function Features() {
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add(styles.visible);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
const elements = sectionRef.current?.querySelectorAll(`.${styles.reveal}`);
|
||||
elements?.forEach((el) => observer.observe(el));
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className={`section ${styles.features}`} id="features" ref={sectionRef} aria-labelledby="features-heading">
|
||||
<div className="container">
|
||||
{/* Header */}
|
||||
<div className={`${styles.reveal} ${styles.header}`}>
|
||||
<span className="badge badge-accent">Características</span>
|
||||
<h2 id="features-heading" className={styles.title}>
|
||||
Todo lo que necesitas,
|
||||
<br />
|
||||
<span className={styles.titleAccent}>nada que no necesitas</span>
|
||||
</h2>
|
||||
<p className={styles.subtitle}>
|
||||
Diseñado para equipos que quieren mover rápido sin romper cosas.
|
||||
Potente cuando lo necesitas, simple cuando no.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className={styles.grid}>
|
||||
{features.map((feature, i) => (
|
||||
<article
|
||||
key={feature.title}
|
||||
className={`${styles.reveal} ${styles.card}`}
|
||||
style={{ transitionDelay: `${i * 0.08}s` }}
|
||||
aria-label={feature.title}
|
||||
>
|
||||
<div className={styles.cardIcon}>{feature.icon}</div>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.cardTag}>{feature.tag}</div>
|
||||
<h3 className={styles.cardTitle}>{feature.title}</h3>
|
||||
<p className={styles.cardDesc}>{feature.description}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className={`${styles.reveal} ${styles.bottomCta}`}>
|
||||
<p className={styles.ctaText}>
|
||||
¿Listo para transformar cómo trabaja tu equipo?
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-primary btn-lg"
|
||||
id="features-cta-btn"
|
||||
onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
>
|
||||
Ver todas las funciones
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user