Role: Act as a World-Class Senior Creative Technologist, Cre...

Prompt

Role: Act as a World-Class Senior Creative Technologist, Creative Director, Motion Designer, and Lead Frontend Engineer. Objective: Architect and build a high-fidelity, cinematic, premium education platform for an online learning ecosystem where users can discover courses, learn from expert instructors, track their progress, and build real-world skills. The experience must feel like a combination of a high-end editorial magazine, premium SaaS product, modern digital university, and cinematic interactive portfolio. This is NOT a generic LMS. Do not create the typical: Bootstrap-style dashboard Generic course grids Boring hero sections Template-looking cards Excessive gradients Generic AI-generated illustrations Stock-photo-heavy layouts The website should feel designed, intentional, editorial, immersive, and highly interactive. 1. CORE DESIGN DIRECTION Aesthetic Identity "Editorial Learning Technology" The visual language should communicate: Premium education Intelligence Creativity Technology Progress Expertise Trust Curiosity Think: A24 editorial design × Apple product page × Linear × modern digital university × premium creative agency. The interface should have strong typography, sophisticated whitespace, oversized editorial compositions, subtle depth, smooth transitions, and meaningful motion. Every section should have its own visual identity while remaining part of one coherent design system. 2. DESIGN SYSTEM Color Palette Use a sophisticated neutral-first palette. Primary Dark: #111111 Background: #F5F3EE Surface: #FFFFFF Muted Surface: #EAE7DF Primary Accent: #6C63FF Secondary Accent: #D6FF4B Muted Text: #77736C Border: rgba(17,17,17,0.10) The accent colors should be used strategically, not everywhere. Avoid overly colorful UI. The overall experience should remain premium and editorial. 3. TYPOGRAPHY Use a strong modern typographic hierarchy. Primary Typeface Use: Plus Jakarta Sans / Inter / Geist For: Navigation UI Course information Buttons Metadata Body text Display Typeface Use: Cormorant Garamond / Instrument Serif For selected editorial statements and dramatic headlines. Use serif typography sparingly. Example: "Learn skills that actually move you forward." Where: "move you forward." can use the display serif treatment. Typography Behavior Use: Massive display typography Tight tracking Short editorial paragraphs Strong contrast between heading sizes Variable font weights Responsive typography using clamp() Desktop hero heading should be capable of reaching: clamp(4rem, 8vw, 9rem) 4. GLOBAL VISUAL TEXTURE The interface should never feel completely flat. Implement: Global Noise A subtle SVG turbulence/noise overlay. Opacity: 0.025 – 0.05 The texture should barely be noticeable. Depth Use: Soft shadows Subtle borders Glass effects only where appropriate Layered surfaces Large rounded containers Border radius system: 1rem → 1.5rem → 2rem → 3rem Do NOT round everything excessively. 5. NAVBAR — FLOATING LEARNING COMMAND CENTER Create a floating navigation island. Initial State Transparent / minimal. Navigation: Logo Courses Categories Instructors Pricing Resources Search Login Start Learning Scroll State On scroll: Navbar shrinks slightly Background becomes translucent backdrop-filter: blur(20px) Subtle border appears Shadow increases Logo transitions Navigation spacing tightens Use GSAP ScrollTrigger. The navbar should feel like it is physically responding to the page. 6. HERO — "LEARNING IS A SUPERPOWER" The hero should immediately communicate what the platform does. Height: 100dvh Composition: Large editorial typography on the left. Right side: A cinematic interactive visual representing learning. Possible visual: A floating 3D-like course interface composed of: Course cards Progress indicators Video thumbnail Lesson timeline Skill graph Instructor avatar Completion percentage These elements should float at different depths. Hero Headline Example: "Learn skills that change what you can do." With a dramatic second line: "Not just what you know." Use serif italic for the emotional statement. Hero Animation On initial load: Background reveals slowly. Eyebrow fades upward. Main headline splits into lines. Lines reveal using clip-path. Supporting text fades in. CTA buttons slide upward. Course interface elements float into position. Small UI elements begin subtle infinite motion. Use: GSAP + ScrollTrigger Avoid excessive bouncing. Animation should feel expensive and controlled. 7. HERO MICRO-INTERACTION Add an interactive floating course card. Example: "Full-Stack Development" Progress: 72% Lessons: 18 / 25 Instructor: Alex Morgan When the user moves the mouse: Card slightly follows cursor Inner elements move at different speeds Background responds with subtle parallax Shadow changes dynamically Use a very subtle 3D tilt. Maximum rotation: ±4deg 8. TRUST / SOCIAL PROOF STRIP Immediately after the hero. Create an editorial horizontal section containing: "Learn from people building what comes next." Then show a horizontally scrolling marquee of: Company logos University names Instructor credentials Skill categories Example: DESIGN AI ENGINEERING BUSINESS MARKETING DATA CREATIVE The marquee should move continuously. Pause on hover. 9. FEATURED COURSES — THE MAIN PRODUCT SECTION This is one of the most important sections. Do NOT make it a boring 4-column card grid. Create an editorial course showcase. Section Header Large typography: "Courses worth finishing." Small text: "Curated programs built around practical skills, expert instructors, and real projects." FEATURED COURSE Create one large horizontal course composition. Left: Large course artwork. Right: Course information. Example: AI Engineering ADVANCED 24 LESSONS 8.5 HOURS Instructor: Sarah Chen Progress / difficulty indicator. CTA: Explore Course → Image Interaction On hover: Image scales slightly Gradient shifts Course metadata appears Arrow moves forward Cursor becomes custom circular interaction 10. COURSE CARD SYSTEM Create reusable course cards. Each card should contain: Thumbnail Category Course title Instructor Rating Number of lessons Duration Difficulty Price / Included badge Progress if enrolled But the card should NOT look like a conventional LMS card. Use editorial compositions. Some cards can have: Asymmetric layouts Large typography Image extending beyond container Floating metadata Vertical category labels 11. INTERACTIVE COURSE EXPLORER Create a horizontal category navigation: All AI Development Design Business Marketing Data Creative When clicking a category: Course cards animate out New courses animate in Grid rearranges using FLIP-style animation Filter indicator smoothly moves No hard page reload Use GSAP. The interaction should feel like a premium product interface. 12. "LEARN YOUR WAY" SECTION Create a full-width dark section. Headline: "One platform. Infinite ways to learn." Create 3 interactive learning modes: WATCH Video-based learning. Visual: A cinematic video player UI. BUILD Project-based learning. Visual: Code/editor/project interface. PRACTICE Interactive exercises and challenges. Visual: Interactive quiz / progress interface. Interaction When hovering over each mode: The active panel expands Other panels compress Background changes Supporting content appears Icon animates Image/video moves slightly Use GSAP. This should feel like an interactive exhibition. 13. LEARNING EXPERIENCE — PRODUCT UI SHOWCASE Instead of explaining the platform using boring text, show the actual learning interface. Create a large browser-like application mockup. Inside: Sidebar Dashboard My Courses Explore Progress Certificates Main Area Current course: AI Product Design Progress: 68% Current lesson: Building AI Interfaces Video player. Lesson navigation. Notes. Resources. Next lesson. The entire dashboard should look functional. Add subtle animated states: Progress bar filling Video timestamp moving Lesson completion check Active sidebar indicator Cursor interaction 14. LEARNING PROGRESS — "SEE YOUR GROWTH" Create an immersive data visualization section. Dark background. Show: Weekly Learning 6h 42m Courses Completed 12 Skills Improved 24 Current Streak 18 days Create an animated SVG progress graph. As the user scrolls: Graph draws itself Numbers count upward Bars animate Milestones appear Use GSAP ScrollTrigger. Do NOT make it look like a financial dashboard. It should feel like a personal growth visualization. 15. INSTRUCTORS SECTION Title: "Learn from people who actually do the work." Create a horizontally scrolling instructor gallery. Each instructor card: Large portrait Name Profession Skill Number of students Courses Example: Maya Chen Product Designer 128K students Hover interaction: Portrait transitions to a short video-like motion effect. Metadata slides in. Card expands slightly. 16. TESTIMONIAL SECTION Do NOT use a standard 3-card testimonial grid. Create a large editorial testimonial. Huge quotation. Example: "I didn't just finish a course. I built something I couldn't build before." Below: Student name. Role. Course completed. Small avatar. Add subtle horizontal motion / parallax. 17. CERTIFICATE / OUTCOME SECTION Create a visual section showing what happens after completing a course. Visual: A premium digital certificate. The certificate should animate into view. Then reveal: Skills acquired Course completion Verification badge Share button Download certificate Use elegant motion. Certificate should feel like a valuable achievement, not a generic PDF. 18. PRICING SECTION Create 3 pricing tiers. Example: FREE Explore selected lessons. PRO Full course library. TEAMS Learning for organizations. Do NOT make the pricing section overly SaaS-like. Use editorial typography. The center plan can visually stand out using the primary accent. CTA buttons should have magnetic hover behavior. 19. FINAL CTA Create a huge immersive closing section. Background: Dark. Headline: "Your next skill starts here." Large typography. One primary CTA: Start Learning Secondary CTA: Explore Courses Add subtle animated background elements. Possibly: Floating course thumbnails Moving grid Skill tags Small UI fragments Animated progress indicators Everything should slowly move. 20. FOOTER Large premium footer. Dark background. Top: Huge logo / wordmark. Headline: "Keep learning." Navigation: Platform Courses Learning Paths Instructors Pricing Resources Blog Guides Community Help Center Company About Careers Contact Bottom: Copyright. Social links. Language selector. Theme toggle. 21. GLOBAL MOTION SYSTEM Motion is a core part of the design. Do NOT add animations randomly. Every animation must communicate: Hierarchy Progress Interaction Discovery Continuity Page Load Use: Split-text reveals Clip-path transitions Fade-up Scale Stagger Scroll Use: Parallax Pinning Horizontal scrolling Scale transitions Blur transitions SVG drawing Number counters Hover Use: Magnetic buttons Image zoom Cursor interactions Card tilt Text displacement Underline animation Background sliding 22. CINEMATIC SCROLL SECTIONS Implement at least 3 major scroll-driven moments. Moment 1 — Hero Hero elements subtly move at different speeds. Moment 2 — Course Showcase Course interface becomes pinned. As the user scrolls: Course changes Lesson number changes Progress increases Visual content transforms Moment 3 — Learning Progress A data visualization builds itself as the user scrolls. The user should feel that they are progressing through the story of the platform. 23. CUSTOM CURSOR Desktop only. Create a minimal custom cursor. Normal: Small circular dot. Interactive: Expands into a larger circle. For course cards: Display: VIEW COURSE For images: Display: EXPLORE For buttons: Magnetic attraction. Do not make the cursor annoying. Disable custom cursor on mobile/tablet. 24. RESPONSIVE BEHAVIOR Desktop: Highly editorial and immersive. Tablet: Simplify animations. Mobile: Do not simply shrink the desktop design. Recompose layouts specifically for mobile. Mobile should have: Clean typography Horizontal course carousels Reduced parallax Simplified dashboard mockups Touch-friendly interactions Respect: prefers-reduced-motion 25. TECH STACK Use: React / Next.js Tailwind CSS GSAP 3 GSAP ScrollTrigger Lucide Icons Optional: Lenis for smooth scrolling. Use: CSS transforms GPU-friendly animations will-change only when necessary Lazy-loaded images Responsive image sizing 26. COMPONENT ARCHITECTURE Build reusable components: code Text Navbar Hero CourseCard FeaturedCourse CourseExplorer CategoryFilter LearningModes LearningDashboard ProgressVisualization InstructorCard InstructorGallery Testimonial CertificateShowcase Pricing FinalCTA Footer CustomCursor Every component should be modular. Animations should have clean lifecycle management. Avoid memory leaks. 27. IMAGE DIRECTION Use authentic, high-quality visual assets. Photography should feel: Editorial Cinematic Contemporary Human Intelligent Creative Avoid: Generic corporate stock photos People smiling at laptops Obvious AI-generated images Cheap gradients Generic 3D illustrations Course thumbnails should have their own visual identity. Each course category should feel visually distinct while maintaining the same design system. 28. UI DETAILS Add sophisticated micro-details: Tiny metadata labels Animated counters Progress bars Section indexes Small status indicators Subtle grid lines Cursor interactions Hover states Scroll indicators Animated arrows Course difficulty indicators Lesson completion states Category badges These details make the platform feel like a real product rather than a static landing page. 29. PERFORMANCE Animations must remain smooth. Target: 60 FPS Avoid expensive DOM operations. Prefer: transform opacity clip-path over layout-triggering properties. Lazy-load heavy images. Only initialize advanced animations when elements enter the viewport. 30. IMPORTANT CREATIVE DIRECTIVE Do not build another generic online course website. Build a premium digital learning experience. The website should feel like the visitor is entering an intelligent ecosystem rather than browsing a catalog. The experience should communicate: "Learning is not content consumption. Learning changes what you are capable of." Every section must have a reason to exist. Every animation must have a purpose. Every interaction must feel intentional. Every transition must feel physically believable. Avoid generic AI website patterns at all costs. No boring hero. No generic card grid. No repetitive rounded rectangles. No random gradients. No meaningless animations. No template-looking LMS UI. The final result should feel like a world-class education product designed by a top creative digital studio. Build the experience, not just the website. اعمله بالعربي، بحيث يكون تجربة تعليمية مبتكرة ذات طابع إبداعي فريد وغير تقليدي. اختر الالوان اللي انت حاببها

A system prompt was added to support web rendering