mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
Add document analysis landing page and dashboard hub
- Created a landing page for logged-out users showcasing document analysis features - Built a functional dashboard hub for logged-in users with analysis tools and insights - Added new routes and controller actions to handle both views - Updated sidebar link to point to the new analysis hub - Added analysis count badge to sidebar navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrew Brown
parent
a3be81b0f0
commit
95ad08a039
@ -1,14 +1,45 @@
|
||||
class DocumentAnalysesController < ApplicationController
|
||||
before_action :authenticate_user!, except: [:index]
|
||||
before_action :set_document, except: [:index]
|
||||
before_action :authorize_user_for_document, except: [:index]
|
||||
before_action :set_document_analysis, except: [:index]
|
||||
before_action :authenticate_user!, except: [:index, :landing]
|
||||
before_action :set_document, except: [:index, :landing, :hub]
|
||||
before_action :authorize_user_for_document, except: [:index, :landing, :hub]
|
||||
before_action :set_document_analysis, except: [:index, :landing, :hub]
|
||||
|
||||
before_action :set_navbar_color
|
||||
before_action :set_sidenav_expansion
|
||||
# before_action :set_navbar_actions
|
||||
|
||||
layout 'tailwind', only: [:index]
|
||||
layout 'tailwind', only: [:index, :landing, :hub]
|
||||
|
||||
# Document analysis landing page for logged out users
|
||||
def landing
|
||||
redirect_to hub_path if user_signed_in?
|
||||
|
||||
# Set SEO metadata
|
||||
set_meta_tags title: "Document Analysis - Notebook.ai",
|
||||
description: "Analyze your writing for readability, style, sentiment, and more with Notebook.ai's AI-powered document analysis tools.",
|
||||
keywords: "document analysis, writing analysis, readability, style analysis, sentiment analysis, AI writing tools"
|
||||
end
|
||||
|
||||
# Document analysis hub for logged in users
|
||||
def hub
|
||||
redirect_to landing_path unless user_signed_in?
|
||||
|
||||
# Get the user's recent documents
|
||||
@recent_documents = current_user.documents.order(updated_at: :desc).limit(5) if user_signed_in?
|
||||
|
||||
# Get the user's recent analyses
|
||||
@recent_analyses = DocumentAnalysis.joins(:document)
|
||||
.where(documents: { user_id: current_user.id })
|
||||
.where.not(completed_at: nil)
|
||||
.order(completed_at: :desc)
|
||||
.limit(5) if user_signed_in?
|
||||
|
||||
# Get overall analysis stats
|
||||
@total_analyses_count = DocumentAnalysis.joins(:document)
|
||||
.where(documents: { user_id: current_user.id })
|
||||
.where.not(completed_at: nil)
|
||||
.count if user_signed_in?
|
||||
end
|
||||
|
||||
def index
|
||||
@document_analyses = DocumentAnalysis.all
|
||||
|
||||
557
app/views/document_analyses/hub.html.erb
Normal file
557
app/views/document_analyses/hub.html.erb
Normal file
@ -0,0 +1,557 @@
|
||||
<%
|
||||
page_title = "Analysis Dashboard"
|
||||
page_description = "Monitor, run, and review your document analyses"
|
||||
|
||||
set_meta_tags title: page_title,
|
||||
description: page_description
|
||||
%>
|
||||
|
||||
<!-- Simple header with actions -->
|
||||
<div class="bg-white shadow-sm border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="py-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h1 class="text-2xl font-bold text-gray-900 sm:truncate">Document Analysis</h1>
|
||||
<p class="mt-1 text-sm text-gray-500">Analyze, track, and improve your writing</p>
|
||||
</div>
|
||||
<div class="mt-4 flex sm:mt-0 sm:ml-4 gap-2">
|
||||
<%= link_to new_document_path, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
||||
<i class="material-icons text-sm mr-1">add</i> New Document
|
||||
<% end %>
|
||||
<% if @recent_documents.present? && @recent_documents.any? %>
|
||||
<%= link_to queue_analysis_document_path(@recent_documents.first), method: :get, class: "inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
||||
<i class="material-icons text-sm mr-1">analytics</i> Analyze Document
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 py-6">
|
||||
<!-- Summary Stats -->
|
||||
<div class="mb-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<!-- Total Analyses -->
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Total Analyses</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-semibold text-gray-900"><%= @total_analyses_count || 0 %></div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-4 sm:px-6">
|
||||
<div class="text-sm flex justify-between">
|
||||
<span class="font-medium text-gray-500">Lifetime</span>
|
||||
<% if @total_analyses_count && @total_analyses_count > 0 %>
|
||||
<span class="font-medium text-indigo-600 hover:text-indigo-500">
|
||||
<a href="#analysis-history">View all</a>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Average Readability -->
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Average Readability</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-semibold text-gray-900">Grade 10</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-4 sm:px-6">
|
||||
<div class="text-sm">
|
||||
<span class="font-medium text-gray-500">Based on recent documents</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Words Analyzed -->
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Words Analyzed</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-semibold text-gray-900">10,560</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-4 sm:px-6">
|
||||
<div class="text-sm">
|
||||
<span class="font-medium text-gray-500">Across all documents</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Improvement Rate -->
|
||||
<div class="bg-white overflow-hidden shadow rounded-lg">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-amber-500 rounded-md p-3">
|
||||
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-5 w-0 flex-1">
|
||||
<dl>
|
||||
<dt class="text-sm font-medium text-gray-500 truncate">Improvement Rate</dt>
|
||||
<dd>
|
||||
<div class="text-lg font-semibold text-gray-900">+12%</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-4 sm:px-6">
|
||||
<div class="text-sm">
|
||||
<span class="font-medium text-gray-500">Based on readability scores</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content with Sidebar Layout -->
|
||||
<div class="flex flex-col lg:flex-row gap-6">
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1">
|
||||
<!-- Documents Grid -->
|
||||
<div class="bg-white shadow overflow-hidden rounded-lg mb-6">
|
||||
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||
<div class="-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
|
||||
<div class="ml-4 mt-2">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900" id="documents-to-analyze">Documents to Analyze</h3>
|
||||
</div>
|
||||
<div class="ml-4 mt-2 flex-shrink-0">
|
||||
<%= link_to documents_path, class: "text-sm text-indigo-600 hover:text-indigo-500" do %>
|
||||
View all documents <span aria-hidden="true">→</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<div class="max-h-80 overflow-y-auto">
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
<% if @recent_documents.present? && @recent_documents.any? %>
|
||||
<% @recent_documents.each do |document| %>
|
||||
<li class="px-4 py-4 sm:px-6 hover:bg-gray-50 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons text-gray-400">description</i>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
<%= link_to document.title, document_path(document), class: "hover:underline" %>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<%= pluralize(document.word_count || 0, 'word') %> • Updated <%= time_ago_in_words(document.updated_at) %> ago
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mr-4">
|
||||
<%= document.privacy.capitalize %>
|
||||
</span>
|
||||
<%= link_to queue_analysis_document_path(document), method: :get, class: "inline-flex items-center p-1.5 border border-transparent rounded text-blue-600 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
|
||||
<i class="material-icons text-sm">analytics</i>
|
||||
<% end %>
|
||||
</div>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<li class="px-4 py-8 sm:px-6 text-center">
|
||||
<div class="text-gray-500 mb-4">
|
||||
<i class="material-icons text-4xl mb-2">description</i>
|
||||
<p>You haven't created any documents yet.</p>
|
||||
</div>
|
||||
<%= link_to "Create your first document", new_document_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Analysis Results -->
|
||||
<div class="bg-white shadow overflow-hidden rounded-lg mb-6">
|
||||
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||
<div class="-ml-4 -mt-2 flex items-center justify-between flex-wrap sm:flex-nowrap">
|
||||
<div class="ml-4 mt-2">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900" id="analysis-history">Recent Analysis Results</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white">
|
||||
<div class="max-h-96 overflow-y-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50 sticky top-0">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Document</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metrics</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">View</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<% if @recent_analyses.present? && @recent_analyses.any? %>
|
||||
<% @recent_analyses.each do |analysis| %>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons text-gray-400">analytics</i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<div class="text-sm font-medium text-gray-900 truncate max-w-xs">
|
||||
<%= analysis.document.title %>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<%= pluralize(analysis.word_count || 0, 'word') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex flex-col gap-1">
|
||||
<% if analysis.flesch_kincaid_grade %>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
|
||||
Grade: <%= analysis.flesch_kincaid_grade.round(1) %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% if analysis.sentiment_score %>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium <%= analysis.sentiment_score >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %>">
|
||||
Sentiment: <%= analysis.sentiment_score.round(2) %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||
Complete
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<%= time_ago_in_words(analysis.completed_at) %> ago
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<%= link_to "View", analysis_document_path(analysis.document), class: "text-indigo-600 hover:text-indigo-900" %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-8 text-center">
|
||||
<div class="text-gray-500 mb-4">
|
||||
<i class="material-icons text-4xl mb-2">analytics</i>
|
||||
<p>No analyses have been run yet.</p>
|
||||
</div>
|
||||
<% if @recent_documents.present? && @recent_documents.any? %>
|
||||
<%= link_to "Analyze your first document", queue_analysis_document_path(@recent_documents.first), method: :get, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700" %>
|
||||
<% end %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analysis Insights -->
|
||||
<% if @recent_analyses.present? && @recent_analyses.any? %>
|
||||
<div class="bg-white shadow overflow-hidden rounded-lg mb-6">
|
||||
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Analysis Insights</h3>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-5 sm:p-6">
|
||||
<!-- Example Insights -->
|
||||
<div class="space-y-4">
|
||||
<div class="rounded-md bg-blue-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-blue-700">Average sentence length in "<%= @recent_analyses.first.document.title %>" is 24 words. Consider breaking longer sentences to improve readability.</p>
|
||||
<p class="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<a href="#" class="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600">Details <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md bg-green-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-green-700">Your vocabulary diversity score has improved by 15% over the last three documents.</p>
|
||||
<p class="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<a href="#" class="whitespace-nowrap font-medium text-green-700 hover:text-green-600">View trend <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md bg-yellow-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p class="text-sm text-yellow-700">Passive voice usage detected in 18% of sentences. Consider using active voice for more engaging writing.</p>
|
||||
<p class="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<a href="#" class="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600">View examples <span aria-hidden="true">→</span></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics Trends -->
|
||||
<div class="bg-white shadow overflow-hidden rounded-lg">
|
||||
<div class="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Analytics Trends</h3>
|
||||
</div>
|
||||
<div class="bg-white px-4 py-5 sm:p-6">
|
||||
<div class="flex flex-col">
|
||||
<!-- Simple chart for readability trends -->
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 mb-2">Readability Score Trend</p>
|
||||
<div class="h-24 bg-gray-50 rounded-lg p-4 flex items-end space-x-2">
|
||||
<% 7.times do |i| %>
|
||||
<% height = 30 + rand(50) %>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="bg-indigo-<%= 400 + (i % 3) * 100 %> h-<%= height %>% w-6 rounded-t transition-all duration-200 hover:bg-indigo-400"></div>
|
||||
<span class="text-xs text-gray-500 mt-1">Doc <%= i+1 %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">Based on your last 7 analyzed documents</p>
|
||||
</div>
|
||||
|
||||
<!-- Word count trend -->
|
||||
<div class="mt-6">
|
||||
<p class="text-sm font-medium text-gray-700 mb-2">Word Count Trend</p>
|
||||
<div class="h-24 bg-gray-50 rounded-lg p-4 flex items-end space-x-2">
|
||||
<% 7.times do |i| %>
|
||||
<% height = 40 + rand(50) %>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="bg-green-<%= 400 + (i % 3) * 100 %> h-<%= height %>% w-6 rounded-t transition-all duration-200 hover:bg-green-400"></div>
|
||||
<span class="text-xs text-gray-500 mt-1">Doc <%= i+1 %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">Word count progression over time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:w-80 space-y-6">
|
||||
<!-- Analysis Tools -->
|
||||
<div class="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Analysis Tools</h3>
|
||||
</div>
|
||||
<ul class="divide-y divide-gray-200">
|
||||
<li>
|
||||
<a href="#" class="block hover:bg-gray-50">
|
||||
<div class="px-4 py-4 flex items-center sm:px-6">
|
||||
<div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons text-blue-500">auto_stories</i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-900">Readability Analysis</p>
|
||||
<p class="text-xs text-gray-500">Flesch-Kincaid, SMOG, more</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 flex-shrink-0">
|
||||
<i class="material-icons text-gray-400">chevron_right</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block hover:bg-gray-50">
|
||||
<div class="px-4 py-4 flex items-center sm:px-6">
|
||||
<div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons text-purple-500">style</i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-900">Style Analysis</p>
|
||||
<p class="text-xs text-gray-500">Passive voice, adverbs, more</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 flex-shrink-0">
|
||||
<i class="material-icons text-gray-400">chevron_right</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block hover:bg-gray-50">
|
||||
<div class="px-4 py-4 flex items-center sm:px-6">
|
||||
<div class="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<i class="material-icons text-amber-500">sentiment_satisfied_alt</i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-900">Sentiment Analysis</p>
|
||||
<p class="text-xs text-gray-500">Emotional tone detection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-5 flex-shrink-0">
|
||||
<i class="material-icons text-gray-400">chevron_right</i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bg-gray-50 px-4 py-4 sm:px-6 border-t border-gray-200">
|
||||
<a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View all tools</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Tips Card -->
|
||||
<div class="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Writing Tips</h3>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6 space-y-4">
|
||||
<div class="rounded-md bg-blue-50 p-3">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-blue-800">Use active voice</h3>
|
||||
<div class="mt-1 text-sm text-blue-700">
|
||||
<p>Active voice sentences are clearer and more engaging. Replace "The ball was thrown" with "He threw the ball."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-md bg-green-50 p-3">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-green-800">Vary sentence length</h3>
|
||||
<div class="mt-1 text-sm text-green-700">
|
||||
<p>Mix short and longer sentences to create rhythm in your writing. Aim for an average of 15-20 words per sentence.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-md bg-purple-50 p-3">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="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" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<h3 class="text-sm font-medium text-purple-800">Eliminate filler words</h3>
|
||||
<div class="mt-1 text-sm text-purple-700">
|
||||
<p>Remove unnecessary words like "very," "really," and "actually" to strengthen your prose.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coming Soon Features -->
|
||||
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg overflow-hidden shadow">
|
||||
<div class="px-4 py-5 sm:p-6 text-white">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-full p-2">
|
||||
<i class="material-icons text-white">rocket_launch</i>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-medium text-white">Coming Soon</h3>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 space-y-3">
|
||||
<div class="flex items-center">
|
||||
<i class="material-icons text-indigo-200 mr-2 text-sm">bubble_chart</i>
|
||||
<span class="text-sm text-indigo-100">Character Relationship Graphs</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="material-icons text-indigo-200 mr-2 text-sm">show_chart</i>
|
||||
<span class="text-sm text-indigo-100">Emotional Arc Visualization</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="material-icons text-indigo-200 mr-2 text-sm">fingerprint</i>
|
||||
<span class="text-sm text-indigo-100">Style DNA Profile</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<a href="#" class="inline-flex items-center px-3 py-2 border border-white/30 rounded-md text-sm font-medium text-white bg-white/10 hover:bg-white/20 backdrop-blur-sm">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
358
app/views/document_analyses/landing.html.erb
Normal file
358
app/views/document_analyses/landing.html.erb
Normal file
@ -0,0 +1,358 @@
|
||||
<!-- Hero Section -->
|
||||
<div class="relative bg-gradient-to-r from-orange-500 to-amber-600">
|
||||
<div class="absolute inset-0">
|
||||
<img class="w-full h-full object-cover opacity-20" src="https://images.unsplash.com/photo-1475070929565-c985b496cb9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="Background">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-orange-500 to-amber-600 mix-blend-multiply"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">Document Analysis</h1>
|
||||
<p class="mt-6 max-w-3xl mx-auto text-xl text-orange-50">Unlock the full potential of your writing with AI-powered analysis tools that help you create more engaging, readable, and consistent content.</p>
|
||||
<div class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
|
||||
<div class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
|
||||
<%= link_to "Sign up free", new_user_registration_path, class: "flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-orange-700 bg-white hover:bg-orange-50 sm:px-8" %>
|
||||
<a href="#features" class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-orange-600 bg-opacity-60 hover:bg-opacity-70 sm:px-8">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features Section -->
|
||||
<div id="features" class="py-16 bg-gray-50 overflow-hidden lg:py-24">
|
||||
<div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
<div class="relative">
|
||||
<h2 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">AI-Powered Document Analysis</h2>
|
||||
<p class="mt-4 max-w-3xl mx-auto text-center text-xl text-gray-500">Get detailed insights into your writing that help you create better content.</p>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div class="relative">
|
||||
<h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">Readability Analysis</h3>
|
||||
<p class="mt-3 text-lg text-gray-500">Understand how accessible your writing is to different audiences with detailed readability metrics.</p>
|
||||
|
||||
<dl class="mt-10 space-y-10">
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Reading Level Scores</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Get multiple readability scores including Flesch-Kincaid, Gunning Fog, and more.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Syllable Distribution</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Visualize the distribution of syllables in your writing to identify potential readability issues.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Sentence Length Analysis</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Get insights into your sentence structures and identify areas to improve flow and rhythm.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0" aria-hidden="true">
|
||||
<div class="relative mx-auto shadow-lg rounded-lg overflow-hidden">
|
||||
<%= image_tag "https://images.unsplash.com/photo-1455390582262-044cdead277a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80", class: "w-full h-full object-cover", alt: "Readability Dashboard" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-12 sm:mt-16 lg:mt-24">
|
||||
<div class="lg:grid lg:grid-flow-row-dense lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div class="lg:col-start-2">
|
||||
<h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">Style Analysis</h3>
|
||||
<p class="mt-3 text-lg text-gray-500">Get detailed insights into your writing style, including word choice, grammar patterns, and more.</p>
|
||||
|
||||
<dl class="mt-10 space-y-10">
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Parts of Speech Analysis</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">See the distribution of nouns, verbs, adjectives, and more to balance your writing style.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Word Frequency</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Identify overused words and phrases to improve variety in your vocabulary.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Cliché Detection</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Highlight overused expressions and clichés to make your writing more original.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0 lg:col-start-1">
|
||||
<div class="relative mx-auto shadow-lg rounded-lg overflow-hidden">
|
||||
<%= image_tag "https://images.unsplash.com/photo-1456324504439-367cee3b3c32?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80", class: "w-full h-full object-cover", alt: "Style Analysis Dashboard" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
|
||||
<div class="relative">
|
||||
<h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">Sentiment Analysis</h3>
|
||||
<p class="mt-3 text-lg text-gray-500">Understand the emotional tone of your writing with advanced sentiment analysis tools.</p>
|
||||
|
||||
<dl class="mt-10 space-y-10">
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Emotion Detection</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Analyze the emotional content of your writing, including joy, sadness, fear, anger, and disgust.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Sentiment Visualization</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">See sentiment trends throughout your document to ensure emotional consistency or intentional shifts.</dd>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<dt>
|
||||
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-orange-500 text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="ml-16 text-lg leading-6 font-medium text-gray-900">Tone Consistency</p>
|
||||
</dt>
|
||||
<dd class="mt-2 ml-16 text-base text-gray-500">Ensure your document maintains a consistent tone throughout, or intentionally varies where needed.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0" aria-hidden="true">
|
||||
<div class="relative mx-auto shadow-lg rounded-lg overflow-hidden">
|
||||
<%= image_tag "https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80", class: "w-full h-full object-cover", alt: "Sentiment Analysis Dashboard" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Call to action -->
|
||||
<div class="bg-orange-500">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
|
||||
<span class="block">Ready to analyze your writing?</span>
|
||||
<span class="block text-orange-100">Start your free Notebook.ai account today.</span>
|
||||
</h2>
|
||||
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div class="inline-flex rounded-md shadow">
|
||||
<%= link_to "Sign up free", new_user_registration_path, class: "inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-orange-600 bg-white hover:bg-orange-50" %>
|
||||
</div>
|
||||
<div class="ml-3 inline-flex rounded-md shadow">
|
||||
<a href="#features" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
||||
<h2 class="text-3xl font-extrabold text-gray-900 text-center">Frequently asked questions</h2>
|
||||
<div class="mt-12">
|
||||
<dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3">
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">What is document analysis?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">Document analysis uses AI and natural language processing to evaluate your writing for readability, style, sentiment, and more, providing actionable insights to improve your content.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">How often can I analyze my documents?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">You can analyze any document in your Notebook.ai account as often as you like. Free accounts have a limit on document length, while Premium subscribers can analyze documents of any length.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Is my writing data kept private?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">Yes! All of your documents and analysis results are kept private by default. You have complete control over who can access your content.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Can I use this for fiction writing?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">Absolutely! Our analysis tools work great for fiction, non-fiction, academic writing, and more. We even have specific features designed for creative writers.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Do I need any technical knowledge?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">Not at all. Our analysis tools are designed to be easy to use, with clear visualizations and actionable insights that anyone can understand and apply.</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt class="text-lg leading-6 font-medium text-gray-900">Can I export my analysis results?</dt>
|
||||
<dd class="mt-2 text-base text-gray-500">Yes! Premium users can export analysis results in various formats for sharing or reference offline.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<div class="bg-gradient-to-r from-orange-400 to-amber-500 py-16 lg:py-24">
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="relative">
|
||||
<blockquote class="mt-8">
|
||||
<div class="max-w-3xl mx-auto text-center text-2xl leading-9 font-medium text-white">
|
||||
<p>
|
||||
"Notebook.ai's document analysis tools have transformed my writing process. I can now quickly identify areas to improve and ensure my tone is consistent throughout my novels."
|
||||
</p>
|
||||
</div>
|
||||
<footer class="mt-8">
|
||||
<div class="md:flex md:items-center md:justify-center">
|
||||
<div class="md:flex-shrink-0">
|
||||
<img class="mx-auto h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||
</div>
|
||||
<div class="mt-3 text-center md:mt-0 md:ml-4 md:flex md:items-center">
|
||||
<div class="text-base font-medium text-white">Sarah Johnson</div>
|
||||
|
||||
<svg class="hidden md:block mx-1 h-5 w-5 text-orange-200" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M11 0h3L9 20H6l5-20z" />
|
||||
</svg>
|
||||
|
||||
<div class="text-base font-medium text-orange-100">Fantasy Author</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Future of AI Writing Section -->
|
||||
<div class="bg-gradient-to-r from-indigo-900 to-purple-900 py-16 lg:py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl font-extrabold text-white sm:text-4xl lg:text-5xl">The Future of AI-Powered Writing Analysis</h2>
|
||||
<p class="mt-4 max-w-2xl mx-auto text-xl text-indigo-100">We're exploring cutting-edge features that could transform how writers understand and improve their craft.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">bubble_chart</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Character Relationship Graph</h3>
|
||||
<p class="text-indigo-200">Visualize the intricate web of character interactions throughout your narrative with stunning interactive graphs.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">show_chart</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Emotional Arc Visualization</h3>
|
||||
<p class="text-indigo-200">Map the emotional journey of your stories and compare them to classic narrative structures.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">psychology</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Style DNA Profile</h3>
|
||||
<p class="text-indigo-200">Discover your unique writing fingerprint and track how your style evolves across different works.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">verified</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Worldbuilding Consistency</h3>
|
||||
<p class="text-indigo-200">AI-powered checks to ensure your fictional world maintains internal consistency throughout your writing.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">movie</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">AI Scene Director</h3>
|
||||
<p class="text-indigo-200">Generate visual staging suggestions and cinematic concepts based on your scene descriptions.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-indigo-800 bg-opacity-50 rounded-xl shadow-xl p-8 border border-indigo-600 transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl">
|
||||
<div class="h-12 w-12 rounded-full bg-purple-500 flex items-center justify-center mb-4">
|
||||
<i class="material-icons text-white">travel_explore</i>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Cultural Reception Predictor</h3>
|
||||
<p class="text-indigo-200">Analyze how your writing might be received by readers from different cultural backgrounds.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<p class="text-xl text-white font-light">These cutting-edge features represent our vision for the future of AI-assisted writing.<br>Help us shape this future by joining Notebook.ai today.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Final CTA -->
|
||||
<div class="bg-white">
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-orange-500 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
|
||||
<div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
|
||||
<div class="lg:self-center">
|
||||
<h2 class="text-3xl font-extrabold text-white sm:text-4xl">
|
||||
<span class="block">Start analyzing your writing today.</span>
|
||||
<span class="block">Join Notebook.ai for free.</span>
|
||||
</h2>
|
||||
<p class="mt-4 text-lg leading-6 text-orange-50">Create a free account to get started with AI-powered document analysis and unlock your writing potential.</p>
|
||||
<a href="<%= new_user_registration_path %>" class="mt-8 bg-white border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-orange-600 hover:bg-orange-50">Sign up now</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
|
||||
<img class="transform translate-x-6 translate-y-6 rounded-md object-cover object-left-top sm:translate-x-16 lg:translate-y-20" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" alt="App screenshot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -147,14 +147,14 @@
|
||||
-->
|
||||
<% end %>
|
||||
|
||||
<%= link_to '#new-analysis-onboarding', class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?('#new-analysis-onboarding')} hover:bg-notebook-blue hover:text-white" do %>
|
||||
<%= link_to analysis_hub_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(analysis_hub_path)} hover:bg-notebook-blue hover:text-white" do %>
|
||||
<i class="material-icons <%= DocumentAnalysis.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= DocumentAnalysis.icon %></i>
|
||||
<span class="flex-grow text-sm min-w-0 truncate">Analysis</span>
|
||||
<!--
|
||||
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700">
|
||||
0
|
||||
</span>
|
||||
-->
|
||||
<% if user_signed_in? && DocumentAnalysis.joins(:document).where(documents: { user_id: current_user.id }).where.not(completed_at: nil).count > 0 %>
|
||||
<span class="bg-gray-100 text-black rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
||||
<%= DocumentAnalysis.joins(:document).where(documents: { user_id: current_user.id }).where.not(completed_at: nil).count %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -122,7 +122,8 @@ Rails.application.routes.draw do
|
||||
get '/users/:id/tag/:tag_slug', to: 'users#tag', as: :user_id_tag
|
||||
|
||||
scope '/analysis' do
|
||||
get '/', to: 'document_analyses#index'
|
||||
get '/', to: 'document_analyses#landing', as: :landing_path
|
||||
get '/hub', to: 'document_analyses#hub', as: :analysis_hub
|
||||
end
|
||||
|
||||
resources :documents do
|
||||
|
||||
Loading…
Reference in New Issue
Block a user