SAAS Software

网站 · SaaS · 免费
内容预览

Build a fully responsive, full-viewport hero section for a PR-agency SaaS called "Convix Software" with these exact specs: Page Frame Outer wrapper: min-h-screen w-full bg-[#ededed] p-3 sm:p-4, font-family Inter Hero container (clips everything inside): relative w-full h-[calc(100vh-24px)] sm:h-[calc(100vh-32px)] overflow-hidden bg-[#d9d9d9] rounded-2xl sm:rounded-3xl Background Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260424_064411_9e9d7f84-9277-41f4-ab10-59172d89e6be.mp4 Absolutely positioned, inset-0 w-full h-full object-cover pointer-events-none Attributes: autoPlay, loop, muted, playsInline, preload="auto", disableRemotePlayback, webkit-playsinline="true", x5-playsinline="true" Poster fallback: https://images.unsplash.com/photo-1557683316-973673baf926?w=1600&q=60 Above the video: absolute inset-0 bg-white/10 overlay Foreground content wrapper: relative z-10 Fonts (/src/styles/fonts.css) Import from Google Fonts: Inter weights 400, 500, 600, 700 Instrument Serif regular + italic Navbar (floating pill, responsive with hamburger) Wrapper: flex justify-center pt-4 sm:pt-6 px-3 sm:px-4 Pill: bg-white rounded-full shadow-sm border border-neutral-200 pl-2 pr-2 py-2 w-full max-w-[760px] relative Logo (left, shrink-0): orange #ef4d23 8-petal flower SVG — 8 circles at radius 10 around center (16,16) plus center circle, all r=3.5, viewBox 32×32, rendered w-7 h-7 sm:w-8 sm:h-8 Desktop links (hidden md:flex, gap-6, 14px): "Home" (with 1.5p

……（完整源码请在站内查看）