TuteDude - Futuristic EdTech Homepage with Services
A futuristic and premium edtech-focused style guide featuring glassmorphism, vibrant accents, and high-performance layout patterns. Defined by the pairing of 'Clash Display' and 'Satoshi' typography, the aesthetic uses a clean white mesh background accented by soft radial gradients in blue (#3b82f6) and lavender (#a78bfa). Key features include interactive glass cards with 32px corner radii, floating UI badges, and a custom spotlight cursor interaction. It is highly suitable for modern SaaS dashboards, fintech landing pages, and educational platforms seeking a professional yet cutting-edge 'Dribbble-quality' feel.
Summary
A clean, high-contrast design system utilizing white space, glassmorphic containers, and vibrant color-coded service grids to create a premium educational or professional services interface.
Style
The style is built on a foundation of 'Clash Display' for impactful headings and 'Satoshi' for readable body text. It utilizes a core palette of Electric Blue (#3b82f6) and Lavender (#c4b5fd) set against a mesh-gradient white background. Visual interest is maintained through glassmorphic cards (60% opacity white, 12px blur), pill-shaped buttons with 25px glow shadows, and smooth 500ms transitions. Micro-interactions include a floating animation for key badges and a cursor-tracking spotlight effect.
Layout & Structure
A modular vertical stack featuring a sticky glass navigation bar, a centered hero section with floating decorative badges, a 2x3 responsive feature grid, and high-contrast 'logic' sections for value propositions.
Navbar
Hero Section
Service Grid
High-Contrast Value Section
Footer
Components
Interactive Glass Card
High-gloss card with inner shadow and hover state.
Glow CTA Button
A pill-shaped button that radiates light on hover.
Special Notes
MUST maintain the 32px corner radius for all cards to keep the 'modern' feel. DO NOT use sharp corners or heavy black borders; use rgba white borders for glass effects. MUST implement the 'spotlight' cursor effect to provide depth to the white background. Animation timing should be strictly 500ms for card transitions and 6s for floating elements to ensure a premium, non-jittery experience.