motionsites中文站 / Buzzentic Agency
Buzzentic Agency
aadmin2026-09-22 发布Site模板0 阅读

Buzzentic Agency

类型:Site模板 · 分类:Agency · 源码:会员可见

Buzzentic Agency
[hidecontent type="vip1"]
Project Requirements: Build a high-impact, full-screen React hero section using Tailwind CSS v4 and custom typography.



1. Background & Layout:



Full-Screen Video: Implement a background video that covers the entire viewport (object-cover).



Video Source: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260306_074215_04640ca7-042c-45d6-bb56-58b1e8a42489.mp4



Video Settings: Auto-play, loop, muted, and playsInline with no color overlays or filters.



Content Spacing: The main content block should have 250px of bottom padding to create breathing room above the fold.



2. Typography & Colors:



Primary Font: "Barlow" (sans-serif) for general UI and body text.



Accent Font: "Instrument Serif" (italic) for poetic emphasis.



Color Palette: Primary text is pure white (#FFFFFF) or white at 75% opacity. CTA buttons and badges use a neutral off-white (#f8f8f8).



3. Specific UI Elements:



Transparent Navigation: A floating navbar with no background fill and no border strokes. All navigation links and the brand logo must be white.



Featured Badge: A "Featured in Fortune" badge centered at the top. It features a "liquid glass" effect using a white/10 background with backdrop-blur-sm on the outer ring and white/90 with backdrop-blur-md on the inner pill.



Dynamic Headline:



Line 1: "Agency that makes your" (Barlow, font-light, text-white, 64px).



Line 2: "videos & reels viral" (Instrument Serif, italic, text-white, 64px).



Sub-headline: A max-width paragraph in Barlow font, white at 75% opacity, explaining the agency's value proposition.



Button Styling: Rectangular buttons with a very sharp 2px border radius, #f8f8f8 background, and #171717 medium Barlow text.



Corner Accents: Four 7px x 7px solid white squares positioned exactly at the four corners of the central hero content container.



4. Interactions & Animations:



All buttons and interactive badges should have smooth transition-colors on hover.



Buttons should shift from #f8f8f8 to pure white on hover.



Navigation items should have a subtle white/10 background highlight on hover.
[/hidecontent]
← 返回首页