← retour au collage›Modifier / dupliquer

pepe

#4DrnDmvvSupublic / publicnouvelle version

anonyme créé 3 days ago Expire dans 4 days 18.2 KB syntaxe: text

Vos changements créent un nouveau collage lié à celui-ci — l’original reste intact.

nouvelle version Vos changements créent un nouveau collage lié à celui-ci — l’original reste intact.

Visibilité Fil public Accès public

Note de changement (facultatif)

Ce collage sera affiché dans le fil public. Changez la visibilité si vous voulez seulement le partager par lien.

Annuler

---
// Astro component: src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="BitCare - Mejora tu Operación">
  <main class="overflow-hidden bg-black text-white">
    
    <section class="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-b from-purple-900/20 via-black to-black"></div>
      
      <div class="relative z-10 max-w-4xl mx-auto text-center">
        <h1 id="heroTitle" class="text-4xl md:text-7xl font-bold leading-tight mb-8">
          <span class="word">Las</span>
          <span class="word">señales</span>
          <span class="word">suelen</span>
          <span class="word">estar</span>
          <span class="word">delante</span>
          <span class="word">de</span>
          <span class="word">ti.</span>
        </h1>
      </div>

.word:hover {
          color: #a855f7;
          transform: scale(1.15);
        }
      /* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp 0.3s ease-out;
}

body {
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Cyberpunk frames */
.cyberpunk-frame {
  position: relative;
  border: 2px solid #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 20px rgba(168, 85, 247, 0.1);
}

.cyberpunk-frame::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #a855f7, #7c3aed, transparent);
  opacity: 0.1;
}
</style>
    </section>

<section class="py-20 px-4 relative">
      <div class="max-w-6xl mx-auto">
        <h2 class="text-3xl md:text-5xl font-bold mb-16 text-center">Si reconoces varias de estas situaciones, probablemente exista una oportunidad de mejora.</h2>
        
        <div id="cardsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
          
        </div>
      </div>
    </section>

<section class="py-32 px-4 relative min-h-screen flex items-center justify-center">
      <div id="canvas3d" class="w-full h-screen absolute inset-0"></div>
      <div id="popup3d" class="fixed bg-purple-900/95 text-white p-6 rounded-lg max-w-sm hidden z-50 border border-purple-500"></div>
    </section>

<section class="py-20 px-4 flex items-center justify-center">
      <div id="ctaButton" class="relative inline-flex">
        <button class="cta-part px-6 py-3 border-2 border-purple-500 text-purple-500 font-bold transition-all duration-300 hover:text-white">
          Analizar
        </button>
        <button class="cta-part px-6 py-3 border-2 border-t-purple-500 border-b-purple-500 border-l-0 border-r-0 text-purple-500 font-bold transition-all duration-300 hover:text-white">
          y
        </button>
        <button class="cta-part px-6 py-3 border-2 border-purple-500 text-purple-500 font-bold transition-all duration-300 hover:text-white">
          mejorar mi operación
        </button>
      </div>

#ctaButton:hover .cta-part {
          border: none;
          background: linear-gradient(135deg, #a855f7, #7c3aed);
          border-radius: 50px;
        }
      </style>
    </section>

<section class="py-32 px-4 grid grid-cols-1 md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
      <div>
        <h2 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
          <span class="mainWord">No</span>
          <span class="mainWord">necesitas</span>
          <span class="mainWord">automatizar</span>
          <span class="mainWord">más.</span>
          <span class="mainWord">Necesitas</span>
          <span class="mainWord">que</span>
          <span class="mainWord">tu</span>
          <span class="mainWord">empresa</span>
          <span class="mainWord">funcione</span>
          <span class="mainWord">mejor.</span>
        </h2>
      </div>
      <div>
        <img id="hoverImage1" src="https://bitcare.es/wp-content/uploads/2026/03/Asset-2@2x-scaled.avif" alt="BitCare" class="w-full rounded-lg transition-transform duration-300 hover:scale-105" />
      </div>

.mainWord:hover {
          color: #a855f7;
        }
      </style>
    </section>

<section class="py-32 px-4 relative min-h-screen flex items-center justify-center bg-gradient-to-b from-black via-purple-900/10 to-black">
      <div id="rootsCanvas" class="w-full max-w-4xl mx-auto"></div>
      <button id="resetRoots" class="absolute top-8 right-8 px-6 py-2 border-2 border-purple-500 text-purple-500 rounded-lg hover:bg-purple-500 hover:text-white transition-all">
        Reiniciar
      </button>
    </section>

<section class="py-32 px-4 grid grid-cols-1 md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
      <div id="equationContainer" class="flex justify-center">
        
      </div>
      <div class="text-right">
        <img id="hoverImage2" src="https://bitcare.es/wp-content/uploads/2026/03/Asset-2@2x-scaled.avif" alt="BitCare About" class="w-full rounded-lg transition-transform duration-300 hover:scale-105" />
      </div>
    </section>

<section class="py-20 px-4 flex items-center justify-center">
      <a href="https://bitcare.es/calculadora-fugas" class="px-8 py-4 bg-gradient-to-r from-purple-600 to-purple-800 text-white font-bold text-lg rounded-full hover:shadow-lg hover:shadow-purple-500/50 transition-all duration-300 transform hover:scale-105">
        VEAMOS TU CASO
      </a>
    </section>
  </main>

// CTA Button Hover Effect
    const ctaButton = document.getElementById('ctaButton');
    ctaButton.addEventListener('mouseover', function() {
      this.style.borderRadius = '50px';
      this.querySelectorAll('.cta-part').forEach(part => {
        part.style.border = 'none';
      });
    });
    ctaButton.addEventListener('mouseout', function() {
      this.style.borderRadius = '0px';
      this.querySelectorAll('.cta-part').forEach(part => {
        part.style.border = '2px solid #a855f7';
      });
    });

// Image Hover Effects
    document.getElementById('hoverImage1').addEventListener('click', () => {
      window.location.href = 'https://bitcare.es/about-us';
    });

document.getElementById('hoverImage2').addEventListener('click', () => {
      window.location.href = 'https://bitcare.es/about-us';
    });
  </script>
</Layout>
// src/components/Cards3D.tsx
import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';

const cardsData = [
  "Copiamos la misma información entre sistemas.",
  "Hay tareas que solo sabe hacer una persona.",
  "Seguimos utilizando Excels para procesos críticos.",
  "Respondemos manualmente las mismas preguntas.",
  "Los errores se descubren demasiado tarde.",
  "Coordinamos procesos mediante email o WhatsApp.",
  "Cuando aumenta el volumen, necesitamos aumentar el equipo.",
  "No sabemos cuánto cuesta realmente cada proceso."
];

export default function Cards3D() {
  const containerRef = useRef(null);
  const sceneRef = useRef(null);
  const cameraRef = useRef(null);
  const rendererRef = useRef(null);
  const pointsRef = useRef([]);
  const [selectedCard, setSelectedCard] = useState(0);

useEffect(() => {
    if (!containerRef.current) return;

// THREE.js Setup
    const scene = new THREE.Scene();
    sceneRef.current = scene;

const camera = new THREE.PerspectiveCamera(
      75,
      containerRef.current.clientWidth / containerRef.current.clientHeight,
      0.1,
      1000
    );
    camera.position.z = 50;
    cameraRef.current = camera;

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
    renderer.setClearColor(0x000000, 0);
    containerRef.current.appendChild(renderer.domElement);
    rendererRef.current = renderer;

// Crear nodos (estrellas)
    const geometry = new THREE.SphereGeometry(0.5, 32, 32);
    const material = new THREE.MeshBasicMaterial({ color: 0xa855f7 });

cardsData.forEach((card, i) => {
      const mesh = new THREE.Mesh(geometry, material.clone());
      const angle = (i / cardsData.length) * Math.PI * 2;
      const radius = 30;
      mesh.position.x = Math.cos(angle) * radius;
      mesh.position.y = Math.sin(angle) * radius;
      mesh.position.z = (Math.random() - 0.5) * 20;
      mesh.userData.cardIndex = i;
      scene.add(mesh);
      pointsRef.current.push({ mesh, card, angle });
    });

// Líneas conectoras
    const lineGeometry = new THREE.BufferGeometry();
    const positions = [];
    pointsRef.current.forEach(p => {
      positions.push(p.mesh.position.x, p.mesh.position.y, p.mesh.position.z);
    });
    lineGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
    const lineMaterial = new THREE.LineBasicMaterial({ color: 0x7c3aed, opacity: 0.3 });
    const lines = new THREE.Line(lineGeometry, lineMaterial);
    scene.add(lines);

// Interactividad con mouse
    let autoRotate = true;
    let rotation = 0;

const onMouseMove = (e) => {
      if (!autoRotate) return;
      const x = e.clientX / containerRef.current.clientWidth;
      const y = e.clientY / containerRef.current.clientHeight;
      camera.position.x = Math.sin(x * Math.PI * 2) * 50;
      camera.position.y = (y - 0.5) * 30;
    };

containerRef.current.addEventListener('mousemove', onMouseMove);

// Raycasting para clicks
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

const onCardClick = (e) => {
      mouse.x = (e.clientX / containerRef.current.clientWidth) * 2 - 1;
      mouse.y = -(e.clientY / containerRef.current.clientHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(pointsRef.current.map(p => p.mesh));

if (intersects.length > 0) {
        const clicked = intersects[0].object;
        setSelectedCard(clicked.userData.cardIndex);
        autoRotate = false;
      }
    };

containerRef.current.addEventListener('click', onCardClick);

// Animación
    const animate = () => {
      requestAnimationFrame(animate);

if (autoRotate) {
        rotation += 0.0003;
        pointsRef.current.forEach(p => {
          p.mesh.position.x = Math.cos(p.angle + rotation) * 30;
          p.mesh.position.y = Math.sin(p.angle + rotation) * 30;
        });
      }

renderer.render(scene, camera);
    };

animate();

return () => {
      containerRef.current?.removeEventListener('mousemove', onMouseMove);
      containerRef.current?.removeEventListener('click', onCardClick);
      renderer.dispose();
    };
  }, []);

return (
    <div className="w-full h-full">
      <div ref={containerRef} className="w-full h-screen" />
      {selectedCard !== null && (
        <div className="fixed bottom-10 left-10 right-10 max-w-sm bg-purple-900/95 text-white p-6 rounded-lg border border-purple-500 animate-slideUp">
          <p className="text-lg font-semibold">{cardsData[selectedCard]}</p>
          <button
            onClick={() => setSelectedCard(null)}
            className="mt-4 px-4 py-2 bg-purple-600 rounded hover:bg-purple-700"
          >
            Cerrar
          </button>
        </div>
      )}
    </div>
  );
}
// src/components/RootsAnimation.tsx
import React, { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';

export default function RootsAnimation() {
  const containerRef = useRef(null);
  const [isAnimating, setIsAnimating] = useState(true);

useEffect(() => {
    if (!containerRef.current) return;

const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      containerRef.current.clientWidth / containerRef.current.clientHeight,
      0.1,
      1000
    );
    camera.position.z = 100;

// Crear nodos aleatorios
    const nodeCount = 50;
    const nodes = [];
    const targetPositions = [];

// Positions objetivo (geometría perfecta - círculo)
    for (let i = 0; i < nodeCount; i++) {
      const angle = (i / nodeCount) * Math.PI * 2;
      const radius = 30;
      targetPositions.push({
        x: Math.cos(angle) * radius,
        y: Math.sin(angle) * radius,
        z: 0
      });
    }

// Posiciones iniciales (aleatorias)
    const geometry = new THREE.SphereGeometry(0.8, 16, 16);
    targetPositions.forEach(target => {
      const material = new THREE.MeshBasicMaterial({ color: 0xa855f7 });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = (Math.random() - 0.5) * 200;
      mesh.position.y = (Math.random() - 0.5) * 200;
      mesh.position.z = (Math.random() - 0.5) * 100;
      scene.add(mesh);
      nodes.push({ mesh, target, progress: 0 });
    });

// Crear líneas de conexión
    const lines = new THREE.Group();
    scene.add(lines);

const animate = () => {
      requestAnimationFrame(animate);

if (isAnimating) {
        nodes.forEach(node => {
          if (node.progress < 1) {
            node.progress += 0.01;
            node.mesh.position.lerp(
              new THREE.Vector3(node.target.x, node.target.y, node.target.z),
              0.02
            );
          }
        });

// Actualizar líneas
        lines.clear();
        nodes.forEach((node, i) => {
          const next = nodes[(i + 1) % nodes.length];
          const geom = new THREE.BufferGeometry();
          geom.setAttribute('position', new THREE.BufferAttribute(
            new Float32Array([
              node.mesh.position.x, node.mesh.position.y, node.mesh.position.z,
              next.mesh.position.x, next.mesh.position.y, next.mesh.position.z
            ]),
            3
          ));
          const lineMat = new THREE.LineBasicMaterial({
            color: 0x7c3aed,
            opacity: 0.3
          });
          lines.add(new THREE.Line(geom, lineMat));
        });
      }

renderer.render(scene, camera);
    };

animate();

return () => {
      renderer.dispose();
    };
  }, [isAnimating]);

const handleReset = () => {
    setIsAnimating(false);
    setTimeout(() => setIsAnimating(true), 500);
  };

return (
    <div className="w-full relative">
      <div ref={containerRef} className="w-full h-96" />
      <button
        onClick={handleReset}
        className="absolute top-4 right-4 px-6 py-2 border-2 border-purple-500 text-purple-500 rounded-lg hover:bg-purple-500 hover:text-white transition-all"
      >
        Reiniciar
      </button>
    </div>
  );
}
// src/components/EquationAnimation.tsx
import React, { useEffect } from 'react';
import { motion } from 'framer-motion';

export default function EquationAnimation() {
  const numbers = ['2', '+', '3', '+', '5'];

return (
    <div className="flex flex-col items-center justify-center gap-8">
      <motion.div
        className="flex gap-2 text-4xl font-bold"
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
      >
        {numbers.map((num, i) => (
          <motion.span
            key={i}
            animate={{
              y: [0, -20, 0],
              scale: [1, 1.1, 1]
            }}
            transition={{
              duration: 2,
              delay: i * 0.2,
              repeat: Infinity
            }}
            className="text-purple-500"
          >
            {num}
          </motion.span>
        ))}
      </motion.div>

<motion.div
        className="relative w-32 h-32 bg-gradient-to-br from-green-500/30 to-green-600/30 rounded-lg backdrop-blur-sm border border-green-500/50 flex items-center justify-center"
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 1.5 }}
      >
        <motion.div
          className="text-white font-bold text-2xl"
          animate={{ rotateX: 360 }}
          transition={{ duration: 3, repeat: Infinity }}
        >
          10
        </motion.div>
      </motion.div>

<motion.div
        className="flex gap-4 overflow-x-auto max-w-2xl"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 2 }}
      >
        {[...Array(3)].map((_, i) => (
          <motion.div
            key={i}
            className="w-24 h-24 bg-gradient-to-br from-purple-600 to-purple-800 rounded-lg flex-shrink-0 border border-purple-500/50"
            animate={{ rotateZ: 360 }}
            transition={{ duration: 4, repeat: Infinity }}
          />
        ))}
      </motion.div>
    </div>
  );
}