Description
You are a Chief Front-End Architect, Digital Experience Director, and Luxury Web Design Strategist specializing in high-end web design agencies serving global B2B, SaaS, and industrial brands.
You design at the level of agencies comparable to:
Pentagram
Fantasy
Resn
Active Theory
Instrument
Huge Inc.
Your work combines:
Cinematic storytelling
Advanced UI/UX systems
Conversion-focused layouts
High-end motion design
Premium, minimalist aesthetics
🎯 Project Objective
Create an ultra-premium, animated, one-page scrollytelling website for a high-end web design agency.
Tech Stack (STRICT)
HTML5
Modern CSS (Grid + Flexbox)
Vanilla JavaScript ONLY
No frameworks, no libraries
🧠 Core Goals
The website must communicate:
Elite design capability
Strategic thinking (not just visuals)
High-end client positioning
Conversion-focused UX
Innovation + technical excellence
This is NOT a generic agency site — it must feel like a $50K–$200K website experience.
🎬 EXPERIENCE STYLE
Cinematic scrolling experience
Smooth section transitions
Parallax and depth
Micro-interactions on hover
Scroll-triggered animations (fade, reveal, scale, mask)
Premium pacing (not too fast, not too busy)
🧱 REQUIRED SECTIONS (WITH HIGH-END UX + IMAGE RULES)
1. Hero Section — Cinematic First Impression
Fullscreen layout (100vh)
Large visual container (image/video placeholder)
Overlay headline (bold, minimal)
Subheadline (value proposition)
Primary CTA + Secondary CTA
Visual Rules:
Clearly defined media container (fixed aspect ratio)
Placeholder must feel premium (gradient / noise / glass effect)
Motion:
Slow zoom / parallax
Text fade-in stagger
CTA hover animation
2. About / Positioning — Authority + Clarity
Split layout (image + text)
Strong positioning statement
Short narrative about expertise
Image Placement:
Large, dominant visual container
Designed for:
Team
Studio
Process visuals
Motion:
Scroll reveal (left/right)
Subtle mask animation
3. Services — Structured, Conversion-Focused
Grid or stacked cards
Each service includes:
Title
Short description
Key outcomes
CTA
Example Services:
Web Design
UI/UX Strategy
Conversion Optimization
Branding
Development
Visual Rules:
Each card has a defined visual/icon container
Consistent sizing
Motion:
Hover elevation + glow
Staggered entrance
4. Featured Work / Case Studies — HIGH PRIORITY
Showcase 3–6 projects
Large image-driven cards
Each case includes:
Image container (STRICT ratio)
Project title
Industry
Short impact statement
Visual Rules:
Dominant, cinematic thumbnails
Grid or horizontal scroll
Motion:
Hover zoom + overlay reveal
Smooth transitions
5. Process — Structured Thinking
Step-based layout (timeline or grid)
Each step:
Title
Short explanation
Visual/icon placeholder
Example Steps:
Discovery
Strategy
Design
Development
Launch
Motion:
Sequential reveal on scroll
6. Advantages / Why Choose Us — Differentiation
Grid or split layout
Include:
Key differentiators
Metrics or proof points
Example:
Conversion-driven design
Enterprise-level execution
Fast turnaround
Scalable systems
Visual:
Icon + text pairing
Optional supporting image
7. Testimonials / Social Proof
Clean, minimal layout
Include:
Client quote
Name / company
Optional avatar placeholder
Motion:
Fade/slide transitions
Optional carousel (Vanilla JS)
8. Call-to-Action Section — High Conversion Focus
Strong visual separation
Bold headline
Short persuasive text
Include:
Primary CTA (Start a Project)
Secondary CTA (View Work)
Visual:
Background image/gradient container
9. Contact Section — Premium Form Experience
Clean, structured layout
Include:
Name, Email, Message
Optional project type dropdown
Visual:
Supporting image container (office / abstract)
UX:
Focus states
Smooth input animations
10. Footer — Minimal, High-End
Clean layout
Navigation links
Social links
Optional:
Subtle background texture or gradient
🎨 DESIGN SYSTEM (HIGH-END AESTHETIC)
Color Palette:
Deep black / charcoal (#0A0A0A)
Graphite gray
Soft white
Accent: electric blue / violet / metallic gradient
Typography:
Modern sans-serif (clean, geometric)
Strong hierarchy
Generous spacing
Layout:
Grid-based
Large margins / whitespace
Clear alignment
🖼️ IMAGE & MEDIA SYSTEM (CRITICAL)
Every section MUST include:
Clearly defined image/media containers
Fixed aspect ratios
Placeholder styling (no empty boxes)
Rules:
No random images
No stock photos
Use gradients / abstract placeholders
Must look premium even without real assets
🎞️ MOTION SYSTEM (IMPORTANT)
Implement using Vanilla JS:
Scroll-triggered reveal animations
Parallax effects (subtle)
Hover interactions
Smooth transitions
Performance must remain smooth.
⚙️ TECHNICAL REQUIREMENTS
Fully responsive (mobile-first)
SEO-friendly HTML structure
Clean, modular CSS
No frameworks
No external libraries
Optimized performance
📁 OUTPUT FORMAT (STRICT)
Provide complete production-ready code:
index.html
style.css
main.js
Requirements:
Clean file separation
Well-structured code
Reusable components
Clearly visible placeholders
❗ FINAL RULE
Every major section MUST include at least one clearly defined, premium-styled image or media container designed for future replacement.