KidStory Landing Page

This is the landing page for KidStory - an AI-powered storybook creation platform for children aged 3-10.

What is this?

This is just a landing page to show how the KidStory system works. It's a showcase website that demonstrates the features and capabilities of our AI storybook platform.

Live Demo

🌐 Landing Page: https://kidstory.app (deployed on Vercel)

🚀 Main App: https://ai.kidstory.app (the actual storybook creation app that deploy on Cloud Run)

Features Showcase

• Hero Section: Introduction to KidStory with animated mascot
• Features Overview: Voice input, AI illustrations, interactive reading, narration, quizzes, and PDF export
• About Section: Information about the platform and its benefits
• Latest Stories: Shows the last 10 stories created by users and real-time platform statistics (Total Users, Total Stories)
• Light/Dark Mode: Toggle between light and dark themes
• Responsive Design: Works on all devices

Latest Stories Section

The "Latest Stories" section displays the last 10 stories that were generated using the main KidStory app. These stories are fetched from Firebase in real-time.

It also shows Platform Statistics: Total registered users and total books generated.

Important Notes:

• Stories are display only - you can see the titles and cover images
• You cannot open, read, or interact with these stories from the landing page
• This is just a preview to show what kind of stories users create
• To actually create and read stories, you need to use the main app at ai.kidstory.app

Technology Stack

• Framework: Next.js 16 with TypeScript
• Styling: Tailwind CSS with custom theme system
• Animations: Framer Motion + Lottie animations
• Database: Firebase Firestore (read-only access)
• Deployment: Vercel
• Fonts: Fredoka (headings), Nunito (body), Lora (stories)

Project Structure

storybook-for-kids-landing/
├── app/                    # Next.js app directory
├── components/
│   ├── sections/          # Page sections (Hero, Features, About, etc.)
│   ├── ui/                # UI components (ThemeToggle)
│   └── providers/         # Context providers (Theme)
├── public/
│   ├── animation/         # Lottie animation files
│   ├── logo.png          # KidStory logo
│   └── mascot/           # Mascot images
└── README.md

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Environment Variables

Create a .env.local file with:

# Firebase Configuration (read-only access)
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Main App URL
NEXT_PUBLIC_APP_URL=https://ai.kidstory.app

Related Projects

• Main App: storybook-for-kids-app - The actual storybook creation platform (ai.kidstory.app)
• Documentation Site: storybook-for-kids-docs - Full project documentation (docs.kidstory.app)
• Landing Page: This project - Showcase and marketing website (kidstory.app)

License

This project is part of the KidStory platform. All rights reserved.