import React, { useState, useEffect, useRef } from 'react'; import { Menu, X, Shield, Check, DollarSign, ChevronDown, ChevronUp, Lock, Eye, Zap } from 'lucide-react'; const CLOUDFLARE_ORANGE = '#F6821F'; // --- Grainy Overlay SVG --- const GrainyOverlay = ({ className = "", opacity = 0.05 }) => ( ); const App = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); // Handle scroll for navbar styling useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const scrollToSection = (id) => { const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } setIsMenuOpen(false); }; return (
{/* Font Imports & Global Styles */} {/* Navigation */} {/* Section 1: Splash / Hero */} {/* Section 2: Concept Animation & Body */} {/* Section 3: FAQ / How to Start */} {/* Section 4: Get Started Cards */} {/* Footer */}
); }; /* --- SUB-COMPONENTS --- */ const HeroSection = () => { const videoRef = useRef(null); const videoSrc = "https://customer-ahbzov10ghaunpr7.cloudflarestream.com/0cc92fe029afd39bae7c19b995105e41/manifest/video.m3u8"; const [showStatic, setShowStatic] = useState(false); const [displayedTitle, setDisplayedTitle] = useState(""); // Handle HLS Video Loading useEffect(() => { const video = videoRef.current; if (!video) return; const playVideo = () => { video.play().catch(err => { console.warn("Autoplay prevented by browser interaction policies", err); }); }; // 1. Check if browser supports HLS natively (Safari) if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoSrc; playVideo(); } else { // 2. Otherwise try to load hls.js const loadHls = async () => { if (!window.Hls) { // Dynamic script injection for hls.js const script = document.createElement('script'); script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest"; script.async = true; document.head.appendChild(script); await new Promise((resolve, reject) => { script.onload = resolve; script.onerror = reject; }); } if (window.Hls && window.Hls.isSupported()) { const hls = new window.Hls(); hls.loadSource(videoSrc); hls.attachMedia(video); hls.on(window.Hls.Events.MANIFEST_PARSED, () => { playVideo(); }); } }; loadHls().catch(err => console.error("Failed to load HLS library", err)); } }, [videoSrc]); // Typewriter effect loop useEffect(() => { const titleText = "It’s not too late to\nprotect your content"; let charIndex = 0; let timeoutId; const type = () => { if (charIndex <= titleText.length) { setDisplayedTitle(titleText.slice(0, charIndex)); charIndex++; // Speed of typing timeoutId = setTimeout(type, 80); } else { // Wait 3 seconds, then reset timeoutId = setTimeout(() => { charIndex = 0; setDisplayedTitle(""); type(); }, 3000); } }; type(); return () => clearTimeout(timeoutId); }, []); // Loop Effect: Triggers the static overlay every 4 seconds to give the background life useEffect(() => { const timer = setInterval(() => { setShowStatic(true); setTimeout(() => { setShowStatic(false); }, 300); // Duration of the static burst }, 4000); return () => clearInterval(timer); }, []); return (
{/* Video Background */}
{/* TV Static/Fussy Effect (Loops) */}
{/* Orange Hue Overlay & Grain */}
{/* Slight darkener for text contrast */} {/* Content */}

{/* Text is white-space-pre-wrap to respect newlines */} {displayedTitle} {/* Blinking cursor is a separate element that flows inline */}

); }; const ConceptSection = () => { const [isCollective, setIsCollective] = useState(false); useEffect(() => { const interval = setInterval(() => { setIsCollective(prev => !prev); }, 3000); return () => clearInterval(interval); }, []); return (
{/* Animated Header */}

It’s {/* Animated Text Container - Uses grid to stack text on top of an invisible spacer */} {/* Invisible spacer sets the width/height based on the longest text to prevent layout shifts */} not Artificial {/* Phase 1: not Artificial */} not Artificial {/* Phase 2: Collective */} Collective Intelligence

{/* Body Text */}

Imagine all the photos, articles, videos, and code you and millions of others have ever created. Your unique, high-quality work isn't just viewed by people—it's being analyzed and absorbed by modern AI systems.

Essentially, your content is the fuel for Generative AI. These systems look at the vast collection of human creativity to learn the fundamental rules of style, language, and structure, allowing the AI to then create its own intelligent content and improve the collective knowledge base.

Your original content fundamentally enables modern AI by serving as the massive training data set from which systems learn human creativity and style. The core issue is that your work is being scraped and used commercially to build these AI models without granting you credit, attribution, or direct payment, allowing the AI to generate competing content that bypasses your platform; breaking your traditional monetization stream.

); }; const ProtectionSection = () => { const faqData = [ { title: "Tell the good bots what not to see", tech: "robots.txt", what: "Have a small, hidden file on your website that politely tells major search engines (like Google) not to show certain pages in their search results.", result: "Prevents pages you don't want public (like your admin area or duplicate content) from being indexed, but won't stop bad guys." }, { title: "Set a speed limit for visitors", tech: "Rate Limiting", what: "Program your website to notice when one computer asks for content too quickly, too many times in a row.", result: "If a computer tries to download your whole site in a minute, your site will slow them down or temporarily block them, protecting your bandwidth." }, { title: "Block known troublemakers", tech: "IP and User-Agent Blocking", what: "If you see a specific computer address (IP) or software signature (User-Agent) that keeps stealing content, use a security tool to block them completely.", result: "Stops known scrapers and their tools from ever loading your pages again." }, { title: "Ask a simple human test question", tech: "CAPTCHAs", what: "Put up a simple challenge (like \"click all the traffic lights\" or \"type the wavy letters\") before someone can access the content.", result: "Stops basic automated programs, because they can't see or solve the visual puzzle." }, { title: "Require a \"secret handshake\"", tech: "JavaScript and API Keys", what: "For special, programmatic access to your content, only allow it if the user provides a unique, authorized digital code (the API Key). You can also add hidden code that only a standard web browser can execute.", result: "Ensures only approved users or apps can access your data, and simple scrapers that don't run website code fail to load the content." }, { title: "Make the stolen content useless", tech: "Content Obfuscation", what: "Add invisible digital watermarks or unique tracking codes to your text and images.", result: "If someone steals your content and puts it on their site, you can prove it's yours and trace exactly where they got it." }, { title: "Watch for suspicious activity", tech: "Monitoring and Analysis", what: "Regularly look at your website traffic reports to spot strange behavior—like one user visiting 5,000 pages in an hour or accessing pages in a weird order.", result: "Allows you to catch new scrapers before they cause major damage and block them quickly." } ]; return (

How to start protecting your content now

{faqData.map((item, index) => ( ))}
); }; const AccordionItem = ({ item, isLast }) => { const [isOpen, setIsOpen] = useState(false); return (
What to do:

{item.what}

Result:

{item.result}

); }; const SolutionsSection = () => { const [activeCard, setActiveCard] = useState(null); const cards = [ { id: 1, icon: , title: "Block", desc: "You can easily block specific AI crawlers (like GPTBot) entirely. Cloudflare's security tools identify the bot, and your website sends back a \"Forbidden\" signal, ensuring your content is protected from being scraped for unauthorized AI training." }, { id: 2, icon: , title: "Allow", desc: "You maintain full control and can choose to allow specific, trusted AI agents free access. Cloudflare tracks this activity, showing you exactly which pages the allowed crawlers visit most often, giving you visibility into what content they value." }, { id: 3, icon: , title: "Charge", subtitle: "(Pay Per Crawl)", desc: "For your most valuable content, you can choose to charge the AI crawler a fee for every page they access (using the Pay Per Crawl feature). Cloudflare handles the process by signaling a \"$402 Payment Required\" status, turning unauthorized scraping into a new, trackable revenue stream." } ]; return (

Get started with Cloudflare

{cards.map((card) => { const isActive = activeCard === card.id; return (
setActiveCard(isActive ? null : card.id)} className={` relative cursor-pointer rounded-2xl p-8 transition-all duration-300 border-2 ${isActive ? 'bg-white border-[#F6821F] shadow-xl scale-105 z-10' : 'bg-white border-transparent hover:border-orange-200 shadow-lg scale-100'} `} >
{card.icon}

{card.title}

{card.subtitle && ( {card.subtitle} )} {/* Divider */}
{/* Expandable Text */}

{isActive ? card.desc : "Click to learn more..."}

{!isActive && (
Tap to expand
)}
); })}

Ready to take control of your digital assets?

Reach out to Cloudflare
); }; export default App;