commit 9fc5ac0e022f682ff9bab25c0984ae78529ba9c2 Author: thecyberlearn Date: Sun Aug 17 13:02:22 2025 +0530 Initial commit: AI Brand Strategy Generator with modern UI 🚀 Added comprehensive brand strategy generation tool with: - Modern dark theme with glassmorphism design - Multi-step form with progressive disclosure - AI autofill functionality with industry-specific templates - SOSTAC+RACE framework implementation - Responsive design with smooth animations - PDF export capability simulation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude diff --git a/index.html b/index.html new file mode 100644 index 0000000..456ecd8 --- /dev/null +++ b/index.html @@ -0,0 +1,258 @@ + + + + + + + + AI Brand Strategy Generator - Internal Tool + + + + + + + + + + + + + +
+ +
+
+

+ 🚀 + AI + Brand + Strategy + Generator +

+

+ Professional Brand Strategies + in Minutes - Internal Staff Tool +

+
+
+
+ + +
+ + +
+
+
+

Staff Login

+

Access your brand strategy dashboard

+
+ + + + + +
+
+
+ + +
+
+ + +
+ +
+
+ + +
+

Quick Demo Scenarios

+
+
+

🚀 Tech Startup

+

AI-powered SaaS platform seeking Series A funding and market expansion

+
+
+

🏥 Healthcare Practice

+

Multi-location dental practice looking to modernize patient acquisition

+
+
+

🛍️ E-commerce Retail

+

Fashion brand transitioning from brick-and-mortar to online-first strategy

+
+
+
+
+
+ + +
+
+
+

Staff Dashboard

+ +
+ +
+
+
+ 📊 +

Create New Strategy

+
+

Generate a comprehensive brand strategy using our AI-powered SOSTAC+RACE framework

+ +
+ +
+
+ 📁 +

Recent Projects

+
+
+
+ QuantumFlow AI + - Completed 2 days ago +
+
+ SmileCare Dental + - Completed 1 week ago +
+
+ EcoStyle Fashion + - Completed 2 weeks ago +
+
+
+ +
+
+ 📈 +

Usage Analytics

+
+

This month:

+
    +
  • 12 strategies generated
    • +
  • 8 client presentations delivered
    • +
  • 95% client satisfaction score
    • +
  • Avg. creation time: 22 minutes
    • +
+
+ +
+
+ 📝 +

Strategy Templates

+
+

Industry-specific templates for faster strategy generation

+
+ Tech + Healthcare + Retail + Finance + Manufacturing +
+
+
+
+
+ + +
+
+
+

Client Information Intake

+

Let's gather the details needed to create your brand strategy

+
+ + +
+ + + + +
+
+
+
+ + +
+ +
+ + + +
+
+ + +
+
+ +
🚀 Initializing AI Strategy Engine...
+
+
+
+

This usually takes 30-60 seconds

+
+
+ + +
+
+ +
+

Brand Strategy Report

+

Generated for:

+ + +
+ + + +
+
+ + +
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/index1.html b/index1.html new file mode 100644 index 0000000..3a0cc61 --- /dev/null +++ b/index1.html @@ -0,0 +1,2129 @@ + + + + + + + Brand Strategy Generator - Professional Interface + + + + +
+ +
+
+ ✨ + AI-Powered Strategy Generation +
+

Brand Strategy Generator

+

+ Create professional, comprehensive brand strategies in minutes with our advanced AI platform +

+
+ + +
+ + +
+ +
+ + +
+
+
+

Dashboard

+ +
+ +
+
+
+ 📊 +

New Strategy

+
+

Generate a comprehensive brand strategy using our AI-powered framework with market analysis and strategic recommendations.

+ +
+ +
+
+ 📈 +

Recent Projects

+
+
+
+
QuantumFlow AI
+
Completed 2 days ago
+
+
+
SmileCare Dental
+
Completed 1 week ago
+
+
+
EcoStyle Fashion
+
Completed 2 weeks ago
+
+
+
+ +
+
+ 📊 +

Analytics

+
+

Performance this month:

+
    +
  • 12 strategies generated
    • +
  • 8 client presentations delivered
    • +
  • 95% client satisfaction score
    • +
  • Average creation time: 22 minutes
    • +
+
+ +
+
+ 📋 +

Templates

+
+

Industry-specific templates for accelerated strategy development

+
+ Technology + Healthcare + Retail + Finance + Manufacturing + Professional Services +
+
+
+
+
+ + +
+
+
+

Client Information

+

Gather the essential details to create a comprehensive brand strategy

+
+ + +
+ +
+
+
1
+
Company Basics
+
+
+
2
+
Current Situation
+
+
+
3
+
Objectives
+
+
+
4
+
Target Audience
+
+
+
5
+
Competition
+
+
+ + +
+
+
+
+ + +
+ +
+
+

+ 🏢 + Company Basics +

+

Tell us about your company and industry

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 📊 + Current Situation +

+

Help us understand your current market position

+ + +
+

+ ✨ AI Smart Fill: Let our AI analyze your company and automatically complete the remaining form fields +

+ +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 🎯 + Business Objectives +

+

Define your goals and growth targets

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 👥 + Target Audience +

+

Tell us about your ideal customers

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ ⚔️ + Competitive Landscape +

+

Help us understand your competitive environment

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+
+ +
Analyzing your business data...
+
+
+
+

This typically takes 30-60 seconds

+
+
+ + +
+
+ +
+

Brand Strategy Report

+

Generated for:

+ + +
+ + + +
+
+ + +
+
+

🎯 Executive Summary

+

This comprehensive brand strategy report provides a roadmap for achieving sustainable growth and market leadership. Our analysis reveals significant opportunities for brand differentiation and market expansion through strategic positioning and targeted marketing initiatives.

+ +

Key Recommendations:

+
    +
  • Implement integrated digital marketing strategy to increase brand awareness by 200%
    • +
  • Develop thought leadership content program to establish market authority
    • +
  • Launch customer advocacy program to drive organic growth
    • +
  • Optimize conversion funnel to improve customer acquisition efficiency
    • +
+
+ +
+

📊 Situation Analysis

+

Company Overview: A forward-thinking company positioned for growth in the competitive marketplace with strong fundamentals and clear market opportunity.

+

Current Challenges: Limited brand awareness and market penetration in target segments, requiring strategic focus on customer acquisition and brand building.

+ +
+ 📊 Market Position Analysis & Competitive Mapping +
+ +

SWOT Analysis:

+
    +
  • Strengths: Innovative solutions, strong value proposition, dedicated team, market timing
    • +
  • Weaknesses: Limited brand recognition, resource constraints, market education needs
    • +
  • Opportunities: Growing market demand, digital transformation trends, underserved customer segments
    • +
  • Threats: Competitive pressure, market saturation risks, economic uncertainties
    • +
+
+ +
+

🚀 Strategic Objectives

+

Primary Goals (12-month timeline):

+
    +
  • Increase brand awareness by 200% in target market segments
    • +
  • Achieve 50-100% revenue growth through strategic initiatives
    • +
  • Build qualified customer pipeline of 10,000+ leads
    • +
  • Establish thought leadership in industry sector
    • +
  • Improve customer satisfaction scores to 4.5+ stars
    • +
  • Expand market reach in target geographic markets
    • +
+ +
+ 📈 Revenue Growth Projection & Milestone Timeline +
+ +

Key Performance Indicators:

+
    +
  • Brand awareness metrics (surveys, social mentions, search volume)
    • +
  • Website traffic growth and conversion rate optimization
    • +
  • Customer acquisition cost (CAC) and lifetime value (CLV)
    • +
  • Market share growth and competitive positioning
    • +
  • Lead generation volume and quality metrics
    • +
  • Customer retention and referral rates
    • +
+
+ +
+

💡 Brand Strategy & Positioning

+

Brand Positioning Statement:
+ Your Company is the innovative choice for forward-thinking businesses seeking superior solutions and exceptional value in the market. We deliver measurable results through our unique approach that combines cutting-edge innovation with personalized service.

+ +

Value Proposition Framework:

+
    +
  • Core Value: Delivering measurable results through innovative solutions tailored to customer needs
    • +
  • Differentiator: Unique approach combining technology with personalized service and industry expertise
    • +
  • Proof Points: Customer success stories, industry certifications, proven ROI, testimonials
    • +
  • Brand Promise: Transforming businesses through reliable, innovative solutions that drive growth
    • +
+ +

Target Audience Segmentation:

+
    +
  • Primary Segment: Decision-makers in mid-to-large enterprises seeking innovative solutions
    • +
  • Secondary Segment: Influencers, consultants, and industry advocates
    • +
  • Geographic Focus: National markets with expansion potential
    • +
  • Psychographic Profile: Innovation-focused, results-driven, value long-term partnerships
    • +
+
+ +
+

⚡ Tactical Implementation (RACE Framework)

+ +

🎯 REACH - Build Awareness & Drive Traffic:

+
    +
  • SEO Strategy: Target high-intent keywords related to industry solutions
    • +
  • Paid Advertising: Google Ads, LinkedIn campaigns targeting decision-makers
    • +
  • Content Marketing: Industry-specific blog content, whitepapers, case studies
    • +
  • Social Media: LinkedIn thought leadership, industry forum participation
    • +
  • PR & Outreach: Industry publications, podcast appearances, conference speaking
    • +
  • Partnership Marketing: Strategic alliances with complementary service providers
    • +
+ +

💬 ACT - Drive Engagement & Interest:

+
    +
  • Educational Content: Address customer pain points through valuable resources
    • +
  • Interactive Experiences: Webinar series, live demos, virtual consultations
    • +
  • Lead Magnets: Industry reports, ROI calculators, assessment tools
    • +
  • Community Building: Industry forums, customer advisory boards, user groups
    • +
  • Email Marketing: Nurture sequences with personalized industry insights
    • +
  • Retargeting Campaigns: Multi-touch attribution across digital channels
    • +
+ +

💰 CONVERT - Generate Quality Leads & Sales:

+
    +
  • Landing Page Optimization: Industry-specific pages with clear value propositions
    • +
  • Conversion Rate Optimization: A/B test forms, CTAs, and user experience
    • +
  • Sales Enablement: Demo scripts, objection handling, competitive battlecards
    • +
  • Marketing Automation: Lead scoring, progressive profiling, behavior triggers
    • +
  • Free Trials/Consultations: Low-risk entry points for prospects
    • +
  • Testimonials & Social Proof: Industry-specific case studies and references
    • +
+ +

❤️ ENGAGE - Build Loyalty & Advocacy:

+
    +
  • Customer Success Program: Onboarding, training, ongoing support
    • +
  • Regular Communication: Newsletters, product updates, industry insights
    • +
  • Loyalty Initiatives: Exclusive access, early features, VIP support
    • +
  • Referral Program: Incentivize customer advocacy and word-of-mouth
    • +
+ +
+ 📅 Implementation Timeline & Resource Allocation +
+
+ +
+

📋 90-Day Action Plan

+ +

Month 1 - Foundation & Setup:

+
    +
  • Week 1-2: Website optimization, analytics setup, brand asset creation
    • +
  • Week 3-4: Content calendar development, initial content creation, SEO implementation
    • +
  • Key Deliverables: Brand guidelines, website updates, content strategy
    • +
  • Budget Allocation: 40% of monthly budget for setup and tools
    • +
+ +

Month 2 - Campaign Launch & Amplification:

+
    +
  • Week 1-2: Launch paid advertising campaigns, begin content distribution
    • +
  • Week 3-4: Social media activation, email marketing sequences, PR outreach
    • +
  • Key Deliverables: Campaign dashboards, lead generation systems, content library
    • +
  • Budget Allocation: 60% of monthly budget for advertising and promotion
    • +
+ +

Month 3 - Optimization & Scale:

+
    +
  • Week 1-2: Analyze performance data, optimize high-performing channels
    • +
  • Week 3-4: Scale successful campaigns, launch retention programs
    • +
  • Key Deliverables: Performance reports, optimization recommendations, scale strategy
    • +
  • Budget Allocation: Data-driven allocation based on channel performance
    • +
+ +

Resource Requirements:

+
    +
  • Team Structure: Marketing manager, content specialist, PPC expert, designer
    • +
  • Technology Stack: CRM, marketing automation, analytics, design tools
    • +
  • External Partners: PR agency, industry consultants, freelance specialists
    • +
+
+ +
+

📈 Measurement & KPI Framework

+ +

Performance Tracking Schedule:

+
    +
  • Daily: Campaign performance, website traffic, lead generation metrics
    • +
  • Weekly: Conversion rates, cost metrics, competitive analysis
    • +
  • Monthly: Revenue attribution, customer acquisition cost, lifetime value
    • +
  • Quarterly: Brand awareness, market share, strategic goal assessment
    • +
+ +

Analytics & Reporting Tools:

+
    +
  • Website Analytics: Google Analytics 4, heatmap analysis, conversion tracking
    • +
  • CRM Integration: Sales pipeline tracking, customer journey mapping
    • +
  • Social Media Analytics: Engagement metrics, reach, brand mention tracking
    • +
  • Email Marketing: Open rates, click-through rates, automation performance
    • +
  • Brand Tracking: Awareness surveys, sentiment analysis, competitive positioning
    • +
+ +
+ 📊 Performance Dashboard & KPI Tracking +
+ +

Success Benchmarks & Milestones:

+
    +
  • Month 1: 25% increase in qualified website traffic and lead generation
    • +
  • Month 3: 50% improvement in conversion rates and pipeline quality
    • +
  • Month 6: 100% increase in brand awareness and market recognition
    • +
  • Month 12: Target revenue growth achieved with sustainable growth systems
    • +
+ +

Optimization Framework:

+
    +
  • Continuous Testing: A/B test campaigns, messaging, and user experience
    • +
  • Performance Reviews: Monthly strategy sessions and quarterly deep dives
    • +
  • Market Adaptation: Quarterly competitive analysis and trend assessment
    • +
  • ROI Analysis: Channel performance evaluation and budget reallocation
    • +
+
+ +
+

💼 Investment Summary & ROI Projections

+ +

Recommended Investment Allocation:

+
    +
  • Digital Advertising (35%): Google Ads, LinkedIn, industry platforms, retargeting
    • +
  • Content & Creative (25%): Content creation, design, video production, copywriting
    • +
  • Technology & Tools (20%): Marketing automation, CRM, analytics, optimization tools
    • +
  • Events & PR (15%): Industry conferences, webinars, media relations, thought leadership
    • +
  • Testing & Optimization (5%): A/B testing tools, market research, performance analysis
    • +
+ +
+ 💰 Investment Allocation & ROI Projection Chart +
+ +

Financial Projections:

+
    +
  • Expected ROI: 300-500% return on marketing investment within 12 months
    • +
  • Payback Period: 6-8 months for initial marketing investment recovery
    • +
  • Customer Acquisition Cost: Target 20-25% improvement in CAC efficiency
    • +
  • Lifetime Value Growth: 40-60% increase in customer lifetime value
    • +
+ +

Risk Mitigation:

+
    +
  • Diversified Channels: Multiple traffic sources to reduce dependency risk
    • +
  • Flexible Budget: Ability to reallocate based on performance data
    • +
  • Competitive Monitoring: Regular analysis to maintain market advantage
    • +
  • Performance Thresholds: Clear KPIs with optimization triggers
    • +
+
+ +
+

🔮 Next Steps & Implementation Roadmap

+ +

Immediate Actions (Next 30 Days):

+
    +
  • Secure stakeholder buy-in and budget approval
    • +
  • Assemble implementation team and assign responsibilities
    • +
  • Set up analytics and tracking infrastructure
    • +
  • Begin content creation and brand asset development
    • +
  • Initiate website optimization and SEO implementation
    • +
+ +

Success Factors:

+
    +
  • Leadership Commitment: Strong executive sponsorship and resource allocation
    • +
  • Cross-functional Alignment: Marketing, sales, and product team coordination
    • +
  • Data-Driven Decision Making: Regular performance review and optimization
    • +
  • Customer-Centric Focus: Continuous feedback integration and experience improvement
    • +
  • Agile Implementation: Flexible approach with rapid testing and iteration
    • +
+ +

Recommended Next Meeting: Schedule a strategy alignment session within 2 weeks to review this document, finalize implementation priorities, and establish regular check-in cadence.

+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/modern_brand_strategy_generator.html b/modern_brand_strategy_generator.html new file mode 100644 index 0000000..b8b5a33 --- /dev/null +++ b/modern_brand_strategy_generator.html @@ -0,0 +1,1900 @@ + + + + + + + AI Brand Strategy Generator - Modern Interface + + + + +
+ +
+ +
+
+ ✨ + AI-Powered Strategy Generation +
+

Brand Strategy Generator

+

+ Create professional brand strategies in minutes with cutting-edge AI technology and modern UX design +

+
+ + +
+ + +
+ +
+ + +
+
+
+

Dashboard

+ +
+ +
+
+
+ 📊 +

Create New Strategy

+
+

Generate a comprehensive brand strategy using our AI-powered SOSTAC+RACE framework

+ +
+ +
+
+ 📈 +

Recent Projects

+
+
+
+ QuantumFlow AI + - Completed 2 days ago +
+
+ SmileCare Dental + - Completed 1 week ago +
+
+ EcoStyle Fashion + - Completed 2 weeks ago +
+
+
+ +
+
+ 📊 +

Usage Analytics

+
+

This month:

+
    +
  • 12 strategies generated
    • +
  • 8 client presentations delivered
    • +
  • 95% client satisfaction score
    • +
  • Avg. creation time: 22 minutes
    • +
+
+ +
+
+ 📋 +

Strategy Templates

+
+

Industry-specific templates for faster strategy generation

+
+ Tech + Healthcare + Retail + Finance +
+
+
+
+
+ + +
+
+
+

Client Information

+

Let's gather the details needed to create your brand strategy

+
+ + +
+ +
+
+
1
+
Company Basics
+
+
+
2
+
Current Situation
+
+
+
3
+
Objectives
+
+
+
4
+
Target Audience
+
+
+
5
+
Competition
+
+
+ + +
+
+
+
+ + +
+ +
+
+

+ 🏢 + Company Basics +

+

Tell us about your company and what industry you're in

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 📊 + Current Situation +

+

Help us understand your current market position and challenges

+ + +
+

+ ✨ AI Smart Fill: Let our AI analyze your company and automatically complete the remaining form fields +

+ +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 🎯 + Business Objectives +

+

Define your goals and growth targets

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ 👥 + Target Audience +

+

Tell us about your ideal customers

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

+ ⚔️ + Competitive Landscape +

+

Help us understand your competitive environment

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + +
+ + +
+
+
+ + +
+
+ +
🚀 Initializing AI Strategy Engine...
+
+
+
+

This usually takes 30-60 seconds

+
+
+ + +
+
+ +
+

Brand Strategy Report

+

Generated for:

+ + +
+ + + +
+
+ + +
+
+

🎯 Situation Analysis

+

Company Overview: A forward-thinking company positioned for growth in the competitive marketplace.

+

Current Challenges: Limited brand awareness and market penetration in target segments.

+ +
+ 📊 Market Position Analysis & Competitive Mapping +
+ +

SWOT Analysis:

+
    +
  • Strengths: Innovative solutions, strong value proposition, dedicated team
    • +
  • Weaknesses: Limited brand recognition, resource constraints, market education needs
    • +
  • Opportunities: Growing market demand, digital transformation trends, underserved customer segments
    • +
  • Threats: Competitive pressure, market saturation risks, economic uncertainties
    • +
+
+ +
+

🚀 Strategic Objectives

+

Primary Goals (12-month timeline):

+
    +
  • Increase brand awareness by 200% in target market
    • +
  • Achieve 50-100% revenue growth
    • +
  • Build qualified customer pipeline of 10,000+ leads
    • +
  • Establish thought leadership in industry sector
    • +
  • Improve customer satisfaction scores to 4.5+ stars
    • +
  • Expand market reach in target markets
    • +
+ +
+ 📈 Revenue Growth Projection & Milestone Timeline +
+
+ +
+

💡 Brand Strategy & Positioning

+

Brand Positioning Statement:
+ Your Company is the innovative choice for forward-thinking businesses seeking superior solutions and exceptional value in the technology space. We deliver measurable results through our unique approach that combines cutting-edge innovation with personalized service.

+ +

Value Proposition Framework:

+
    +
  • Core Value: Delivering measurable results through innovative solutions tailored to customer needs
    • +
  • Differentiator: Unique approach combining technology with personalized service and industry expertise
    • +
  • Proof Points: Customer success stories, industry certifications, proven ROI, testimonials
    • +
  • Brand Promise: Transforming businesses through reliable, innovative solutions that drive growth
    • +
+
+ +
+

⚡ Tactical Implementation (RACE Framework)

+ +

🎯 REACH - Build Awareness & Drive Traffic:

+
    +
  • SEO Strategy: Target high-intent keywords related to industry solutions
    • +
  • Paid Advertising: Google Ads, LinkedIn campaigns targeting decision-makers
    • +
  • Content Marketing: Industry-specific blog content, whitepapers, case studies
    • +
  • Social Media: LinkedIn thought leadership, industry forum participation
    • +
  • PR & Outreach: Industry publications, podcast appearances, conference speaking
    • +
+ +

💬 ACT - Drive Engagement & Interest:

+
    +
  • Educational Content: Address customer pain points through valuable resources
    • +
  • Interactive Experiences: Webinar series, live demos, virtual consultations
    • +
  • Lead Magnets: Industry reports, ROI calculators, assessment tools
    • +
  • Community Building: Industry forums, customer advisory boards, user groups
    • +
+ +
+ 📅 Implementation Timeline & Resource Allocation +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/prd.md b/prd.md new file mode 100644 index 0000000..036cc67 --- /dev/null +++ b/prd.md @@ -0,0 +1,355 @@ + + AI Brand Strategy Generator - Internal Staff Tool + + --- + 1. Product Overview + + Product Name: AI Brand Strategy Generator (Internal Tool) + + Version: MVP 1.0 + + Date: December 2024 + + Product Manager: [Your Team] + + Executive Summary + + An internal web-based tool that enables staff members to generate + comprehensive AI-powered brand strategies for clients using the SOSTAC+RACE + methodology. The tool simulates AI processing while delivering professional, + customizable brand strategy documents. + + --- + 2. Business Objectives + + Primary Goals + + - Enable staff to create professional brand strategies in 30 minutes vs. 5-10 + hours manually + - Standardize brand strategy delivery across all client engagements + - Improve proposal win rate by providing instant, professional strategy + previews + - Reduce strategy creation costs by 80% + + Success Metrics + + - Staff adoption rate: >90% within 30 dLimited brand awareness in competitive tech market, high customer acquisition costs, need to establish credibility and trust, difficulty communicating complex technical value propositions to non-technical decision makersays + - Strategy creation time: <30 minutes per client + - Client satisfaction with strategies: >4.5/5 + - Proposal conversion rate increase: >25% + + --- + 3. Target Users + + Primary Users: Internal Staff + + - Brand Strategists: Create strategies for client presentations + - Account Managers: Generate proposals and client materials + - Sales Team: Create quick strategy previews for prospects + - Creative Directors: Develop brand positioning and messaging + + Secondary Users: Clients + + - Receive professional strategy documents + - Review and approve strategy recommendations + - Use strategies for internal team alignment + + --- + 4. Core Features & Requirements + + 4.1 User Authentication & Dashboard + + Staff Login System + - Simple username/password authentication + - Role-based access (Strategist, Manager, Admin) + - Session management with auto-logout + + Dashboard Interface + - Recent client projects overview + - Quick actions: "New Strategy", "Client Library" + - Strategy templates library + - Usage analytics for managers + + 4.2 Client Information Intake + + Multi-Step Form (5 Steps) + + Step 1: Company Basics + - Company name (required) + - Industry selection (dropdown: Tech, Healthcare, Finance, Retail, + Professional Services, Other) + - Company size (Startup, Small, Medium, Enterprise) + - Website URL (optional) + + Step 2: Current Situation + - Brief company description (text area) + - Current brand challenges (checkboxes + other) + - Existing marketing efforts (checkboxes) + - Budget range (dropdown) + + Step 3: Business Objectives + - Primary business goals (multiple selection) + - Target revenue growth (percentage) + - Timeline for objectives (6 months, 1 year, 2+ years) + - Key performance indicators (KPIs) + + Step 4: Target Audience + - Primary customer demographics + - Customer pain points + - Customer journey stage focus + - Geographic markets + + Step 5: Competitive Landscape + - Main competitors (up to 5) + - Competitive advantages + - Market positioning goals + - Differentiation factors + + Form Features + - Progress bar showing completion (0-100%) + - Save draft functionality + - Form validation with helpful error messages + - Auto-save every 30 seconds + + 4.3 AI Processing Simulation + + Loading Experience + - Professional loading screen with company logo + - Dynamic status messages: + - "Analyzing market position..." + - "Researching competitive landscape..." + - "Generating strategic recommendations..." + - "Optimizing RACE framework..." + - "Finalizing strategy document..." + - Progress bar animation (30-60 seconds total) + - Background processing simulation + + 4.4 Strategy Generation Engine + + SOSTAC Framework Output + + Situation Analysis + - Company overview and current position + - Market analysis and trends + - SWOT analysis (Strengths, Weaknesses, Opportunities, Threats) + - Competitive landscape assessment + + Objectives + - 5-7 SMART goals based on client input + - Specific KPIs and success metrics + - Timeline-based milestones + - Revenue and growth projections + + Strategy + - Brand positioning statement + - Value proposition framework + - Target audience segmentation + - Messaging architecture + + Tactics (RACE Framework) + - Reach: SEO, social media, advertising strategies + - Act: Content marketing, engagement tactics + - Convert: Sales funnel optimization, lead generation + - Engage: Customer retention, loyalty programs + + Action Plan + - 90-day implementation roadmap + - Task breakdown by priority + - Resource requirements + - Team responsibilities + + Control + - Monitoring and measurement framework + - Analytics and reporting recommendations + - Review and optimization schedule + + 4.5 Strategy Document Interface + + Professional Output Display + - Clean, business-appropriate design + - Expandable/collapsible sections + - Print-friendly layout + - Company branding integration + + Editing Capabilities + - Inline text editing for customization + - Section reordering (drag-and-drop) + - Custom section addition + - Comments and notes system + + Export Options + - PDF download (professional formatting) + - Word document export + - Email delivery to client + - Presentation slide generation + + 4.6 Template Management + + Industry Templates + - Pre-built strategies for common industries + - Customizable template sections + - Template versioning and updates + - Success metrics by template + + Custom Templates + - Create templates from successful strategies + - Share templates across team + - Template approval workflow + - Usage tracking and optimization + + --- + 5. Technical Requirements + + 5.1 Technology Stack + + - Frontend: HTML5, CSS3, Vanilla JavaScript + - Backend: Static JSON files for data storage + - Processing: Client-side JavaScript simulation + - Export: jsPDF library for PDF generation + - Hosting: Simple web server (Apache/Nginx) + + 5.2 Performance Requirements + + - Page load time: <3 seconds + - Form submission: <1 second + - Strategy generation: 30-60 seconds (simulated) + - PDF generation: <10 seconds + - Mobile responsive design + + 5.3 Browser Compatibility + + - Chrome 90+ (primary) + - Firefox 88+ (secondary) + - Safari 14+ (secondary) + - Edge 90+ (secondary) + + --- + 6. User Experience (UX) Requirements + + 6.1 Design Principles + + - Professional, clean interface + - Intuitive navigation and flow + - Consistent branding and styling + - Accessible design (WCAG 2.1 AA) + + 6.2 User Flow + + 1. Staff login → Dashboard + 2. Click "New Strategy" → Client intake form + 3. Complete 5-step form → Review submission + 4. AI processing → Strategy generation + 5. Review/edit strategy → Export/share + 6. Save to client library → Dashboard + + 6.3 Error Handling + + - Clear error messages with solutions + - Graceful degradation for missing data + - Form validation with inline feedback + - Recovery options for incomplete sessions + + --- + 7. Content Requirements + + 7.1 Strategy Templates + + - Technology Startup: SaaS, mobile apps, AI/ML + - Healthcare Practice: Medical, dental, wellness + - E-commerce Retail: Online stores, marketplaces + - Professional Services: Law, consulting, finance + - Manufacturing: B2B, industrial, consumer goods + + 7.2 Content Quality + + - Professional business language + - Industry-specific terminology + - Actionable recommendations + - Measurable objectives and KPIs + - Realistic timelines and budgets + + --- + 8. Development Phases + + Phase 1: Core MVP (2 weeks) + + - Basic HTML/CSS structure + - 5-step intake form + - Simple strategy output + - PDF export functionality + + Phase 2: Enhancement (1 week) + + - Loading animations + - Template system + - Edit capabilities + - Dashboard interface + + Phase 3: Polish (1 week) + + - Advanced styling + - Mobile responsiveness + - Error handling + - User testing and refinement + + --- + 9. Success Criteria + + MVP Launch Criteria + + - All 5 form steps functional + - Strategy generation working + - PDF export operational + - Professional visual design + - Mobile responsive + + User Acceptance Criteria + + - Staff can complete strategy in <30 minutes + - Generated strategies are business-appropriate + - PDF exports are client-ready + - Tool requires minimal training + - 90% staff adoption within 30 days + + --- + 10. Risks & Mitigation + + Technical Risks + + - Risk: Browser compatibility issues + - Mitigation: Test on all major browsers, provide fallbacks + + Business Risks + + - Risk: Staff resistance to new tool + - Mitigation: Involve staff in design process, provide training + + Content Risks + + - Risk: Generic, low-quality strategy output + - Mitigation: Professional copywriting, industry expert review + + --- + 11. Timeline & Resources + + Development Timeline + + - Week 1-2: Core functionality development + - Week 3: Enhancement and features + - Week 4: Testing, polish, and deployment + + Resource Requirements + + - 1 Frontend Developer (full-time) + - 1 Content Strategist (part-time) + - 1 Designer (part-time) + - Testing team (internal staff) + + Budget Estimate + + - Development: $8,000-12,000 + - Content creation: $2,000-3,000 + - Testing and refinement: $1,000-2,000 + - Total: $11,000-17,000 + + \ No newline at end of file diff --git a/req.md b/req.md new file mode 100644 index 0000000..0aabc13 --- /dev/null +++ b/req.md @@ -0,0 +1,69 @@ +│ Internal Staff Branding Tool MVP Plan │ │ +│ │ │ │ +│ │ Goal: Create a simple HTML/CSS mockup that looks like a working AI branding │ │ +│ │ tool for internal staff to use with clients. │ │ +│ │ │ │ +│ │ Phase 1: HTML/CSS Mockup Structure (Week 1) │ │ +│ │ │ │ +│ │ 1. Dashboard Landing Page │ │ +│ │ - Staff login simulation (fake login form) │ │ +│ │ - Client management dashboard │ │ +│ │ - "New Brand Strategy" button │ │ +│ │ - Recent projects list (fake data) │ │ +│ │ - Simple navigation menu │ │ +│ │ │ │ +│ │ 2. Client Intake Form │ │ +│ │ - Multi-step form for client information │ │ +│ │ - Company details, industry, objectives │ │ +│ │ - Target audience, current challenges │ │ +│ │ - Competitors, budget range │ │ +│ │ - Progress bar showing completion │ │ +│ │ │ │ +│ │ 3. AI Processing Simulation │ │ +│ │ - Loading screen with AI-themed animations │ │ +│ │ - "Analyzing brand positioning..." messages │ │ +│ │ - Progress indicators: "Researching competitors..." │ │ +│ │ - Simulated 30-60 second processing time │ │ +│ │ │ │ +│ │ 4. Generated Strategy Report │ │ +│ │ - Professional-looking output page │ │ +│ │ - Complete SOSTAC+RACE framework │ │ +│ │ - Charts and graphs (CSS-based) │ │ +│ │ - Downloadable "PDF" button (fake) │ │ +│ │ - Edit/customize options │ │ +│ │ │ │ +│ │ Phase 2: Interactive Elements (Week 2) │ │ +│ │ │ │ +│ │ 5. JavaScript Interactions │ │ +│ │ - Form validation and step progression │ │ +│ │ - Loading animations and timers │ │ +│ │ - Modal popups for editing sections │ │ +│ │ - Smooth scrolling and transitions │ │ +│ │ - Toggle switches for strategy options │ │ +│ │ │ │ +│ │ 6. Sample Data Generation │ │ +│ │ - Pre-written strategy templates │ │ +│ │ - Multiple industry examples │ │ +│ │ - Realistic company scenarios │ │ +│ │ - Professional business language │ │ +│ │ │ │ +│ │ Key Features: │ │ +│ │ │ │ +│ │ - Staff-focused UI: Professional internal tool aesthetic │ │ +│ │ - Client presentation mode: Clean output for client meetings │ │ +│ │ - Multiple templates: Different industries and business sizes │ │ +│ │ - Realistic output: Actual usable strategies (pre-written) │ │ +│ │ - Demo scenarios: 3-4 complete client examples │ │ +│ │ │ │ +│ │ Deliverables: │ │ +│ │ │ │ +│ │ 1. Single HTML file with embedded CSS/JS │ │ +│ │ 2. Sample client scenarios (tech startup, healthcare, retail) │ │ +│ │ 3. Professional strategy templates │ │ +│ │ 4. Staff instruction guide │ │ +│ │ 5. Client presentation mode │ │ +│ │ │ │ +│ │ Timeline: 2 weeks for complete HTML/CSS mockup │ │ +│ │ Complexity: Simple but professional-looking │ │ +│ │ Purpose: Internal tool for staff to generate client strategies │ │ +│ ╰─────────────────────────────────────────────────────────────────── \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..1cdf74c --- /dev/null +++ b/script.js @@ -0,0 +1,1043 @@ +// AI Brand Strategy Generator - Main Application Script +// Modern ES6+ JavaScript with clean architecture + +class BrandStrategyApp { + constructor() { + this.currentStep = 1; + this.totalSteps = 5; + this.formData = {}; + this.currentScreen = 'loginScreen'; + this.demoScenarios = this.initializeDemoScenarios(); + + this.init(); + } + + init() { + this.initHeaderAnimations(); + this.createFormSteps(); + this.showFormStep(1); + this.updateStepIndicator(); + this.updateProgressBar(); + this.setupAutoSave(); + this.setupEventListeners(); + } + + initHeaderAnimations() { + // Initialize sophisticated header animations with staggered reveals + const heroWords = document.querySelectorAll('.hero-word'); + const heroLines = document.querySelectorAll('.hero-line'); + const heroDecoration = document.querySelector('.hero-decoration'); + + // Animate words with staggered delays + heroWords.forEach((word, index) => { + const delay = parseInt(word.dataset.delay) || index * 100; + word.style.animationDelay = `${delay}ms`; + + // Add hover interaction for extra sophistication + word.addEventListener('mouseenter', () => { + word.style.transform = 'scale(1.05) rotateX(-5deg)'; + word.style.transition = 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)'; + }); + + word.addEventListener('mouseleave', () => { + word.style.transform = 'scale(1) rotateX(0deg)'; + }); + }); + + // Animate subtitle lines + heroLines.forEach((line, index) => { + const delay = parseInt(line.dataset.delay) || (600 + index * 200); + line.style.animationDelay = `${delay}ms`; + }); + + // Animate decoration element + if (heroDecoration) { + const delay = parseInt(heroDecoration.dataset.delay) || 1000; + heroDecoration.style.animationDelay = `${delay}ms`; + + // Add click interaction for decoration + heroDecoration.addEventListener('click', () => { + heroDecoration.style.animation = 'decorationShine 1s ease-in-out'; + setTimeout(() => { + heroDecoration.style.animation = ''; + }, 1000); + }); + } + + // Add parallax effect to header background + this.initParallaxEffect(); + } + + initParallaxEffect() { + const header = document.querySelector('.app-header'); + if (!header) return; + + window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const rate = scrolled * -0.5; + + if (header) { + header.style.transform = `translateY(${rate}px)`; + } + }); + } + + initializeDemoScenarios() { + return { + tech: { + companyName: "QuantumFlow AI", + industry: "technology", + companySize: "startup", + website: "https://quantumflow.ai", + description: "Revolutionary AI-powered workflow automation platform for enterprises seeking to transform their operational efficiency and reduce manual processes by up to 80%.", + challenges: "Limited brand awareness in competitive market, high customer acquisition costs, difficulty communicating complex AI value proposition to non-technical decision makers", + objectives: "Increase brand recognition by 300% in enterprise market, acquire 1000+ enterprise customers, achieve $10M ARR within 18 months, establish thought leadership in AI automation space", + targetAudience: "Enterprise CTOs, IT Directors, and Operations Managers at companies with 500+ employees, typically aged 35-55, focused on digital transformation and operational efficiency", + competitors: "Zapier, Microsoft Power Automate, UiPath, Automation Anywhere, ServiceNow", + budget: "50k-100k", + revenueGrowth: "100-200", + timeline: "18-months", + customerPains: "Manual repetitive tasks consuming 40% of employee time, disconnected systems requiring manual data transfer, lack of real-time operational visibility", + geography: "national", + advantages: "Advanced AI that learns from user patterns, 90% faster implementation than competitors, enterprise-grade security with SOC2 compliance", + positioning: "innovation" + }, + healthcare: { + companyName: "SmileCare Dental Group", + industry: "healthcare", + companySize: "medium", + website: "https://smilecare.com", + description: "Premier multi-location dental practice focused on comprehensive family and cosmetic dentistry, serving over 15,000 patients across 5 locations with state-of-the-art technology.", + challenges: "Patient acquisition in digital-first environment, competing with corporate dental chains, managing online reputation across multiple locations, inconsistent brand messaging", + objectives: "Increase new patient bookings by 150% across all locations, improve online reviews to 4.8+ stars, expand to 3 new locations within 2 years, launch comprehensive digital patient experience", + targetAudience: "Health-conscious families with children, young professionals aged 25-45, seniors seeking specialized care, patients interested in cosmetic dentistry and wellness", + competitors: "Aspen Dental, Heartland Dental, Pacific Dental Services, local independent practices, dental chains like Western Dental", + budget: "25k-50k", + revenueGrowth: "50-100", + timeline: "2-years", + customerPains: "Difficulty finding convenient appointment times, anxiety about dental procedures, confusion about insurance coverage, inconsistent care quality experiences", + geography: "local", + advantages: "Personalized care relationships, advanced pain-free technology, comprehensive family treatment under one roof, flexible scheduling and payment options", + positioning: "service" + }, + retail: { + companyName: "EcoStyle Fashion", + industry: "retail", + companySize: "small", + website: "https://ecostyle.com", + description: "Sustainable fashion brand creating ethically-made, eco-friendly apparel for conscious consumers, focusing on timeless designs and transparent supply chain practices.", + challenges: "Transition from physical retail to online-first strategy, building brand trust in digital space, competing with fast fashion pricing, educating consumers about sustainable fashion value", + objectives: "Achieve 70% online sales mix, build email list of 50,000 engaged subscribers, launch brand story campaign highlighting sustainability impact, increase average order value by 40%", + targetAudience: "Environmentally conscious millennials and Gen Z consumers aged 18-40, income $50k+, values-driven shopping behavior, active on social media and sustainability communities", + competitors: "Patagonia, Everlane, Reformation, Eileen Fisher, Organic Basics, local sustainable fashion brands", + budget: "10k-25k", + revenueGrowth: "50-100", + timeline: "1-year", + customerPains: "Difficulty finding stylish sustainable options, higher prices compared to fast fashion, uncertainty about true sustainability claims, limited size inclusivity in eco-fashion", + geography: "national", + advantages: "Fully transparent supply chain, carbon-neutral shipping, lifetime repair guarantee, inclusive sizing 0-24, partnership with environmental nonprofits", + positioning: "value" + } + }; + } + + setupEventListeners() { + // Prevent form submission on Enter key + document.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { + e.preventDefault(); + if (this.currentScreen === 'formScreen') { + this.nextStep(); + } + } + }); + + // Add smooth scrolling for better UX + document.addEventListener('scroll', this.debounce(this.updateScrollProgress.bind(this), 100)); + } + + setupAutoSave() { + setInterval(() => { + if (this.currentScreen === 'formScreen') { + this.saveCurrentStepData(); + console.log('Auto-saved form data:', this.formData); + + // Show subtle save indicator + this.showSaveIndicator(); + } + }, 30000); // Auto-save every 30 seconds + } + + showSaveIndicator() { + // Create and show a subtle save indicator + const indicator = document.createElement('div'); + indicator.textContent = '💾 Draft saved'; + indicator.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + background: var(--success); + color: white; + padding: 8px 16px; + border-radius: 8px; + font-size: 14px; + z-index: 1000; + opacity: 0; + transition: opacity 0.3s ease; + `; + + document.body.appendChild(indicator); + + // Animate in + setTimeout(() => indicator.style.opacity = '1', 100); + + // Remove after 2 seconds + setTimeout(() => { + indicator.style.opacity = '0'; + setTimeout(() => document.body.removeChild(indicator), 300); + }, 2000); + } + + updateScrollProgress() { + const scrolled = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100; + document.documentElement.style.setProperty('--scroll-progress', `${scrolled}%`); + } + + showScreen(screenId) { + // Add exit animation to current screen + const currentScreenEl = document.querySelector('.screen.active'); + if (currentScreenEl) { + currentScreenEl.style.animation = 'fadeOut 0.3s ease-out'; + setTimeout(() => { + currentScreenEl.classList.remove('active'); + currentScreenEl.style.animation = ''; + }, 300); + } + + // Show new screen with entrance animation + setTimeout(() => { + document.querySelectorAll('.screen').forEach(screen => { + screen.classList.remove('active'); + }); + document.getElementById(screenId).classList.add('active'); + this.currentScreen = screenId; + }, 300); + } + + login() { + const username = document.getElementById('username').value; + const password = document.getElementById('password').value; + + // Simple validation for demo + if (username && password) { + this.showScreen('dashboardScreen'); + this.trackEvent('user_login', { demo_mode: true }); + } else { + this.showNotification('Please enter both username and password', 'warning'); + } + } + + logout() { + this.showScreen('loginScreen'); + this.resetForm(); + this.trackEvent('user_logout'); + } + + startNewStrategy() { + this.showScreen('formScreen'); + this.resetForm(); + this.trackEvent('strategy_started'); + } + + backToDashboard() { + this.showScreen('dashboardScreen'); + } + + loadDemoScenario(scenario) { + const data = this.demoScenarios[scenario]; + if (!data) { + this.showNotification('Demo scenario not found', 'error'); + return; + } + + this.formData = { ...data }; + + // Fill form with demo data + this.populateFormFields(data); + + // Track demo usage + this.trackEvent('demo_scenario_loaded', { scenario }); + + // Show notification + this.showNotification(`Loaded ${data.companyName} demo scenario`, 'success'); + + // Skip to processing screen + setTimeout(() => this.showProcessingScreen(), 500); + } + + populateFormFields(data) { + const fieldMap = { + 'companyName': data.companyName, + 'industry': data.industry, + 'companySize': data.companySize, + 'website': data.website, + 'description': data.description, + 'challenges': data.challenges, + 'budget': data.budget, + 'objectives': data.objectives, + 'revenueGrowth': data.revenueGrowth, + 'timeline': data.timeline, + 'targetAudience': data.targetAudience, + 'customerPains': data.customerPains, + 'geography': data.geography, + 'competitors': data.competitors, + 'advantages': data.advantages, + 'positioning': data.positioning + }; + + Object.entries(fieldMap).forEach(([fieldId, value]) => { + const element = document.getElementById(fieldId); + if (element && value) { + element.value = value; + } + }); + } + + resetForm() { + this.currentStep = 1; + this.formData = {}; + const form = document.getElementById('clientForm'); + if (form) form.reset(); + this.updateStepIndicator(); + this.updateProgressBar(); + this.showFormStep(1); + } + + nextStep() { + if (this.validateCurrentStep()) { + this.saveCurrentStepData(); + + if (this.currentStep < this.totalSteps) { + this.currentStep++; + this.showFormStep(this.currentStep); + this.updateStepIndicator(); + this.updateProgressBar(); + this.trackEvent('form_step_completed', { step: this.currentStep - 1 }); + } else { + // Form completed, start processing + this.trackEvent('form_completed', { data: this.formData }); + this.showProcessingScreen(); + } + } + } + + previousStep() { + if (this.currentStep > 1) { + this.currentStep--; + this.showFormStep(this.currentStep); + this.updateStepIndicator(); + this.updateProgressBar(); + } + } + + validateCurrentStep() { + const currentStepElement = document.querySelector(`.form-step:nth-child(${this.currentStep})`); + if (!currentStepElement) return false; + + const requiredFields = currentStepElement.querySelectorAll('input[required], select[required], textarea[required]'); + let isValid = true; + let firstInvalidField = null; + + requiredFields.forEach(field => { + const isFieldValid = field.value.trim() !== ''; + + if (!isFieldValid) { + field.style.borderColor = 'var(--danger)'; + field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)'; + isValid = false; + if (!firstInvalidField) firstInvalidField = field; + } else { + field.style.borderColor = 'var(--glass-border)'; + field.style.boxShadow = ''; + } + }); + + if (!isValid) { + this.showNotification('Please fill in all required fields', 'warning'); + if (firstInvalidField) { + firstInvalidField.focus(); + firstInvalidField.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + } + + return isValid; + } + + saveCurrentStepData() { + const currentStepElement = document.querySelector(`.form-step:nth-child(${this.currentStep})`); + if (!currentStepElement) return; + + const inputs = currentStepElement.querySelectorAll('input, select, textarea'); + + inputs.forEach(input => { + if (input.id) { + this.formData[input.id] = input.value; + } + }); + } + + showFormStep(step) { + this.createFormSteps(); // Ensure steps exist + + document.querySelectorAll('.form-step').forEach((stepEl, index) => { + stepEl.style.display = index + 1 === step ? 'block' : 'none'; + }); + + // Update navigation buttons + const prevBtn = document.getElementById('prevBtn'); + const nextBtn = document.getElementById('nextBtn'); + + if (prevBtn) prevBtn.style.display = step > 1 ? 'inline-flex' : 'none'; + if (nextBtn) nextBtn.textContent = step === this.totalSteps ? 'Generate Strategy 🚀' : 'Next Step →'; + } + + createFormSteps() { + const form = document.getElementById('clientForm'); + if (!form) return; + + // Check if steps already exist + if (form.querySelectorAll('.form-step').length >= this.totalSteps) return; + + form.innerHTML = this.generateFormHTML(); + } + + generateFormHTML() { + return ` + +
+
+

🏢 Company Basics

+

Tell us about your company and what industry you're in

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

📊 Current Situation

+

Help us understand your current market position and challenges

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

🎯 Business Objectives

+

Define your goals and growth targets for the next 12-24 months

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

👥 Target Audience

+

Tell us about your ideal customers and their needs

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ + +
+
+

⚔️ Competitive Landscape

+

Help us understand your competitive environment and advantages

+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ `; + } + + updateStepIndicator() { + for (let i = 1; i <= this.totalSteps; i++) { + const indicator = document.getElementById(`step${i}Indicator`); + if (!indicator) continue; + + indicator.classList.remove('active', 'completed'); + + if (i < this.currentStep) { + indicator.classList.add('completed'); + } else if (i === this.currentStep) { + indicator.classList.add('active'); + } + } + } + + updateProgressBar() { + const progress = (this.currentStep / this.totalSteps) * 100; + const progressFill = document.getElementById('progressFill'); + if (progressFill) { + progressFill.style.width = progress + '%'; + } + } + + showProcessingScreen() { + this.showScreen('processingScreen'); + this.simulateProcessing(); + } + + simulateProcessing() { + const messages = [ + "🚀 Initializing AI Strategy Engine...", + "📊 Analyzing market position and trends...", + "🔍 Researching competitive landscape...", + "💡 Generating strategic recommendations...", + "⚡ Optimizing RACE framework...", + "📈 Creating SWOT analysis...", + "✨ Building comprehensive strategy...", + "🎯 Finalizing strategy document..." + ]; + + let messageIndex = 0; + let progress = 0; + + const interval = setInterval(() => { + if (messageIndex < messages.length) { + const loadingMessage = document.getElementById('loadingMessage'); + if (loadingMessage) { + loadingMessage.textContent = messages[messageIndex]; + } + messageIndex++; + } + + progress += Math.random() * 12 + 3; // More realistic progress + if (progress > 100) progress = 100; + + const processingProgress = document.getElementById('processingProgress'); + if (processingProgress) { + processingProgress.style.width = progress + '%'; + } + + if (progress >= 100) { + clearInterval(interval); + setTimeout(() => { + this.generateStrategy(); + this.showScreen('strategyScreen'); + this.trackEvent('strategy_generated', { + company: this.formData.companyName, + industry: this.formData.industry + }); + }, 1000); + } + }, 600); // Slightly faster for better UX + } + + generateStrategy() { + const companyName = this.formData.companyName || "Your Company"; + const clientCompanyName = document.getElementById('clientCompanyName'); + if (clientCompanyName) { + clientCompanyName.textContent = companyName; + } + + const strategyContent = document.getElementById('strategyContent'); + if (!strategyContent) return; + + strategyContent.innerHTML = this.generateStrategyHTML(); + + // Add smooth reveal animation for strategy sections + setTimeout(() => { + const sections = strategyContent.querySelectorAll('.strategy-section'); + sections.forEach((section, index) => { + setTimeout(() => { + section.style.opacity = '0'; + section.style.transform = 'translateY(20px)'; + section.style.transition = 'all 0.5s ease'; + + setTimeout(() => { + section.style.opacity = '1'; + section.style.transform = 'translateY(0)'; + }, 50); + }, index * 200); + }); + }, 100); + } + + generateStrategyHTML() { + const data = this.formData; + const companyName = data.companyName || "Your Company"; + + return ` +
+

🎯 Situation Analysis

+

Company Overview: ${data.description || 'A forward-thinking company positioned for growth in the competitive marketplace.'}

+

Current Challenges: ${data.challenges || 'Limited brand awareness and market penetration in target segments.'}

+ +
+ 📊 Market Position Analysis & Competitive Mapping +
+ +

SWOT Analysis:

+
    +
  • Strengths: ${data.advantages || 'Innovative solutions, strong value proposition, dedicated team'}
    • +
  • Weaknesses: Limited brand recognition, resource constraints, market education needs
    • +
  • Opportunities: Growing market demand, digital transformation trends, underserved customer segments
    • +
  • Threats: Competitive pressure, market saturation risks, economic uncertainties
    • +
+
+ +
+

🚀 Strategic Objectives

+

Primary Goals (${data.timeline || '12-month'} timeline):

+
    +
  • ${data.objectives || 'Increase brand awareness by 200% in target market'}
    • +
  • Achieve ${data.revenueGrowth || '50-100%'} revenue growth
    • +
  • Build qualified customer pipeline of 10,000+ leads
    • +
  • Establish thought leadership in ${data.industry || 'industry'} sector
    • +
  • Improve customer satisfaction scores to 4.5+ stars
    • +
  • Expand market reach in ${data.geography || 'target'} markets
    • +
+ +
+ 📈 Revenue Growth Projection & Milestone Timeline +
+ +

Key Performance Indicators:

+
    +
  • Brand awareness metrics (surveys, social mentions, search volume)
    • +
  • Website traffic growth and conversion rate optimization
    • +
  • Customer acquisition cost (CAC) and lifetime value (CLV)
    • +
  • Market share growth and competitive positioning
    • +
  • Lead generation volume and quality metrics
    • +
  • Customer retention and referral rates
    • +
+
+ +
+

💡 Brand Strategy & Positioning

+

Brand Positioning Statement:
+ ${companyName} is the ${data.positioning || 'innovative'} choice for ${data.targetAudience || 'forward-thinking businesses'} seeking ${data.advantages || 'superior solutions and exceptional value'} in the ${data.industry || 'technology'} space. We deliver measurable results through our unique approach that combines cutting-edge innovation with personalized service.

+ +

Value Proposition Framework:

+
    +
  • Core Value: Delivering measurable results through innovative solutions tailored to customer needs
    • +
  • Differentiator: ${data.advantages || 'Unique approach combining technology with personalized service and industry expertise'}
    • +
  • Proof Points: Customer success stories, industry certifications, proven ROI, testimonials
    • +
  • Brand Promise: Transforming businesses through reliable, innovative solutions that drive growth
    • +
+ +

Target Audience Segmentation:

+
    +
  • Primary Segment: ${data.targetAudience || 'Decision-makers in mid-to-large enterprises seeking innovative solutions'}
    • +
  • Secondary Segment: Influencers, consultants, and industry advocates
    • +
  • Geographic Focus: ${data.geography || 'National'} markets with expansion potential
    • +
  • Pain Points Addressed: ${data.customerPains || 'Operational inefficiencies, technology gaps, growth constraints'}
    • +
+
+ +
+

⚡ Tactical Implementation (RACE Framework)

+ +

🎯 REACH - Build Awareness & Drive Traffic:

+
    +
  • SEO Strategy: Target high-intent keywords related to ${data.industry || 'industry'} solutions
    • +
  • Paid Advertising: Google Ads, LinkedIn campaigns targeting ${data.targetAudience || 'decision-makers'}
    • +
  • Content Marketing: Industry-specific blog content, whitepapers, case studies
    • +
  • Social Media: LinkedIn thought leadership, industry forum participation
    • +
  • PR & Outreach: Industry publications, podcast appearances, conference speaking
    • +
  • Partnership Marketing: Strategic alliances with complementary service providers
    • +
+ +

💬 ACT - Drive Engagement & Interest:

+
    +
  • Educational Content: Address ${data.customerPains || 'customer pain points'} through valuable resources
    • +
  • Interactive Experiences: Webinar series, live demos, virtual consultations
    • +
  • Lead Magnets: Industry reports, ROI calculators, assessment tools
    • +
  • Community Building: Industry forums, customer advisory boards, user groups
    • +
  • Email Marketing: Nurture sequences with personalized industry insights
    • +
  • Retargeting Campaigns: Multi-touch attribution across digital channels
    • +
+ +

💰 CONVERT - Generate Quality Leads & Sales:

+
    +
  • Landing Page Optimization: Industry-specific pages with clear value propositions
    • +
  • Conversion Rate Optimization: A/B test forms, CTAs, and user experience
    • +
  • Sales Enablement: Demo scripts, objection handling, competitive battlecards
    • +
  • Marketing Automation: Lead scoring, progressive profiling, behavior triggers
    • +
  • Free Trials/Consultations: Low-risk entry points for prospects
    • +
  • Testimonials & Social Proof: Industry-specific case studies and references
    • +
+ +

❤️ ENGAGE - Build Loyalty & Advocacy:

+
    +
  • Customer Success Program: Onboarding, training, ongoing support
    • +
  • Regular Communication: Newsletters, product updates, industry insights
    • +
  • Loyalty Initiatives: Exclusive access, early features, VIP support
    • +
  • Referral Program: Incentivize customer advocacy and word-of-mouth
    • +
  • Community Platform: Customer forums, best practice sharing
    • +
  • Continuous Improvement: Regular feedback collection and product enhancement
    • +
+
+ +
+

📋 90-Day Action Plan

+ +

Month 1 - Foundation & Setup:

+
    +
  • Week 1-2: Website optimization, analytics setup, brand asset creation
    • +
  • Week 3-4: Content calendar development, initial content creation, SEO implementation
    • +
  • Key Deliverables: Brand guidelines, website updates, content strategy
    • +
  • Budget Allocation: 40% of ${data.budget || 'monthly budget'} for setup and tools
    • +
+ +

Month 2 - Campaign Launch & Amplification:

+
    +
  • Week 1-2: Launch paid advertising campaigns, begin content distribution
    • +
  • Week 3-4: Social media activation, email marketing sequences, PR outreach
    • +
  • Key Deliverables: Campaign dashboards, lead generation systems, content library
    • +
  • Budget Allocation: 60% of monthly budget for advertising and promotion
    • +
+ +

Month 3 - Optimization & Scale:

+
    +
  • Week 1-2: Analyze performance data, optimize high-performing channels
    • +
  • Week 3-4: Scale successful campaigns, launch retention programs
    • +
  • Key Deliverables: Performance reports, optimization recommendations, scale strategy
    • +
  • Budget Allocation: Data-driven allocation based on channel performance
    • +
+ +
+ 📅 Implementation Timeline & Resource Allocation Gantt Chart +
+ +

Resource Requirements:

+
    +
  • Marketing Budget: ${data.budget || '$25,000-50,000'} monthly investment
    • +
  • Team Structure: Marketing manager, content specialist, PPC expert, designer
    • +
  • Technology Stack: CRM, marketing automation, analytics, design tools
    • +
  • External Partners: PR agency, industry consultants, freelance specialists
    • +
+
+ +
+

📊 Measurement & Control Framework

+ +

Monitoring Schedule:

+
    +
  • Daily: Campaign performance, website traffic, lead generation metrics
    • +
  • Weekly: Conversion rates, cost metrics, competitive analysis
    • +
  • Monthly: Revenue attribution, customer acquisition cost, lifetime value
    • +
  • Quarterly: Brand awareness, market share, strategic goal assessment
    • +
+ +

Analytics & Reporting Tools:

+
    +
  • Website Analytics: Google Analytics 4, heatmap analysis, conversion tracking
    • +
  • CRM Integration: Sales pipeline tracking, customer journey mapping
    • +
  • Social Media Analytics: Engagement metrics, reach, brand mention tracking
    • +
  • Email Marketing: Open rates, click-through rates, automation performance
    • +
  • Brand Tracking: Awareness surveys, sentiment analysis, competitive positioning
    • +
+ +
+ 📈 Real-Time Performance Dashboard & KPI Tracking +
+ +

Success Benchmarks & Milestones:

+
    +
  • Month 1: 25% increase in qualified website traffic and lead generation
    • +
  • Month 3: 50% improvement in conversion rates and pipeline quality
    • +
  • Month 6: 100% increase in brand awareness and market recognition
    • +
  • Month 12: ${data.revenueGrowth || '50-100%'} revenue growth and market expansion achieved
    • +
+ +

Optimization Framework:

+
    +
  • Continuous Testing: A/B test campaigns, messaging, and user experience
    • +
  • Performance Reviews: Monthly strategy sessions and quarterly deep dives
    • +
  • Market Adaptation: Quarterly competitive analysis and trend assessment
    • +
  • ROI Analysis: Channel performance evaluation and budget reallocation
    • +
+
+ +
+

💼 Investment Summary & ROI Projections

+ +

Recommended Investment Allocation:

+
    +
  • Digital Advertising (35%): Google Ads, LinkedIn, industry platforms, retargeting
    • +
  • Content & Creative (25%): Content creation, design, video production, copywriting
    • +
  • Technology & Tools (20%): Marketing automation, CRM, analytics, optimization tools
    • +
  • Events & PR (15%): Industry conferences, webinars, media relations, thought leadership
    • +
  • Testing & Optimization (5%): A/B testing tools, market research, performance analysis
    • +
+ +
+ 💰 Investment Allocation & ROI Projection Chart +
+ +

Financial Projections:

+
    +
  • Expected ROI: 300-500% return on marketing investment within 12 months
    • +
  • Payback Period: 6-8 months for initial marketing investment recovery
    • +
  • Customer Acquisition Cost: Target 20-25% improvement in CAC efficiency
    • +
  • Lifetime Value Growth: 40-60% increase in customer lifetime value
    • +
+ +

Risk Mitigation:

+
    +
  • Diversified Channels: Multiple traffic sources to reduce dependency risk
    • +
  • Flexible Budget: Ability to reallocate based on performance data
    • +
  • Competitive Monitoring: Regular analysis to maintain market advantage
    • +
  • Performance Thresholds: Clear KPIs with optimization triggers
    • +
+
+ `; + } + + exportToPDF() { + this.showNotification('PDF export feature would integrate with jsPDF library for production. Demo shows complete workflow.', 'info'); + this.trackEvent('pdf_export_attempted'); + + // In production, this would use jsPDF or similar library + // For demo, we'll simulate the export process + const exportBtn = event.target; + const originalText = exportBtn.textContent; + + exportBtn.textContent = '📄 Generating PDF...'; + exportBtn.disabled = true; + + setTimeout(() => { + exportBtn.textContent = originalText; + exportBtn.disabled = false; + this.showNotification('PDF would be downloaded in production version', 'success'); + }, 2000); + } + + editStrategy() { + this.showNotification('Edit mode would enable inline editing of all strategy sections. Demo shows UI flow.', 'info'); + this.trackEvent('strategy_edit_mode'); + + // In production, this would enable contenteditable on strategy sections + const sections = document.querySelectorAll('.strategy-section'); + sections.forEach(section => { + section.style.border = '2px dashed var(--accent-primary)'; + section.style.cursor = 'pointer'; + }); + + setTimeout(() => { + sections.forEach(section => { + section.style.border = '1px solid var(--glass-border)'; + section.style.cursor = 'default'; + }); + }, 3000); + } + + showNotification(message, type = 'info') { + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + + const colors = { + success: 'var(--success)', + warning: 'var(--warning)', + error: 'var(--danger)', + info: 'var(--accent-primary)' + }; + + notification.style.cssText = ` + position: fixed; + top: 24px; + right: 24px; + background: ${colors[type]}; + color: white; + padding: 16px 24px; + border-radius: 12px; + font-size: 14px; + font-weight: 500; + z-index: 1000; + max-width: 400px; + box-shadow: var(--shadow-lg); + transform: translateX(100%); + transition: var(--transition); + `; + + notification.textContent = message; + document.body.appendChild(notification); + + // Animate in + setTimeout(() => notification.style.transform = 'translateX(0)', 100); + + // Remove after 5 seconds + setTimeout(() => { + notification.style.transform = 'translateX(100%)'; + setTimeout(() => { + if (document.body.contains(notification)) { + document.body.removeChild(notification); + } + }, 300); + }, 5000); + } + + trackEvent(eventName, properties = {}) { + // Analytics tracking for production + console.log('Event tracked:', eventName, properties); + + // In production, this would integrate with analytics services like: + // - Google Analytics 4 + // - Mixpanel + // - Amplitude + // - Custom analytics API + } + + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } +} + +// Initialize the application when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + window.brandStrategyApp = new BrandStrategyApp(); +}); + +// Global functions for HTML onclick handlers (keeping for compatibility) +function login() { window.brandStrategyApp?.login(); } +function logout() { window.brandStrategyApp?.logout(); } +function startNewStrategy() { window.brandStrategyApp?.startNewStrategy(); } +function backToDashboard() { window.brandStrategyApp?.backToDashboard(); } +function loadDemoScenario(scenario) { window.brandStrategyApp?.loadDemoScenario(scenario); } +function nextStep() { window.brandStrategyApp?.nextStep(); } +function previousStep() { window.brandStrategyApp?.previousStep(); } +function exportToPDF() { window.brandStrategyApp?.exportToPDF(); } +function editStrategy() { window.brandStrategyApp?.editStrategy(); } \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..41e3262 --- /dev/null +++ b/styles.css @@ -0,0 +1,1102 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap'); + +:root { + /* Colors */ + --color-bg: #f8fafb; + --color-surface: #ffffff; + --color-surface-elevated: #ffffff; + --color-primary: #0d0d0d; + --color-primary-hover: #1a1a1a; + --color-secondary: #6b7280; + --color-tertiary: #9ca3af; + --color-accent: #0066ff; + --color-accent-hover: #0052cc; + --color-success: #10b981; + --color-warning: #f59e0b; + --color-error: #ef4444; + --color-border: #e5e7eb; + --color-border-hover: #d1d5db; + --color-divider: #f3f4f6; + + /* Typography */ + --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-family-mono: 'JetBrains Mono', monospace; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + --font-size-2xl: 1.5rem; + --font-size-3xl: 1.875rem; + --font-size-4xl: 2.25rem; + --font-size-5xl: 3rem; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --font-weight-extrabold: 800; + --font-weight-black: 900; + --line-height-tight: 1.25; + --line-height-snug: 1.375; + --line-height-normal: 1.5; + --line-height-relaxed: 1.625; + + /* Spacing */ + --space-px: 1px; + --space-0: 0; + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + --space-32: 8rem; + + /* Sizing */ + --size-4: 1rem; + --size-6: 1.5rem; + --size-8: 2rem; + --size-10: 2.5rem; + --size-12: 3rem; + --size-16: 4rem; + --size-20: 5rem; + --size-24: 6rem; + + /* Border Radius */ + --radius-none: 0; + --radius-sm: 0.125rem; + --radius-base: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-2xl: 1.5rem; + --radius-full: 9999px; + + /* Shadows */ + --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + + /* Transitions */ + --transition-none: none; + --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-colors: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); + + /* Z-index */ + --z-dropdown: 10; + --z-modal: 20; + --z-popover: 30; + --z-tooltip: 40; + --z-toast: 50; +} + +/* Reset and Base Styles */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + height: 100%; + font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; + font-variant-ligatures: none; +} + +body { + height: 100%; + font-family: var(--font-family-primary); + font-size: var(--font-size-base); + font-weight: var(--font-weight-normal); + line-height: var(--line-height-normal); + color: var(--color-primary); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +/* Layout */ +.container { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding-left: var(--space-4); + padding-right: var(--space-4); +} + +@media (min-width: 640px) { + .container { + padding-left: var(--space-6); + padding-right: var(--space-6); + } +} + +@media (min-width: 1024px) { + .container { + padding-left: var(--space-8); + padding-right: var(--space-8); + } +} + +/* Header with Advanced Animations */ +.app-header { + text-align: center; + margin-bottom: var(--space-12); + padding-top: var(--space-16); + position: relative; + overflow: hidden; +} + +.app-header::before { + content: ''; + position: absolute; + top: 0; + left: 50%; + width: 200%; + height: 200%; + background: radial-gradient(circle at center, rgba(0, 102, 255, 0.05) 0%, transparent 70%); + transform: translateX(-50%) translateY(-20%); + animation: heroGlow 8s ease-in-out infinite; +} + +@keyframes heroGlow { + 0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(-20%) scale(1); } + 50% { opacity: 0.6; transform: translateX(-50%) translateY(-20%) scale(1.1); } +} + +.hero-content { + position: relative; + z-index: 2; +} + +.hero-title { + font-size: var(--font-size-4xl); + font-weight: var(--font-weight-extrabold); + letter-spacing: -0.025em; + line-height: var(--line-height-tight); + color: var(--color-primary); + margin-bottom: var(--space-6); + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-3); +} + +.hero-word { + display: inline-block; + opacity: 0; + transform: translateY(30px) rotateX(90deg); + animation: wordReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; + transform-origin: center bottom; +} + +@keyframes wordReveal { + 0% { + opacity: 0; + transform: translateY(30px) rotateX(90deg) scale(0.8); + } + 50% { + opacity: 0.8; + transform: translateY(10px) rotateX(45deg) scale(1.05); + } + 100% { + opacity: 1; + transform: translateY(0) rotateX(0deg) scale(1); + } +} + +.hero-word:first-child { + font-size: 1.2em; + animation: emojiPulse 2s ease-in-out infinite; +} + +@keyframes emojiPulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.1); } +} + +.hero-subtitle { + font-size: var(--font-size-lg); + color: var(--color-secondary); + font-weight: var(--font-weight-medium); + max-width: 32rem; + margin: 0 auto var(--space-8); + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.hero-line { + display: inline-block; + opacity: 0; + transform: translateY(20px); + animation: lineReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +@keyframes lineReveal { + 0% { + opacity: 0; + transform: translateY(20px); + filter: blur(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + filter: blur(0px); + } +} + +.hero-decoration { + width: 60px; + height: 4px; + background: var(--color-accent); + margin: 0 auto; + border-radius: var(--radius-full); + opacity: 0; + transform: scaleX(0); + animation: decorationReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; + position: relative; + overflow: hidden; +} + +.hero-decoration::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); + animation: decorationShine 3s ease-in-out infinite; +} + +@keyframes decorationReveal { + 0% { + opacity: 0; + transform: scaleX(0); + } + 100% { + opacity: 1; + transform: scaleX(1); + } +} + +@keyframes decorationShine { + 0% { left: -100%; } + 100% { left: 100%; } +} + +/* Responsive Header */ +@media (min-width: 768px) { + .hero-title { + font-size: var(--font-size-5xl); + } + + .hero-subtitle { + font-size: var(--font-size-xl); + flex-direction: row; + gap: var(--space-2); + } + + .hero-decoration { + width: 80px; + height: 5px; + } +} + +@media (max-width: 640px) { + .hero-title { + font-size: var(--font-size-3xl); + gap: var(--space-2); + } + + .hero-subtitle { + font-size: var(--font-size-base); + } +} + +/* Main Content */ +.main-content { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-2xl); + box-shadow: var(--shadow-lg); + overflow: hidden; + min-height: 600px; + position: relative; + backdrop-filter: blur(8px); +} + +.main-content::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--color-border), transparent); +} + +/* Screen Management */ +.screen { + display: none; + min-height: 600px; + animation: fadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.screen.active { + display: block; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-6); + font-family: inherit; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + line-height: 1; + text-decoration: none; + border: 1px solid transparent; + border-radius: var(--radius-lg); + cursor: pointer; + transition: var(--transition-all); + white-space: nowrap; + user-select: none; + position: relative; + overflow: hidden; +} + +.btn:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +.btn-primary { + background: var(--color-primary); + color: var(--color-surface); + border-color: var(--color-primary); + box-shadow: var(--shadow-xs); +} + +.btn-primary:hover { + background: var(--color-primary-hover); + border-color: var(--color-primary-hover); + box-shadow: var(--shadow-sm); + transform: translateY(-1px); +} + +.btn-primary:active { + transform: translateY(0); + box-shadow: var(--shadow-xs); +} + +.btn-secondary { + background: var(--color-surface); + color: var(--color-primary); + border-color: var(--color-border); +} + +.btn-secondary:hover { + background: var(--color-bg); + border-color: var(--color-border-hover); + box-shadow: var(--shadow-sm); +} + +.btn-large { + padding: var(--space-4) var(--space-8); + font-size: var(--font-size-base); + border-radius: var(--radius-xl); +} + +.btn-accent { + background: var(--color-accent); + color: var(--color-surface); + border-color: var(--color-accent); +} + +.btn-accent:hover { + background: var(--color-accent-hover); + border-color: var(--color-accent-hover); + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +/* Form Styles */ +.form-container { + max-width: 42rem; + margin: 0 auto; + padding: var(--space-8); +} + +.form-header { + text-align: center; + margin-bottom: var(--space-10); +} + +.form-title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + margin-bottom: var(--space-2); +} + +.form-subtitle { + font-size: var(--font-size-base); + color: var(--color-secondary); + font-weight: var(--font-weight-medium); +} + +/* Progress Indicator */ +.progress-container { + margin-bottom: var(--space-10); +} + +.step-indicator { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-6); + position: relative; +} + +.step-indicator::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 2px; + background: var(--color-divider); + transform: translateY(-50%); + z-index: 1; +} + +.step-item { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + position: relative; + z-index: 2; + background: var(--color-bg); + padding: 0 var(--space-2); + min-width: 0; + flex: 1; +} + +.step-circle { + width: var(--size-8); + height: var(--size-8); + border-radius: var(--radius-full); + border: 2px solid var(--color-border); + background: var(--color-surface); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-tertiary); + transition: var(--transition-all); +} + +.step-item.active .step-circle { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-surface); + box-shadow: var(--shadow-md); +} + +.step-item.completed .step-circle { + background: var(--color-success); + border-color: var(--color-success); + color: var(--color-surface); +} + +.step-item.completed .step-circle::before { + content: '✓'; + font-size: var(--font-size-sm); +} + +.step-label { + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + color: var(--color-tertiary); + text-align: center; + line-height: var(--line-height-tight); +} + +.step-item.active .step-label { + color: var(--color-primary); + font-weight: var(--font-weight-semibold); +} + +.step-item.completed .step-label { + color: var(--color-success); +} + +/* Progress Bar */ +.progress-bar { + height: 8px; + background: var(--color-divider); + border-radius: var(--radius-full); + overflow: hidden; + position: relative; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); + border-radius: var(--radius-full); + transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); + position: relative; +} + +.progress-fill::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + animation: shimmer 2s infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +/* Form Groups and Fields */ +.form-step { + display: none; + animation: slideIn 400ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.form-step.active { + display: block; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(16px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.step-header { + margin-bottom: var(--space-8); + text-align: center; +} + +.step-title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + margin-bottom: var(--space-2); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); +} + +.step-description { + font-size: var(--font-size-base); + color: var(--color-secondary); + max-width: 28rem; + margin: 0 auto; +} + +.form-group { + margin-bottom: var(--space-6); +} + +.form-label { + display: block; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); + margin-bottom: var(--space-2); + line-height: var(--line-height-normal); +} + +.form-input, +.form-select, +.form-textarea { + width: 100%; + padding: var(--space-3) var(--space-4); + font-family: inherit; + font-size: var(--font-size-base); + line-height: var(--line-height-normal); + color: var(--color-primary); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + transition: var(--transition-colors); + appearance: none; +} + +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + outline: none; + border-color: var(--color-accent); + box-shadow: 0 0 0 3px rgb(0 102 255 / 0.1); +} + +.form-input::placeholder, +.form-textarea::placeholder { + color: var(--color-tertiary); +} + +.form-textarea { + resize: vertical; + min-height: 5rem; +} + +.form-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); + background-position: right var(--space-3) center; + background-repeat: no-repeat; + background-size: 1rem 1rem; + padding-right: var(--space-10); +} + +/* Navigation */ +.form-navigation { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--space-10); + padding-top: var(--space-6); + border-top: 1px solid var(--color-divider); +} + +/* Dashboard Cards */ +.dashboard-container { + padding: var(--space-8); +} + +.dashboard-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-8); + flex-wrap: wrap; + gap: var(--space-4); +} + +.dashboard-title { + font-size: var(--font-size-2xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.dashboard-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: var(--space-6); + margin-top: var(--space-8); +} + +.dashboard-card { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + padding: var(--space-6); + transition: var(--transition-all); + box-shadow: var(--shadow-xs); + position: relative; + overflow: hidden; +} + +.dashboard-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); + transform: scaleX(0); + transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.dashboard-card:hover { + border-color: var(--color-border-hover); + box-shadow: var(--shadow-lg); + transform: translateY(-2px); +} + +.dashboard-card:hover::before { + transform: scaleX(1); +} + +.card-header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); +} + +.card-icon { + font-size: var(--font-size-xl); +} + +.card-title { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); +} + +.card-description { + color: var(--color-secondary); + line-height: var(--line-height-relaxed); + margin-bottom: var(--space-6); +} + +/* Loading Screen */ +.loading-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-16) var(--space-8); + text-align: center; +} + +.spinner { + width: var(--size-16); + height: var(--size-16); + border: 3px solid var(--color-divider); + border-top: 3px solid var(--color-accent); + border-radius: var(--radius-full); + animation: spin 1s linear infinite; + margin-bottom: var(--space-6); +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading-message { + font-size: var(--font-size-lg); + font-weight: var(--font-weight-medium); + color: var(--color-primary); + margin-bottom: var(--space-2); +} + +.loading-subtitle { + font-size: var(--font-size-base); + color: var(--color-secondary); +} + +/* Demo Elements */ +.demo-banner { + background: linear-gradient(135deg, #fef3c7, #fde68a); + border: 1px solid #f59e0b; + color: #92400e; + padding: var(--space-4); + border-radius: var(--radius-xl); + margin-bottom: var(--space-8); + text-align: center; + font-weight: var(--font-weight-medium); +} + +.demo-scenarios { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); + gap: var(--space-4); + margin-top: var(--space-6); +} + +.demo-card { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + padding: var(--space-5); + cursor: pointer; + transition: var(--transition-all); + box-shadow: var(--shadow-xs); + position: relative; + overflow: hidden; +} + +.demo-card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, var(--color-accent), var(--color-primary)); + opacity: 0; + transition: opacity 300ms ease; + pointer-events: none; +} + +.demo-card:hover { + border-color: var(--color-accent); + box-shadow: var(--shadow-lg); + transform: translateY(-4px); +} + +.demo-card:hover::after { + opacity: 0.03; +} + +.demo-card h4 { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); + margin-bottom: var(--space-2); +} + +.demo-card p { + font-size: var(--font-size-sm); + color: var(--color-secondary); + line-height: var(--line-height-relaxed); +} + +/* Strategy Output */ +.strategy-container { + max-width: 56rem; + margin: 0 auto; + padding: var(--space-8); +} + +.strategy-header { + text-align: center; + margin-bottom: var(--space-12); +} + +.strategy-title { + font-size: var(--font-size-3xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + margin-bottom: var(--space-2); +} + +.strategy-subtitle { + font-size: var(--font-size-lg); + color: var(--color-secondary); + margin-bottom: var(--space-6); +} + +.strategy-actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-3); +} + +.strategy-section { + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + padding: var(--space-8); + margin-bottom: var(--space-6); + box-shadow: var(--shadow-xs); + border-left: 4px solid var(--color-accent); +} + +.section-header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-6); +} + +.section-icon { + width: var(--size-8); + height: var(--size-8); + background: var(--color-primary); + color: var(--color-surface); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-bold); +} + +.section-title { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: var(--color-primary); +} + +.section-content p { + color: var(--color-secondary); + line-height: var(--line-height-relaxed); + margin-bottom: var(--space-4); +} + +.section-content ul { + color: var(--color-secondary); + padding-left: var(--space-5); + line-height: var(--line-height-relaxed); +} + +.section-content li { + margin-bottom: var(--space-2); +} + +/* Chart Placeholder */ +.chart-placeholder { + width: 100%; + height: 12rem; + background: var(--color-bg); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-tertiary); + font-weight: var(--font-weight-medium); + margin: var(--space-6) 0; + position: relative; + overflow: hidden; +} + +.chart-placeholder::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: shimmer 3s infinite; +} + +/* Tags */ +.tag { + display: inline-flex; + align-items: center; + padding: var(--space-1) var(--space-3); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); + color: var(--color-surface); + background: var(--color-primary); + border-radius: var(--radius-full); + margin-right: var(--space-2); + margin-bottom: var(--space-2); +} + +/* Utility Classes */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +.hidden { display: none !important; } +.block { display: block; } +.flex { display: flex; } +.inline-flex { display: inline-flex; } +.grid { display: grid; } + +/* Responsive Design */ +@media (max-width: 640px) { + .container { + padding-left: var(--space-4); + padding-right: var(--space-4); + } + + .app-header { + padding-top: var(--space-8); + margin-bottom: var(--space-8); + } + + .app-header h1 { + font-size: var(--font-size-3xl); + } + + .form-container { + padding: var(--space-4); + } + + .dashboard-container { + padding: var(--space-4); + } + + .dashboard-grid { + grid-template-columns: 1fr; + gap: var(--space-4); + } + + .demo-scenarios { + grid-template-columns: 1fr; + } + + .strategy-container { + padding: var(--space-4); + } + + .strategy-section { + padding: var(--space-6); + } + + .form-navigation { + flex-direction: column; + gap: var(--space-3); + } + + .form-navigation .btn { + width: 100%; + } + + .step-indicator { + margin-bottom: var(--space-4); + } + + .step-label { + font-size: 0.625rem; + } +} \ No newline at end of file