AILEVATED

A modern AI productivity and learning platform for discovering tools, prompts, workflows, and practical resources.

Features • Technology • Run locally • Deploy

---

Overview

AILEVATED is a responsive, single-page experience that helps students, professionals, creators, and technology enthusiasts explore artificial intelligence in a practical way. It combines AI-tool discovery, reusable prompts, productivity workflows, educational content, and interactive UI details in one focused platform.

Explore the experience

1. Start at the hero - A concise introduction, animated headline, and direct calls to explore tools or subscribe.
2. Discover AI tools - Browse featured tools and filter the directory by Writing, Design, Code, Marketing, or Productivity.
3. Use prompt templates - Copy ready-to-use prompts directly to the clipboard in one click.
4. Learn and explore - Read AI resources, view curated content, and use the global search shortcut (/).
5. Find your fit - Complete the interactive AI tool-matcher quiz for a tailored tool suggestion.
6. Stay engaged - Experience theme switching, animated statistics, micro-interactions, FAQs, newsletter prompts, and responsive navigation.

Features

• AI tools directory with category filtering, featured states, ratings, and bookmark interactions
• Prompt library with browser clipboard support and a fallback for older browsers
• Instant site search with keyboard controls: press / to open and Esc to close
• AI learning content with article cards and browser-native share or copy-link fallback
• AI tool-matcher quiz with an interactive multi-step flow and result state
• Dark and light themes that remember the user's preference with local storage
• Responsive design for desktop, tablet, and mobile screens
• Polished interactions including smooth scrolling, a custom cursor, card tilt, reveal effects, animated counters, particles, and confetti
• Conversion UI including newsletter, contact form, pricing, testimonials, FAQs, cookie notice, daily tip, sticky CTA, and exit-intent popup
• SEO-ready metadata with description, social-preview metadata, mobile viewport support, theme colour, and web-app manifest

Technology

Area	Used in AILEVATED
Structure	HTML5 semantic sections and accessible form controls
Styling	CSS3, custom properties, Flexbox, CSS Grid, responsive media queries, gradients, and keyframe animations
Interactivity	Vanilla JavaScript (ES6+) - no framework or build step required
Typography	Google Fonts: Inter, Space Grotesk, and JetBrains Mono
Icons	Font Awesome 6.5.0 loaded from a CDN
Visual effects	HTML Canvas API, inline SVG texture, and requestAnimationFrame
Browser APIs	Clipboard API, Web Share API, Web Storage API, Intersection Observer API, and History API
App metadata	Web App Manifest

Run locally

This is a static site. No installation, package manager, or database is needed.

1. Download or clone the repository.
2. Open index.html in a modern browser.
3. For the smoothest development experience, open the project folder in VS Code and use the Live Server extension.

Project structure

ailevated/
|- assets/
|  |- ailevated-cover.png
|  `- ailevated-thumbnail.png
|- index.html
|- manifest.json
|- .gitignore
`- README.md

Deploy to GitHub Pages

1. Push these files to the root of your GitHub repository.
2. Open Settings > Pages in the repository.
3. Under Build and deployment, select Deploy from a branch.
4. Choose the main branch and the /(root) folder.
5. Save. GitHub will display the live Pages URL when deployment is complete.

Current scope

This version is a front-end showcase. The newsletter and contact forms provide interface feedback only; connect a backend or a form provider before collecting real submissions. Likewise, update the example tool cards, pricing, testimonials, and statistics with live information before using them as production claims.

Author

Designed and developed for AILEVATED.