'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useAuth } from '@/components/AuthProvider'
import { LoginButton } from '@/components/LoginButton'
import VideoModal from '@/components/VideoModal'
import {
BookOpenIcon,
ChatBubbleBottomCenterTextIcon,
DocumentTextIcon,
SparklesIcon,
CloudIcon,
FolderIcon,
PencilIcon,
LightBulbIcon,
PaperAirplaneIcon,
CheckIcon,
UserGroupIcon,
AcademicCapIcon,
} from '@heroicons/react/24/outline'
import Testimonials from '@/components/Testimonials'
import Image from 'next/image'
// Simple demo model selector component
const DemoModelSelector = () => {
const [isOpen, setIsOpen] = useState(false)
const [selectedModel, setSelectedModel] = useState('Claude 3.7')
const demoModels = [
'Claude 3.7',
'GPT-4o',
'Gemini Pro',
'More...'
]
return (
<div className="relative min-w-0">
<button
onClick={() => setIsOpen(!isOpen)}
className="px-2 py-1 text-xs bg-black/20 rounded flex items-center gap-1 text-slate-200 hover:bg-black/30 transition-colors"
>
<span className="truncate">{selectedModel}</span>
<svg className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
{isOpen && (
<div className="absolute bottom-full mb-1 left-0 z-50 bg-slate-800/95 backdrop-blur-sm border border-slate-600/50 rounded-md shadow-xl overflow-hidden">
{demoModels.map((model) => (
<button
key={model}
onClick={() => {
setSelectedModel(model)
setIsOpen(false)
}}
className="block w-full px-3 py-2 text-xs text-left text-slate-200 hover:bg-slate-700/50 transition-colors whitespace-nowrap"
>
{model}
</button>
))}
</div>
)}
</div>
)
}
// Mobile-first responsive demo component
const ResponsiveDemo = ({ activeStep }: { activeStep: number }) => {
const [currentView, setCurrentView] = useState<'desktop' | 'mobile'>('desktop')
// Auto-detect mobile and set default view
useEffect(() => {
const checkMobile = () => {
setCurrentView(window.innerWidth < 768 ? 'mobile' : 'desktop')
}
checkMobile()
window.addEventListener('resize', checkMobile)
return () => window.removeEventListener('resize', checkMobile)
}, [])
const fileStructure = [
{ name: "📁 The Enchanted Chronicles", type: "folder", level: 0, expanded: true },
{ name: "📁 Characters", type: "folder", level: 1, expanded: activeStep >= 0 },
{ name: "📄 protagonist", type: "file", level: 2, selected: activeStep === 0 },
{ name: "📄 villain", type: "file", level: 2, selected: false },
{ name: "📁 Chapters", type: "folder", level: 1, expanded: activeStep >= 1 },
{ name: "📄 1-awakening", type: "file", level: 2, selected: activeStep === 1 },
{ name: "📄 2-discovery", type: "file", level: 2, selected: false },
{ name: "📁 World", type: "folder", level: 1, expanded: activeStep >= 2 },
{ name: "📄 magic", type: "file", level: 2, selected: activeStep === 2 },
{ name: "📄 locations", type: "file", level: 2, selected: false },
]
const editorContent: { [key: number]: { title: string; content: string[] } } = {
0: { // protagonist
title: "protagonist",
content: [
"# Elara Nightwhisper",
"",
"**Age:** 17",
"**Occupation:** Apprentice Mage",
"",
"## Background",
"Born in the village of Moonhaven, Elara discovered her",
"magical abilities when she accidentally made flowers bloom",
"in the middle of winter...",
"",
"## Abilities",
"- Nature magic (specializing in plant growth)",
"- Enhanced intuition",
"- Can communicate with forest spirits"
]
},
1: { // ch01-awakening
title: "ch01-awakening",
content: [
"# Chapter 1: The Awakening",
"",
"The morning mist clung to the cobblestones of Moonhaven",
"like ghostly fingers, reluctant to let go of the night.",
"Elara stepped carefully through the empty market square,",
"her worn leather boots making soft whispers against",
"the ancient stones.",
"",
"She had been having the dreams again. Dreams of a voice",
"calling to her from the Whispering Woods, speaking words",
"in a language she didn't recognize but somehow understood."
]
},
2: { // magic-system
title: "magic-system",
content: [
"# Magic System: The Weave",
"",
"## Core Principles",
"Magic in this world flows through 'The Weave' - an",
"invisible network of energy that connects all living things.",
"",
"## Schools of Magic",
"- **Elemental:** Fire, Water, Earth, Air",
"- **Nature:** Plants, Animals, Weather",
"- **Spirit:** Communication with otherworldly beings",
"- **Mind:** Telepathy, illusions, memory manipulation"
]
}
}
const chatMessages: { [key: number]: Array<{ type: string; content: string }> } = {
0: [
{ type: "user", content: "I want to develop Elara's backstory more. Can you help?" },
{ type: "ai", content: "I'd love to help! I can see you're working on @protagonist. What specific aspects of her backstory would you like to explore? Her family history, the discovery of her powers, or her life in Moonhaven?\n\nI can also make edits directly to the file if you'd like me to expand any section." }
],
1: [
{ type: "user", content: "@1-awakening feels a bit slow. Can you improve the opening?" },
{ type: "ai", content: "Looking at your opening chapter, I can help make it more engaging! Here's what I suggest:\n\n• Start with action or dialogue\n• Add more sensory details about the mist\n• Hint at the magical element earlier\n\nWould you like me to make these changes directly to the file? I can rewrite the opening paragraph to be more dynamic." }
],
2: [
{ type: "user", content: "How should @magic connect to @protagonist? Can you update both files?" },
{ type: "ai", content: "Great question! Since Elara specializes in Nature magic, I can help connect these elements:\n\n• Explain how her plant abilities fit into The Weave\n• Show how her village upbringing connects to nature magic\n• Create limitations that add tension to your story\n\nI can update both files to weave these connections together. Would you like me to make these changes now?" }
]
}
// Mobile version with tabbed interface
const MobileDemo = () => {
const [activeTab, setActiveTab] = useState<'files' | 'editor' | 'chat'>('editor')
return (
<div className="relative w-full h-full rounded-2xl overflow-hidden shadow-2xl" style={{ backgroundColor: '#343F56' }}>
{/* Mystical background effects - reduced for mobile */}
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/10 via-transparent to-cyan-500/10"></div>
{/* Floating Magical Particles - fewer for mobile */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(6)].map((_, i) => (
<div
key={`mote-${i}`}
className="absolute w-1 h-1 rounded-full animate-pulse"
style={{
backgroundColor: i % 3 === 0 ? '#0F766E' : i % 3 === 1 ? '#7C3AED' : '#0891B2',
opacity: 0.6,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 4}s`,
animationDuration: `${3 + Math.random() * 4}s`,
filter: 'blur(0.5px)',
boxShadow: `0 0 4px ${i % 3 === 0 ? '#0F766E' : i % 3 === 1 ? '#7C3AED' : '#0891B2'}`
}}
/>
))}
</div>
{/* Mobile Tab Navigation */}
<div className="absolute top-0 left-0 right-0 z-20 bg-black/20 border-b border-white/10">
<div className="flex">
{[
{ id: 'files', label: 'Files', icon: FolderIcon },
{ id: 'editor', label: 'Editor', icon: PencilIcon },
{ id: 'chat', label: 'AI Chat', icon: SparklesIcon }
].map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id as 'files' | 'editor' | 'chat')}
className={`flex-1 flex items-center justify-center px-2 py-3 text-xs font-medium transition-colors ${
activeTab === tab.id
? 'text-white bg-white/10'
: 'text-slate-300 hover:text-white hover:bg-white/5'
}`}
>
<tab.icon className="w-4 h-4 mr-1" />
{tab.label}
</button>
))}
</div>
</div>
{/* Mobile Content Area */}
<div className="pt-12 p-4 h-full">
{activeTab === 'files' && (
<div className="space-y-1">
<div className="text-xs mb-3 font-medium text-white opacity-75">FILE EXPLORER</div>
{fileStructure.map((item, i) => (
<div
key={i}
className={`text-xs transition-all duration-500 ${
item.selected ? 'text-white' : 'hover:text-white'
}`}
style={{
paddingLeft: `${item.level * 12 + 8}px`,
color: item.selected ? '#FFFFFF' : '#FEF4F4',
backgroundColor: item.selected ? '#0F766E' : 'transparent',
boxShadow: item.selected ? '0 0 8px rgba(15, 118, 110, 0.3)' : 'none'
}}
>
<div className={`py-2 px-2 rounded ${item.selected ? 'bg-white/10' : ''}`}>
{item.name}
</div>
</div>
))}
</div>
)}
{activeTab === 'editor' && (
<div className="h-full flex flex-col">
<div className="text-xs mb-3 font-medium text-white opacity-75 flex items-center">
<PencilIcon className="w-3 h-3 mr-1" />
{editorContent[activeStep]?.title || "EDITOR"}
</div>
<div className="flex-1 space-y-1 font-mono text-xs overflow-y-auto">
{editorContent[activeStep]?.content.map((line, i) => (
<div
key={i}
className="transition-all duration-300"
style={{
animationDelay: `${i * 100}ms`,
color: line.startsWith('#') ? '#FFFFFF' :
line.startsWith('**') ? '#FEF4F4' :
line.startsWith('-') ? '#FEF4F4' : '#FEF4F4'
}}
>
{line || '\u00A0'}
</div>
)) || (
<div className="text-gray-400 italic">Select a file to edit...</div>
)}
</div>
{/* Typing cursor */}
<div
className={`inline-block w-2 h-4 animate-pulse mt-1 ${
editorContent[activeStep] ? 'opacity-100' : 'opacity-0'
}`}
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 4px #0F766E'
}}
></div>
</div>
)}
{activeTab === 'chat' && (
<div className="h-full flex flex-col">
<div className="text-xs mb-3 font-medium text-white opacity-75 flex items-center">
<SparklesIcon className="w-3 h-3 mr-1" />
AI ASSISTANT
</div>
<div className="flex-1 space-y-3 overflow-y-auto">
{chatMessages[activeStep]?.map((message, i) => (
<div
key={i}
className={`text-xs transition-all duration-500 delay-${i * 200} ${
activeStep >= 0 ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-2'
}`}
>
{message.type === 'user' ? (
<div className="bg-white/10 p-3 rounded-lg">
<div className="font-medium mb-1 text-white">You</div>
<div className="text-slate-200">{message.content}</div>
</div>
) : (
<div className="p-3 rounded-lg" style={{
backgroundColor: '#0F766E',
opacity: 0.9,
boxShadow: '0 0 12px rgba(15, 118, 110, 0.3)'
}}>
<div className="font-medium mb-1 flex items-center text-white">
<SparklesIcon className="w-3 h-3 mr-1" />
AI Assistant
</div>
<div className="whitespace-pre-line text-slate-100">{message.content}</div>
</div>
)}
</div>
)) || (
<div className="text-gray-400 italic text-center mt-8">
Chat with AI about your story...
</div>
)}
</div>
{/* Chat input for mobile */}
<div className="mt-3 space-y-2 border-t border-white/10 pt-3">
<div className="relative">
<div className="bg-black/20 rounded px-3 py-2 text-xs flex items-center text-slate-200">
<div className="flex-1">
Type @ to mention files...
</div>
<button className="hover:text-white transition-colors text-teal-400">
<PaperAirplaneIcon className="w-4 h-4" />
</button>
</div>
</div>
<div className="flex items-center justify-between">
<div className="inline-flex items-center px-2 py-1 rounded-full text-xs bg-teal-600 text-white">
<SparklesIcon className="w-3 h-3 mr-1" />
Agent
</div>
<DemoModelSelector />
</div>
</div>
</div>
)}
</div>
</div>
)
}
// Desktop version with 3-column layout
const DesktopDemo = () => (
<div className="relative w-full h-full rounded-2xl overflow-hidden shadow-2xl" style={{ backgroundColor: '#343F56' }}>
{/* Mystical background effects */}
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/10 via-transparent to-cyan-500/10"></div>
{/* Floating Magical Particles */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(12)].map((_, i) => (
<div
key={`mote-${i}`}
className="absolute w-1 h-1 rounded-full animate-pulse"
style={{
backgroundColor: i % 3 === 0 ? '#0F766E' : i % 3 === 1 ? '#7C3AED' : '#0891B2',
opacity: 0.6,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 4}s`,
animationDuration: `${3 + Math.random() * 4}s`,
filter: 'blur(0.5px)',
boxShadow: `0 0 4px ${i % 3 === 0 ? '#0F766E' : i % 3 === 1 ? '#7C3AED' : '#0891B2'}`
}}
/>
))}
{[...Array(8)].map((_, i) => (
<div
key={`shimmer-${i}`}
className="absolute w-0.5 h-0.5 rounded-full"
style={{
backgroundColor: '#A855F7',
opacity: 0.4,
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 6}s`,
animationDuration: `${4 + Math.random() * 3}s`,
filter: 'blur(1px)',
boxShadow: '0 0 6px #A855F7, 0 0 12px #A855F7',
animation: `float ${4 + Math.random() * 3}s ease-in-out infinite alternate`
}}
/>
))}
</div>
{/* 3-Column Demo Layout */}
<div className="relative z-10 flex h-full">
{/* File Explorer Column */}
<div className="w-1/3 bg-black/20 border-r border-white/10 p-4">
<div className="text-xs mb-3 font-medium flex items-center" style={{ color: '#FEF4F4' }}>
<FolderIcon className="w-3 h-3 mr-1" />
FILE EXPLORER
</div>
<div className="space-y-1">
{fileStructure.map((item, i) => (
<div
key={i}
className={`text-xs transition-all duration-500 ${
item.selected ? 'text-white' : 'hover:text-white'
}`}
style={{
paddingLeft: `${item.level * 12 + 8}px`,
color: item.selected ? '#FFFFFF' : '#FEF4F4',
backgroundColor: item.selected ? '#0F766E' : 'transparent',
boxShadow: item.selected ? '0 0 8px rgba(15, 118, 110, 0.3), inset 0 0 8px rgba(124, 58, 237, 0.1)' : 'none'
}}
>
<div className={`py-1 px-2 rounded ${item.selected ? 'bg-white/10' : ''}`}>
{item.name}
</div>
</div>
))}
</div>
</div>
{/* Editor Column */}
<div className="w-1/3 bg-black/10 p-4">
<div className="text-xs mb-3 font-medium flex items-center" style={{ color: '#FEF4F4' }}>
<PencilIcon className="w-3 h-3 mr-1" />
{editorContent[activeStep]?.title || "EDITOR"}
</div>
<div className="space-y-1 font-mono text-xs">
{editorContent[activeStep]?.content.map((line, i) => (
<div
key={i}
className="transition-all duration-300"
style={{
animationDelay: `${i * 100}ms`,
color: line.startsWith('#') ? '#FFFFFF' :
line.startsWith('**') ? '#FEF4F4' :
line.startsWith('-') ? '#FEF4F4' : '#FEF4F4'
}}
>
{line || '\u00A0'}
</div>
)) || (
<div className="text-gray-400 italic">Select a file to edit...</div>
)}
</div>
{/* Typing cursor with mystical glow */}
<div
className={`inline-block w-2 h-4 animate-pulse mt-1 ${
editorContent[activeStep] ? 'opacity-100' : 'opacity-0'
}`}
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 4px #0F766E, 0 0 8px #7C3AED'
}}
></div>
</div>
{/* AI Chat Column */}
<div className="w-1/3 bg-black/20 border-l border-white/10 p-4 flex flex-col">
<div className="text-xs mb-3 font-medium flex items-center" style={{ color: '#FEF4F4' }}>
<SparklesIcon className="w-3 h-3 mr-1" />
AI ASSISTANT
</div>
<div className="flex-1 space-y-3 overflow-y-auto">
{chatMessages[activeStep]?.map((message, i) => (
<div
key={i}
className={`text-xs transition-all duration-500 delay-${i * 200} ${
activeStep >= 0 ? 'opacity-100 transform translate-y-0' : 'opacity-0 transform translate-y-2'
}`}
>
{message.type === 'user' ? (
<div className="bg-white/10 p-2 rounded-lg ml-4">
<div className="font-medium mb-1" style={{ color: '#FFFFFF' }}>You</div>
<div style={{ color: '#FEF4F4' }}>{message.content}</div>
</div>
) : (
<div className="p-2 rounded-lg mr-4" style={{
backgroundColor: '#0F766E',
opacity: 0.8,
boxShadow: '0 0 12px rgba(15, 118, 110, 0.3), 0 0 24px rgba(124, 58, 237, 0.1)'
}}>
<div className="font-medium mb-1 flex items-center" style={{ color: '#FFFFFF' }}>
<SparklesIcon className="w-3 h-3 mr-1" />
AI Assistant
</div>
<div className="whitespace-pre-line" style={{ color: '#FEF4F4' }}>{message.content}</div>
</div>
)}
</div>
)) || (
<div className="text-gray-400 italic text-center mt-8">
Chat with AI about your story...
</div>
)}
</div>
{/* Chat input and model selector */}
<div className="mt-3 space-y-2 border-t border-white/10 pt-3">
{/* Chat input */}
<div className="relative">
<div className="bg-black/20 rounded px-2 py-1 text-xs flex items-center" style={{ color: '#FEF4F4' }}>
<div className="flex-1">
Type @ to mention files or ask the AI to make edits...
</div>
<button className="hover:text-white transition-colors" style={{
color: '#0F766E',
filter: 'drop-shadow(0 0 2px #7C3AED)'
}}>
<PaperAirplaneIcon className="w-4 h-4" />
</button>
</div>
</div>
{/* Model selector and Agent pill */}
<div className="flex items-center justify-end space-x-2">
<div className="inline-flex items-center px-2 py-1 rounded-full text-xs" style={{
backgroundColor: '#0F766E',
color: '#FFFFFF',
boxShadow: '0 0 8px rgba(15, 118, 110, 0.4), 0 0 16px rgba(124, 58, 237, 0.2)'
}}>
<SparklesIcon className="w-3 h-3 mr-1" />
Agent
</div>
<DemoModelSelector />
</div>
</div>
</div>
</div>
</div>
)
return currentView === 'mobile' ? <MobileDemo /> : <DesktopDemo />
}
// Structured data for the homepage
const structuredData = {
'@context': 'https://schema.org',
'@type': 'SoftwareApplication',
name: 'Bookwiz',
applicationCategory: 'WritingApplication',
operatingSystem: 'Web Browser',
description: 'AI-powered writing platform that helps authors organize characters, plots, and world-building while providing intelligent writing assistance.',
url: 'https://bookwiz.io',
author: {
'@type': 'Organization',
name: 'Bookwiz',
url: 'https://bookwiz.io'
},
offers: {
'@type': 'Offer',
price: '0',
priceCurrency: 'USD',
description: 'Free plan available'
},
aggregateRating: {
'@type': 'AggregateRating',
ratingValue: '4.8',
ratingCount: '150'
},
featureList: [
'AI Writing Assistant',
'Character Development Tools',
'Plot Organization',
'World Building Features',
'Real-time Collaboration',
'Cloud Synchronization'
]
}
export default function LandingPage() {
const { user, loading } = useAuth()
const [activeStep, setActiveStep] = useState(0)
const [isVideoModalOpen, setIsVideoModalOpen] = useState(false)
useEffect(() => {
const interval = setInterval(() => {
setActiveStep((prev) => (prev + 1) % 4)
}, 4000)
return () => clearInterval(interval)
}, [])
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>
<div className="min-h-screen relative overflow-hidden" style={{ backgroundColor: '#343F56' }}>
{/* Mystical Background Particles */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(25)].map((_, i) => (
<div
key={`bg-particle-${i}`}
className="absolute rounded-full opacity-20"
style={{
width: `${Math.random() * 3 + 1}px`,
height: `${Math.random() * 3 + 1}px`,
backgroundColor: i % 4 === 0 ? '#0F766E' : i % 4 === 1 ? '#7C3AED' : i % 4 === 2 ? '#A855F7' : '#0891B2',
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
animationDelay: `${Math.random() * 10}s`,
animationDuration: `${8 + Math.random() * 12}s`,
filter: 'blur(1px)',
animation: `mysticalFloat ${8 + Math.random() * 12}s ease-in-out infinite alternate`
}}
/>
))}
</div>
{/* Add keyframes for mystical floating animation */}
<style jsx>{`
@keyframes mysticalFloat {
0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0.1; }
25% { transform: translateY(-20px) translateX(10px) scale(1.1); opacity: 0.3; }
50% { transform: translateY(-10px) translateX(-15px) scale(0.9); opacity: 0.2; }
75% { transform: translateY(-30px) translateX(5px) scale(1.05); opacity: 0.25; }
100% { transform: translateY(-40px) translateX(-10px) scale(1); opacity: 0.1; }
}
@keyframes float {
0% { transform: translateY(0px); opacity: 0.3; }
50% { transform: translateY(-10px); opacity: 0.6; }
100% { transform: translateY(0px); opacity: 0.3; }
}
@keyframes shimmerGlow {
0%, 100% { text-shadow: 0 0 5px rgba(124, 58, 237, 0.3), 0 0 10px rgba(15, 118, 110, 0.2); }
50% { text-shadow: 0 0 8px rgba(124, 58, 237, 0.5), 0 0 15px rgba(15, 118, 110, 0.3), 0 0 20px rgba(168, 85, 247, 0.2); }
}
@keyframes statsGlow {
0%, 100% { box-shadow: 0 0 8px rgba(15, 118, 110, 0.3), 0 0 16px rgba(124, 58, 237, 0.2); }
50% { box-shadow: 0 0 12px rgba(15, 118, 110, 0.5), 0 0 24px rgba(124, 58, 237, 0.3), 0 0 32px rgba(8, 145, 178, 0.2); }
}
@keyframes countUp {
0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes pulseScale {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.stats-container {
animation: statsGlow 4s ease-in-out infinite alternate;
}
.stat-number {
animation: countUp 0.8s ease-out forwards, pulseScale 3s ease-in-out infinite;
}
.stat-icon {
animation: float 3s ease-in-out infinite;
}
`}</style>
{/* Navigation */}
<nav className="border-b border-white/10 relative z-20" style={{ backgroundColor: '#343F56' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0 flex items-center">
<Image
src="/images/logo-glyph-white.png"
alt="Bookwiz Glyph"
width={24}
height={24}
className="mr-2"
style={{ filter: 'drop-shadow(0 0 4px rgba(124, 58, 237, 0.3))' }}
/>
<Image
src="/images/logo-text-white.svg"
alt="Bookwiz"
width={96}
height={24}
style={{ filter: 'drop-shadow(0 0 4px rgba(15, 118, 110, 0.3))' }}
/>
</div>
</div>
<div className="flex items-center space-x-4">
{loading ? (
<div className="animate-spin rounded-full h-6 w-6 border-b-2" style={{ borderColor: '#0F766E' }}></div>
) : (
<LoginButton />
)}
</div>
</div>
</div>
</nav>
{/* Hero Section */}
<div className="relative overflow-hidden">
<div className="max-w-7xl mx-auto">
<div className="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
<main className="mt-6 sm:mt-8 md:mt-12 lg:mt-16 xl:mt-20 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl tracking-tight font-extrabold">
<span className="block" style={{ color: '#FFFFFF' }}>Write Your Novel</span>
<span
className="block bg-gradient-to-r bg-clip-text text-transparent animate-pulse"
style={{
backgroundImage: `linear-gradient(to right, #0F766E, #FEF4F4, #0F766E)`,
animation: 'shimmerGlow 3s ease-in-out infinite alternate'
}}
>
10x Faster with AI
</span>
</h1>
<p className="mt-3 text-sm sm:text-base md:text-lg lg:text-xl sm:mt-5 sm:max-w-xl sm:mx-auto md:mt-5 lg:mx-0" style={{ color: '#FEF4F4' }}>
Stop staring at blank pages. From idea to first draft in 2 weeks instead of 6 months. Join 55,000+ authors who've already published their breakthrough novel with AI assistance.
</p>
{/* Stats Section */}
<div className="mt-6 sm:mt-8">
<div className="grid grid-cols-3 gap-4 sm:gap-6 stats-container rounded-2xl p-4 sm:p-6" style={{
background: 'linear-gradient(135deg, rgba(15, 118, 110, 0.08) 0%, rgba(124, 58, 237, 0.08) 50%, rgba(8, 145, 178, 0.08) 100%)',
border: '1px solid rgba(255, 255, 255, 0.1)',
backdropFilter: 'blur(10px)'
}}>
{/* Writers Stat */}
<div className="text-center group">
<div className="flex items-center justify-center mb-2">
<div
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 stat-icon"
style={{
backgroundColor: 'rgba(15, 118, 110, 0.15)',
border: '1px solid rgba(15, 118, 110, 0.3)',
boxShadow: '0 0 10px rgba(15, 118, 110, 0.2)'
}}
>
<UserGroupIcon className="w-4 h-4 sm:w-5 sm:h-5" style={{ color: '#0F766E' }} />
</div>
</div>
<div
className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r bg-clip-text text-transparent stat-number"
style={{
backgroundImage: 'linear-gradient(to right, #0F766E, #FEF4F4)',
animationDelay: '0.2s'
}}
>
55K+
</div>
<div className="text-xs sm:text-sm font-medium opacity-90" style={{ color: '#FEF4F4' }}>
Writers
</div>
</div>
{/* Books Stat */}
<div className="text-center group">
<div className="flex items-center justify-center mb-2">
<div
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 stat-icon"
style={{
backgroundColor: 'rgba(124, 58, 237, 0.15)',
border: '1px solid rgba(124, 58, 237, 0.3)',
boxShadow: '0 0 10px rgba(124, 58, 237, 0.2)',
animationDelay: '1s'
}}
>
<BookOpenIcon className="w-4 h-4 sm:w-5 sm:h-5" style={{ color: '#7C3AED' }} />
</div>
</div>
<div
className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r bg-clip-text text-transparent stat-number"
style={{
backgroundImage: 'linear-gradient(to right, #7C3AED, #FEF4F4)',
animationDelay: '0.4s'
}}
>
320K+
</div>
<div className="text-xs sm:text-sm font-medium opacity-90" style={{ color: '#FEF4F4' }}>
Books Created
</div>
</div>
{/* Prompts Stat */}
<div className="text-center group">
<div className="flex items-center justify-center mb-2">
<div
className="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-300 stat-icon"
style={{
backgroundColor: 'rgba(8, 145, 178, 0.15)',
border: '1px solid rgba(8, 145, 178, 0.3)',
boxShadow: '0 0 10px rgba(8, 145, 178, 0.2)',
animationDelay: '2s'
}}
>
<SparklesIcon className="w-4 h-4 sm:w-5 sm:h-5" style={{ color: '#0891B2' }} />
</div>
</div>
<div
className="text-lg sm:text-xl md:text-2xl font-bold bg-gradient-to-r bg-clip-text text-transparent stat-number"
style={{
backgroundImage: 'linear-gradient(to right, #0891B2, #FEF4F4)',
animationDelay: '0.6s'
}}
>
1M+
</div>
<div className="text-xs sm:text-sm font-medium opacity-90" style={{ color: '#FEF4F4' }}>
AI Prompts
</div>
</div>
</div>
{/* Subtitle for stats */}
<div className="mt-4 text-center">
<p className="text-xs sm:text-sm font-medium opacity-75" style={{ color: '#FEF4F4' }}>
✨ Trusted by writers worldwide • 🔒 Enterprise-grade security
</p>
</div>
</div>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start space-y-3 sm:space-y-0 sm:space-x-3">
<div className="rounded-md shadow">
{user ? (
<Link
href="/dashboard"
className="w-full flex items-center justify-center px-6 sm:px-8 py-3 border border-transparent text-sm sm:text-base font-medium rounded-md text-white transform hover:scale-105 transition-all duration-200 md:py-4 md:text-lg md:px-10"
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 15px rgba(15, 118, 110, 0.4), 0 0 30px rgba(124, 58, 237, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.9'
e.currentTarget.style.boxShadow = '0 0 20px rgba(15, 118, 110, 0.6), 0 0 40px rgba(124, 58, 237, 0.3)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
e.currentTarget.style.boxShadow = '0 0 15px rgba(15, 118, 110, 0.4), 0 0 30px rgba(124, 58, 237, 0.2)'
}}
>
<BookOpenIcon className="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
Continue Writing
</Link>
) : (
<button
onClick={() => window.location.href = '/auth/login'}
className="w-full flex items-center justify-center px-6 sm:px-8 py-3 border border-transparent text-sm sm:text-base font-medium rounded-md text-white transform hover:scale-105 transition-all duration-200 md:py-4 md:text-lg md:px-10"
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 15px rgba(15, 118, 110, 0.4), 0 0 30px rgba(124, 58, 237, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.9'
e.currentTarget.style.boxShadow = '0 0 20px rgba(15, 118, 110, 0.6), 0 0 40px rgba(124, 58, 237, 0.3)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
e.currentTarget.style.boxShadow = '0 0 15px rgba(15, 118, 110, 0.4), 0 0 30px rgba(124, 58, 237, 0.2)'
}}
>
<BookOpenIcon className="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
Start Writing
</button>
)}
</div>
<div>
<button
onClick={() => setIsVideoModalOpen(true)}
className="w-full flex items-center justify-center px-6 sm:px-8 py-3 border text-sm sm:text-base font-medium rounded-md backdrop-blur-sm transition-all duration-200 md:py-4 md:text-lg md:px-10"
style={{
borderColor: '#0F766E',
color: '#FEF4F4',
backgroundColor: 'rgba(15, 118, 110, 0.1)',
boxShadow: '0 0 10px rgba(124, 58, 237, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = 'rgba(15, 118, 110, 0.2)'
e.currentTarget.style.boxShadow = '0 0 15px rgba(124, 58, 237, 0.3)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'rgba(15, 118, 110, 0.1)'
e.currentTarget.style.boxShadow = '0 0 10px rgba(124, 58, 237, 0.2)'
}}
>
<svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
</svg>
Watch 2-Min Demo
</button>
</div>
</div>
{/* Trust signals below CTAs */}
{!user && (
<div className="mt-4 text-center sm:text-left">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-start gap-2 text-xs sm:text-sm" style={{ color: '#FEF4F4' }}>
<div className="flex items-center justify-center sm:justify-start gap-1 opacity-90">
<svg className="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="font-medium">No credit card required</span>
</div>
<div className="hidden sm:block text-slate-400">•</div>
<div className="flex items-center justify-center sm:justify-start gap-1 opacity-90">
<svg className="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="font-medium">Free forever plan</span>
</div>
<div className="hidden sm:block text-slate-400">•</div>
<div className="flex items-center justify-center sm:justify-start gap-1 opacity-90">
<svg className="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="font-medium">Start writing in 60 seconds</span>
</div>
</div>
</div>
)}
</div>
<div className="mt-8 sm:mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<div className="relative mx-auto w-full rounded-lg">
<div className="h-64 sm:h-80 md:h-96 lg:h-[32rem] w-full">
<ResponsiveDemo activeStep={activeStep} />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
{/* Problem/Solution Section */}
<div className="py-12 sm:py-16 lg:py-20 relative z-10 overflow-hidden" style={{ backgroundColor: '#FEF4F4' }}>
{/* Background decorative elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-24 -right-24 w-96 h-96 bg-teal-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div className="absolute -bottom-24 -left-24 w-96 h-96 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-pink-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div className="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
{/* Problems Column */}
<div className="relative">
<div className="absolute -left-4 top-0 bottom-0 w-1 bg-gradient-to-b from-red-500 to-red-300 rounded-full opacity-50"></div>
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-tight transform hover:scale-105 transition-transform duration-300" style={{ color: '#343F56' }}>
Every writer knows the struggle
</h2>
<div className="mt-8 space-y-6">
{[
{
title: "Writer's block",
description: "hits when you need inspiration most",
icon: "💭"
},
{
title: "Character development",
description: "feels overwhelming and inconsistent",
icon: "👤"
},
{
title: "Plot holes",
description: "appear when you're already chapters deep",
icon: "📚"
},
{
title: "Blank page",
description: "feels impossible to start with",
icon: "📝"
}
].map((item, index) => (
<div
key={index}
className="group flex items-start space-x-4 p-4 rounded-lg transition-all duration-300 hover:bg-white/50 hover:shadow-lg"
>
<div className="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-red-100 group-hover:scale-110 transition-transform duration-300">
<span className="text-xl">{item.icon}</span>
</div>
<div>
<p className="text-base sm:text-lg font-medium" style={{ color: '#343F56' }}>
<strong className="group-hover:text-red-600 transition-colors duration-300">{item.title}</strong>
</p>
<p className="text-sm sm:text-base mt-1" style={{ color: '#343F56' }}>
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
{/* Solutions Column */}
<div className="relative mt-12 lg:mt-0">
<div className="absolute -left-4 top-0 bottom-0 w-1 bg-gradient-to-b from-teal-500 to-teal-300 rounded-full opacity-50"></div>
<h3 className="text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight transform hover:scale-105 transition-transform duration-300" style={{ color: '#0F766E' }}>
What if writing felt effortless again?
</h3>
<div className="mt-8 space-y-6">
{[
{
title: "Beat writer's block",
description: "with our AI idea generator",
icon: "✨"
},
{
title: "Craft compelling characters",
description: "with our dynamic character creator",
icon: "🎭"
},
{
title: "Weave intricate plots",
description: "that keep readers hooked",
icon: "🎯"
},
{
title: "Never start with a blank page",
description: "again",
icon: "🚀"
}
].map((item, index) => (
<div
key={index}
className="group flex items-start space-x-4 p-4 rounded-lg transition-all duration-300 hover:bg-white/50 hover:shadow-lg"
>
<div className="flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-full bg-teal-100 group-hover:scale-110 transition-transform duration-300">
<span className="text-xl">{item.icon}</span>
</div>
<div>
<p className="text-base sm:text-lg font-medium" style={{ color: '#343F56' }}>
<strong className="group-hover:text-teal-600 transition-colors duration-300">{item.title}</strong>
</p>
<p className="text-sm sm:text-base mt-1" style={{ color: '#343F56' }}>
{item.description}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
{/* How It Works Section */}
<div className="py-12 sm:py-16 lg:py-20 relative z-10 overflow-hidden" style={{ backgroundColor: '#343F56' }}>
{/* Animated background elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-teal-500/30 to-transparent animate-shimmer"></div>
<div className="absolute -top-24 -right-24 w-96 h-96 bg-teal-500/10 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div className="absolute -bottom-24 -left-24 w-96 h-96 bg-purple-500/10 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div className="text-center">
<div className="inline-flex items-center px-4 py-2 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-400 text-sm font-medium mb-6">
<SparklesIcon className="w-4 h-4 mr-2" />
Simple Process
</div>
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-tight" style={{ color: '#FFFFFF' }}>
From Idea to Published Novel in 3 Simple Steps
</h2>
<p className="mt-4 max-w-2xl text-base sm:text-lg lg:text-xl mx-auto" style={{ color: '#FEF4F4' }}>
See how easy it is to transform your story idea into a compelling manuscript
</p>
</div>
<div className="mt-12 sm:mt-16">
<div className="grid gap-8 lg:grid-cols-3">
{[
{
number: 1,
title: "Spark Your Idea",
description: "Tell our AI your genre and a brief concept. Get unique story ideas, character suggestions, and plot outlines in minutes.",
icon: "💡",
color: "from-teal-500 to-cyan-500"
},
{
number: 2,
title: "Build Your World",
description: "Develop your characters, outline your plot, and create your unique story world with AI-assisted brainstorming and organization tools.",
icon: "🌍",
color: "from-purple-500 to-pink-500"
},
{
number: 3,
title: "Write and Refine",
description: "Generate chapters with our AI assistant, then edit and make it your own. Get your first draft written faster than ever before.",
icon: "✍️",
color: "from-blue-500 to-indigo-500"
}
].map((step, index) => (
<div
key={index}
className="group relative bg-white/5 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-2xl hover:shadow-teal-500/10 hover:-translate-y-1"
>
{/* Connecting line between steps */}
{index < 2 && (
<div className="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-gradient-to-r from-teal-500/50 to-transparent"></div>
)}
{/* Step number with gradient background */}
<div className="flex items-center justify-center mx-auto mb-6">
<div
className={`flex items-center justify-center w-16 h-16 rounded-full text-white text-xl font-bold shadow-lg bg-gradient-to-br ${step.color} group-hover:scale-110 transition-transform duration-300`}
>
{step.number}
</div>
</div>
{/* Step content */}
<div className="text-center">
<div className="text-4xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
{step.icon}
</div>
<h3 className="text-lg sm:text-xl font-semibold mb-4" style={{ color: '#FFFFFF' }}>
{step.title}
</h3>
<p className="text-sm sm:text-base" style={{ color: '#FEF4F4' }}>
{step.description}
</p>
</div>
{/* Hover effect overlay */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-teal-500/0 to-teal-500/0 group-hover:from-teal-500/5 group-hover:to-teal-500/10 transition-all duration-300"></div>
</div>
))}
</div>
{/* Progress indicator */}
<div className="mt-12 flex justify-center items-center space-x-2">
{[1, 2, 3].map((step) => (
<div
key={step}
className="w-2 h-2 rounded-full bg-white/20 transition-all duration-300"
style={{
backgroundColor: step === 1 ? '#0F766E' : 'rgba(255, 255, 255, 0.2)',
transform: step === 1 ? 'scale(1.5)' : 'scale(1)'
}}
/>
))}
</div>
</div>
</div>
</div>
{/* Features Section */}
<div id="features" className="py-12 sm:py-16 lg:py-20 relative z-10 overflow-hidden" style={{ backgroundColor: '#FEF4F4' }}>
{/* Animated background elements */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-teal-500/30 to-transparent animate-shimmer"></div>
<div className="absolute -top-24 -right-24 w-96 h-96 bg-teal-500/10 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div className="absolute -bottom-24 -left-24 w-96 h-96 bg-purple-500/10 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div className="text-center">
<div className="inline-flex items-center px-4 py-2 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-600 text-sm font-medium mb-6">
<SparklesIcon className="w-4 h-4 mr-2" />
Writer-First Features
</div>
<h2 className="text-sm sm:text-base font-semibold tracking-wide uppercase" style={{ color: '#0F766E' }}>
Built by writers, for writers
</h2>
<p className="mt-2 text-2xl sm:text-3xl md:text-4xl leading-8 font-extrabold tracking-tight bg-gradient-to-r from-teal-600 to-cyan-600 bg-clip-text text-transparent">
Finally, a writing tool that understands you
</p>
<p className="mt-4 max-w-2xl text-base sm:text-lg md:text-xl mx-auto" style={{ color: '#343F56' }}>
We've built the tools we wish we had as writers. A smart writing environment that adapts to your style, helps you track changes, and gives you the feedback you need to grow as a writer.
</p>
</div>
<div className="mt-12 sm:mt-16">
<div className="grid gap-8 md:grid-cols-2">
{[
{
title: "Adaptive Writing Environment",
description: "Your writing space adapts to your style, whether you're a plotter, pantser, or somewhere in between. Like a smart IDE for writers, it understands your workflow and helps you stay in the flow.",
icon: LightBulbIcon,
gradient: "from-amber-500 to-orange-500"
},
{
title: "Version Control & History",
description: "Track changes, compare versions, and revert to previous drafts with ease. Never lose a good idea or worry about making big changes. Your writing history is always there when you need it.",
icon: DocumentTextIcon,
gradient: "from-purple-500 to-pink-500"
},
{
title: "AI Writing Partner",
description: "Your personal writing assistant that helps you brainstorm, gives feedback, and helps you understand your characters better. Have real conversations about your story, get suggestions for improvements, and explore new directions.",
icon: ChatBubbleBottomCenterTextIcon,
gradient: "from-blue-500 to-cyan-500"
},
{
title: "Character Development",
description: "Create deep, consistent characters that evolve naturally throughout your story. Get help with character arcs, relationships, and motivations. Your AI partner helps you understand your characters as real people.",
icon: PencilIcon,
gradient: "from-green-500 to-emerald-500"
}
].map((feature, index) => (
<div
key={index}
className="group relative bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-lg hover:shadow-xl hover:shadow-teal-500/10 hover:-translate-y-1 transition-all duration-300"
>
{/* Feature icon with gradient background */}
<div className="absolute -top-4 -left-4">
<div
className={`flex items-center justify-center w-12 h-12 rounded-xl text-white shadow-lg bg-gradient-to-br ${feature.gradient} group-hover:scale-110 transition-transform duration-300`}
>
<feature.icon className="w-6 h-6" aria-hidden="true" />
</div>
</div>
{/* Feature content */}
<div className="mt-4">
<h3 className="text-lg sm:text-xl font-semibold mb-4" style={{ color: '#343F56' }}>
{feature.title}
</h3>
<p className="text-sm sm:text-base" style={{ color: '#343F56' }}>
{feature.description}
</p>
</div>
{/* Hover effect overlay */}
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-teal-500/0 to-teal-500/0 group-hover:from-teal-500/5 group-hover:to-teal-500/10 transition-all duration-300"></div>
</div>
))}
</div>
{/* Feature highlight */}
<div className="mt-12 sm:mt-16 bg-gradient-to-r from-teal-500/10 to-cyan-500/10 rounded-2xl p-6 sm:p-8 border border-teal-500/20">
<div className="flex flex-col sm:flex-row items-center justify-between gap-6">
<div className="text-center sm:text-left">
<h3 className="text-lg sm:text-xl font-semibold mb-2" style={{ color: '#343F56' }}>
Ready to Start Your Writing Journey?
</h3>
<p className="text-sm sm:text-base" style={{ color: '#343F56' }}>
Join thousands of authors who are already crafting their next bestseller
</p>
</div>
<button
onClick={() => window.location.href = '/auth/login'}
className="px-6 py-3 text-sm font-medium rounded-lg text-white transform hover:scale-105 transition-all duration-200"
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 15px rgba(15, 118, 110, 0.4)'
}}
>
Start Your Novel Free Today
</button>
</div>
</div>
</div>
</div>
</div>
{/* Testimonials Section */}
<Testimonials variant="landing" />
{/* Target Audience Section */}
<div className="py-12 sm:py-16 lg:py-20 relative z-10" style={{ backgroundColor: '#343F56' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<div className="inline-flex items-center px-4 py-2 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-400 text-sm font-medium mb-6">
<UserGroupIcon className="w-4 h-4 mr-2" />
Writer Community
</div>
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-tight" style={{ color: '#FFFFFF' }}>
Perfect for Every Kind of Writer
</h2>
<p className="mt-4 max-w-2xl text-base sm:text-lg lg:text-xl mx-auto" style={{ color: '#FEF4F4' }}>
From first drafts to final manuscripts, Bookwiz.io adapts to your unique writing style and creative process
</p>
</div>
<div className="mt-12 sm:mt-16 grid gap-8 lg:grid-cols-3">
{/* First-time Writers */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-white/10 hover:border-teal-500/30 transition-all duration-300 group">
<div className="flex items-center mb-4">
<div
className="flex items-center justify-center w-12 h-12 rounded-full text-white mr-4 group-hover:scale-110 transition-transform duration-300"
style={{ backgroundColor: '#0F766E' }}
>
<BookOpenIcon className="w-6 h-6" />
</div>
<h3 className="text-lg sm:text-xl font-semibold" style={{ color: '#FFFFFF' }}>
First-time Writers
</h3>
</div>
<p className="text-sm sm:text-base mb-4" style={{ color: '#FEF4F4' }}>
<strong>For Those Starting Their Journey:</strong> Turn your story ideas into a structured novel with guided AI assistance and step-by-step support.
</p>
<ul className="space-y-2 text-sm" style={{ color: '#FEF4F4' }}>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Story structure guidance
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Character development help
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Writing prompts & exercises
</li>
</ul>
</div>
{/* Experienced Authors */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-white/10 hover:border-teal-500/30 transition-all duration-300 group">
<div className="flex items-center mb-4">
<div
className="flex items-center justify-center w-12 h-12 rounded-full text-white mr-4 group-hover:scale-110 transition-transform duration-300"
style={{ backgroundColor: '#0F766E' }}
>
<SparklesIcon className="w-6 h-6" />
</div>
<h3 className="text-lg sm:text-xl font-semibold" style={{ color: '#FFFFFF' }}>
Experienced Authors
</h3>
</div>
<p className="text-sm sm:text-base mb-4" style={{ color: '#FEF4F4' }}>
<strong>For Seasoned Storytellers:</strong> Enhance your writing process with advanced tools that understand your craft and help you push creative boundaries.
</p>
<ul className="space-y-2 text-sm" style={{ color: '#FEF4F4' }}>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Advanced editing tools
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Genre-specific insights
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Publishing preparation
</li>
</ul>
</div>
{/* Genre Writers */}
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-white/10 hover:border-teal-500/30 transition-all duration-300 group">
<div className="flex items-center mb-4">
<div
className="flex items-center justify-center w-12 h-12 rounded-full text-white mr-4 group-hover:scale-110 transition-transform duration-300"
style={{ backgroundColor: '#0F766E' }}
>
<AcademicCapIcon className="w-6 h-6" />
</div>
<h3 className="text-lg sm:text-xl font-semibold" style={{ color: '#FFFFFF' }}>
Genre Specialists
</h3>
</div>
<p className="text-sm sm:text-base mb-4" style={{ color: '#FEF4F4' }}>
<strong>For Genre Experts:</strong> Whether you write fantasy, romance, mystery, or sci-fi, get specialized tools and insights for your genre.
</p>
<ul className="space-y-2 text-sm" style={{ color: '#FEF4F4' }}>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Genre-specific templates
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
World-building tools
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-2 text-teal-400" />
Plot structure guides
</li>
</ul>
</div>
</div>
</div>
</div>
{/* Pricing Section */}
<div className="py-12 sm:py-16 lg:py-20 relative z-10" style={{ backgroundColor: '#FEF4F4' }}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-tight" style={{ color: '#343F56' }}>
Start Writing for Free, Upgrade When Ready
</h2>
<p className="mt-4 max-w-2xl text-base sm:text-lg lg:text-xl mx-auto" style={{ color: '#343F56' }}>
No credit card required. Begin your novel today and upgrade only when you need more power to finish your masterpiece.
</p>
</div>
<div className="mt-12 sm:mt-16 grid gap-8 lg:grid-cols-4">
{/* Free Plan */}
<div className="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-lg">
<div className="text-center">
<h3 className="text-lg sm:text-xl font-semibold mb-2" style={{ color: '#343F56' }}>
Free
</h3>
<div className="text-3xl sm:text-4xl font-bold mb-4" style={{ color: '#0F766E' }}>
$0
<span className="text-sm font-normal" style={{ color: '#343F56' }}>/month</span>
</div>
<p className="text-sm sm:text-base mb-6" style={{ color: '#343F56' }}>
Perfect for trying Bookwiz risk-free
</p>
</div>
<ul className="space-y-3 mb-8">
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Create up to 3 books</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>3 🧠 Smart AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>15 ⚡ Fast AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>100MB cloud storage</span>
</li>
</ul>
<button
className="w-full py-3 px-4 text-sm font-medium rounded-lg border transition-colors"
style={{
borderColor: '#0F766E',
color: '#0F766E',
backgroundColor: 'transparent'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#0F766E'
e.currentTarget.style.color = '#FFFFFF'
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'transparent'
e.currentTarget.style.color = '#0F766E'
}}
onClick={() => window.location.href = '/auth/login'}
>
Start Free - No Credit Card
</button>
</div>
{/* Explorer Plan */}
<div className="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-lg">
<div className="text-center">
<h3 className="text-lg sm:text-xl font-semibold mb-2" style={{ color: '#343F56' }}>
Explorer
</h3>
<div className="text-3xl sm:text-4xl font-bold mb-4" style={{ color: '#0F766E' }}>
$9
<span className="text-sm font-normal" style={{ color: '#343F56' }}>/month</span>
</div>
<p className="text-sm sm:text-base mb-6" style={{ color: '#343F56' }}>
Perfect for writers just starting their journey
</p>
</div>
<ul className="space-y-3 mb-8">
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Unlimited writing projects</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>100 🧠 Smart AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Unlimited ⚡ Fast AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>1GB cloud storage</span>
</li>
</ul>
<button
className="w-full py-3 px-4 text-sm font-medium rounded-lg border transition-colors"
style={{
borderColor: '#0F766E',
color: '#0F766E',
backgroundColor: 'transparent'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#0F766E'
e.currentTarget.style.color = '#FFFFFF'
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'transparent'
e.currentTarget.style.color = '#0F766E'
}}
onClick={() => window.location.href = '/auth/login'}
>
Start Writing
</button>
</div>
{/* Storyteller Plan - Most Popular */}
<div className="bg-white rounded-2xl p-6 sm:p-8 border-2 shadow-xl relative" style={{ borderColor: '#0F766E' }}>
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
<div className="py-2 px-6 rounded-full text-sm font-semibold text-white" style={{ backgroundColor: '#0F766E' }}>
Most Popular
</div>
</div>
<div className="text-center">
<h3 className="text-lg sm:text-xl font-semibold mb-2" style={{ color: '#343F56' }}>
Storyteller
</h3>
<div className="text-3xl sm:text-4xl font-bold mb-4" style={{ color: '#0F766E' }}>
$35
<span className="text-sm font-normal" style={{ color: '#343F56' }}>/month</span>
</div>
<p className="text-sm sm:text-base mb-6" style={{ color: '#343F56' }}>
For serious writers crafting their masterpieces
</p>
</div>
<ul className="space-y-3 mb-8">
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Everything in Explorer</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>500 🧠 Smart AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>10GB cloud storage</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Priority support</span>
</li>
</ul>
<button
className="w-full py-3 px-4 text-sm font-medium rounded-lg text-white transition-all duration-200 hover:opacity-90"
style={{ backgroundColor: '#0F766E' }}
onClick={() => window.location.href = '/auth/login'}
>
Upgrade to Storyteller
</button>
</div>
{/* Professional Plan */}
<div className="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-lg">
<div className="text-center">
<h3 className="text-lg sm:text-xl font-semibold mb-2" style={{ color: '#343F56' }}>
Professional
</h3>
<div className="text-3xl sm:text-4xl font-bold mb-4" style={{ color: '#0F766E' }}>
$99
<span className="text-sm font-normal" style={{ color: '#343F56' }}>/month</span>
</div>
<p className="text-sm sm:text-base mb-6" style={{ color: '#343F56' }}>
For professional authors and publishing teams
</p>
</div>
<ul className="space-y-3 mb-8">
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>Everything in Storyteller</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>2000 🧠 Smart AI prompts</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>20GB cloud storage</span>
</li>
<li className="flex items-center">
<CheckIcon className="w-4 h-4 mr-3" style={{ color: '#0F766E' }} />
<span className="text-sm" style={{ color: '#343F56' }}>24/7 priority support</span>
</li>
</ul>
<button
className="w-full py-3 px-4 text-sm font-medium rounded-lg border transition-colors"
style={{
borderColor: '#0F766E',
color: '#0F766E',
backgroundColor: 'transparent'
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = '#0F766E'
e.currentTarget.style.color = '#FFFFFF'
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = 'transparent'
e.currentTarget.style.color = '#0F766E'
}}
onClick={() => window.location.href = '/auth/login'}
>
Upgrade to Professional
</button>
</div>
</div>
<div className="mt-8 text-center">
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 text-sm" style={{ color: '#343F56' }}>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span className="font-medium">30-day money-back guarantee</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
</svg>
<span className="font-medium">Enterprise-grade security</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
</svg>
<span className="font-medium">24/7 support</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-emerald-500" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
</svg>
<span className="font-medium">Cancel anytime</span>
</div>
</div>
</div>
</div>
</div>
{/* Final CTA Section */}
<div className="relative z-10 overflow-hidden" style={{
background: 'linear-gradient(135deg, #343F56 0%, #1E293B 100%)',
boxShadow: 'inset 0 0 100px rgba(0, 0, 0, 0.3)'
}}>
<div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{
backgroundImage: 'radial-gradient(circle at 20% 20%, rgba(15, 118, 110, 0.4) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(15, 118, 110, 0.4) 0%, transparent 50%)',
animation: 'pulse 8s ease-in-out infinite alternate'
}}></div>
</div>
<div className="max-w-7xl mx-auto py-16 sm:py-20 lg:py-24 px-4 sm:px-6 lg:px-8 relative">
<div className="text-center">
<div className="inline-flex items-center px-4 py-2 rounded-full bg-teal-500/10 border border-teal-500/20 text-teal-400 text-sm font-medium mb-6">
<SparklesIcon className="w-4 h-4 mr-2" />
Start Your Writing Journey Today
</div>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-6">
<span className="block text-white mb-2">Ready to Write Your Masterpiece?</span>
<span className="block bg-gradient-to-r from-teal-400 to-cyan-400 bg-clip-text text-transparent">
Let's Begin Your Story
</span>
</h2>
<p className="mt-4 max-w-2xl mx-auto text-lg sm:text-xl text-slate-300 mb-8">
Join 55,000+ authors who've already written their breakthrough novel. Your story is waiting.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button
onClick={() => window.location.href = '/auth/login'}
className="w-full sm:w-auto px-8 py-4 text-base font-medium rounded-lg text-white transform hover:scale-105 transition-all duration-200"
style={{
backgroundColor: '#0F766E',
boxShadow: '0 0 20px rgba(15, 118, 110, 0.4), 0 0 40px rgba(15, 118, 110, 0.2)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.boxShadow = '0 0 30px rgba(15, 118, 110, 0.6), 0 0 60px rgba(15, 118, 110, 0.3)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.boxShadow = '0 0 20px rgba(15, 118, 110, 0.4), 0 0 40px rgba(15, 118, 110, 0.2)'
}}
>
Start Writing Now
</button>
</div>
<p className="mt-6 text-sm text-slate-400">
No credit card required. Start with our free plan and upgrade anytime.
</p>
</div>
</div>
</div>
</div>
{/* Video Modal */}
<VideoModal
isOpen={isVideoModalOpen}
onClose={() => setIsVideoModalOpen(false)}
embedUrl="https://www.veed.io/embed/d002828c-4b1e-4552-8d87-d6ce48b05d4a?watermark=0&color=&sharing=0&title=0&autoplay=1&volume=100&unmuted=1"
title="Bookwiz Demo - 2 Minutes"
/>
</>
)
}