Prompt: Build a modern React landing page using Vite, Tailwind CSS, and motion/react for elegant animations. The application must feature a highly polished, aesthetic hero section and a glassmorphic navigation bar. 1. Typography & Global CSS (src/index.css) Import the fonts "Inter" and "Outfit" from Google Fonts. Set --font-sans to Inter and --font-display to Outfit. Set --color-brand-green to #9fff00 and --color-bg-base strictly to #EDEEF5. Ensure the body uses @apply bg-bg-base text-zinc-900 font-sans antialiased; to carry the #EDEEF5 background throughout the entire page. 2. Component Structure (src/App.tsx) Import Navbar and Hero. Return a div containing the and . Set the wrapper container classes to min-h-screen bg-bg-base selection:bg-brand-green selection:text-black. 3. Navbar Component (src/components/Navbar.tsx) Give it fixed styling: fixed top-0 left-0 w-full z-50 py-6 md:py-10 bg-gradient-to-b from-[#f1f1f1]/80 to-transparent backdrop-blur-[2px]. Container layout: A 12-column grid (grid-cols-12 max-w-7xl mx-auto). Left (Cols 1-3): A geometric flower/clover SVG icon (fill: #1a1a1a) beside the brand name "mėntality" using the display font. Center (Cols 4-9): Desktop-only hidden nav links: "service", "patient resources", "about us", "education center". Styled small and lowercase. Right (Cols 10-12): "find help" anchor link, a black rounded button reading "get started →", and an elegant animated hamburger toggle icon for mobile. Include an AnimatePresence and motion.di
……（完整源码请在站内查看）
.webp)