Create a React + Vite + TypeScript + Tailwind CSS landing page for a creative studio called "Prisma". The page has 3 sections: Hero, About, and Features. Use framer-motion for animations and lucide-react for icons. The design is dark, moody, and cinematic with a warm cream color palette. FONTS Load two Google Fonts in index.html: Almarai (weights: 300, 400, 700, 800) -- used as the global default font Instrument Serif (italic only) -- used for italic accent text in the About section In index.css, set the global font family: * { font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; } In tailwind.config.js, extend: colors.primary: #DEDBC8 (warm cream, used for all primary text and accents) fontFamily.serif: ['"Instrument Serif"', 'serif'] COLOR SYSTEM Background: black (#000000) globally, #101010 for the About card, #212121 for Features cards Primary text color: #E1E0CC (applied via inline style, slightly different from Tailwind primary) Tailwind primary: #DEDBC8 (used for utility classes like text-primary, text-primary/70) Gray text: text-gray-400, text-gray-500 Navbar link color: rgba(225, 224, 204, 0.8) with hover: #E1E0CC CUSTOM CSS UTILITIES (index.css) Two SVG noise texture utilities: .noise-overlay: fractal noise (baseFrequency: 0.85, numOctaves: 3) used as overlay on hero video .bg-noise: fractal noise (baseFrequency: 0.9, numOctaves: 4) used as subtle background in Features section Both use inline
……（完整源码请在站内查看）
