Add src/app/try-free/page.tsx
This commit is contained in:
222
src/app/try-free/page.tsx
Normal file
222
src/app/try-free/page.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Mail, Sparkles, ArrowRight } from 'lucide-react';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
|
||||
interface Message {
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}
|
||||
|
||||
export default function TryFreePage() {
|
||||
const [credits, setCredits] = useState(5);
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!input.trim()) return;
|
||||
if (credits <= 0) {
|
||||
setError('No credits remaining. Upgrade to continue.');
|
||||
return;
|
||||
}
|
||||
|
||||
const userMessage = input.trim();
|
||||
setInput('');
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/claude', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ message: userMessage })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to generate email');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setMessages(prev => [...prev, { role: 'assistant', content: data.email }]);
|
||||
setCredits(prev => Math.max(0, prev - 1));
|
||||
} catch (err) {
|
||||
setError('Error generating email. Please try again.');
|
||||
setMessages(prev => prev.slice(0, -1));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "Try Free", id: "/try-free" }
|
||||
]}
|
||||
brandName="AISync"
|
||||
bottomLeftText="Global AI Innovation"
|
||||
bottomRightText="hello@aisync.ai"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Try AISync Cold Email Writer"
|
||||
description="Generate compelling cold emails powered by Claude AI. You have 5 free credits to get started."
|
||||
tag="Free Trial"
|
||||
tagIcon={Sparkles}
|
||||
background={{ variant: "plain" }}
|
||||
mediaAnimation="none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="try-free-form" data-section="try-free-form" className="w-full px-4 py-20 md:py-32 bg-background">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-card border border-accent/20 rounded-lg p-8 shadow-lg">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-2xl font-bold text-foreground">Cold Email Writer</h2>
|
||||
<div className="bg-primary-cta text-white px-4 py-2 rounded-full font-semibold">
|
||||
{credits} Credits Left
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-foreground/70">Describe the recipient or company, and we'll generate a professional cold email.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="min-h-96 bg-background border border-accent/10 rounded-lg p-4 overflow-y-auto space-y-4">
|
||||
{messages.length === 0 ? (
|
||||
<div className="text-center text-foreground/50 py-12">
|
||||
<p>Your generated emails will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
messages.map((msg, idx) => (
|
||||
<div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div className={`max-w-xs lg:max-w-md xl:max-w-lg px-4 py-2 rounded-lg ${
|
||||
msg.role === 'user'
|
||||
? 'bg-primary-cta text-white'
|
||||
: 'bg-accent/10 text-foreground border border-accent/20'
|
||||
}`}>
|
||||
<p className="text-sm whitespace-pre-wrap">{msg.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{loading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-accent/10 text-foreground border border-accent/20 px-4 py-2 rounded-lg">
|
||||
<p className="text-sm">Generating email...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="e.g., 'SaaS startup, B2B sales, target CFOs'"
|
||||
disabled={credits === 0 || loading}
|
||||
className="flex-1 px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta disabled:opacity-50"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={credits === 0 || loading || !input.trim()}
|
||||
className="bg-primary-cta text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity flex items-center gap-2"
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate'}
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-accent/10">
|
||||
<p className="text-sm text-foreground/70 mb-2">Out of credits?</p>
|
||||
<button className="w-full bg-secondary-cta text-foreground px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity">
|
||||
Upgrade to Pro
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="AISync"
|
||||
copyrightText="© 2024 AISync. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "/#features-bento" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Reference", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/#about" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact", href: "/#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Community", href: "#" },
|
||||
{ label: "Guides", href: "#" },
|
||||
{ label: "Tutorials", href: "#" },
|
||||
{ label: "Support", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Security", href: "#" },
|
||||
{ label: "Compliance", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user