提示词
使用 React 和 Tailwind CSS 为 Web 应用创建一个响应式的全屏 hero section。
设计系统与资源：
字体：加载并使用 'Manrope'（用于 UI/Nav）、'Cabin'（用于按钮/标签）、'Instrument Serif'（用于标题）和 'Inter'（用于正文）。
主色：紫色 #7b39fc
次要色/深色：深紫色 #2b2344
背景：使用全屏、绝对定位的 HTML5 video background。视频应 autoplay、loop、mute 并 play inline。确保它覆盖整个视口（min-h-screen、object-cover），且不添加 overlay（保持不透明）。
视频 URL：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4
1. Navbar Component（顶部 Overlay）
布局：全宽、透明背景、z-20 relative positioning。
内边距：px-6（mobile）到 px-[120px]（desktop），py-[16px]。
Logo（左侧）：使用以下指定的 SVG path，并填充白色：
Path：M1.04356 6.35771L13.6437 0.666504...（Future logo shape）。
Navigation Links（中间偏左，仅 Desktop）：
项目："Home"、"Services"（带 ChevronDown icon）、"Reviews"、"Contact us"。
样式：Manrope 字体、Medium weight、14px size、White。
Hover effect：opacity-80。
Action Buttons（右侧，仅 Desktop）：
Sign In：White background、细灰色边框（#d4d4d4）、rounded 8px、Black text（#171717）、Manrope Semibold 14px。
Get Started：Primary Purple background（#7b39fc）、rounded 8px、White text（#fafafa）、Manrope Semibold 14px、轻微阴影。
Mobile：隐藏链接/按钮，并显示一个 White Menu icon（hamburger），点击后切换显示全屏 black overlay menu。
2. Hero Content（居中）
Container：垂直和水平居中（flex-col items-center text-center），z-10 relative，顶部外边距 mt-32。
Tagline Pill：
样式：Glassmorphism effect（bg-[rgba(85,80,110,0.4)]、backdrop-blur、border rgba(164,132,215,0.5)）。
形状：Rounded 10px，Height 38px。
内容：一个小型内部 badge（#7b39fc bg、rounded 6px），显示 "New"，后接文字 "Say Hello to Datacore v3.2"。
字体：Cabin、Medium、14px、White。
Headline：
文本："Book your perfect stay instantly and hassle-free"。
排版：Instrument Serif 字体、White。
字号：5xl（mobile）到 96px（desktop）。
样式：Line-height 1.1。单词 "and" 应使用 italicized，并设置特定间距。
Subtext：
文本："Discover handpicked hotels, resorts, and stays across your favorite destinations. Enjoy exclusive deals, fast booking, and 24/7 support."
排版：Inter 字体、Normal weight、18px。
颜色：White，70% opacity（text-white/70）。
宽度：Max width 662px。
Call to Action Buttons（Row）：
Button 1："Book a Free Demo" — Primary Purple（#7b39fc）、rounded 10px、Cabin Medium 16px、White。
Button 2："Get Started Now" — Dark Purple（#2b2344）、rounded 10px、Cabin Medium 16px、Off-white（#f6f7f9）。
Hover effects：hover 时背景略微变亮。原文提示词（English）
Create a responsive, full-screen hero section for a web application using React and Tailwind CSS.
Design System & Assets:
Fonts: Load and use 'Manrope' (for UI/Nav), 'Cabin' (for buttons/tags), 'Instrument Serif' (for headlines), and 'Inter' (for body text).
Primary Color: Purple #7b39fc
Secondary/Dark Color: Dark Purple #2b2344
Background: Use a full-screen, absolute-positioned HTML5 video background. The video should autoplay, loop, mute, and play inline. Ensure it covers the viewport (min-h-screen, object-cover) without an overlay (keep it opaque).
Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4
1. Navbar Component (Top Overlay)
Layout: Full width, transparent background, z-20 relative positioning.
Padding: px-6 (mobile) to px-[120px] (desktop), py-[16px].
Logo (Left): Use this specific SVG path filled with white:
Path: M1.04356 6.35771L13.6437 0.666504... (Future logo shape).
Navigation Links (Center-Left, Desktop Only):
Items: "Home", "Services" (with a ChevronDown icon), "Reviews", "Contact us".
Style: Manrope font, Medium weight, 14px size, White.
Hover effect: opacity-80.
Action Buttons (Right, Desktop Only):
Sign In: White background, thin gray border (#d4d4d4), rounded 8px, Black text (#171717), Manrope Semibold 14px.
Get Started: Primary Purple background (#7b39fc), rounded 8px, White text (#fafafa), Manrope Semibold 14px, subtle shadow.
Mobile: Hide links/buttons and show a White Menu icon (hamburger) that toggles a full-screen black overlay menu.
2. Hero Content (Centered)
Container: Centered vertically and horizontally (flex-col items-center text-center), z-10 relative, top margin mt-32.
Tagline Pill:
Style: Glassmorphism effect (bg-[rgba(85,80,110,0.4)], backdrop-blur, border rgba(164,132,215,0.5)).
Shape: Rounded 10px, Height 38px.
Content: A small inner badge (#7b39fc bg, rounded 6px) saying "New" followed by text "Say Hello to Datacore v3.2".
Font: Cabin, Medium, 14px, White.
Headline:
Text: "Book your perfect stay instantly and hassle-free".
Typography: Instrument Serif font, White.
Size: 5xl (mobile) to 96px (desktop).
Styling: Line-height 1.1. The word "and" should be italicized with specific spacing.
Subtext:
Text: "Discover handpicked hotels, resorts, and stays across your favorite destinations. Enjoy exclusive deals, fast booking, and 24/7 support."
Typography: Inter font, Normal weight, 18px.
Color: White with 70% opacity (text-white/70).
Width: Max width 662px.
Call to Action Buttons (Row):
Button 1: "Book a Free Demo" — Primary Purple (#7b39fc), rounded 10px, Cabin Medium 16px, White.
Button 2: "Get Started Now" — Dark Purple (#2b2344), rounded 10px, Cabin Medium 16px, Off-white (#f6f7f9).
Hover effects: Slightly lighten backgrounds on hover.
