Prompt for Social Media Marketing Agency Landing Page

Create a premium, creative, modern Social Media Agency landing page with an award-level visual experience, immersive UI/UX, smooth scrolling, interactive storytelling, and purposeful motion.
The website should feel like a high-end creative social media agency, not a generic SaaS or corporate template.

Hero Section
Create a bold, visually striking hero that immediately communicates the agency's creative and social media expertise.
Use a GSAP-powered hero with smooth entrance animations, text reveals, image/video movement, and subtle interactive effects.
Include a strong oversized headline, supporting copy, and primary/secondary CTAs.
Use an engaging visual composition such as layered campaign creatives, social media content, floating cards, or an interactive visual system.
Make the hero feel dynamic and premium without overwhelming the content.

Overall Design
Build a distinctive visual identity around a modern creative social media agency.
Use:
Bold editorial typography and generous whitespace
Modern asymmetric layouts
Strong visual hierarchy
Creative compositions and oversized typography
Subtle gradients, glow, blur, depth, and refined borders
Premium dark or sophisticated mixed-color visual system
High-quality campaign imagery and social-media-inspired visual elements
Consistent spacing and polished micro-interactions

Required Sections
Create the Hero, About, and other common sections based on your own creative direction.
However, the following sections are mandatory and must be included:
Hero: GSAP-powered animated hero with strong visual storytelling
About / Introduction: Establish the agency, its approach, and creative philosophy
Services: Social media strategy, content creation, branding, paid campaigns, influencer marketing, etc.
Case Studies: Showcase multiple campaigns/projects using large visual cards, image/video previews, hover interactions, and project results or highlights
Creative Showcase / Work: An interactive presentation of social media creatives, campaigns, reels, or visual content
Process / Approach: Present the agency workflow in an engaging, animated format
Testimonials / Clients: Premium editorial-style presentation of client feedback or trusted brands
Pricing Table: A polished and easy-to-understand pricing section with multiple plans/packages, feature comparisons, and clear CTAs
Contact: A visually engaging contact form with fields such as name, email, company, project type, budget, and message
Final CTA: Strong closing statement encouraging visitors to start a project
Footer: Clean premium navigation, contact details, social links, and supporting information
You may add additional sections where they improve the storytelling and overall experience.

WebGL / Interactive Experience
Include WebGL in one dedicated section of the website.
Use Three.js/WebGL or GLSL to create an impressive interactive visual experience, such as:
An interactive 3D object
Fluid/shader-based visual
Particle system
Interactive campaign visual
3D typography or abstract environment
The WebGL section should feel integrated into the story of the website rather than looking like a separate technical demo.

Motion & Interaction
Use GSAP + ScrollTrigger and smooth scrolling to create a fluid, cinematic experience.
Include where appropriate:
Scroll-triggered reveals
Text splitting and staggered animations
Parallax movement
Horizontal scrolling
Image and video scaling
Magnetic buttons
Interactive hover states
Cursor-based interactions
Smooth page transitions
Animated gradients
Micro-interactions
Scroll-based storytelling
Keep animations purposeful, smooth, and premium. Avoid excessive effects or animations that make the website difficult to navigate.

Smooth Scrolling
Implement a polished smooth-scrolling experience using Lenis or an equivalent solution.
Scrolling should feel fluid and responsive across the entire website, with animations synchronized naturally with scroll position.

Technical Direction
Use modern technologies such as:
React / Next.js
Tailwind CSS
GSAP + ScrollTrigger
Lenis
Three.js / WebGL / GLSL where appropriate
Ensure:
Fully responsive desktop, tablet, and mobile layouts
Optimized animations and WebGL performance
Touch-friendly interactions
Reduced-motion support
Clean and reusable component architecture
Proper responsive behavior for interactive sections
Fast-loading assets and sensible performance optimization

Final Goal
Create an award-level Social Media Agency website that feels creative, bold, futuristic, premium, and immersive.
The experience should combine strong agency branding, social-media-focused content, GSAP-powered motion, smooth scrolling, interactive sections, and one memorable WebGL experience.
Every section should feel intentionally designed and connected through a consistent visual language and storytelling flow, from the first hero animation to the final contact CTA and footer.