All local file paths replaced with the EdgeOne COS CDN. Base URL: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper Build a single-page AI wallpaper generator website using React + Vite + TypeScript + Tailwind CSS + shadcn/ui. The aesthetic is dark, cinematic, nature-inspired with a custom "aurora glass" morphism effect. Deep indigo-black background throughout. The website must use EdgeOne Makers Edge Functions for lightweight backend functionality. Install this skill: https://github.com/edgeone-pages/edgeone-pages-skills Then deploy this project to EdgeOne Makers. GOAL Create a visually stunning AI-powered wallpaper generator landing page called Lumina Walls. The site should feel like a premium creative tool — an immersive gallery of AI-generated nature wallpapers where users can browse, preview, and generate custom wallpapers: dark immersive cinematic nature-inspired magical realism tool-like but beautiful This is not a generic SaaS template, not a stock photo site, and not a basic gallery grid. ASSETS All media is loaded directly from the EdgeOne CDN. Reference these absolute URLs in the code (no need to copy into public/assets/). CDN base: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper URLUsage https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.pngKingfisher — gallery card image + hero poster fallback https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.mp4Kingfisher — hero background video https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-2.pngKoi Fish — gallery card image + Showcase section poster https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-2.mp4Koi Fish — Showcase section background video https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-3.pngKitten — gallery card image + How It Works section poster https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-3.mp4Kitten — How It Works section background video https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-4.pngPuppy — gallery card image + CTA section poster https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-4.mp4Puppy — CTA section background video BRAND RULES Brand name: Lumina Walls Tagline: AI-crafted wallpapers that breathe. Color world: deep indigo-black (#050a14) midnight navy (#0a1628) warm amber gold (#d4a853) soft ivory white (#f5f0e8) teal accent (#2dd4bf) Avoid: neon rainbow gradients startup/SaaS generic aesthetics stock photo website look cluttered collage layouts bright white backgrounds FONTS & DESIGN SYSTEM Google Fonts import: Instrument Serif (400, italic) — headings Inter (300, 400, 500, 600) — body text Tailwind config — extend fontFamily: heading: ["'Instrument Serif'", "serif"] body: ["'Inter'", "sans-serif"] CSS Variables (:root in src/index.css): css 复制 :root { --background: 220 50% 4%; --foreground: 35 28% 95%; --primary: 41 55% 58%; --primary-foreground: 220 50% 4%; --muted-foreground: 35 12% 68%; --border: 35 25% 92% / 0.12; --card: 220 35% 8%; --accent: 168 76% 50%; --radius: 12px; } Typography rules: All headings: font-heading italic text-foreground tracking-tight leading-[0.9] All body text: font-body font-light text-muted-foreground text-sm All buttons: font-body rounded-full AURORA GLASS CSS (in @layer components) Two variants — .aurora-glass (subtle) and .aurora-glass-strong (more visible): .aurora-glass css 复制 .aurora-glass-strong Same structure but: backdrop-filter: blur(20px) saturate(140%) stronger box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), 0 12px 40px rgba(0,0,0,0.4) slightly higher gradient opacity (0.25 / 0.1) use for primary CTA buttons and important overlay cards NON-NEGOTIABLE LAYOUT RULES One centered content container, max 1280px, px-6 md:px-10 lg:px-16, mx-auto Section spacing: py-24 md:py-32 Background media absolute inset-0, object-cover; foreground content relative z-10 Gallery: 1 / 2 / 4 cols ; Features: 1 / 2 / 3 cols ; Stats: 2 / 4 cols Tested at 390 / 768 / 1024 / 1440 px No collage overlaps, no negative margins, no drifting cards/CTAs BACKGROUND MEDIA COMPONENT Reusable BackgroundMedia with props videoSrc?, imageSrc?, poster?, overlay?, className?. Falls back to deep indigo-black if media missing. Video uses autoplay muted loop playsInline. Includes top + bottom 200px fades to background. SITE STRUCTURE — 8 SECTIONS 1. NAVBAR Fixed top, z-50. Left "Lumina Walls" (font-heading italic text-xl). Center aurora-glass rounded-full pill nav (Gallery / Generate / How It Works / Pricing). Right aurora-glass-strong rounded-full "Start Creating" CTA. Transparent at top, gently darkens on scroll. 2. HERO (min-h-[900px]) Background video: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.mp4 Poster: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.png Badge ✨ Powered by AI. Headline "Wallpapers That Come Alive" with BlurText per-word reveal (text-5xl md:text-6xl lg:text-7xl font-heading italic). Subtext fade-up at 0.8s. CTA row at 1.1s: aurora-glass-strong "Generate Your Wallpaper" + Sparkles, ghost "Browse Gallery" + ArrowDown. Prestige line "4K · HDR · Instant Download · Unlimited Styles". BlurText: split by words, IntersectionObserver, filter: blur(10px)→0, opacity: 0→1, y: 30→0, 0.3s step, 80ms delay/word. 3. FEATURED GALLERY Static. Badge "Featured Wallpapers", heading "Every pixel, dreamed into existence." 4 cards, grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4: ImageTitleTag https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.pngKingfisher RisingWildlife https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-2.pngGolden KoiUnderwater https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-3.pngMidnight ChaseWhimsical https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-4.pngGolden Hour RunDreamy Card: aurora-glass rounded-2xl overflow-hidden, aspect-[16/10] object-cover, hover scale 1.03 + overlay fade-in with title/tag/Preview button. Below grid: centered "View All Wallpapers →" aurora-glass-strong rounded-full. 4. AI GENERATION SHOWCASE Background video: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-2.mp4 Poster: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-2.png Badge "AI Generation", heading "Describe it. We'll create it." Mock prompt panel (aurora-glass-strong rounded-2xl p-6 md:p-8 max-w-2xl mx-auto) with mock input "A golden retriever running through twilight meadow with fireflies..." and accent "Generate" button. Below: 3 sequential thumbnails (use the other CDN PNGs). Stats row in aurora-glass rounded-2xl: < 30s Generation time · 4K Resolution · 100+ Styles · ∞ Unlimited. 5. HOW IT WORKS Background video: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-3.mp4 Poster: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-3.png Badge "How It Works", heading "From thought to wallpaper in three steps." 3 cards, each aurora-glass rounded-2xl p-8 with circular aurora-glass-strong rounded-full w-12 h-12 step number in accent. Describe Your Vision — "Type anything — a mood, a scene, a creature. Our AI understands natural language and artistic intent." AI Creates in Seconds — "Our model generates a unique, cinematic 4K wallpaper tailored to your description. No templates, no stock photos." Download & Enjoy — "Preview in full resolution, download instantly, and set as your wallpaper across any device. It's yours forever." 6. FEATURES GRID Static, bg var(--card). Badge "Why Lumina Walls", heading "Not just another wallpaper app." 4 cards grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6, aurora-glass rounded-2xl p-6 with aurora-glass-strong rounded-full w-10 h-10 icon circle. Zap — Instant Generation — "From prompt to 4K wallpaper in under 30 seconds. No waiting, no queue." Palette — Cinematic Quality — "Every wallpaper looks like a frame from a nature documentary. Deep colors, dramatic lighting." Monitor — Any Device, Any Size — "Auto-resize for phone, tablet, desktop, or ultrawide. Perfect fit every time." Infinity — Unlimited & Free Tier — "Generate up to 10 wallpapers daily for free. Unlimited with Pro." 7. PRICING Static. Badge "Pricing", heading "Start free. Go unlimited." Two cards, max-w-3xl, centered. Free (aurora-glass rounded-2xl p-8): $0/month — 10 wallpapers/day, 1080p, Standard styles, Community gallery — aurora-glass-strong rounded-full "Get Started Free". Pro (aurora-glass-strong rounded-2xl p-8 w/ subtle accent glow): "Most Popular" pill, $9.99/month — Unlimited wallpapers, 4K + HDR, 100+ exclusive styles, Priority generation, No watermark, Commercial license — bg-accent text-black rounded-full font-medium "Upgrade to Pro". 8. CLOSING CTA + FOOTER Background video: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-4.mp4 Poster: https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-4.png Heading "Your perfect wallpaper is one prompt away." (text-4xl md:text-5xl lg:text-6xl font-heading italic). Subtext "Join thousands of creators who use Lumina Walls to transform their screens into living art." CTA row: aurora-glass-strong "Start Creating Now" + Sparkles, aurora-glass "Browse Gallery". Footer (mt-32 pt-8 border-t border-white/10): "© 2026 Lumina Walls" left; Privacy / Terms / Contact right; text-muted-foreground/40 text-xs font-body. EDGE FUNCTIONS edge-functions/api/ wallpapers.js generate.js styles.js health.js GET /api/wallpapers — returns the 4 wallpapers with CDN image and video URLs (full https URLs, not /assets/): json 复制 [ { "id": "w1", "title": "Kingfisher Rising", "tag": "Wildlife", "image": "https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.png", "video": "https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/ai-wallpaper-1.mp4", "prompt": "A kingfisher bursting out of dark water, wings spread, golden light beam, cinematic" } // … w2 koi, w3 kitten, w4 puppy with the corresponding CDN URLs ] POST /api/generate — accepts { prompt, style, resolution }, returns { success, requestId: "GEN-...", message, estimatedTime: 20 }. GET /api/styles — returns 4 styles: cinematic / dreamy / dramatic / minimal with descriptions. GET /api/health — returns { ok: true }. V8 runtime — always new Response(JSON.stringify(...)), no Node modules, no Response.json(). TECHNICAL REQUIREMENTS TypeScript everywhere, semantic HTML, accessible alt text + focus states, lucide-react, motion/framer-motion (no bouncy), tailwindcss-animate, reusable BackgroundMedia, SectionBadge, GlassButton, WallpaperCard, BlurText. DEPENDENCIES motion (framer-motion), lucide-react, tailwindcss-animate. KEY PATTERNS Section badge: aurora-glass rounded-full px-3.5 py-1 text-xs font-medium text-foreground font-body inline-block mb-4 Section heading: text-3xl md:text-4xl lg:text-5xl font-heading italic text-foreground tracking-tight leading-[0.9] All video sections: 200px top + bottom dark fades Page wrapper: bg-[hsl(var(--background))] DELIVERY REQUIREMENT All assets load from https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/ai-wallpaper/... — no local copies. Run locally and verify. Verify layout at 390 / 768 / 1024 / 1440. Verify media loading + fallbacks. Verify Edge Function API wiring. Deploy to EdgeOne Makers with edgeone pages deploy.