frosty-course

byRishi Jain

Use this detailed AI website builder prompt for creating a high-converting, modern, AI-first landing website for **Rishi Jain’s “30 Days AI Course”** using the “80:80 AI” positioning. --- # AI WEBSITE BUILDER PROMPT Create a futuristic, premium, AI-first educational website for a course called: # “30 Days AI Course” By Rishi Jain Tagline: “Learn AI in 30 Days Before Everyone Else Does.” The website should feel like a mix of: * Apple product launch * OpenAI aesthetic * Modern SaaS startup * Netflix-style storytelling * High-converting EdTech funnel The design must feel: * Minimal but powerful * Extremely modern * AI-native * Dark futuristic * Premium and cinematic * Highly conversion focused The website should NOT feel like a typical Indian course landing page. --- # BRAND POSITIONING This is NOT a normal AI course. This course is designed for: * Working professionals * Students * Freelancers * Creators * Agency owners * Entrepreneurs * Business owners The core emotional positioning: “AI will not replace you. But people using AI will.” The website must create: * Urgency * Curiosity * Fear of missing out * Excitement about AI * Confidence that beginners can learn AI The tone should feel: * Smart * Bold * Aspirational * Practical * Human * Non-corporate --- # VISUAL STYLE Use: * Glassmorphism * Soft gradients * Floating UI cards * Glow effects * Blur backgrounds * AI-inspired motion * Smooth scroll animations * Interactive hover effects * Premium typography Design inspiration: * OpenAI * Linear * Stripe * Raycast * Framer * Notion AI --- # COLOR PALETTE Primary: * Deep Black (#050505) * Midnight Blue (#0F172A) Accent Colors: * Electric Blue * Neon Purple * AI Cyan * Soft White Use subtle glowing gradients. Avoid: * Cheap bright colors * Cartoon colors * Generic education templates --- # TYPOGRAPHY Use modern fonts like: * Inter * Satoshi * General Sans * SF Pro Display Headings should feel cinematic and bold. --- # WEBSITE STRUCTURE Create a complete landing page with the following sections. --- # SECTION 1 — HERO SECTION Full-screen cinematic hero section. Background: * Animated AI particles * Floating UI elements * Neural network effects * Moving gradients Headline: # “Become AI-Powered in 30 Days.” Subheadline: “Master the world’s most powerful AI tools and learn how to use AI for marketing, business, content creation, productivity, automation, and freelancing.” Primary CTA Button: “Join The AI Revolution” Secondary CTA: “Watch Free Demo” Add: * Floating AI tool logos * Social proof counters * Animated dashboard visuals Show stats like: * 100,000+ students impacted * 4.7★ rated training ecosystem * 30+ AI tools covered * Beginner friendly --- # SECTION 2 — THE PROBLEM Create an emotional storytelling section. Headline: # “The World Changed Faster Than Most People Realized.” Show cards explaining: * AI replacing repetitive jobs * Traditional skills becoming outdated * People struggling to adapt * Students learning old syllabus * Professionals feeling left behind Then transition into: # “This Course Helps You Stay Ahead.” Use cinematic scroll storytelling. --- # SECTION 3 — WHAT IS 80:80 AI? This section is extremely important. Create a visually interactive section explaining: # “The 80:80 AI Framework” Explain: * AI should do 80% execution * Humans focus on the final 20% creativity + decision making * This creates faster growth * Better productivity * More income opportunities Add animated workflow visuals: Idea → AI → Human Refinement → Output Include examples: * AI writing * AI videos * AI presentations * AI marketing * AI research * AI automation * AI design Make this section visually mind-blowing. --- # SECTION 4 — WHAT YOU WILL LEARN Create Bento Grid layout cards. Modules: 1. AI Foundations 2. Prompt Engineering 3. ChatGPT Mastery 4. AI Content Creation 5. AI Video Creation 6. AI Image Generation 7. AI Marketing 8. AI Automation 9. AI for Productivity 10. AI for Freelancing 11. AI Agents 12. AI Business Systems Each card should: * Glow on hover * Have micro animations * Show relevant AI visuals/icons --- # SECTION 5 — TOOLS YOU WILL MASTER Create an infinite scrolling marquee section. Include tools like: * ChatGPT * Claude * Gemini * Midjourney * Veo * Runway * Perplexity * HeyGen * Notion AI * Gamma * Canva AI * n8n * Higgsfield * Leonardo AI Show them in futuristic floating cards. --- # SECTION 6 — ABOUT RISHI JAIN Create a premium personal brand section. Use: * Professional portrait * Dark luxury aesthetic * Cinematic lighting Content should position Rishi Jain as: * AI educator * Digital marketing trainer * Corporate AI consultant * Speaker * AI implementation expert Include: * 100,000+ professionals trained * Worked with top brands * AI workshops across India * Practical implementation approach Add quote: # “AI is no longer optional. It’s survival.” --- # SECTION 7 — WHO THIS COURSE IS FOR Create interactive audience cards. Include: * Students * Working professionals * Freelancers * Creators * Business owners * Marketers * Agency founders Each card should explain: “What transformation they get.” --- # SECTION 8 — STUDENT TRANSFORMATIONS Use before vs after storytelling. Examples: Before: * Confused about AI * Slow at work * No freelancing skills * Scared of AI After: * AI-powered workflow * Better productivity * Faster content creation * New income opportunities * Future-ready skills Use animated comparison cards. --- # SECTION 9 — COURSE FEATURES Create futuristic floating feature cards. Features: * 30 days structured learning * Daily lessons * Mobile-friendly access * Lifetime recordings * Community access * Practical assignments * AI templates * Beginner friendly * Real-world use cases * Live implementation --- # SECTION 10 — TESTIMONIALS Create: * Video testimonial carousel * Tweet-style reviews * LinkedIn recommendation cards * Instagram-style success posts Use believable human testimonials. --- # SECTION 11 — PRICING SECTION Dark premium pricing card. Headline: # “One Skill Can Change Your Entire Career.” Show: * Course price * Bonuses * Community access * Templates * AI workflows * Lifetime access CTA: # “Start Learning AI Today” Add urgency: * Limited seats * Batch starts soon * Price increasing soon --- # SECTION 12 — FAQ SECTION Accordion style. Questions: * Is this beginner friendly? * Will recordings be available? * Do I need coding? * Can I use this for freelancing? * What tools are included? * Is this live or recorded? * Will AI replace my job? * How fast can I learn? --- # SECTION 13 — FINAL CTA Full cinematic closing section. Headline: # “The Future Belongs To People Who Understand AI.” Subheadline: “Start your AI journey today before the gap becomes impossible to catch up.” Button: # “Join 30 Days AI Course” Background: * AI cityscape * Futuristic particles * Animated gradient mesh --- # MOBILE EXPERIENCE The website must be: * Mobile-first * Fast-loading * Extremely smooth * Thumb-friendly * Optimized for Instagram traffic Use: * Sticky CTA buttons * Floating enroll button * Smooth snap scrolling --- # UX REQUIREMENTS Include: * Smooth animations * Scroll-triggered reveals * Floating UI * Interactive cards * Hover transitions * AI-style motion graphics * Premium loading screen --- # CONVERSION OPTIMIZATION Add: * WhatsApp floating button * Sticky enroll CTA * Exit intent popup * Countdown timer * Social proof notifications * Scarcity messaging --- # SEO REQUIREMENTS Optimize for: * AI course * AI tools course * ChatGPT course * AI course India * Learn AI online * AI for beginners * AI marketing course * Generative AI course * AI automation course --- # FINAL DESIGN FEELING The website should feel like: “If OpenAI launched an AI learning platform with Apple-level storytelling and Netflix-level engagement.” The final website must look premium enough that users instantly feel: “This is the future.”

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 5

Frosty-Course System Requirements Document

1. Introduction

The "Frosty-Course" project aims to create a premium AI-first educational website for Rishi Jain's "30 Days AI Course." This website will function as a high-converting, modern landing page that positions the course as a must-have for professionals looking to harness the power of AI. The design will draw inspiration from tech giants like Apple and OpenAI, ensuring a futuristic and cinematic experience.

2. System Overview

The website will serve as a lead generation and conversion tool, primarily targeting traffic from Instagram Reels, Meta Ads, YouTube Shorts, LinkedIn, and WhatsApp sharing. It will feature advanced UI/UX elements to create an engaging, mobile-first experience that feels premium and interactive. The core functionalities include a cinematic hero section, lead capture forms, WhatsApp integration, and an interactive curriculum showcase.

Page 2 of 5

3. Functional Requirements

  • As a User, I should be able to view a cinematic hero section with an AI-style animated background and video loop.
  • As a User, I should be able to watch a free AI demo lesson with a premium video player UI.
  • As a User, I should be able to fill out lead capture forms with fields for name, phone number, email, and profession.
  • As a User, I should be able to interact with a floating WhatsApp button for instant inquiries.
  • As a User, I should be able to explore interactive expandable modules in the course curriculum.
  • As a User, I should be able to view an AI tool showcase with infinite scrolling and hover animations.
  • As a User, I should be able to see social proof through testimonials and animated counters.
  • As a User, I should be able to experience urgency and FOMO elements like countdown timers and live notifications.
  • As a User, I should be able to navigate a mobile-first experience with sticky CTA buttons and smooth animations.
  • As a User, I should be able to read FAQs in an accordion style.

4. User Personas

  • Student: Interested in learning AI to enhance future career prospects.
  • Working Professional: Looking to integrate AI into their current job role.
  • Freelancer: Seeking to expand their skill set with AI tools.
  • Business Owner: Aiming to leverage AI for business growth.
  • Agency Owner: Interested in offering AI solutions to clients.
  • Creator: Looking to use AI for content creation and productivity.
Page 3 of 5

5. Visuals Colors and Theme

  • primary: Deep Black (#050505)
  • primary_light: Midnight Blue (#0F172A)
  • secondary: Electric Blue (#007BFF)
  • accent: Neon Purple (#8A2BE2)
  • highlight: AI Cyan (#00FFFF)
  • bg: Soft White (#F5F5F5)
  • surface: rgba(15, 23, 42, 0.8)
  • text: Soft White (#F5F5F5)
  • text_muted: rgba(245, 245, 245, 0.7)
  • border: rgba(255, 255, 255, 0.2)

6. Signature Design Concept

The homepage will feature a 3D AI Cityscape that users can explore interactively. Using @react-three/fiber and @react-three/drei, the cityscape will include floating AI tool logos and neural network effects. Users can click on buildings to reveal course modules, and hover over elements to see glowing animations. The cityscape will transition from day to night as users scroll, with AI particles and gradients creating a dynamic atmosphere. This immersive experience will make users feel like they're entering the future of AI learning.

Page 4 of 5

7. Interaction Model & Motion Direction

The landing page will use a parallax interaction model, with layered depth via scroll. Decorative layers like AI particles and gradients will translate at different speeds, while real content scrolls naturally. Each section will have a distinctive mechanic, such as scroll-triggered reveals and interactive hover effects, using framer-motion for animations.

8. Non-Functional Requirements

  • The website must load quickly on both desktop and mobile devices.
  • It should be optimized for high traffic from social media platforms.
  • The design should maintain a premium and modern aesthetic across all devices.
  • The website must be accessible and user-friendly.

9. Tech Stack

  • Frontend: Next.js, TailwindCSS, Framer Motion
  • Backend: Not specified, but compatible with frontend technologies
  • Database: Not specified
  • AI Tools: Integration with AI tools like ChatGPT, Claude, Gemini
  • Orchestration: Docker, docker-compose
Page 5 of 5

10. Assumptions and Constraints

  • The website will primarily target mobile users.
  • The design must align with the brand's premium positioning.
  • The website should integrate seamlessly with WhatsApp and CRM systems.
  • The site must handle high traffic volumes efficiently.

11. Glossary

  • AI: Artificial Intelligence
  • CTA: Call to Action
  • CRM: Customer Relationship Management
  • FOMO: Fear of Missing Out
  • UX: User Experience
  • UI: User Interface

This document outlines the requirements for transforming the "30 Days AI Course" website into a premium AI product launch page, ensuring a captivating and interactive user experience.

Landing design preview
Landing: View Hero
Framework: Learn 80:80
Tools: Browse AI Tools
Curriculum: View Modules
About: View Credentials
Testimonials: Read Results
Audience: View Use Cases
Pricing: Check Options
LeadForm: Join Revolution
WhatsApp: Send Inquiry