Build a modern, responsive web application called "CreativeSpark AI".
CreativeSpark AI is an AI-powered marketing assistant that helps artists, musicians, designers, writers, photographers, and other creators generate personalized marketing content in seconds.
The application should have a beautiful AI-themed UI using a purple, blue, and white gradient color palette with glassmorphism cards, smooth animations, rounded corners, modern typography, and responsive layouts.
Use React, Vite, Tailwind CSS, and TypeScript.
========================================
HOME PAGE
Hero Section
Title:
CreativeSpark AI
Subtitle:
AI-Powered Marketing Assistant for Creators
Description:
Transform your creative projects into powerful marketing campaigns using Artificial Intelligence.
Buttons:
-
Get Started
-
Learn More
Background:
Animated AI particles with gradient effects.
========================================
FEATURES SECTION
Display six feature cards with icons.
Features:
- AI Caption Generator
Generate engaging social media captions.
- Smart Hashtag Generator
Generate trending hashtags.
- Promotional Email Generator
Create professional marketing emails.
- Branding Suggestions
Generate brand names, taglines, and color ideas.
- Campaign Planner
Create complete marketing campaigns.
- Video Content Ideas
Generate creative video ideas for YouTube, Instagram, and TikTok.
========================================
HOW IT WORKS
Create a 4-step process.
Step 1
Upload an image or enter a project description.
↓
Step 2
AI analyzes the creative work.
↓
Step 3
Generate personalized marketing content.
↓
Step 4
Download or copy the results.
========================================
MAIN DASHBOARD
Create a dashboard with a sidebar.
Sidebar Items
Dashboard
Generate
Templates
Campaign Planner
Brand Kit
History
Settings
========================================
GENERATE PAGE
Include a form.
Project Description (textarea)
Upload Image
Target Audience Dropdown
Options
Students
Professionals
Artists
Businesses
General Audience
Content Tone Dropdown
Professional
Friendly
Creative
Funny
Inspirational
Buttons
Generate
Reset
========================================
OUTPUT PAGE
After clicking Generate, display six cards.
Card 1
Social Media Captions
Card 2
Trending Hashtags
Card 3
Promotional Email
Card 4
Branding Suggestions
Card 5
Campaign Strategy
Card 6
Video Content Ideas
Each card should have
Copy button
Download button
Regenerate button
========================================
ABOUT PAGE
Explain
CreativeSpark AI helps creators market their work using Artificial Intelligence.
Mission
Help every creator promote their work without needing expensive marketing experts.
========================================
CONTACT PAGE
Name
Message
Submit Button
========================================
FOOTER
CreativeSpark AI
Imagine • Create • Elevate
GitHub icon
LinkedIn icon
Email icon
========================================
DESIGN
Use gradients.
Purple (#6C63FF)
Blue (#2563EB)
Pink (#EC4899)
Orange (#F97316)
Glassmorphism cards.
Framer Motion animations.
Lucide React icons.
Rounded UI.
Modern AI startup style.
========================================
Make the application fully responsive.
Generate placeholder AI responses for the marketing content.
The application should feel like a real SaaS product suitable for an IBM AI Hackathon demonstration.
This project is a premium AI Marketing Assistant for Creators.
Live app: https://creativespark-ai-studio.vercel.app
Prefer working locally? You need Node.js and npm — install with nvm.
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev