DataScope26/WEB
0
1import { useEffect } from "react";2import { useNavigate, useLocation } from "react-router-dom";3import { useAuth } from "../context/AuthContext.jsx";4 5import "./LandingPage.css";6import "./About.css";7import "./Tutorial.css";8import "./Home.css";9 10import ButtonPrimary from "../components/ButtonPrimary.jsx";11import ButtonSecondary from "../components/ButtonSecondary.jsx";12 13import {14 ShieldCheck,15 RefreshCcw,16 Lock,17 BarChart3,18 Network,19 EyeOff,20} from "lucide-react";21 22import imgDashboardPreview from "../assets/Capturadepantalla2026-08-14094452.png";23import imgDataCenter from "../assets/Decoracion-oficina1.jpg";24import imgFondo from "../assets/imgFondo.webp";25import imgLogo from "../assets/imgLogo.webp";26 27// Ícono de extensiones (el mismo "puzzle piece" que usa Chrome en su barra de28// herramientas). Es el ícono "extension" de Google Material Symbols, de uso29// libre — no el logo de Chrome.30const ExtensionIcon = ({ size = 24, className }) => (31 <svg32 width={size}33 height={size}34 viewBox="0 0 24 24"35 fill="currentColor"36 className={className}37 >38 <path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z" />39 </svg>40);41 42const STATS = [43 { title: "Mantén la información\nde tu empresa a salvo", sub: "Tenemos el conocimiento necesario" },44 { title: "+10.000 empresas\nconfían en nosotros", sub: "No pongas en peligro tu información" },45 { title: "Trabaja a una velocidad\nimparable", sub: "Hasta un 50% de eficiencia" },46];47 48const BARS = [49 { height: 80, opacity: 0.2 },50 { height: 120, opacity: 0.4 },51 { height: 100, opacity: 0.6 },52 { height: 170, opacity: 1 },53 { height: 60, opacity: 0.4 },54];55 56export default function Home() {57 const { setShowRegister, isLogged } = useAuth();58 const navigate = useNavigate();59 const location = useLocation();60 61 const handleProfile = () => navigate("/overview/perfil");62 63 // Si llegamos a "/" con la intención de ir a una sección puntual64 // (por ejemplo, clickeando "About" o "Tutorial" desde otra página),65 // hacemos scroll una vez que el Home ya está montado.66 useEffect(() => {67 const target = location.state?.scrollTo;68 if (target) {69 requestAnimationFrame(() => {70 const el = document.getElementById(target);71 if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });72 });73 }74 }, [location.state]);75 76 return (77 <div className="body-landing">78 79 {/* ══════════════════════════ HOME ══════════════════════════ */}80 <div className="landing" id="home">81 82 {/* ── HERO ── */}83 <section className="hero">84 <img src={imgFondo} alt="" className="hero__bg" />85 <div className="hero__content">86 <h1 className="hero__title fade-up fade-up--1">87 <span className="hero__title-top">Optimiza la eficiencia</span>88 <span className="hero__title-bottom">de tu equipo en IA</span>89 </h1>90 <ButtonPrimary91 className="btn--primary"92 onClick={() => {93 const el = document.getElementById("about");94 if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });95 }}96 >97 Conocé más98 </ButtonPrimary>99 </div>100 </section>101 102 {/* ── STATS BAR ── */}103 <section className="stats">104 {STATS.map((s, i) => (105 <div className="stats__item" key={i}>106 <p className="stats__title">{s.title}</p>107 <p className="stats__sub">{s.sub}</p>108 </div>109 ))}110 </section>111 112 {/* ── FEATURES BENTO GRID ── */}113 <section className="features">114 <div className="features__header">115 <h2 className="features__heading">El Observatorio de Rendimiento</h2>116 <p className="features__subheading">117 Control total sobre el despliegue de inteligencia artificial en tu118 organización con métricas que importan.119 </p>120 </div>121 122 <div className="bento">123 124 {/* Main — Stats en tiempo real */}125 <div className="bento__card bento__card--main">126 <div className="bento__glow" />127 <div className="card-icon">128 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="1" y="10" width="3" height="9" rx="1" fill="var(--color-accent)" /><rect x="6" y="6" width="3" height="13" rx="1" fill="var(--color-accent)" /><rect x="11" y="8" width="3" height="11" rx="1" fill="var(--color-accent)" /><rect x="16" y="2" width="3" height="17" rx="1" fill="var(--color-accent)" /></svg>129 </div>130 <h3 className="card__title">Estadísticas en Tiempo Real</h3>131 <p className="card__desc">132 Visualiza el impacto directo de la IA. Monitorea cada interacción133 y descubre patrones de uso instantáneamente.134 </p>135 <div className="bar-chart">136 {BARS.map((b, i) => (137 <div138 key={i}139 className="bar-chart__bar"140 style={{ height: b.height, opacity: b.opacity }}141 />142 ))}143 </div>144 </div>145 146 {/* Secondary — Optimización */}147 <div className="bento__card">148 <div className="card-icon">149 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2a8 8 0 100 16A8 8 0 0010 2zm0 14a6 6 0 110-12 6 6 0 010 12zm1-9H9v3H6l4 4 4-4h-3V7z" fill="var(--color-accent)" /></svg>150 </div>151 <h3 className="card__title">Optimización de Procesos</h3>152 <p className="card__desc">153 Identifica dónde se puede mejorar el uso de las herramientas.154 Detecta cuellos de botella en la interacción humana-IA.155 </p>156 </div>157 158 {/* Secondary — Calidad */}159 <div className="bento__card">160 <div className="card-icon">161 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.7 3.3L8 12 4.3 8.3 3 9.7l5 5 10-10-1.3-1.4z" fill="var(--color-accent)" /></svg>162 </div>163 <h3 className="card__title">Calidad Garantizada</h3>164 <p className="card__desc">165 Asegúrate de que el contenido generado cumple con tus estándares166 mediante auditorías automáticas de calidad.167 </p>168 <div className="qa">169 <div className="qa__track">170 <div className="qa__fill" />171 </div>172 <div className="qa__labels">173 <span>QA SCORE</span>174 <span>94% OPTIMAL</span>175 </div>176 </div>177 </div>178 179 {/* Wide — Seguridad */}180 <div className="bento__card bento__card--security">181 <div className="security__text">182 <h3 className="card__title">Seguridad Nivel Enterprise</h3>183 <p className="card__desc">184 Tus datos nunca salen de tu entorno corporativo. DataScope actúa185 como un filtro de privacidad activo.186 </p>187 <a188 href="#about"189 className="security__link"190 onClick={(e) => {191 e.preventDefault();192 const el = document.getElementById("about");193 if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });194 }}195 >196 Leer sobre seguridad197 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1l6 6-6 6M1 7h12" stroke="var(--color-accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>198 </a>199 </div>200 <div className="security__img">201 <img src={imgDataCenter} alt="Secure Data Center" />202 </div>203 </div>204 205 </div>206 </section>207 208 {/* ── DASHBOARD PREVIEW ── */}209 <section className="dashboard">210 <div className="dashboard__card">211 <div className="dashboard__inner">212 <div className="dashboard__metrics">213 <p className="dashboard__label">Impacto Real</p>214 <p className="dashboard__sublabel">215 Resumen de las últimas 24 horas de actividad de tu equipo.216 </p>217 <div className="metric">218 <p className="metric__label">Prompts Enviados</p>219 <p className="metric__value">1,429</p>220 </div>221 <div className="metric">222 <p className="metric__label">Horas Ahorradas</p>223 <p className="metric__value metric__value--green">342.5</p>224 </div>225 </div>226 <div className="dashboard__chart">227 <img src={imgDashboardPreview} alt="Dashboard Preview" />228 <div className="dashboard__chart-overlay" />229 </div>230 </div>231 </div>232 </section>233 </div>234 235 {/* ══════════════════════════ ABOUT ══════════════════════════ */}236 <div className="about-page" id="about">237 238 {/* Hero / Manifesto */}239 <section className="about-hero">240 <h2 className="about-title">Transparencia en la Era de la IA</h2>241 <p className="about-subtitle">242 DataScope nace en el epicentro de la mayor transformación tecnológica243 de la historia. Existimos para devolver la claridad a las organizaciones244 donde la IA opera en la sombra.245 </p>246 </section>247 248 {/* Valores */}249 <section className="about-valores">250 <h2 className="about-section-label">VALORES FUNDAMENTALES</h2>251 <div className="about-valores-grid">252 <div className="about-valor-card">253 <div className="about-valor-icon">254 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">255 <path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.354a15.055 15.055 0 01-4.5 0M3 3l18 18" />256 </svg>257 </div>258 <h3>Innovación</h3>259 <p>No seguimos tendencias; las auditamos. Redefinimos constantemente qué significa trabajar con inteligencia artificial.</p>260 </div>261 <div className="about-valor-card">262 <div className="about-valor-icon">263 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">264 <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />265 </svg>266 </div>267 <h3>Transparencia</h3>268 <p>Creemos que el dato crudo es la única verdad. Eliminamos las capas de opacidad en el software corporativo.</p>269 </div>270 <div className="about-valor-card">271 <div className="about-valor-icon">272 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">273 <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />274 </svg>275 </div>276 <h3>Precisión</h3>277 <p>En el mundo de los datos, el error es ruido. Entregamos insights con exactitud quirúrgica.</p>278 </div>279 </div>280 </section>281 282 {/* Observatorio Digital */}283 <section className="about-observatorio">284 <div className="about-observatorio-text">285 <h2 className="about-green-title">Observatorio Digital</h2>286 <p>No somos solo software; somos el lente de precisión para el liderazgo moderno. Nuestra plataforma permite a líderes y equipos optimizar cada interacción con la IA.</p>287 </div>288 <div className="about-stats">289 <div className="about-stat-box">290 <span className="about-stat-number">94%</span>291 <span className="about-stat-label">VISIBILIDAD</span>292 </div>293 <div className="about-stat-box">294 <span className="about-stat-number">2.4x</span>295 <span className="about-stat-label">EFICIENCIA</span>296 </div>297 </div>298 </section>299{/* Seguridad y Privacidad */}300<section className="about-seguridad-info" id="seguridad">301 <div className="about-seguridad-text">302 <div className="about-seguridad-icon">303 <ShieldCheck size={28} strokeWidth={2} />304 </div>305 <h2 className="about-seguridad-title">Seguridad de Extremo a Extremo</h2>306 <p>307 Todo el tráfico entre tu organización y DataScope viaja cifrado, y308 ningún dato sensible sale de tu entorno sin tu consentimiento309 explícito. Control de accesos, retención mínima y auditorías310 constantes: tu confianza se gana con transparencia, no con promesas.311 </p>312 </div>313 <div className="about-seguridad-img">314 <img src={imgDataCenter} alt="Centro de datos seguro" />315 </div>316</section>317 {/* Punto Ciego */}318 <section className="about-punto-ciego">319 <div className="about-punto-ciego-text">320 <h2>El Punto Ciego Corporativo</h2>321 <p>Las empresas están integrando IA a un ritmo sin precedentes. Sin embargo, la mayoría opera en una "caja negra". Sin visibilidad sobre cómo se utilizan estas herramientas, los líderes pierden el control sobre la eficiencia, la seguridad y el talento humano.</p>322 </div>323 <div className="about-punto-ciego-img">324 <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&q=80" alt="Sala de reuniones corporativa" />325 </div>326 </section>327 328 {/* Ojo de Halcón */}329 <section className="about-ojo">330 <div className="about-ojo-mockup">331 <div className="about-mockup-window">332 <div className="about-mockup-bar">333 <span /><span /><span />334 </div>335 <div className="about-mockup-content">336 <div className="about-mockup-sidebar">337 <div className="about-mockup-item" />338 <div className="about-mockup-item" />339 <div className="about-mockup-item" />340 <div className="about-mockup-item" />341 </div>342 <div className="about-mockup-main">343 <div className="about-mockup-chart">344 <svg viewBox="0 0 200 80" preserveAspectRatio="none">345 <polyline points="0,60 30,45 60,50 90,20 120,30 150,15 180,25 200,10" fill="none" stroke="var(--green)" strokeWidth="2" />346 <polyline points="0,60 30,45 60,50 90,20 120,30 150,15 180,25 200,10 200,80 0,80" fill="var(--green-20)" strokeWidth="0" />347 </svg>348 </div>349 <div className="about-mockup-dots">350 <div /><div /><div /><div />351 </div>352 </div>353 </div>354 <div className="about-mockup-badge">● LIVE MONITOR ACTIVE</div>355 </div>356 </div>357 <div className="about-ojo-text">358 <span className="about-tag">NUESTRA TECNOLOGÍA</span>359 <h2 className="about-quote-title">'Ojo de Halcón'</h2>360 <p>Nuestra extensión de Google Chrome es el núcleo táctico de DataScope. Diseñada con una arquitectura ligera, actúa como un observador pasivo que captura métricas de interacción sin interrumpir el flujo de trabajo. Es la interfaz que conecta la intención humana con el rendimiento de la IA.</p>361 <ul className="about-feature-list">362 <li>363 <span className="about-check" />364 Análisis de Prompt-Efficiency en tiempo real365 </li>366 <li>367 <span className="about-check" />368 Detección de alucinaciones de IA corporativa369 </li>370 <li>371 <span className="about-check" />372 Opción de desactivación para privacidad373 </li>374 </ul>375 </div>376 </section>377 378 {/* Visión */}379 <section className="about-vision">380 <h2>Nuestra Visión</h2>381 <blockquote className="about-vision-quote">382 <span className="about-quote-mark left">"</span>383 El futuro no es una competencia entre humanos e IA,384 sino una sinfonía de colaboración donde la transparencia es el único385 director de orquesta posible. En DataScope, estamos escribiendo386 las partituras de esa nueva era.387 <span className="about-quote-mark right">"</span>388 </blockquote>389 </section>390 </div>391 392 {/* ══════════════════════════ TUTORIAL ══════════════════════════ */}393 <div className="tutorial-page" id="tutorial">394 395 {/* Hero */}396 <section className="tutorial-hero">397 <h2 className="tutorial-title">Guía de Instalación y Uso</h2>398 <p className="tutorial-subtitle">399 Transforma tu navegador en una terminal de inteligencia avanzada. Sigue400 estos tres pasos para desplegar el Observatorio Digital de DataScope.401 </p>402 </section>403 404 {/* Pasos */}405 <section className="tutorial-steps">406 407 {/* Paso 1 */}408 <div className="tutorial-step">409 <div className="tutorial-step__text">410 <span className="tutorial-step__number">01</span>411 <h3 className="tutorial-step__title">Paso 1: Descarga la Extensión</h3>412 <p className="tutorial-step__desc">413 Accede al repositorio oficial de Chrome para integrar DataScope.414 Nuestra extensión es ligera, segura y optimizada para el rendimiento415 de tu sistema.416 </p>417 <a418 href="https://chrome.google.com/webstore"419 target="_blank"420 rel="noopener noreferrer"421 className="tutorial-step__btn"422 >423 <ExtensionIcon size={16} />424 Ir a Chrome Web Store425 </a>426 <p className="tutorial-step__meta">427 <ShieldCheck size={14} strokeWidth={2.2} />428 Verificado por Google • v2.4.1429 </p>430 </div>431 432 <div className="tutorial-step__media">433 <div className="tutorial-chrome-card">434 <ExtensionIcon size={84} className="tutorial-chrome-card__icon" />435 </div>436 </div>437 </div>438 439 {/* Paso 2 */}440 <div className="tutorial-step">441 <div className="tutorial-step__text">442 <span className="tutorial-step__number">02</span>443 <h3 className="tutorial-step__title">Paso 2: Inicia Sesión</h3>444 <p className="tutorial-step__desc">445 Una vez instalada, haz clic en el icono del Observatorio en tu barra446 de herramientas. Introduce tus credenciales de DataScope para447 sincronizar tu panel de control y activar los algoritmos de detección.448 </p>449 <ul className="tutorial-step__features">450 <li><RefreshCcw size={18} strokeWidth={2} /> Sincronización en la nube habilitada</li>451 <li><Lock size={18} strokeWidth={2} /> Cifrado de extremo a extremo (AES-256)</li>452 </ul>453 </div>454 455 <div className="tutorial-step__media">456 <div className="tutorial-login-mock">457 <img src={imgLogo} alt="" className="tutorial-login-mock__logo" />458 <p className="tutorial-login-mock__brand">DATASCOPE</p>459 <p className="tutorial-login-mock__sub">INICIO DE SESIÓN</p>460 461 <div className="tutorial-login-mock__field">462 <span className="tutorial-login-mock__label">USERNAME</span>463 <div className="tutorial-login-mock__input">nombre_de_usuario</div>464 </div>465 <div className="tutorial-login-mock__field">466 <span className="tutorial-login-mock__label">EMAIL ADDRESS</span>467 <div className="tutorial-login-mock__input">nombre@compania.com</div>468 </div>469 <div className="tutorial-login-mock__field">470 <span className="tutorial-login-mock__label">PASSWORD</span>471 <div className="tutorial-login-mock__input">••••••••</div>472 </div>473 474 <ButtonPrimary type="button" className="tutorial-login-mock__btn">Iniciar</ButtonPrimary>475 <p className="tutorial-login-mock__footer">476 ¿No tenés una cuenta? <span>Registrate</span>477 </p>478 </div>479 </div>480 </div>481 482 {/* Paso 3 */}483 <div className="tutorial-step">484 <div className="tutorial-step__text">485 <span className="tutorial-step__number">03</span>486 <h3 className="tutorial-step__title">Paso 3: Empieza a Medir</h3>487 <p className="tutorial-step__desc">488 La extensión opera de forma silenciosa en segundo plano. Utiliza489 motores de IA para monitorizar interacciones críticas y flujos de490 datos sin interrumpir tu flujo de trabajo diario.491 </p>492 <ul className="tutorial-step__features">493 <li><BarChart3 size={18} strokeWidth={2} /> Monitorización de latencia en tiempo real.</li>494 <li><Network size={18} strokeWidth={2} /> Clasificación de datos mediante Redes Neuronales.</li>495 <li><EyeOff size={18} strokeWidth={2} /> Modo incógnito con privacidad E2E.</li>496 </ul>497 </div>498 499 <div className="tutorial-step__media">500 <div className="tutorial-chart-mock">501 <svg viewBox="0 0 320 200" preserveAspectRatio="none">502 <defs>503 <linearGradient id="tutorialBarGradient" x1="0" y1="0" x2="0" y2="1">504 <stop offset="0%" stopColor="var(--green)" stopOpacity="0.9" />505 <stop offset="100%" stopColor="var(--green)" stopOpacity="0.25" />506 </linearGradient>507 </defs>508 509 {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {510 const heights = [70, 110, 60, 140, 95, 150, 80, 130, 100, 160];511 const h = heights[i];512 const x = 12 + i * 31;513 return (514 <rect515 key={i}516 x={x}517 y={190 - h}518 width="16"519 height={h}520 rx="2"521 fill="url(#tutorialBarGradient)"522 />523 );524 })}525 526 <polyline527 points="20,120 51,90 82,130 113,60 144,100 175,45 206,95 237,55 268,85 299,30"528 fill="none"529 stroke="var(--green)"530 strokeWidth="2"531 strokeLinecap="round"532 strokeLinejoin="round"533 />534 535 <line x1="0" y1="190" x2="320" y2="190" stroke="var(--color-border-soft)" strokeWidth="1" />536 </svg>537 <span className="tutorial-chart-mock__badge">● LIVE MONITOR ACTIVE</span>538 </div>539 </div>540 </div>541 542 </section>543 </div>544 545 {/* ══════════════════════════ CTA FINAL (único para las 3 secciones) ══════════════════════════ */}546 <section className="cta">547 <div className="cta__card">548 {isLogged ? (549 <>550 <h2 className="cta__title">Explorá tu Observatorio</h2>551 <p className="cta__sub">552 Volvé a tu panel para revisar en tiempo real cómo tu equipo está usando la IA.553 </p>554 <ButtonSecondary className="button" onClick={handleProfile}>Ver Dashboard</ButtonSecondary>555 </>556 ) : (557 <>558 <h2 className="cta__title">Toma el control de tu transformación digital.</h2>559 <p className="cta__sub">560 Únete a los líderes que ya están midiendo el ROI real de la561 inteligencia artificial.562 </p>563 <ButtonSecondary className="button" onClick={() => setShowRegister(true)}>Registrarse</ButtonSecondary>564 </>565 )}566 </div>567 </section>568 569 </div>570 );571}