diff --git a/src/app/api/claude/route.ts b/src/app/api/claude/route.ts new file mode 100644 index 0000000..0e9bc2d --- /dev/null +++ b/src/app/api/claude/route.ts @@ -0,0 +1,50 @@ +import { Anthropic } from '@anthropic-ai/sdk'; +import { NextRequest, NextResponse } from 'next/server'; + +const client = new Anthropic(); + +export async function POST(request: NextRequest) { + try { + const { message } = await request.json(); + + if (!message || typeof message !== 'string') { + return NextResponse.json( + { error: 'Invalid message' }, + { status: 400 } + ); + } + + const response = await client.messages.create({ + model: 'claude-3-5-sonnet-20241022', + max_tokens: 1024, + messages: [ + { + role: 'user', + content: `You are an expert cold email writer. Generate a professional, compelling cold email based on the following brief: "${message}" + +The email should: +- Be concise (100-150 words) +- Have a compelling subject line +- Include a clear call-to-action +- Be personalized and professional +- Avoid being pushy or salesy + +Format the response as: +Subject: [subject line] + +[email body]` + } + ] + }); + + const email = response.content[0].type === 'text' ? response.content[0].text : ''; + + return NextResponse.json({ email }); + } catch (error) { + console.error('Claude API error:', error); + return NextResponse.json( + { error: 'Failed to generate email' }, + { status: 500 } + ); + } +} diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx new file mode 100644 index 0000000..9df407d --- /dev/null +++ b/src/app/features/page.tsx @@ -0,0 +1,145 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen'; +import ContactCTA from '@/components/sections/contact/ContactCTA'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { Mail, Zap, Brain, Shield, BarChart3, Network, Sparkles, Layers } from 'lucide-react'; + +export default function FeaturesPage() { + return ( + + + +
+ +
+ +
+ +
+ + + + ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 276994d..597dbd0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -30,10 +30,11 @@ export default function LandingPage() { ); -} +} \ No newline at end of file diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx new file mode 100644 index 0000000..130483f --- /dev/null +++ b/src/app/pricing/page.tsx @@ -0,0 +1,214 @@ +"use client" + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import PricingCardThree from '@/components/sections/pricing/PricingCardThree'; +import FooterBaseCard from '@/components/sections/footer/FooterBaseCard'; +import { DollarSign, Sparkles, Check, X } from 'lucide-react'; +import { useState } from 'react'; + +export default function PricingPage() { + const [isAnnual, setIsAnnual] = useState(false); + + const plans = [ + { + id: "free", price: isAnnual ? "$0/year" : "$0/month", name: "Free", buttons: [ + { text: "Get Started", href: "/try-free" } + ], + features: [ + "5 free email credits/month", "Basic email templates", "Limited API calls", "Community support", "No credit card required" + ] + }, + { + id: "pro", badge: "Most popular", badgeIcon: Sparkles, + price: isAnnual ? "$99/year" : "$29/month", name: "Pro", buttons: [ + { text: "Start Free Trial", href: "#" } + ], + features: [ + "500 email credits/month", "Advanced AI templates", "Priority API access", "Email & chat support", "Advanced analytics", "Custom email sequences" + ] + }, + { + id: "teams", price: isAnnual ? "$299/year" : "$99/month", name: "Teams", buttons: [ + { text: "Contact Sales", href: "#" } + ], + features: [ + "Unlimited email credits", "Team collaboration tools", "Unlimited API calls", "24/7 dedicated support", "Advanced analytics & reporting", "Custom integrations", "SSO & advanced security" + ] + } + ]; + + return ( + + + +
+
+
+ + Monthly + + + + Annual + + {isAnnual && ( + + Save 20% + + )} +
+
+
+ +
+ +
+ +
+
+
+

Feature Comparison

+

All the details to help you choose

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFreeProTeams
Monthly Credits5500Unlimited
Email Templates
API AccessLimitedPriorityUnlimited
SupportCommunityEmail & Chat24/7 Dedicated
Team Collaboration
Advanced Security
+
+
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 19f4137..f10ce4d 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -13,12 +13,12 @@ --background: #0a0a0a; --card: #1a1a1a; --foreground: #ffffffe6; - --primary-cta: #e6e6e6; + --primary-cta: #8b5cf6; --primary-cta-text: #0a0a0a; --secondary-cta: #1a1a1a; --secondary-cta-text: #ffffffe6; - --accent: #737373; - --background-accent: #737373; + --accent: #3b82f6; + --background-accent: #10b981; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); diff --git a/src/app/try-free/page.tsx b/src/app/try-free/page.tsx new file mode 100644 index 0000000..7d9705e --- /dev/null +++ b/src/app/try-free/page.tsx @@ -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([]); + const [input, setInput] = useState(''); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + const messagesEndRef = useRef(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 ( + + + +
+ +
+ +
+
+
+
+
+

Cold Email Writer

+
+ {credits} Credits Left +
+
+

Describe the recipient or company, and we'll generate a professional cold email.

+
+ +
+
+ {messages.length === 0 ? ( +
+

Your generated emails will appear here

+
+ ) : ( + messages.map((msg, idx) => ( +
+
+

{msg.content}

+
+
+ )) + )} + {loading && ( +
+
+

Generating email...

+
+
+ )} +
+
+ + {error && ( +
+ {error} +
+ )} + +
+ 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" + /> + +
+ + +
+

Out of credits?

+ +
+
+
+
+ + + + ); +} \ No newline at end of file