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}

)}

); };

Make your footage look cinematic in seconds, not hours.

What your footage will look like after using my Powergrades.

This is how easy to use the Powergrades are.

What customers say.