Build Full Stack AI Kid Story Creator App Using NextJs, Neon, Stripe, Gemini API

Share
byPosted at
Prompt: Create an AI Kid Story App Landing Page

Build a modern, animated landing page for an AI-powered children's story generation app using Next.js, TypeScript, and Tailwind CSS. Include the following sections:

1. Hero Section:
  • Gradient background (purple, pink, blue tones) with animated floating stars
  • Decorative blur blobs in corners
  • Left column: Badge with "AI-Powered Storytelling for Kids", large headline "Where Imagination Comes to Life" (with gradient text and SVG underline), subtext about personalized bedtime stories, two CTA buttons ("Create a Story" gradient button, "Watch Demo" outlined button)
  • Social proof: 4 avatar circles with initials, 5-star rating (4.9/5), "Loved by 12,000+ families" 
  • Right column: Hero illustration image with floating badges ("AI Magic ✨", "Kid-Safe 100%") with bounce animations 
  • Scroll indicator at bottom with chevron icon

2. How It Works Section:
  • Section badge "Simple as 1-2-3"
  • Heading "How the Magic Happens"
  • 3 step cards with gradient icons (purple, pink, amber), numbered badges (01, 02, 03)
  • Steps: "Tell Us About Your Child", "AI Creates the Magic", "Read & Enjoy Together"
  • Connecting line between cards (desktop only)

3. Stats Section:
  • Purple-to-pink gradient background with dot pattern overlay
  • 4 stat cards: "12K+ Happy Families", "85K+ Stories Created", "50+ Story Themes", "30+ Countries
  • Icons: Heart, BookOpen, Sparkles, Globe from lucide-react

4. Testimonials Section:
  • Section badge "Happy Families
  • Heading "Loved by Parents Everywhere
  • 3 testimonial cards with 5-star ratings, quotes, avatar circles with initials, names and roles
  • Hover effects: lift and shadow on cards

5. Pricing Section:
  • Section badge "Pay As You Go"
  • Heading Simple Credit-Based Pricing
  • 3 pricing cards: Free (3 credits, $0), Popular (25 credits, $9.99, "Save 20%"), Pro (50 credits, $17.99, "Save 28%")
  • Popular card has "Most Popular" badge and scale-up effect
  • Each card shows: coin icon, credit amount, price, price per credit, feature list with checkmarks, CTA button
  • Info note: "1 Credit = 1 AI-Generated Chapter • Credits never expire

6. CTA Section:
  • Gradient background with floating stars and blur blobs
  • Animated book icon with wiggle animation
  • Heading "Ready to Create Magical Stories?
  • Subtext about joining families
  • Get Started Free" gradient button
  • Trust badge: "100% Safe & Kid-Friendly" with shield icon

7. Footer:
  • Brand logo with gradient text
  • 4 columns: Brand description, Product links, Company links, Legal links
  • Bottom bar: Copyright with heart icon, social icons

Design Requirements:
  • Use custom CSS animations: gradient-shift, float, pulse-glow, sparkle, bounce-subtle, scroll-bounce, slide-in-left, slide-in-right, slide-up, wiggle
  • Color scheme: Purple (#9333ea), Pink (#db2777), Amber (#f59e0b), gradients throughout
  • Lucide-react icons throughout
  • Responsive grid layouts (mobile-first)Smooth hover transitions with translate-y effects
  • Rounded-3xl borders, shadow-xl effects
  • Include Navbar component at top.

Technical Stack:
  • Next.js 14+ with App Router
  • TypeScriptTailwind CSS with custom animations in globals.css
  • Lucide-react for icons
  • Next/Image for optimized images

Generate complete, production-ready code with all animations, responsive breakpoints, and accessibility features.
Post a Comment

Comments