import { useState, useEffect } from 'react'; const Comp = ({ onLinkClick, onFormSubmit, title = 'Premium Package', titleFontF = 'var(--font-family-heading)', titleFontW = 'var(--font-weight-heading)', titleFontS = '', subtitle = 'Elevate your creative journey with our comprehensive suite', subtitleFontF = 'var(--font-family)', subtitleFontW = 'var(--font-weight)', subtitleFontS = '', subtitleColor = '#857a7a', price = '$149', priceFontF = 'var(--font-family-heading)', priceFontW = 'var(--font-weight-heading)', priceFontS = '', priceColor = '#ed8646', backgroundColor = '#ede8d6', textColor = '#443017', featureIcon = '—', featureIconFamily = '', featureIconColor = '#ed8646', featureIconSize = 20, dashColor = '#ed8646', feature1 = 'The Full Color grade suite', feature1FontF = 'var(--font-family)', feature1FontW = 'var(--font-weight)', feature1FontS = '', feature1Detail = '($150 total value)', feature1DetailFontF = 'var(--font-family)', feature1DetailFontW = 'var(--font-weight)', feature1DetailFontS = '', feature1DetailColor = '#857a7a', feature2 = 'Instant life time access', feature2FontF = 'var(--font-family)', feature2FontW = 'var(--font-weight)', feature2FontS = '', feature2Detail = 'to the Creator Blueprint', feature2DetailFontF = 'var(--font-family)', feature2DetailFontW = 'var(--font-weight)', feature2DetailFontS = '', feature2DetailColor = '#857a7a', feature3 = 'Bonus', feature3FontF = 'var(--font-family)', feature3FontW = 'var(--font-weight)', feature3FontS = '', feature3Detail = 'interviews with business owners + creatives', feature3DetailFontF = 'var(--font-family)', feature3DetailFontW = 'var(--font-weight)', feature3DetailFontS = '', feature3DetailColor = '#857a7a', feature4 = '6 modules', feature4FontF = 'var(--font-family)', feature4FontW = 'var(--font-weight)', feature4FontS = '', feature4Detail = 'with 46 individual chapters', feature4DetailFontF = 'var(--font-family)', feature4DetailFontW = 'var(--font-weight)', feature4DetailFontS = '', feature4DetailColor = '#857a7a', buttonText = 'Get the Film Look Now — €29', buttonTextFontF = 'var(--font-family-button)', buttonTextFontW = 'var(--font-weight-button)', buttonTextFontS = 'var(--font-size-button)', buttonTextColor = '#FFFFFF', buttonBackgroundColor = '#4169e1', buttonBorderColor = '#443017', buttonBorderWidth = 1, buttonPadding = 16, buttonBorderRadius = 100, buttonLink = '', buttonLinkType = 'page', buttonNewTab = false, spacing = 24, textAlign = 'center', fullWidth = true, borderWidth = 1, borderColor = '#e0e0e0', cardPadding = 40, showDivider = true, dividerColor = '#e0e0e0', animationEnabled = true, animationDelay = 0.2, borderRadius = 24, glassmorphism = true, blurAmount = 10, packageImage = '', packageImageAlt = 'Package Image', cardImage = '', cardImageAlt = 'Card Image', cardImageHeight = 200, cardImageBorderRadius = 16, showCardImage = false, showFloatingElements = true, floatingElementsColor = '#ed8646', floatingElementsOpacity = 0.8, showGradientOverlay = false, gradientOverlayColor = '#ed8646', gradientOverlayOpacity = 0.1, showPriceHighlight = false, priceHighlightColor = '#ed8646', priceHighlightOpacity = 0.15, showTiltEffect = true, tiltAmount = 5, showShadowEffect = true, shadowColor = '#000000', shadowOpacity = 0.1, showButtonAnimation = true, buttonAnimationType = 'pulse', showBackgroundPattern = true, backgroundPatternOpacity = 0.05, backgroundPatternColor = '#443017', backgroundPatternSize = 20, backgroundPatternSpacing = 40 }) => { const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [isTablet, setIsTablet] = useState(window.innerWidth >= 768 && window.innerWidth < 1024); const [isVisible, setIsVisible] = useState(false); const [isButtonHovered, setIsButtonHovered] = useState(false); const [tiltX, setTiltX] = useState(0); const [tiltY, setTiltY] = useState(0); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const [cardRef, setCardRef] = useState(null); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); setIsTablet(window.innerWidth >= 768 && window.innerWidth < 1024); }; window.addEventListener('resize', handleResize); // Animation trigger setIsVisible(true); return () => window.removeEventListener('resize', handleResize); }, []); const handleMouseMove = (e) => { if (!cardRef || !showTiltEffect) return; const rect = cardRef.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const tiltX = ((y - centerY) / centerY) * tiltAmount; const tiltY = ((centerX - x) / centerX) * tiltAmount; setTiltX(tiltX); setTiltY(tiltY); setMousePosition({ x, y }); }; const handleMouseLeave = () => { setTiltX(0); setTiltY(0); }; const handleButtonClick = (e) => { e.preventDefault(); if (buttonLink) { onLinkClick(buttonLink, buttonLinkType, buttonNewTab); } }; const featureStyle = { display: 'flex', alignItems: 'flex-start', marginBottom: `${spacing}px`, textAlign: 'left', transition: 'all 0.5s ease', transform: animationEnabled ? (isVisible ? 'translateY(0)' : 'translateY(20px)') : 'none', opacity: animationEnabled ? (isVisible ? 1 : 0) : 1, position: 'relative', zIndex: 2 }; const iconStyle = { marginRight: '16px', color: dashColor, fontSize: `${featureIconSize}px`, fontWeight: 'bold', lineHeight: 1.2, minWidth: `${featureIconSize}px` }; const getAnimationDelay = (index) => { return animationEnabled ? `${animationDelay * index}s` : '0s'; }; const glassEffect = glassmorphism ? { backgroundColor: 'rgba(255, 255, 255, 0.1)', backdropFilter: `blur(${blurAmount}px)`, WebkitBackdropFilter: `blur(${blurAmount}px)`, borderRadius: `${borderRadius}px` } : {}; const generateBackgroundPattern = () => { return { backgroundImage: showBackgroundPattern ? `radial-gradient(circle, ${backgroundPatternColor} ${backgroundPatternSize * 0.1}px, transparent ${backgroundPatternSize * 0.1}px)` : 'none', backgroundSize: `${backgroundPatternSpacing}px ${backgroundPatternSpacing}px`, backgroundPosition: '0 0, 20px 20px', opacity: backgroundPatternOpacity, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1, pointerEvents: 'none' }; }; const generateFloatingElements = () => { if (!showFloatingElements) return null; const elements = []; for (let i = 0; i < 5; i++) { const size = Math.floor(Math.random() * 40) + 10; const top = Math.floor(Math.random() * 100); const left = Math.floor(Math.random() * 100); const animationDuration = (Math.random() * 10) + 10; const delay = Math.random() * 5; elements.push(

); } return elements; }; const buttonAnimation = showButtonAnimation ? { animation: isButtonHovered ? (buttonAnimationType === 'pulse' ? 'pulse 1.5s infinite' : 'shake 0.5s infinite') : 'none' } : {}; return (

{generateFloatingElements()}

{showGradientOverlay && (

)}

{title}

{subtitle && (

{subtitle}

)}

{price}

{packageImage && (

)}

{showCardImage && cardImage && (

)} {showDivider && (

)}

{featureIcon}

{feature1} {feature1Detail && (

{feature1Detail}

)}

{featureIcon}

{feature2} {feature2Detail && (

{feature2Detail}

)}

{featureIcon}

{feature3} {feature3Detail && (

{feature3Detail}

)}

{featureIcon}

{feature4} {feature4Detail && (

{feature4Detail}

)}

); };

Digital Products

for creatives.