PromptEdit — AI Marketplace Sales Page

A dark, cinematic sales page for PromptEdit — the AI marketplace that gives content creators access to 20+ premium AI tools from one platform, with no stacked subscriptions.

Table of Contents

• Overview
• Features
• Preview
• Tech Stack
• Getting Started
• Project Structure
• Design System
• Usage
• Contributing
• License
• Contact

Overview

PromptEdit consolidates Midjourney, Kling AI, Veo, ElevenLabs, Suno, HeyGen and more into a single pay-as-you-go platform — no separate signups, no separate monthly bills.

This project is a ground-up redesign of that sales page, repositioning the product from a course upsell into a standalone marketplace that stands alongside Artlist, Motion Array and Epidemic Sound in visual quality. It is a single scrolling page of twelve sections, built to load fast and to be fully responsive.

Features

• Full-viewport hero: Three columns of AI-generated media scrolling at different speeds behind a rotating headline, layered under four separate overlay passes.
• Interactive AI toolkit: A tabbed showcase for Image, Video, Audio and Plugins, each with its own capability list, tool badges and full-bleed preview.
• Bento showcase gallery: A mixed-span grid of real AI output, each tile captioned with the model and prompt that produced it.
• Price comparison: The stacked-subscription cost laid against a single plan, with an animated gradient border on the highlighted option.
• Fanned testimonials: Cards spread like a hand of playing cards on desktop, straightening on hover; a clean vertical stack on mobile.
• Scroll animations: Reveal, stagger, scale and directional variants driven by one IntersectionObserver composable — no animation library.
• Responsive design: Fluid type via clamp(), reflowing grids, and separate mobile compositions where a desktop layout would not translate.

Preview

Hero

AI Toolkit

How It Works

Template Library

Pricing

For a closer look, clone the project and run it locally with npm run dev.

Tech Stack

Layer	Choice
Framework	Vue 3 (Composition API, <script setup>)
Language	TypeScript
Build tool	Vite 8
Styling	Tailwind CSS v4 (@theme design tokens)
Type	Inter (body) + Playfair Display (serif accents)
Dependencies	None beyond the above — all animation is pure CSS

Getting Started

1. Clone the repository

   git clone https://github.com/Okafor-Chiagozie/promptedit.git

2. Navigate to the project directory

   cd promptedit

3. Install dependencies

   npm install

4. Start the development server

   npm run dev

   Then open the URL Vite prints (usually http://localhost:5173).

Available scripts

Command	Description
npm run dev	Start the dev server with hot reload
npm run build	Type-check with vue-tsc and build into dist/
npm run preview	Preview the production build locally

Project Structure

src/
├─ components/
│  └─ sections/          # One component per page section
│     ├─ NavBar.vue
│     ├─ HeroSection.vue
│     ├─ AIToolsShowcase.vue
│     ├─ PricingSection.vue
│     └─ ...
├─ composables/
│  └─ useScrollReveal.ts # IntersectionObserver reveal system
├─ App.vue               # Section order
└─ style.css             # Design tokens, primitives, keyframes

Design System

All tokens are defined once in src/style.css under @theme and are available as Tailwind utilities.

Token	Value	Usage
dark-950 → dark-500	#020207 → #2a2a4a	Backgrounds and surfaces
gold-300 → gold-600	#FDE68A → #D97706	Primary accent, CTAs
accent	#818CF8	Secondary accent

Headlines follow a consistent pattern: a bold sans line, then an accent line set in italic Playfair Display.

Usage

Reordering sections. src/App.vue renders the sections in order; move a component there to change the page flow.

Editing content. Copy lives in typed const arrays at the top of each section component, with the template rendering a single v-for over them — so adding a tool, FAQ or pricing feature is a data edit, not a markup edit.

Scroll animations. Add reveal, reveal-left, reveal-right, reveal-scale or reveal-stagger to any element; useScrollReveal() in App.vue picks it up automatically, including elements mounted later.

Contributing

• Fork the repository
• Create a new branch

  git checkout -b feature/your-feature

• Make changes and commit

  git commit -m 'Add some feature'

• Push to the branch

  git push origin feature/your-feature

• Open a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

Feel free to contact me at [ collincity111@gmail.com ] for any inquiries or feedback.