import { motion } from "framer-motion"; import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...entrees) { return twMerge(clsx(entrees)); } function LigneGrilleHorizontale({ className, offset }) { return (

); } function LigneGrilleVerticale({ className, offset }) { return (

); } function Marquee3D({ images, className }) { const taillePaquet = Math.ceil(images.length / 4); const colonnes = Array.from({ length: 4 }, (_, indexColonne) => { const debut = indexColonne * taillePaquet; return images.slice(debut, debut + taillePaquet); }); return (

{colonnes.map((colonne, indexColonne) => ( {colonne.map((image, indexImage) => (

))} ))}

); } // Vignettes des composants e-freeshop (public/previews) const imagesDemo = [ "https://www.e-freeshop.com/previews/bouton-magnetique.webp", "https://www.e-freeshop.com/previews/bouton-remplissage.webp", "https://www.e-freeshop.com/previews/brins-lumineux.webp", "https://www.e-freeshop.com/previews/carrousel-temoignages.webp", "https://www.e-freeshop.com/previews/carte-fusion-encoche.webp", "https://www.e-freeshop.com/previews/carte-morphism.webp", "https://www.e-freeshop.com/previews/cercle-stats.webp", "https://www.e-freeshop.com/previews/champ-de-points.webp", "https://www.e-freeshop.com/previews/compteur-anime.webp", "https://www.e-freeshop.com/previews/fond-iridescent.webp", "https://www.e-freeshop.com/previews/globe-vols.webp", "https://www.e-freeshop.com/previews/horloge-verrouillage.webp", "https://www.e-freeshop.com/previews/lettres-roulantes.webp", "https://www.e-freeshop.com/previews/revelation-encre.webp", "https://www.e-freeshop.com/previews/revelation-scroll.webp", "https://www.e-freeshop.com/previews/shimmer-skeleton.webp", "https://www.e-freeshop.com/previews/spirale-progression.webp", "https://www.e-freeshop.com/previews/split-text-gsap.webp", "https://www.e-freeshop.com/previews/texte-eclate.webp", "https://www.e-freeshop.com/previews/titre-scroll-gsap.webp", ]; // La grille 3D est pensee pour ~32 visuels : on double la liste pour la remplir const imagesGalerie = [...imagesDemo, ...imagesDemo]; export function HeroMarquee3D({ images = imagesGalerie, titre, sousTitre }) { return (

{titre ?? ( <> Des composants prêts à briller, un{" "} copier-coller {" "} à la fois. )}

{sousTitre ?? "Le hero qui montre ton produit pendant qu'il parle : la galerie défile en 3D derrière le message, le voile sombre garde le texte lisible."}

); } export default function Demo() { return ; }

Hero sur marquee 3D

Commentaires0