mirror of
http://88.130.71.182:3000/BlitTech/contexta_fe.git
synced 2026-06-12 23:23:22 +00:00
Initial commit
This commit is contained in:
belviskhoremk
148
src/pages/LandingPage.tsx
Normal file
148
src/pages/LandingPage.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Sparkles, Bot, Globe, Code, Database, Shield, Zap, ArrowRight, Check } from 'lucide-react'
|
||||
|
||||
export const LandingPage: React.FC = () => (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Nav */}
|
||||
<nav className="border-b border-gray-100 sticky top-0 bg-white/80 backdrop-blur-sm z-50">
|
||||
<div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
|
||||
<Sparkles className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-gray-900 text-lg">Contexta</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/marketplace" className="text-sm text-gray-600 hover:text-gray-900">Marketplace</Link>
|
||||
<Link to="/pricing" className="text-sm text-gray-600 hover:text-gray-900">Pricing</Link>
|
||||
<Link to="/login" className="text-sm text-gray-600 hover:text-gray-900">Sign in</Link>
|
||||
<Link to="/signup" className="bg-primary-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-primary-700 font-medium transition-colors">
|
||||
Get started free
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero */}
|
||||
<section className="max-w-6xl mx-auto px-6 pt-20 pb-16 text-center">
|
||||
<div className="inline-flex items-center gap-2 bg-primary-50 text-primary-700 text-sm px-3 py-1 rounded-full mb-6 font-medium">
|
||||
<Zap className="w-3.5 h-3.5" />
|
||||
Build AI chatbots powered by your data
|
||||
</div>
|
||||
<h1 className="text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
Turn your documents into<br />
|
||||
<span className="text-primary-600">intelligent chatbots</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
|
||||
Upload PDFs, DOCX, and CSV files to create RAG-powered chatbots in minutes.
|
||||
Publish to our marketplace or export production-ready code.
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<Link to="/signup" className="bg-primary-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-primary-700 transition-colors flex items-center gap-2">
|
||||
Start for free <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link to="/marketplace" className="border border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition-colors">
|
||||
Explore marketplace
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400 mt-4">No credit card required • Free forever</p>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="bg-gray-50 py-20">
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<h2 className="text-3xl font-bold text-gray-900 text-center mb-12">Everything you need</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: <Bot className="w-6 h-6" />,
|
||||
title: 'RAG-Powered Chatbots',
|
||||
desc: 'Upload your documents and let AI answer questions based on your actual content with citations.',
|
||||
color: 'bg-blue-100 text-blue-600',
|
||||
},
|
||||
{
|
||||
icon: <Globe className="w-6 h-6" />,
|
||||
title: 'Public Marketplace',
|
||||
desc: 'Publish your chatbots to our marketplace so customers can discover and chat with them.',
|
||||
color: 'bg-green-100 text-green-600',
|
||||
},
|
||||
{
|
||||
icon: <Code className="w-6 h-6" />,
|
||||
title: 'Code Export',
|
||||
desc: 'Export a complete FastAPI backend + React widget. Deploy anywhere. No vendor lock-in.',
|
||||
color: 'bg-purple-100 text-purple-600',
|
||||
},
|
||||
{
|
||||
icon: <Database className="w-6 h-6" />,
|
||||
title: 'Multi-Format Support',
|
||||
desc: 'PDF, Word, Excel, CSV, and plain text files — all processed and indexed automatically.',
|
||||
color: 'bg-orange-100 text-orange-600',
|
||||
},
|
||||
{
|
||||
icon: <Sparkles className="w-6 h-6" />,
|
||||
title: 'Premium AI Models',
|
||||
desc: 'Access GPT-4o, Claude 3.5 Sonnet, Gemini 1.5 Pro, and open-source models.',
|
||||
color: 'bg-yellow-100 text-yellow-600',
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
title: 'Data Isolation',
|
||||
desc: 'Each company gets its own isolated vector database. Your data is never mixed with others.',
|
||||
color: 'bg-red-100 text-red-600',
|
||||
},
|
||||
].map(({ icon, title, desc, color }) => (
|
||||
<div key={title} className="bg-white rounded-2xl p-6 border border-gray-200">
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 ${color}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">{title}</h3>
|
||||
<p className="text-sm text-gray-500 leading-relaxed">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing teaser */}
|
||||
<section className="max-w-4xl mx-auto px-6 py-20 text-center">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Start free, scale as you grow</h2>
|
||||
<p className="text-gray-500 mb-8">Build unlimited chatbots for free. Upgrade to publish and unlock premium features.</p>
|
||||
<div className="flex justify-center gap-4 mb-8">
|
||||
{[
|
||||
{ feature: 'Free forever plan', included: true },
|
||||
{ feature: 'Unlimited chatbot creation', included: true },
|
||||
{ feature: 'Publish to marketplace', included: false, note: 'Starter+' },
|
||||
{ feature: 'Code export', included: false, note: 'Pro+' },
|
||||
].map(({ feature, included, note }) => (
|
||||
<div key={feature} className="flex items-center gap-2 text-sm">
|
||||
<div className={`w-5 h-5 rounded-full flex items-center justify-center ${included ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400'}`}>
|
||||
{included ? <Check className="w-3 h-3" /> : <span className="text-xs">–</span>}
|
||||
</div>
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
{note && <span className="text-xs text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{note}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Link to="/pricing" className="text-primary-600 font-medium hover:underline text-sm">
|
||||
View full pricing →
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="bg-primary-600 py-16 text-center">
|
||||
<div className="max-w-2xl mx-auto px-6">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">Ready to build your first chatbot?</h2>
|
||||
<p className="text-primary-100 mb-8">Join thousands of companies using Contexta to power their AI experiences.</p>
|
||||
<Link to="/signup" className="bg-white text-primary-600 px-8 py-3 rounded-xl font-semibold hover:bg-primary-50 transition-colors inline-flex items-center gap-2">
|
||||
Get started for free <ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-gray-100 py-8 text-center text-sm text-gray-400">
|
||||
<p>© 2025 Contexta. Built with ❤️ for builders.</p>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
Reference in New Issue
Block a user