bender/1721a074-e806-4810-aba0-9d30973db120
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #3

Merged
bender merged 6 commits from version_3 into main 2026-03-06 06:09:55 +00:00
Conversation 0 Commits 6 Files Changed 6 +715 -55
6 changed files with 715 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,190 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import { useState } from "react";
import { BarChart3, TrendingUp, Clock, FileText } from "lucide-react";
export default function DashboardPage() {
const [stats] = useState({
totalWords: 24580,
conversions: 156,
averageScore: 92.5,
timeActive: "45 days"
});
const [recentActivity] = useState([
{ id: 1, text: "Product launch announcement", tone: "Professional", words: 340, date: "Today", status: "Completed" },
{ id: 2, text: "Blog post introduction", tone: "Friendly", words: 520, date: "Yesterday", status: "Completed" },
{ id: 3, text: "Email marketing copy", tone: "Casual", words: 280, date: "2 days ago", status: "Completed" },
{ id: 4, text: "Technical documentation", tone: "Academic", words: 1240, date: "3 days ago", status: "Completed" },
{ id: 5, text: "Social media captions", tone: "Friendly", words: 180, date: "4 days ago", status: "Completed" }
]);
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="HumanText AI"
navItems={[
{ name: "Tool", id: "/humanizer" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "FAQ", id: "#faq" }
]}
/>
</div>
<div className="min-h-screen pt-24 pb-20 px-4 md:px-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-12">
<h1 className="text-4xl md:text-5xl font-bold mb-4">Your Dashboard</h1>
<p className="text-lg text-gray-600 dark:text-gray-300">
Track your humanization progress and conversions
</p>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{[
{
icon: FileText,
label: "Total Words", value: stats.totalWords.toLocaleString(),
color: "bg-blue-100 dark:bg-blue-900", textColor: "text-blue-600 dark:text-blue-300"
},
{
icon: TrendingUp,
label: "Conversions", value: stats.conversions,
color: "bg-green-100 dark:bg-green-900", textColor: "text-green-600 dark:text-green-300"
},
{
icon: BarChart3,
label: "Avg. AI Score", value: `${stats.averageScore}%`,
color: "bg-purple-100 dark:bg-purple-900", textColor: "text-purple-600 dark:text-purple-300"
},
{
icon: Clock,
label: "Account Age", value: stats.timeActive,
color: "bg-orange-100 dark:bg-orange-900", textColor: "text-orange-600 dark:text-orange-300"
}
].map((stat, idx) => {
const Icon = stat.icon;
return (
<div key={idx} className={`${stat.color} rounded-lg p-6 transition hover:shadow-lg`}>
<div className="flex items-center justify-between mb-4">
<Icon className={`${stat.textColor}`} size={28} />
</div>
<p className="text-gray-600 dark:text-gray-300 text-sm font-medium mb-2">
{stat.label}
</p>
<p className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">
{stat.value}
</p>
</div>
);
})}
</div>
{/* Recent Activity */}
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-2xl font-bold">Recent Conversions</h2>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200 dark:border-gray-700">
<th className="text-left py-4 px-6 font-semibold text-gray-700 dark:text-gray-300">Content</th>
<th className="text-left py-4 px-6 font-semibold text-gray-700 dark:text-gray-300">Tone</th>
<th className="text-left py-4 px-6 font-semibold text-gray-700 dark:text-gray-300">Words</th>
<th className="text-left py-4 px-6 font-semibold text-gray-700 dark:text-gray-300">Date</th>
<th className="text-left py-4 px-6 font-semibold text-gray-700 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody>
{recentActivity.map((activity) => (
<tr key={activity.id} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
<td className="py-4 px-6 text-gray-900 dark:text-white font-medium">{activity.text}</td>
<td className="py-4 px-6">
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm">
{activity.tone}
</span>
</td>
<td className="py-4 px-6 text-gray-600 dark:text-gray-400">{activity.words}</td>
<td className="py-4 px-6 text-gray-600 dark:text-gray-400">{activity.date}</td>
<td className="py-4 px-6">
<span className="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm">
{activity.status}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Usage Chart */}
<div className="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Words Usage */}
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
<h3 className="text-xl font-bold mb-6">Monthly Usage</h3>
<div className="space-y-4">
{[
{ month: "Jan", usage: 45, limit: 100 },
{ month: "Feb", usage: 62, limit: 100 },
{ month: "Mar", usage: 78, limit: 100 },
{ month: "Apr", usage: 92, limit: 100 }
].map((month) => (
<div key={month.month}>
<div className="flex justify-between mb-2">
<span className="text-sm font-medium">{month.month}</span>
<span className="text-sm text-gray-600 dark:text-gray-400">{month.usage}/{month.limit}</span>
</div>
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="h-full bg-blue-500 transition-all"
style={{ width: `${(month.usage / month.limit) * 100}%` }}
/>
</div>
</div>
))}
</div>
</div>
{/* Plan Info */}
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
<h3 className="text-xl font-bold mb-6">Current Plan</h3>
<div className="space-y-4">
<div className="p-4 bg-blue-50 dark:bg-blue-900 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Plan Type</p>
<p className="text-2xl font-bold text-gray-900 dark:text-white">Free Plan</p>
</div>
<div className="p-4 bg-green-50 dark:bg-green-900 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Words Remaining</p>
<p className="text-2xl font-bold text-gray-900 dark:text-white">234 / 500</p>
</div>
<button className="w-full mt-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-semibold">
Upgrade to Pro
</button>
</div>
</div>
</div>
</div>
</div>
</ThemeProvider>
);
}

73
src/app/features/page.tsx Normal file
View File

@@ -0,0 +1,73 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
export default function FeaturesPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="HumanText AI"
navItems={[
{ name: "Tool", id: "/humanizer" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "FAQ", id: "#faq" }
]}
/>
</div>
<div className="pt-24">
<ProductCardThree
title="Powerful Features"
description="Everything you need to convert AI text into natural human writing"
tag="Capabilities"
products={[
{
id: "1", name: "Lightning Fast Processing", price: "Instant", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-representing-lightn-1772775903821-37a979ad.png", imageAlt: "Lightning Fast Processing"
},
{
id: "2", name: "AI Detection Score", price: "Real-time", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-accuracy-wi-1772775902105-d346a1bf.png", imageAlt: "AI Detection Score"
},
{
id: "3", name: "Bank-Level Security", price: "Protected", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-of-a-shield-or-lock-1772775901938-42dfe89c.png", imageAlt: "Bank-Level Security"
},
{
id: "4", name: "API Integration", price: "Available", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-api-integra-1772775901771-5966492b.png", imageAlt: "API Integration"
},
{
id: "5", name: "Batch Processing", price: "Scalable", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-representing-lightn-1772775903821-37a979ad.png", imageAlt: "Batch Processing"
},
{
id: "6", name: "Multiple Tone Options", price: "Flexible", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-accuracy-wi-1772775902105-d346a1bf.png", imageAlt: "Multiple Tone Options"
}
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
</ThemeProvider>
);
}

211
src/app/humanizer/page.tsx Normal file
View File

@@ -0,0 +1,211 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import { useState } from "react";
import { Copy, Download, RefreshCw, Zap } from "lucide-react";
export default function HumanizerPage() {
const [inputText, setInputText] = useState("");
const [outputText, setOutputText] = useState("");
const [tone, setTone] = useState("professional");
const [isProcessing, setIsProcessing] = useState(false);
const [wordCount, setWordCount] = useState(0);
const [aiDetectionScore, setAiDetectionScore] = useState(0);
const [conversionHistory, setConversionHistory] = useState<Array<{ input: string; output: string; tone: string; timestamp: Date }>>([]);
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const text = e.target.value;
setInputText(text);
setWordCount(text.split(/\s+/).filter(word => word.length > 0).length);
};
const handleHumanize = async () => {
if (!inputText.trim()) return;
setIsProcessing(true);
// Simulate processing
setTimeout(() => {
const humanized = `[${tone}] ${inputText.replace(/AI|artificial/gi, 'smart')}`;
setOutputText(humanized);
setAiDetectionScore(Math.random() * 30 + 5); // Simulated score
setConversionHistory(prev => [{
input: inputText,
output: humanized,
tone,
timestamp: new Date()
}, ...prev.slice(0, 4)]);
setIsProcessing(false);
}, 1500);
};
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="HumanText AI"
navItems={[
{ name: "Tool", id: "/humanizer" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "FAQ", id: "#faq" }
]}
/>
</div>
<div className="min-h-screen pt-24 pb-20 px-4 md:px-8">
<div className="max-w-7xl mx-auto">
{/* Header */}
<div className="mb-12 text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-4">AI Text Humanizer</h1>
<p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Transform your AI-generated content into natural human-written text instantly
</p>
</div>
{/* Main Editor */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
{/* Input Section */}
<div className="flex flex-col">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">AI-Generated Text</h2>
<span className="text-sm text-gray-500">Words: {wordCount}</span>
</div>
<textarea
value={inputText}
onChange={handleInputChange}
placeholder="Paste your AI-generated text here..."
className="flex-1 p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white resize-none"
/>
<div className="mt-4">
<label className="block text-sm font-medium mb-2">Tone & Style</label>
<select
value={tone}
onChange={(e) => setTone(e.target.value)}
className="w-full p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
>
<option value="professional">Professional</option>
<option value="casual">Casual</option>
<option value="academic">Academic</option>
<option value="friendly">Friendly</option>
</select>
</div>
</div>
{/* Output Section */}
<div className="flex flex-col">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">Humanized Text</h2>
{aiDetectionScore > 0 && (
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">AI Score: {aiDetectionScore.toFixed(1)}%</span>
<div className="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700">
<div
className="h-full bg-green-500 rounded-full transition-all"
style={{ width: `${Math.max(100 - aiDetectionScore, 0)}%` }}
/>
</div>
</div>
)}
</div>
<textarea
value={outputText}
readOnly
placeholder="Your humanized text will appear here..."
className="flex-1 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-white resize-none"
/>
{outputText && (
<div className="mt-4 flex gap-2">
<button
onClick={() => copyToClipboard(outputText)}
className="flex-1 flex items-center justify-center gap-2 p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
>
<Copy size={18} />
Copy
</button>
<button
onClick={() => copyToClipboard(outputText)}
className="flex-1 flex items-center justify-center gap-2 p-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"
>
<Download size={18} />
Download
</button>
</div>
)}
</div>
</div>
{/* Humanize Button */}
<div className="flex justify-center mb-8">
<button
onClick={handleHumanize}
disabled={isProcessing || !inputText.trim()}
className="flex items-center gap-2 px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition font-semibold text-lg"
>
{isProcessing ? (
<>
<RefreshCw size={20} className="animate-spin" />
Processing...
</>
) : (
<>
<Zap size={20} />
Humanize Text
</>
)}
</button>
</div>
{/* Conversion History */}
{conversionHistory.length > 0 && (
<div className="mt-12">
<h3 className="text-2xl font-bold mb-6">Recent Conversions</h3>
<div className="space-y-4">
{conversionHistory.map((item, idx) => (
<div key={idx} className="p-4 border rounded-lg dark:border-gray-700">
<div className="flex justify-between items-start mb-3">
<div>
<p className="font-medium capitalize text-sm text-gray-600 dark:text-gray-400">
{item.tone} • {item.timestamp.toLocaleTimeString()}
</p>
</div>
<button
onClick={() => {
setInputText(item.input);
setOutputText(item.output);
setTone(item.tone);
}}
className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition"
>
Load
</button>
</div>
<p className="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
{item.output}
</p>
</div>
))}
</div>
</div>
)}
</div>
</div>
</ThemeProvider>
);
}

17
src/app/layout.tsx
View File

@@ -11,25 +11,28 @@ const inter = Inter({
export const metadata: Metadata = {
title: "HumanText AI - Convert AI Text to Human Writing", description: "Transform AI-generated text into natural human-written content with advanced humanization algorithms. Pass AI detection, maintain meaning, and choose your tone.", keywords: "AI humanizer, text converter, AI to human, content humanization, AI detection, humanize AI text", metadataBase: new URL("https://humantext-ai.com"),
alternates: {
canonical: "https://humantext-ai.com"},
canonical: "https://humantext-ai.com"
},
openGraph: {
title: "HumanText AI - Convert AI Text to Human Writing", description: "Transform AI-generated text into natural human-written content instantly.", url: "https://humantext-ai.com", siteName: "HumanText AI", type: "website", images: [
{
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png", alt: "HumanText AI - AI Text Converter"},
],
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png", alt: "HumanText AI - AI Text Converter"
}
]
},
twitter: {
card: "summary_large_image", title: "HumanText AI - Convert AI Text to Human Writing", description: "Transform AI-generated text into natural human-written content instantly.", images: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png"],
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png"
]
},
robots: {
index: true,
follow: true,
},
follow: true
}
};
export default function RootLayout({
children,
children
}: Readonly<{
children: React.ReactNode;
}>) {

123
src/app/page.tsx
View File

@@ -31,11 +31,11 @@ export default function LandingPage() {
<NavbarStyleApple
brandName="HumanText AI"
navItems={[
{ name: "Tool", id: "tool" },
{ name: "How It Works", id: "how-it-works" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
{ name: "Tool", id: "/humanizer" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "FAQ", id: "faq" }
]}
/>
</div>
@@ -45,13 +45,14 @@ export default function LandingPage() {
logoText="HUMANTEXT"
description="Convert AI-generated text into natural human-written content with advanced humanization algorithms"
buttons={[
{ text: "Start Free", href: "#tool" },
{ text: "Learn More", href: "#how-it-works" },
{ text: "Start Free", href: "/humanizer" },
{ text: "Learn More", href: "/features" }
]}
slides={[
{
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png", imageAlt: "Hero Dashboard"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-modern-saas-hero-background-showing-a--1772775904244-c9dec283.png", imageAlt: "Hero Dashboard"
}
]}
autoplayDelay={5000}
showDimOverlay={true}
@@ -62,7 +63,7 @@ export default function LandingPage() {
<TextAbout
tag="AI Tool Interface"
title="Transform AI Text Into Natural Human Writing"
buttons={[{ text: "Try Demo", href: "#contact" }]}
buttons={[{ text: "Try Demo", href: "/humanizer" }]}
useInvertedBackground={false}
/>
</div>
@@ -78,31 +79,37 @@ export default function LandingPage() {
title: "Paste AI Text", description:
"Simply paste or upload your AI-generated content into our secure converter", phoneOne: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-of-an-ai-detection-system-w-1772775904159-6a0796cd.png", imageAlt: "Step One - AI Detection"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-of-an-ai-detection-system-w-1772775904159-6a0796cd.png", imageAlt: "Step One - AI Detection"
},
phoneTwo: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=1", imageAlt: "Text Converter Demo"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=1", imageAlt: "Text Converter Demo"
}
},
{
id: 2,
title: "Select Tone & Style", description:
"Choose your desired tone (Professional, Casual, Academic, Friendly) and humanization level", phoneOne: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-showing-the-humanization-pr-1772775901806-8bfa5fae.png", imageAlt: "Step Two - Humanization"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-showing-the-humanization-pr-1772775901806-8bfa5fae.png", imageAlt: "Step Two - Humanization"
},
phoneTwo: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=2", imageAlt: "Text Converter Demo"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=2", imageAlt: "Text Converter Demo"
}
},
{
id: 3,
title: "Get Human-Like Output", description:
"Receive perfectly humanized content that passes AI detection and reads naturally", phoneOne: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-of-the-final-output-stage-s-1772775902244-030b54dc.png", imageAlt: "Step Three - Output"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/illustration-of-the-final-output-stage-s-1772775902244-030b54dc.png", imageAlt: "Step Three - Output"
},
phoneTwo: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=3", imageAlt: "Text Converter Demo"},
},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/a-clean-professional-text-conversion-int-1772775904357-85b15576.png?_wi=3", imageAlt: "Text Converter Demo"
}
}
]}
showStepNumbers={true}
textboxLayout="default"
@@ -119,16 +126,20 @@ export default function LandingPage() {
products={[
{
id: "1", name: "Lightning Fast Processing", price: "Instant", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-representing-lightn-1772775903821-37a979ad.png", imageAlt: "Lightning Fast Processing"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-representing-lightn-1772775903821-37a979ad.png", imageAlt: "Lightning Fast Processing"
},
{
id: "2", name: "AI Detection Score", price: "Real-time", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-accuracy-wi-1772775902105-d346a1bf.png", imageAlt: "AI Detection Score"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-accuracy-wi-1772775902105-d346a1bf.png", imageAlt: "AI Detection Score"
},
{
id: "3", name: "Bank-Level Security", price: "Protected", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-of-a-shield-or-lock-1772775901938-42dfe89c.png", imageAlt: "Bank-Level Security"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-of-a-shield-or-lock-1772775901938-42dfe89c.png", imageAlt: "Bank-Level Security"
},
{
id: "4", name: "API Integration", price: "Available", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-api-integra-1772775901771-5966492b.png", imageAlt: "API Integration"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/icon-or-illustration-showing-api-integra-1772775901771-5966492b.png", imageAlt: "API Integration"
}
]}
gridVariant="two-columns-alternating-heights"
animationType="slide-up"
@@ -144,16 +155,18 @@ export default function LandingPage() {
tag="Pricing"
plans={[
{
id: "free", badge: "Popular", price: "Free", subtitle: "Perfect for trying out", buttons: [{ text: "Get Started", href: "/signup" }],
id: "free", badge: "Popular", price: "Free", subtitle: "Perfect for trying out", buttons: [{ text: "Get Started", href: "/humanizer" }],
features: [
"500 words per month", "Basic humanization", "Standard tone options", "Email support"],
"500 words per month", "Basic humanization", "Standard tone options", "Email support"
]
},
{
id: "pro", badge: "Best Value", badgeIcon: Sparkles,
price: "$29/month", subtitle: "For professionals and teams", buttons: [{ text: "Start Pro", href: "/signup?plan=pro" }],
price: "$29/month", subtitle: "For professionals and teams", buttons: [{ text: "Start Pro", href: "/humanizer" }],
features: [
"Unlimited conversions", "Advanced AI detection", "All tone options", "Priority support", "API access", "Batch processing", "History saved"],
},
"Unlimited conversions", "Advanced AI detection", "All tone options", "Priority support", "API access", "Batch processing", "History saved"
]
}
]}
animationType="slide-up"
textboxLayout="default"
@@ -171,32 +184,38 @@ export default function LandingPage() {
id: "1", name: "Sarah Johnson", handle: "@sarahj_marketing", testimonial:
"HumanText AI completely transformed how I manage content creation. My AI drafts now pass as human-written seamlessly. It's been a game-changer for our agency!", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-business-prof-1772775902119-36e4abb5.png", imageAlt: "Sarah Johnson"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-business-prof-1772775902119-36e4abb5.png", imageAlt: "Sarah Johnson"
},
{
id: "2", name: "Michael Chen", handle: "@mikechen_tech", testimonial:
"The accuracy is incredible. Not only does it humanize text perfectly, but the AI detection score feature helps us understand exactly what we're working with. Highly recommend!", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-business-prof-1772775902928-5f458325.png", imageAlt: "Michael Chen"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-business-prof-1772775902928-5f458325.png", imageAlt: "Michael Chen"
},
{
id: "3", name: "Emily Rodriguez", handle: "@emilyrodz_writer", testimonial:
"As a content writer, I was skeptical about AI tools. But HumanText AI respects the original meaning while making the content feel naturally written. It's like having an editor assistant!", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-creative-prof-1772775901689-f52a7d6b.png", imageAlt: "Emily Rodriguez"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-creative-prof-1772775901689-f52a7d6b.png", imageAlt: "Emily Rodriguez"
},
{
id: "4", name: "David Kim", handle: "@davidkim_pm", testimonial:
"We integrated HumanText AI into our workflow for product descriptions. The time saved is massive, and the quality is consistently excellent. Worth every penny of the Pro plan.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-marketing-pro-1772775902030-2c009304.png", imageAlt: "David Kim"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-marketing-pro-1772775902030-2c009304.png", imageAlt: "David Kim"
},
{
id: "5", name: "Jessica Turner", handle: "@jessicaturner_content", testimonial:
"Finally, a tool that understands nuance! The tone selector is brilliant. I can switch between professional and friendly versions in seconds. This is the future of content creation.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-tech-professi-1772775902064-97c67890.png", imageAlt: "Jessica Turner"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-tech-professi-1772775902064-97c67890.png", imageAlt: "Jessica Turner"
},
{
id: "6", name: "Alex Martinez", handle: "@alexmartinez_social", testimonial:
"The API integration was seamless, and our support experience was outstanding. HumanText AI is now core to our content pipeline. Couldn't ask for better service.", rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-content-creat-1772775902078-b872705d.png", imageAlt: "Alex Martinez"},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AVu2GGvbvb8MZVdZxJW51nb7zW/professional-headshot-of-a-content-creat-1772775902078-b872705d.png", imageAlt: "Alex Martinez"
}
]}
showRating={true}
animationType="slide-up"
@@ -213,28 +232,36 @@ export default function LandingPage() {
faqs={[
{
id: "1", title: "How does HumanText AI work?", content:
"HumanText AI uses advanced language models to analyze AI-generated text and rewrite it to sound naturally human-written. Our system preserves meaning while adjusting tone, vocabulary, and sentence structure to match human writing patterns."},
"HumanText AI uses advanced language models to analyze AI-generated text and rewrite it to sound naturally human-written. Our system preserves meaning while adjusting tone, vocabulary, and sentence structure to match human writing patterns."
},
{
id: "2", title: "Will my text pass AI detection tools?", content:
"Yes! Our humanization process is specifically designed to create text that passes most AI detection tools. We also provide a real-time AI detection score so you can see exactly how human your content appears."},
"Yes! Our humanization process is specifically designed to create text that passes most AI detection tools. We also provide a real-time AI detection score so you can see exactly how human your content appears."
},
{
id: "3", title: "How long does processing take?", content:
"Most conversions complete instantly, typically within 2-5 seconds depending on text length. Batch processing on the Pro plan can handle larger volumes efficiently."},
"Most conversions complete instantly, typically within 2-5 seconds depending on text length. Batch processing on the Pro plan can handle larger volumes efficiently."
},
{
id: "4", title: "Is my data secure and private?", content:
"Absolutely. We use bank-level encryption (TLS 1.3) for all data transmission. Your texts are never stored or shared, and we don't use them to train our models. Your privacy is our top priority."},
"Absolutely. We use bank-level encryption (TLS 1.3) for all data transmission. Your texts are never stored or shared, and we don't use them to train our models. Your privacy is our top priority."
},
{
id: "5", title: "Can I use this for academic writing?", content:
"HumanText AI can help polish academic writing, but we recommend checking your institution's policies. Our tool is best used to enhance your own writing, not to replace the writing process entirely."},
"HumanText AI can help polish academic writing, but we recommend checking your institution's policies. Our tool is best used to enhance your own writing, not to replace the writing process entirely."
},
{
id: "6", title: "What tone options are available?", content:
"We offer four main tones: Professional (for business), Casual (conversational), Academic (scholarly), and Friendly (warm and approachable). Each tone has multiple intensity levels for fine-tuned control."},
"We offer four main tones: Professional (for business), Casual (conversational), Academic (scholarly), and Friendly (warm and approachable). Each tone has multiple intensity levels for fine-tuned control."
},
{
id: "7", title: "Do you offer an API?", content:
"Yes! Pro plan subscribers get access to our REST API for seamless integration. Full documentation and code examples are provided to make integration quick and easy."},
"Yes! Pro plan subscribers get access to our REST API for seamless integration. Full documentation and code examples are provided to make integration quick and easy."
},
{
id: "8", title: "Can I try it before paying?", content:
"Of course! Our Free plan includes 500 words per month, perfect for testing the tool. Upgrade to Pro anytime if you need more capacity and advanced features."},
"Of course! Our Free plan includes 500 words per month, perfect for testing the tool. Upgrade to Pro anytime if you need more capacity and advanced features."
}
]}
faqsAnimation="slide-up"
textboxLayout="default"
@@ -261,28 +288,28 @@ export default function LandingPage() {
columns={[
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "How It Works", href: "#how-it-works" },
{ label: "API Docs", href: "https://docs.humantext.ai" },
],
{ label: "API Docs", href: "https://docs.humantext.ai" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" },
],
{ label: "Contact", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Security", href: "#" },
{ label: "Compliance", href: "#" },
],
},
{ label: "Compliance", href: "#" }
]
}
]}
copyrightText="© 2025 HumanText AI. All rights reserved."
/>

156
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Sparkles, Check } from "lucide-react";
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="HumanText AI"
navItems={[
{ name: "Tool", id: "/humanizer" },
{ name: "Features", id: "/features" },
{ name: "Pricing", id: "/pricing" },
{ name: "Dashboard", id: "/dashboard" },
{ name: "FAQ", id: "#faq" }
]}
/>
</div>
<div id="pricing" data-section="pricing" className="pt-24">
<PricingCardEight
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your humanization needs"
tag="Pricing"
plans={[
{
id: "free", badge: "Popular", price: "Free", subtitle: "Perfect for trying out", buttons: [{ text: "Get Started", href: "/humanizer" }],
features: [
"500 words per month", "Basic humanization", "Standard tone options", "Email support", "Community access"
]
},
{
id: "pro", badge: "Best Value", badgeIcon: Sparkles,
price: "$29/month", subtitle: "For professionals and teams", buttons: [{ text: "Start Pro", href: "/humanizer" }],
features: [
"Unlimited conversions", "Advanced AI detection", "All tone options", "Priority support", "API access", "Batch processing", "Conversion history", "Team collaboration"
]
},
{
id: "enterprise", price: "Custom", subtitle: "For large-scale operations", buttons: [{ text: "Contact Sales", href: "#contact" }],
features: [
"Enterprise-grade features", "Custom integration", "Dedicated account manager", "Advanced security", "SLA guarantee", "White-label options", "Custom training", "24/7 support"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div className="py-20 px-4">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Plan Comparison</h2>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b">
<th className="text-left py-4 px-4 font-semibold">Feature</th>
<th className="text-center py-4 px-4 font-semibold">Free</th>
<th className="text-center py-4 px-4 font-semibold">Pro</th>
<th className="text-center py-4 px-4 font-semibold">Enterprise</th>
</tr>
</thead>
<tbody>
{[
{ feature: "Words per month", free: "500", pro: "Unlimited", enterprise: "Unlimited" },
{ feature: "AI Detection", free: "Basic", pro: "Advanced", enterprise: "Advanced" },
{ feature: "Tone Options", free: "2", pro: "4", enterprise: "4" },
{ feature: "API Access", free: "No", pro: "Yes", enterprise: "Yes" },
{ feature: "Batch Processing", free: "No", pro: "Yes", enterprise: "Yes" },
{ feature: "History Saved", free: "No", pro: "30 days", enterprise: "Unlimited" },
{ feature: "Team Collaboration", free: "No", pro: "Up to 5", enterprise: "Unlimited" },
{ feature: "Priority Support", free: "No", pro: "Yes", enterprise: "24/7" }
].map((row, idx) => (
<tr key={idx} className="border-b hover:bg-gray-50 dark:hover:bg-gray-900">
<td className="py-4 px-4 font-medium">{row.feature}</td>
<td className="py-4 px-4 text-center">
{row.free === "Yes" || row.free === "No" ? (
row.free === "Yes" ? <Check size={20} className="mx-auto text-green-500" /> : <span className="text-gray-400">—</span>
) : (
row.free
)}
</td>
<td className="py-4 px-4 text-center">
{row.pro === "Yes" || row.pro === "No" ? (
row.pro === "Yes" ? <Check size={20} className="mx-auto text-green-500" /> : <span className="text-gray-400">—</span>
) : (
row.pro
)}
</td>
<td className="py-4 px-4 text-center">
{row.enterprise === "Yes" || row.enterprise === "No" ? (
row.enterprise === "Yes" ? <Check size={20} className="mx-auto text-green-500" /> : <span className="text-gray-400">—</span>
) : (
row.enterprise
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Product", items: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
{ label: "How It Works", href: "#how-it-works" },
{ label: "API Docs", href: "https://docs.humantext.ai" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Security", href: "#" },
{ label: "Compliance", href: "#" }
]
}
]}
copyrightText="© 2025 HumanText AI. All rights reserved."
/>
</div>
</ThemeProvider>
);
}