import React, { useState } from 'react';
import { Box, Button, Grid, Paper, Typography } from '@mui/material';
import GlobalStyles from '@mui/material/GlobalStyles';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import MenuBookIcon from '@mui/icons-material/MenuBook';
import ImageIcon from '@mui/icons-material/Image';
import VolumeUpIcon from '@mui/icons-material/VolumeUp';
import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
import { OptimizedVideo } from '../ImageStudio/dashboard/utils/OptimizedVideo';
import { motion, AnimatePresence } from 'framer-motion';
import { leftPageVariants, rightPageVariants } from './Phases/StoryOutlineParts/pageVariants';
interface StoryWriterLandingProps {
onStart: () => void;
onSelectPath?: (
mode: 'marketing' | 'pure',
template:
| 'product_story'
| 'brand_manifesto'
| 'founder_story'
| 'customer_story'
| 'short_fiction'
| 'long_fiction'
| 'anime_fiction'
| 'experimental_fiction'
| null
) => void;
}
const featureHighlights = [
{
title: 'AI Story Blueprint',
description: 'Persona, setting, tone, and premise woven together automatically.',
detail: 'Start with cohesive outlines tailored to your audience and genre.',
icon: ,
},
{
title: 'Cinematic Illustrations',
description: 'Scene-by-scene image prompts and gallery-ready renders.',
detail: 'Control aspect ratios, providers, and models for every chapter.',
icon: ,
},
{
title: 'Voice-Ready Narration',
description: 'Generate lifelike audio in multiple languages and speeds.',
detail: 'Perfect for bedtime stories, podcasts, or accessibility-ready scripts.',
icon: ,
},
{
title: 'Story Video Composer',
description: 'Blend scenes, audio, and transitions into immersive videos.',
detail: 'Fine-tune FPS, transitions, and pacing for a studio polish.',
icon: ,
},
];
const MotionBox = motion.create(Box);
export const StoryWriterLanding: React.FC = ({ onStart, onSelectPath }) => {
type NonFictionTemplate = 'product_story' | 'brand_manifesto' | 'founder_story' | 'customer_story';
type FictionTemplate = 'short_fiction' | 'long_fiction' | 'anime_fiction' | 'experimental_fiction';
type TemplateDetailKey = NonFictionTemplate | FictionTemplate | null;
const [detailTemplate, setDetailTemplate] = useState(null);
const isDetailView = detailTemplate !== null;
const isNonFictionDetail = (key: TemplateDetailKey): key is NonFictionTemplate =>
key === 'product_story' || key === 'brand_manifesto' || key === 'founder_story' || key === 'customer_story';
const isFictionDetail = (key: TemplateDetailKey): key is FictionTemplate =>
key === 'short_fiction' || key === 'long_fiction' || key === 'anime_fiction' || key === 'experimental_fiction';
return (
({ opacity: 0 }),
center: { opacity: 1 },
exit: () => ({ opacity: 0 }),
}}
initial="enter"
animate="center"
exit="exit"
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
width: '100%',
height: '100%',
}}
>
{!isDetailView || isNonFictionDetail(detailTemplate) ? (
<>
Non-Fiction
{detailTemplate === 'brand_manifesto'
? 'Write your brand manifesto as a story'
: detailTemplate === 'founder_story'
? 'Tell your founder story with narrative depth'
: detailTemplate === 'customer_story'
? 'Turn customer wins into case-study stories'
: 'Turn your brand and product into a story campaign'}
{detailTemplate
? detailTemplate === 'product_story'
? 'Weave your product features, benefits, and proof points into a narrative that audiences remember.'
: detailTemplate === 'brand_manifesto'
? 'Articulate what you stand for, the change you want to see, and invite your audience into that story.'
: detailTemplate === 'founder_story'
? 'Share the journey, struggles, and insights that led to creating your product or company.'
: 'Showcase real customers, their problems, and the transformation your product enabled.'
: 'Begin with a book-inspired canvas. Alwrity assembles personas, settings, tones, and campaign story beats so you can focus on the narrative, not forms.'}
{!detailTemplate && (
{[
{ label: 'Product Story', template: 'product_story' as NonFictionTemplate },
{ label: 'Brand Manifesto', template: 'brand_manifesto' as NonFictionTemplate },
{ label: 'Founder Story', template: 'founder_story' as NonFictionTemplate },
{ label: 'Customer Story', template: 'customer_story' as NonFictionTemplate },
].map(({ label, template }) => (
{
if (onSelectPath) onSelectPath('marketing', template);
}}
>
{label}
{
e.stopPropagation();
setDetailTemplate(template);
}}
>
Know more
))}
)}
Notes
{(!detailTemplate || detailTemplate === 'product_story') && [
'Product launch or feature stories grounded in your real context',
'Scene-by-scene descriptions ready for blogs, landing pages, and videos',
].map((item) => (
• {item}
))}
{detailTemplate === 'brand_manifesto' && [
'Clarify mission, beliefs, and promises in narrative form',
'Create a reusable manifesto that powers campaigns and website copy',
].map((item) => (
• {item}
))}
{detailTemplate === 'founder_story' && [
'Highlight pivotal moments that shaped the product',
'Humanize your brand for decks, about pages, and podcasts',
].map((item) => (
• {item}
))}
{detailTemplate === 'customer_story' && [
'Narrative case studies structured as before/after transformations',
'Adaptable arcs for blog posts, sales decks, and videos',
].map((item) => (
• {item}
))}
{!detailTemplate && [
'Product, brand, and customer stories grounded in your real context',
'Guided tone, POV, rating, and length controls for campaigns',
'Scene-by-scene descriptions ready for blogs, videos, and podcasts',
].map((item) => (
• {item}
))}
) : (
<>
Story Type
Choose a fiction template on the right to see how it behaves
When you click a template on the right page, both pages update with how that mode works, where to
use it, and example prompts you can try.
)}
{isDetailView && isFictionDetail(detailTemplate) && (
<>
Fiction Template
{detailTemplate === 'anime_fiction'
? 'Anime fiction: visual, dramatic story worlds'
: detailTemplate === 'short_fiction'
? 'Short fiction: complete arcs in one sitting'
: detailTemplate === 'long_fiction'
? 'Long fiction: chapters and evolving arcs'
: 'Experimental fiction: break the usual patterns'}
{detailTemplate === 'anime_fiction'
? 'Combine scene-wise images, narration, and cinematic pacing to create anime-inspired story videos and scripts.'
: detailTemplate === 'short_fiction'
? 'Perfect for newsletter shorts, bedtime stories, or snackable IP that can later expand into campaigns.'
: detailTemplate === 'long_fiction'
? 'Plan multi-chapter narratives with recurring characters, locations, and themes.'
: 'Explore unusual structures, mixed formats, and playful styles that do not fit typical genres.'}
Notes
{detailTemplate === 'anime_fiction' && [
'Design scenes with anime-style visual prompts and pacing',
'Use narration and music to match emotional beats',
'Export outlines to Video Studio for advanced anime-style videos',
].map((item) => (
• {item}
))}
{detailTemplate === 'short_fiction' && [
'Generate tightly scoped stories with clear beginnings and endings',
'Reuse the same world across multiple shorts and channels',
].map((item) => (
• {item}
))}
{detailTemplate === 'long_fiction' && [
'Structure chapters, arcs, and recurring motifs',
'Turn long-form IP into a sequence of videos or podcasts',
].map((item) => (
• {item}
))}
{detailTemplate === 'experimental_fiction' && [
'Blend formats: letters, logs, transcripts, inner monologues',
'Prototype unusual concept stories quickly before committing to full production',
].map((item) => (
• {item}
))}
See demos and example prompts:
{detailTemplate === 'anime_fiction' && [
'“Storyboard 8 anime-style shots for a hero vs. rival training arc I can send to Video Studio.”',
'“Give me key visual prompts for Image Studio to match each anime scene in this outline.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'short_fiction' && [
'“Outline three self-contained short stories set in the same world for newsletter issues.”',
'“Turn this short story into a 45-second narrated video concept for Video Studio.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'long_fiction' && [
'“Plan a 6-episode arc for this story, with one strong cliffhanger per episode.”',
'“List hero, villain, and location prompts I can reuse in Image Studio across the series.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'experimental_fiction' && [
'“Design an experimental story that alternates chat logs, diary pages, and internal narration.”',
'“Suggest three unusual thumbnail concepts for Image Studio that fit this experimental format.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'experimental_fiction' && (
Image example from Brand Avatar presets
Use experimental stories with artistic avatars like this to create unusual thumbnails,
cover art, or in-book character sketches.
)}
{detailTemplate === 'anime_fiction' && (
Example from Product Video Studio
)}
)}
{isDetailView && isNonFictionDetail(detailTemplate) && (
<>
Campaign Ideas
How this template can show up across your channels
{detailTemplate === 'product_story' && [
'Launch emails, landing pages, and feature explainer videos',
'Sequenced social posts that follow a single product arc',
].map((item) => (
• {item}
))}
{detailTemplate === 'brand_manifesto' && [
'Homepage hero copy and about pages',
'Investor decks and brand announcement posts',
].map((item) => (
• {item}
))}
{detailTemplate === 'founder_story' && [
'Podcast-style scripts and keynote outlines',
'Behind-the-scenes videos and newsletter essays',
].map((item) => (
• {item}
))}
{detailTemplate === 'customer_story' && [
'Narrative case-study blogs and sales deck stories',
'Short clips highlighting quotes and turning points',
].map((item) => (
• {item}
))}
Notes
Use this template as the backbone of a campaign, then reuse its beats in Story Studio’s outline,
Image Studio visuals, and Product Video Studio demos.
See demos and example prompts:
{detailTemplate === 'product_story' && [
'“Write a launch story for my product that finishes with a clear CTA to watch a demo video.”',
'“Turn this outline into a 30-second product demo script suitable for Product Video Studio.”',
'“Suggest three hero image prompts for Image Studio that match the opening scene.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'brand_manifesto' && [
'“Draft a three-part brand manifesto that we can reuse on homepage, deck, and launch video.”',
'“Condense this manifesto into a 45-second narration script for Product Video Studio.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'founder_story' && [
'“Outline a podcast episode where the founder tells this story in three acts.”',
'“Propose three thumbnail image prompts in Image Studio capturing the founder’s turning point.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'customer_story' && [
'“Write a narrative case study with before/after metrics that fits a landing page section.”',
'“Create a 60-second testimonial video script based on this customer story.”',
].map((item) => (
• {item}
))}
{detailTemplate === 'brand_manifesto' && (
Image example from Brand Avatar presets
Reuse this kind of “tech visionary” avatar from Image Studio when you turn your manifesto
into homepage heroes, decks, and launch visuals.
)}
{detailTemplate === 'founder_story' && (
Image example from Brand Avatar presets
A professional headshot like this works well for founder story landing pages, podcast
cover art, and keynote thumbnails.
)}
{detailTemplate === 'product_story' && (
Example from Product Video Studio
Product demo clip
The same WAN 2.5 Text-to-Video setup used in Product Video Studio, ideal for feature
highlights and launch stories.
)}
)}
{!isDetailView && (
<>
Fiction
Illustrations, narration, and video for your fictional worlds
Every scene can bloom into art, audio, and cinematic video. Choose the kind of fiction you want to
explore and let AI help you build it.
{[
{ label: 'Short Fiction', key: 'short_fiction' as FictionTemplate },
{ label: 'Long Fiction', key: 'long_fiction' as FictionTemplate },
{ label: 'Anime Fiction', key: 'anime_fiction' as FictionTemplate },
{ label: 'Experimental', key: 'experimental_fiction' as FictionTemplate },
].map(({ label, key }) => (
{
if (onSelectPath) onSelectPath('pure', key);
}}
>
{label}
{
e.stopPropagation();
setDetailTemplate(key);
}}
>
Know more
))}
Notes
{[
'Short and long-form stories, from cozy to epic',
'Anime-inspired and experimental narrative styles',
'Scene-by-scene control over visuals, voices, and pacing',
].map((item) => (
• {item}
))}
)}
{isDetailView && (
setDetailTemplate(null)}
>
Back
)}
}
onClick={onStart}
sx={{
mb: 1,
px: 5,
py: 1.8,
borderRadius: '999px',
textTransform: 'none',
fontWeight: 600,
background: 'linear-gradient(135deg, #7F5AF0 0%, #2CB67D 100%)',
boxShadow: '0 16px 32px rgba(127, 90, 240, 0.35)',
'&:hover': {
background: 'linear-gradient(135deg, #6c4cd4 0%, #24a26f 100%)',
boxShadow: '0 18px 36px rgba(127, 90, 240, 0.4)',
},
}}
>
Let’s ALwrity Your Story Journey
Tap once to open the book. Inputs appear after AI drafts your campaign-ready foundation.
Everything Story Studio helps you create
{featureHighlights.map((feature) => (
{feature.icon}
{feature.title}
{feature.description}
{feature.detail}
))}
);
};
export default StoryWriterLanding;