Full Prompt;
“Build a high-end, modern Web3 development agency website with a "dark mode" hero section nested within a light-themed page.
1. Layout & Theme:
The main page background is pure white (bg-white) with a small outer padding (p-2 md:p-3).
The hero section is a large, dark container with highly rounded corners (rounded-3xl), a deep black background, and a subtle shadow. It should take up the full viewport height (min-h-[calc(100vh-1rem)]).
2. Navigation Bar:
Positioned at the top of the hero section with a transparent background.
Logo: The text "NEXUS" in a bold, display font with tight tracking.
Search Bar (Desktop only): A pill-shaped, semi-transparent input field with a search icon and the placeholder "Search protocols."
Links (Desktop only): "Home," "Protocols," and "Audits" in a clean, white sans-serif font.
CTA Button: A white rounded-full button labeled "Get Started" with black text.
3. Hero Section Content:
Background: A full-bleed background video (
res.cloudinary.com/dpqitxr6x…) with 60% opacity and a slight zoom/offset for a cinematic feel.
Tagline: A small, pill-shaped badge at the top saying "ENTERPRISE WEB3 DEVELOPMENT" in all caps with a subtle border.
Headline: A massive, bold headline using a display font: "WE BUILD DAPPS FOR" (normal weight) followed by a line break and "YOUR WEB3 FUTURE." (bold weight).
Subcopy: A centered paragraph: "Stop wrestling with complex blockchain architecture. We engineer secure smart contracts and scalable Web3 experiences so you can focus on growing your community."
Primary Button: A large white pill-shaped button labeled "Launch Your Protocol" with an arrow icon.
Secondary Button: A transparent pill-shaped button with a thin white border labeled "View Our Audits."
Animations: Use Framer Motion for smooth "fade-in and slide-up" entrance animations for all text and buttons.
4. Mobile Optimization:
Ensure the hero section uses flex-col and justify-center to keep content centered.
On mobile, stack the action buttons vertically and make them full-width.
Adjust font sizes (e.g., text-4xl for the headline) to ensure no text overlaps or gets cut off.
5. Trust Section (Logos):
Place a scrolling logo carousel section directly below the dark hero container on the white background.
Heading: "Trusted by leading Web3 protocols" in a bold, black font.
Logos: Include an auto-scrolling row of grayscale logos for Astro, Figma, Next.js, React, Shadcn UI, Supabase, Tailwind, and Vercel. Use a soft gradient fade on the left and right edges of the carousel.”