Qrompt v2 - Design Documentation

v1 vs v2 Differences

v1 (Previous)

• Outfit + Roboto fonts
• Purple-Blue gradient only
• Standard gradient background
• Basic glassmorphism
• FontAwesome CDN
• Traditional grid layout
• Static gradient text

v2 (Current)

• Inter + Outfit fonts (user requested)
• Cyan-Purple-Pink aurora gradient
• Aurora Borealis animated background
• Advanced glassmorphism with blur(30px)
• FontAwesome Pro 7 LOCAL
• Bento grid layout system
• Animated gradient text (flowing animation)
• Animated gradient borders
• Icon hover: thin → solid

Design Fingerprint

Hash

q2-aur-cyn-int-96

Unique Combination

Aurora BG (#96) + Cyan-Purple-Pink + Inter/Outfit + Bento Grid

Design Token System

Color Palette (Aurora Inspired)

Cyan (Primary) cyan-500

Purple (Secondary) purple-500

Pink (Accent) pink-500

Background slate-950

Gradient Presets Used

#25 Neon Glow: from-purple-500 to-blue-500 (adapted to cyan)
#10 Aurora Borealis: Multi-color radial gradients with animation
Primary CTA: from-cyan-500 via-purple-500 to-pink-500

Typography (Font Pair #17)

Headings

Outfit Bold

font-heading

Body

Inter Regular

font-body

Size Scale

H1: text-5xl lg:text-7xl font-bold
H2: text-3xl lg:text-5xl font-bold
H3: text-xl font-bold
Body: text-base (16px)
Small: text-sm (14px)

Spacing & Layout

Container: px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20
Section Padding: py-24 lg:py-32
Card Padding: p-6 md:p-8
Border Radius: rounded-xl (cards), rounded-2xl (sections)
Gaps: gap-4, gap-6, gap-8

Layout Selections (from 150 options)

#96

Hero: Aurora Borealis

Full-screen animated aurora background with floating glassmorphism cards

#64

Features: Bento Grid

Asymmetric bento box layout with varying card sizes

#3

Categories: Icon Grid

5-column responsive icon grid with hover animations

#26

How It Works: Connected Steps

3-step horizontal flow with gradient connector lines

#1

Mega Menu: Full-Width Featured

Featured panel + category grid mega dropdown

Hover Effects Used (from 20 options)

#1 Icon Weight Change

FontAwesome thin (fat) → solid (fas) on hover

card:hover .icon → fas

#2 Icon Scale

Icon scales up to 1.15x on card hover

transform: scale(1.15)

#6 Text Slide

Title text slides 4px to the right

transform: translateX(4px)

#14 Gradient Border

Animated flowing gradient border on cards

gradient-border-animated

Important: Cards never move (no scale, translate, rotate). Only internal elements animate.

Animated Background (#10 Aurora Borealis)

Technique

• Multiple radial gradients layered
• Blur filter (60px) for soft edges
• CSS @keyframes for movement
• 20s animation duration (slow, subtle)
• Absolute positioning with negative inset

Color Points

• Cyan (20% 50%) - rgba(6, 182, 212, 0.3)
• Purple (80% 20%) - rgba(168, 85, 247, 0.3)
• Pink (40% 80%) - rgba(236, 72, 153, 0.25)
• Light Cyan (70% 60%) - rgba(34, 211, 238, 0.2)

@keyframes auroraMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5%, 5%) rotate(5deg); }
    50% { transform: translate(-5%, 10%) rotate(-5deg); }
    75% { transform: translate(10%, -5%) rotate(3deg); }
}

Glassmorphism Styles

.glass


                            background: rgba(0,0,0,0.3);

                            backdrop-filter: blur(20px);

                            border: 1px solid rgba(255,255,255,0.08);

.glass-strong


                            background: rgba(0,0,0,0.4);

                            backdrop-filter: blur(30px);

                            border: 1px solid rgba(255,255,255,0.12);

Section Order

Order #7: Story/Portal Focused (from 10 options)

1 Header (Glassmorphism sticky with mega menu)
2 Hero (Aurora BG + floating prompt cards)
3 Stats Bar (Quick numbers)
4 Features (Bento grid)
5 Categories (Icon grid)
6 How It Works (3 steps)
7 Pricing (Credit packages)
8 For Creators (Dashboard preview)
9 Testimonials
10 CTA (Final conversion)
11 Footer (6-column mega footer)

Leonardo.ai Gorsel Promptlari

hero-bg.jpg 1472x832

Abstract aurora borealis inspired background, deep space with cyan purple and pink nebula clouds, subtle grid lines overlay, dark cosmic atmosphere, soft glowing particles floating, ethereal and futuristic mood, ultra smooth gradients, 8K quality, digital art style, no text

Model: Leonardo Phoenix Style: Digital Art Preset: Creative

creator-avatar-1.jpg 512x512

Professional headshot portrait, young Asian woman software developer, confident smile, modern workspace background with monitors, soft natural lighting from window, Canon R5 85mm f/1.8, shallow depth of field, tech startup vibe, authentic and approachable, slight bokeh, 4K quality

Model: Leonardo Phoenix Style: Cinematic

creator-avatar-2.jpg 512x512

Professional headshot portrait, African American male developer in his 30s, short beard, wearing casual tech hoodie, friendly expression, minimalist office background, warm studio lighting, Sony A7IV 50mm f/1.4, professional LinkedIn style, authentic look, 4K quality

Model: Leonardo Phoenix Style: Cinematic

creator-avatar-3.jpg 512x512

Professional headshot portrait, European woman creative director, early 40s, elegant but approachable, subtle makeup, modern art gallery background blur, Nikon Z8 85mm f/1.2, dramatic but soft lighting, confident pose, authentic professional, 4K quality

Model: Leonardo Phoenix Style: Cinematic

dashboard-preview.jpg 1200x800

Clean minimal dashboard UI mockup, dark theme with purple and cyan accents, analytics charts and graphs, creator earnings display, glassmorphism cards, modern SaaS interface design, professional data visualization, no realistic human faces, abstract UI/UX concept, 4K quality

Model: Leonardo Phoenix Style: None (UI)

feature-ai-platforms.jpg 800x600

Abstract 3D visualization of interconnected AI platforms, floating glass spheres with glowing icons, neural network connections, cyan purple pink color scheme, futuristic tech aesthetic, soft gradients and light rays, dark space background, modern tech illustration, no text, 4K quality

Model: Leonardo Phoenix Style: 3D Render

Technical Notes

FontAwesome Pro 7: Local file at /assets/libs/fontawesome-pro@7.1.0/css/all.css
Tailwind v4: CDN with custom config (colors, fonts)
Alpine.js: For dark mode toggle, mobile menu, mega menu interactions
AOS: Scroll animations with 800ms duration, ease-out-cubic
Dark Mode: Default dark, class-based toggle stored in Alpine state
Images: Placeholder via picsum.photos (replace with Leonardo.ai generated)