import React, { useEffect, useRef, useState } from 'react'; import { motion, AnimatePresence, useInView } from 'framer-motion'; import { Sparkles, ArrowRight, Menu, X, Play, ShieldCheck, Check, EyeOff, Lock, Database, Ban, } from 'lucide-react'; const heroVideo = 'https://www.snapder.com/templates/media/zetage-hero.mp4'; const ACCENT = '#FFA654'; const ACCENT_DARK = '#3a1a06'; const marqueeItems = [ 'No Ads. Ever.', 'End-to-End Encrypted', 'You Own Your Data', 'Zero Tracking', 'Delete Anytime, For Real', 'Open, Auditable Core', ]; const tiers = [ { name: 'Starter', price: '$0', period: '/month', blurb: 'Everything you need to start posting privately.', features: ['Ad-free feed', 'End-to-end encrypted DMs', '1 device sync', 'Community support'], highlight: false, }, { name: 'Plus', price: '$9', period: '/month', blurb: 'For people who live on the platform.', features: ['Everything in Starter', 'Unlimited device sync', 'Priority support', 'Advanced privacy controls', 'Early access features'], highlight: true, }, { name: 'Pro', price: '$19', period: '/month', blurb: 'For creators and teams who need more.', features: ['Everything in Plus', 'Dedicated account manager', 'Custom data retention', 'Audit log exports', 'Verified badge'], highlight: false, }, ]; const fadeUp = { hidden: { opacity: 0, y: 24 }, visible: (i = 0) => ({ opacity: 1, y: 0, transition: { duration: 0.6, delay: i * 0.09, ease: [0.16, 1, 0.3, 1] }, }), }; function StarField() { const stars = useRef( Array.from({ length: 40 }).map(() => ({ x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 2 + 1, delay: Math.random() * 4, dur: Math.random() * 3 + 2.5, })) ).current; return (

{stars.map((s, i) => ( ))}

); } function GlowMesh() { const blobs = [ { color: '#FFA654', size: 580, x: ['5%', '25%', '5%'], y: ['-10%', '15%', '-10%'], dur: 26 }, { color: '#FFC198', size: 520, x: ['60%', '40%', '60%'], y: ['20%', '45%', '20%'], dur: 30 }, { color: '#FDE9D9', size: 460, x: ['30%', '55%', '30%'], y: ['55%', '30%', '55%'], dur: 24 }, { color: '#F7D3BB', size: 500, x: ['70%', '48%', '70%'], y: ['65%', '85%', '65%'], dur: 22 }, ]; return (

{blobs.map((b, i) => ( ))}

); } function Navbar() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } function Hero() { return (

Enter Aura Social media,
minus the{' '} surveillance. No ads. No data resale. No algorithm deciding who sees you. Aura is a social platform built around one idea: your feed, your data, your terms.

); } function HeroVideoDialog() { const [open, setOpen] = useState(false); const ref = useRef(null); const inView = useInView(ref, { once: true, margin: '-60px' }); return (

{open && ( setOpen(false)} > e.stopPropagation()} className="relative w-full max-w-3xl overflow-hidden rounded-2xl border border-white/10" >

)}

); } function Marquee() { const doubled = [...marqueeItems, ...marqueeItems]; return (

Privacy, verified

{doubled.map((item, i) => ( {item} ))}

); } function TierCard({ tier, index }) { return ( {tier.highlight && ( MOST POPULAR )}

{tier.name}

{tier.blurb}

{tier.price} {tier.period}

{tier.features.map((f) => (

{f}

))}

); } function PricingSection() { return (

Membership

Simple pricing. No ads to sell you on the way.

{tiers.map((t, i) => ( ))}

); } function ClosingCTA() { return (

Stop being the product.

Start your free account in under a minute. No credit card required.

); } function Footer() { return ( ); } export default function App() { return (